refactor(wms/coil/trace): 重构钢卷追溯页面布局与数据逻辑
将原单列表格拆分为当前/已发货/历史/未入库四栏2x2网格布局，并行请求四类钢卷数据优化加载效率，简化搜索和重置逻辑
This commit is contained in:
@@ -29,45 +29,138 @@
|
||||
|
||||
<!-- 搜索结果区域 -->
|
||||
<div v-else>
|
||||
<!-- 上部：钢卷信息 -->
|
||||
<div class="section-card material-section mb20">
|
||||
<div class="section-header">
|
||||
<h3 class="section-title">钢卷信息</h3>
|
||||
<!-- 2×2 钢卷信息 -->
|
||||
<div class="two-by-two-layout mb20">
|
||||
<!-- 当前钢卷 -->
|
||||
<div class="coil-column">
|
||||
<div class="column-header column-header--now">
|
||||
<h4 class="column-title">当前钢卷</h4>
|
||||
<span class="column-count">{{ nowCoilList.length }}</span>
|
||||
</div>
|
||||
<div v-loading="nowLoading" class="column-body">
|
||||
<template v-if="nowCoilList.length > 0">
|
||||
<KLPTable :data="nowCoilList" :max-height="280" :float-layer="true"
|
||||
:float-layer-config="floatLayerConfig" :row-style="getRowStyle" size="mini">
|
||||
<el-table-column prop="currentCoilNo" label="当前钢卷号" show-overflow-tooltip>
|
||||
<template slot-scope="scope">
|
||||
<current-coil-no :current-coil-no="scope.row.currentCoilNo" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="enterCoilNo" label="入场钢卷号" width="140" show-overflow-tooltip />
|
||||
<el-table-column prop="supplierCoilNo" label="厂家卷号" width="120" show-overflow-tooltip />
|
||||
<el-table-column prop="specification" label="规格" width="90" show-overflow-tooltip />
|
||||
<el-table-column prop="netWeight" label="净重" width="80" show-overflow-tooltip />
|
||||
<el-table-column label="操作" width="80">
|
||||
<template slot-scope="scope">
|
||||
<el-button type="text" icon="el-icon-view" size="mini" @click="handlePreviewLabel(scope.row)" title="预览标签" />
|
||||
<el-button type="text" icon="el-icon-printer" size="mini" @click="handlePrintLabel(scope.row)" title="打印标签" />
|
||||
<el-button type="text" icon="el-icon-printer" size="mini" @click="handleNumberCoilClick(scope.row)" title="数字钢卷" />
|
||||
<el-button type="text" icon="el-icon-time" size="mini" @click="handleTrace(scope.row)" title="追溯" :loading="scope.row.picking" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
</KLPTable>
|
||||
</template>
|
||||
<div v-else class="column-empty">暂无数据</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 钢卷信息卡片 -->
|
||||
<div v-loading="materialLoading">
|
||||
<KLPTable :data="materialCoilList" height="calc(100vh - 340px)" :floatLayer="true"
|
||||
:floatLayerConfig="floatLayerConfig" :row-style="getRowStyle">
|
||||
<el-table-column prop="status" label="钢卷状态" width="100" show-overflow-tooltip>
|
||||
<template slot-scope="scope">
|
||||
<el-tag size="small" :style="getBorderStyle(scope.row)">{{ getTypeLabel(scope.row) }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="currentCoilNo" label="当前钢卷号">
|
||||
<template slot-scope="scope">
|
||||
<current-coil-no :current-coil-no="scope.row.currentCoilNo" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="enterCoilNo" label="入场钢卷号" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="supplierCoilNo" label="厂家卷号" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="warehouseName" label="逻辑库区" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="specification" label="规格" width="100" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="netWeight" label="净重" width="100" show-overflow-tooltip></el-table-column>
|
||||
<!-- 已发货钢卷 -->
|
||||
<div class="coil-column">
|
||||
<div class="column-header column-header--trans">
|
||||
<h4 class="column-title">已发货钢卷</h4>
|
||||
<span class="column-count">{{ transCoilList.length }}</span>
|
||||
</div>
|
||||
<div v-loading="transLoading" class="column-body">
|
||||
<template v-if="transCoilList.length > 0">
|
||||
<KLPTable :data="transCoilList" :max-height="280" :float-layer="true"
|
||||
:float-layer-config="floatLayerConfig" :row-style="getRowStyle" size="mini">
|
||||
<el-table-column prop="currentCoilNo" label="当前钢卷号" show-overflow-tooltip>
|
||||
<template slot-scope="scope">
|
||||
<current-coil-no :current-coil-no="scope.row.currentCoilNo" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="enterCoilNo" label="入场钢卷号" width="140" show-overflow-tooltip />
|
||||
<el-table-column prop="supplierCoilNo" label="厂家卷号" width="120" show-overflow-tooltip />
|
||||
<el-table-column prop="specification" label="规格" width="90" show-overflow-tooltip />
|
||||
<el-table-column prop="netWeight" label="净重" width="80" show-overflow-tooltip />
|
||||
<el-table-column label="操作" width="80">
|
||||
<template slot-scope="scope">
|
||||
<el-button type="text" icon="el-icon-view" size="mini" @click="handlePreviewLabel(scope.row)" title="预览标签" />
|
||||
<el-button type="text" icon="el-icon-printer" size="mini" @click="handlePrintLabel(scope.row)" title="打印标签" />
|
||||
<el-button type="text" icon="el-icon-printer" size="mini" @click="handleNumberCoilClick(scope.row)" title="数字钢卷" />
|
||||
<el-button type="text" icon="el-icon-time" size="mini" @click="handleTrace(scope.row)" title="追溯" :loading="scope.row.picking" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
</KLPTable>
|
||||
</template>
|
||||
<div v-else class="column-empty">暂无数据</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-table-column prop="action" label="操作" width="460">
|
||||
<template slot-scope="scope">
|
||||
<el-button v-loading="buttonLoading" style="margin-left: 0px; padding: 4px !important;" type="default"
|
||||
size="mini" icon="el-icon-view" @click="handlePreviewLabel(scope.row)" title="预览标签">预览</el-button>
|
||||
<el-button v-loading="buttonLoading" style="margin-left: 0px; padding: 4px !important;" type="default"
|
||||
size="mini" icon="el-icon-printer" @click="handlePrintLabel(scope.row)" title="打印标签">打印</el-button>
|
||||
<el-button v-loading="buttonLoading" style="margin-left: 0px; padding: 4px !important;" type="default"
|
||||
size="mini" icon="el-icon-printer" @click="handleNumberCoilClick(scope.row)" title="数字钢卷">数字钢卷</el-button>
|
||||
<el-button type="warning" icon="el-icon-time" size="mini" @click="handleTrace(scope.row)"
|
||||
:loading="scope.row.picking" class="action-btn">追溯</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</KLPTable>
|
||||
<!-- 历史钢卷 -->
|
||||
<div class="coil-column">
|
||||
<div class="column-header column-header--history">
|
||||
<h4 class="column-title">历史钢卷</h4>
|
||||
<span class="column-count">{{ historyCoilList.length }}</span>
|
||||
</div>
|
||||
<div v-loading="historyLoading" class="column-body">
|
||||
<template v-if="historyCoilList.length > 0">
|
||||
<KLPTable :data="historyCoilList" :max-height="280" :float-layer="true"
|
||||
:float-layer-config="floatLayerConfig" :row-style="getRowStyle" size="mini">
|
||||
<el-table-column prop="currentCoilNo" label="当前钢卷号" show-overflow-tooltip>
|
||||
<template slot-scope="scope">
|
||||
<current-coil-no :current-coil-no="scope.row.currentCoilNo" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="enterCoilNo" label="入场钢卷号" width="140" show-overflow-tooltip />
|
||||
<el-table-column prop="supplierCoilNo" label="厂家卷号" width="120" show-overflow-tooltip />
|
||||
<el-table-column prop="specification" label="规格" width="90" show-overflow-tooltip />
|
||||
<el-table-column prop="netWeight" label="净重" width="80" show-overflow-tooltip />
|
||||
<el-table-column label="操作" width="80">
|
||||
<template slot-scope="scope">
|
||||
<el-button type="text" icon="el-icon-view" size="mini" @click="handlePreviewLabel(scope.row)" title="预览标签" />
|
||||
<el-button type="text" icon="el-icon-printer" size="mini" @click="handlePrintLabel(scope.row)" title="打印标签" />
|
||||
<el-button type="text" icon="el-icon-printer" size="mini" @click="handleNumberCoilClick(scope.row)" title="数字钢卷" />
|
||||
<el-button type="text" icon="el-icon-time" size="mini" @click="handleTrace(scope.row)" title="追溯" :loading="scope.row.picking" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
</KLPTable>
|
||||
</template>
|
||||
<div v-else class="column-empty">暂无数据</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 未入库钢卷 -->
|
||||
<div class="coil-column">
|
||||
<div class="column-header column-header--unIn">
|
||||
<h4 class="column-title">未入库钢卷</h4>
|
||||
<span class="column-count">{{ unInCoilList.length }}</span>
|
||||
</div>
|
||||
<div v-loading="unInLoading" class="column-body">
|
||||
<template v-if="unInCoilList.length > 0">
|
||||
<KLPTable :data="unInCoilList" max-height="280" :float-layer="true"
|
||||
:float-layer-config="floatLayerConfig" :row-style="getRowStyle" size="mini">
|
||||
<el-table-column prop="currentCoilNo" label="当前钢卷号" show-overflow-tooltip>
|
||||
<template slot-scope="scope">
|
||||
<current-coil-no :current-coil-no="scope.row.currentCoilNo" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="enterCoilNo" label="入场钢卷号" width="140" show-overflow-tooltip />
|
||||
<el-table-column prop="supplierCoilNo" label="厂家卷号" width="120" show-overflow-tooltip />
|
||||
<el-table-column prop="specification" label="规格" width="90" show-overflow-tooltip />
|
||||
<el-table-column prop="netWeight" label="净重" width="80" show-overflow-tooltip />
|
||||
<el-table-column label="操作" width="80">
|
||||
<template slot-scope="scope">
|
||||
<el-button type="text" icon="el-icon-view" size="mini" @click="handlePreviewLabel(scope.row)" title="预览标签" />
|
||||
<el-button type="text" icon="el-icon-printer" size="mini" @click="handlePrintLabel(scope.row)" title="打印标签" />
|
||||
<el-button type="text" icon="el-icon-printer" size="mini" @click="handleNumberCoilClick(scope.row)" title="数字钢卷" />
|
||||
<el-button type="text" icon="el-icon-time" size="mini" @click="handleTrace(scope.row)" title="追溯" :loading="scope.row.picking" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
</KLPTable>
|
||||
</template>
|
||||
<div v-else class="column-empty">暂无数据</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -128,13 +221,6 @@
|
||||
|
||||
<el-table-column label="操作状态" align="center" prop="actionStatus" width="120">
|
||||
<template slot-scope="scope">
|
||||
<!-- <el-select v-model="scope.row.actionStatus" placeholder="请选择操作状态"
|
||||
@change="handleStatusChange(scope.row)">
|
||||
<el-option label="待处理" :value="0" />
|
||||
<el-option label="处理中" :value="1" />
|
||||
<el-option label="已完成" :value="2" />
|
||||
<el-option label="已取消" :value="3" />
|
||||
</el-select> -->
|
||||
<el-tag v-if="scope.row.actionStatus === 0" type="info" size="mini">待处理</el-tag>
|
||||
<el-tag v-else-if="scope.row.actionStatus === 1" type="warning" size="mini">处理中</el-tag>
|
||||
<el-tag v-else-if="scope.row.actionStatus === 2" type="success" size="mini">已完成</el-tag>
|
||||
@@ -475,13 +561,17 @@ export default {
|
||||
searched: false,
|
||||
|
||||
// 钢卷类型
|
||||
coilType: 'all',
|
||||
nowCoilList: [],
|
||||
transCoilList: [],
|
||||
historyCoilList: [],
|
||||
unInCoilList: [],
|
||||
nowLoading: false,
|
||||
transLoading: false,
|
||||
historyLoading: false,
|
||||
unInLoading: false,
|
||||
title: '钢卷信息修正',
|
||||
|
||||
// 物料列表相关
|
||||
materialLoading: false,
|
||||
materialCoilList: [],
|
||||
materialTotal: 0,
|
||||
materialQueryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 20,
|
||||
@@ -807,37 +897,48 @@ export default {
|
||||
},
|
||||
|
||||
// ========== 物料列表相关方法 ==========
|
||||
/** 查询物料列表 */
|
||||
/** 查询物料列表（四栏并行） */
|
||||
getMaterialCoil() {
|
||||
this.materialLoading = true
|
||||
const payload = { ...this.materialQueryParams }
|
||||
if (this.coilType == 'now') {
|
||||
payload.dataType = 1;
|
||||
payload.status = 0;
|
||||
} else if (this.coilType == 'history') {
|
||||
payload.dataType = 0;
|
||||
} else if (this.coilType == 'trans') {
|
||||
payload.status = 1;
|
||||
} else if (this.coilType == 'unIn') {
|
||||
payload.dataType = 10;
|
||||
}
|
||||
listMaterialCoil(payload).then(response => {
|
||||
this.materialCoilList = response.rows || []
|
||||
this.materialTotal = response.total || 0
|
||||
this.materialLoading = false
|
||||
this.nowLoading = true;
|
||||
this.transLoading = true;
|
||||
this.historyLoading = true;
|
||||
this.unInLoading = true;
|
||||
|
||||
// 如果有钢卷数据，自动获取第一个钢卷的操作记录
|
||||
if (this.materialCoilList.length > 0) {
|
||||
this.coilIds = this.materialCoilList.map(item => item.coilId).join(',');
|
||||
const basePayload = { ...this.materialQueryParams };
|
||||
|
||||
const fetchNow = listMaterialCoil({ ...basePayload, dataType: 1, status: 0 });
|
||||
const fetchTrans = listMaterialCoil({ ...basePayload, status: 1 });
|
||||
const fetchHistory = listMaterialCoil({ ...basePayload, dataType: 0 });
|
||||
const fetchUnIn = listMaterialCoil({ ...basePayload, dataType: 10 });
|
||||
|
||||
Promise.all([fetchNow, fetchTrans, fetchHistory, fetchUnIn]).then(([nowRes, transRes, historyRes, unInRes]) => {
|
||||
this.nowCoilList = nowRes.rows || [];
|
||||
this.transCoilList = transRes.rows || [];
|
||||
this.historyCoilList = historyRes.rows || [];
|
||||
this.unInCoilList = unInRes.rows || [];
|
||||
|
||||
// 合并所有钢卷ID用于操作记录查询
|
||||
const allIds = [
|
||||
...this.nowCoilList,
|
||||
...this.transCoilList,
|
||||
...this.historyCoilList,
|
||||
...this.unInCoilList,
|
||||
].map(item => item.coilId);
|
||||
this.coilIds = allIds.join(',');
|
||||
if (allIds.length > 0) {
|
||||
this.getActionList();
|
||||
} else {
|
||||
// 清空操作记录
|
||||
this.actionList = [];
|
||||
this.actionTotal = 0;
|
||||
}
|
||||
}).catch(() => {
|
||||
this.materialLoading = false
|
||||
})
|
||||
// 单个请求失败不影响其他栏
|
||||
}).finally(() => {
|
||||
this.nowLoading = false;
|
||||
this.transLoading = false;
|
||||
this.historyLoading = false;
|
||||
this.unInLoading = false;
|
||||
});
|
||||
},
|
||||
|
||||
/** 物料搜索 */
|
||||
@@ -851,12 +952,6 @@ export default {
|
||||
this.materialQueryParams.pageNum = 1;
|
||||
this.searched = true;
|
||||
this.getMaterialCoil();
|
||||
|
||||
// 同时获取操作记录
|
||||
// if (this.materialCoilList.length > 0) {
|
||||
// this.currentCoilId = this.materialCoilList[0].coilId;
|
||||
// this.getActionList();
|
||||
// }
|
||||
},
|
||||
|
||||
/** 重置物料搜索 */
|
||||
@@ -865,8 +960,12 @@ export default {
|
||||
this.materialQueryParams.enterCoilNo = null;
|
||||
this.materialQueryParams.currentCoilNo = null;
|
||||
this.searched = false;
|
||||
this.materialCoilList = [];
|
||||
this.nowCoilList = [];
|
||||
this.transCoilList = [];
|
||||
this.historyCoilList = [];
|
||||
this.unInCoilList = [];
|
||||
this.actionList = [];
|
||||
this.actionTotal = 0;
|
||||
},
|
||||
|
||||
/** 回滚操作 */
|
||||
@@ -1223,6 +1322,76 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
// 2×2 布局
|
||||
.two-by-two-layout {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.coil-column {
|
||||
background: #fff;
|
||||
border: 1px solid #e4e7ed;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 420px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.column-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 10px 14px;
|
||||
border-bottom: 2px solid #e4e7ed;
|
||||
|
||||
&--now {
|
||||
border-bottom-color: #67c23a;
|
||||
.column-title { color: #67c23a; }
|
||||
}
|
||||
&--trans {
|
||||
border-bottom-color: #409eff;
|
||||
.column-title { color: #409eff; }
|
||||
}
|
||||
&--history {
|
||||
border-bottom-color: #909399;
|
||||
.column-title { color: #909399; }
|
||||
}
|
||||
&--unIn {
|
||||
border-bottom-color: #e6a23c;
|
||||
.column-title { color: #e6a23c; }
|
||||
}
|
||||
}
|
||||
|
||||
.column-title {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.column-count {
|
||||
font-size: 12px;
|
||||
color: #909399;
|
||||
background: #f5f7fa;
|
||||
padding: 2px 8px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.column-body {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.column-empty {
|
||||
text-align: center;
|
||||
padding: 40px 12px;
|
||||
color: #c0c4cc;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
// 未搜索状态
|
||||
.empty-search-state {
|
||||
background-color: #ffffff;
|
||||
@@ -1276,16 +1445,6 @@ export default {
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
.material-section {
|
||||
.section-header {
|
||||
border-bottom-color: #409eff;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
color: #409eff;
|
||||
}
|
||||
}
|
||||
|
||||
.action-section {
|
||||
.section-header {
|
||||
border-bottom-color: #67c23a;
|
||||
@@ -1607,4 +1766,8 @@ export default {
|
||||
max-height: 600px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.el-table .el-button + .el-button {
|
||||
margin-left: 0px;
|
||||
}
|
||||
</style>
|
||||
@@ -189,7 +189,9 @@ export default {
|
||||
{ label: '合同号', value: 'contractNo' },
|
||||
|
||||
{ label: '原料材质', value: 'packingStatus' },
|
||||
{ label: '原料厚度', value: 'rawMaterialThickness' }
|
||||
{ label: '原料厚度', value: 'rawMaterialThickness' },
|
||||
|
||||
{ label: '工序卷号', value: 'chromePlateCoilNo' }
|
||||
],
|
||||
}
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user