kd-aiot-frontend/src/views/material/product/components/mouldDialog.vue

<template>
    <ele-modal width="1160px" :visible="visible" v-if="visible" :append-to-body="true" :close-on-click-modal="true"
        custom-class="ele-dialog-form" title="选择物料" @update:visible="updateVisible">
        <header-title title="基本信息"></header-title>
        <el-form ref="form" :model="form" :rules="rules" label-width="120px">
            <el-row>
                <el-col :span="8">
                    <el-form-item label="产品名称:" prop="name">
                        <el-input disabled v-model="form.name" readonly />
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="产品编码:" prop="code">
                        <el-input disabled v-model="form.code" placeholder="自动带入" />
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="型号:" prop="modelType">
                        <el-input disabled v-model="form.modelType" placeholder="自动带入" />
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="牌号:" prop="brandNum">
                        <el-input disabled v-model="form.brandNum" placeholder="自动带入" />
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="规格:" prop="specification">
                        <el-input disabled v-model="form.specification" placeholder="自动带入" />
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="计量单位:" prop="measuringUnit">
                        <el-input disabled v-model="form.measuringUnit" placeholder="自动带入" />
                    </el-form-item>
                </el-col>
            </el-row>

            <header-title title="工序">
            </header-title>

            <ele-pro-table ref="table" :needPage="false" :columns="columns" :datasource="datasource" row-key="id">

                <!-- 表头工具栏 -->
                <template v-slot:toolbar>
                    <el-button size="small" type="primary" icon="el-icon-plus" class="ele-btn-icon"
                        @click="openEdit">新增</el-button>


                </template>

                <template v-slot:palletName="{ row, $index }">
                    <el-input :value="row.palletName" placeholder="请选择"
                        @click.native="palletSelect(row, $index)"></el-input>
                </template>

                <template v-slot:palletCode="{ row }">
                    <el-input :value="row.palletCode" disabled placeholder="自动带入"></el-input>
                </template>


                <template v-slot:palletModelType="{ row }">
                    <el-input :value="row.palletModelType" disabled placeholder="自动带入"></el-input>
                </template>






                <!-- 操作列 -->
                <template v-slot:action="{ row, $index }">

                    <el-popconfirm class="ele-action" title="确定要删除当前工序吗？" @confirm="handleDel(row, $index)">
                        <template v-slot:reference>
                            <el-link type="danger" :underline="false" icon="el-icon-delete">
                                删除
                            </el-link>
                        </template>
                    </el-popconfirm>
                </template>




            </ele-pro-table>


        </el-form>

        <div slot="footer" class="footer">
            <el-button type="primary" @click="save">保存</el-button>
            <el-button @click="visible = false">返回</el-button>
        </div>


        <processModal ref="processRefs" @chooseProcess="chooseProcess"></processModal>
        <ProductModal ref="productRefs" @changeProduct='determineChoose' />

    </ele-modal>
</template>
  
<script>


import processModal from '@/views/technology/productParam/components/processModal.vue'
import ProductModal from '@/views/technology/productParam/components/ProductModal.vue'
import { categoryTaskPallet } from '@/api/material/list'
export default {
    components: {
        processModal,
        ProductModal

    },
    props: {
        // 弹窗是否打开
        visible: Boolean,
        // 修改回显的数据
        data: Object
    },
    data() {
        const defaultForm = {
            id: null,
            code: '',
            name: '',
            modelType: '',
            brandNum: '',
            specification: '',
            measuringUnit: '',

            routeList: []
        };
        return {
            defaultForm,
            // 表单数据
            form: {
                ...defaultForm
            },
            // 表单验证规则
            rules: {
                categoryName: [
                    { required: true, message: '请输入产品名称', trigger: 'blur' }
                ]
            },



            // 提交状态
            loading: false,
            current: null,

            columns: [

                {
                    label: '模具名称',
                    prop: 'palletName',
                    slot: 'palletName',
                    minWidth: 110
                },

                {
                    label: '模具编码',
                    prop: 'palletCode',
                    slot: 'palletCode',
                    minWidth: 110
                },

                {
                    label: '模具型号',
                    prop: 'palletModelType',
                    slot: 'palletModelType',
                    minWidth: 110
                },

                {
                    prop: 'code',
                    label: '工序编码',
                    // sortable: 'custom',
                    showOverflowTooltip: true,
                    align: 'center',
                    minWidth: 110
                },
                {
                    prop: 'name',
                    label: '工序名称',
                    showOverflowTooltip: true,
                    align: 'center',
                    minWidth: 110
                },
                {
                    align: 'center',
                    prop: 'controlName',
                    label: '工序控制码',
                    showOverflowTooltip: true,
                    minWidth: 110
                },
                {
                    prop: 'workCenterName',
                    label: '所属工作中心',
                    align: 'center',
                    showOverflowTooltip: true,
                    minWidth: 110
                },

                {
                    columnKey: 'action',
                    label: '操作',
                    width: 160,
                    align: 'center',
                    resizable: false,
                    slot: 'action',
                    showOverflowTooltip: true
                }
            ],

            removeList: [],
            categoryId: null




        };
    },
    computed: {
        // 是否开启响应式布局
        styleResponsive() {
            return this.$store.state.theme.styleResponsive;
        }
    },
    methods: {

        /* 表格数据源 */
        datasource({ page, limit, where }) {
            return [];
        },



        /* 更新visible */
        updateVisible(value) {
            this.$emit('update:visible', value);
        },

        openEdit() {
            this.$refs.processRefs.open(this.$refs.table.getData())
        },

        chooseProcess(data) {
            this.$refs.table.setData([...data, ...this.$refs.table.getData()]);
        },




        handleDel(row, index) {
            let _arr = this.$refs.table.getData()
            _arr.splice(index, 1)
            this.$refs.table.setData(_arr)
            if (row?.id) {
                this.removeList.push(row.id)
            }
        },

        palletSelect(row, idx) {
            let _arr = this.$refs.table.getData()
            let param = {
                categoryId: _arr[idx].palletId,
                categoryName: _arr[idx].palletName,
                categoryCode: _arr[idx].palletCode
            }
            this.$refs.productRefs.open(param, '模具', '5', idx)
        },

        determineChoose(title, row, idx) {

            if (title == '模具') {
                let _arr = this.$refs.table.getData()
                this.$set(_arr[idx], 'palletId', row.id)
                this.$set(_arr[idx], 'palletName', row.name)
                this.$set(_arr[idx], 'palletCode', row.code)
                this.$set(_arr[idx], 'palletModelType', row.modelType)


                this.$nextTick(() => {
                    this.$refs.table.setData(_arr);
                })

            }


        },


        save() {
            let _arr = this.$refs.table.getData()
            let param = {
                categoryId: this.categoryId,
                takeList: _arr
            }
            categoryTaskPallet(param).then((res) => {
                console.log(res)
            })
        },



    },

    watch: {
        async visible(visible) {
            if (visible) {

                if (this.data) {

                    this.categoryId = this.data.id
                    this.$util.assignObject(this.form, {
                        ...this.data
                    });
                } else {
                }
            } else {
                this.$refs.form.clearValidate();
                this.form = { ...this.defaultForm };
            }
        }
    }
};
</script>