smartpark_durable_front/src/views/firstOrder/components/batchSelectionDialog.vue

<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 ref="innerTable">
                        <el-table-column type="selection" width="55" />
                        <el-table-column type="index" label="#" width="55" />
                        <el-table-column label="物料名称" prop="materialName" />
                        <el-table-column label="物料编码" prop="materialCode" />
                        <el-table-column label="规格型号" prop="model" />
                        <el-table-column label="单价" prop="unitPrice" width="80" />
                    </el-table>
                </template>
            </el-table-column>

            <!-- 常规列展示 -->
            <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="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 maxAllowed = parentRow.applicationQuantity - parentRow.outboundQuantity;
            if(selection.length>(parentRow.applicationQuantity-parentRow.outboundQuantity)){
                const validSelection = selection.slice(0, maxAllowed);
                const removedItems = selection.slice(maxAllowed);
                const selectionWithParent = validSelection.map(item => ({
                    ...item,
                    parentMaterialId: parentRow.materialId, 
                    parentDepartmentName: parentRow.departmentName, 
                    applicationQuantity: parentRow.applicationQuantity,
                    department:parentRow.department,
                    departmentName:parentRow.departmentName,
                    ldDemandEndId: parentRow.ldDemandEndId,
                    outboundQuantity: parentRow.outboundQuantity,
                }));
                 this.selectedRows = this.selectedRows.filter(
                    item => item.parentMaterialId !== parentRow.materialId
                );
                this.selectedRows.push(...selectionWithParent);
                // 获取最后一个被选中的行（通常是 selection 数组的最后一项）
                const lastSelected = selection[selection.length - 1];
    
                // 手动取消该行在 UI 上的勾选
                this.$refs.innerTable.toggleRowSelection(lastSelected, false);
                return

            }
            // 为勾选的数据补充父行关联信息
            const selectionWithParent = selection.map(item => ({
                ...item,
                parentMaterialId: parentRow.materialId, // 关联父行的物料ID
                parentDepartmentName: parentRow.departmentName, // 关联父行的部门信息
                applicationQuantity: parentRow.applicationQuantity,
                ldDemandEndId: parentRow.ldDemandEndId,
                outboundQuantity:parentRow.outboundQuantity,
                 department:parentRow.department,
                    departmentName:parentRow.departmentName,
            }));

            // 先移除当前父行下已勾选的旧数据
            this.selectedRows = this.selectedRows.filter(
                item => item.parentMaterialId !== parentRow.materialId
            );
            // 添加当前勾选的新数据
            this.selectedRows.push(...selectionWithParent);
            // 实时传递给父组件（可选，也可以点击确认后传递）
        },

        // 确认选择按钮 - 主动传递勾选数据给父组件
        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>