1

lzhe

2024-06-05 dcf9c9e0410fe1186239e3f8d6f7bdc789c08010

 src/views/notification/editconfiguration.vue

@@ -1,19 +1,38 @@
<template>
   <el-dialog :title="titleMap[mode]" v-model="visible" :width="800" destroy-on-close @closed="$emit('closed')">
      <div class="modelTitle">
         <span>通知类型 {{addBusinessForm.businessName}}</span>
         <span>服务商 {{addBusinessForm.notifyName}}</span>
         <span>通知类型 {{addBusinessForm.name}}</span>
         <span>
            服务商
            <el-select style="width: 80%"  v-model="serviceproviders" :disabled="mode != 'add'">
               <el-option v-for="item in addBusinessForm.providerInfos" :key="item.id" :label="item.name" :value="item.id"/>
            </el-select>
         </span>
      </div>
      <el-form :model="addBusinessForm" :rules="addBusinessRules" :disabled="mode=='show'" ref="dialogForm" label-width="140px" label-position="center">
         <el-row>
            <el-col :span="24">
               <el-form-item label="请输入配置名称" prop="notifyTemplateName">
                  <el-input v-model="addBusinessForm.notifyTemplateName" placeholder="模版名称" clearable></el-input>
               <el-form-item label="请输入配置名称" prop="pname">
                  <el-input v-model="addBusinessForm.pname" placeholder="模版名称" clearable></el-input>
               </el-form-item>
            </el-col>
            <el-col :span="24" v-for="item in addBusinessForm.properties">
               <el-form-item :label="item.name">
                  <el-input v-model="addBusinessForm[item.property]" :placeholder="item.name" clearable></el-input>
            <el-col :span="24" v-for="(item,index) in addBusinessForm.configuration">
               <el-form-item :label="item.pname" v-if="item.name != 'properties'">
                  <el-input v-model="item.value" :placeholder="item.name" clearable></el-input>
               </el-form-item>
               <el-form-item :label="item.pname" v-if="item.name == 'properties'">
                  <div class="array-content">
                     <el-row v-for="(item1,index1) in item.value">
                        <el-col v-for="(item2,index2) in item1" :span="7">
                           <el-input v-model="item2.value" placeholder ="请输入" style="width: 76%;margin-right: 10px;"></el-input>
                           <el-icon style="vertical-align: -3px;"><ArrowRightBold /></el-icon>
                        </el-col>
                        <el-col :span="3" class="otherBtn">
                           <el-button type="primary" size="small" plain @click="addpro(index,index1)" v-show="index1 == (item.value.length-1)">添加</el-button>
                           <el-button type="danger" size="small" style="margin-left:0;" plain @click="delData(index,index1)" v-show="index1 != (item.value.length-1)">删除</el-button>
                        </el-col>
                     </el-row>
                  </div>
               </el-form-item>
            </el-col>
         </el-row>
@@ -26,13 +45,19 @@
</template>

<script>
   import * as ElementPlusIconsVue from '@element-plus/icons-vue'
   let icons = []
   for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
       icons.push(key)
   }
   export default {
      emits: ['success', 'closed'],
      data() {
         return {
            serviceproviders: "",
            mode: "add",
            titleMap: {
               add: '新增',
               add: '新增配置',
               edit: '编辑配置',
               show: '查看'
            },
@@ -40,6 +65,7 @@
            isSaveing: false,
            //表单数据
            addBusinessForm: {
               providerInfos: [],
               notifyTemplateName: "",
               agentId: "",
               title: "",
@@ -47,37 +73,75 @@
            },
            //验证规则
            addBusinessRules: {
               notifyTemplateName:[{required: true, message: '请输入模版名称'}]
               pname:[{required: true, message: '请输入模版名称'}]
            },
         }
      },
      mounted() {
      },
      methods: {
         addpro(index,index1) {
            this.addBusinessForm.configuration[index].value.push([
               {name: 'name', value: ''},
               {name: 'value', value: ''},
               {name: 'description', value: ''},
            ])
         },
         delData(index,index1) {
            this.addBusinessForm.configuration[index].value.splice(index1,1);
         },
         //显示
         open(mode='add'){
         open(mode='add',obj){
            if(mode == 'add') {
               this.addBusinessForm = obj;
               this.$nextTick(()=> {
                  this.serviceproviders = this.addBusinessForm.providerInfos[0].id;
               })
               var setArr = [];
               obj.properties.forEach(item=> {
                  setArr.push({pname:item.name,value: "",name: item.name})
               })
               this.addBusinessForm.configuration = setArr;
            }
            this.mode = mode;
            this.visible = true;
            return this
         },
         //表单提交方法
         businessSubmit(){
            var obj = Object.assign({},this.addBusinessForm);
            obj.notifyType = obj.notifyType;
            obj.id = obj.notifyTemplateId;
            obj.business = obj.businessKey;
            obj.name = obj.notifyTemplateName;
            obj.provider = obj.providerType;
            obj.type = obj.notifyType;
            var template = JSON.parse(obj.template);
            for(var key in template) {
               template[key] = obj[key];
            var configuration = {};
            this.addBusinessForm.configuration.forEach(item=> {
               configuration[item.name] = item.value;
            })
            var obj = {
               configuration: configuration,
            }
            obj.template = JSON.stringify(template);
            if(this.mode == 'edit') {
               obj.id = this.addBusinessForm.configEntity.id;
               obj.name = this.addBusinessForm.configEntity.name;
               obj.provider = this.addBusinessForm.configEntity.provider;
               obj.type = this.addBusinessForm.configEntity.type;
               if(this.addBusinessForm.configEntity.type == "email") {  //邮件
                  var newArr = [];
                  configuration.properties.forEach(item=> {
                      var formattedObject = {};
                      item.forEach(item => {  
                        formattedObject[item.name] = item.value;  
                      });
                      newArr.push(formattedObject);
                  })
                  configuration.properties = newArr;
               }
            }
            if(this.mode == 'add') {  //新增
               obj.name = this.addBusinessForm.pname;
               obj.provider = this.serviceproviders;
               obj.type = this.addBusinessForm.id;
            }
            this.$refs.dialogForm.validate(async (valid) => {
               if (valid) {
                  this.isSaveing = true;
                  this.$HTTP.put("/api/blade-notify/business-notify/modify",obj).then(res=> {
                  this.$HTTP.put("/api/blade-notify/notifier/config",obj).then(res=> {
                     this.isSaveing = false;
                     if(res.code == 200) {
                        this.$emit('success', this.addBusinessForm, this.mode);
@@ -94,11 +158,51 @@
         },
         //表单注入数据
         setData(data){
            if(data.configEntity == null) return;
            var configuration = data.configEntity.configuration;
            data.configuration = [];
            for(var key in configuration) {
               if(Array.isArray(configuration[key])) {
                  var value = configuration[key];
                  var temArr = [];
                  value.forEach(item=> {
                     var setArr = [];
                     for(var key1 in item) {
                        setArr.push({
                           name: key1,
                           value: item[key1]
                        })
                     }
                     temArr.push(setArr);
                  })
                  data.configuration.push({
                     name: key,
                     value: temArr
                  })
               }else {
                  data.configuration.push({
                     name: key,
                     value: configuration[key]
                  })
               }
            }
            data.properties.forEach(item=> {
               data.configuration.forEach(item1=> {
                  if(item1.name == item.property) {
                     item1.pname = item.name;
                  }
               })
            })
            //可以和上面一样单个注入，也可以像下面一样直接合并进去
            Object.assign(this.addBusinessForm, data);
            console.log(this.addBusinessForm)
            Object.assign(this.addBusinessForm,data);
            this.$nextTick(()=> {
               this.serviceproviders = this.addBusinessForm.providerInfos[0].id;
            })
         }
      }
      },
      components: {
         ...ElementPlusIconsVue
       },
   }
</script>

@@ -109,6 +213,16 @@
}
.modelTitle span {
   display: inline-block;
   width:30%;
   width:50%;
}
.array-content {
   border: 1px solid #d8d8d8;
    border-radius: 2px;
    min-height: 200px;
   width: 100%;
   padding: 12px;
}
.otherBtn {
   margin-bottom: 12px;
}
</style>