addDesk.vue

<template>
    <div>
        <el-dialog :title="isEdit=='add'?$t('button.groupAdd'):$t('button.groupEdit')" class="manage-dialog dialog_lj" :visible.sync="addDialogVisible"
            :close-on-click-modal="false" v-if="addDialogVisible" @close="addDialogClose()">
            <el-form :model="addForm" label-width="100px" status-icon :rules="rules" ref="addForm">
                <!-- 区域名称 -->
                <el-form-item :label="$t('table.laneName')" prop="name">
                    <el-input v-model="addForm.name" :placeholder="$t('pholder.input')"></el-input>
                    <i class="error-tip">*</i>
                </el-form-item>
                <el-form-item :label="$t('table.channelCode')" prop="code">
                    <el-input v-model="addForm.code" :placeholder="$t('pholder.input')"></el-input>
                    <i class="error-tip">*</i>
                </el-form-item>
                <el-form-item :label="$t('table.counterType')" prop="counterType">
                    <el-select v-model="addForm.counterType" :placeholder="$t('pholder.select')">
                        <el-option v-for="item in counterTypeData" :key="item.key" :label="item.value" :value="item.key" />
                    </el-select>
                    <i class="error-tip">*</i>
                </el-form-item>
                <el-form-item :label="$t('table.areaName')" prop="areaId">
                    <el-select v-model="addForm.areaId" :placeholder="$t('pholder.areaSelect')">
                        <el-option v-for="item in areaListData" :key="item.id" :label="item.name" :value="item.id" />
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="addDialogVisible = false" class="dialog-btn">{{ $t('dialog.cancel') }}</el-button>
                <el-button type="primary" @click="addSubmit('addForm')" class="dialog-btn dialog-confirm-btn">
                    {{ $t('dialog.confirm') }}</el-button>
            </div>
        </el-dialog>
    </div>
</template>


<script>
export default {
    data() {
        var checkName = (rule, value, callback) => {
            //var flag = new RegExp("[`’\"·_ ~!%\\-@#$^&*=|{}':;',\\[\\].<>《》/?~！@#￥……&*——|{}【】‘；：”“'。，、？ ]");
            var flag = new RegExp("'");
            if (flag.test(value) || /\\/.test(value)) {
                callback(new Error("名称包含特殊字符,请重新输入！"));
            } else {
                callback();
            }
        }
        return {
            isEn: localStorage.getItem('lang') == 'en_US',
            counterTypeData:[],
            addDialogVisible: false,
            areaListData:[],
            addForm: {
                name: '',
                areaId:"",
                code:'',
                counterType:''
            },
            isEdit:false,
            rules: {
                name: [{
                    required: true,
                    message: this.$t('pholder.input'),
                    trigger: 'blur'
                },{
                    validator: checkName,
                    trigger: "blur"
                }],
                code:[{
                    required: true,
                    message: this.$t('pholder.input'),
                    trigger: 'blur'
                }],
                counterType:[{
                    required: true,
                    message: this.$t('pholder.select'),
                    trigger: 'blur'
                }]
            }
        }
    },
    methods: {
        dialogInit(type,data) {
            this.getCounterType()
            this.addForm = {
                name: '',
                areaId:"",
                code:'',
                counterType:''
            };
            this.isEdit = type
            if(data){
                this.addForm = Object.assign({},data);
                this.$forceUpdate()
            }
            this.getAreaList()
            this.addDialogVisible = true;
        },
        getCounterType(){
            this.$api.base.dataDic({
              type: 'counterType'
            }).then(res => {
              this.counterTypeData = res.data.data.map(item=>{
                   if(this.isEn){
                      item.value = item.valueEn;
                   }
                   return item;
                });
            })
        },
        getAreaList(){
            this.areaListData = [];
            this.$api.queueManagementApi.getAreaList({
                mallId: Number(this.getSessionLocal("mallId")),
                pageNum: 1,
                pageSize: 999999
            }).then(res => {
                let result = res.data;
                if(result.code==200){
                    if(result.data.list&& result.data.list.length>0){
                        if(this.isEdit=='add'){
                            this.addForm.areaId = result.data.list[0].id
                        }
                        this.areaListData = result.data.list;
                    }
                }
            })
        },
        addSubmit(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    if(this.isEdit=='add'){
                      this.$api.queueManagementApi.addChannel(this.addForm)
                        .then((res) => {
                          let result = res.data;
                          if(result.code==200){
                            this.$message({
                              message: result.msg,
                              type: 'success'
                            });
                            this.$parent.getTableData();
                            this.$refs.addForm.resetFields();
                            this.addForm = {}
                            this.addDialogVisible = false
                          }else{
                            this.$message({
                              message: result.msg,
                              type: 'error'
                            });
                          }
                        })
                    }else{
                        this.$api.queueManagementApi.updateChannel(this.addForm).then((res) => {
                            let result = res.data;
                            if(result.code==200){
                              this.$message({
                                message: result.msg,
                                type: 'success'
                              });
                              this.$parent.getTableData();
                              this.$refs.addForm.resetFields();
                              this.addForm = {}
                              this.addDialogVisible = false
                            }else{
                              this.$message({
                                message: result.msg,
                                type: 'error'
                              });
                            }
                          })
                    }
                     // this.$emit('submit',this.addForm)
                } else {
                    return false;
                }
            });
        },
        addDialogClose() {
            this.addDialogVisible = false;
            this.$refs.addForm.resetFields();
        },
    }
}
</script>

<style scoped lang="less">
 .dialog_lj{
     /deep/.el-dialog__body{
         height: 270px;
     }
    /deep/.el-form-item__label{
      line-height: 30px;
      height: 30px;
      text-align:left
    }
    /deep/.el-select{
      width: 100%;
    }
    /deep/.el-form-item__label+.el-form-item__content{
        float: none !important;
        line-height:40px !important;
    }
    /deep/.el-form-item__error{
        padding-top: 0px !important;
    }
  }
</style>