eln_web/src/components/Template/StepComponents/JcbComp.vue

<template>
    <div class="jcb-table-container">
        <CustomTable :ref="`tableRef`" :columns="jcbColumns" :formData="formData" :prefixKey="prefixKey"
            class="jcb-table" operationWidth="120px" @clickButton="handleClickButton" @blur="commonHandleUpdate"
            @onAddRow="onAddRow"
            @onRegentSubmit="commonHandleUpdate"
            fieldItemLabel="template.common.operationSteps" :showOperation="templateFillType === 'preFill'">
            <template slot="operation" slot-scope="{ row, rowIndex, columns }">
                <TableOpertaionDelete :row="row" :rowIndex="rowIndex" :columns="columns" @deleteRow="deleteRow">
                </TableOpertaionDelete>
            </template>
        </CustomTable>
    </div>
</template>
<script>
import CustomTable from '../CustomTable.vue';
import TableOpertaionDelete from "@/components/Template/operation/TableOpertaionDelete.vue";
import { getuuid } from "@/utils/index.js";
import moment from "moment"

export default {
    inject: ['templateFillType'],
    components: {
        CustomTable,
        TableOpertaionDelete,
    },
    name: 'JcbComp',
    props: {
        formData: {
            type: Object,
            default: () => { },
        },
        prefixKey: {
            type: String,
            default: '',
        },
        item:{
            type: Object,
            default: () => { },
        },
        type:{
            type: String,
            default: 'qb',
        }
    },
    data() {
        return {
        };
    },
    mounted() {
        console.log(this.prefixKey,"prefixKey")
    },
    computed: {
        jcbColumns() {
            const { buttonName = "取出" } = this.item;
            return [
                {
                    label: '处理批',
                    prop: 'mc',
                    width: '200px',
                    bodyType: "jcb",
                    bodyKey: "clpClick",
                    bodyFillType: "preFill",
                    bodySubType: 'span',
				    bodySubKey: 'bh',
                },
                {
                    label: '时间',
                    prop: 'time',
                    width: '200px',
                    bodyType: "input",
                    bodyDisabled: true,
                    bodyFillType: "actFill",
                    bodySubType: "button",
                    bodySubButtonName: buttonName,
                    bodySubKey: "timeClick",
                    bodySubFillType: "actFill",
                },

            ]
        },
    },
    methods: {
        // 添加表格行
        onAddRow(data) {
            const { dataSource = [] } = data;
            const tableRef = this.$refs['tableRef'];
            if (tableRef) {
                tableRef.addRow({ mc: '', time: '' ,id:getuuid(),rowIndex:dataSource.length});
                // 添加行后触发数据变化
                this.onDataChange();
            }
        },
        // 删除表格行
        deleteRow(rowIndex) {
            const tableRef = this.$refs['tableRef'];
            if (tableRef) {
                tableRef.deleteRow(rowIndex);
                // 删除行后触发数据变化
                this.onDataChange();
            }
        },
        // 实现validateFormData方法，用于表单验证
        validateFormData() {
            
            // 调用CustomTable的同步验证方法
            const validateResult = this.$refs.tableRef.validateFormData();
            
            // 如果验证通过，还需要检查是否有数据行
            if (validateResult.valid) {
                const filledData = this.$refs.tableRef.getFilledFormData();
                const { stepTableFormData = [] } = filledData;
                if (stepTableFormData.length === 0) {
                    return { valid: false, error: '请添加取板数据' };
                }
            }
            console.log("validateResult",validateResult);
            return validateResult;
        },
        // 点击按钮事件
        handleClickButton(key, rowIndex,colIndex,e,data) {
            if (key === 'timeClick') {
                this.$refs['tableRef'].updateDataSourceByRowIndex(rowIndex, { time: moment().format("YYYY-MM-DD HH:mm:ss") },{signData:data,updateFields:['time']})
                this.onDataChange();
            }
        },
        // 数据变化处理方法
        onDataChange() {
            // 获取表格数据
            let tableData = [];
            if (this.$refs.tableRef) {
                const filledData = this.$refs.tableRef.getFilledFormData();
                tableData = filledData.stepTableFormData || [];
            }
            
            // 触发自定义事件，将数据变化传递给父组件
            this.$emit('update', {
                jcbInfo: {
                    stepTableFormData: tableData,
                }
            });
        },
      
        // 处理表格blur事件
        commonHandleUpdate() {
            // 表格数据变化时触发数据变化通知
            this.onDataChange();
        },
    }
}
</script>

<style lang="scss">
.jcb-table-container {
    width: 600px;
}

.jcb-table {
    .custom-table-wrapper {
        margin-top: 0;
    }
}
</style>