addRule.vue 11 KB
<template>
    <div>
        <el-dialog :title="$t('button.alarmRules')" 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">
                <div class="inlineBlock" v-for="item in counterTypeData" :key="item.id">
                  <template v-if="channelConfig.includes(item.key)">
                      <p class="itemTitle" style="font-weight: 900">{{item.text}}</p>
                      {{$t('message.queuelengthmorethan')}}
                      <el-input-number v-model="item.queueLengthThreshold" :min="0" :controls = 'false' :precision = '0'></el-input-number> {{$t('format.perNum')}},
                      {{$t('message.waitingtimemorethan')}}<el-input-number v-model="item.waitTimeThreshold" :min="0" :controls = 'false' :precision = '0'></el-input-number> {{$t('format.minute')}},
                      {{$t('message.trolleycounts')}}<el-input-number v-model="item.trolleyThreshold" :min="0" :controls = 'false' :precision = '0'></el-input-number>{{$t('iPage.number')}}.
                      <!-- <el-form-item :label="$t('table.alarmPensonNum')" prop="queueLengthThreshold">
                        <el-input-number v-model="item.queueLengthThreshold" :min="0" :controls = 'false' :precision = '0'></el-input-number> {{$t('format.perNum')}}
                      </el-form-item>
                      <el-form-item :label="$t('table.waitingTime')" prop="waitTimeThreshold">
                          <el-input-number v-model="item.waitTimeThreshold" :min="0" :controls = 'false' :precision = '0'></el-input-number> {{$t('format.minute')}}
                      </el-form-item>
                      <el-form-item :label="$t('table.trolleyNum')" prop="trolleyThreshold">
                          <el-input-number v-model="item.trolleyThreshold" :min="0" :controls = 'false' :precision = '0'></el-input-number>
                      </el-form-item> -->
                  </template>
                </div>
                <el-form-item :label="$t('table.alarmCycle')" prop="alarmInterval">
                  <el-input-number v-model="addForm.alarmInterval" :min="0" :controls = 'false' :precision = '0'></el-input-number> {{$t('format.minute')}}
                </el-form-item>
                <p class="info">{{$t('message.alarmInfo')}}</p>
                <p class="itemTitle">{{$t('table.alarmReceiver')}}</p>
                <div v-for="(item,index) in alarmReceiverList" :key='index' style="margin-top: 10px;">
                  <el-input class="receiverEmail" v-model="item.email"></el-input>
                  <el-button type="primary" class="dialog-btn dialog-confirm-btn" v-if="index==0" @click='addEmail'>{{$t('button.groupAdd')}}</el-button>
                  <el-button type="primary" class="dialog-btn dialog-confirm-btn" @click='delEmail(index)' v-if="index>0">{{$t('button.delete')}}</el-button>
                </div>
            </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() {
        return {
            addDialogVisible: false,
            addForm: {
            },
            counterTypeData: [],
            alarmReceiverList:[{
              email:''
            }],
            isAdd:true,
            rules: {
                // queueLengthThreshold: [{
                //     required: true,
                //     message: this.$t('pholder.input'),
                //     trigger: 'blur'
                // }],
                // waitTimeThreshold: [{
                //     required: true,
                //     message: this.$t('pholder.input'),
                //     trigger: 'blur'
                // }],
                alarmInterval:[{
                    required: true,
                    message: this.$t('pholder.input'),
                    trigger: 'blur'
                }],
            },
            channelConfig:[]
        }
    },
    mounted() {
        this.channelConfig = window._vionConfig.channelConfig
      this.getCounterType()
    },
    methods: {
        dialogInit(data,mallId,areaId) {
            this.addForm = {
                mallId: '',
                areaId:"",
                sendEmail:'',
                channelRules:[]
            };
            if(data && data.length>0){
              this.isAdd = false;
                this.addForm = Object.assign({},data[0]);
                let arr = data[0].sendEmail.split(";")
                this.alarmReceiverList = []
                for (var i = 0; i < arr.length; i++) {
                  this.alarmReceiverList.push({
                    email:arr[i]
                  })
                }
                console.log(this.counterTypeData)
                this.addForm.alarmInterval = data[0].channelRules[0].alarmInterval
                data[0].channelRules.forEach(itemR=>{
                    this.counterTypeData.forEach(item=>{
                        if(itemR.counterType == item.key){
                            item.queueLengthThreshold = itemR.queueLengthThreshold;
                            item.trolleyThreshold = itemR.trolleyThreshold;
                            item.waitTimeThreshold = itemR.waitTimeThreshold;
                            item.counterTypeId = itemR.id;
                        }
                    })
                })
                
                this.$forceUpdate()
            }else{
              this.addForm.mallId = mallId;
              this.addForm.areaId = areaId;
            }
            this.addDialogVisible = true;
        },
        // 通道类型
        getCounterType() {
            this.$api.base.dataDic({
                type: 'counterType'
            }).then(res => {
                this.counterTypeData = res.data.data.map(item => {
                    if (localStorage.getItem('lang') == 'en_US') {
                        item.value = item.valueEn;
                    }
                    item.text = item.value
                    return item;
                });
            })
        },
        addEmail(){
          this.alarmReceiverList.push({
            email:''
          })
        },
        delEmail(index){
          this.alarmReceiverList.splice(index,1)
        },
        addSubmit(formName) {
          let arr = []
          for (var i = 0; i < this.alarmReceiverList.length; i++) {
            arr.push(this.alarmReceiverList[i].email)
          }
          this.addForm.sendEmail = arr.join(';')
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    let channelRules = []
                    for (let item of this.counterTypeData) {
                        if( this.channelConfig.includes(item.key)){
                            if(item.queueLengthThreshold !== ''&&item.queueLengthThreshold !== ''&&item.queueLengthThreshold !== ''&&item.trolleyThreshold !== ''){
                                channelRules.push({
                                    queueLengthThreshold:item.queueLengthThreshold,
                                    waitTimeThreshold:item.waitTimeThreshold,
                                    alarmInterval:this.addForm.alarmInterval,
                                    trolleyThreshold:item.trolleyThreshold,
                                    counterType:item.key,
                                    id: item.counterTypeId||null
                                })
                            }else{
                                this.$message({
                                  message: this.$t('pholder.input') + item.text + this.$t('button.alarmRules'),
                                  type: 'warning'
                                });
                                return false
                            }
                        }
                    }
                    this.addForm.channelRules = channelRules
                    if(this.isAdd){
                      this.$api.queueManagementApi.addAlarmRules(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.addDialogVisible = false
                          }else{
                            this.$message({
                              message: result.msg,
                              type: 'error'
                            });
                          }
                        })
                    }else{
                        this.$api.queueManagementApi.updateAlarmRules(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.addDialogVisible = false
                            }else{
                              this.$message({
                                message: result.msg,
                                type: 'error'
                              });
                            }
                          })
                    }

                } else {
                    return false;
                }
            });
        },
        addDialogClose() {
            this.addDialogVisible = false;
            this.$refs.addForm.resetFields();
        },
    }
}
</script>

<style scoped lang="less">
 .dialog_lj{
   /deep/.el-dialog{
     width: 1300px !important;

   }
   /deep/.el-form{
     height: 500px !important;
   }
   .itemTitle{
     width: 100%;
     padding-bottom: 5px;
     border-bottom: 1px solid #ccc;
   }
   .info{
     margin: 15px 0;
   }
   .receiverEmail{
     width: 500px !important;
   }
   .inlineBlock{
       /deep/.el-form-item{
           display: inline-block;
       }
       /deep/.el-form-item__content{
           width: 180px !important;
           min-width: 180px !important;
       }
       /deep/.el-input-number{
           width: 100px;
       }
   }
    /deep/.el-form-item__label{
      line-height: 30px;
      height: 30px;
      text-align:left
    }
    /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>