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

<template>
    <ele-modal title="自定义编码" :visible.sync="visible" :before-close="handleClose" :close-on-click-modal="false"
        :close-on-press-escape="false" append-to-body width="40%" :maxable="true">
        <el-form label-width="120px" ref="formRef" :model="formData" :rules="rules" class="rx-sc">



            <el-form-item label="">
                <el-input v-model="formData.leave" readonly style="width: 120px;margin-left: 8px;"></el-input>
            </el-form-item>


            <span>-</span>
            <el-form-item label="" prop="leave2">
                <DictSelection :ChinEng="true" dictName="二级编码规则" clearable v-model="formData.leave2">
                </DictSelection>
            </el-form-item>
            <span>-</span>

            <el-form-item label="" prop="leave3">
                <DictSelection :ChinEng="true" dictName="三级编码规则" clearable v-model="formData.leave3">
                </DictSelection>
            </el-form-item>
            <span>-</span>

            <el-form-item label="" prop="code">
                <el-input v-model="formData.code" maxlength="3" placeholder="流水号"
                    style="width: 120px;margin-left: 8px;"></el-input>
            </el-form-item>







        </el-form>
        <div class="des">设备\模具\周转车\舟皿三级编码规则，例如：CX-JY-SB（本级）-001 </div>

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

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

export default {
    data() {
        return {
            visible: true,
            loading: false,

            formData: {
                leave: 'SL',
                leave2: null,
                leave3: null,
                code: null
            },

            rules: {
                leave2: { required: true, message: '请选择', trigger: 'change' },
                leave3: { required: true, message: '请选择', trigger: 'change' },
                code: [
                    { required: true, message: '请输入流水号', trigger: 'blur' },
                    {
                        pattern: /^\d{3}$/,
                        message: '请输入三位数的流水号'
                    }
                ]
            }
        }
    },

    watch: {

    },
    methods: {

        handleClose() {
            this.$emit('close')

        },

        save() {
            this.$refs.formRef.validate((valid) => {
                if (!valid) {
                    return false;
                }
                let code = this.formData.leave + '-' + this.formData.leave2 + '-' + this.formData.leave3 + '-' + this.formData.code
                this.$emit('chooseCode', code)
                this.handleClose()


            })
        },


    }
}
</script>
  
<style lang="scss" scoped>
.row_flex {
    display: flex;
    flex-direction: row;
    align-items: center;
}

::v-deep .el-form-item__content {
    margin: 0 8px !important;
}

::v-deep .el-form-item {
    margin-bottom: 0px;
}

::v-deep .el-form-item:last-child {
    margin-bottom: 0px !important;

}

.des {
    margin-top: 20px;
}
</style>