Kaynağa Gözat

完善二级联动带全选

zhuxinbo 5 yıl önce
ebeveyn
işleme
7fddbdf571

+ 1 - 1
src/views/template/userorientation/list.vue

@@ -50,7 +50,7 @@
     <div class="table-operator">
       <a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
     </div>
-    <!-- <transfer :checkData.sync="dataBox" /> -->
+    <transfer :checkData.sync="dataBox" />
     <!-- table区域-begin -->
     <div>
       <a-table

+ 112 - 17
src/views/template/userorientation/modules/transferCity.vue

@@ -69,11 +69,6 @@ p {
       <div class="content-box">
         <p class="content-title">省份</p>
         <div class="content">
-          <!-- <a-checkbox-group
-            :options="province"
-          >
-            <span style="color: red" slot="label" slot-scope="{value}">{{value}}</span>
-          </a-checkbox-group>-->
           <p>
             <input type="checkbox" class="select_all" @change="checkAllBox" v-model="checkAll" /> 全选
           </p>
@@ -105,20 +100,28 @@ p {
       >
         <p class="content-title">城市</p>
         <div class="content">
+          <!-- <p>
+            <input
+              type="checkbox"
+              class="select_all"
+              @change="checkAllBoxCity"
+              v-model="checkAllCity"
+            /> 全选
+          </p>-->
           <p
             v-for="(item,index) of city"
             :key="item.id"
             :class="{backgroundOnly:cityIndex == index}"
           >
-            <!-- <input
+            <input
               class="checkItem"
               type="checkbox"
               :value="item.value"
               :id="item.value"
-              v-model="checkMatched"
-              @change="checkOne(item,index)"
-            /> -->
-            {{item.name}}
+              v-model="checkMatchedCity"
+              @change="checkOneCity(item,index)"
+            />
+            {{item.label}}
           </p>
         </div>
       </div>
@@ -135,10 +138,10 @@ p {
         <div class="content">
           <p v-for="(item,index) of checkData" :key="index">
             {{item.label}}
-            <span
+            <!-- <span
               style="float:right;font-weight:normal;color:blue;cursor: pointer;font-size:14px"
               @click="detele(item,index)"
-            >删除</span>
+            >删除</span>-->
           </p>
         </div>
       </div>
@@ -166,7 +169,9 @@ export default {
       provinceIndex: null,
       cityIndex: null,
       checkAll: false,
-      arr: []
+      checkMatchedCity: [],
+      checkAllCity: false,
+      nowProvince: null
     }
   },
   computed: {},
@@ -195,9 +200,27 @@ export default {
       this.showClass = false
       this.provinceIndex = index
       this.cityIndex = null
+      this.nowProvince = item
+      this.checkMatchedCity = []
       getProvince(this.CityData, { parentCode: item.value }).then(res => {
         if (res.code == '0') {
-          this.city.push(...res.result.records)
+          this.city = res.result.records.map(item => {
+            return {
+              label: item.name,
+              value: item.id
+            }
+          })
+          if (this.checkMatched.indexOf(item.value) != -1) {
+            this.checkAllCity = true
+            this.checkMatchedCity = this.city.map(item => {
+              return item.value
+            })
+          } else {
+            this.checkMatchedCity = this.checkData.map(item => {
+              return item.value
+            })
+          }
+          //   this.city.push(...res.result.records)
           this.showCityData = true
         }
       })
@@ -213,32 +236,104 @@ export default {
       } else {
         this.checkMatched = []
         this.checkData = []
+        this.checkMatchedCity = []
       }
     },
     checkOne(item, index) {
       if (this.checkMatched.indexOf(item.value) == -1) {
         var index = this.checkData.findIndex(v => v.value === item.value)
         this.checkData.splice(index, 1)
+        if (this.nowProvince.value == item.value) {
+          this.checkMatchedCity = []
+        }
         this.checkAll = false
       } else {
         this.checkData.push(item)
+        if (this.nowProvince) {
+          if (item.value == this.nowProvince.value) {
+            this.checkMatchedCity = this.city.map(item => {
+              return item.value
+            })
+          }
+        }
+      }
+      if (this.checkData.length == this.province.length) {
+        this.checkAll = true
       }
-      if(this.checkData.length == this.province.length){
-          this.checkAll = true
+    },
+    checkAllBoxCity() {
+      this.checkMatchedCity = []
+      if (this.checkAllCity) {
+        this.checkMatchedCity = this.city.map(item => {
+          return item.value
+        })
+        this.checkMatched.push(this.nowProvince.value)
+        this.checkData.push(this.nowProvince)
+      } else {
+        this.checkMatchedCity = []
+        var index = this.checkData.findIndex(v => v.value === this.nowProvince.value)
+        var index1 = this.checkMatched.findIndex(v => v === this.nowProvince.value)
+        this.checkData.splice(index, 1)
+        this.checkMatched.splice(index1, 1)
+      }
+    },
+    checkOneCity(item, index) {
+      var allCity = this.checkMatchedCity.filter(v => {
+        return v.toString().slice(0, 2) == this.nowProvince.value
+      })
+
+      if (allCity.length == this.city.length) {
+        this.checkMatched.push(this.nowProvince.value)
+        this.checkData.push(this.nowProvince)
+        for (var i = 0; i < this.checkMatchedCity.length; i++) {
+          for (var j = 0; j < this.checkData.length; j++) {
+            if (
+              this.checkMatchedCity[i] == this.checkData[j].value &&
+              this.checkMatchedCity[i].toString().slice(0, 2) == this.nowProvince.value
+            ) {
+              this.checkData.splice(j, 1)
+              j--
+            }
+          }
+        }
+      }
+      if (this.checkMatchedCity.indexOf(item.value) != -1) {
+        if (allCity.length != this.city.length) {
+          this.checkData.push(item)
+        }
+      } else {
+        if (this.checkMatched.indexOf(this.nowProvince.value) != -1) {
+          var index1 = this.checkData.findIndex(v => v.value === this.nowProvince.value)
+          var index2 = this.checkMatched.findIndex(v => v === this.nowProvince.value)
+          this.checkData.splice(index1, 1)
+          this.checkMatched.splice(index2, 1)
+          var data = this.city.filter(v => {
+            return v.value != item.value
+          })
+          this.checkData.push(...data)
+        } else {
+          var index1 = this.checkData.findIndex(v => v.value === item.value)
+          this.checkData.splice(index1, 1)
+        }
       }
     },
     clear() {
       this.checkData = []
       this.checkMatched = []
+      this.checkMatchedCity = []
       this.checkAll = false
       this.$emit('update:checkData', this.checkData)
     },
-    detele(item,index) {
+    detele(item, index) {
+      //   if (this.checkMatched.indexOf(this.nowProvince.value) != -1) {
       var index1 = this.checkMatched.findIndex(v => v === item.value)
       var index2 = this.checkData.findIndex(v => v.value === item.value)
       this.checkData.splice(index2, 1)
       this.checkMatched.splice(index1, 1)
       this.checkAll = false
+      //   } else {
+      //   }
+
       this.$emit('update:checkData', this.checkData)
     }
   }