6 changed files with 726 additions and 1293 deletions
-
2src/api/ecss/ecss.js
-
324src/views/modules/ecss/codelnotify.vue
-
692src/views/modules/ecss/codelnotifyConfirm.vue
-
512src/views/modules/ecss/components/PackingDetailTab.vue
-
301src/views/modules/ecss/createDeclaration.vue
-
188src/views/modules/ecss/pallet_upload_excel.vue
@ -0,0 +1,512 @@ |
|||||
|
<template> |
||||
|
<div class="packing-detail-tab"> |
||||
|
<el-table |
||||
|
:data="dataListBoxes" |
||||
|
:max-height="height * 1.5" |
||||
|
border |
||||
|
v-loading="dataListLoading" |
||||
|
style="width: 100%;" |
||||
|
:expand-row-keys="expandedBoxRows" |
||||
|
:row-key="getBoxRowKey" |
||||
|
@expand-change="handleBoxExpand"> |
||||
|
<el-table-column type="expand"> |
||||
|
<template slot-scope="props"> |
||||
|
<!-- 加载状态 --> |
||||
|
<div v-if="props.row.loading" class="expand-loading"> |
||||
|
<i class="el-icon-loading"></i> |
||||
|
<span>正在加载明细数据...</span> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 明细内容区域 --> |
||||
|
<div v-else class="expand-detail-container"> |
||||
|
<!-- 明细表格 --> |
||||
|
<el-table |
||||
|
v-if="props.row.palletDetails && props.row.palletDetails.length > 0" |
||||
|
:data="props.row.palletDetails" |
||||
|
:max-height="300" |
||||
|
size="mini" |
||||
|
stripe |
||||
|
class="expand-detail-table"> |
||||
|
<el-table-column |
||||
|
v-for="(item,index) in columnList3" :key="index" |
||||
|
:sortable="item.columnSortable" |
||||
|
:prop="item.columnProp" |
||||
|
:header-align="item.headerAlign" |
||||
|
:show-overflow-tooltip="item.showOverflowTooltip" |
||||
|
:align="item.align" |
||||
|
:min-width="item.columnWidth" |
||||
|
:label="item.columnLabel"> |
||||
|
<template slot-scope="scope"> |
||||
|
<span v-if="!item.columnHidden"> |
||||
|
{{ formatDetailValue(scope.row[item.columnProp], item.columnProp) }} |
||||
|
</span> |
||||
|
<span v-if="item.columnImage"> |
||||
|
<img :src="scope.row[item.columnProp]" style="width: 100px; height: 80px"/> |
||||
|
</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
|
||||
|
<!-- 空数据状态 --> |
||||
|
<div v-else class="expand-empty-state"> |
||||
|
<i class="el-icon-box"></i> |
||||
|
<p>暂无明细数据</p> |
||||
|
<span>该栈板下暂时没有装箱明细信息</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column |
||||
|
v-for="(item,index) in columnListBoxes" :key="index" |
||||
|
:sortable="item.columnSortable" |
||||
|
:prop="item.columnProp" |
||||
|
:header-align="item.headerAlign" |
||||
|
:show-overflow-tooltip="item.showOverflowTooltip" |
||||
|
:align="item.align" |
||||
|
:fixed="item.fixed==''?false:item.fixed" |
||||
|
:min-width="item.columnWidth" |
||||
|
:label="item.columnLabel"> |
||||
|
<template slot-scope="scope"> |
||||
|
<span v-if="!item.columnHidden"> {{ scope.row[item.columnProp] }}</span> |
||||
|
<span v-if="item.columnImage"><img :src="scope.row[item.columnProp]" |
||||
|
style="width: 100px; height: 80px"/></span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { selectBoxList, searchCoDelPalletDataNew } from "@/api/ecss/ecss.js" |
||||
|
|
||||
|
export default { |
||||
|
name: "PackingDetailTab", |
||||
|
props: { |
||||
|
currentRow: { |
||||
|
type: Object, |
||||
|
default: () => ({}) |
||||
|
}, |
||||
|
height: { |
||||
|
type: Number, |
||||
|
default: 200 |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
dataListBoxes: [], // 箱数据列表 |
||||
|
expandedBoxRows: [], // 展开的行 |
||||
|
dataListLoading: false, |
||||
|
// 装箱明细列定义 |
||||
|
columnList3: [ |
||||
|
{ |
||||
|
userId: this.$store.state.user.name, |
||||
|
functionId: 801002, |
||||
|
serialNumber: '801002Table3ItemNo', |
||||
|
tableId: "801002Table3", |
||||
|
tableName: "装箱明细", |
||||
|
columnProp: "itemNo", |
||||
|
headerAlign: "center", |
||||
|
align: "right", |
||||
|
columnLabel: "序号", |
||||
|
columnHidden: false, |
||||
|
columnImage: false, |
||||
|
columnSortable: false, |
||||
|
sortLv: 0, |
||||
|
status: true, |
||||
|
fixed: '', |
||||
|
columnWidth: 40 |
||||
|
}, |
||||
|
{ |
||||
|
userId: this.$store.state.user.name, |
||||
|
functionId: 801002, |
||||
|
serialNumber: '801002Table3PoNo', |
||||
|
tableId: "801002Table3", |
||||
|
tableName: "装箱明细", |
||||
|
columnProp: "poNo", |
||||
|
headerAlign: "center", |
||||
|
align: "left", |
||||
|
columnLabel: "PO", |
||||
|
columnHidden: false, |
||||
|
columnImage: false, |
||||
|
columnSortable: false, |
||||
|
sortLv: 0, |
||||
|
status: true, |
||||
|
fixed: '', |
||||
|
columnWidth: 100 |
||||
|
}, |
||||
|
{ |
||||
|
userId: this.$store.state.user.name, |
||||
|
functionId: 801002, |
||||
|
serialNumber: '801002Table3PN', |
||||
|
tableId: "801002Table3", |
||||
|
tableName: "装箱明细", |
||||
|
columnProp: "pn", |
||||
|
headerAlign: "center", |
||||
|
align: "left", |
||||
|
columnLabel: "PN", |
||||
|
columnHidden: false, |
||||
|
columnImage: false, |
||||
|
columnSortable: false, |
||||
|
sortLv: 0, |
||||
|
status: true, |
||||
|
fixed: '', |
||||
|
columnWidth: 100 |
||||
|
}, |
||||
|
{ |
||||
|
userId: this.$store.state.user.name, |
||||
|
functionId: 801002, |
||||
|
serialNumber: '801002Table3Qty', |
||||
|
tableId: "801002Table3", |
||||
|
tableName: "装箱明细", |
||||
|
columnProp: "qty", |
||||
|
headerAlign: "center", |
||||
|
align: "right", |
||||
|
columnLabel: "数量", |
||||
|
columnHidden: false, |
||||
|
columnImage: false, |
||||
|
columnSortable: false, |
||||
|
sortLv: 0, |
||||
|
status: true, |
||||
|
fixed: '', |
||||
|
columnWidth: 50 |
||||
|
}, |
||||
|
{ |
||||
|
userId: this.$store.state.user.name, |
||||
|
functionId: 801002, |
||||
|
serialNumber: '801002Table3Rolls', |
||||
|
tableId: "801002Table3", |
||||
|
tableName: "装箱明细", |
||||
|
columnProp: "rolls", |
||||
|
headerAlign: "center", |
||||
|
align: "right", |
||||
|
columnLabel: "Rolls", |
||||
|
columnHidden: false, |
||||
|
columnImage: false, |
||||
|
columnSortable: false, |
||||
|
sortLv: 0, |
||||
|
status: true, |
||||
|
fixed: '', |
||||
|
columnWidth: 50 |
||||
|
}, |
||||
|
], |
||||
|
// 箱数据列定义 |
||||
|
columnListBoxes: [ |
||||
|
{ |
||||
|
userId: this.$store.state.user.name, |
||||
|
functionId: 801002, |
||||
|
serialNumber: '801002Table3ItemNo', |
||||
|
tableId: "801002Table3", |
||||
|
tableName: "装箱明细", |
||||
|
columnProp: "item_no", |
||||
|
headerAlign: "center", |
||||
|
align: "right", |
||||
|
columnLabel: "序号", |
||||
|
columnHidden: false, |
||||
|
columnImage: false, |
||||
|
columnSortable: false, |
||||
|
sortLv: 0, |
||||
|
status: true, |
||||
|
fixed: '', |
||||
|
columnWidth: 40 |
||||
|
}, |
||||
|
{ |
||||
|
userId: this.$store.state.user.name, |
||||
|
functionId: 801002, |
||||
|
serialNumber: '801002Table3BoxQty', |
||||
|
tableId: "801002Table3", |
||||
|
tableName: "装箱明细", |
||||
|
columnProp: "box_qty", |
||||
|
headerAlign: "center", |
||||
|
align: "right", |
||||
|
columnLabel: "箱数", |
||||
|
columnHidden: false, |
||||
|
columnImage: false, |
||||
|
columnSortable: false, |
||||
|
sortLv: 0, |
||||
|
status: true, |
||||
|
fixed: '', |
||||
|
columnWidth: 50 |
||||
|
}, |
||||
|
{ |
||||
|
userId: this.$store.state.user.name, |
||||
|
functionId: 801002, |
||||
|
serialNumber: '801002TableGrossWeight', |
||||
|
tableId: "801002Table3", |
||||
|
tableName: "装箱明细", |
||||
|
columnProp: "grossWeight", |
||||
|
headerAlign: "center", |
||||
|
align: "right", |
||||
|
columnLabel: "毛重", |
||||
|
columnHidden: false, |
||||
|
columnImage: false, |
||||
|
columnSortable: false, |
||||
|
sortLv: 0, |
||||
|
status: true, |
||||
|
fixed: '', |
||||
|
columnWidth: 50 |
||||
|
}, |
||||
|
{ |
||||
|
userId: this.$store.state.user.name, |
||||
|
functionId: 801002, |
||||
|
serialNumber: '801002TableNetWeight', |
||||
|
tableId: "801002Table3", |
||||
|
tableName: "装箱明细", |
||||
|
columnProp: "netWeight", |
||||
|
headerAlign: "center", |
||||
|
align: "right", |
||||
|
columnLabel: "净重", |
||||
|
columnHidden: false, |
||||
|
columnImage: false, |
||||
|
columnSortable: false, |
||||
|
sortLv: 0, |
||||
|
status: true, |
||||
|
fixed: '', |
||||
|
columnWidth: 50 |
||||
|
}, |
||||
|
] |
||||
|
} |
||||
|
}, |
||||
|
watch: { |
||||
|
currentRow: { |
||||
|
handler(newVal) { |
||||
|
if (newVal && newVal.site) { |
||||
|
this.loadBoxList(); |
||||
|
} |
||||
|
}, |
||||
|
deep: true, |
||||
|
immediate: true |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
// 装箱明细相关方法 |
||||
|
loadBoxList() { |
||||
|
if (!this.currentRow || !this.currentRow.site) { |
||||
|
this.dataListBoxes = []; |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
// 清理之前的展开状态 |
||||
|
this.expandedBoxRows = []; |
||||
|
this.dataListLoading = true; |
||||
|
|
||||
|
// 获取ecss_CoDelBoxList数据 |
||||
|
selectBoxList(this.currentRow).then(({data}) => { |
||||
|
if (data && data.code == 0) { |
||||
|
this.dataListBoxes = data.rows.map(row => ({ |
||||
|
...row, |
||||
|
palletDetails: [], // 初始化明细数据为空 |
||||
|
loading: false // 初始化加载状态 |
||||
|
})) |
||||
|
} else { |
||||
|
this.dataListBoxes = []; |
||||
|
} |
||||
|
}).catch(error => { |
||||
|
console.error('加载箱数据失败:', error); |
||||
|
this.dataListBoxes = []; |
||||
|
}).finally(() => { |
||||
|
this.dataListLoading = false; |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
// 获取行的唯一标识 |
||||
|
getBoxRowKey(row) { |
||||
|
// 使用多个字段组合确保唯一性 |
||||
|
return `${row.item_no || ''}_${row.palletRemark || ''}_${row.box_qty || ''}`; |
||||
|
}, |
||||
|
|
||||
|
// 处理行展开事件 |
||||
|
handleBoxExpand(row, expandedRows) { |
||||
|
// 更新展开行的数组 |
||||
|
this.expandedBoxRows = expandedRows.map(expandedRow => this.getBoxRowKey(expandedRow)); |
||||
|
|
||||
|
if (expandedRows.includes(row)) { |
||||
|
// 行被展开，加载明细数据 |
||||
|
this.loadPalletDetails(row); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
// 加载栈板明细数据 |
||||
|
loadPalletDetails(boxRow) { |
||||
|
if (boxRow.palletDetails && boxRow.palletDetails.length > 0) { |
||||
|
// 如果已经加载过，直接返回 |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
// 设置加载状态 |
||||
|
this.$set(boxRow, 'loading', true); |
||||
|
|
||||
|
// 构造查询参数 |
||||
|
let detailParams = { |
||||
|
site: this.currentRow.site, |
||||
|
buNo: this.currentRow.buNo, |
||||
|
delNo: this.currentRow.delNo, |
||||
|
seqNo: boxRow.item_no, |
||||
|
palletRemark: boxRow.palletRemark |
||||
|
}; |
||||
|
|
||||
|
// 调用API获取明细数据 |
||||
|
searchCoDelPalletDataNew(detailParams).then(({data}) => { |
||||
|
if (data && data.code == 0) { |
||||
|
// 将明细数据赋值给当前行 |
||||
|
this.$set(boxRow, 'palletDetails', data.rows); |
||||
|
} else { |
||||
|
this.$set(boxRow, 'palletDetails', []); |
||||
|
} |
||||
|
}).catch(error => { |
||||
|
console.error('加载栈板明细数据失败:', error); |
||||
|
this.$set(boxRow, 'palletDetails', []); |
||||
|
}).finally(() => { |
||||
|
// 清除加载状态 |
||||
|
this.$set(boxRow, 'loading', false); |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
// 格式化明细值显示 |
||||
|
formatDetailValue(value, columnProp) { |
||||
|
if (value === null || value === undefined || value === '') { |
||||
|
return '-'; |
||||
|
} |
||||
|
|
||||
|
// 数字类型格式化 |
||||
|
if (columnProp === 'qty' || columnProp === 'rolls') { |
||||
|
return parseInt(value).toLocaleString(); |
||||
|
} |
||||
|
|
||||
|
return value; |
||||
|
}, |
||||
|
|
||||
|
// 刷新数据的公共方法 |
||||
|
refresh() { |
||||
|
this.loadBoxList(); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
.packing-detail-tab { |
||||
|
width: 100%; |
||||
|
} |
||||
|
|
||||
|
/* 展开明细容器样式 */ |
||||
|
.expand-detail-container { |
||||
|
background: #fafafa; |
||||
|
border-radius: 6px; |
||||
|
overflow: visible; |
||||
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); |
||||
|
} |
||||
|
|
||||
|
/* 加载状态样式 */ |
||||
|
.expand-loading { |
||||
|
text-align: center; |
||||
|
padding: 30px; |
||||
|
color: #666; |
||||
|
background: #fafafa; |
||||
|
margin: 8px 16px; |
||||
|
border-radius: 6px; |
||||
|
} |
||||
|
|
||||
|
.expand-loading i { |
||||
|
font-size: 18px; |
||||
|
margin-right: 8px; |
||||
|
color: #409eff; |
||||
|
} |
||||
|
|
||||
|
/* 明细表格样式 */ |
||||
|
.expand-detail-table { |
||||
|
margin: 0; |
||||
|
border: none; |
||||
|
} |
||||
|
|
||||
|
/deep/ .expand-detail-table .el-table__body-wrapper { |
||||
|
overflow-y: auto; |
||||
|
} |
||||
|
|
||||
|
/deep/ .expand-detail-table .el-table__header { |
||||
|
background: #f8f9fa; |
||||
|
} |
||||
|
|
||||
|
/deep/ .expand-detail-table .el-table__header th { |
||||
|
background: #eef7f0; |
||||
|
color: #333; |
||||
|
font-weight: 500; |
||||
|
border-bottom: 2px solid #e9ecef; |
||||
|
} |
||||
|
|
||||
|
/deep/ .expand-detail-table .el-table__row:hover > td { |
||||
|
background-color: #f0f9ff; |
||||
|
} |
||||
|
|
||||
|
/deep/ .expand-detail-table .el-table__row.el-table__row--striped { |
||||
|
background: #fbfcfd; |
||||
|
} |
||||
|
|
||||
|
/deep/ .expand-detail-table .el-table__row.el-table__row--striped:hover > td { |
||||
|
background-color: #f0f9ff; |
||||
|
} |
||||
|
|
||||
|
/* 空数据状态样式 */ |
||||
|
.expand-empty-state { |
||||
|
text-align: center; |
||||
|
padding: 40px 20px; |
||||
|
color: #999; |
||||
|
} |
||||
|
|
||||
|
.expand-empty-state i { |
||||
|
font-size: 48px; |
||||
|
color: #ddd; |
||||
|
margin-bottom: 12px; |
||||
|
display: block; |
||||
|
} |
||||
|
|
||||
|
.expand-empty-state p { |
||||
|
font-size: 16px; |
||||
|
margin: 0 0 8px 0; |
||||
|
color: #666; |
||||
|
} |
||||
|
|
||||
|
.expand-empty-state span { |
||||
|
font-size: 13px; |
||||
|
color: #999; |
||||
|
} |
||||
|
|
||||
|
/* 响应式调整 */ |
||||
|
@media (max-width: 768px) { |
||||
|
.expand-detail-container { |
||||
|
margin: 8px 8px; |
||||
|
padding: 6px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/* 确保主表格容器的滚动行为 */ |
||||
|
/deep/ .el-table__expanded-cell { |
||||
|
padding: 0 !important; |
||||
|
} |
||||
|
|
||||
|
/deep/ .el-table__expand-column .cell { |
||||
|
padding: 0; |
||||
|
} |
||||
|
|
||||
|
/* 确保表格滚动条正常显示 */ |
||||
|
/deep/ .el-table .el-table__body-wrapper { |
||||
|
overflow-y: auto; |
||||
|
} |
||||
|
|
||||
|
/deep/ .el-table__body-wrapper::-webkit-scrollbar { |
||||
|
width: 6px; |
||||
|
} |
||||
|
|
||||
|
/deep/ .el-table__body-wrapper::-webkit-scrollbar-track { |
||||
|
background: #f1f1f1; |
||||
|
border-radius: 3px; |
||||
|
} |
||||
|
|
||||
|
/deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb { |
||||
|
background: #c1c1c1; |
||||
|
border-radius: 3px; |
||||
|
} |
||||
|
|
||||
|
/deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb:hover { |
||||
|
background: #a8a8a8; |
||||
|
} |
||||
|
</style> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue