1

lzhe

2024-05-11 a896f3781d29ef58564929cfceeb078a87d01d6a

 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>
               <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-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,10 +45,16 @@
</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: '新增',
@@ -40,6 +65,7 @@
            isSaveing: false,
            //表单数据
            addBusinessForm: {
               providerInfos: [],
               notifyTemplateName: "",
               agentId: "",
               title: "",
@@ -54,6 +80,16 @@
      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'){
            this.mode = mode;
@@ -94,11 +130,59 @@
         },
         //表单注入数据
         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;
                  }
               })
            })
            console.log(data.configuration,data)
            // for(var key in res.data.configEntity.configuration) {
            //    res.data.configEntity.configuration['name'] = key;
            //    res.data.configEntity.configuration['value'] = res.data.configEntity.configuration[key];
            //    res.data.configEntity.configuration['type'] = res.data.id;
            // }
            //可以和上面一样单个注入，也可以像下面一样直接合并进去
            Object.assign(this.addBusinessForm, data);
            console.log(this.addBusinessForm)
            Object.assign(this.addBusinessForm,data);

            // this.$nextTick(()=> {
            //    this.serviceproviders = this.addBusinessForm.providerInfos[0].id;
            // })
            // console.log(this.addBusinessForm)
         }
      }
      },
      components: {
         ...ElementPlusIconsVue
       },
   }
</script>

@@ -109,6 +193,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>