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" />
                        </el-form-item>
                    </el-col>

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

                    <el-col :span="8">
                        <el-form-item label="版本号:" prop="bomVersion">
                            <el-input placeholder="请输入BOM版本号" 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.code" :label="item.code + '-' + item.name"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>


             

                </el-row>


                <el-row>

                    <div class="ele-body">
                        <ele-pro-table ref="table" :datasource="bomItem.materialList" row-key="id" :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(index, 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-row class="rx-cc">
                    <el-button size="small" type="danger" icon="el-icon-delete" @click="removeBom(index)"
                            >删除</el-button>

                        <el-button type="primary" size="small" @click="save">
                            保存
                        </el-button>
                </el-row>
            </el-card>


        </el-form>






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

        <!-- 物料Bom -->
        <MaterialAdd :visible.sync="materialShow" ref="materialAddRef"></MaterialAdd>



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

            list: [
                {
                    bomCode: '',
                    bomName: '',
                    bomVersion: '1.0',
                    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: [],

            materialShow: false

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




        openParam(index) {
            this.tableData = this.form.list[index].materialList
            this.$refs.materiaRef.open(this.tableData, '选择物料', '1', index)
        },

        chooseModal(data, id, idx) {
            this.$set(this.form.list[idx], 'materialList', data)

        },




        /* 删除 */
        remove(index, row) {
            console.log(row)
            this.form.list[index].materialList = this.form.list[index].materialList.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.materialShow = true
        },

        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>