修复标签

src/views/label/labelRightSide.vue

@@ -63,30 +63,19 @@
     <!-- <div style="background-color: #F0F2F5; height: 10px; "></div> -->
     <!-- {{loopContent}} -->
       <a-form :form='infoSettingForm' layout='inline'>
-        <!-- {{loopContent.data}} -->
-        <div v-for="(item66, index66) in loopContent" :key="index66" style="margin-top: 20px; padding: 20px; border: 1px solid lightgrey">
+
+        <div v-for="(item66, index66) in loopContent.data" :key="index66" style="margin-top: 20px; padding: 20px; border: 1px solid lightgrey">
+
           <a-row type='flex' style="font-weight: bold; font-size: 16px; margin-bottom: 20px; border-bottom: 1px solid lightgrey" align='middle'>
             <a-col :span='21'>
-              <span style="font-weight: bold">条件分组{{index66.length == '4'? `1`: index66.split('data')[1]}}</span>
+              <span style="font-weight: bold">条件分组{{index66+1}}</span>
             </a-col>
             <a-col :span='3'>
               <a-button style="color: darkred" type="link" @click="delGroup(index66)"><a-icon type="delete" /> {{index66}}删除分组 </a-button>
             </a-col>
           </a-row>
-          {{item66}}
-          <div v-if="JSON.stringify(loopContent[index66]) !== '[]'" style="width: 90%; padding: 20px; margin-bottom: 20px">
-            <!-- <span v-if="index66 !== 'data'">与</span> -->
-            <!-- {{item66}} -->
-            <div v-for="(item, index) in item66" :key='index' style="margin-bottom: 20px">
-              <!-- <a-form-item v-if="!!item.relation">
-                <a-select style="width: 120px" placeholder='请选择条件' v-decorator="['relation-' + index66 +'-' + index,{initialValue: item.relation, validateTrigger:'blur',rules: []}]">
-                  <a-select-option value='and'>与</a-select-option>
-                  <a-select-option value='or'>或</a-select-option>
-                  <a-select-option value='ne'>非</a-select-option>
-                </a-select>
-              </a-form-item> -->
-              <!-- {{item}} -->
-              {{item}}
+          <div style="width: 90%; padding: 20px; margin-bottom: 20px">
+            <div v-for="(item, index) in item66.labelSelConditionList" :key='index' style="margin-bottom: 20px">
               <a-form-item>
                 <a-select style="width: 120px" placeholder='请选择条件' v-decorator="['relation-' + index66 +'-' + index,{initialValue: item.relation, validateTrigger:'blur',rules: []}]">
                   <a-select-option value='and'>与</a-select-option>
@@ -96,13 +85,13 @@
               </a-form-item>
 
               <a-form-item>
-                <a-select style="width: 120px" placeholder='请选择业务属性' v-decorator="['key-' + index66 +'-' + index,{initialValue: item.labelSelConditionList[0].key, validateTrigger:'blur',rules: [{required: true, message: '请至少选择一项！'}]}]">
+                <a-select style="width: 120px" placeholder='请选择业务属性' v-decorator="['key-' + index66 +'-' + index,{initialValue: item.key, validateTrigger:'blur',rules: [{required: true, message: '请至少选择一项！'}]}]">
                   <a-select-option v-for="(item1, index1) in availableKeyList" :key='index1' :value='item1.tblKey'>{{item1.tblKeyName}}</a-select-option>
                 </a-select>
               </a-form-item>
 
               <a-form-item>
-                <a-select style="width: 120px" placeholder='区间' v-decorator="['codition-' + index66 +'-' + index,{initialValue: item.labelSelConditionList[0].codition, validateTrigger:'blur',rules: [{required: true, message: '请至少选择一项！'}]}]">
+                <a-select style="width: 120px" placeholder='区间' v-decorator="['codition-' + index66 +'-' + index,{initialValue: item.codition, validateTrigger:'blur',rules: [{required: true, message: '请至少选择一项！'}]}]">
                   <a-select-option value='eq'>等于</a-select-option>
                   <a-select-option value='gt'>大于</a-select-option>
                   <a-select-option value='gte'>大于等于</a-select-option>
@@ -111,24 +100,20 @@
                   <a-select-option value='btw'>区间</a-select-option>
                 </a-select>
               </a-form-item>
-              <!-- {{item}} -->
               <a-form-item>
-                <a-input style="width: 120px" placeholder='请输入' v-decorator="['inputOne-' + index66 +'-' + index,{initialValue: getInitialValueOne(item.labelSelConditionList[0].val), validateTrigger:'blur',rules: [],}]"></a-input>
+                <a-input style="width: 120px" placeholder='请输入' v-decorator="['inputOne-' + index66 +'-' + index,{initialValue: getInitialValueOne(item.val), validateTrigger:'blur',rules: [],}]"></a-input>
               </a-form-item>
               <a-form-item v-if="infoSettingForm.getFieldValue('codition-'+index66 +'-' + index) == 'btw'">
-                <a-input style="width: 120px" placeholder='请输入' v-decorator="['inputTwo-' + index66 +'-' + index,{initialValue: getInitialValueTwo(item.labelSelConditionList[0].val), validateTrigger:'blur',rules: []}]"></a-input>
+                <a-input style="width: 120px" placeholder='请输入' v-decorator="['inputTwo-' + index66 +'-' + index,{initialValue: getInitialValueTwo(item.val), validateTrigger:'blur',rules: []}]"></a-input>
               </a-form-item>
 
               <a-form-item>
-                <a-select style="width: 120px" placeholder='查询方式' v-decorator="['selMet-' + index66 +'-' + index,{initialValue: item.labelSelConditionList[0].selMet, validateTrigger:'blur',rules: [{required: true, message: '请至少选择一项！'}]}]">
+                <a-select style="width: 120px" placeholder='查询方式' v-decorator="['selMet-' + index66 +'-' + index,{initialValue: item.selMet, validateTrigger:'blur',rules: [{required: true, message: '请至少选择一项！'}]}]">
                   <a-select-option value='equels'>精确</a-select-option>
                   <a-select-option value='like'>模糊</a-select-option>
                 </a-select>
               </a-form-item>
-              <!-- <a-form-item>
-                <a-icon v-if="index+1 == loopContent.data.length" theme='filled' style="color:lightgreen;" type="plus-circle" @click="addRow(index66)" />
-                <a-icon v-if="index+1 == loopContent.data.length" theme='filled' style="color:red; margin-left: 5px" type="minus-circle" @click="deleteRow(index66, index)" />
-              </a-form-item> -->
+              
               <a-form-item>
                 <a-icon v-if="index+1 == loopContent.data.length" theme='filled' style="color:lightgreen;" type="plus-circle" @click="addRow(index66)" />
                 <a-icon v-if="index+1 == loopContent.data.length" theme='filled' style="color:red; margin-left: 5px" type="minus-circle" @click="deleteRow(index66, index)" />
@@ -153,10 +138,10 @@
       <a-row style="font-weight: bold">筛选结果</a-row>
       <a-table class="portalTable" size="small" row-key="id" :columns="columns" :dataSource="resultList"></a-table>
     </div> -->
-    <a-modal :visible='deleteVisible' @ok='handleDeleteOk' @cancel='handleCancelOk'>
+    <a-modal v-model='deleteVisible' @ok='handleDeleteOk' @cancel='handleCancelOk'>
       确定删除标签【{{labelNameForDel}}】吗?
     </a-modal>
-    <a-modal width='400px' :bordered='true' title='提示' :visible='confirmVisible' @ok='handleConfirmVisible' @cancel='handleConfirmCancel'>
+    <a-modal width='400px' :bordered='true' title='提示' v-model='confirmVisible' @ok='handleConfirmVisible' @cancel='handleConfirmCancel'>
       确定保存吗？
       <!-- <a-table class="portalTable" size="small" row-key="id" :columns="columns" :dataSource="resultList"></a-table> -->
     </a-modal>
@@ -258,17 +243,21 @@ export default {
   methods: {
     addGroup() {
       // 添加分组前，先查询当前有几个分组
-      const groupTotal = Object.keys(this.loopContent).length
-      
-      Vue.set(this.loopContent, 'data'+(groupTotal+1), [
-        { "serial": "1", "relation": "and", "labelSelConditionList": [ { "key": "", "val": "", "codition": "eq", "selMet": "", "relation": "" } ] }
-      ])
+      const groupTotal = Object.keys(this.loopContent.data).length
+      console.log(groupTotal)
+      console.log(this.loopContent)
+      this.loopContent.data.push(
+        { 'serial': '1', 'relation': 'and', 'labelSelConditionList': [ { 'key': '', 'val': '', 'codition': 'eq', 'selMet': '', 'relation': '' } ] }
+      )
+      // Vue.set(this.loopContent.data, ''+(groupTotal+1), [
+      //   { 'serial': '1', 'relation': 'and', 'labelSelConditionList': [ { 'key': '', 'val': '', 'codition': 'eq', 'selMet': '', 'relation': '' } ] }
+      // ])
 
       console.log(JSON.stringify(this.loopContent))
     },
     delGroup(key) {
       console.log(key)
-      Vue.delete(this.loopContent, key)
+      Vue.delete(this.loopContent.data, key)
     },
     initKeyList() {
       // 获取当前的对象
@@ -368,7 +357,7 @@ export default {
     // },
     addRow(whichGroup) {
       console.log(whichGroup)
-      this.loopContent[whichGroup].push({
+      this.loopContent.data[whichGroup].labelSelConditionList.push({
         key: '',
         codition: 'eq',
         val: '',
@@ -386,7 +375,7 @@ export default {
       // console.log(JSON.stringify(this.loopContent.data))
     },
     deleteLabel(id) {
-      console.log(id)
+      console.log(id, this.deleteVisible)
       // 查询该标签是否是一级标签，是一级标签直接删除。
       this.deleteVisible = !this.deleteVisible
     },
@@ -406,7 +395,7 @@ export default {
       this.deleteVisible = !this.deleteVisible
     },
     resetFormFields() {
-      this.loopContent = { "data": [ { "serial": "1", "relation": "and", "labelSelConditionList": [ { "key": "", "val": "", "codition": "eq", "selMet": "", "relation": "" } ] } ] }
+      this.loopContent = { 'data': [ { 'serial': '1', 'relation': 'and', 'labelSelConditionList': [ { 'key': '', 'val': '', 'codition': 'eq', 'selMet': '', 'relation': '' } ] } ] }
       this.resultList = []
       this.labelForm.resetFields()
       this.jsonData = {selParams: []}
@@ -470,6 +459,7 @@ export default {
             this.infoSettingForm.validateFields((err1, values) => {
               if(!err1) {
                 let loopGroup = this.loopContent // 有多少组
+                console.log(loopGroup)
 
                 // console.log(values, 'form表单的数据')
                 let innerResult = []
@@ -479,33 +469,31 @@ export default {
                 // console.log(loopGroup, 'loopGroup')
                 console.log(formData, 'formData')
 
-                for (let k in loopGroup) {
+                loopGroup.data.forEach((item, i) => {
                   let rowList = []
-                  loopGroup[k].forEach((item, index) => {
+                  console.log(item)
+                  item.labelSelConditionList.forEach((ele, index) => {
+
+                    // console.log(formData)
                     rowList.push({
-                      key: formData['key-' + k + '-'+index ],
-                      val: !formData['inputTwo-' + k+'-'+index] ? formData['inputOne-' + k+'-'+index] : formData['inputOne-' + k+'-'+index] + ',' + formData['inputTwo-' + k+'-'+index],
-                      codition: formData['codition-' + k + '-' +index],
-                      relation: formData['relation-' + k + '-' + index],
-                      selMet: formData['selMet-' + k + '-' + index]
+                      key: formData['key-' + i + '-'+index ],
+                      val: !formData['inputTwo-' + i+'-'+index] ? formData['inputOne-' + i+'-'+index] : formData['inputOne-' + i+'-'+index] + ',' + formData['inputTwo-' + i+'-'+index],
+                      codition: formData['codition-' + i + '-' +index],
+                      relation: formData['relation-' + i + '-' + index],
+                      selMet: formData['selMet-' + i + '-' + index]
                     })
                   })
-                  // console.log(k)
-                  // console.log(loopGroup[k])
+
                   innerResult.push({
                     'serial': 1,
-                    'relation': formData['relation-' + k + '-0'],
+                    'relation': formData['relation-' + i + '-0'],
                     'labelSelConditionList': rowList
                   })
-                  
-                }
+                })
 
                 console.log(innerResult)
 
                 this.jsonData.selParams = innerResult
-                console.log(
-                  this.jsonData
-                )
 
                 // console.log(innerResult)