砂糖
b85971d532
- 新增按销售员查询订单明细卷的API接口 - 为CoilTable和DeliveryTable组件添加高度属性 - 实现销售员详情页各标签页数据懒加载功能 - 优化销售员卡片点击和标签页切换时的数据加载逻辑
190 lines
6.9 KiB
Vue
190 lines
6.9 KiB
Vue
<template>
|
||
<div>
|
||
<!-- 统计信息 -->
|
||
<div class="coil-stats" style="margin-bottom: 10px; padding: 10px; background-color: #f5f7fa; border-radius: 4px;">
|
||
<span style="margin-right: 20px;"><strong>总卷数：{{ totalCoils }}</strong></span>
|
||
<span><strong>总净重：{{ totalNetWeight }} kg</strong></span>
|
||
</div>
|
||
<KLPTable :data="data" :floatLayer="true" :floatLayerConfig="floatLayerConfig" :height="tableHeight">
|
||
<el-table-column label="入场钢卷号" align="center" prop="enterCoilNo">
|
||
<template slot-scope="scope">
|
||
<coil-no :coil-no="scope.row.enterCoilNo"></coil-no>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="当前钢卷号" align="center" prop="currentCoilNo">
|
||
<template slot-scope="scope">
|
||
<current-coil-no :current-coil-no="scope.row.currentCoilNo"></current-coil-no>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="厂家卷号" align="center" prop="supplierCoilNo" />
|
||
<el-table-column label="逻辑库位" align="center" prop="warehouseName" />
|
||
<el-table-column label="实际库区" align="center" prop="actualWarehouseName" />
|
||
<el-table-column label="物料类型" align="center" prop="materialType" />
|
||
<el-table-column label="产品类型" align="center" width="180">
|
||
<template slot-scope="scope">
|
||
<ProductInfo v-if="scope.row.itemType == 'product'" :product="scope.row" />
|
||
<RawMaterialInfo v-else-if="scope.row.itemType === 'raw_material'" :material="scope.row" />
|
||
</template>
|
||
</el-table-column>
|
||
<!-- <el-table-column label="长度 (米)" align="center" prop="length" /> -->
|
||
<el-table-column label="净重(t)" align="center" prop="netWeight" />
|
||
|
||
<el-table-column label="质量状态" align="center" prop="qualityStatus"></el-table-column>
|
||
|
||
<el-table-column label="备注" align="center" prop="remark" show-overflow-tooltip />
|
||
|
||
<el-table-column label="发货状态" align="center" prop="status" width="150">
|
||
<template slot-scope="scope">
|
||
<el-tag v-if="scope.row.status === 1" type="success" size="mini">已发货</el-tag>
|
||
<el-tag v-else type="info" size="mini">未发货</el-tag>
|
||
</template>
|
||
</el-table-column>
|
||
|
||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
||
<template slot-scope="scope">
|
||
<el-button size="mini" type="text" icon="el-icon-view" @click="handlePreviewLabel(scope.row)">
|
||
预览标签
|
||
</el-button>
|
||
<el-button size="mini" type="text" icon="el-icon-printer" @click="handlePrintLabel(scope.row)">
|
||
打印标签
|
||
</el-button>
|
||
<el-button size="mini" type="text" icon="el-icon-search" @click="handleTrace(scope.row)">追溯</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</KLPTable>
|
||
|
||
<!-- 钢卷追溯对话框（使用封装的组件） -->
|
||
<el-dialog title="钢卷追溯" :visible.sync="trace.open" width="90%" append-to-body>
|
||
<coil-trace-result v-loading="trace.loading" :trace-result="trace.result"></coil-trace-result>
|
||
</el-dialog>
|
||
|
||
<!-- 标签预览弹窗 -->
|
||
<el-dialog title="标签预览" :visible.sync="labelRender.visible" append-to-body>
|
||
<label-render :content="labelRender.data" :labelType="labelRender.type" />
|
||
</el-dialog>
|
||
|
||
<label-render ref="labelRender" v-show="false" :content="labelRender.data" />
|
||
</div>
|
||
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
getMaterialCoilTrace,
|
||
} from "@/api/wms/coil";
|
||
import ProductInfo from "@/components/KLPService/Renderer/ProductInfo";
|
||
import RawMaterialInfo from "@/components/KLPService/Renderer/RawMaterialInfo";
|
||
// 引入封装的追溯结果组件
|
||
import CoilTraceResult from "@/views/wms/coil/panels/CoilTraceResult.vue";
|
||
import LabelRender from "@/views/wms/coil/panels/LabelRender/index.vue";
|
||
import CoilNo from "@/components/KLPService/Renderer/CoilNo.vue";
|
||
|
||
export default {
|
||
props: {
|
||
data: {
|
||
type: Array,
|
||
default: () => []
|
||
},
|
||
tableHeight: {
|
||
type: [String, Number],
|
||
default: ''
|
||
}
|
||
},
|
||
components: {
|
||
ProductInfo,
|
||
RawMaterialInfo,
|
||
CoilTraceResult,
|
||
LabelRender,
|
||
CoilNo
|
||
},
|
||
computed: {
|
||
// 计算总卷数
|
||
totalCoils() {
|
||
return this.data.length;
|
||
},
|
||
// 计算总净重
|
||
totalNetWeight() {
|
||
return this.data.reduce((sum, item) => {
|
||
return sum + (Number(item.netWeight) || 0);
|
||
}, 0).toFixed(2);
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
floatLayerConfig: {
|
||
columns: [
|
||
{ label: '入场钢卷号', prop: 'enterCoilNo' },
|
||
{ label: '当前钢卷号', prop: 'currentCoilNo' },
|
||
{ label: '厂家卷号', prop: 'supplierCoilNo' },
|
||
{ label: '逻辑库位', prop: 'warehouseName' },
|
||
{ label: '实际库位', prop: 'actualWarehouseName' },
|
||
{ label: '物料类型', prop: 'materialType' },
|
||
{ label: '班组', prop: 'team' },
|
||
{ label: '净重', prop: 'netWeight' },
|
||
{ label: '毛重', prop: 'grossWeight' },
|
||
{ label: '备注', prop: 'remark' },
|
||
{ label: '质量状态', prop: 'qualityStatus' },
|
||
{ label: '原料材质', prop: 'packingStatus' },
|
||
{ label: '切边要求', prop: 'edgeRequirement' },
|
||
{ label: '包装要求', prop: 'packagingRequirement' },
|
||
{ label: '厂家', prop: 'itemManufacturer' },
|
||
{ label: '调制度', prop: 'temperGrade' },
|
||
{ label: '镀层种类', prop: 'coatingType' },
|
||
{ label: '实测长度(m)', prop: 'actualLength' },
|
||
{ label: '实测宽度(mm)', prop: 'actualWidth' },
|
||
{ label: '实测厚度(mm)', prop: 'actualThickness' },
|
||
],
|
||
title: '详细信息'
|
||
},
|
||
trace: {
|
||
open: false,
|
||
loading: false,
|
||
result: {}
|
||
},
|
||
labelRender: {
|
||
visible: false,
|
||
data: '',
|
||
type: ''
|
||
}
|
||
}
|
||
},
|
||
methods: {
|
||
/** 预览标签 */
|
||
handlePreviewLabel(row) {
|
||
this.labelRender.visible = true;
|
||
this.labelRender.data = {
|
||
...row,
|
||
itemName: itemName,
|
||
updateTime: row.updateTime?.split(' ')[0] || '',
|
||
};
|
||
},
|
||
// 打印标签
|
||
handlePrintLabel(row) {
|
||
this.labelRender.data = {
|
||
...row,
|
||
updateTime: row.updateTime?.split(' ')[0] || '',
|
||
};
|
||
this.$nextTick(() => {
|
||
this.$refs.labelRender.printLabel();
|
||
})
|
||
},
|
||
/** 追溯按钮操作 */
|
||
handleTrace(row) {
|
||
this.trace.open = true;
|
||
this.trace.loading = true;
|
||
this.trace.result = null; // 清空历史数据
|
||
getMaterialCoilTrace({
|
||
coilId: row.coilId,
|
||
currentCoilNo: row.currentCoilNo,
|
||
}).then(res => {
|
||
this.trace.result = res.data; // 将结果传递给组件
|
||
}).catch(err => {
|
||
console.error('溯源查询失败：', err);
|
||
this.$message.error('溯源查询失败，请重试');
|
||
}).finally(() => {
|
||
this.trace.loading = false;
|
||
});
|
||
},
|
||
}
|
||
}
|
||
</script> |