上传代码

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

@@ -130,9 +130,9 @@
                         <div class="flex-center-center item-seek-btn">搜索</div>
                     </div>
                     <ul class="infinite-list" v-infinite-scroll="classIfyClick" style="overflow:auto">
-                        <li v-for="(value, index) in ptClassList" class="flex-center infinite-list-item" :key="index" >
+                        <li v-for="(value, index) in leftItemList" class="flex-center infinite-list-item" :key="index"  @click="leftSelect(value, index)">
                             <span class="el-icon-success disbale" v-if="value.select == 1"></span>
-                            <span class="el-icon-success" :class="value.Uselect ? 'select' : 'unSlect'" @click="leftSelect(value, index)" v-else></span>
+                            <span class="el-icon-success" :class="value.Uselect ? 'select' : 'unSlect'" v-else></span>
                             <span>{{ index + 1 }}</span>
                             <img :src="value.cover" alt="">
                             <span>{{value.name}}</span>
@@ -146,8 +146,10 @@
         </div>
         <div class="flex-center-center content-box">
             <div class="switchover-box">
-                <div class="flex-center-center">→</div>
-                <div class="flex-center-center">←</div>
+              <!-- 向右移动 -->
+                <div class="flex-center-center" @click="turnRight">→</div>
+                <!-- 向左移动 -->
+                <div class="flex-center-center" @click="turnLsft">←</div>
             </div>
         </div>
         <div class="right-box">
@@ -163,13 +165,13 @@
                         <div style="width: 100px;text-align: center">库存预警</div>
                     </div>
                     <ul class="infinite-list" v-infinite-scroll="rightScroll" style="height: calc(100% - 80px);overflow:auto">
-                        <li v-for="(item, index) in rightItemList" class="flex-center infinite-list-item" :key="index">
+                        <li v-for="(item, index) in rightItemList" class="flex-center infinite-list-item" :key="index" @click="rightSelect(item, index)">
                             <div style="width: 70px;text-align: center" >
                                 <span class="el-icon-success disbale"  v-if="item.select"></span>
-                                <span class="el-icon-success" v-else  :class="value.Uselect ? 'select' : 'unSlect'" @click="rightSelect(value, index)"></span>
+                                <span class="el-icon-success" v-else  :class="item.Uselect ? 'select' : 'unSlect'" ></span>
                             </div>
                             <div style="width: 70px;text-align: center">
-                                <img src="http://img.huaml.com//uploads/12358/202005/28/a6e09f3207605b434cc8a67ac405db5e.jpeg" alt="">
+                                <img :src="item.cover" alt="">
                             </div>
                             <div style="width: 100px;text-align: center">
                                 <el-input style="width: 80px;" v-model="item.name" placeholder="请输入" :disabled="item.select"></el-input>
@@ -215,7 +217,7 @@
         leftTabCurrent: 0,
         ptClassName: '',
         ptClassId: '',
-        ptClassList: [],
+        leftItemList: [],
         pageNum: 1,
         maxPage: 0,
         rightClassList: [],
@@ -224,15 +226,45 @@
         ptRightId: '',
         pageNum1: 1,
         rightItemList: [],
-        maxPage1: 0
+        maxPage1: 0,
       };
     },
-    computed: {},
     mounted(){
       this.getLeftList();
-      this.getItemList()
       this.getRightLst()
-      this.getRightItemList()
+    },
+    watch: {
+      leftCheckedList() {
+        if(this.leftItemList.length === this.leftCheckedList.length) {
+          this.checkedAll = true
+        } else {
+          this.checkedAll = false
+        }
+      }
+    },
+    computed: {
+      leftCheckedList() {
+        let list = [];
+        if(this.leftItemList) {
+          this.leftItemList.forEach(item => {
+            if(item.Uselect && item.select !== 1) {
+              list.push(item)
+            }
+          })
+        }
+        return list
+      },
+      rightCheckedList() {
+        let list = [];
+        if(this.rightItemList) {
+          this.rightItemList.forEach(item => {
+            if(item.Uselect) {
+              list.push(item)
+            }
+          })
+        }
+        return list
+      }
     },
     methods: {
       getLeftList(){
@@ -241,6 +273,7 @@
           this.leftClassList = res.list
           this.ptClassName = res.list[0].name
           this.ptClassId = res.list[0].id
+          this.getItemList()
         })
       },
       getRightLst() {
@@ -249,6 +282,7 @@
               this.rightClassList = res.list
               this.ptRightName = res.list[0].name
               this.ptRightId = res.list[0].id
+              this.getRightItemList()
           }).catch(err => {})
       },
       getItemList() {
@@ -262,9 +296,9 @@
               console.log(res)
               res.list.forEach(item => item.Uselect = false)
               if(this.pageNum != 1) {
-                  this.ptClassList = this.ptClassList.concat(res.list)
+                  this.leftItemList = this.leftItemList.concat(res.list)
               } else {
-                  this.ptClassList = res.list
+                  this.leftItemList = res.list
               }
               this.maxPage = res.moreData
           }).catch(err => {})
@@ -278,12 +312,28 @@
           this.$service.item.list(data).then(res => {
               console.log(res)
               res.list.forEach(item => {item.select = true})
-              this.rightItemList = res.list
+              if(this.pageNum1 != 1) {
+                this.rightItemList = this.rightItemList.concat(res.list)
+              } else {
+                this.rightItemList = res.list
+              }
               this.maxPage1 = res.moreData
           }).catch(err => {})
       },
       allSelectItem(e){
-        console.log(e)
+        if(this.checkedAll) {
+          this.leftItemList.forEach(item => {
+            if(item.select != 1) {
+              item.Uselect = true
+            }
+          })
+        } else{
+          this.leftItemList.forEach(item => {
+            if(item.select != 1) {
+              item.Uselect = false
+            }
+          })
+        }
       },
       load () {
         this.count += 2
@@ -304,10 +354,15 @@
           }
       },
       leftSelect(value, index) {
-          this.ptClassList[index].Uselect = !this.ptClassList[index].Uselect
+        if(value.select != 1) {
+          this.leftItemList[index].Uselect = !this.leftItemList[index].Uselect
+        }
       },
       rightSelect(item,index) {
+        if(!item.select){
           this.rightItemList[index].Uselect = !this.rightItemList[index].Uselect
+        }
+        
       },
       rightTabClick(item, index) {
           this.rightTabCurrent = index
@@ -322,6 +377,38 @@
           if(this.maxPage1 == 1) {
               this.getRightItemList()
           }
+      },
+      // 向右移动
+      turnRight() {
+        if(this.leftCheckedList.length !== 0) {
+          console.log(this.leftCheckedList, this.rightItemList)
+          let checkList = JSON.parse(JSON.stringify(this.leftCheckedList))
+          checkList.forEach((item, index) => {
+            item.select = false
+            item.Uselect = false
+            this.leftItemList.splice(item, 1);
+          })
+          this.rightItemList = [...checkList, ...this.rightItemList]
+          this.leftCheckedList = []
+        } else {
+          this.$message.warning('请先选择花材')
+        }
+      },
+      // 向左移动
+      turnLsft() {
+        if(this.rightCheckedList.length !== 0) {
+          console.log(this.rightCheckedList)
+          let checkList = JSON.parse(JSON.stringify(this.rightCheckedList))
+          checkList.forEach((item, index) => {
+            item.select = 2
+            item.Uselect = false
+            this.rightItemList.splice(item, 1);
+          })
+          this.leftItemList = [...checkList, ...this.leftItemList]
+          this.rightCheckedList = []
+        } else {
+          this.$message.warning('请先选择花材')
+        }
       }
     },
   };