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