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.bomList" :key="index">
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="BOM编码:">
                            {{ bomItem.code }}
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label="BOM名称:" prop="name">
                            {{ bomItem.name }}
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label="版本号:" prop="version">
                            {{ bomItem.version }}
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label="状态:" prop="status">
                            <el-select v-model="bomItem.status" placeholder="" filterable disabled>
                                <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="请选择" disabled
                                :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-col :span="8">
                        <el-form-item label="所属工厂:" prop="factoryId">
                            <factorySelect v-model="bomItem.factoryId" disabled />
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label="基本数量:" prop="baseCount">
                            <el-row>
                                <el-col :span="12">
                                    {{ bomItem.baseCount }}
                                </el-col>
                                <el-col :span="2">&nbsp;</el-col>
                                <el-col :span="10">
                                    <DictSelection disabled dictName="计量单位:" v-model="bomItem.baseCountUnit" />
                                </el-col>
                            </el-row>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <div class="ele-body">
                        <ele-pro-table ref="table" :columns="columns" :need-page="false" row-key="id"
                            :datasource="bomItem.subDetailList" min-height="200px">
                            <template v-slot:toolbar>
                                <el-button type="primary" size="small" @click="openEdit(index)">编辑</el-button>

                                <el-popconfirm class="ele-action" title="确定要删除此物料BOM？" @confirm="remove(bomItem)">
                                    <template v-slot:reference>
                                        <el-button type="danger" size="small" icon="el-icon-delete">
                                            删除
                                        </el-button>
                                    </template>
                                </el-popconfirm>
                            </template>
                        </ele-pro-table>
                    </div>
                </el-row>
            </el-card>
        </el-form>

        <!-- 物料Bom -->
        <MaterialAdd :visible.sync="materialShow" :data="current" :categoryId="categoryId" @done="done"
            ref="materialAddRef">
        </MaterialAdd>
    </ele-modal>
</template>
  
<script>

import MaterialAdd from './MaterialAdd.vue';
import { pageList } from '@/api/technology/version/version.js';
import { getCategoryBom } from '@/api/material/product';
import { bomDelete } from '@/api/material/BOM';
import factorySelect from '@/components/CommomSelect/factory-select.vue';

export default {
    components: {
        MaterialAdd,
        factorySelect
    },
    props: {
        // 弹窗是否打开
        visible: Boolean,
        // 修改回显的数据
        data: Object
    },
    data() {
        const defaultForm = {
            id: null,

            code: '',
            name: '',
            modelType: '',
            brandNum: '',
            specification: '',
            measuringUnit: '',

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

            versionList: [],

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

            columns: [
                {
                    type: 'index',
                    width: 55,
                    align: 'center'
                },
                {
                    label: '子项编号',
                    prop: 'subCode',
                    action: 'subCode'
                },
                {
                    label: '物料名称',
                    prop: 'categoryName',
                    action: 'categoryName'
                },
                {
                    label: '物料编码',
                    prop: 'categoryCode'
                },
                {
                    label: '牌号',
                    prop: 'brandNum'
                },
                {
                    label: '型号',
                    prop: 'modelType'
                },
                {
                    label: '数量',
                    prop: 'count'
                },
                {
                    label: '计量单位',
                    prop: 'unit'
                },

                {
                    label: '重量',
                    prop: 'netWeight'
                },
                {
                    label: '重量单位',
                    prop: 'weightUnit'
                },
            ],

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

            // 提交状态
            loading: false,

            categoryId: null,

            current: null,

            materialShow: false
        };
    },
    computed: {
        // 是否开启响应式布局
        styleResponsive() {
            return this.$store.state.theme.styleResponsive;
        }
    },
    methods: {
        openEdit(index) {
            this.current = this.form.bomList[index];
            console.log(this.current);
            this.materialShow = true;
        },

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

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

            this.versionList = res.list;
        },

        handleAdd() {
            this.current = null;
            this.materialShow = true;
        },

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

        async getCategoryBomFn() {
            const res = await getCategoryBom(this.categoryId);
            this.form.bomList = res.bomList;
        },

        remove(row) {
            bomDelete([row.id])
                .then((message) => {
                    this.$message.success(message);
                    this.getCategoryBomFn();
                })
                .catch((e) => {
                    this.$message.error(e.message);
                });
        },

        done() {
            this.materialShow = false
            this.getCategoryBomFn();
        },

    },

    watch: {
        async visible(visible) {
            if (visible) {
                this.getVersionList();
                if (this.data) {
                    this.categoryId = this.data.id;
                    this.getCategoryBomFn();
                    this.$util.assignObject(this.form, {
                        ...this.data
                    });
                } else {
                }
            } else {
                this.$refs.form.clearValidate();
                this.form = { ...this.defaultForm };
            }
        }
    }
};
</script>