123

src/views/action/actionListTrigger.vue

@@ -146,10 +146,11 @@
                 </a-form-item>
               </a-col>
               <a-col :span="2" offset="1">
+                <!-- {{item}} -->
                 <a-button
                   v-if="index + 1 == rowLoop.length"
                   icon="minus"
-                  @click="deleteRow()"
+                  @click="deleteRow(item.randomNum)"
                 ></a-button>
                 <a-button
                   v-if="index + 1 == rowLoop.length"
@@ -275,9 +276,10 @@ export default {
       },
       formStoreList: [],
       rowLoop: [{
-        first: '',
-        second: '',
-        third: ''
+        key: '',
+        type: '',
+        name: '',
+        randomNum: Math.random()
       }],
       businessOptionsList: [],
       editId: null, 
@@ -295,8 +297,9 @@ export default {
     },
     onEdit(id) {
       this.rowLoop = [{
-        name: '',
         key: '',
+        type: '',
+        name: '',
         randomNum: Math.random()
       }]
       this.isShow = !this.isShow
@@ -396,7 +399,9 @@ export default {
     onCreate() {
       this.rowLoop = [{
         name: '',
-        key: ''
+        type: '',
+        key: '',
+        randomNum: Math.random()
       }]
       this.current = 0
       this.form.resetFields()
@@ -474,10 +479,13 @@ export default {
       this.rowLoop.push({
         key: '',
         type: '',
-        name: ''
+        name: '',
+        randomNum: Math.random()
       })
     },
-    deleteRow() {}
+    deleteRow(randomNum) {
+      this.rowLoop = this.rowLoop.filter(i => i.randomNum !== randomNum)
+    }
   }
 }
 </script>

src/views/businessSystem/businessSystemList.vue

@@ -41,7 +41,7 @@
                 </a-form-item>
 
                 <a-form-item label="系统地址" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
-                  <a-input v-decorator="['url', {validateTrigger:'blur', rules: [{required: true, message: '请填写此项！'}]}]" />
+                  <a-input v-decorator="['url', {validateTrigger:'blur', rules: [{required: true, message: '请填写此项！'}, {validator: formatValidate}]}]" />
                 </a-form-item>
               </div>
               <div v-show="current == 1">
@@ -63,7 +63,7 @@
                 </a-form-item>
 
                 <a-row>
-                  {{rowLoop}}
+                  <!-- {{rowLoop}} -->
                   <a-col :span='5' style="text-align: right; color: black">授权参数：</a-col>
                   <a-col :span='19'>
                     <a-row v-for="(item, index) in rowLoop" :key="index">
@@ -210,6 +210,14 @@ export default {
     this.getList()
   },
   methods: {
+    formatValidate(type, value, callback) {
+      console.log(type, value)
+
+      const filter = /^[A-Za-z]:[\w]+$/i
+      if(!filter.test(value)){
+        callback('请输入正确的路径！')
+      }
+    },
     cancelModal() {
       console.log(123)
       this.form.resetFields()
@@ -282,7 +290,6 @@ export default {
     deleteRow(randomNum) {
       // this.rowLoop.splice(index, 1)
       this.rowLoop = this.rowLoop.filter(i => i.randomNum !== randomNum)
-      console.log(this.rowLoop)
     },
     getList() {
       this.$ajax.post({

src/views/iftttRules/iftttRulesList.vue

@@ -36,8 +36,8 @@
             <a-tag v-for="(item, index) in record.rules" :key="index">{{`{` + record.rules[index].key + `: `+ record.rules[index].value + `}`}}</a-tag>
           </span>
         </a-table>
-        <a-modal title="新建规则"  v-model="isShow" width='900px' style="padding: 20px" centered>
-            <a-form :form='form'>
+        <a-modal title="新建规则"  v-model="isShow" width='900px' style="padding: 20px" centered destroyOnClose @cancel='cancelModal()'>
+            <a-form :form='form' style="height: 300px; overflow-y: scroll">
               <a-form-item label="触发服务" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
                   <a-select placeholder="请选择触发服务" v-decorator="['trigger', {validateTrigger:'blur', rules: [{required: true, message: '请选择此项！'}]}]">
                     <a-select-option v-for="(item) in triggerOptions" :key="item.id">{{item.name}}</a-select-option>
@@ -50,7 +50,7 @@
                   </a-select>
                 </a-form-item>
 
-                <a-form-item label="规则字段定义key&value" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
+                <!-- <a-form-item label="规则字段定义" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
                   <a-textarea
                     v-decorator="[
                       'rules',
@@ -58,15 +58,62 @@
                         validateTrigger: 'blur',
                         rules: [
                           { required: true, message: '请填写此项！' },
-                          {validator: confirmJson}
+                          { validator: confirmJson}
                         ]
-                      }
+                      } 
                     ]"
                   />
-                </a-form-item>
+                </a-form-item> -->
+                <a-row>
+                  <a-col :span='5' style="text-align: right; color: black">规则字段定义：</a-col>
+                  <a-col :span='19'>
+                    <a-row v-for="(item, index) in rowLoop" :key="index">
+                      <a-col :span="7">
+                        <a-form-item>
+                          <a-input
+                            v-decorator="[
+                              'key' + index,
+                              {
+                                validateTrigger: 'blur',
+                                rules: [{ required: true, message: '请填写此项！' }]
+                              }
+                            ]"
+                          />
+                        </a-form-item>
+                      </a-col>
+
+                      <a-col :span="7" offset="1">
+                        <a-form-item>
+                          <a-input
+                            v-decorator="[
+                              'value' + index,
+                              {
+                                validateTrigger: 'blur',
+                                rules: [{ required: true, message: '请填写此项！' }]
+                              }
+                            ]"
+                          />
+                        </a-form-item>
+                      </a-col>
+
+                      <a-col :span="4" offset="1">
+                        <a-button
+                          v-if="index + 1 == rowLoop.length"
+                          icon="minus"
+                          @click="deleteRow(item.randomNum)"
+                        ></a-button>
+                        <a-button
+                          v-if="index + 1 == rowLoop.length"
+                          icon="plus"
+                          @click="addRow()"
+                        ></a-button>
+                      </a-col>
+                    </a-row>
+                  </a-col>
+                </a-row>
             </a-form>
           <template slot="footer">
-            <a-button key="back" @click="isShow = !isShow">
+            <a-button key="back" @click="cancelModal()">
               取消
             </a-button>
             <a-button type="primary" @click="handleRegisterOk()">
@@ -84,8 +131,9 @@ export default {
   data() {
     return {
       rowLoop: [{
-        name: '',
-        key: ''
+        key: '',
+        value: '',
+        randomNum: Math.random()
       }],
       form: this.$form.createForm(this),
       current: 0,
@@ -136,7 +184,6 @@ export default {
         {
           title: '规则字段定义',
           dataIndex: 'rules',
-          align: 'center',
           key: 'rules',
           scopedSlots: {
             customRender: 'rules',
@@ -163,7 +210,8 @@ export default {
       },
       formStoreList: [],
       triggerOptions: [],
-      actionOptions: []
+      actionOptions: [],
+      editId: null
     }
   },
   mounted() {
@@ -191,8 +239,19 @@ export default {
           }
 
           if(Object.keys(record)[i] == 'rules') {
-            this.form.getFieldDecorator('rules', {'initialValue': JSON.stringify(Object.values(record)[i]).split('[').split(']')})
+            for (let j = 0; j < Object.values(record)[i].length; j++) {
+              if(j !== 0) {
+                this.addRow()
+              }
+              console.log(Object.values(record)[i][j].key)
+              this.form.getFieldDecorator('key' + j, {'initialValue': Object.values(record)[i][j].key})
+              this.form.getFieldDecorator('value' + j, {'initialValue': Object.values(record)[i][j].value})
+            }
           }
+
+          // if(Object.keys(record)[i] == 'rules') {
+          //   this.form.getFieldDecorator('rules', {'initialValue': JSON.stringify(Object.values(record)[i])})
+          // }
         }
       }
     },
@@ -228,6 +287,16 @@ export default {
         }
       })
     },
+    cancelModal() {
+      console.log(123)
+      this.rowLoop = [{
+        key: '',
+        value: '',
+        randomNum: Math.random()
+      }],
+      this.form.resetFields()
+      this.isShow = !this.isShow
+    },
     initPagination() {
       this.pagination.pageNo = 1
       this.pagination.current = 1
@@ -238,6 +307,8 @@ export default {
       } else if(typeof value == 'string') {
         try {
           let obj=JSON.parse(value)
+
+          console.log(obj)
           if(typeof obj == 'object' && obj ){
             callback()
           } else {
@@ -272,11 +343,14 @@ export default {
     },
     addRow() {
       this.rowLoop.push({
-        name: '',
-        key: ''
+        key: '',
+        value: '',
+        randomNum: Math.random()
       })
     },
-    deleteRow() {},
+    deleteRow(randomNum) {
+      this.rowLoop = this.rowLoop.filter(i => i.randomNum !== randomNum)
+    },
     getList() {
       this.$ajax.post({
         url: this.$api.GET_RULES_LIST,
@@ -320,21 +394,50 @@ export default {
 
           const action = this.actionOptions.find(item => item.id == formContent.action)
 
-          this.$ajax.post({
-            url: this.$api.POST_ADD_RULE_RECORD,
-            params: {
-              rules: [JSON.parse(this.form.getFieldValue('rules'))],
-              trigger,
-              action
-            }
-          }).then(res => {
-            if(res.code == '200') {
-              this.$message.success('新增成功!')
-              this.isShow = !this.isShow
-              this.form.resetFields()
-              this.getList()
-            }
-          })
+          let paramsJson = []
+
+          for (let i = 0; i < this.rowLoop.length; i++) {
+            paramsJson.push({
+              key: formContent['key' + i],
+              value: formContent['value' + i]
+            })
+          }
+
+          if(!!this.editId) {
+            this.$ajax.put({
+              url: this.$api.PUT_RULE_RECORD.replace('{id}', this.editId),
+              params: {
+                rules: paramsJson,
+                trigger,
+                action
+              }
+            }).then(res => {
+              if(res.code == '200') {
+                this.$message.success('修改成功!')
+                this.cancelModal()
+                this.form.resetFields()
+                this.getList()
+              }
+            })
+          } else {
+            this.$ajax.post({
+              url: this.$api.POST_ADD_RULE_RECORD,
+              params: {
+                rules: paramsJson,
+                trigger,
+                action
+              }
+            }).then(res => {
+              if(res.code == '200') {
+                this.$message.success('新增成功!')
+                this.isShow = !this.isShow
+                this.form.resetFields()
+                this.getList()
+              }
+            })
+          }
+
+          this.editId = null
 
         } else {
           this.$message.info('请填写表单所有项目！')