kd-aiot-frontend/src/views/material/product/components/MaterialModal.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="物料BOM">
                <div>
                    <el-button size="small" icon="el-icon-plus" class="ele-btn-icon" type="primary"
                        @click="handleAdd">新增</el-button>

                </div>
            </header-title>

            <el-card v-for="(bomItem, index) in form.list" :key="index">

                <el-row>

                    <el-col :span="8">
                        <el-form-item label="BOM编码:">
                            <el-input v-model="bomItem.bomCode" @click.native="chooseBom(index)" />
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label="BOM名称:" prop="bomName">
                            <el-input placeholder="自动带入" disabled v-model="bomItem.bomName" />
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label="BOM版本:" prop="bomVersion">
                            <el-input placeholder="自动带入" disabled v-model="bomItem.bomVersion" />
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label="状态:" prop="status">
                            <el-select v-model="bomItem.status" placeholder="" filterable>
                                <el-option v-for="item in statusList" :key="item.value" :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>





                    <el-col :span="8">
                        <el-form-item label="生产版本:" prop="produceVersionId">
                            <el-select v-model="bomItem.produceVersionId" filterable placeholder="清选择"
                                :style="{ width: '100%' }">
                                <el-option v-for="item in versionList" :key="item.id" :label="item.code + '-' + item.name"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>


                    <el-col :span="8">
                        <el-button size="small" type="danger" icon="el-icon-delete" @click="removeBom(index)"
                            style="margin-left: 120px">删除</el-button>
                    </el-col>


                </el-row>


                <el-row>

                    <div class="ele-body">
                        <ele-pro-table ref="table" :datasource="bomItem.materialList" :columns="columns">
                            <!-- 表头工具栏 -->
                            <template v-slot:toolbar>
                                <el-button size="small" icon="el-icon-plus" class="ele-btn-icon" type="primary"
                                    @click.native="openParam(index)">添加物料</el-button>
                            </template>

                            <!-- 操作列 -->
                            <template v-slot:action="{ row }">
                                <el-popconfirm class="ele-action" title="确定要删除当前物料吗？" @confirm="remove(row)">
                                    <template v-slot:reference>
                                        <el-link type="danger" :underline="false" icon="el-icon-delete">
                                            删除
                                        </el-link>
                                    </template>
                                </el-popconfirm>
                            </template>
                        </ele-pro-table>
                    </div>

                </el-row>
            </el-card>








        </el-form>




        <template v-slot:footer>
            <el-button @click="updateVisible(false)">取消</el-button>
            <el-button type="primary" :loading="loading" @click="save">
                保存
            </el-button>
        </template>


        <!-- 选择物料弹窗 -->
        <materialDialog ref="materiaRef" @chooseModal="chooseModal"></materialDialog>

        <!-- 选择物料BOM -->
        <bomModal ref="bomRefs" @changeBom="changeBom"></bomModal>

    </ele-modal>
</template>
  
<script>
import materialDialog from '@/components/material'
import bomModal from '@/views/technology/version/components/bomModal.vue'
import { pageList } from '@/api/technology/version/version.js';
export default {
    components: {
        materialDialog,
        bomModal
    },
    props: {
        // 弹窗是否打开
        visible: Boolean,
        // 修改回显的数据
        data: Object
    },
    data() {
        const defaultForm = {
            id: null,
            name: '',
            code: '',
            modelType: '',
            brandNum: '',
            specification: '',
            measuringUnit: '',

            list: [
                {
                    bomCode: '',
                    bomName: '',
                    bomVersion: '',
                    status: '',
                    produceVersionId: '',
                    materialList: []
                }
            ]

        };
        return {
            defaultForm,
            // 表单数据
            form: {
                ...defaultForm,

            },

            versionList: [],



            // 表单验证规则
            rules: {
                categoryName: [
                    { required: true, message: '请输入产品名称', trigger: 'blur' }
                ],



            },


            columns: [

                {
                    prop: 'code',
                    label: '编码'
                },
                {
                    prop: 'name',
                    label: '名称',
                    showOverflowTooltip: true
                },
                {
                    prop: 'brandNum',
                    label: '牌号'
                },
                {
                    prop: 'modelType',
                    label: '型号'
                },
                {
                    prop: 'measuringUnit',
                    label: '计量单位'
                },
                {
                    prop: 'packingUnit',
                    label: '包装单位'
                },

                {
                    columnKey: 'action',
                    label: '操作',

                    align: 'center',
                    resizable: false,
                    slot: 'action',
                    showOverflowTooltip: true
                }

            ],


            statusList: [
                { label: '草稿', value: -1 },
                { label: '失效', value: 0 },
                { label: '生效', value: 1 }
            ],


            // 提交状态
            loading: false,


            removeList: [],

            tableData: []

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




        openParam() {
            this.tableData = this.$refs.table.getData()
            this.$refs.materiaRef.open(this.tableData, '选择物料', '1')
        },

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

        chooseBom(index) {
            this.$refs.bomRefs.open(this.form, index)
        },

        changeBom(row, idx) {
            this.$set(this.form.list[idx], 'bomName', row.name)
            this.$set(this.form.list[idx], 'bomId', row.id)
            this.$set(this.form.list[idx], 'bomCode', row.code)
            this.$set(this.form.list[idx], 'bomVersion', row.version)
        },

        /* 删除 */
        remove(row) {
            const data = this.$refs.table.getData() ?? [];
            if (row.id) {
                this.removeList.push(row.id);
                this.$refs.table.setData(data.filter((d) => d.id !== row.id));
            }


        },


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


        async getVersionList() {
            const res = await pageList({
                pageNum: 1,
                size: 100
            });
            this.versionList = res.list
        },

        handleAdd() {
            this.form.list.push({
                bomCode: '',
                bomName: '',
                bomVersion: '',
                status: '',
                produceVersionId: '',
                materialList: []
            })
        },

        removeBom(index) {
            this.form.list.splice(index, 1)
        },


        /* 保存编辑 */
        save() {
            this.$refs.form.validate((valid) => {

                if (!valid) {
                    return false;
                }
                this.loading = true;



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


    },

    watch: {
        async visible(visible) {
            if (visible) {
                this.getVersionList()
                if (this.data) {

                    this.$util.assignObject(this.form, {
                        ...this.defaultForm,
                        ...this.data
                    });

                } else {


                }


            } else {
                this.$refs.form.clearValidate();
                this.form = { ...this.defaultForm };
            }
        }
    }
};
</script>