tll

src/views/queueManagement/channelManagement-副本/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>