feat(钢卷物料): 实现选中数据导出功能并优化标签显示

添加findItemWithBom工具函数用于统一获取物品名称
修改OuterTagPreview组件使用itemName替代productName
重构导出功能支持选中数据导出,并优化Excel生成逻辑
This commit is contained in:
砂糖
2025-10-30 15:32:55 +08:00
parent 824ce738a9
commit bad3f98599
3 changed files with 94 additions and 10 deletions

View File

@@ -94,6 +94,36 @@ const actions = {
}
};
export function findItemWithBom(itemType, itemId) {
if (!itemType || !itemId) {
return null;
}
console.log('itemType', itemType, 'itemId', itemId)
let map = {}
if (itemType === 'product') {
map = state.productMap;
} else if (itemType === 'raw_material') {
map = state.rawMaterialMap;
} else {
return null;
}
console.log('map', map)
const item = map[itemId];
const bomId = item.bomId
if (!item) {
return null;
}
console.log('bomId', bomId, item)
const bomItems = state.bomMap[bomId];
return {
...item,
boms: bomItems || [],
itemName: itemType === 'product' ? item.productName : item.rawMaterialName,
itemType,
};
}
export default {
namespaced: true,
state,

View File

@@ -24,7 +24,7 @@
<!-- 第二行执行标准 + 钢卷号 -->
<div class="info-grid-item label-cell">产品名称</div>
<div class="info-grid-item value-cell">
<input type="text" class="nob" :value="content.productName || ''" />
<input type="text" class="nob" :value="content.itemName || ''" />
</div>
<div class="info-grid-item label-cell">执行标准</div>
<div class="info-grid-item value-cell">

View File

@@ -129,8 +129,10 @@
</el-select>
</el-form-item>
<el-form-item label="物品ID" prop="itemId">
<product-select v-if="form.itemType == 'product'" v-model="form.itemId" placeholder="请选择成品ID" style="width: 100%;" clearable />
<raw-material-select v-else-if="form.itemType == 'raw_material'" v-model="form.itemId" placeholder="请选择原料ID" style="width: 100%;" clearable />
<product-select v-if="form.itemType == 'product'" v-model="form.itemId" placeholder="请选择成品ID"
style="width: 100%;" clearable />
<raw-material-select v-else-if="form.itemType == 'raw_material'" v-model="form.itemId" placeholder="请选择原料ID"
style="width: 100%;" clearable />
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input v-model="form.remark" placeholder="请输入备注" />
@@ -164,6 +166,7 @@
import { listMaterialCoil, getMaterialCoil, delMaterialCoil, addMaterialCoil, updateMaterialCoilSimple, getMaterialCoilTrace } from "@/api/wms/coil";
import WarehouseSelect from "@/components/WarehouseSelect";
import QRCode from "../../print/components/QRCode.vue";
import * as XLSX from 'xlsx'
import { saveAsImage } from '@/utils/klp';
import ProductSelect from "@/components/KLPService/ProductSelect";
import RawMaterialSelect from "@/components/KLPService/RawMaterialSelect";
@@ -174,6 +177,7 @@ import RawMaterialInfo from "@/components/KLPService/Renderer/RawMaterialInfo";
// 引入封装的追溯结果组件
import CoilTraceResult from "./CoilTraceResult.vue"; // 路径根据实际存放位置调整
import LabelRender from './LabelRender/index.vue'
import { findItemWithBom } from "@/store/modules/category";
export default {
name: "MaterialCoil",
@@ -196,7 +200,7 @@ export default {
},
querys: {
type: Object,
default: () => {},
default: () => { },
},
labelType: {
type: String,
@@ -301,7 +305,10 @@ export default {
/** 预览标签 */
handlePreviewLabel(row) {
this.labelRender.visible = true;
this.labelRender.data = row;
this.labelRender.data = {
...row,
itemName: findItemWithBom(row.itemType, row.itemId)?.itemName || '',
};
},
/** 下载二维码 */
handleDownloadQRCode(row) {
@@ -400,7 +407,7 @@ export default {
this.title = "修改钢卷物料";
});
},
transferCoil() {},
transferCoil() { },
/** 提交按钮 */
submitForm() {
this.$refs["form"].validate(valid => {
@@ -441,11 +448,58 @@ export default {
this.loading = false;
});
},
/** 导出按钮操作 */
/** 导出选中数据操作 */
handleExport() {
this.download('wms/materialCoil/export', {
...this.queryParams
}, `materialCoil_${new Date().getTime()}.xlsx`)
// 1. 判断是否有选中数据
if (this.ids.length === 0) {
this.$message.warning('请先选中要导出的数据');
return;
}
// 2. 筛选选中的数据通过ids匹配表格数据
const selectedData = this.materialCoilList.filter(item =>
this.ids.includes(item.coilId) // 用选中的coilId匹配表格数据
);
// 3. 处理导出数据格式(和之前一致,转换枚举值)
const exportData = selectedData.map(item => {
return {
'入场钢卷号': item.enterCoilNo || '',
'当前钢卷号': item.currentCoilNo || '',
'厂家原料卷号': item.supplierCoilNo || '',
'库区': item.itemType === 'product' ? '成品' : '原料',
'仓库': item.warehouseName || '',
'物品': findItemWithBom(item.itemType, item.itemId)?.itemName || '',
'数据类型': item.dataType === 0 ? '历史数据' : '当前数据',
'班组': item.team || '',
'毛重': item.grossWeight || '',
'净重': item.netWeight || '',
'备注': item.remark || ''
};
});
// 4. 生成Excel并下载复用之前的逻辑
const worksheet = XLSX.utils.json_to_sheet(exportData);
const workbook = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(workbook, worksheet, '选中钢卷物料');
const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });
this.saveExcelFile(excelBuffer, '选中钢卷物料数据');
},
/** 保存Excel文件到本地 */
saveExcelFile(buffer, fileName) {
const blob = new Blob([buffer], {
type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8'
});
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = `${fileName}_${new Date().getTime()}.xlsx`; // 文件名带时间戳
document.body.appendChild(a);
a.click(); // 触发下载
document.body.removeChild(a); // 清理DOM
URL.revokeObjectURL(url); // 释放URL对象
}
}
};