增加供货商穿梭框的写法

ghs/src/mock/userInfo.js

@@ -159,7 +159,7 @@ let menu = {
 		{id: '4',parentId: null,name: '花材',type: 0,icon: 'iconshangpinguanli',orderNum: 4,router: '/item/list',viewPath: 'views/item/list.vue',keepAlive: 1},
 		{id: '405',	parentId: '4',name: '花材列表',type: 1,icon: 'icon-user',orderNum: 4,router: '/item/list',viewPath: 'views/item/list.vue',keepAlive: 1},
 		{id: '401',parentId: '4',name: '花材分类',type: 1,icon: 'icon-user',orderNum: 4,router: '/item-class/list',viewPath: 'views/item-class/list.vue',keepAlive: 1},
-		{id: '809',parentId: '8',name: '花材导入',type: 1,icon: 'icongongzuotai',orderNum: 4,router: '/item-class/add',viewPath: 'views/item-class/add.vue',keepAlive: 1},
+		{id: '809',parentId: '4',name: '花材导入',type: 1,icon: 'icongongzuotai',orderNum: 4,router: '/item-class/add',viewPath: 'views/item-class/add.vue',keepAlive: 1},
 		// 员工管理
 		{id: '9',parentId: null,name: '员工',type: 0,icon: 'iconyuangongguanli',orderNum: 9,router: '/staff/list',viewPath: 'views/staff/list.vue',keepAlive: 1},
 		{id: '902',parentId: '9',name: '员工列表',type: 1,icon: 'iconkehuguanli',orderNum: 9,router: '/staff/list',viewPath: 'views/staff/list.vue',keepAlive: 1},

ghs/src/service/ghs-item-class/index.js

@@ -10,5 +10,6 @@ export class ItemClassService extends BaseService {
     });
   }
 
+
 }
 export default new ItemClassService();

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

@@ -48,6 +48,9 @@
                     background: #00ccff;
                 }
             }
+            &>.class_name{
+                background: #ccc;
+            }
         }
         .item-box{
             position: relative;
@@ -101,6 +104,16 @@
                 border-top: 1px solid #dadada;
             }
         }
+        .unSlect{
+            color: #b3b3b3;
+        }
+        .select{
+            color: #169bd5;
+        }
+        .disbale{
+            color: #eee;
+            cursor:not-allowed;
+        }
     }
 </style>
 <template>
@@ -109,19 +122,20 @@
             <div class="flex-center-center title">平台花材</div>
             <div class="flex-center-between center-box">
                 <div class="class-list">
-                    <div class="flex-center-center " v-for="res in 30">分类</div>
+                    <div class="flex-center-center" v-for="(res, index) in leftClassList" :key="index" @click="classTabChange(res,index)" :class="{'class_name': leftTabCurrent == index}">{{res.name}}</div>
                 </div>
                 <div class="item-box">
                     <div class="flex-center item-seek-box">
                         <input type="text" placeholder="请输入花材名称，支持拼音首字母搜索">
                         <div class="flex-center-center item-seek-btn">搜索</div>
                     </div>
-                    <ul class="infinite-list" v-infinite-scroll="load" style="overflow:auto">
-                        <li v-for="i in count" class="flex-center infinite-list-item">
-                            <spam class="el-icon-success" style="color: #b3b3b3"></spam>
-                            <span>{{ i }}</span>
-                            <img src="http://img.huaml.com//uploads/12358/202005/28/a6e09f3207605b434cc8a67ac405db5e.jpeg" alt="">
-                            <span>粉色家人</span>
+                    <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" >
+                            <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>{{ index + 1 }}</span>
+                            <img :src="value.cover" alt="">
+                            <span>{{value.name}}</span>
                         </li>
                     </ul>
                     <div class="flex-center item-menu-box">
@@ -148,27 +162,28 @@
                         <div style="width: 100px;text-align: center">初始库存</div>
                         <div style="width: 100px;text-align: center">库存预警</div>
                     </div>
-                    <ul class="infinite-list" v-infinite-scroll="load" style="height: calc(100% - 80px);overflow:auto">
-                        <li v-for="i in count" class="flex-center infinite-list-item">
+                    <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">
                             <div style="width: 70px;text-align: center" >
-                                <spam class="el-icon-success" style="color: #b3b3b3"></spam>
+                                <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>
                             </div>
                             <div style="width: 70px;text-align: center">
                                 <img src="http://img.huaml.com//uploads/12358/202005/28/a6e09f3207605b434cc8a67ac405db5e.jpeg" alt="">
                             </div>
                             <div style="width: 100px;text-align: center">
-                                <el-input style="width: 80px" v-model="input" placeholder="请输入"></el-input>
+                                <el-input style="width: 80px;" v-model="item.name" placeholder="请输入" :disabled="item.select"></el-input>
                             </div>
                             <div style="width: 100px;text-align: center">
-                                <el-input style="width: 80px" v-model="input" placeholder="请输入"></el-input>
+                                <el-input style="width: 80px" v-model="input" placeholder="请输入" :disabled="item.select"></el-input>
 
                             </div>
                             <div style="width: 100px;text-align: center">
-                                <el-input style="width: 80px" v-model="input" placeholder="请输入"></el-input>
+                                <el-input style="width: 80px" v-model="input" placeholder="请输入" :disabled="item.select"></el-input>
 
                             </div>
                             <div style="width: 100px;text-align: center">
-                                <el-input style="width: 80px" v-model="input" placeholder="请输入"></el-input>
+                                <el-input style="width: 80px" v-model="item.stockWarning" placeholder="请输入" :disabled="item.select"></el-input>
 
                             </div>
                         </li>
@@ -178,7 +193,7 @@
                     </div>
                 </div>
                 <div class="class-list">
-                    <div class="flex-center-center " v-for="res in 30">分类</div>
+                    <div class="flex-center-center " v-for="(res, index) in rightClassList" @click="rightTabClick(res, index)" :key="index" :class="{'class_name': rightTabCurrent == index}">{{res.name}}</div>
                 </div>
             </div>
         </div>
@@ -196,23 +211,117 @@
         input: 0,
         checked:false,
         checkedAll:false,
+        leftClassList:[],
+        leftTabCurrent: 0,
+        ptClassName: '',
+        ptClassId: '',
+        ptClassList: [],
+        pageNum: 1,
+        maxPage: 0,
+        rightClassList: [],
+        rightTabCurrent: 0,
+        ptRightName: '',
+        ptRightId: '',
+        pageNum1: 1,
+        rightItemList: [],
+        maxPage1: 0
       };
     },
     computed: {},
     mounted(){
-      this.getList();
+      this.getLeftList();
+      this.getItemList()
+      this.getRightLst()
+      this.getRightItemList()
     },
     methods: {
-      getList(){
-        this.$service.ptItemClass.getAllClass().then(res => {
+      getLeftList(){
+        this.$service.ghsItemClass.getAllClass().then(res => {
           console.log(res)
+          this.leftClassList = res.list
+          this.ptClassName = res.list[0].name
+          this.ptClassId = res.list[0].id
         })
       },
+      getRightLst() {
+          this.$service.itemClass.getAllClass().then(res => {
+              console.log(res)
+              this.rightClassList = res.list
+              this.ptRightName = res.list[0].name
+              this.ptRightId = res.list[0].id
+          }).catch(err => {})
+      },
+      getItemList() {
+          let data = {
+              page: this.pageNum,
+              pageSize: 10,
+             name: this.ptClassName,
+             classId: this.ptClassId
+          }
+          this.$service.ptItem.list(data).then(res => {
+              console.log(res)
+              res.list.forEach(item => item.Uselect = false)
+              if(this.pageNum != 1) {
+                  this.ptClassList = this.ptClassList.concat(res.list)
+              } else {
+                  this.ptClassList = res.list
+              }
+              this.maxPage = res.moreData
+          }).catch(err => {})
+      },
+      getRightItemList() {
+          let data = {
+              page: this.pageNum1,
+              pageSize: 10,
+              classId: this.ptRightId
+          }
+          this.$service.item.list(data).then(res => {
+              console.log(res)
+              res.list.forEach(item => {item.select = true})
+              this.rightItemList = res.list
+              this.maxPage1 = res.moreData
+          }).catch(err => {})
+      },
       allSelectItem(e){
         console.log(e)
       },
       load () {
         this.count += 2
+      },
+      classTabChange(item,index) {
+          this.leftTabCurrent = index
+          console.log(item)
+          this.ptClassName = item.name
+          this.ptClassId = item.id
+          this.pageNum = 1
+          this.getItemList()
+      },
+      classIfyClick() {
+          this.pageNum++
+          console.log(this.pageNum, this.maxPage)
+          if(this.maxPage == 1) {
+              this.getItemList()
+          }
+      },
+      leftSelect(value, index) {
+          this.ptClassList[index].Uselect = !this.ptClassList[index].Uselect
+      },
+      rightSelect(item,index) {
+          this.rightItemList[index].Uselect = !this.rightItemList[index].Uselect
+      },
+      rightTabClick(item, index) {
+          this.rightTabCurrent = index
+          this.ptRightName = item.name
+          this.ptRightId = item.id
+          this.pageNum1 = 1
+          this.getRightItemList()
+      },
+      rightScroll() {
+          this.pageNum1++
+          console.log(this.pageNum1, this.maxPage1)
+          if(this.maxPage1 == 1) {
+              this.getRightItemList()
+          }
       }
     },
   };