refactor(wms-report): 统一报表页面模板，提取公共逻辑为action-template
1. 将merge、repair下的多个报表页面重构为使用action-template组件 2. 提取自定义导出功能为公共组件CustomExport并复用至receive.vue和action-template 3. 统一报表页面的查询、导出、列配置等公共逻辑
This commit is contained in:
306
klp-ui/src/views/wms/report/components/CustomExport.vue
Normal file
306
klp-ui/src/views/wms/report/components/CustomExport.vue
Normal file
@@ -0,0 +1,306 @@
|
||||
<template>
|
||||
<el-dialog title="自定义导出 - 选择导出列" :visible.sync="visible" width="850px" top="5vh">
|
||||
<div class="custom-export-toolbar">
|
||||
<el-input v-model="columnSearch" placeholder="搜索列名" prefix-icon="el-icon-search" clearable size="small" style="width: 200px" />
|
||||
<div class="custom-export-actions">
|
||||
<el-button size="small" @click="selectAllColumns">全选</el-button>
|
||||
<el-button size="small" @click="invertColumns">反选</el-button>
|
||||
<el-button size="small" @click="selectedColumns = []">清空</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="custom-export-body">
|
||||
<div class="export-left">
|
||||
<div class="export-panel-title">可选列</div>
|
||||
<div class="export-left-scroll">
|
||||
<el-checkbox-group v-model="selectedColumns">
|
||||
<div v-for="(group, gName) in groupedColumns" :key="gName" class="column-group">
|
||||
<div class="column-group-title">{{ gName }}</div>
|
||||
<div class="column-group-items">
|
||||
<el-checkbox
|
||||
v-for="field in group"
|
||||
:key="field.key"
|
||||
:label="field.key"
|
||||
:style="{ display: columnSearch && !filterMatch(field) ? 'none' : '' }"
|
||||
>{{ field.label }}</el-checkbox>
|
||||
</div>
|
||||
</div>
|
||||
</el-checkbox-group>
|
||||
</div>
|
||||
</div>
|
||||
<div class="export-right">
|
||||
<div class="export-panel-title">
|
||||
导出顺序
|
||||
<span class="order-count">{{ orderedColumns.length }}</span>
|
||||
</div>
|
||||
<div class="export-right-scroll">
|
||||
<draggable v-model="orderedColumns" class="ordered-list" ghost-class="ghost" handle=".drag-handle">
|
||||
<div v-for="field in orderedColumns" :key="field" class="ordered-item">
|
||||
<i class="el-icon-rank drag-handle"></i>
|
||||
<span class="order-index">{{ orderedColumns.indexOf(field) + 1 }}</span>
|
||||
<span class="order-label">{{ exportColumns[field] || field }}</span>
|
||||
<i class="el-icon-close order-remove" @click.stop="removeOrderedField(field)"></i>
|
||||
</div>
|
||||
</draggable>
|
||||
<div v-if="orderedColumns.length === 0" class="empty-tip">勾选左侧列后出现在此处，可拖拽排序</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div slot="footer" class="custom-export-footer">
|
||||
<span class="selected-tip">已选 <b>{{ orderedColumns.length }}</b> / {{ flatColumns.length }} 列</span>
|
||||
<el-button @click="visible = false">取消</el-button>
|
||||
<el-button type="primary" @click="doCustomExport" :disabled="orderedColumns.length === 0">
|
||||
导出
|
||||
</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getExportColumns } from "@/api/wms/coil";
|
||||
import draggable from 'vuedraggable';
|
||||
|
||||
export default {
|
||||
name: 'CustomExport',
|
||||
components: { draggable },
|
||||
props: {
|
||||
storageKey: { type: String, required: true },
|
||||
columnGroups: { type: Object, required: true },
|
||||
visible: { type: Boolean, default: false },
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
exportColumns: {},
|
||||
selectedColumns: [],
|
||||
orderedColumns: [],
|
||||
columnSearch: '',
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
groupedColumns() {
|
||||
const result = {}
|
||||
Object.entries(this.columnGroups).forEach(([groupName, fieldKeys]) => {
|
||||
const items = fieldKeys
|
||||
.filter(key => this.exportColumns[key])
|
||||
.map(key => ({ key, label: this.exportColumns[key] }))
|
||||
if (items.length) {
|
||||
result[groupName] = items
|
||||
}
|
||||
})
|
||||
return result
|
||||
},
|
||||
flatColumns() {
|
||||
return Object.values(this.groupedColumns).flat()
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
selectedColumns: {
|
||||
handler(nv, ov) {
|
||||
const newSet = new Set(nv)
|
||||
const oldSet = ov ? new Set(ov) : new Set()
|
||||
this.orderedColumns = this.orderedColumns.filter(f => newSet.has(f))
|
||||
const added = nv.filter(f => !oldSet.has(f))
|
||||
if (added.length) {
|
||||
this.orderedColumns.push(...added)
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
open() {
|
||||
getExportColumns().then(res => {
|
||||
this.exportColumns = res.data
|
||||
const cached = localStorage.getItem(`custom-export-columns-${this.storageKey}`)
|
||||
if (cached) {
|
||||
try {
|
||||
const arr = JSON.parse(cached)
|
||||
if (Array.isArray(arr) && arr.length) {
|
||||
this.selectedColumns = [...arr]
|
||||
this.orderedColumns = [...arr]
|
||||
this.$emit('update:visible', true)
|
||||
return
|
||||
}
|
||||
} catch (e) { /* ignore */ }
|
||||
}
|
||||
this.selectedColumns = []
|
||||
this.orderedColumns = []
|
||||
this.$emit('update:visible', true)
|
||||
})
|
||||
},
|
||||
doCustomExport() {
|
||||
localStorage.setItem(`custom-export-columns-${this.storageKey}`, JSON.stringify(this.orderedColumns))
|
||||
this.$emit('update:visible', false)
|
||||
this.$emit('export', this.orderedColumns)
|
||||
},
|
||||
removeOrderedField(field) {
|
||||
this.selectedColumns = this.selectedColumns.filter(f => f !== field)
|
||||
},
|
||||
filterMatch(field) {
|
||||
const keyword = this.columnSearch.toLowerCase()
|
||||
return !keyword || field.label.toLowerCase().includes(keyword) || field.key.toLowerCase().includes(keyword)
|
||||
},
|
||||
selectAllColumns() {
|
||||
this.selectedColumns = this.flatColumns.map(f => f.key)
|
||||
},
|
||||
invertColumns() {
|
||||
const allKeys = this.flatColumns.map(f => f.key)
|
||||
this.selectedColumns = allKeys.filter(k => !this.selectedColumns.includes(k))
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.custom-export-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 12px;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 1px solid #ebeef5;
|
||||
}
|
||||
.custom-export-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
.custom-export-body {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
height: 420px;
|
||||
}
|
||||
.export-left {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
}
|
||||
.export-right {
|
||||
width: 260px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-left: 1px solid #ebeef5;
|
||||
padding-left: 16px;
|
||||
}
|
||||
.export-panel-title {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
margin-bottom: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
.order-count {
|
||||
background: #409eff;
|
||||
color: #fff;
|
||||
font-size: 11px;
|
||||
padding: 1px 7px;
|
||||
border-radius: 10px;
|
||||
font-weight: normal;
|
||||
}
|
||||
.export-left-scroll {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding-right: 8px;
|
||||
}
|
||||
.export-right-scroll {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.column-group {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.column-group-title {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: #909399;
|
||||
margin-bottom: 6px;
|
||||
padding-left: 8px;
|
||||
border-left: 2px solid #dcdfe6;
|
||||
}
|
||||
.column-group-items {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 2px 8px;
|
||||
}
|
||||
.column-group-items .el-checkbox {
|
||||
margin-right: 0;
|
||||
}
|
||||
.ordered-list {
|
||||
min-height: 60px;
|
||||
}
|
||||
.ordered-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 6px 8px;
|
||||
margin-bottom: 4px;
|
||||
background: #f5f7fa;
|
||||
border: 1px solid #e4e7ed;
|
||||
border-radius: 4px;
|
||||
cursor: default;
|
||||
transition: background .2s;
|
||||
}
|
||||
.ordered-item:hover {
|
||||
background: #ecf5ff;
|
||||
border-color: #c6e2ff;
|
||||
}
|
||||
.ordered-item.ghost {
|
||||
opacity: 0.4;
|
||||
background: #409eff;
|
||||
}
|
||||
.drag-handle {
|
||||
color: #c0c4cc;
|
||||
cursor: grab;
|
||||
margin-right: 6px;
|
||||
}
|
||||
.drag-handle:active {
|
||||
cursor: grabbing;
|
||||
}
|
||||
.order-index {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
font-size: 11px;
|
||||
color: #909399;
|
||||
background: #e4e7ed;
|
||||
border-radius: 50%;
|
||||
margin-right: 6px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.order-label {
|
||||
flex: 1;
|
||||
font-size: 13px;
|
||||
color: #303133;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.order-remove {
|
||||
color: #c0c4cc;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.order-remove:hover {
|
||||
color: #f56c6c;
|
||||
}
|
||||
.empty-tip {
|
||||
color: #c0c4cc;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
padding-top: 30px;
|
||||
}
|
||||
.custom-export-footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.selected-tip {
|
||||
font-size: 13px;
|
||||
color: #909399;
|
||||
}
|
||||
.selected-tip b {
|
||||
color: #409eff;
|
||||
}
|
||||
</style>
|
||||
@@ -1,14 +1,14 @@
|
||||
<template>
|
||||
<div>
|
||||
<merge-template :actionType="201"></merge-template>
|
||||
<action-template :actionType="201" reportType="all"></action-template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import mergeTemplate from "@/views/wms/report/template/merge.vue";
|
||||
import actionTemplate from "@/views/wms/report/template/action.vue";
|
||||
export default {
|
||||
components: {
|
||||
mergeTemplate,
|
||||
actionTemplate,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@@ -1,14 +1,14 @@
|
||||
<template>
|
||||
<div>
|
||||
<merge-template :actionType="206"></merge-template>
|
||||
<action-template :actionType="206" reportType="all"></action-template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import mergeTemplate from "@/views/wms/report/template/merge.vue";
|
||||
import actionTemplate from "@/views/wms/report/template/action.vue";
|
||||
export default {
|
||||
components: {
|
||||
mergeTemplate,
|
||||
actionTemplate,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@@ -1,299 +1,14 @@
|
||||
<template>
|
||||
<div class="app-container" v-loading="loading">
|
||||
<el-row>
|
||||
<el-form label-width="80px" inline>
|
||||
<el-form-item label="开始时间" prop="startTime">
|
||||
<el-date-picker style="width: 200px;" v-model="queryParams.startTime" type="datetime"
|
||||
value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择开始时间"></el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="结束时间" prop="endTime">
|
||||
<el-date-picker style="width: 200px;" v-model="queryParams.endTime" type="datetime"
|
||||
value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择结束时间"></el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="入场钢卷号" prop="enterCoilNo">
|
||||
<el-input style="width: 200px; display: inline-block;" v-model="queryParams.enterCoilNo"
|
||||
placeholder="请输入入场钢卷号" clearable @keyup.enter.native="handleQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item label="当前钢卷号" prop="currentCoilNo">
|
||||
<el-input style="width: 200px;" v-model="queryParams.currentCoilNo" placeholder="请输入当前钢卷号" clearable
|
||||
@keyup.enter.native="handleQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item label="产品名称" prop="itemName">
|
||||
<el-input style="width: 200px;" v-model="queryParams.itemName" placeholder="请输入产品名称" clearable
|
||||
@keyup.enter.native="handleQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item label="规格" prop="itemSpecification">
|
||||
<memo-input style="width: 200px;" v-model="queryParams.itemSpecification" storageKey="coilSpec"
|
||||
placeholder="请选择规格" clearable @keyup.enter.native="handleQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item label="材质" prop="itemMaterial">
|
||||
<muti-select style="width: 200px;" v-model="queryParams.itemMaterial" :options="dict.type.coil_material"
|
||||
placeholder="请选择材质" clearable @keyup.enter.native="handleQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item label="厂家" prop="itemManufacturer">
|
||||
<muti-select style="width: 200px;" v-model="queryParams.itemManufacturer"
|
||||
:options="dict.type.coil_manufacturer" placeholder="请选择厂家" clearable @keyup.enter.native="handleQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="getList">查询</el-button>
|
||||
<el-button type="primary" @click="exportData">导出产出钢卷</el-button>
|
||||
<el-button type="primary" @click="exportLossData">导出消耗钢卷</el-button>
|
||||
<el-button type="primary" @click="settingVisible = true">列设置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
|
||||
<el-descriptions title="统计信息" :column="3" border>
|
||||
<el-descriptions-item label="产出数量">{{ summary.outCount }}</el-descriptions-item>
|
||||
<el-descriptions-item label="产出总重">{{ summary.outTotalWeight }}t</el-descriptions-item>
|
||||
<el-descriptions-item label="产出均重">{{ summary.outAvgWeight }}t</el-descriptions-item>
|
||||
|
||||
<el-descriptions-item label="消耗数量">{{ summary.lossCount }}</el-descriptions-item>
|
||||
<el-descriptions-item label="消耗总重">{{ summary.lossTotalWeight }}t</el-descriptions-item>
|
||||
<el-descriptions-item label="消耗均重">{{ summary.lossAvgWeight }}t</el-descriptions-item>
|
||||
|
||||
<el-descriptions-item label="数量差值">{{ summary.countDiff }}</el-descriptions-item>
|
||||
<el-descriptions-item label="总重差值">{{ summary.weightDiff }}</el-descriptions-item>
|
||||
<el-descriptions-item label="均重差值">{{ summary.avgWeightDiff }}t</el-descriptions-item>
|
||||
<!-- <el-descriptions-item label="合计均重">{{ summary.totalAvgWeight }}t</el-descriptions-item> -->
|
||||
|
||||
<!-- 成品率 -->
|
||||
<el-descriptions-item label="成品率">{{ summary.passRate }}</el-descriptions-item>
|
||||
<el-descriptions-item label="损耗率">{{ summary.lossRate }}</el-descriptions-item>
|
||||
<!-- 异常率 -->
|
||||
<el-descriptions-item label="异常率">{{ summary.abRate }}</el-descriptions-item>
|
||||
<!-- 正品率 -->
|
||||
<el-descriptions-item label="正品率">{{ summary.passRate2 }}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
|
||||
<!-- 已处理M统计信息 -->
|
||||
<!-- <el-descriptions title="已处理M统计信息" :column="3" border>
|
||||
<el-descriptions-item label="产出数量">{{ mSummary.outCount }}</el-descriptions-item>
|
||||
<el-descriptions-item label="产出总重">{{ mSummary.outTotalWeight }}t</el-descriptions-item>
|
||||
<el-descriptions-item label="产出均重">{{ mSummary.outAvgWeight }}t</el-descriptions-item>
|
||||
|
||||
<el-descriptions-item label="消耗数量">{{ mSummary.lossCount }}</el-descriptions-item>
|
||||
<el-descriptions-item label="消耗总重">{{ mSummary.lossTotalWeight }}t</el-descriptions-item>
|
||||
<el-descriptions-item label="消耗均重">{{ mSummary.lossAvgWeight }}t</el-descriptions-item>
|
||||
|
||||
<el-descriptions-item label="数量差值">{{ mSummary.countDiff }}</el-descriptions-item>
|
||||
<el-descriptions-item label="总重差值">{{ mSummary.weightDiff }}</el-descriptions-item>
|
||||
<el-descriptions-item label="均重差值">{{ mSummary.avgWeightDiff }}t</el-descriptions-item>
|
||||
<el-descriptions-item label="成品率">{{ mSummary.passRate }}</el-descriptions-item>
|
||||
<el-descriptions-item label="损耗率">{{ mSummary.lossRate }}</el-descriptions-item>
|
||||
<el-descriptions-item label="异常率">{{ mSummary.abRate }}</el-descriptions-item>
|
||||
<el-descriptions-item label="正品率">{{ mSummary.passRate2 }}</el-descriptions-item>
|
||||
</el-descriptions> -->
|
||||
|
||||
<el-descriptions title="明细信息" :column="3" border>
|
||||
</el-descriptions>
|
||||
<el-tabs v-model="activeTab">
|
||||
<el-tab-pane label="投入钢卷" name="loss">
|
||||
<coil-table :data="lossList" :columns="lossColumns" :loading="loading" height="calc(100vh - 360px)" />
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="产出钢卷" name="output">
|
||||
<coil-table :data="outList" :columns="outputColumns" :loading="loading" height="calc(100vh - 360px)" />
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
|
||||
<el-dialog title="列设置" :visible.sync="settingVisible" width="50%">
|
||||
<el-radio-group v-model="activeColumnConfig">
|
||||
<el-radio-button label="coil-report-loss">投入明细配置</el-radio-button>
|
||||
<el-radio-button label="coil-report-output">产出明细配置</el-radio-button>
|
||||
</el-radio-group>
|
||||
<columns-setting :reportType="activeColumnConfig"></columns-setting>
|
||||
</el-dialog>
|
||||
<div>
|
||||
<action-template :actionType="'201,202,203,204,205,206'" reportType="all"></action-template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listCoilWithIds } from "@/api/wms/coil";
|
||||
import {
|
||||
listPendingAction,
|
||||
} from '@/api/wms/pendingAction';
|
||||
import MemoInput from "@/components/MemoInput";
|
||||
import MutiSelect from "@/components/MutiSelect";
|
||||
import ProductInfo from "@/components/KLPService/Renderer/ProductInfo";
|
||||
import RawMaterialInfo from "@/components/KLPService/Renderer/RawMaterialInfo";
|
||||
import CoilNo from "@/components/KLPService/Renderer/CoilNo.vue";
|
||||
import { calcSummary, calcMSummary } from "@/views/wms/report/js/calc";
|
||||
import CoilTable from "@/views/wms/report/components/coilTable";
|
||||
import ColumnsSetting from "@/views/wms/report/components/setting/columns";
|
||||
|
||||
import actionTemplate from "@/views/wms/report/template/action.vue";
|
||||
export default {
|
||||
name: 'MergeTemplate',
|
||||
props: {
|
||||
actionType: {
|
||||
type: Number,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
components: {
|
||||
MemoInput,
|
||||
MutiSelect,
|
||||
ProductInfo,
|
||||
RawMaterialInfo,
|
||||
CoilNo,
|
||||
CoilTable,
|
||||
ColumnsSetting
|
||||
actionTemplate,
|
||||
},
|
||||
dicts: ['product_coil_status', 'coil_material', 'coil_itemname', 'coil_manufacturer'],
|
||||
data() {
|
||||
// 工具函数：个位数补零
|
||||
const addZero = (num) => num.toString().padStart(2, '0')
|
||||
|
||||
// 获取当前日期（默认选中当天）
|
||||
const now = new Date()
|
||||
const currentDate = `${now.getFullYear()}-${addZero(now.getMonth() + 1)}`
|
||||
|
||||
/**
|
||||
* 生成指定日期/月份的时间范围字符串
|
||||
* @param {string} dateStr - 支持格式：yyyy-MM（月份） 或 yyyy-MM-dd（具体日期）
|
||||
* @returns {object} 包含start（开始时间）和end（结束时间）的对象
|
||||
*/
|
||||
const getDayTimeRange = (dateStr) => {
|
||||
// 先校验输入格式是否合法
|
||||
const monthPattern = /^\d{4}-\d{2}$/; // yyyy-MM 正则
|
||||
const dayPattern = /^\d{4}-\d{2}-\d{2}$/; // yyyy-MM-dd 正则
|
||||
|
||||
if (!monthPattern.test(dateStr) && !dayPattern.test(dateStr)) {
|
||||
throw new Error('输入格式错误，请传入 yyyy-MM 或 yyyy-MM-dd 格式的字符串');
|
||||
}
|
||||
|
||||
let startDate, endDate;
|
||||
|
||||
if (monthPattern.test(dateStr)) {
|
||||
// 处理 yyyy-MM 格式：获取本月第一天和最后一天
|
||||
const [year, month] = dateStr.split('-').map(Number);
|
||||
// 月份是0基的（0=1月，1=2月...），所以要减1
|
||||
// 第一天：yyyy-MM-01
|
||||
startDate = `${dateStr}-01`;
|
||||
// 最后一天：通过 new Date(year, month, 0) 计算（month是原始月份，比如2代表2月，传2则取3月0日=2月最后一天）
|
||||
const lastDayOfMonth = new Date(year, month, 0).getDate();
|
||||
endDate = `${dateStr}-${lastDayOfMonth.toString().padStart(2, '0')}`;
|
||||
} else {
|
||||
// 处理 yyyy-MM-dd 格式：直接使用传入的日期
|
||||
startDate = dateStr;
|
||||
endDate = dateStr;
|
||||
}
|
||||
|
||||
// 拼接时间部分
|
||||
return {
|
||||
start: `${startDate} 00:00:00`,
|
||||
end: `${endDate} 23:59:59`
|
||||
};
|
||||
};
|
||||
|
||||
const { start, end } = getDayTimeRange(currentDate)
|
||||
return {
|
||||
lossList: [],
|
||||
outList: [],
|
||||
activeTab: 'loss',
|
||||
activeColumnConfig: 'coil-report-loss',
|
||||
settingVisible: false,
|
||||
loading: false,
|
||||
queryParams: {
|
||||
startTime: start,
|
||||
endTime: end,
|
||||
enterCoilNo: '',
|
||||
currentCoilNo: '',
|
||||
warehouseId: '',
|
||||
itemName: '',
|
||||
itemSpecification: '',
|
||||
itemMaterial: '',
|
||||
itemManufacturer: '',
|
||||
pageSize: 9999,
|
||||
pageNum: 1,
|
||||
},
|
||||
lossColumns: [],
|
||||
outputColumns: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
summary() {
|
||||
return calcSummary(this.outList, this.lossList)
|
||||
},
|
||||
// mSummary() {
|
||||
// return calcMSummary(this.outList, this.lossList)
|
||||
// },
|
||||
},
|
||||
created() {
|
||||
this.handleQuery()
|
||||
this.loadColumns()
|
||||
},
|
||||
methods: {
|
||||
handleQuery() {
|
||||
this.getList()
|
||||
},
|
||||
async getList() {
|
||||
this.loading = true;
|
||||
const res1 = await listPendingAction({ ...this.queryParams, actionTypes: '201,202,203,204,205,206', actionStatus: 2 });
|
||||
|
||||
const res = res1.rows;
|
||||
// 获取两层数据
|
||||
const lossIds = res.map(item => item.coilId);
|
||||
// 使用new Set去重
|
||||
const outIds = [...new Set(res.map(item => item.processedCoilIds))];
|
||||
|
||||
if (lossIds.length === 0 || outIds.length === 0) {
|
||||
this.$message({
|
||||
message: '查询结果为空',
|
||||
type: 'warning'
|
||||
})
|
||||
this.loading = false;
|
||||
return
|
||||
}
|
||||
|
||||
const [lossRes, outRes] = await Promise.all([
|
||||
listCoilWithIds({ ...this.queryParams, coilIds: lossIds.join(',') || '', startTime: '', endTime: '' }),
|
||||
listCoilWithIds({ ...this.queryParams, coilIds: outIds.join(',') || '', startTime: '', endTime: '' }),
|
||||
]);
|
||||
this.lossList = lossRes.rows.map(item => {
|
||||
// 计算宽度和厚度，将规格按照*分割，*前的是厚度，*后的是宽度
|
||||
const [thickness, width] = item.specification?.split('*') || []
|
||||
return {
|
||||
...item,
|
||||
computedThickness: parseFloat(thickness),
|
||||
computedWidth: parseFloat(width),
|
||||
}
|
||||
});
|
||||
this.outList = outRes.rows.map(item => {
|
||||
// 计算宽度和厚度，将规格按照*分割，*前的是厚度，*后的是宽度
|
||||
const [thickness, width] = item.specification?.split('*') || []
|
||||
return {
|
||||
...item,
|
||||
computedThickness: parseFloat(thickness),
|
||||
computedWidth: parseFloat(width),
|
||||
}
|
||||
});
|
||||
this.loading = false;
|
||||
},
|
||||
// 导出
|
||||
exportData() {
|
||||
if (this.outList.length === 0) {
|
||||
this.$message.warning('暂无数据可导出')
|
||||
return
|
||||
}
|
||||
this.download('wms/materialCoil/export', {
|
||||
coilIds: this.outList.map(item => item.coilId).join(',')
|
||||
}, `materialCoil_${new Date().getTime()}.xlsx`)
|
||||
},
|
||||
exportLossData() {
|
||||
if (this.lossList.length === 0) {
|
||||
this.$message.warning('暂无数据可导出')
|
||||
return
|
||||
}
|
||||
this.download('wms/materialCoil/export', {
|
||||
coilIds: this.lossList.map(item => item.coilId).join(',')
|
||||
}, `materialCoil_${new Date().getTime()}.xlsx`)
|
||||
},
|
||||
// 加载列设置
|
||||
loadColumns() {
|
||||
this.lossColumns = JSON.parse(localStorage.getItem('preference-tableColumns-coil-report-loss') || '[]') || []
|
||||
this.outputColumns = JSON.parse(localStorage.getItem('preference-tableColumns-coil-report-output') || '[]') || []
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
@@ -1,14 +1,14 @@
|
||||
<template>
|
||||
<div>
|
||||
<merge-template :actionType="204"></merge-template>
|
||||
<action-template :actionType="204" reportType="all"></action-template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import mergeTemplate from "@/views/wms/report/template/merge.vue";
|
||||
import actionTemplate from "@/views/wms/report/template/action.vue";
|
||||
export default {
|
||||
components: {
|
||||
mergeTemplate,
|
||||
actionTemplate,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@@ -1,14 +1,14 @@
|
||||
<template>
|
||||
<div>
|
||||
<merge-template :actionType="205"></merge-template>
|
||||
<action-template :actionType="205" reportType="all"></action-template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import mergeTemplate from "@/views/wms/report/template/merge.vue";
|
||||
import actionTemplate from "@/views/wms/report/template/action.vue";
|
||||
export default {
|
||||
components: {
|
||||
mergeTemplate,
|
||||
actionTemplate,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@@ -1,14 +1,14 @@
|
||||
<template>
|
||||
<div>
|
||||
<merge-template :actionType="203"></merge-template>
|
||||
<action-template :actionType="203" reportType="all"></action-template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import mergeTemplate from "@/views/wms/report/template/merge.vue";
|
||||
import actionTemplate from "@/views/wms/report/template/action.vue";
|
||||
export default {
|
||||
components: {
|
||||
mergeTemplate,
|
||||
actionTemplate,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@@ -1,14 +1,14 @@
|
||||
<template>
|
||||
<div>
|
||||
<merge-template :actionType="202"></merge-template>
|
||||
<action-template :actionType="202" reportType="all"></action-template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import mergeTemplate from "@/views/wms/report/template/merge.vue";
|
||||
import actionTemplate from "@/views/wms/report/template/action.vue";
|
||||
export default {
|
||||
components: {
|
||||
mergeTemplate,
|
||||
actionTemplate,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@@ -86,66 +86,18 @@
|
||||
<columns-setting :reportType="activeColumnConfig"></columns-setting>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 自定义导出列选择弹窗 -->
|
||||
<el-dialog title="自定义导出 - 选择导出列" :visible.sync="customExportVisible" width="850px" top="5vh">
|
||||
<div class="custom-export-toolbar">
|
||||
<el-input v-model="columnSearch" placeholder="搜索列名" prefix-icon="el-icon-search" clearable size="small" style="width: 200px" />
|
||||
<div class="custom-export-actions">
|
||||
<el-button size="small" @click="selectAllColumns">全选</el-button>
|
||||
<el-button size="small" @click="invertColumns">反选</el-button>
|
||||
<el-button size="small" @click="selectedColumns = []">清空</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="custom-export-body">
|
||||
<div class="export-left">
|
||||
<div class="export-panel-title">可选列</div>
|
||||
<div class="export-left-scroll">
|
||||
<el-checkbox-group v-model="selectedColumns">
|
||||
<div v-for="(group, gName) in groupedColumns" :key="gName" class="column-group">
|
||||
<div class="column-group-title">{{ gName }}</div>
|
||||
<div class="column-group-items">
|
||||
<el-checkbox
|
||||
v-for="field in group"
|
||||
:key="field.key"
|
||||
:label="field.key"
|
||||
:style="{ display: columnSearch && !filterMatch(field) ? 'none' : '' }"
|
||||
>{{ field.label }}</el-checkbox>
|
||||
</div>
|
||||
</div>
|
||||
</el-checkbox-group>
|
||||
</div>
|
||||
</div>
|
||||
<div class="export-right">
|
||||
<div class="export-panel-title">
|
||||
导出顺序
|
||||
<span class="order-count">{{ orderedColumns.length }}</span>
|
||||
</div>
|
||||
<div class="export-right-scroll">
|
||||
<draggable v-model="orderedColumns" class="ordered-list" ghost-class="ghost" handle=".drag-handle">
|
||||
<div v-for="field in orderedColumns" :key="field" class="ordered-item">
|
||||
<i class="el-icon-rank drag-handle"></i>
|
||||
<span class="order-index">{{ orderedColumns.indexOf(field) + 1 }}</span>
|
||||
<span class="order-label">{{ exportColumns[field] || field }}</span>
|
||||
<i class="el-icon-close order-remove" @click.stop="removeOrderedField(field)"></i>
|
||||
</div>
|
||||
</draggable>
|
||||
<div v-if="orderedColumns.length === 0" class="empty-tip">勾选左侧列后出现在此处，可拖拽排序</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div slot="footer" class="custom-export-footer">
|
||||
<span class="selected-tip">已选 <b>{{ orderedColumns.length }}</b> / {{ flatColumns.length }} 列</span>
|
||||
<el-button @click="customExportVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="doCustomExport" :disabled="orderedColumns.length === 0">
|
||||
导出
|
||||
</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<custom-export
|
||||
ref="customExport"
|
||||
:visible.sync="customExportVisible"
|
||||
storage-key="coil-report-receive"
|
||||
:column-groups="columnGroups"
|
||||
@export="handleCustomExport"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listCoilWithIds, getExportColumns } from "@/api/wms/coil";
|
||||
import { listCoilWithIds } from "@/api/wms/coil";
|
||||
import {
|
||||
listPendingAction,
|
||||
} from '@/api/wms/pendingAction';
|
||||
@@ -162,7 +114,7 @@ import TimeRangePicker from "@/views/wms/report/components/timeRangePicker.vue";
|
||||
import HierarchicalPivot from "@/views/wms/report/components/hierarchicalPivot/index.vue";
|
||||
import CrossTable from "@/views/wms/report/components/crossTable/index.vue";
|
||||
import { saveReportFile } from "@/views/wms/report/js/reportFile";
|
||||
import draggable from 'vuedraggable';
|
||||
import CustomExport from "@/views/wms/report/components/CustomExport.vue";
|
||||
|
||||
|
||||
export default {
|
||||
@@ -178,7 +130,7 @@ export default {
|
||||
TimeRangePicker,
|
||||
HierarchicalPivot,
|
||||
CrossTable,
|
||||
draggable,
|
||||
CustomExport,
|
||||
},
|
||||
dicts: ['product_coil_status', 'coil_material', 'coil_itemname', 'coil_manufacturer', 'coil_quality_status'],
|
||||
data() {
|
||||
@@ -206,10 +158,6 @@ export default {
|
||||
activeColumnConfig: 'coil-report-receive',
|
||||
settingVisible: false,
|
||||
customExportVisible: false,
|
||||
exportColumns: {},
|
||||
selectedColumns: [],
|
||||
orderedColumns: [],
|
||||
columnSearch: '',
|
||||
columnGroups: {
|
||||
'基本信息': ['itemTypeDesc', 'warehouseName', 'actualWarehouseName', 'dataTypeText'],
|
||||
'钢卷号': ['enterCoilNo', 'supplierCoilNo', 'currentCoilNo'],
|
||||
@@ -295,38 +243,22 @@ export default {
|
||||
coilIds() {
|
||||
return this.list.map(item => item.coilId).join(',')
|
||||
},
|
||||
groupedColumns() {
|
||||
const result = {}
|
||||
Object.entries(this.columnGroups).forEach(([groupName, fieldKeys]) => {
|
||||
const items = fieldKeys
|
||||
.filter(key => this.exportColumns[key])
|
||||
.map(key => ({ key, label: this.exportColumns[key] }))
|
||||
if (items.length) {
|
||||
result[groupName] = items
|
||||
}
|
||||
})
|
||||
return result
|
||||
actionIds() {
|
||||
const ids = this.list.map(item => item.actionId).filter(id => id)
|
||||
return ids.length ? ids.join(',') : ''
|
||||
},
|
||||
flatColumns() {
|
||||
return Object.values(this.groupedColumns).flat()
|
||||
exportIdParams() {
|
||||
return this.actionIds ? { actionIds: this.actionIds } : { coilIds: this.coilIds }
|
||||
},
|
||||
hasExportData() {
|
||||
return !!(this.coilIds || this.actionIds)
|
||||
},
|
||||
exportQueryParams() {
|
||||
const { pageNum, pageSize, ...filters } = this.queryParams
|
||||
return filters
|
||||
},
|
||||
|
||||
},
|
||||
watch: {
|
||||
selectedColumns: {
|
||||
immediate: false,
|
||||
handler(nv, ov) {
|
||||
const newSet = new Set(nv)
|
||||
const oldSet = ov ? new Set(ov) : new Set()
|
||||
// 移除取消勾选的列
|
||||
this.orderedColumns = this.orderedColumns.filter(f => newSet.has(f))
|
||||
// 新勾选的追加到末尾
|
||||
const added = nv.filter(f => !oldSet.has(f))
|
||||
if (added.length) {
|
||||
this.orderedColumns.push(...added)
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 加载列设置
|
||||
@@ -384,55 +316,25 @@ export default {
|
||||
// 导出
|
||||
exportData() {
|
||||
this.download('wms/materialCoil/export', {
|
||||
coilIds: this.coilIds,
|
||||
...this.exportQueryParams,
|
||||
...this.exportIdParams,
|
||||
}, `materialCoil_${new Date().getTime()}.xlsx`)
|
||||
},
|
||||
// 打开自定义导出弹窗
|
||||
openCustomExport() {
|
||||
getExportColumns().then(res => {
|
||||
this.exportColumns = res.data
|
||||
// 读缓存：上次保存的列顺序
|
||||
const cached = localStorage.getItem('custom-export-columns-coil-report-receive')
|
||||
if (cached) {
|
||||
try {
|
||||
const arr = JSON.parse(cached)
|
||||
if (Array.isArray(arr) && arr.length) {
|
||||
this.selectedColumns = [...arr]
|
||||
this.orderedColumns = [...arr]
|
||||
this.customExportVisible = true
|
||||
return
|
||||
}
|
||||
} catch (e) { /* ignore */ }
|
||||
}
|
||||
this.selectedColumns = []
|
||||
this.orderedColumns = []
|
||||
this.customExportVisible = true
|
||||
})
|
||||
if (!this.hasExportData) {
|
||||
this.$message({ message: '暂无数据可导出', type: 'warning' })
|
||||
return
|
||||
}
|
||||
this.$refs.customExport.open()
|
||||
},
|
||||
// 执行自定义导出（按 orderedColumns 顺序）
|
||||
doCustomExport() {
|
||||
// 缓存当前配置
|
||||
localStorage.setItem('custom-export-columns-coil-report-receive', JSON.stringify(this.orderedColumns))
|
||||
this.customExportVisible = false
|
||||
handleCustomExport(orderedColumns) {
|
||||
this.download('wms/materialCoil/exportCustomOrdered', {
|
||||
coilIds: this.coilIds,
|
||||
columnsOrdered: this.orderedColumns.join(','),
|
||||
...this.exportQueryParams,
|
||||
...this.exportIdParams,
|
||||
columnsOrdered: orderedColumns.join(','),
|
||||
}, `materialCoil_${new Date().getTime()}.xlsx`)
|
||||
},
|
||||
removeOrderedField(field) {
|
||||
this.selectedColumns = this.selectedColumns.filter(f => f !== field)
|
||||
},
|
||||
filterMatch(field) {
|
||||
const keyword = this.columnSearch.toLowerCase()
|
||||
return !keyword || field.label.toLowerCase().includes(keyword) || field.key.toLowerCase().includes(keyword)
|
||||
},
|
||||
selectAllColumns() {
|
||||
this.selectedColumns = this.flatColumns.map(f => f.key)
|
||||
},
|
||||
invertColumns() {
|
||||
const allKeys = this.flatColumns.map(f => f.key)
|
||||
this.selectedColumns = allKeys.filter(k => !this.selectedColumns.includes(k))
|
||||
},
|
||||
saveReport() {
|
||||
this.loading = true
|
||||
saveReportFile(this.coilIds, {
|
||||
@@ -462,157 +364,4 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.custom-export-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 12px;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 1px solid #ebeef5;
|
||||
}
|
||||
.custom-export-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
.custom-export-body {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
height: 420px;
|
||||
}
|
||||
.export-left {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
}
|
||||
.export-right {
|
||||
width: 260px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-left: 1px solid #ebeef5;
|
||||
padding-left: 16px;
|
||||
}
|
||||
.export-panel-title {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
margin-bottom: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
.order-count {
|
||||
background: #409eff;
|
||||
color: #fff;
|
||||
font-size: 11px;
|
||||
padding: 1px 7px;
|
||||
border-radius: 10px;
|
||||
font-weight: normal;
|
||||
}
|
||||
.export-left-scroll {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding-right: 8px;
|
||||
}
|
||||
.export-right-scroll {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.column-group {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.column-group-title {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: #909399;
|
||||
margin-bottom: 6px;
|
||||
padding-left: 8px;
|
||||
border-left: 2px solid #dcdfe6;
|
||||
}
|
||||
.column-group-items {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 2px 8px;
|
||||
}
|
||||
.column-group-items .el-checkbox {
|
||||
margin-right: 0;
|
||||
}
|
||||
.ordered-list {
|
||||
min-height: 60px;
|
||||
}
|
||||
.ordered-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 6px 8px;
|
||||
margin-bottom: 4px;
|
||||
background: #f5f7fa;
|
||||
border: 1px solid #e4e7ed;
|
||||
border-radius: 4px;
|
||||
cursor: default;
|
||||
transition: background .2s;
|
||||
}
|
||||
.ordered-item:hover {
|
||||
background: #ecf5ff;
|
||||
border-color: #c6e2ff;
|
||||
}
|
||||
.ordered-item.ghost {
|
||||
opacity: 0.4;
|
||||
background: #409eff;
|
||||
}
|
||||
.drag-handle {
|
||||
color: #c0c4cc;
|
||||
cursor: grab;
|
||||
margin-right: 6px;
|
||||
}
|
||||
.drag-handle:active {
|
||||
cursor: grabbing;
|
||||
}
|
||||
.order-index {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
font-size: 11px;
|
||||
color: #909399;
|
||||
background: #e4e7ed;
|
||||
border-radius: 50%;
|
||||
margin-right: 6px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.order-label {
|
||||
flex: 1;
|
||||
font-size: 13px;
|
||||
color: #303133;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.order-remove {
|
||||
color: #c0c4cc;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.order-remove:hover {
|
||||
color: #f56c6c;
|
||||
}
|
||||
.empty-tip {
|
||||
color: #c0c4cc;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
padding-top: 30px;
|
||||
}
|
||||
.custom-export-footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.selected-tip {
|
||||
font-size: 13px;
|
||||
color: #909399;
|
||||
}
|
||||
.selected-tip b {
|
||||
color: #409eff;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,14 +1,14 @@
|
||||
<template>
|
||||
<div>
|
||||
<merge-template :actionType="520"></merge-template>
|
||||
<action-template :actionType="520" reportType="all"></action-template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import mergeTemplate from "@/views/wms/report/template/merge.vue";
|
||||
import actionTemplate from "@/views/wms/report/template/action.vue";
|
||||
export default {
|
||||
components: {
|
||||
mergeTemplate,
|
||||
actionTemplate,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@@ -1,14 +1,14 @@
|
||||
<template>
|
||||
<div>
|
||||
<merge-template :actionType="525"></merge-template>
|
||||
<action-template :actionType="525" reportType="all"></action-template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import mergeTemplate from "@/views/wms/report/template/merge.vue";
|
||||
import actionTemplate from "@/views/wms/report/template/action.vue";
|
||||
export default {
|
||||
components: {
|
||||
mergeTemplate,
|
||||
actionTemplate,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@@ -1,300 +1,14 @@
|
||||
<template>
|
||||
<div class="app-container" v-loading="loading">
|
||||
<el-row>
|
||||
<el-form label-width="80px" inline>
|
||||
<el-form-item label="开始时间" prop="startTime">
|
||||
<el-date-picker style="width: 200px;" v-model="queryParams.startTime" type="datetime"
|
||||
value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择开始时间"></el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="结束时间" prop="endTime">
|
||||
<el-date-picker style="width: 200px;" v-model="queryParams.endTime" type="datetime"
|
||||
value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择结束时间"></el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="入场钢卷号" prop="enterCoilNo">
|
||||
<el-input style="width: 200px; display: inline-block;" v-model="queryParams.enterCoilNo"
|
||||
placeholder="请输入入场钢卷号" clearable @keyup.enter.native="handleQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item label="当前钢卷号" prop="currentCoilNo">
|
||||
<el-input style="width: 200px;" v-model="queryParams.currentCoilNo" placeholder="请输入当前钢卷号" clearable
|
||||
@keyup.enter.native="handleQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item label="产品名称" prop="itemName">
|
||||
<el-input style="width: 200px;" v-model="queryParams.itemName" placeholder="请输入产品名称" clearable
|
||||
@keyup.enter.native="handleQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item label="规格" prop="itemSpecification">
|
||||
<memo-input style="width: 200px;" v-model="queryParams.itemSpecification" storageKey="coilSpec"
|
||||
placeholder="请选择规格" clearable @keyup.enter.native="handleQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item label="材质" prop="itemMaterial">
|
||||
<muti-select style="width: 200px;" v-model="queryParams.itemMaterial" :options="dict.type.coil_material"
|
||||
placeholder="请选择材质" clearable @keyup.enter.native="handleQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item label="厂家" prop="itemManufacturer">
|
||||
<muti-select style="width: 200px;" v-model="queryParams.itemManufacturer"
|
||||
:options="dict.type.coil_manufacturer" placeholder="请选择厂家" clearable @keyup.enter.native="handleQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="getList">查询</el-button>
|
||||
<el-button type="primary" @click="exportData">导出产出钢卷</el-button>
|
||||
<el-button type="primary" @click="exportLossData">导出消耗钢卷</el-button>
|
||||
<el-button type="primary" @click="settingVisible = true">列设置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
|
||||
<el-descriptions title="统计信息" :column="3" border>
|
||||
<el-descriptions-item label="产出数量">{{ summary.outCount }}</el-descriptions-item>
|
||||
<el-descriptions-item label="产出总重">{{ summary.outTotalWeight }}t</el-descriptions-item>
|
||||
<el-descriptions-item label="产出均重">{{ summary.outAvgWeight }}t</el-descriptions-item>
|
||||
|
||||
<el-descriptions-item label="消耗数量">{{ summary.lossCount }}</el-descriptions-item>
|
||||
<el-descriptions-item label="消耗总重">{{ summary.lossTotalWeight }}t</el-descriptions-item>
|
||||
<el-descriptions-item label="消耗均重">{{ summary.lossAvgWeight }}t</el-descriptions-item>
|
||||
|
||||
<el-descriptions-item label="合计数量">{{ summary.totalCount }}</el-descriptions-item>
|
||||
<el-descriptions-item label="合计总重">{{ summary.totalWeight }}t</el-descriptions-item>
|
||||
<el-descriptions-item label="合计均重">{{ summary.totalAvgWeight }}t</el-descriptions-item>
|
||||
|
||||
<!-- 成品率 -->
|
||||
<el-descriptions-item label="成品率">{{ summary.passRate }}</el-descriptions-item>
|
||||
<el-descriptions-item label="损耗率">{{ summary.lossRate }}</el-descriptions-item>
|
||||
<!-- 异常率 -->
|
||||
<el-descriptions-item label="异常率">{{ summary.abRate }}</el-descriptions-item>
|
||||
<!-- 正品率 -->
|
||||
<el-descriptions-item label="正品率">{{ summary.passRate2 }}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
|
||||
<!-- 已处理M统计信息 -->
|
||||
<!-- <el-descriptions title="已处理M统计信息" :column="3" border>
|
||||
<el-descriptions-item label="产出数量">{{ mSummary.outCount }}</el-descriptions-item>
|
||||
<el-descriptions-item label="产出总重">{{ mSummary.outTotalWeight }}t</el-descriptions-item>
|
||||
<el-descriptions-item label="产出均重">{{ mSummary.outAvgWeight }}t</el-descriptions-item>
|
||||
|
||||
<el-descriptions-item label="消耗数量">{{ mSummary.lossCount }}</el-descriptions-item>
|
||||
<el-descriptions-item label="消耗总重">{{ mSummary.lossTotalWeight }}t</el-descriptions-item>
|
||||
<el-descriptions-item label="消耗均重">{{ mSummary.lossAvgWeight }}t</el-descriptions-item>
|
||||
|
||||
<el-descriptions-item label="合计数量">{{ mSummary.totalCount }}</el-descriptions-item>
|
||||
<el-descriptions-item label="合计总重">{{ mSummary.totalWeight }}t</el-descriptions-item>
|
||||
<el-descriptions-item label="合计均重">{{ mSummary.totalAvgWeight }}t</el-descriptions-item>
|
||||
|
||||
<el-descriptions-item label="成品率">{{ mSummary.passRate }}</el-descriptions-item>
|
||||
<el-descriptions-item label="损耗率">{{ mSummary.lossRate }}</el-descriptions-item>
|
||||
<el-descriptions-item label="异常率">{{ mSummary.abRate }}</el-descriptions-item>
|
||||
<el-descriptions-item label="正品率">{{ mSummary.passRate2 }}</el-descriptions-item>
|
||||
</el-descriptions> -->
|
||||
|
||||
<el-descriptions title="明细信息" :column="3" border>
|
||||
</el-descriptions>
|
||||
<el-tabs v-model="activeTab">
|
||||
<el-tab-pane label="投入钢卷" name="loss">
|
||||
<coil-table :data="lossList" :columns="lossColumns" :loading="loading" height="calc(100vh - 360px)" />
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="产出钢卷" name="output">
|
||||
<coil-table :data="outList" :columns="outputColumns" :loading="loading" height="calc(100vh - 360px)" />
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
|
||||
<el-dialog title="列设置" :visible.sync="settingVisible" width="50%">
|
||||
<el-radio-group v-model="activeColumnConfig">
|
||||
<el-radio-button label="coil-report-loss">投入明细配置</el-radio-button>
|
||||
<el-radio-button label="coil-report-output">产出明细配置</el-radio-button>
|
||||
</el-radio-group>
|
||||
<columns-setting :reportType="activeColumnConfig"></columns-setting>
|
||||
</el-dialog>
|
||||
<div>
|
||||
<action-template :actionType="'520,521,522,523,524,525'" reportType="all"></action-template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listCoilWithIds } from "@/api/wms/coil";
|
||||
import {
|
||||
listPendingAction,
|
||||
} from '@/api/wms/pendingAction';
|
||||
import MemoInput from "@/components/MemoInput";
|
||||
import MutiSelect from "@/components/MutiSelect";
|
||||
import ProductInfo from "@/components/KLPService/Renderer/ProductInfo";
|
||||
import RawMaterialInfo from "@/components/KLPService/Renderer/RawMaterialInfo";
|
||||
import CoilNo from "@/components/KLPService/Renderer/CoilNo.vue";
|
||||
import { calcSummary, calcMSummary } from "@/views/wms/report/js/calc";
|
||||
import CoilTable from "@/views/wms/report/components/coilTable";
|
||||
import ColumnsSetting from "@/views/wms/report/components/setting/columns";
|
||||
|
||||
import actionTemplate from "@/views/wms/report/template/action.vue";
|
||||
export default {
|
||||
name: 'MergeTemplate',
|
||||
props: {
|
||||
actionType: {
|
||||
type: Number,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
components: {
|
||||
MemoInput,
|
||||
MutiSelect,
|
||||
ProductInfo,
|
||||
RawMaterialInfo,
|
||||
CoilNo,
|
||||
CoilTable,
|
||||
ColumnsSetting
|
||||
actionTemplate,
|
||||
},
|
||||
dicts: ['product_coil_status', 'coil_material', 'coil_itemname', 'coil_manufacturer'],
|
||||
data() {
|
||||
// 工具函数：个位数补零
|
||||
const addZero = (num) => num.toString().padStart(2, '0')
|
||||
|
||||
// 获取当前日期（默认选中当天）
|
||||
const now = new Date()
|
||||
const currentDate = `${now.getFullYear()}-${addZero(now.getMonth() + 1)}`
|
||||
|
||||
/**
|
||||
* 生成指定日期/月份的时间范围字符串
|
||||
* @param {string} dateStr - 支持格式：yyyy-MM（月份） 或 yyyy-MM-dd（具体日期）
|
||||
* @returns {object} 包含start（开始时间）和end（结束时间）的对象
|
||||
*/
|
||||
const getDayTimeRange = (dateStr) => {
|
||||
// 先校验输入格式是否合法
|
||||
const monthPattern = /^\d{4}-\d{2}$/; // yyyy-MM 正则
|
||||
const dayPattern = /^\d{4}-\d{2}-\d{2}$/; // yyyy-MM-dd 正则
|
||||
|
||||
if (!monthPattern.test(dateStr) && !dayPattern.test(dateStr)) {
|
||||
throw new Error('输入格式错误，请传入 yyyy-MM 或 yyyy-MM-dd 格式的字符串');
|
||||
}
|
||||
|
||||
let startDate, endDate;
|
||||
|
||||
if (monthPattern.test(dateStr)) {
|
||||
// 处理 yyyy-MM 格式：获取本月第一天和最后一天
|
||||
const [year, month] = dateStr.split('-').map(Number);
|
||||
// 月份是0基的（0=1月，1=2月...），所以要减1
|
||||
// 第一天：yyyy-MM-01
|
||||
startDate = `${dateStr}-01`;
|
||||
// 最后一天：通过 new Date(year, month, 0) 计算（month是原始月份，比如2代表2月，传2则取3月0日=2月最后一天）
|
||||
const lastDayOfMonth = new Date(year, month, 0).getDate();
|
||||
endDate = `${dateStr}-${lastDayOfMonth.toString().padStart(2, '0')}`;
|
||||
} else {
|
||||
// 处理 yyyy-MM-dd 格式：直接使用传入的日期
|
||||
startDate = dateStr;
|
||||
endDate = dateStr;
|
||||
}
|
||||
|
||||
// 拼接时间部分
|
||||
return {
|
||||
start: `${startDate} 00:00:00`,
|
||||
end: `${endDate} 23:59:59`
|
||||
};
|
||||
};
|
||||
|
||||
const { start, end } = getDayTimeRange(currentDate)
|
||||
return {
|
||||
lossList: [],
|
||||
outList: [],
|
||||
activeTab: 'loss',
|
||||
activeColumnConfig: 'coil-report-loss',
|
||||
settingVisible: false,
|
||||
loading: false,
|
||||
queryParams: {
|
||||
startTime: start,
|
||||
endTime: end,
|
||||
enterCoilNo: '',
|
||||
currentCoilNo: '',
|
||||
warehouseId: '',
|
||||
itemName: '',
|
||||
itemSpecification: '',
|
||||
itemMaterial: '',
|
||||
itemManufacturer: '',
|
||||
pageSize: 9999,
|
||||
pageNum: 1,
|
||||
},
|
||||
lossColumns: [],
|
||||
outputColumns: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
summary() {
|
||||
return calcSummary(this.outList, this.lossList)
|
||||
},
|
||||
// mSummary() {
|
||||
// return calcMSummary(this.outList, this.lossList)
|
||||
// },
|
||||
},
|
||||
created() {
|
||||
this.handleQuery()
|
||||
this.loadColumns()
|
||||
},
|
||||
methods: {
|
||||
handleQuery() {
|
||||
this.getList()
|
||||
},
|
||||
async getList() {
|
||||
this.loading = true;
|
||||
const res1 = await listPendingAction({ ...this.queryParams, actionTypes: '520,521,522,523,524,525', actionStatus: 2 });
|
||||
|
||||
const res = res1.rows;
|
||||
// 获取两层数据
|
||||
const lossIds = res.map(item => item.coilId);
|
||||
// const actions = res.map(item => item.actionId);
|
||||
// 使用new Set去重
|
||||
const outIds = [...new Set(res.map(item => item.processedCoilIds))];
|
||||
|
||||
if (lossIds.length === 0 || outIds.length === 0) {
|
||||
this.$message({
|
||||
message: '查询结果为空',
|
||||
type: 'warning'
|
||||
})
|
||||
this.loading = false;
|
||||
return
|
||||
}
|
||||
|
||||
const [lossRes, outRes] = await Promise.all([
|
||||
listCoilWithIds({ ...this.queryParams, coilIds: lossIds.join(',') || '', startTime: '', endTime: '' }),
|
||||
listCoilWithIds({ ...this.queryParams, coilIds: outIds.join(',') || '', startTime: '', endTime: '' }),
|
||||
]);
|
||||
this.lossList = lossRes.rows.map(item => {
|
||||
// 计算宽度和厚度，将规格按照*分割，*前的是厚度，*后的是宽度
|
||||
const [thickness, width] = item.specification?.split('*') || []
|
||||
return {
|
||||
...item,
|
||||
computedThickness: parseFloat(thickness),
|
||||
computedWidth: parseFloat(width),
|
||||
}
|
||||
});
|
||||
this.outList = outRes.rows.map(item => {
|
||||
// 计算宽度和厚度，将规格按照*分割，*前的是厚度，*后的是宽度
|
||||
const [thickness, width] = item.specification?.split('*') || []
|
||||
return {
|
||||
...item,
|
||||
computedThickness: parseFloat(thickness),
|
||||
computedWidth: parseFloat(width),
|
||||
}
|
||||
});
|
||||
this.loading = false;
|
||||
},
|
||||
// 导出
|
||||
exportData() {
|
||||
if (this.outList.length === 0) {
|
||||
this.$message.warning('暂无数据可导出')
|
||||
return
|
||||
}
|
||||
this.download('wms/materialCoil/export', {
|
||||
coilIds: this.outList.map(item => item.coilId).join(',')
|
||||
}, `materialCoil_${new Date().getTime()}.xlsx`)
|
||||
},
|
||||
exportLossData() {
|
||||
if (this.lossList.length === 0) {
|
||||
this.$message.warning('暂无数据可导出')
|
||||
return
|
||||
}
|
||||
this.download('wms/materialCoil/export', {
|
||||
coilIds: this.lossList.map(item => item.coilId).join(',')
|
||||
}, `materialCoil_${new Date().getTime()}.xlsx`)
|
||||
},
|
||||
// 加载列设置
|
||||
loadColumns() {
|
||||
this.lossColumns = JSON.parse(localStorage.getItem('preference-tableColumns-coil-report-loss') || '[]') || []
|
||||
this.outputColumns = JSON.parse(localStorage.getItem('preference-tableColumns-coil-report-output') || '[]') || []
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
@@ -1,14 +1,14 @@
|
||||
<template>
|
||||
<div>
|
||||
<merge-template :actionType="523"></merge-template>
|
||||
<action-template :actionType="523" reportType="all"></action-template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import mergeTemplate from "@/views/wms/report/template/merge.vue";
|
||||
import actionTemplate from "@/views/wms/report/template/action.vue";
|
||||
export default {
|
||||
components: {
|
||||
mergeTemplate,
|
||||
actionTemplate,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@@ -1,14 +1,14 @@
|
||||
<template>
|
||||
<div>
|
||||
<merge-template :actionType="524"></merge-template>
|
||||
<action-template :actionType="524" reportType="all"></action-template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import mergeTemplate from "@/views/wms/report/template/merge.vue";
|
||||
import actionTemplate from "@/views/wms/report/template/action.vue";
|
||||
export default {
|
||||
components: {
|
||||
mergeTemplate,
|
||||
actionTemplate,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@@ -1,14 +1,14 @@
|
||||
<template>
|
||||
<div>
|
||||
<merge-template :actionType="522"></merge-template>
|
||||
<action-template :actionType="522" reportType="all"></action-template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import mergeTemplate from "@/views/wms/report/template/merge.vue";
|
||||
import actionTemplate from "@/views/wms/report/template/action.vue";
|
||||
export default {
|
||||
components: {
|
||||
mergeTemplate,
|
||||
actionTemplate,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@@ -1,14 +1,14 @@
|
||||
<template>
|
||||
<div>
|
||||
<merge-template :actionType="521"></merge-template>
|
||||
<action-template :actionType="521" reportType="all"></action-template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import mergeTemplate from "@/views/wms/report/template/merge.vue";
|
||||
import actionTemplate from "@/views/wms/report/template/action.vue";
|
||||
export default {
|
||||
components: {
|
||||
mergeTemplate,
|
||||
actionTemplate,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@@ -137,15 +137,19 @@
|
||||
</template>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="handleQuery">查询</el-button>
|
||||
<el-button type="primary" @click="settingVisible = true">列配置</el-button>
|
||||
<el-button v-if="['out', 'team', 'day', 'month', 'year', 'all'].includes(reportType)" type="primary"
|
||||
@click="exportData">导出产出钢卷</el-button>
|
||||
@click="exportData">导出产出</el-button>
|
||||
<el-button v-if="['loss', 'team', 'day', 'month', 'year', 'all'].includes(reportType)" type="primary"
|
||||
@click="exportLossData">导出消耗钢卷</el-button>
|
||||
<el-button type="primary" @click="settingVisible = true">列设置</el-button>
|
||||
@click="exportLossData">导出消耗</el-button>
|
||||
<el-button v-if="['out', 'team', 'day', 'month', 'year', 'all'].includes(reportType)" type="primary"
|
||||
@click="saveOutputReport">保存产出报表</el-button>
|
||||
@click="openCustomExport('output')">自定义导出产出</el-button>
|
||||
<el-button v-if="['loss', 'team', 'day', 'month', 'year', 'all'].includes(reportType)" type="primary"
|
||||
@click="saveLossReport">保存消耗报表</el-button>
|
||||
@click="openCustomExport('loss')">自定义导出消耗</el-button>
|
||||
<el-button v-if="['out', 'team', 'day', 'month', 'year', 'all'].includes(reportType)" type="primary"
|
||||
@click="saveOutputReport">保存产出</el-button>
|
||||
<el-button v-if="['loss', 'team', 'day', 'month', 'year', 'all'].includes(reportType)" type="primary"
|
||||
@click="saveLossReport">保存消耗</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
@@ -278,6 +282,30 @@
|
||||
<el-table-column label="产出总重" align="center" prop="outWeight" />
|
||||
</el-table>
|
||||
</template>
|
||||
|
||||
<!-- day 类型：小时数据趋势图 -->
|
||||
<div v-if="reportType === 'day'" style="margin-top: 20px; height: 400px;">
|
||||
<el-card>
|
||||
<template slot="header">
|
||||
<div class="clearfix">
|
||||
<span>小时数据趋势</span>
|
||||
</div>
|
||||
</template>
|
||||
<div ref="dayChart" style="width: 100%; height: 350px;"></div>
|
||||
</el-card>
|
||||
</div>
|
||||
|
||||
<!-- month 类型：日数据趋势图 -->
|
||||
<div v-if="reportType === 'month'" style="margin-top: 20px; height: 400px;">
|
||||
<el-card>
|
||||
<template slot="header">
|
||||
<div class="clearfix">
|
||||
<span>日数据趋势</span>
|
||||
</div>
|
||||
</template>
|
||||
<div ref="monthChart" style="width: 100%; height: 350px;"></div>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 明细信息和标签页 -->
|
||||
@@ -318,6 +346,14 @@
|
||||
</el-radio-group>
|
||||
<columns-setting :reportType="activeColumnConfig"></columns-setting>
|
||||
</el-dialog>
|
||||
|
||||
<custom-export
|
||||
ref="customExport"
|
||||
:visible.sync="customExportVisible"
|
||||
:storage-key="customExportStorageKey"
|
||||
:column-groups="columnGroups"
|
||||
@export="handleCustomExport"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -337,6 +373,7 @@ import CoilTable from "@/views/wms/report/components/coilTable";
|
||||
import ColumnsSetting from "@/views/wms/report/components/setting/columns";
|
||||
import TimeRangePicker from "@/views/wms/report/components/timeRangePicker.vue";
|
||||
import SplitSummary from "@/views/wms/report/components/summary/splitSummary.vue";
|
||||
import CustomExport from "@/views/wms/report/components/CustomExport.vue";
|
||||
|
||||
import { saveReportFile } from "@/views/wms/report/js/reportFile";
|
||||
import * as echarts from 'echarts';
|
||||
@@ -372,6 +409,7 @@ export default {
|
||||
ColumnsSetting,
|
||||
TimeRangePicker,
|
||||
SplitSummary,
|
||||
CustomExport,
|
||||
},
|
||||
dicts: ['product_coil_status', 'coil_material', 'coil_itemname', 'coil_manufacturer', 'coil_quality_status'],
|
||||
data() {
|
||||
@@ -437,6 +475,19 @@ export default {
|
||||
viewType: 'custom',
|
||||
yesterdaySummary: {},
|
||||
monthChart: null,
|
||||
dayChart: null,
|
||||
customExportVisible: false,
|
||||
customExportType: 'output',
|
||||
columnGroups: {
|
||||
'基本信息': ['itemTypeDesc', 'warehouseName', 'actualWarehouseName', 'dataTypeText'],
|
||||
'钢卷号': ['enterCoilNo', 'supplierCoilNo', 'currentCoilNo'],
|
||||
'时间': ['createTime', 'exportTime', 'exportBy'],
|
||||
'物理属性': ['netWeight', 'length', 'specification', 'actualThickness', 'theoreticalThickness', 'theoreticalLength'],
|
||||
'材质属性': ['material', 'manufacturer', 'surfaceTreatmentDesc', 'zincLayer', 'packingStatus', 'temperGrade', 'coatingType', 'chromePlateCoilNo'],
|
||||
'用途': ['purpose', 'businessPurpose'],
|
||||
'状态': ['qualityStatus', 'statusDesc', 'isRelatedToOrderText'],
|
||||
'其他': ['itemName', 'itemId', 'packagingRequirement', 'trimmingRequirement', 'transferType', 'saleName', 'remark', 'team'],
|
||||
},
|
||||
queryParams: {
|
||||
startTime: start,
|
||||
endTime: end,
|
||||
@@ -523,6 +574,9 @@ export default {
|
||||
})
|
||||
return commonIds
|
||||
},
|
||||
customExportStorageKey() {
|
||||
return `coil-report-action-${this.actionType}`
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
warehouseOptions: {
|
||||
@@ -718,10 +772,21 @@ export default {
|
||||
});
|
||||
}
|
||||
|
||||
if (this.reportType === 'day') {
|
||||
this.$nextTick(() => {
|
||||
this.initDayChart()
|
||||
})
|
||||
}
|
||||
if (this.reportType === 'month') {
|
||||
this.$nextTick(() => {
|
||||
this.initMonthChart()
|
||||
})
|
||||
}
|
||||
|
||||
this.loading = false;
|
||||
},
|
||||
// all 类型：获取昨日数据
|
||||
getYesterdayData() {
|
||||
// all 类型：获取昨日数据（逻辑同 getList，时间向前推一天）
|
||||
async getYesterdayData() {
|
||||
const yesterday = new Date(this.dayDate)
|
||||
yesterday.setDate(yesterday.getDate() - 1)
|
||||
const year = yesterday.getFullYear()
|
||||
@@ -730,66 +795,37 @@ export default {
|
||||
const yesterdayDate = `${year}-${month}-${day}`
|
||||
const { start, end } = this.getDayTimeRange(yesterdayDate)
|
||||
|
||||
Promise.all([
|
||||
listCoilWithIds({
|
||||
selectType: 'raw_material',
|
||||
itemType: 'raw_material',
|
||||
warehouseIds: this.warehouseIds.join(','),
|
||||
...this.queryParams,
|
||||
startTime: start,
|
||||
endTime: end,
|
||||
pageSize: 99999,
|
||||
pageNum: 1,
|
||||
}),
|
||||
listCoilWithIds({
|
||||
selectType: 'product',
|
||||
itemType: 'product',
|
||||
warehouseIds: this.warehouseIds.join(','),
|
||||
...this.queryParams,
|
||||
startTime: start,
|
||||
endTime: end,
|
||||
pageSize: 99999,
|
||||
pageNum: 1,
|
||||
}),
|
||||
]).then((resList) => {
|
||||
const list = resList.flatMap(res => res.rows)
|
||||
const yesterdayList = list.sort(
|
||||
(a, b) => new Date(b.createTime) - new Date(a.createTime)
|
||||
).map(item => {
|
||||
if (!item.selectType) {
|
||||
item.selectType = item.itemType === 'product' ? 'product' : 'raw_material'
|
||||
}
|
||||
return item
|
||||
})
|
||||
const yesterdayParams = {
|
||||
...this.queryParams,
|
||||
startTime: start,
|
||||
endTime: end,
|
||||
}
|
||||
|
||||
listLightPendingAction({
|
||||
actionStatus: 2,
|
||||
actionType: this.actionType,
|
||||
pageSize: 99999,
|
||||
pageNum: 1,
|
||||
startTime: start,
|
||||
endTime: end,
|
||||
}).then((lossRes) => {
|
||||
const lossActions = lossRes.rows
|
||||
const lossCoilIds = lossActions.map(item => item.coilId).join(',')
|
||||
const res = await listLightPendingAction({ ...yesterdayParams, actionTypes: this.actionType, actionStatus: 2 })
|
||||
const lossIds = res.data.filter(item => item.coilId).map(item => item.coilId)
|
||||
const lossActionIds = res.data.filter(item => item.actionId).map(item => item.actionId)
|
||||
const outIds = [...new Set(res.data.filter(item => item.processedCoilIds).map(item => item.processedCoilIds))]
|
||||
|
||||
if (lossCoilIds) {
|
||||
listCoilWithIds({
|
||||
...this.queryParams,
|
||||
startTime: undefined,
|
||||
endTime: undefined,
|
||||
coilIds: lossCoilIds,
|
||||
pageSize: 99999,
|
||||
pageNum: 1,
|
||||
}).then(res => {
|
||||
const yesterdayLossList = res.rows
|
||||
this.yesterdaySummary = calcSummary(yesterdayList, yesterdayLossList)
|
||||
})
|
||||
} else {
|
||||
this.yesterdaySummary = calcSummary(yesterdayList, [])
|
||||
}
|
||||
})
|
||||
if (lossIds.length === 0 || outIds.length === 0) {
|
||||
this.yesterdaySummary = {}
|
||||
return
|
||||
}
|
||||
|
||||
const [lossRes, outRes] = await Promise.all([
|
||||
listCoilWithIds({ ...yesterdayParams, actionIds: lossActionIds.join(',') || '', startTime: '', endTime: '', selectType: 'raw_material' }),
|
||||
listCoilWithIds({ ...yesterdayParams, coilIds: outIds.join(',') || '', startTime: '', endTime: '', byCreateTimeStart: start, byCreateTimeEnd: end, selectType: 'product' }),
|
||||
])
|
||||
|
||||
const yesterdayLossList = lossRes.rows.map(item => {
|
||||
const [thickness, width] = item.specification?.split('*') || []
|
||||
return { ...item, computedThickness: parseFloat(thickness), computedWidth: parseFloat(width) }
|
||||
})
|
||||
const yesterdayOutList = outRes.rows.map(item => {
|
||||
const [thickness, width] = item.specification?.split('*') || []
|
||||
return { ...item, computedThickness: parseFloat(thickness), computedWidth: parseFloat(width) }
|
||||
})
|
||||
|
||||
this.yesterdaySummary = calcSummary(yesterdayOutList, yesterdayLossList)
|
||||
},
|
||||
// all 类型：初始化月视图折线图
|
||||
initMonthChart() {
|
||||
@@ -852,6 +888,97 @@ export default {
|
||||
this.monthChart.resize()
|
||||
})
|
||||
},
|
||||
// day 类型：初始化小时数据折线图
|
||||
initDayChart() {
|
||||
if (!this.$refs.dayChart) return
|
||||
|
||||
if (this.dayChart) {
|
||||
this.dayChart.dispose()
|
||||
}
|
||||
|
||||
this.dayChart = echarts.init(this.$refs.dayChart)
|
||||
|
||||
const hourlyData = {}
|
||||
for (let h = 0; h < 24; h++) {
|
||||
hourlyData[h] = { outCount: 0, outTotalWeight: 0, lossCount: 0, lossTotalWeight: 0 }
|
||||
}
|
||||
|
||||
this.outList.forEach(item => {
|
||||
const timeStr = item.createTime?.split(' ')[1] || '00:00:00'
|
||||
const hour = parseInt(timeStr.split(':')[0])
|
||||
if (hourlyData[hour] !== undefined) {
|
||||
hourlyData[hour].outCount++
|
||||
hourlyData[hour].outTotalWeight += parseFloat(item.netWeight) || 0
|
||||
}
|
||||
})
|
||||
|
||||
this.lossList.forEach(item => {
|
||||
const timeStr = item.actionCompleteTime?.split(' ')[1] || '00:00:00'
|
||||
const hour = parseInt(timeStr.split(':')[0])
|
||||
if (hourlyData[hour] !== undefined) {
|
||||
hourlyData[hour].lossCount++
|
||||
hourlyData[hour].lossTotalWeight += parseFloat(item.netWeight) || 0
|
||||
}
|
||||
})
|
||||
|
||||
const hours = Object.keys(hourlyData).map(Number).sort((a, b) => a - b)
|
||||
const hourLabels = hours.map(h => `${String(h).padStart(2, '0')}:00`)
|
||||
const outCountData = hours.map(h => hourlyData[h].outCount)
|
||||
const outTotalWeightData = hours.map(h => hourlyData[h].outTotalWeight.toFixed(2))
|
||||
const lossCountData = hours.map(h => hourlyData[h].lossCount)
|
||||
const lossTotalWeightData = hours.map(h => hourlyData[h].lossTotalWeight.toFixed(2))
|
||||
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: { type: 'cross', label: { backgroundColor: '#6a7985' } }
|
||||
},
|
||||
legend: { data: ['产出数量', '产出总重', '消耗数量', '消耗总重'] },
|
||||
grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
|
||||
xAxis: [{ type: 'category', boundaryGap: false, data: hourLabels }],
|
||||
yAxis: [
|
||||
{ type: 'value', name: '数量', position: 'left' },
|
||||
{ type: 'value', name: '重量(t)', position: 'right' }
|
||||
],
|
||||
series: [
|
||||
{ name: '产出数量', type: 'line', data: outCountData, yAxisIndex: 0 },
|
||||
{ name: '产出总重', type: 'line', data: outTotalWeightData, yAxisIndex: 1 },
|
||||
{ name: '消耗数量', type: 'line', data: lossCountData, yAxisIndex: 0 },
|
||||
{ name: '消耗总重', type: 'line', data: lossTotalWeightData, yAxisIndex: 1 }
|
||||
]
|
||||
}
|
||||
|
||||
this.dayChart.setOption(option)
|
||||
|
||||
window.addEventListener('resize', () => {
|
||||
this.dayChart.resize()
|
||||
})
|
||||
},
|
||||
// 自定义导出
|
||||
openCustomExport(type) {
|
||||
if (type === 'output' && this.outList.length === 0) {
|
||||
this.$message({ message: '暂无产出数据可导出', type: 'warning' })
|
||||
return
|
||||
}
|
||||
if (type === 'loss' && this.lossList.length === 0) {
|
||||
this.$message({ message: '暂无消耗数据可导出', type: 'warning' })
|
||||
return
|
||||
}
|
||||
this.customExportType = type
|
||||
this.$refs.customExport.open()
|
||||
},
|
||||
handleCustomExport(orderedColumns) {
|
||||
const { pageNum, pageSize, startTime, endTime, ...filters } = this.queryParams
|
||||
const type = this.customExportType
|
||||
const ids = type === 'loss'
|
||||
? { actionIds: this.actionIds }
|
||||
: { coilIds: this.outList.map(item => item.coilId).join(',') }
|
||||
this.download('wms/materialCoil/exportCustomOrdered', {
|
||||
...filters,
|
||||
...ids,
|
||||
columnsOrdered: orderedColumns.join(','),
|
||||
}, `materialCoil_${new Date().getTime()}.xlsx`)
|
||||
},
|
||||
exportData() {
|
||||
if (this.outList.length === 0) {
|
||||
this.$message.warning('暂无数据可导出')
|
||||
|
||||
Reference in New Issue
Block a user