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

<template>
    <ele-modal width="1060px" :visible="visible" v-if="visible" :append-to-body="true" :close-on-click-modal="true"
        custom-class="ele-dialog-form" title="物料BOM" @update:visible="updateVisible">
        <el-form ref="form" :model="form" :rules="rules" label-width="120px">
            <header-title title="物料BOM"> </header-title>

            <el-row>
                <el-col :span="8">
                    <el-form-item label="BOM编码:" prop="code">
                        <el-input v-model="form.code" disabled />
                    </el-form-item>
                </el-col>

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

                <el-col :span="8">
                    <el-form-item label="版本号:" prop="version">
                        <el-input placeholder="请输入BOM版本号" v-model="form.version" />
                    </el-form-item>
                </el-col>

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

                <el-col :span="8">
                    <el-form-item label="基本数量" prop="baseCount">
                        <el-row>
                            <el-col :span="12">
                                <el-input placeholder="请输入" v-model.number="form.baseCount">
                                </el-input></el-col>
                            <el-col :span="2">&nbsp;</el-col>
                            <el-col :span="10">
                                <DictSelection dictName="计量单位" v-model="form.baseCountUnit" />
                            </el-col>
                        </el-row>
                    </el-form-item>
                </el-col>

            </el-row>

            <el-row>
                <div class="ele-body">
                    <ele-pro-table ref="table" :datasource="form.subDetailList" 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()">添加物料</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-row class="rx-cc">
                <el-button type="primary" size="small" class="ele-btn-icon" @click="save">
                    保存
                </el-button>
            </el-row>
        </el-form>

        <!-- 选择物料弹窗 -->
        <materialDialog ref="materiaRef" @chooseModal="chooseModal"></materialDialog>
    </ele-modal>
</template>
  
<script>
import materialDialog from '@/components/material';
import factorySelect from '@/components/CommomSelect/factory-select.vue';
import { pageList } from '@/api/technology/version/version.js';
import { getCode } from '@/api/codeManagement/index.js';
import { bomSave, bomUpdate } from '@/api/material/BOM';
export default {
    components: {
        materialDialog,
        factorySelect
    },
    props: {
        // 弹窗是否打开
        visible: Boolean,
        // 修改回显的数据
        categoryId: [String, Number]
    },
    data() {

        var baseCountVa = (rule, value, callback) => {
            if (value == '') {
                callback(new Error('请输入基本数量'));
            } else if (this.form.baseCountUnit == '') {
                callback(new Error('请选择基本数量单位'));
            } else {
                callback();
            }
        };

        const defaultForm = {
            id: null,

            code: '',
            name: '',
            version: '1.0',
            factoryId: '',
            type: 0,
            status: '',
            produceVersionId: '',
            baseCount: '',
            baseCountUnit: '',
            subDetailList: []
        };
        return {
            defaultForm,
            // 表单数据
            form: {
                ...defaultForm
            },

            versionList: [],

            // 表单验证规则
            rules: {
                code: [
                    { required: true, message: '请输入BOM编码', trigger: 'blur' }
                ],

                name: [
                    { required: true, message: '请输入BOM名称', trigger: 'blur' }
                ],

                version: [
                    { required: true, message: '请输入BOM版本号', trigger: 'blur' }
                ],

                status: [
                    { required: true, message: '请选择状态', trigger: 'change' }
                ],

                produceVersionId: [
                    { required: true, message: '请选择生产版本', trigger: 'change' }
                ],

                factoryId: [
                    { required: true, message: '请输入所属工厂', trigger: 'change' }
                ],


                baseCount: [
                    { validator: baseCountVa, trigger: 'blur' }
                ]

            },

            columns: [
                {
                    prop: 'code',
                    label: '编码'
                },
                {
                    prop: 'name',
                    label: '名称',
                    showOverflowTooltip: true
                },
                {
                    prop: 'brandNum',
                    label: '牌号'
                },
                {
                    prop: 'modelType',
                    label: '型号'
                },
                {
                    prop: 'weightUnit',
                    label: '重量单位'
                },
                {
                    prop: 'netWeight',
                    label: '净重'
                },

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

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

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

            // 提交状态
            loading: false,
            // 是否是修改
            isUpdate: false,


        };
    },
    computed: {
        // 是否开启响应式布局
        styleResponsive() {
            return this.$store.state.theme.styleResponsive;
        }
    },
    methods: {
        openParam() {
            this.$refs.materiaRef.open(this.form.subDetailList, '选择物料', '1');
        },

        chooseModal(data) {
            this.$set(this.form, 'subDetailList', data);
        },

        /* 删除 */
        remove(row) {
            this.form.subDetailList = this.form.subDetailList.filter(
                (d) => d.id !== row.id
            );
        },

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

        async _getCode() {
            const code = await getCode('bom_code');
            this.form.code = code;
        },

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

            this.versionList = res.list;
        },

        /* 保存编辑 */
        save() {
            this.$refs.form.validate((valid) => {
                if (!valid) {
                    return false;
                }

                console.log(this.form)
                if (this.form.subDetailList.length == 0) {
                    this.$message.info('请至少添加一条物料');
                    return;
                }

                if (!this.isUpdate) {
                    delete this.form.id;
                }

                const data = {
                    ...this.form,
                    categoryId: this.categoryId,
                };

                this.loading = true;

                const saveOrUpdate = this.isUpdate ? bomUpdate : bomSave;
                saveOrUpdate(data)
                    .then((msg) => {
                        this.loading = false;
                        this.$message.success(msg);
                        this.visible = false
                        this.$emit('done');
                    })
                    .catch((e) => {
                        this.loading = false;
                    });

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

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