右侧添加全选按钮

ghs/src/views/item-class/add.vue

@@ -143,6 +143,8 @@
             class="infinite-list"
             v-infinite-scroll="classIfyClick"
             style="overflow:auto"
+            :infinite-scroll-delay="100"
+            :infinite-scroll-distance="100"
           >
             <li
               v-for="(value, index) in leftItemList"
@@ -204,8 +206,10 @@
           </div>
           <ul
             class="infinite-list"
-            v-infinite-scroll="rightScroll"
+            v-infinite-scroll="rightcell"
             style="height: calc(100% - 80px);overflow:auto"
+            :infinite-scroll-delay="100"
+            :infinite-scroll-distance="100"
           >
             <li
               v-for="(item, index) in rightItemList"
@@ -272,9 +276,13 @@
             </li>
           </ul>
           <div class="flex-center item-menu-box">
+            <el-checkbox
+              @change="allSelectItemRight"
+              v-model="checkedAllRight"
+            >全选</el-checkbox>
             <div
               class="flex-center-center"
-              style="width: 100px;height: 30px;color: #ffffff;background: #008ad3;border-radius: 5px;cursor: pointer;"
+              style="width: 100px;height: 30px;line-height: 30px;text-align: center;color: #ffffff;background: #008ad3;border-radius: 5px;cursor: pointer;display:inline-block; margin-left: 30px;"
               @click="saveBtn"
             >保存</div>
           </div>
@@ -321,7 +329,9 @@ export default {
       rightItemList2: [],
       leftCheckedList: [],
       rightCheckedList: [],
-      keyword: ''
+      keyword: '',
+      scrollLoadCount:0,
+      checkedAllRight: false
     };
   },
   mounted () {
@@ -399,12 +409,6 @@ export default {
             this.leftCheckedList.push(item)
           }
         })
-
-        // this.leftItemList.forEach(item => {
-        //   if (item.Uselect && item.select !== 1) {
-        //     this.leftCheckedList.push(item)
-        //   }
-        // })
       } else {
         this.leftItemList.forEach(item => {
           if (item.select != 2) {
@@ -413,6 +417,25 @@ export default {
         })
       }
     },
+    allSelectItemRight(){
+      this.rightCheckedList = []
+      if(this.checkedAllRight) {
+        this.rightItemList.forEach(item => {
+          if (!item.select) {
+            item.Uselect = true
+          }
+          if (item.Uselect && !item.select) {
+            this.rightCheckedList.push(item)
+          }
+        })
+      } else {
+        this.rightItemList.forEach(item => {
+          if (!item.selec) {
+            item.Uselect = false
+          }
+        })
+      }
+    },
     load () {
       this.count += 2
     },
@@ -438,6 +461,8 @@ export default {
       }
     },
     classIfyClick () {
+      this.scrollLoadCount++;
+      if(this.scrollLoadCount <= 1) return;
       this.pageNum++
       if (this.maxPage == 1) {
         this.getItemList()
@@ -469,6 +494,7 @@ export default {
     },
     rightSelect (item, index) {
       this.rightCheckedList = []
+      let list = []
       if (!item.select) {
         this.rightItemList[index].Uselect = !this.rightItemList[index].Uselect
       }
@@ -476,7 +502,15 @@ export default {
         if (item.Uselect) {
           this.rightCheckedList.push(item)
         }
+        if(!item.select) {
+          list.push(item)
+        }
       })
+      if(this.rightCheckedList.length == list.length) {
+        this.checkedAllRight = true
+      } else {
+        this.checkedAllRight = false
+      }
     },
     rightTabClick (item, index) {
       if (this.rightItemList.length !== this.rightItemList2.length) {
@@ -508,7 +542,9 @@ export default {
       this.getRightItemList()
       this.getItemList()
     },
-    rightScroll () {
+    rightcell () {
+      this.scrollLoadCount++;
+      if(this.scrollLoadCount <= 1) return;
       this.pageNum1++
       if (this.maxPage1 == 1) {
         this.getRightItemList()
@@ -544,6 +580,7 @@ export default {
         })
         this.leftItemList = [...checkList, ...this.leftItemList]
         this.rightCheckedList = []
+        this.checkedAllRight = false
       } else {
         this.$message.warning('请先选择花材')
       }