so far

src/views/houseData/basicInfoByLabel.vue

@@ -4,7 +4,7 @@
     <!-- {{checkedKeys}} -->
     <div class="layoutMargin layoutPadding">
     <a-row>
-        <a-col :span="4" style="height:100%; position:relative">
+        <a-col :span="4" style="height:100%; position:relative;" v-if="leftPanelShow">
           <span style="display: block; width: 90%; color:#1890ff; font-size: 16px; font-weight: 500; padding-bottom:5px; border-bottom:1px solid #1890ff;">标签筛选条件</span>
           <a-tree
             @check='onCheck'                
@@ -13,7 +13,11 @@
             :replace-fields="replaceFields"
           />
         </a-col>
-        <a-col :span="20" style="padding-left: 10px; border-left:1px solid #ccc;">
+
+        <a-button v-if="!leftPanelShow" @click="showNHide" type='link' icon='right' style="position: absolute; left: -2%; top: 14%; color: grey"/>
+        <a-button v-else @click="showNHide" type='link' icon='left' style="position: absolute; left: 14.5%; top: 14%; color: grey"/>
+
+        <a-col :span="!!leftPanelShow ? 20 : 24" :style="!!leftPanelShow? `padding-left: 10px; border-left:1px solid #ccc;`:`padding-left: 10px;`">
           <!-- <div v-if="$route.path == '/houseData/basicInfoByLabel'" class="layoutMargin layoutPadding"> -->
             <a-form :form="form" class="protalForm" >
               <a-row class="formItem" type="flex" :justify="simpleSearchForm ? 'end' : ''" align="top" :gutter="simpleSearchForm ? 16 : 0">
@@ -204,6 +208,7 @@ export default {
           key: '3'
         },
       ],
+      leftPanelShow: true,
       finishDate: [
         {
           name: '2000年以前',
@@ -486,6 +491,9 @@ export default {
         }
       })
     },
+    showNHide() {
+      this.leftPanelShow = !this.leftPanelShow
+    },
     onSelect(selectedKeys, node) {
       console.log(selectedKeys, node.node.$children.length)
     },

src/views/label/labelRightSide.vue

@@ -3,6 +3,7 @@
 		<div>
       <!-- {{triggerType}} - {{labelId}} - {{finish}} - {{jsonData}} - {{initKey}} -->
       <!-- {{loopContent.data}} -->
+      {{loopContent}}
       <a-row>
         <!-- <a-col :span='1' v-if="triggerType == 'create'"> -->
         <a-col :span='1'>
@@ -54,27 +55,31 @@
       </a-form-item>
     </a-form>
     <a-divider type='horizontal' />
-      <a-row style="font-weight: bold; font-size: 16px;">信息筛选配置</a-row>
+      <a-row style="font-weight: bold; font-size: 16px; margin-bottom: 20px">信息筛选配置<span style="font-weight: normal">（已有{{Object.keys(loopContent).length}}组配置）</span></a-row>
       <a-form :form='infoSettingForm' layout='inline'>
-        <div v-for="(item, index) in loopContent.data" :key='index'>
+        <div v-for="(item66, index66) in loopContent" :key="index66">
+          <div v-if="JSON.stringify(loopContent[index66]) !== '[]'" style="border: 1px solid lightgrey; padding: 20px; margin-bottom: 5px">
+            <!-- <span v-if="index66 !== 'data'">与</span> -->
+            <!-- {{item66}} -->
+            <div v-for="(item, index) in item66" :key='index'>
               <a-form-item v-if="!!item.relation">
-            <a-select style="width: 120px" placeholder='请选择条件' v-decorator="['relation' + index,{initialValue: item.relation, validateTrigger:'blur',rules: []}]">
+                <a-select style="width: 100px" 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>
 
-          <a-form-item v-else style="margin-left: 120px"></a-form-item>
+              <a-form-item v-else style="margin-left: 100px"></a-form-item>
 
               <a-form-item>
-            <a-select style="width: 120px" placeholder='请选择业务属性' v-decorator="['key' + index,{initialValue: item.key, validateTrigger:'blur',rules: [{required: true, message: '请至少选择一项！'}]}]">
+                <a-select style="width: 100px" 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' + index,{initialValue: item.codition, validateTrigger:'blur',rules: [{required: true, message: '请至少选择一项！'}]}]">
+                <a-select style="width: 100px" 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>
@@ -85,28 +90,43 @@
               </a-form-item>
 
               <a-form-item>
-            <a-input style="width: 120px" placeholder='请输入' v-decorator="['inputOne' + index,{initialValue: getInitialValueOne(item.val), validateTrigger:'blur',rules: [],}]"></a-input>
+                <a-input style="width: 100px" 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'+index) == 'btw'">
-            <a-input style="width: 120px" placeholder='请输入' v-decorator="['inputTwo' + index,{initialValue: getInitialValueTwo(item.val), validateTrigger:'blur',rules: []}]"></a-input>
+                <a-input style="width: 100px" 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' + index,{initialValue: item.selMet, validateTrigger:'blur',rules: [{required: true, message: '请至少选择一项！'}]}]">
+                <a-select style="width: 100px" 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()" />
-            <a-icon v-if="index+1 == loopContent.data.length" theme='filled' style="color:red; margin-left: 5px" type="minus-circle" @click="deleteRow(index)" />
+                <a-icon theme='filled' style="color:lightgreen;" type="plus-circle" @click="addRow(index66)" />
+                <a-icon theme='filled' style="color:red; margin-left: 5px" type="minus-circle" @click="deleteRow(index66, index)" />
               </a-form-item>
               <a-divider type='horizontal' dashed />
             </div>
+            <a-row style="text-align: center">
+              <a-button-group>
+                <a-button type="primary" @click="addGroup"> <a-icon type="plus" />新增分组 </a-button>
+                <a-button type="danger" @click="delGroup(index66)"> 删除分组<a-icon type="delete" /> </a-button>
+              </a-button-group>
+            </a-row>
+          </div>
+        </div>
       </a-form>
 
       <!-- <a-button type='link' v-if="loopContent.data.length == 0" @click="addInitRow()"><a-icon type="plus" />新增配置</a-button> -->
-      <a-row v-if="loopContent.data.length == 0">请选择业务对象后填写筛选配置</a-row>
+      <a-row v-if="Object.keys(this.loopContent).length == 0" style="border: 1px solid pink; padding: 20px">
+        <a-icon type="info-circle" />
+        <span>请选择业务对象后填写筛选配置</span>
+      </a-row>
     </div>
     <!-- <div v-if="resultList.length > 0">
       <a-divider type='horizontal' />
@@ -124,6 +144,7 @@
 </template>
 
 <script>
+import Vue from 'vue'
 export default {
   data() {
     return {
@@ -135,7 +156,7 @@ export default {
           codition: 'eq',
           val: '',
           selMet: ''
-        }]
+        }],
       },
       verifySelect: false,
       verifyInput: false,
@@ -211,9 +232,29 @@ export default {
         this.getLabelDetail()
       },
       immediate: true
-    }
+    },
   },
   methods: {
+    addGroup() {
+      // 添加分组前，先查询当前有几个分组
+      const groupTotal = Object.keys(this.loopContent).length
+      
+      Vue.set(this.loopContent, 'data'+(groupTotal+1), [
+        {
+          key: '',
+          codition: 'eq',
+          val: '',
+          selMet: '',
+          relation: 'and'
+        }
+      ])
+
+      console.log(JSON.stringify(this.loopContent))
+    },
+    delGroup(key) {
+      console.log(key)
+      Vue.delete(this.loopContent, key)
+    },
     initKeyList() {
       // 获取当前的对象
       this.initKey = this.labelForm.getFieldValue('tableName')
@@ -222,18 +263,17 @@ export default {
     handleObjChange(val) {
       this.getKeyList(val)
 
-      this.loopContent.data = [{
+      this.loopContent = {data: [{
         key: '',
         codition: 'eq',
         val: '',
         selMet: ''
-      }]
+      }]}
 
       this.infoSettingForm.resetFields()
       // 重置key表项的值为空 或 业务对象干脆disable掉
     },
     getKeyList(val) {
-      console.log('111')
       this.availableKeyList = []
       this.$ajax.get({
         url: this.$api.GET_AVAILABLE_KEY_LIST,
@@ -306,16 +346,17 @@ export default {
       this.finish = true
       this.$emit('finish', this.finish)
     },
-    addInitRow() {
-      this.loopContent.data.push({
-        key: '',
-        codition: 'eq',
-        val: '',
-        selMet: ''
-      })
-    },
-    addRow() {
-      this.loopContent.data.push({
+    // addInitRow() {
+    //   this.loopContent.data.push({
+    //     key: '',
+    //     codition: 'eq',
+    //     val: '',
+    //     selMet: ''
+    //   })
+    // },
+    addRow(whichGroup) {
+      console.log(whichGroup)
+      this.loopContent[whichGroup].push({
         key: '',
         codition: 'eq',
         val: '',
@@ -324,11 +365,13 @@ export default {
       })
       console.log(this.loopContent)
     },
-    deleteRow(index) {
-      console.log(JSON.stringify(this.loopContent.data))
-      console.log(index)
-      this.loopContent.data.splice(index, 1)
-      console.log(JSON.stringify(this.loopContent.data))
+    deleteRow(whichGroup, whichRow) {
+      console.log(whichGroup, whichRow)
+      this.loopContent[whichGroup].splice(whichRow, 1)
+      // console.log(JSON.stringify(this.loopContent.data))
+      // console.log(index)
+      // this.loopContent.data.splice(index, 1)
+      // console.log(JSON.stringify(this.loopContent.data))
     },
     deleteLabel(id) {
       // 查询该标签是否是一级标签，是一级标签直接删除。
@@ -350,7 +393,12 @@ export default {
       this.deleteVisible = !this.deleteVisible
     },
     resetFormFields() {
-      this.loopContent.data = []
+      this.loopContent = {data: [{
+        key: '',
+        codition: 'eq',
+        val: '',
+        selMet: ''
+      }]}
       this.resultList = []
       this.labelForm.resetFields()
       this.jsonData = {selParams: []}
@@ -388,8 +436,9 @@ export default {
       this.confirmVisible = !this.confirmVisible
     },
     save() {
-      if(this.loopContent.data.length == 0) {
-        this.$message.error('请至少添加一项配置')
+      // if(this.loopContent.data.length == 0) {
+      if(Object.keys(this.loopContent).length == 0) {
+        this.$message.error('请至少添加一组配置！')
       } else {
         // 判断是否选择分组或填写分组
         console.log(!!this.labelForm.getFieldValue('parentId'))
@@ -407,6 +456,7 @@ export default {
             const labelFormData = this.labelForm.getFieldsValue()
             this.jsonData = Object.assign(this.jsonData, labelFormData)
             this.infoSettingForm.validateFields((err1, values) => {
+              console.log(values)
               if(!err1) {
                 let loopCounts = this.loopContent.data.length
                 let formData = this.infoSettingForm.getFieldsValue()

src/views/label/labelRightSideEmpty.vue

 <template>
-  <div>
-    请先在左侧选择一个标签或添加标签。
+  <div style="position: relative">
+    <div style="border: 1px dotted lightgrey; padding: 150px;">
+      <a-row style="text-align: center; margin-bottom: 50px;">
+        <img src="@/assets/icon/labelNone.png" />
+      </a-row>
+      <a-row style="text-align: center; font-weight: bold; font-size: 16px">
+        <span>请先在左侧选择一个标签或添加标签。</span>
+      </a-row>
+    </div>
   </div>
 </template>