You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
149 lines
5.3 KiB
149 lines
5.3 KiB
<template> |
|
<el-dialog :close-on-click-modal="false" :title="batchSelectionTitle" :visible.sync="batchSelectionVisible" |
|
:append-to-body="true" width="70%" @close="handleCloseDetail" fullscreen> |
|
<el-table :data="tableData" style="width: 100%" border> |
|
<!-- 展开行详情 --> |
|
<el-table-column type="expand"> |
|
<template slot-scope="props"> |
|
<!-- 关联表单列表（带复选框） --> |
|
<el-table :data="props.row.oneFormList || []" size="mini" style="width: 100%" |
|
@selection-change="(val) => handleSelectionChange(val, props.row)" border> |
|
<el-table-column type="selection" width="55" /> |
|
<el-table-column type="index" label="#" width="55" /> |
|
<!-- <el-table-column label="表单ID" prop="id" width="80" /> --> |
|
<el-table-column label="物料名称" prop="materialName" /> |
|
<el-table-column label="物料编码" prop="materialCode" /> |
|
<el-table-column label="规格型号" prop="model" /> |
|
<!-- <el-table-column label="申请数量" prop="applicationQuantity" /> --> |
|
<el-table-column label="单价" prop="unitPrice" width="80" /> |
|
</el-table> |
|
</template> |
|
</el-table-column> |
|
|
|
<!-- 常规列展示 --> |
|
<!-- <el-table-column label="物料ID" prop="materialId" /> --> |
|
<el-table-column label="物料编码" prop="materialCode" /> |
|
<el-table-column label="物料名称" prop="materialName" /> |
|
<el-table-column label="规格型号" prop="model" /> |
|
<el-table-column label="申请数量" prop="applicationQuantity" /> |
|
<!-- <el-table-column label="本此出库数量" prop="applicationQuantity" /> --> |
|
<el-table-column label="已出库数量" prop="outboundQuantity" /> |
|
<el-table-column label="部门" prop="departmentName" /> |
|
<el-table-column label="单位" prop="unit" /> |
|
</el-table> |
|
<div style="text-align: right; margin-top: 20px"> |
|
<el-button @click="handleCloseDetail">取消</el-button> |
|
<el-button @click="handleConfirmSelect" type="primary">确认选择</el-button> |
|
</div> |
|
</el-dialog> |
|
</template> |
|
|
|
<style> |
|
.demo-table-expand { |
|
font-size: 0; |
|
} |
|
|
|
.demo-table-expand label { |
|
width: 90px; |
|
color: #99a9bf; |
|
} |
|
|
|
.demo-table-expand .el-form-item { |
|
margin-right: 0; |
|
margin-bottom: 15px; |
|
width: 50%; |
|
} |
|
|
|
/* 适配嵌套表格样式 */ |
|
.demo-table-expand .el-table { |
|
--el-table-header-text-color: #666; |
|
--el-table-row-hover-bg-color: #f8f9fa; |
|
} |
|
|
|
/* 展开行内表格样式优化 */ |
|
.el-table__expanded-cell .el-table { |
|
margin-bottom: 16px; |
|
} |
|
</style> |
|
|
|
<script> |
|
export default { |
|
props: { |
|
batchSelectionVisible: { |
|
type: Boolean, |
|
default: false |
|
}, |
|
batchSelectionTitle: { |
|
type: String, |
|
default: '物料出库信息' |
|
}, |
|
tableData: { |
|
type: Array, |
|
default: () => [] |
|
}, |
|
inBatchForm: { |
|
type: Object, |
|
default: () => { } |
|
} |
|
}, |
|
data() { |
|
return { |
|
// 存储所有勾选的行数据 |
|
selectedRows: [] |
|
}; |
|
}, |
|
methods: { |
|
// 监听嵌套表格的勾选事件 |
|
handleSelectionChange(selection, parentRow) { |
|
console.log('666666', selection, parentRow) |
|
// 为勾选的数据补充父行关联信息 |
|
const selectionWithParent = selection.map(item => ({ |
|
...item, |
|
parentMaterialId: parentRow.materialId, // 关联父行的物料ID |
|
parentDepartmentName: parentRow.departmentName, // 关联父行的部门信息 |
|
applicationQuantity: parentRow.applicationQuantity, |
|
ldDemandEndId: parentRow.ldDemandEndId, |
|
outboundQuantity:parentRow.outboundQuantity, |
|
})); |
|
|
|
// 先移除当前父行下已勾选的旧数据 |
|
this.selectedRows = this.selectedRows.filter( |
|
item => item.parentMaterialId !== parentRow.materialId |
|
); |
|
// 添加当前勾选的新数据 |
|
this.selectedRows.push(...selectionWithParent); |
|
console.log('777777', selection, parentRow, this.selectedRows) |
|
// 实时传递给父组件（可选，也可以点击确认后传递） |
|
}, |
|
|
|
// 确认选择按钮 - 主动传递勾选数据给父组件 |
|
handleConfirmSelect() { |
|
console.log(1222) |
|
console.log(this.selectedRows, '00000') |
|
|
|
// this.$emit('confirm-selection', this.selectedRows); |
|
this.batchSelectionVisible = false; |
|
|
|
this.$emit('selectionChange', this.selectedRows); |
|
|
|
|
|
// 可选择关闭弹窗 |
|
// this.handleCloseDetail(); |
|
}, |
|
|
|
// // 关闭弹窗的处理方法 |
|
handleCloseDetail() { |
|
// this.$emit('update:batchSelectionVisible', false); |
|
|
|
// this.$emit('handleCloseDetail') |
|
this.$emit('selectionChange', this.selectedRows); |
|
}, |
|
|
|
}, |
|
mounted() { |
|
console.log(9999999, this.inBatchForm) |
|
} |
|
|
|
} |
|
|
|
</script>
|
|
|