【新增】打印组件

src/view/lables/SkuManage.vue

@@ -10,13 +10,15 @@
     <template slot="content">
       <ai-search-bar>
         <template #left>
-          <el-button type="primary" size="small" @click="isShow = true">添加</el-button>
+          <el-button type="primary" size="small" @click="chooseSkuList = [], isShow = true">添加</el-button>
+          <el-button type="warning" size="small" @click="toAdd(row.url)">导入</el-button>
+          <el-button type="danger" size="small" @click="toAdd(row.url)">导出</el-button>
         </template>
         <template #right>
         </template>
       </ai-search-bar>
       <ai-table
-        :tableData="tableData"
+        :tableData="skuList"
         :col-configs="colConfigs"
         :total="total"
         :current.sync="search.current"
@@ -32,7 +34,7 @@
             </div>
           </template>
         </el-table-column>
-        <el-table-column slot="options" label="操作" align="center" fixed="right" width="140px">
+        <el-table-column slot="options" label="操作" align="center" fixed="right" width="240px">
           <template v-slot="{ row }">
             <div class="table-options">
               <el-button type="text" @click="toAdd(row.url)">编辑</el-button>
@@ -58,7 +60,7 @@
             </div>
             <div class="search-item">
               <label>店铺：</label>
-              <el-select v-model="skuSearch.mallId" placeholder="请选择店铺" size="small">
+              <el-select v-model="lableSearch.mallId" placeholder="请选择店铺" size="small">
                 <el-option
                   v-for="item in $store.state.mallList"
                   :key="item.mallId"
@@ -84,7 +86,7 @@
                 collapse-tags
                 clearable>
               </el-cascader>
-              <el-button style="margin-left: 10px;" @click="onCateChange" size="small" :disabled="!skuSearch.mallId" :loading="isLoading">查询</el-button>
+              <el-button style="margin-left: 10px;" @click="onCateChange" size="small" :disabled="!lableSearch.mallId" :loading="isLoading">查询</el-button>
             </div>
           <div class="search-item" v-show="addType === '2'">
             <label>SKC：</label>
@@ -98,7 +100,7 @@
               @clear="getSkuList()"
               suffix-icon="iconfont iconSearch">
             </el-input>
-            <el-button style="margin-left: 10px;" @click="getSkuList" size="small" :disabled="!skuSearch.mallId" :loading="isLoading">查询</el-button>
+            <el-button style="margin-left: 10px;" @click="getSkuList" size="small" :disabled="!lableSearch.mallId" :loading="isLoading">查询</el-button>
           </div>
           <div class="search-item" v-show="addType === '3'">
             <label>SKU：</label>
@@ -113,22 +115,23 @@
               @clear="getSkuList()"
               suffix-icon="iconfont iconSearch">
             </el-input>
-            <el-button style="margin-left: 10px;" @click="getSkuList" size="small" :disabled="!skuSearch.mallId" :loading="isLoading">查询</el-button>
+            <el-button style="margin-left: 10px;" @click="getSkuList" size="small" :disabled="!lableSearch.mallId" :loading="isLoading">查询</el-button>
           </div>
           </div>
         </div>
         <ai-table
           height="370"
-          :tableData="skuList"
+          :tableData="lableList"
           :col-configs="colConfigs"
-          :total="skuTotal"
-          :current.sync="skuSearch.current"
-          :size.sync="skuSearch.size"
+          :total="lableTotal"
+          :current.sync="lableSearch.current"
+          :size.sync="lableSearch.size"
           style="margin-top: 8px;"
-          @getList="getSkuList"
           :pageSizes="[10, 20, 50, 100, 500, 1000]"
           v-loading="isLoading"
-          :isShowPagination="false">
+          :isShowPagination="false"
+          @getList="() => {}"
+          @selection-change="handleSelectionChange">
           <el-table-column slot="productName" width="300px" :show-overflow-tooltip="true" label="商品名称"  fixed="left">
             <template slot-scope="scope">
               <div>
@@ -162,19 +165,18 @@
           { prop: 'skuExtCode', label: 'SKU货号',  align: 'center' },
           { prop: 'skuSpecName', label: '次销售属性', align: 'center' }
         ],
-        tableData: [],
         total: 0,
         search: {
           current: 1,
           size: 100
         },
-        skuSearch: {
+        lableSearch: {
           current: 1,
           size: 100,
           mallId: ''
         },
-        skuTotal: 0,
-        skuList: [],
+        lableTotal: 0,
+        lableList: [],
         isShow: false,
         skuReqParams: {
           page: 1,
@@ -209,7 +211,9 @@
             })
           }
         },
-        targetCatId: []
+        targetCatId: [],
+        skuList: [],
+        chooseSkuList: []
       }
     },
 
@@ -219,7 +223,7 @@
           return {}
         }
 
-        return this.$store.state.mallList.filter(v => v.mallId === this.skuSearch.mallId)[0]
+        return this.$store.state.mallList.filter(v => v.mallId === this.lableSearch.mallId)[0]
       }
     },
 
@@ -239,6 +243,7 @@
 
       handleSelectionChange(e) {
         console.log(e)
+        this.chooseSkuList = e
       },
 
       getSKCList(catIds, page) {
@@ -246,7 +251,7 @@
           sendChromeAPIMessage({
             url: 'bg-visage-mms/product/skc/pageQuery',
             needMallId: true,
-            mallId: this.skuSearch.mallId,
+            mallId: this.lableSearch.mallId,
             anti: true,
             data: {
               page: 1,
@@ -269,35 +274,42 @@
       },
 
       async onCateChange() {
-        let page = 1
-        let list = []
-        let isHasNext = true
-        this.isLoading = true
-        while (isHasNext) {
-          const result = await this.getSKCList([].concat(this.targetCatId.flat()), page)
-          page = page + 1
-          isHasNext = result.isHasNext ? true : false
-          list.push(...result.list)
+        this.$userCheck(this.lableSearch.mallId).then(async () => {
+          let page = 1
+          let list = []
+          let isHasNext = true
+          this.lableList = []
+          this.isLoading = true
+          while (isHasNext) {
+            const result = await this.getSKCList([].concat(this.targetCatId.flat()), page)
+            page = page + 1
+            isHasNext = result.isHasNext ? true : false
+            list.push(...result.list)
 
-          await this.$sleepSync(5000)
-        }
+            await this.$sleepSync(5000)
+          }
 
-        const skcList = [...new Set(list)]
-        const len = Math.ceil(skcList.length / 100)
-        for (let i = 0; i < len; i++) {
-          this.skuReqParams.page = 1
-          this.skuReqParams.SKC = [...new Set(list)].slice(i * 100, i * 100 + 100).join(',')
-          await this.requestSKUList()
-          await this.$sleepSync(2000)
-        }
+          const skcList = [...new Set(list)]
+          const len = Math.ceil(skcList.length / 100)
+          for (let i = 0; i < len; i++) {
+            this.skuReqParams.page = 1
+            this.skuReqParams.SKC = [...new Set(list)].slice(i * 100, i * 100 + 100).join(',')
+            await this.requestSKUList(true)
+            await this.$sleepSync(2000)
+          }
+
+          console.log(111)
+          this.isLoading = false
+        }).catch(() => {
+          this.lableSearch.mallId = ''
+        })
       },
 
-      requestSKUList() {
-        this.isLoading = true
+      requestSKUList(flag) {
         return sendChromeAPIMessage({
           url: 'bg-visage-mms/labelcode/pageQuery',
           needMallId: true,
-          mallId: this.skuSearch.mallId,
+          mallId: this.lableSearch.mallId,
           anti: true,
           data: {
             page: this.skuReqParams.page,
@@ -309,7 +321,7 @@
           if (res.errorCode == 1000000) {
             const list = res.result.pageItems.map(v => {
               return {
-                mallId: this.skuSearch.mallId,
+                mallId: this.lableSearch.mallId,
                 mallName: this.currMall.mallName,
                 productName: v.productName,
                 productSkuId: v.labelCodeVO.productSkuId,
@@ -320,33 +332,32 @@
                 }).join(',')
               }
             })
-            this.skuTotal = res.result.total
-            this.skuList.push(...list)
+            this.lableTotal = res.result.total
+            this.lableList.push(...list)
 
-            if (res.result.total > this.skuList.length) {
+            if (res.result.total > this.lableList.length) {
               this.skuReqParams.page++
               await this.$sleepSync(5000)
               await this.requestSKUList()
             } else {
-              this.isLoading = false
+              !flag && (this.isLoading = false)
             }
           }
         })
       },
 
       getSkuList () {
-        if (!this.skuSearch.mallId) {
+        if (!this.lableSearch.mallId) {
           return this.$message.error('请选择店铺')
         }
 
-        this.$userCheck(this.skuSearch.mallId).then(() => {
-          this.skuList = []
+        this.$userCheck(this.lableSearch.mallId).then(() => {
+          this.lableList = []
           this.skuReqParams.page = 1
           this.isLoading = true
-
           this.requestSKUList()
         }).catch(() => {
-          this.skuSearch.mallId = ''
+          this.lableSearch.mallId = ''
         })
       },
 
@@ -364,7 +375,8 @@
       },
 
       onConfirm () {
-
+        this.skuList = this.chooseSkuList
+        this.isShow = false
       }
     }
   }