feat(调拨单明细): 添加导出和刷新功能
- 在调拨单明细弹窗中添加导出按钮,支持将明细数据导出为CSV文件 - 添加刷新按钮用于重新加载明细数据 - 实现CSV导出功能,包含字段映射和中英文表头处理
This commit is contained in:
@@ -144,7 +144,11 @@
|
|||||||
</el-dialog>
|
</el-dialog>
|
||||||
|
|
||||||
<el-dialog title="调拨单明细" v-loading="detailLoading" :visible.sync="detailOpen" fullscreen>
|
<el-dialog title="调拨单明细" v-loading="detailLoading" :visible.sync="detailOpen" fullscreen>
|
||||||
<coil-selector v-loading="buttonLoading" ref="coilSelector" multiple @confirm="handleCoilChange"></coil-selector>
|
<div style="margin-bottom: 10px; display: flex; align-items: center;">
|
||||||
|
<el-button icon="el-icon-download" type="warning" plain @click="handleExportDetail">导出</el-button>
|
||||||
|
<el-button style="margin-right: 10px;" icon="el-icon-refresh" type="success" plain @click="handleRefreshDetailList">刷新</el-button>
|
||||||
|
<coil-selector v-loading="buttonLoading" ref="coilSelector" multiple @confirm="handleCoilChange"></coil-selector>
|
||||||
|
</div>
|
||||||
<transfer-item-table :data="transferOrderItems" @refreshData="getDetailList" />
|
<transfer-item-table :data="transferOrderItems" @refreshData="getDetailList" />
|
||||||
</el-dialog>
|
</el-dialog>
|
||||||
</div>
|
</div>
|
||||||
@@ -231,6 +235,101 @@ export default {
|
|||||||
this.loading = false;
|
this.loading = false;
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
/** 刷新调拨单明细列表 */
|
||||||
|
handleRefreshDetailList() {
|
||||||
|
this.getDetailList();
|
||||||
|
},
|
||||||
|
/** 导出调拨单明细 */
|
||||||
|
handleExportDetail() {
|
||||||
|
if (this.transferOrderItems.length === 0) {
|
||||||
|
this.$message({ message: '没有数据可导出', type: 'warning' });
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 定义字段映射,英文字段名对应中文表头
|
||||||
|
const fieldMap = {
|
||||||
|
// Before相关字段
|
||||||
|
'materialTypeBeforeName': '物料类型(调拨前)',
|
||||||
|
'materialNameBefore': '物料名称(调拨前)',
|
||||||
|
'specificationBefore': '规格(调拨前)',
|
||||||
|
'materialBefore': '材质(调拨前)',
|
||||||
|
'surfaceTreatmentBefore': '表面处理(调拨前)',
|
||||||
|
'manufacturerBefore': '厂家(调拨前)',
|
||||||
|
'zincLayerBefore': '镀层质量(调拨前)',
|
||||||
|
'warehouseNameBefore': '逻辑库区(调拨前)',
|
||||||
|
// After相关字段
|
||||||
|
'materialTypeAfterName': '物料类型(调拨后)',
|
||||||
|
'materialNameAfter': '物料名称(调拨后)',
|
||||||
|
'specificationAfter': '规格(调拨后)',
|
||||||
|
'materialAfter': '材质(调拨后)',
|
||||||
|
'surfaceTreatmentAfter': '表面处理(调拨后)',
|
||||||
|
'manufacturerAfter': '厂家(调拨后)',
|
||||||
|
'zincLayerAfter': '镀层质量(调拨后)',
|
||||||
|
'warehouseNameAfter': '逻辑库区(调拨后)',
|
||||||
|
// Coil相关字段
|
||||||
|
'coil_enterCoilNo': '入库卷号',
|
||||||
|
'coil_currentCoilNo': '当前卷号',
|
||||||
|
'coil_supplierCoilNo': '厂家卷号',
|
||||||
|
// 'coil_warehouseName': '逻辑库区',
|
||||||
|
'coil_netWeight': '净重',
|
||||||
|
|
||||||
|
// 'coil_itemName': '物品名称',
|
||||||
|
// 'coil_materialType': '物料类型',
|
||||||
|
'coil_qualityStatus': '质量状态',
|
||||||
|
'coil_trimmingRequirement': '切边要求',
|
||||||
|
'coil_packingStatus': '原料材质',
|
||||||
|
'coil_packagingRequirement': '包装要求',
|
||||||
|
'coil_remark': '备注',
|
||||||
|
};
|
||||||
|
|
||||||
|
// 提取所有字段名
|
||||||
|
const exportFields = Object.keys(fieldMap);
|
||||||
|
|
||||||
|
// 准备导出数据
|
||||||
|
const exportData = this.transferOrderItems.map(item => {
|
||||||
|
const flatItem = {};
|
||||||
|
|
||||||
|
// 处理Before和After字段
|
||||||
|
exportFields.forEach(field => {
|
||||||
|
if (field.startsWith('coil_')) {
|
||||||
|
const coilField = field.replace('coil_', '');
|
||||||
|
flatItem[field] = item.coil ? item.coil[coilField] : '';
|
||||||
|
} else {
|
||||||
|
flatItem[field] = item[field] !== null && item[field] !== undefined ? item[field] : '';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
return flatItem;
|
||||||
|
});
|
||||||
|
|
||||||
|
// 生成CSV头部(使用中文)
|
||||||
|
const chineseHeaders = Object.values(fieldMap);
|
||||||
|
const csvContent = [
|
||||||
|
chineseHeaders.join(','), // 中文头部
|
||||||
|
...exportData.map(row => {
|
||||||
|
return exportFields.map(field => {
|
||||||
|
const value = row[field];
|
||||||
|
// 处理包含逗号或引号的值
|
||||||
|
if (typeof value === 'string' && (value.includes(',') || value.includes('"'))) {
|
||||||
|
return `"${value.replace(/"/g, '""')}"`;
|
||||||
|
}
|
||||||
|
return value !== null && value !== undefined ? value : '';
|
||||||
|
}).join(',');
|
||||||
|
})
|
||||||
|
].join('\n');
|
||||||
|
|
||||||
|
// 创建Blob对象
|
||||||
|
const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
|
||||||
|
// 创建下载链接
|
||||||
|
const link = document.createElement('a');
|
||||||
|
const url = URL.createObjectURL(blob);
|
||||||
|
link.setAttribute('href', url);
|
||||||
|
link.setAttribute('download', `transferOrderDetail_${new Date().getTime()}.csv`);
|
||||||
|
link.style.visibility = 'hidden';
|
||||||
|
document.body.appendChild(link);
|
||||||
|
link.click();
|
||||||
|
document.body.removeChild(link);
|
||||||
|
},
|
||||||
/** 钢卷选择器改变 */
|
/** 钢卷选择器改变 */
|
||||||
handleCoilChange(coils) {
|
handleCoilChange(coils) {
|
||||||
console.log(coils);
|
console.log(coils);
|
||||||
|
|||||||
Reference in New Issue
Block a user