花材导入

ghs/src/views/item/import.vue

@@ -1,165 +1,21 @@
-<style lang="scss" scoped>
-.app-list-content {
-  min-width: 1000px;
-}
-.left-box {
-  width: 30%;
-  height: 100%;
-}
-.content-box {
-  width: 5%;
-  height: 100%;
-  .switchover-box {
-    div {
-      width: 50px;
-      height: 50px;
-      margin-top: 20px;
-      color: #797979;
-      border: 1px solid #dadada;
-      font-weight: 700;
-      font-size: 36px;
-      cursor: pointer; //小手
-    }
-  }
-}
-.right-box {
-  width: 65%;
-  height: 100%;
-}
-.title {
-  width: calc(100% - 2px);
-  height: 40px;
-  /*border: 1px solid #eee;*/
-  border: 1px solid #dadada;
-}
-.center-box {
-  margin-top: 20px;
-  height: calc(100% - 64px);
-  .class-list {
-    width: 30%;
-    height: 100%;
-    border: 1px solid #dadada;
-    overflow: scroll;
-    div {
-      height: 40px;
-      cursor: pointer; //小手
-      &.active {
-        color: #ffffff;
-        background: #00ccff;
-      }
-    }
-    & > .class_name {
-      background: #ccc;
-    }
-  }
-  .item-box {
-    position: relative;
-    width: 65%;
-    height: 100%;
-    border: 1px solid #dadada;
-    padding: 0 10px;
-    .item-seek-box {
-      height: 80px;
-      border-bottom: 1px solid #dadada;
-      input {
-        width: calc(100% - 60px);
-        padding: 0 10px;
-        height: 40px;
-        border: none;
-        background: #f1f2f6;
-      }
-      .item-seek-btn {
-        width: 100px;
-        height: 40px;
-        color: #ffffff;
-        background: #169bd5;
-        cursor: pointer; //小手
-      }
-    }
-    .infinite-list-title {
-      height: 40px;
-    }
-    .infinite-list {
-      height: calc(100% - 40px - 80px);
-      .infinite-list-item {
-        height: 60px;
-        cursor: pointer; //小手
-        span {
-          margin: 0 10px;
-        }
-        img {
-          width: 50px;
-          height: 50px;
-          border-radius:5px;
-        }
-      }
-    }
-    .item-menu-box {
-      position: absolute;
-      left: 0;
-      bottom: 0;
-      width: calc(100% - 20px);
-      height: 40px;
-      padding: 0 10px;
-      background: #f7f7f7;
-      border-top: 1px solid #dadada;
-    }
-  }
-  .unSelect {
-    color: #b3b3b3;
-  }
-  .select {
-    color: #169bd5;
-  }
-  .disbale {
-    color: #eee;
-    cursor: not-allowed;
-  }
-}
-</style>
 <template>
   <div class="flex-center-between app-list-content">
     <div class="left-box">
       <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, index) in leftClassList"
-            :key="index"
-            @click="classTabChange(res,index)"
-            :class="{'class_name': leftTabCurrent == index}"
-          >{{res.name}}</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="请输入汉字拼音首字母搜索" v-model="keyword" @keyup.enter="search">
             <div class="flex-center-center item-seek-btn" @click="search">搜索</div>
           </div>
-          <ul
-            class="infinite-list"
-            v-infinite-scroll="classIfyClick"
-            style="overflow:auto"
-            :infinite-scroll-delay="100"
-            :infinite-scroll-distance="300"
-          >
-            <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 == 2"
-              ></span>
-              <span
-                class="el-icon-success"
-                :class="value.Uselect ? 'select' : 'unSelect'"
-                v-else
-              ></span>
+          <ul class="infinite-list" v-infinite-scroll="classIfyClick" style="overflow:auto" :infinite-scroll-delay="100" :infinite-scroll-distance="300" >
+            <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 == 2" ></span>
+              <span class="el-icon-success" :class="value.Uselect ? 'select' : 'unSelect'" v-else ></span>
               <span style="width:30px;">{{ index + 1 }}</span>
-              
               <el-popover placement="right" width="200" trigger="hover">
                 <div style="width:200px;height:200px;">
                   <img style="width:100%;height:100%;object-fit: cover;" :src="value.bigCover" />
@@ -201,88 +57,35 @@
             <div style="width: 100px;text-align: center">售价</div>
             <div style="width: 100px;text-align: center">库存预警</div>
           </div>
-          <ul
-            class="infinite-list"
-            v-infinite-scroll="rightcell"
-            style="height: calc(100% - 80px);overflow:auto"
-            :infinite-scroll-delay="100"
-            :infinite-scroll-distance="300"
-          >
-            <li
-              v-for="(item, index) in rightItemList"
-              class="flex-center infinite-list-item"
-              :key="index"
-              @click="rightSelect(item, index)"
-            >
+          <ul class="infinite-list" v-infinite-scroll="rightcell" style="height: calc(100% - 80px);overflow:auto" :infinite-scroll-delay="100" :infinite-scroll-distance="300" >
+            <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="item.Uselect ? 'select' : 'unSelect'"
-                ></span>
+                <span class="el-icon-success disbale" v-if="item.select" ></span>
+                <span class="el-icon-success" v-else :class="item.Uselect ? 'select' : 'unSelect'" ></span>
               </div>
               <div style="width: 70px;text-align: center">
-                <img
-                  :src="item.cover"
-                  alt=""
-                  style="margin:0 auto;"
-                >
+                <img :src="item.cover" alt="" style="margin:0 auto;" >
               </div>
               <div style="width: 120px;text-align: center">
-                <el-input
-                  style="width: 120px;"
-                  v-model="item.uname"
-                  placeholder="请输入"
-                  :disabled="item.select"
-                  @click.stop=""
-                ></el-input>
+                <el-input style="width: 120px;" v-model="item.uname" placeholder="请输入" :disabled="item.select" @click.stop="" ></el-input>
               </div>
               <div style="width: 100px;text-align: center">
-                <el-input
-                  style="width: 80px"
-                  v-model="item.price"
-                  placeholder="请输入"
-                  :disabled="item.select"
-                  @click.stop=""
-                ></el-input>
-
+                <el-input style="width: 80px" v-model="item.price" placeholder="请输入" :disabled="item.select" @click.stop="" ></el-input>
               </div>
               <div style="width: 100px;text-align: center">
-                <el-input
-                  style="width: 80px"
-                  v-model="item.stockWarning"
-                  placeholder="请输入"
-                  :disabled="item.select"
-                  @click.stop=""
-                ></el-input>
-
+                <el-input style="width: 80px" v-model="item.stockWarning" placeholder="请输入" :disabled="item.select" @click.stop="" ></el-input>
               </div>
             </li>
           </ul>
           <div class="flex-center item-menu-box">
-            <el-checkbox
-              @change="allSelectItemRight"
-              v-model="checkedAllRight"
-            >全选</el-checkbox>
-            <div
-              class="flex-center-center"
+            <el-checkbox @change="allSelectItemRight" v-model="checkedAllRight" >全选</el-checkbox>
+            <div class="flex-center-center"
               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>
+              @click="saveBtn" >提交</div>
           </div>
         </div>
         <div class="class-list">
-          <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 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>
@@ -290,7 +93,6 @@
 </template>
 <script>
 import { mapGetters } from 'vuex';
-
 export default {
   name: 'item_add',
   components: {},
@@ -625,4 +427,122 @@ export default {
   },
 };
 </script>
-
+<style lang="scss" scoped>
+.app-list-content {
+  min-width: 1000px;
+}
+.left-box {
+  width: 30%;
+  height: 100%;
+}
+.content-box {
+  width: 5%;
+  height: 100%;
+  .switchover-box {
+    div {
+      width: 50px;
+      height: 50px;
+      margin-top: 20px;
+      color: #797979;
+      border: 1px solid #dadada;
+      font-weight: 700;
+      font-size: 36px;
+      cursor: pointer; //小手
+    }
+  }
+}
+.right-box {
+  width: 65%;
+  height: 100%;
+}
+.title {
+  width: calc(100% - 2px);
+  height: 40px;
+  /*border: 1px solid #eee;*/
+  border: 1px solid #dadada;
+}
+.center-box {
+  margin-top: 20px;
+  height: calc(100% - 64px);
+  .class-list {
+    width: 30%;
+    height: 100%;
+    border: 1px solid #dadada;
+    overflow: scroll;
+    div {
+      height: 40px;
+      cursor: pointer; //小手
+      &.active {
+        color: #ffffff;
+        background: #00ccff;
+      }
+    }
+    & > .class_name {
+      background: #ccc;
+    }
+  }
+  .item-box {
+    position: relative;
+    width: 65%;
+    height: 100%;
+    border: 1px solid #dadada;
+    padding: 0 10px;
+    .item-seek-box {
+      height: 80px;
+      border-bottom: 1px solid #dadada;
+      input {
+        width: calc(100% - 60px);
+        padding: 0 10px;
+        height: 40px;
+        border: none;
+        background: #f1f2f6;
+      }
+      .item-seek-btn {
+        width: 100px;
+        height: 40px;
+        color: #ffffff;
+        background: #169bd5;
+        cursor: pointer; //小手
+      }
+    }
+    .infinite-list-title {
+      height: 40px;
+    }
+    .infinite-list {
+      height: calc(100% - 40px - 80px);
+      .infinite-list-item {
+        height: 60px;
+        cursor: pointer; //小手
+        span {
+          margin: 0 10px;
+        }
+        img {
+          width: 50px;
+          height: 50px;
+          border-radius:5px;
+        }
+      }
+    }
+    .item-menu-box {
+      position: absolute;
+      left: 0;
+      bottom: 0;
+      width: calc(100% - 20px);
+      height: 40px;
+      padding: 0 10px;
+      background: #f7f7f7;
+      border-top: 1px solid #dadada;
+    }
+  }
+  .unSelect {
+    color: #b3b3b3;
+  }
+  .select {
+    color: #169bd5;
+  }
+  .disbale {
+    color: #eee;
+    cursor: not-allowed;
+  }
+}
+</style>