Merge branch 'label' of https://gitee.com/three-make-money/temu-plugin into label

src/view/Home.vue

@@ -38,13 +38,13 @@
     <div class="admin-main">
       <el-scrollbar class="left">
         <el-menu
-            :default-active="activePath"
-            :collapse-transition="true"
-            unique-opened
-            background-color="#545c64"
-            router
-            text-color="#fff"
-            :collapse="isCollapse">
+          :default-active="activePath"
+          :collapse-transition="true"
+          unique-opened
+          background-color="#545c64"
+          router
+          text-color="#fff"
+          :collapse="isCollapse">
           <el-menu-item index="/welcome">
             <i class="el-icon-monitor"></i>
             <span slot="title">工作台</span>
@@ -64,7 +64,6 @@
             <el-menu-item index="/myUrgencyOrder">紧急备货单</el-menu-item>
             <el-menu-item index="/productLabel">商品条码管理</el-menu-item>
           </el-submenu>
-
           <el-submenu index="/copyProduct">
             <template slot="title">
               <i class="el-icon-goods"></i>
@@ -196,7 +195,10 @@
           <el-submenu index="/labelsTemplate" v-if="$store.state.userInfo.phone == '18571466720'">
             <template slot="title">
               <i class="el-icon-s-goods"></i>
-              <span slot="title">标签管理</span>
+              <div slot="title" style="display: inline-block;">
+                <span>标签管理</span>
+                <el-button type="text" style="margin-left: 72px; padding: 0;" @click.stop="openMember">开通</el-button>
+              </div>
             </template>
             <el-menu-item index="/labelsTemplate">模板管理</el-menu-item>
             <el-menu-item index="/labelsPrint">标签打印</el-menu-item>
@@ -212,18 +214,18 @@
       </div>
     </div>
     <el-dialog
-        title="激活充值"
-        :visible="$store.state.activeDlgShow"
-        :close-on-click-modal="false"
-        width="1200"
-        :before-close="handleClose">
+      title="激活充值"
+      :visible="$store.state.activeDlgShow"
+      :close-on-click-modal="false"
+      width="1200"
+      :before-close="handleClose">
       <ai-payment/>
     </el-dialog>
     <el-dialog
-        title="温馨提示"
-        :visible="$store.state.showSheinAlert"
-        :close-on-click-modal="false"
-        width="1200">
+      title="温馨提示"
+      :visible="$store.state.showSheinAlert"
+      :close-on-click-modal="false"
+      width="1200">
       <span style="font-size: large">1、检查“SHEIN商家后台”是否登录，如没登录，请先登录，之后再刷新助手<br></span>
       <span style="font-size: large">2、如果SHEIN商家后台已经登录，仍然弹出当前窗口，则需要SHEIN进行二次授权，二次授权可在菜单“商品管理->商品列表”，任意选择一个商品，在“库存”一栏，点击修改，在新打开的页面中可看到“正在鉴权”的字样，即可完成二次授权</span>
       <span slot="footer" class="dialog-footer">
@@ -231,231 +233,242 @@
       </span>
     </el-dialog>
     <el-dialog
-        title="温馨提示"
-        :visible="$store.state.showTemuAlert"
-        :close-on-click-modal="false"
-        width="1200">
+      title="温馨提示"
+      :visible="$store.state.showTemuAlert"
+      :close-on-click-modal="false"
+      width="1200">
       <span style="font-size: large">请先打开卖家中心“结算数据->售后管理”页面进行二次授权，<a target="_blank" style="text-decoration: underline" href="https://seller.kuajingmaihuo.com/main/aftersales/information">去打开</a><br></span>
       <span slot="footer" class="dialog-footer">
         <el-button @click="closeTemuAlert">关 闭</el-button>
       </span>
     </el-dialog>
-
     <div id="kefu" @click="gotoKefu">
       <label slot="reference" class="topBtn" title="联系客服"></label>
     </div>
+    <el-dialog
+      title="开通标签会员"
+      :close-on-click-modal="false"
+      width="1200">
+    </el-dialog>
+    <LablesMember ref="LablesMember"></LablesMember>
   </div>
 </template>
 
 <script>
-import {mapMutations, mapState} from 'vuex'
-import AiPayment from "@/components/AiPayment.vue";
-import {sendAliexpressAPIMessage, sendTemuSellerAgentMessage, sendGoodcangAPIMessage} from "@/api/chromeApi";
+  import {mapMutations, mapState} from 'vuex'
+  import AiPayment from "@/components/AiPayment.vue";
+  import LablesMember from '@/components/LablesMember'
+  import {sendAliexpressAPIMessage, sendGoodcangAPIMessage} from "@/api/chromeApi";
+
+  export default {
+    components: {AiPayment, LablesMember},
+    data() {
+      return {
+        isCollapse: false,
+        activePath: '/home',
+        form: {
+          mallId: this.$store.state.mallId,
+          mallName: this.$store.state.mallName,
+          code: ''
+        },
+        version: '',
+        vipType: ["体验会员", "月会员", "半年会员", "年会员", "多店通用年会员"]
+      }
+    },
+    computed: {
+      freeLogo: () => require("../assets/free.png"),
+      getStateInfo() {
+        if (this.$store.state.userInfo.flag == 0) {
+          return '未激活';
+        } else if (this.$store.state.userInfo.flag == 1) {
+          if (this.$store.state.userInfo.type != 4) {
+            return `(${this.$store.state.userInfo.mallName})` + this.vipType[this.$store.state.userInfo.type] + '(' + this.$store.state.userInfo.expireTime.substring(0, 10) + ')';
+          } else {
+            return this.vipType[this.$store.state.userInfo.type] + '(' + this.$store.state.userInfo.expireTime.substring(0, 10) + ')'
+          }
 
-export default {
-  components: {AiPayment},
-  data() {
-    return {
-      isCollapse: false,
-      activePath: '/home',
-      form: {
-        mallId: this.$store.state.mallId,
-        mallName: this.$store.state.mallName,
-        code: ''
-      },
-      version: '',
-      vipType: ["体验会员", "月会员", "半年会员", "年会员", "多店通用年会员"]
-    }
-  },
-  computed: {
-    freeLogo: () => require("../assets/free.png"),
-    getStateInfo() {
-      if (this.$store.state.userInfo.flag == 0) {
-        return '未激活';
-      } else if (this.$store.state.userInfo.flag == 1) {
-        if (this.$store.state.userInfo.type != 4) {
-          return `(${this.$store.state.userInfo.mallName})` + this.vipType[this.$store.state.userInfo.type] + '(' + this.$store.state.userInfo.expireTime.substring(0, 10) + ')';
         } else {
-          return this.vipType[this.$store.state.userInfo.type] + '(' + this.$store.state.userInfo.expireTime.substring(0, 10) + ')'
+          return '已过期';
         }
+      },
 
+      ...mapState(['mallName', 'mallList'])
+    },
+
+    watch: {
+      $route(v) {
+        if (v.meta && v.meta.activeMenu) {
+          this.activePath = v.meta.activeMenu
+        } else {
+          this.activePath = v.fullPath
+        }
+      }
+    },
+
+    created() {
+      const devVersion = require('../manifest.development.json').version
+      const prodVersion = require('../manifest.production.json').version
+      this.version = process.env.NODE_ENV === 'production' ? prodVersion : devVersion
+      if (this.$route.meta && this.$route.meta.activeMenu) {
+        this.activePath = this.$route.meta.activeMenu
       } else {
-        return '已过期';
+        this.activePath = this.$route.fullPath
       }
+      // this.testGoodcang()
     },
 
-    ...mapState(['mallName', 'mallList'])
-  },
+    methods: {
+      ...mapMutations(['setActiveDlgShow']),
+      handleClick(e) {
+        if (e === 'logout') {
+          this.$store.dispatch('SignOut', false)
+        } else if (e === 'pwd') {
+          this.$router.push('changePwd')
+        } else if (e === 'message') {
+          this.$router.push('message')
+        } else if (e === 'coin') {
+          this.$router.push('coinFlow')
+        }
+      },
 
-  watch: {
-    $route(v) {
-      if (v.meta && v.meta.activeMenu) {
-        this.activePath = v.meta.activeMenu
-      } else {
-        this.activePath = v.fullPath
-      }
-    }
-  },
+      openMember() {
+        this.$refs.LablesMember.show()
+      },
 
-  created() {
-    const devVersion = require('../manifest.development.json').version
-    const prodVersion = require('../manifest.production.json').version
-    this.version = process.env.NODE_ENV === 'production' ? prodVersion : devVersion
-    if (this.$route.meta && this.$route.meta.activeMenu) {
-      this.activePath = this.$route.meta.activeMenu
-    } else {
-      this.activePath = this.$route.fullPath
-    }
-    // this.testGoodcang()
-  },
-
-  methods: {
-    ...mapMutations(['setActiveDlgShow']),
-    handleClick(e) {
-      if (e === 'logout') {
-        this.$store.dispatch('SignOut', false)
-      } else if (e === 'pwd') {
-        this.$router.push('changePwd')
-      } else if (e === 'message') {
-        this.$router.push('message')
-      } else if (e === 'coin') {
-        this.$router.push('coinFlow')
-      }
-    },
-    handleClose() {
-      this.form.mallId = "";
-      this.form.mallName = "";
-      this.form.code = "";
-      this.setActiveDlgShow(false)
-    },
-    toActive() {
-      this.setActiveDlgShow(true)
-    },
-    getMessage(type) {
-      return `你使用的是“${this.vipType[type]}”兑换券，确定兑换？`;
-    },
-    active() {
-      this.$refs.form.validate((valid) => {
-        if (valid) {
-          this.$http.post(`/api/coupon/getDetail`, null, {
-            params: {
-              code: this.form.code
-            }
-          }).then(res => {
-            if (res.code == 0) {
-              let msg = this.getMessage(res.data.type);
-              this.$confirm(msg, '温馨提示', {
-                confirmButtonText: '确定',
-                cancelButtonText: '取消',
-                type: 'info'
-              }).then(() => {
-                this.$http.post(`/api/order/upgradeByCode`, null, {
-                  params: {
-                    ...this.form
-                  }
-                }).then(res => {
-                  if (res.code == 0) {
-                    this.$message.success('激活成功')
-                    this.$store.dispatch('getUserInfo')
-                    this.setActiveDlgShow(false)
-                  }
+      handleClose() {
+        this.form.mallId = "";
+        this.form.mallName = "";
+        this.form.code = "";
+        this.setActiveDlgShow(false)
+      },
+      toActive() {
+        this.setActiveDlgShow(true)
+      },
+      getMessage(type) {
+        return `你使用的是“${this.vipType[type]}”兑换券，确定兑换？`;
+      },
+      active() {
+        this.$refs.form.validate((valid) => {
+          if (valid) {
+            this.$http.post(`/api/coupon/getDetail`, null, {
+              params: {
+                code: this.form.code
+              }
+            }).then(res => {
+              if (res.code == 0) {
+                let msg = this.getMessage(res.data.type);
+                this.$confirm(msg, '温馨提示', {
+                  confirmButtonText: '确定',
+                  cancelButtonText: '取消',
+                  type: 'info'
+                }).then(() => {
+                  this.$http.post(`/api/order/upgradeByCode`, null, {
+                    params: {
+                      ...this.form
+                    }
+                  }).then(res => {
+                    if (res.code == 0) {
+                      this.$message.success('激活成功')
+                      this.$store.dispatch('getUserInfo')
+                      this.setActiveDlgShow(false)
+                    }
+                  })
                 })
-              })
-            }
-          });
+              }
+            });
 
-        }
-      })
-    },
-    sign() {
-      this.$http.post(`/api/malluser/sign`).then(res => {
-        if (res.code == 0) {
-          this.$message.success('签到成功')
-          this.$store.dispatch('getUserInfo')
-        }
-      })
-    },
-    async openFolder() {
-      console.log(22)
-      let fileList = []
-      const res = await window.showDirectoryPicker({})
-      const detalAction = async (obj) => {
-        if (obj.entries) {
-          const dirs = obj.entries()
-          for await (const entry of dirs) {
-            if (entry[1].entries) {
-              detalAction(entry[1])
-            } else {
-              fileList.push({
-                name: entry[0],
-                path: obj.name,
-                fileHandle: entry[1],
-                file: await entry[1].getFile()
-              })
+          }
+        })
+      },
+      sign() {
+        this.$http.post(`/api/malluser/sign`).then(res => {
+          if (res.code == 0) {
+            this.$message.success('签到成功')
+            this.$store.dispatch('getUserInfo')
+          }
+        })
+      },
+      async openFolder() {
+        console.log(22)
+        let fileList = []
+        const res = await window.showDirectoryPicker({})
+        const detalAction = async (obj) => {
+          if (obj.entries) {
+            const dirs = obj.entries()
+            for await (const entry of dirs) {
+              if (entry[1].entries) {
+                detalAction(entry[1])
+              } else {
+                fileList.push({
+                  name: entry[0],
+                  path: obj.name,
+                  fileHandle: entry[1],
+                  file: await entry[1].getFile()
+                })
+              }
             }
           }
         }
-      }
-      await detalAction(res);
-      console.log("--fileList--", fileList)
-    },
-    gotoKefu() {
-      window.open('https://work.weixin.qq.com/kfid/kfcaa4208f661131eba', '_blank')
-    },
-    closeSheinAlert() {
-      this.$store.commit('setSheinAlertShow', false)
-    },
-    closeTemuAlert() {
-      this.$store.commit('setTemuAlertShow', false)
-    },
-    getAliexpressGoodsList() {
-      let url = "https://seller-acs.aliexpress.com/h5/mtop.global.merchant.self.product.manager.render.list/1.0/?jsv=2.7.2&appKey=30267743&t=1713978403051&sign=ba2bda69b4a2695c7279d4bc05f51741&v=1.0&timeout=15000&H5Request=true&url=mtop.global.merchant.self.product.manager.render.list&__channel-id__=701301&api=mtop.global.merchant.self.product.manager.render.list&type=originaljson&dataType=json&valueType=original&x-i18n-regionID=AE"
-      url = url + "&data=" + encodeURIComponent(
-        JSON.stringify({
-          "channelId": "701301",
-          "jsonBody": JSON.stringify({
-            "tab": "online_product",
-            "sort": {},
-            "filter": {
-              "queryCategory": null,
-              "lowerPrice": null,
-              "upperPrice": null,
-              "status": "0",
-              "productId": null,
-              "pagination": {
-                "pageSize": 10,
-                "current": 3
+        await detalAction(res);
+        console.log("--fileList--", fileList)
+      },
+      gotoKefu() {
+        window.open('https://work.weixin.qq.com/kfid/kfcaa4208f661131eba', '_blank')
+      },
+      closeSheinAlert() {
+        this.$store.commit('setSheinAlertShow', false)
+      },
+      closeTemuAlert() {
+        this.$store.commit('setTemuAlertShow', false)
+      },
+      getAliexpressGoodsList() {
+        let url = "https://seller-acs.aliexpress.com/h5/mtop.global.merchant.self.product.manager.render.list/1.0/?jsv=2.7.2&appKey=30267743&t=1713978403051&sign=ba2bda69b4a2695c7279d4bc05f51741&v=1.0&timeout=15000&H5Request=true&url=mtop.global.merchant.self.product.manager.render.list&__channel-id__=701301&api=mtop.global.merchant.self.product.manager.render.list&type=originaljson&dataType=json&valueType=original&x-i18n-regionID=AE"
+        url = url + "&data=" + encodeURIComponent(
+          JSON.stringify({
+            "channelId": "701301",
+            "jsonBody": JSON.stringify({
+              "tab": "online_product",
+              "sort": {},
+              "filter": {
+                "queryCategory": null,
+                "lowerPrice": null,
+                "upperPrice": null,
+                "status": "0",
+                "productId": null,
+                "pagination": {
+                  "pageSize": 10,
+                  "current": 3
+                }
               }
-            }
-          }),
-          "from":"SELF",
-          "bizParam":"{\"version\":\"simple\"}"
+            }),
+            "from":"SELF",
+            "bizParam":"{\"version\":\"simple\"}"
+          })
+        )
+        sendAliexpressAPIMessage({
+          url: url
+        }).then(res => {
+          //console.log(res)
         })
-      )
-      sendAliexpressAPIMessage({
-        url: url
-      }).then(res => {
-        //console.log(res)
-      })
+      },
+      testGoodcang() {
+        sendGoodcangAPIMessage({
+          url: "/api/v1/product/list",
+          method: 'POST',
+          data: {
+            "page_index": 1,
+            "page_size": 20,
+            "product_status": 1
+          }
+        }).then(res => {
+          console.log(res)
+        })
+      }
     },
-    testGoodcang() {
-      sendGoodcangAPIMessage({
-        url: "/api/v1/product/list",
-        method: 'POST',
-        data: {
-          "page_index": 1,
-          "page_size": 20,
-          "product_status": 1
-        }
-      }).then(res => {
-        console.log(res)
-      })
+    mounted() {
+      // this.getAliexpressGoodsList()
     }
-  },
-  mounted() {
-    // this.getAliexpressGoodsList()
   }
-}
 </script>
 
 <style lang="scss" scoped>

src/view/lables/AddTemplate.vue

@@ -2,14 +2,16 @@
   <AiDetail class="add-label">
     <template #title>
       <ai-title title="添加模板" isShowBack :isShowBottomBorder="true" @onBackClick="cancel">
-        <template #rightBtn>
+        <template #center>
           <label>模板名称：</label>
-          <el-input placeholder="请输入模板名称" size="small" v-model="name" style="width: 200px; margin-right: 300px;"></el-input>
+          <el-input placeholder="请输入模板名称" size="small" v-model="name" style="width: 200px;"></el-input>
+        </template>
+        <template #rightBtn>
           <el-button @click="preview" size="small" type="danger">预览</el-button>
-          <el-button @click="savePdf" size="small" type="primary">下载pdf</el-button>
+          <!-- <el-button @click="savePdf" size="small" type="primary">下载pdf</el-button> -->
           <el-button @click="print" size="small">打印</el-button>
           <el-button @click="clearPaper" size="small" type="danger">清空纸张</el-button>
-          <el-button @click="saveTemplate" size="small" type="primary">保存</el-button>
+          <el-button @click="saveTemplate" size="small" type="primary" :loading="isLoading">保存</el-button>
         </template>
       </ai-title>
     </template>
@@ -17,7 +19,13 @@
       <ai-card title="标签模板" class="card" :hideTitle="true">
         <template #content>
           <div class="add-label__wrapper">
-            <Print ref="printRef" :template="template" :isPrint="false"></Print>
+            <Print
+              ref="printRef"
+              :template="template"
+              :printData="printData"
+              :isPrint="false"
+              :params="params">
+            </Print>
           </div>
         </template>
       </ai-card>
@@ -37,7 +45,44 @@
     data () {
       return {
         name: '',
-        template: template
+        template: {
+          "panels": [{
+            "index": 0,
+            "name": 1,
+            "height": 200,
+            "width": 200,
+            "paperHeader": 0,
+            "paperFooter": 547,
+            "printElements": [],
+            "paperNumberLeft": 500,
+            "paperNumberTop": 530,
+            "paperNumberDisabled": true,
+            "paperNumberContinue": true,
+            "fontFamily": "Microsoft YaHei",
+            "scale": 1,
+            "watermarkOptions": {}
+          }]
+        },
+        printData: {},
+        id: '',
+        info: {},
+        params: [],
+        isLoading: false
+      }
+    },
+
+    mounted() {
+      this.printData = {
+        labelCode: 96778555251,
+        productSkuId: 6606980005,
+        skuExtCode: 'AAA1100mWh-orange',
+        skuSpecName: '8pcs'
+      }
+
+      if (this.$route.query.id) {
+        this.id = this.$route.query.id
+
+        this.getInfo()
       }
     },
 
@@ -46,8 +91,22 @@
         this.$router.go(-1)
       },
 
+      getInfo () {
+        this.$http.post(`/api/template/detail?id=${this.$route.query.id}`).then(res => {
+          if (res.code === 0) {
+            this.info = res.data
+            this.name = res.data.name
+            this.params = JSON.parse(res.data.params)
+
+            this.$nextTick(() => {
+              this.template = JSON.parse(res.data.content)
+            })
+          }
+        })
+      },
+
       preview () {
-        this.$refs.printRef.getHtml()
+        this.$refs.printRef.preview()
       },
 
       savePdf () {
@@ -63,11 +122,28 @@
           return this.$message.error('模板名称不能为空')
         }
 
-        const json = this.$refs.printRef.exportJson()
-        console.log(json)
+        const data = this.$refs.printRef.save()
+        this.isLoading = true
+
+        const url = this.id ? `/api/template/modify` : `/api/template/addTemplate`
+        this.$http.post(url, {
+          name: this.name,
+          codes: data.html,
+          content: JSON.stringify(data.json),
+          params: data.params,
+          id: this.id || ''
+        }).then(res => {
+          if (res.code === 0) {
+            this.isLoading = false
+            this.$message.success('模板创建成功')
+            this.cancel()
+          } else {
+            this.isLoading = false
+          }
+        })
       },
 
-      print () {
+      print() {
         this.$refs.printRef.print()
       },
 

src/view/lables/Print.vue

@@ -1,5 +1,5 @@
 <template>
-  <ai-list class="Learning">
+  <ai-list class="Print-page">
     <ai-title
       slot="title"
       title="标签打印"
@@ -10,7 +10,7 @@
         <div class="left">
           <div class="search-item">
             <label>添加方式：</label>
-            <el-radio-group v-model="type" size="small" @change="onSearchRest">
+            <el-radio-group v-model="addType" size="small">
               <el-radio-button label="1">按备货单打印</el-radio-button>
               <el-radio-button label="2">按SKC打印</el-radio-button>
               <el-radio-button label="3">按SKU打印</el-radio-button>
@@ -34,47 +34,47 @@
         <div class="left">
           <div class="search-item" v-show="addType === '1'">
             <label>备货单：</label>
-            <el-button style="margin-left: 10px;" @click="onCateChange" size="small" :disabled="!search.mallId" :loading="isLoading">查询</el-button>
+            <el-button style="margin-left: 10px;" size="small" :disabled="!search.mallId" :loading="isLoading">查询</el-button>
+          </div>
+          <div class="search-item" v-show="addType === '2'">
+            <label>SKC：</label>
+            <el-input
+              v-model="search.productSkcId"
+              style="width: 250px"
+              size="small"
+              placeholder="多个查询请用户逗号分割"
+              clearable
+              suffix-icon="iconfont iconSearch">
+            </el-input>
+            <el-button style="margin-left: 10px;" @click="getList" size="small" :loading="isLoading">查询</el-button>
+          </div>
+          <div class="search-item" v-show="addType === '3'">
+            <label>SKU：</label>
+            <el-input
+              v-if="addType === '3'"
+              v-model="search.productSkuId"
+              style="width: 250px"
+              size="small"
+              clearable
+              placeholder="多个查询请用户逗号分割"
+              suffix-icon="iconfont iconSearch">
+            </el-input>
+            <el-button style="margin-left: 10px;" @click="getList" size="small" :loading="isLoading">查询</el-button>
           </div>
-        <div class="search-item" v-show="addType === '2'">
-          <label>SKC：</label>
-          <el-input
-            v-model="search.SKC"
-            style="width: 250px"
-            size="small"
-            placeholder="多个查询请用户逗号分割"
-            clearable
-            suffix-icon="iconfont iconSearch">
-          </el-input>
-          <el-button style="margin-left: 10px;" @click="getSkuList" size="small" :disabled="!search.mallId" :loading="isLoading">查询</el-button>
-        </div>
-        <div class="search-item" v-show="addType === '3'">
-          <label>SKU：</label>
-          <el-input
-            v-if="addType === '3'"
-            v-model="search.SKU"
-            style="width: 250px"
-            size="small"
-            clearable
-            placeholder="多个查询请用户逗号分割"
-            suffix-icon="iconfont iconSearch">
-          </el-input>
-          <el-button style="margin-left: 10px;" @click="getSkuList" size="small" :disabled="!search.mallId" :loading="isLoading">查询</el-button>
-        </div>
         </div>
       </div>
       <ai-table
-        :tableData="tableData"
+        :tableData="lableList"
         :col-configs="colConfigs"
-        :total="total"
-        :current.sync="search.current"
-        :size.sync="search.size"
         :isShowPagination="false"
-        @getList="getList">
+        :height="height"
+        @getList="() => {}"
+        @selection-change="handleSelectionChange"
+        :loading="isLoading">
         <el-table-column slot="options" label="操作" align="center" fixed="right" width="140px">
           <template v-slot="{ row }">
             <div class="table-options">
-              <el-button type="text">打印</el-button>
+              <el-button type="text" @click="toPrint(row)">打印</el-button>
               <el-button type="text" @click="toDetail(row.url)">详情</el-button>
             </div>
           </template>
@@ -87,6 +87,8 @@
 
 <script>
   import Print from '@/components/print/Print'
+  import template from '@/components/print/template'
+  import { sendChromeAPIMessage } from '@/api/chromeApi'
 
   export default {
     name: 'PrintPage',
@@ -98,35 +100,102 @@
     data () {
       return {
         colConfigs: [
-          { prop: 'title', label: '标题', align: 'left' },
-          { prop: 'createTime', label: '发布时间', align: 'center' },
+          { type: 'selection' },
+          { prop: 'mallName', label: '店铺名称', align: 'left' },
+          { prop: 'labelCode', label: '条码编码', align: 'center' },
+          { prop: 'productSkcId', label: 'SKC', align: 'center' },
+          { prop: 'productSkuId', label: 'SKU', align: 'center' },
+          { prop: 'skuExtCode', label: 'SKU货号',  align: 'center' },
+          { prop: 'skuSpecName', label: '次销售属性', align: 'center' }
         ],
-        tableData: [],
         search: {
           mallId: '',
-          SKC: '',
-          SKU: ''
+          productSkuId: '',
+          productSkcId: '',
+          page: 1,
+          size: -1
         },
-        cateList: [],
-        type: '1',
-        isLoading: false
+        addType: '1',
+        isLoading: false,
+        lableList: [],
+        height: 600,
+        skuChoosedList: []
       }
     },
 
-    created () {
-      this.getList()
+    computed: {
+      currMall () {
+        if (!this.$store.state.mallList.length) {
+          return {}
+        }
+
+        return this.$store.state.mallList.filter(v => v.mallId === this.search.mallId)[0]
+      }
+    },
+
+    mounted() {
+      this.$nextTick(() => {
+        this.height = document.querySelector('.ai-list__content--right').clientHeight - 140
+      })
     },
 
     methods: {
-      toPrint (template, printData) {
-        this.$refs.printData.print(template, printData)
+      toPrint(row) {
+        this.isLoading = true
+        this.$http.post(`/api/template/detail?id=${row.templateId}`).then(res => {
+          this.isLoading = false
+          const params = JSON.parse(res.data.params)
+          const getValue = v => params.filter(e => e.fieldValue === v)[0].fieldName
+          Object.keys(row).forEach(key => {
+            if (params.findIndex(v => v.fieldValue === key) > -1) {
+              row[getValue(key)] = row[key]
+            }
+          })
+
+          if (res.code === 0) {
+            this.$refs.printRef.toPrint(JSON.parse(res.data.content), row)
+          }
+        })
+      },
+
+      printAll() {
+        this.$refs.printRef.toPrint(template, this.skuChoosedList)
+      },
+
+      getSkuList () {
+        if (!this.search.mallId) {
+          return this.$message.error('请选择店铺')
+        }
       },
 
       getList () {
+        this.$http.post('/api/templateSku/getPage', null, {
+          params: this.search
+        }).then(res => {
+          if (res.code === 0) {
+            this.lableList = res.data.records
+          }
+        })
+      },
+
+      handleSelectionChange(e) {
+        this.skuChoosedList = e
       }
     }
   }
 </script>
 
 <style scoped lang="scss">
+  .Print-page {
+    .search-item__wrapper {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+
+      &>div {
+        display: flex;
+        align-items: center;
+      }
+    }
+  }
 </style>

src/view/lables/SkuManage.vue

@@ -11,8 +11,23 @@
       <ai-search-bar>
         <template #left>
           <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>
+          <el-upload
+            action
+            :limit="1"
+            :show-file-list="false"
+            accept=".xls,.xlsx"
+            :auto-upload="false"
+            :file-list="fileList"
+            :on-change="onExcelChange">
+            <el-button size="small" type="danger">Excel导入</el-button>
+          </el-upload>
+          <json-excel
+            :data="skuList"
+            :fields="jsonFields"
+            name="SKU列表.xls"
+            worksheet="SKU列表">
+            <el-button size="small" type="warning" :disabled="!skuList.length">Excel导出</el-button>
+          </json-excel>
         </template>
         <template #right>
         </template>
@@ -25,23 +40,24 @@
         :size.sync="search.size"
         style="margin-top: 8px;"
         @getList="getList"
-        @selection-change="handleSelectionChange">
-        <el-table-column slot="productName" width="300px" :show-overflow-tooltip='true' label="商品名称"  fixed="left">
-          <template slot-scope="scope">
-            <div>
-              <el-image :src="scope.row.mainImageUrl" style="width: 40px; height: 40px" class="image" :preview-src-list="[scope.row.mainImageUrl]" />
-              {{ scope.row.productName }}
-            </div>
-          </template>
+        @selection-change="handleSelectionChange"
+        v-loading="pageShow">
+        <el-table-column
+          v-for="(item, index) in relationList"
+          :key="index"
+          :prop="item.field"
+          :show-overflow-tooltip="true"
+          :label="item.name"
+          align="center">
         </el-table-column>
-        <el-table-column slot="options" label="操作" align="center" fixed="right" width="240px">
+        <!-- <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>
               <el-button type="text" @click="toDetail(row.url)">删除</el-button>
             </div>
           </template>
-        </el-table-column>
+        </el-table-column> -->
       </ai-table>
       <ai-dialog
         :visible.sync="isShow"
@@ -94,7 +110,6 @@
               v-model="skuReqParams.SKC"
               style="width: 250px"
               size="small"
-              v-throttle="() => {getSkuList()}"
               placeholder="多个查询请用户逗号分割"
               clearable
               @clear="getSkuList()"
@@ -109,7 +124,6 @@
               v-model="skuReqParams.SKU"
               style="width: 250px"
               size="small"
-              v-throttle="() => {getSkuList()}"
               placeholder="多个查询请用户逗号分割"
               clearable
               @clear="getSkuList()"
@@ -148,23 +162,17 @@
 
 <script>
   import { sendChromeAPIMessage } from '@/api/chromeApi'
+  import * as XLSX from 'xlsx'
+  import JsonExcel from 'vue-json-excel'
   export default {
     name: 'SkuManage',
 
+    components: {
+      JsonExcel
+    },
+
     data () {
       return {
-        colConfigs: [
-          { type: 'selection' },
-          // { slot: 'productName', label: '商品名称', width: '300px', align: 'left', fixed: 'left' },
-          // { prop: 'category', label: '分类', width: '140px', align: 'left', fixed: 'left' },
-          { prop: 'mallName', label: '店铺名称', align: 'left' },
-          { prop: 'labelCode', label: '条码编码', align: 'center' },
-          // { prop: 'productSkcId', label: 'SKC', align: 'left' },
-          { prop: 'productSkuId', label: 'SKU', align: 'center' },
-          // { prop: 'extCode', label: 'SKC货号', align: 'left' },
-          { prop: 'skuExtCode', label: 'SKU货号',  align: 'center' },
-          { prop: 'skuSpecName', label: '次销售属性', align: 'center' }
-        ],
         total: 0,
         search: {
           current: 1,
@@ -213,7 +221,11 @@
         },
         targetCatId: [],
         skuList: [],
-        chooseSkuList: []
+        chooseSkuList: [],
+        id: '',
+        fileList: [],
+        pageShow: false,
+        relationList: []
       }
     },
 
@@ -224,10 +236,45 @@
         }
 
         return this.$store.state.mallList.filter(v => v.mallId === this.lableSearch.mallId)[0]
+      },
+
+      colConfigs () {
+        const arr = this.isShow ? [] : this.relationList.map(v => {
+          return {
+            prop: v.field,
+            label: v.name,
+            align: 'center'
+          }
+        })
+
+        return [
+          { type: 'selection' },
+          { prop: 'mallName', label: '店铺名称', align: 'left' },
+          { prop: 'productName', label: '商品名称', align: 'center' },
+          { prop: 'labelCode', label: '条码编码', align: 'center' },
+          { prop: 'productSkcId', label: 'SKC', align: 'center' },
+          { prop: 'productSkuId', label: 'SKU', align: 'center' },
+          { prop: 'skuExtCode', label: 'SKU货号',  align: 'center' },
+          { prop: 'skuSpecName', label: '次销售属性', align: 'center' },
+          ...arr
+        ]
+      },
+
+      jsonFields () {
+        const obj = {}
+        this.colConfigs.filter(v => !!v.prop).forEach(v => {
+          obj[v.label] = v.prop
+        })
+
+        return {
+          ...obj
+        }
       }
     },
 
     created () {
+      this.id = this.$route.query.id || ''
+      this.getRelation()
       this.getList()
     },
 
@@ -236,6 +283,58 @@
         this.$router.push('/addLabelsTemplate')
       },
 
+      getRelation () {
+        this.$http.post(`/api/templateRelation/getRelation?templateId=${this.$route.query.id}`).then(res => {
+          if (res.code === 0) {
+            this.relationList = res.data
+
+            console.log(this.relationList)
+          }
+        })
+      },
+
+      readXLSX(file) {
+        return new Promise((resolve, reject) => {
+          const reader = new FileReader()
+
+          reader.readAsBinaryString(file)
+          reader.onload = evt => {
+            const data = evt.target.result
+            const workbook = XLSX.read(data, { type: 'binary' })
+            const ws = workbook.Sheets[workbook.SheetNames[0]]
+            const jsonData = XLSX.utils.sheet_to_json(ws)
+            resolve(jsonData)
+
+            this.fileList = []
+          }
+        })
+      },
+
+      onExcelChange (file) {
+        this.pageShow = true
+        this.readXLSX(file.raw).then(res => {
+          console.log(res)
+          this.$http.post(`/api/templateSku/updateBatchSku`, res.map(v => {
+            const result = {
+              templateId: this.id
+            }
+            Object.keys(this.jsonFields).forEach(item => {
+              result[this.jsonFields[item]] = v[item]
+            })
+
+            console.log(result)
+            return result
+          })).then(res => {
+            if (res.code === 0) {
+              this.$message.success('导入成功')
+              this.isShow = false
+              this.getList()
+            }
+            this.pageShow = false
+          })
+        })
+      },
+
       onSearchRest() {
         this.skuReqParams.SKC = ''
         this.skuReqParams.SKU = ''
@@ -324,6 +423,7 @@
                 mallId: this.lableSearch.mallId,
                 mallName: this.currMall.mallName,
                 productName: v.productName,
+                productSkcId: v.labelCodeVO.productSkcId,
                 productSkuId: v.labelCodeVO.productSkuId,
                 labelCode: v.labelCodeVO.labelCode,
                 skuExtCode: v.labelCodeVO.skuExtCode,
@@ -362,21 +462,31 @@
       },
 
       getList () {
-        this.$http.post('/api/learning/pluginPage', null, {
-          params: {
-            ...this.search
-          }
-        }).then(res => {
+        this.$http.post(`/api/templateSku/getPage?size=-1&templateId=${this.id}`).then(res => {
           if (res.code === 0) {
-            this.tableData = res.data.records
-            this.total = res.data.total
+            this.skuList = res.data.records
+            // this.total = res.data.total
           }
         })
       },
 
       onConfirm () {
-        this.skuList = this.chooseSkuList
-        this.isShow = false
+        if (!this.chooseSkuList.length) {
+          return this.$message.error('请选择SKU')
+        }
+
+        this.$http.post(`/api/templateSku/addBatchSku`, this.chooseSkuList.map(v => {
+          return {
+            ...v,
+            templateId: this.id
+          }
+        })).then(res => {
+          if (res.code === 0) {
+            this.$message.success('添加成功')
+            this.isShow = false
+            this.getList()
+          }
+        })
       }
     }
   }

src/view/lables/Template.vue

@@ -8,7 +8,7 @@
     <template slot="content">
       <ai-search-bar>
         <template #left>
-          <el-button type="primary" size="small" @click="toAdd">添加</el-button>
+          <el-button type="primary" size="small" @click="toAdd('')">添加</el-button>
         </template>
         <template #right>
         </template>
@@ -24,8 +24,8 @@
         <el-table-column slot="options" label="操作" align="center" fixed="right" width="220px">
           <template v-slot="{ row }">
             <div class="table-options">
-              <el-button type="text" @click="toAddSku(row.url)">添加SKU</el-button>
-              <el-button type="text" @click="toAdd(row.url)">编辑</el-button>
+              <el-button type="text" @click="toAddSku(row.id)">添加SKU</el-button>
+              <el-button type="text" @click="toAdd(row.id)">编辑</el-button>
               <el-button type="text" @click="toDetail(row.url)">删除</el-button>
             </div>
           </template>
@@ -37,7 +37,7 @@
 
 <script>
   export default {
-    name: 'Template',
+    name: 'PringTemplate',
 
     data () {
       return {
@@ -46,12 +46,7 @@
           { prop: 'count', label: '绑定SKU数量', align: 'center' },
           { prop: 'createTime', label: '创建时间', align: 'center' },
         ],
-        tableData: [
-          {
-            name: '电池',
-            count: 2
-          }
-        ],
+        tableData: [],
         total: 0,
         search: {
           current: 1,
@@ -61,28 +56,27 @@
     },
 
     created () {
-      // this.getList()
+      this.getList()
     },
 
     methods: {
-      toAdd () {
-        this.$router.push('/addLabelsTemplate')
+      toAdd (id = '') {
+        this.$router.push(`/addLabelsTemplate?id=${id}`)
       },
 
-      toAddSku () {
-        this.$router.push('/skuManage')
+      toAddSku (id) {
+        this.$router.push(`/skuManage?id=${id}`)
       },
 
       getList () {
-        console.log(this.tableData)
-        this.$http.post('/api/learning/pluginPage', null, {
+        this.$http.post('/api/template/getPage', null, {
           params: {
             ...this.search
           }
         }).then(res => {
           if (res.code === 0) {
-            // this.tableData = res.data.records
-            // this.total = res.data.total
+            this.tableData = res.data.records
+            this.total = res.data.total
           }
         })
       },