eln_web/src/components/Template/operation/TableOpertaion.vue

<template>
    <div>
        <el-popconfirm confirm-button-text='确认' cancel-button-text='取消' icon="el-icon-info" icon-color="red"
            title="确认删除当前数据？" @confirm="deleteRow(rowIndex)">
            <el-button v-if="fillType === 'preFill'" slot="reference" type="text" size="small" class="delete-button">
                删除
            </el-button>

        </el-popconfirm>
        <template v-if="fillType === 'actFill'">
            <el-button type="text" size="small" @click="onSubPackage">分装</el-button>
            <el-button type="text" size="small" @click="onStartConfig">开始配制</el-button>
            <el-button type="text" size="small" @click="onConfigComplete">配制完成</el-button>
            <el-button type="text" size="small" @click="()=>onPrintTag()">打印标签</el-button>
        </template>
    </div>
</template>

<script>
import { EventBus } from "@/utils/eventBus";
import { addTj } from "@/utils/calUnitTools";

export default {
    name: "TableOpertaion",
    props: {
        row: {
            type: Object,
            default: () => { },
        },
        columns: {
            type: Object,
            default: () => { },
        },
        rowIndex: {
            type: Number,
            default: 0,
        },
        fillType: {
            type: String,
            default: "preFill",
        },
    },

    mounted() {
        EventBus.$on("dialogSubPackageSubmit", (data) => {
            this.onSubPackageSubmit(data)
        })
        EventBus.$on("subPackageDialogPrintTag", (data) => {
            this.onPrintTag(data)
        })
    },
    destroyed() {
        EventBus.$off("dialogSubPackageSubmit")
        EventBus.$off("subPackageDialogPrintTag")
    },  
    watch: {
        row: {
            handler(newVal, oldVal) {
                this.innerRow = newVal;
            },
            deep: true,
        }
    },
    data() {
        return {
            innerRow: this.row,
        }
    },
    methods: {
        // 开始配置
        onStartConfig() {
            this.$emit("startConfig", { rowData: this.innerRow, rowIndex: this.rowIndex, headerSelectFields: this.columns.headerSelectFields })
        },
        // 配置完成
        onConfigComplete() {
            this.$emit("configComplete", { rowData: this.innerRow, rowIndex: this.rowIndex, headerSelectFields: this.columns.headerSelectFields })
        },
        // 打印标签
        onPrintTag(data) {
            if(data) {
                if(data.rowIndex === this.rowIndex){
                    this.$emit("printTag", { printCode: data.printCode,type:"subPackage",row: this.innerRow })
                }
            }else{
                this.$emit("printTag", { row: this.innerRow,type:"row" })
            }
        },
        // 分装
        onSubPackage() {
            const { columns, innerRow } = this;
            const { headerSelectFields, columnsData } = columns;
            const col = columnsData.find((item) => item.myCodeFields);
            const { myCodeFields, maxVolumeField, maxVolumeFieldUnit } = col;
            const fields = [], cols = [], units = [];
            if(!myCodeFields || myCodeFields.length === 0){
                console.warn("请先配置myCodeFields字段")
                return
            }
            myCodeFields.forEach((key) => {
                fields.push(innerRow[key])
            });
            maxVolumeField.split(",").forEach((key) => {
                cols.push(innerRow[key] || 0)
            })
            maxVolumeFieldUnit.split(",").forEach((key) => {
                units.push(headerSelectFields[key])
            })
            const {total,unit} = addTj(cols,units)
            let defaultData = { mybh: fields.join(""), maxVolume: total, maxVolumeUnit: unit, rowIndex: this.rowIndex }
            if (innerRow.fzsj) {
                defaultData = innerRow.fzsj
            }
            EventBus.$emit("showSubPackageDialog", defaultData)
        },
        onSubPackageSubmit(data) {
            if (data.rowIndex === this.rowIndex) {
                this.innerRow.fzsj = data;
                //通知后端保存数据
                const params = {
                    type: "fieldChanged",
                    newRecord: null,
                    resourceList: null,
                }
                EventBus.$emit('onModifyRecord', params);
                this.$emit("subPackageSubmit", { fzsj: data, rowData: this.innerRow, headerSelectFields: this.columns.headerSelectFields });
            }
        },
        // 删除行
        deleteRow(index) {
            this.$emit("deleteRow", index)
        }
    }
}
</script>

<style lang="scss" scoped>
.delete-button {
    color: red;
}
</style>