152 lines
4.9 KiB
Vue
152 lines
4.9 KiB
Vue
<template>
|
|
<div class="trim-statistics-table">
|
|
<el-table
|
|
:data="tableData"
|
|
border
|
|
stripe
|
|
:span-method="objectSpanMethod"
|
|
style="width: 100%;"
|
|
>
|
|
<!-- 厚度列 -->
|
|
<el-table-column
|
|
prop="thickness"
|
|
label="厚度"
|
|
width="80"
|
|
align="center"
|
|
/>
|
|
|
|
<!-- 冷硬卷板净边料现货库存 表头组 -->
|
|
<el-table-column
|
|
label="冷硬卷板净边料现货库存"
|
|
align="center"
|
|
>
|
|
<el-table-column
|
|
label="总计"
|
|
align="center"
|
|
>
|
|
<el-table-column label="数量(件)" prop="trimmedTotalCount" width="80" align="center" />
|
|
<el-table-column label="重量(吨)" prop="trimmedTotalWeight" width="80" align="center" />
|
|
</el-table-column>
|
|
<el-table-column
|
|
v-for="width in widthList"
|
|
:key="'trimmed-' + width"
|
|
:label="width"
|
|
align="center"
|
|
>
|
|
<el-table-column label="数量(件)" :prop="`trimmed_${width}_count`" width="80" align="center" />
|
|
<el-table-column label="重量(吨)" :prop="`trimmed_${width}_weight`" width="80" align="center" />
|
|
</el-table-column>
|
|
</el-table-column>
|
|
|
|
<!-- 冷硬卷板毛边料现货库存 表头组 -->
|
|
<el-table-column
|
|
label="冷硬卷板毛边料现货库存"
|
|
align="center"
|
|
>
|
|
<el-table-column
|
|
label="总计"
|
|
align="center"
|
|
>
|
|
<el-table-column label="数量(件)" prop="untrimmedTotalCount" width="80" align="center" />
|
|
<el-table-column label="重量(吨)" prop="untrimmedTotalWeight" width="80" align="center" />
|
|
</el-table-column>
|
|
<el-table-column
|
|
v-for="width in widthList"
|
|
:key="'untrimmed-' + width"
|
|
:label="width"
|
|
align="center"
|
|
>
|
|
<el-table-column label="数量(件)" :prop="`untrimmed_${width}_count`" width="80" align="center" />
|
|
<el-table-column label="重量(吨)" :prop="`untrimmed_${width}_weight`" width="80" align="center" />
|
|
</el-table-column>
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'TrimStatistics',
|
|
props: {
|
|
data: {
|
|
type: Array,
|
|
default: () => []
|
|
}
|
|
},
|
|
computed: {
|
|
// 定义表格中需要展示的宽度规格（与图片中一致）
|
|
widthList() {
|
|
return [
|
|
'1000', '1200/1202', '1218/1220', '1240/1252',
|
|
'1010/1015', '1210/1215', '1225/1235', '1260-1265',
|
|
'1000~1005', '1200~1215', '1218~1235', '1250~1265'
|
|
];
|
|
},
|
|
// 处理后的数据（适配表格列结构）
|
|
tableData() {
|
|
return this.data.map(item => {
|
|
const row = {
|
|
thickness: item.thickness,
|
|
trimmedTotalCount: 0, // 净边料总计数量
|
|
trimmedTotalWeight: 0, // 净边料总计重量
|
|
untrimmedTotalCount: 0, // 毛边料总计数量
|
|
untrimmedTotalWeight: 0 // 毛边料总计重量
|
|
};
|
|
|
|
// 初始化所有宽度的数量和重量为0
|
|
this.widthList.forEach(width => {
|
|
row[`trimmed_${width}_count`] = 0;
|
|
row[`trimmed_${width}_weight`] = 0;
|
|
row[`untrimmed_${width}_count`] = 0;
|
|
row[`untrimmed_${width}_weight`] = 0;
|
|
});
|
|
|
|
// 处理净边料数据
|
|
item.trimmedList.forEach(trimmed => {
|
|
const widthKey = trimmed.width;
|
|
if (this.widthList.includes(widthKey)) {
|
|
row[`trimmed_${widthKey}_count`] = trimmed.coilCount;
|
|
row[`trimmed_${widthKey}_weight`] = trimmed.totalWeight;
|
|
// 累加总计
|
|
row.trimmedTotalCount += trimmed.coilCount;
|
|
row.trimmedTotalWeight = (Number(row.trimmedTotalWeight) + Number(trimmed.totalWeight)).toFixed(3);
|
|
}
|
|
});
|
|
|
|
// 处理毛边料数据
|
|
item.untrimmedList.forEach(untrimmed => {
|
|
const widthKey = untrimmed.width;
|
|
if (this.widthList.includes(widthKey)) {
|
|
row[`untrimmed_${widthKey}_count`] = untrimmed.coilCount;
|
|
row[`untrimmed_${widthKey}_weight`] = untrimmed.totalWeight;
|
|
// 累加总计
|
|
row.untrimmedTotalCount += untrimmed.coilCount;
|
|
row.untrimmedTotalWeight = (Number(row.untrimmedTotalWeight) + Number(untrimmed.totalWeight)).toFixed(3);
|
|
}
|
|
});
|
|
|
|
return row;
|
|
});
|
|
}
|
|
},
|
|
methods: {
|
|
// 合并表头的跨度方法（可选，若需要合并行/列可扩展）
|
|
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
|
|
// 可根据需求实现行/列合并逻辑，例如合并重复的厚度行
|
|
// 示例：若需合并相同厚度的行，可在此处返回 { rowspan: n, colspan: m }
|
|
return { rowspan: 1, colspan: 1 };
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.trim-statistics-table {
|
|
padding: 10px;
|
|
overflow-x: auto;
|
|
}
|
|
.el-table {
|
|
--el-table-header-text-color: #333;
|
|
--el-table-row-hover-bg-color: #f5f7fa;
|
|
}
|
|
</style> |