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

public/css/print-lock.css

@@ -373,10 +373,11 @@ table.hiprint-printElement-tableTarget {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  width: 93%;
+  width: 94%;
+  font-weight: 700;
 }
 
 .temuBarCode-middle {
-  width: 85%;
+  width: 88%;
   height: 60%;
 }

public/index.html

@@ -34,11 +34,12 @@
       display: flex;
       align-items: center;
       justify-content: space-between;
-      width: 93%;
+      width: 94%;
+      font-weight: 700;
     }
 
     .temuBarCode-middle {
-      width: 85%;
+      width: 88%;
       height: 60%;
     }
   </style>

src/assets/css/index.scss

@@ -37,6 +37,7 @@ html {
 
 body {
   margin: 0;
+  overflow: hidden;
 }
 
 h1 {
@@ -351,7 +352,7 @@ img {
 
 .fade-enter-active,
 .fade-leave-active {
-  transition: opacity .3s ease-in-out;
+  transition: opacity .2s ease-in-out;
 }
 
 .fade-enter,
@@ -545,3 +546,34 @@ img {
   display: flex;
   justify-content: center;
 }
+
+
+.print-images {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  width: 420px;
+  max-height: 400px;
+  padding: 0 10px;
+  overflow-y: auto;
+
+  img {
+    width: 180px;
+    height: 80px;
+    margin-bottom: 10px;
+    cursor: pointer;
+    object-fit: contain;
+  }
+
+  p {
+    width: 100%;
+    line-height: 1.3;
+    margin-bottom: 10px;
+    font-size: 14px;
+    font-weight: 600;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    cursor: pointer;
+  }
+}

src/components/AiTitle.vue

@@ -7,6 +7,9 @@
           <h2>{{ title }}</h2>
           <p>{{ tips }}</p>
         </div>
+        <div class="ailist-title__middle">
+          <slot name="center"/>
+        </div>
         <div class="ailist-title__right">
           <div class="aititle-right__btns">
             <slot name="rightBtn"/>
@@ -75,6 +78,11 @@
       justify-content: space-between;
       height: 48px;
 
+      .ailist-title__middle {
+        display: flex;
+        align-items: center;
+      }
+
       .ailist-title__left {
         display: flex;
         align-items: center;

src/components/LablesMember.vue

@@ -0,0 +1,342 @@
+<template>
+  <transition name="fade">
+    <div class="LablesMember" v-if="isShow">
+      <div class="mask"></div>
+      <div class="LablesMember-wrapper">
+        <i class="el-icon-close" @click="hide"></i>
+        <div class="top">
+          <img src="../assets/images/avatar.png" />
+          <div class="top-right">
+            <div class="top-user">
+              <h2>用户：嫣然</h2>
+              <span>正式版</span>
+            </div>
+            <p>开通SVIP，享黑胶VIP、数字专辑、有声书等特权</p>
+          </div>
+        </div>
+        <div class="middle">
+          <div class="left">
+            <div class="tab">
+              <div @click="tabIndex = 0" :class="[tabIndex === 0 ? 'active' : '']">
+                <span>VIP</span>
+              </div>
+              <div @click="tabIndex = 1" :class="[tabIndex === 1 ? 'active' : '']">
+                <span>SVIP</span>
+              </div>
+              <div @click="tabIndex = 2" :class="[tabIndex === 2 ? 'active' : '']">
+                <span>超级VIP</span>
+              </div>
+            </div>
+            <div class="tab-content"
+              :class="[tabIndex === index ? 'active' : '']"
+              v-for="(item, index) in 3"
+              :key="index">
+              <div
+                class="tab-content__item"
+                :class="[currIndex === i ? 'active' : '']"
+                v-for="(price, i) in 4"
+                :key="i"
+                @click="currIndex = i">
+                <h3>12个月</h3>
+                <div class="price">
+                  <i>¥</i>
+                  <span>88</span>
+                </div>
+                <div class="original-price">
+                  <i>¥</i>
+                  <span>88</span>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="right">
+            <div class="right-price">
+              <i>¥</i>
+              <span class="price">88</span>
+            </div>
+            <div class="code">
+              <img src="../assets/code.png" />
+            </div>
+            <div class="paytype">
+              <svg width="13" height="13" viewBox="0 0 13 13" xmlns="http://www.w3.org/2000/svg">
+                <path d="M12.11 0H.89A.89.89 0 0 0 0 .89v11.22c0 .491.399.89.89.89h11.22a.89.89 0 0 0 .89-.89V.89a.89.89 0 0 0-.89-.89zM6.5 10.65a5.592 5.592 0 0 1-1.848-.311c-.364.241-.975.639-1.215.75-.352.162-.25-.188-.25-.188L3.395 9.7C2.24 8.895 1.499 7.654 1.499 6.26c0-2.426 2.239-4.392 5-4.392 1.693 0 3.188.74 4.093 1.869l-4.905 2.27s-.4.152-.75-.062c-.35-.213-.813-.564-.813-.564s-.538-.458-.25.376l.751 1.756s.089.524.687.189c.468-.262 4.103-2.454 5.666-3.397a3.94 3.94 0 0 1 .523 1.954c0 2.425-2.239 4.391-5.001 4.391z" fill="#09BB07" fill-rule="nonzero"></path>
+              </svg>
+              <span>微信支付</span>
+            </div>
+            <div class="pay-btn">
+              <el-button round size="mini" style="margin-right: 10px;" @click="isShow = false">取消支付</el-button>
+              <el-button round size="mini" type="warning">我已支付</el-button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        isShow: false,
+        tabIndex: 0,
+        currIndex: 0
+      }
+    },
+
+    methods: {
+      show () {
+        this.isShow = true
+      },
+
+      hide () {
+        this.isShow = false
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .LablesMember {
+    position: fixed;
+    left: 0;
+    top: 0;
+    z-index: 1111;
+    width: 100%;
+    height: 100%;
+
+    .mask {
+      position: absolute;
+      left: 0;
+      top: 0;
+      z-index: 1;
+      width: 100%;
+      height: 100%;
+      background: rgba($color: #000000, $alpha: 0.8);
+    }
+
+    .LablesMember-wrapper {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      z-index: 11;
+      width: 900px;
+      padding: 40px 40px;
+      transform: translate(-50%, -50%);
+      border-radius: 12px;
+      overflow: hidden;
+      background: linear-gradient(41deg, #ffebd3, #fff8e3 61%, #fae2c4 99%);
+
+      .top {
+        display: flex;
+        align-items: center;
+        margin-bottom: 30px;
+
+        img {
+          width: 40px;
+          height: 40px;
+          margin-right: 10px;
+        }
+
+
+        p {
+          color: #632e2e;
+          opacity: 0.8;
+        }
+
+        .top-user {
+          display: flex;
+          align-items: center;
+          margin-bottom: 10px;
+
+          h2 {
+            margin-right: 6px;
+            font-size: 16px;
+            color: #333;
+          }
+
+          span {
+            font-size: 12px;
+            color: #666;
+          }
+        }
+      }
+
+      .el-icon-close {
+        position: absolute;
+        top: 12px;
+        right: 12px;
+        z-index: 11;
+        font-size: 32px;
+        color: #333;
+        cursor: pointer;
+        transform-origin: center center;
+
+        &:hover {
+          opacity: 0.6;
+          // transform: translate(50%, -50%) rotate(180deg);
+        }
+      }
+
+      .middle {
+        display: flex;
+
+        .left {
+          flex: 1;
+          padding: 0 0;
+          border-radius: 20px;
+          overflow: hidden;
+          background-color: #fff;
+          box-shadow: 0 0 20px 0 hsla(0, 39%, 56%, .1), 0 0 16px 0 rgba(0, 0, 0, .08);
+
+          .tab {
+            display: flex;
+            align-items: center;
+            height: 50px;
+            margin-bottom: 40px;
+            background: #fff3ee;
+
+            div {
+              position: relative;
+              flex: 1;
+              height: 50px;
+              line-height: 50px;
+              text-align: center;
+              font-size: 22px;
+              font-weight: 600;
+              cursor: pointer;
+              color: #b69593;
+
+              span {
+                position: relative;
+                z-index: 2;
+              }
+
+              &.active {
+                color: #6f3333;
+
+                &::after {
+                  position: absolute;
+                  left: 0;
+                  top: 0;
+                  z-index: 1;
+                  width: 100%;
+                  height: 100%;
+                  background: url(../assets/tab_middle.png) no-repeat center;
+                  background-size: contain;
+                  content: '';
+                }
+              }
+            }
+          }
+
+          .tab-content {
+            display: none;
+            align-items: center;
+            padding: 0 20px;
+
+            &.active {
+              display: flex;
+            }
+
+            &__item {
+              display: flex;
+              align-items: center;
+              flex-direction: column;
+              width: 140px;
+              height: 190px;
+              margin-right: 14px;
+              padding-top: 40px;
+              background-color: #fff;
+              border-radius: 10px;
+              cursor: pointer;
+              border: 1px solid rgba(0, 0, 0, .08);
+
+              &.active {
+                border: 1px solid #ff7548;
+                background: linear-gradient(33deg, #ffd1c5 -10%, #ffd1c5 21%, #ffe8e5 85%);
+              }
+
+              &:last-child {
+                margin-right: 0;
+              }
+
+              h3 {
+                margin-bottom: 20px;
+                font-size: 15px;
+                font-weight: 600;
+              }
+
+              .original-price {
+                display: flex;
+                align-items: center;
+                font-size: 12px;
+                color: #888;
+                text-decoration: line-through;
+              }
+
+              .price {
+                display: flex;
+                align-items: baseline;
+                margin-bottom: 6px;
+                color: #f13d3d;
+                font-size: 16px;
+
+                span {
+                  font-weight: 700;
+                  font-size: 36px;
+                }
+              }
+            }
+          }
+        }
+
+        .right {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          margin-left: 40px;
+          padding: 20px 0 20px 0;
+
+          .paytype {
+            display: flex;
+            align-items: center;
+
+            span {
+              margin-left: 8px;
+              font-size: 14px;
+              color: #666;
+            }
+          }
+
+          .pay-btn {
+            display: flex;
+            align-items: center;
+            margin-top: 40px;
+          }
+
+          .right-price {
+            display: flex;
+            align-items: baseline;
+            margin-bottom: 16px;
+            color: #f13d3d;
+            font-size: 18px;
+            font-weight: 600;
+
+            span {
+              margin-left: 4px;
+              font-size: 30px;
+              font-weight: 900;
+            }
+          }
+
+          .code img {
+            width: 150px;
+            height: 150px;
+            margin: 14px 0;
+          }
+        }
+      }
+    }
+  }
+</style>

src/components/print/Print.vue

@@ -17,10 +17,6 @@
               <i class="iconfont">&#xea3f;</i>
               <span>表格</span>
             </div>
-            <div class="ep-draggable-item item" tid="defaultModule.html">
-              <i class="iconfont">&#xea3f;</i>
-              <span>html</span>
-            </div>
           </div>
           <div class="title">辅助元素</div>
           <div class="left-item__wrapper">
@@ -44,6 +40,47 @@
           <div class="title">常用元素</div>
           <div class="left-item__wrapper" id="custom-provider">
           </div>
+          <div class="title">
+            <span>素材</span>
+          </div>
+          <div class="left-item__wrapper">
+            <el-popover
+              title="图片素材(点击添加)"
+              trigger="hover">
+              <div
+                class="item"
+                slot="reference"
+                style="cursor: pointer;">
+                <div>图片素材</div>
+              </div>
+              <div class="print-images">
+                <img
+                  :src="item.imgUrl"
+                  v-for="(item, index) in images"
+                  :key="index"
+                  :title="item.remark"
+                  @click="addImage(item.imgUrl)" />
+              </div>
+            </el-popover>
+            <el-popover
+              title="图片素材(点击添加)"
+              trigger="hover">
+              <div
+                class="item"
+                slot="reference"
+                style="cursor: pointer;">
+                <div>文字素材</div>
+              </div>
+              <div class="print-images">
+                <p
+                  @click="addText(item.contents)"
+                  v-for="(item, index) in contents"
+                  :key="index">
+                  {{ item.contents }}
+                </p>
+              </div>
+            </el-popover>
+          </div>
           <div class="title">
             <span>动态数据（如日期）</span>
             <el-button type="primary" size="mini" @click="addField">添加</el-button>
@@ -54,8 +91,9 @@
               v-for="(item, index) in dynamicFromList"
               :key="index"
               style="cursor: pointer;"
-              @click="addItemToCanvas(item.fieldValue)">
+              @click="addItemToCanvas(item.fieldName)">
-              <div>{{ item.fieldValue }}</div>
+              <div>{{ item.fieldName }}</div>
+              <span class="el-icon-error" @click.stop="removeField(index)"></span>
             </div>
           </div>
         </div>
@@ -114,9 +152,9 @@
       <el-form :model="dynamicFrom" ref="form" label-width="100px">
         <el-form-item
           label="数据名称："
-          :prop="`field${dynamicFromList.length}`"
+          :prop="`field_${dynamicFromList.length > 9 ? dynamicFromList.length + 1 : '0' + (dynamicFromList.length + 1)}`"
-          :rules="[{ required: true, message: '请再次输入密码', trigger: 'blur' }]">
+          :rules="[{ required: true, message: '请输入数据名称', trigger: 'blur' }]">
-          <el-input placeholder="请输入数据名称" type="text" v-model="dynamicFrom[`field${dynamicFromList.length}`]"></el-input>
+          <el-input placeholder="请输入数据名称" type="text" v-model="dynamicFrom[`field_${dynamicFromList.length > 9 ? dynamicFromList.length + 1 : '0' + (dynamicFromList.length + 1)}`]"></el-input>
         </el-form-item>
       </el-form>
     </ai-dialog>
@@ -139,6 +177,13 @@
         }
       },
 
+      params: {
+        type: Array,
+        default: () => {
+          return []
+        }
+      },
+
       printData: {
         type: Object,
         default: () => {
@@ -151,20 +196,22 @@
         type: Object,
         default: () => {
           return {
-            "index": 0,
+            "panels": [{
-            "name": 1,
+              "index": 0,
-            "height": 200,
+              "name": 1,
-            "width": 200,
+              "height": 200,
-            "paperHeader": 0,
+              "width": 200,
-            "paperFooter": 547,
+              "paperHeader": 0,
-            "printElements": [],
+              "paperFooter": 547,
-            "paperNumberLeft": 500,
+              "printElements": [],
-            "paperNumberTop": 530,
+              "paperNumberLeft": 500,
-            "paperNumberDisabled": true,
+              "paperNumberTop": 530,
-            "paperNumberContinue": true,
+              "paperNumberDisabled": true,
-            "fontFamily": "Microsoft YaHei",
+              "paperNumberContinue": true,
-            "scale": 1,
+              "fontFamily": "Microsoft YaHei",
-            "watermarkOptions": {}
+              "scale": 1,
+              "watermarkOptions": {}
+            }]
           }
         }
       },
@@ -216,10 +263,30 @@
         paperHeight: 200,
         isShowDynamicForm: false,
         dynamicFrom: {
-
         },
         dynamicFromList: [],
-        panel: null
+        panel: null,
+        contents: [],
+        images: []
+      }
+    },
+
+    watch: {
+      template: {
+        handler(value) {
+          if (value && this.hiprintTemplate && !this.isPrint) {
+            console.log(value)
+            const config = value.panels[0]
+            this.hiprintTemplate.update(value)
+            this.curPaper = {type: 'other', width: config.width, height: config.height}
+            this.hiprintTemplate.setPaper(config.width, config.height)
+
+            if (this.params) {
+              this.dynamicFromList = this.params
+            }
+          }
+        },
+        deep: true
       }
     },
 
@@ -239,53 +306,53 @@
     },
 
     mounted() {
-      hiprint.init({
-        providers: [defaultElementTypeProvider(), customProvider({})]
-      })
-
       if (this.isPrint) {
-        this.hiprintTemplate = newHiprintPrintTemplate('temulables', {
+        this.hiprintTemplate = newHiprintPrintTemplate('temulables')
-          template: this.template
-        })
       } else {
+        hiprint.init({
+          providers: [defaultElementTypeProvider(), customProvider({})]
+        })
         this.buildLeftElement()
         this.buildDesigner()
+        this.getConfig()
       }
     },
 
     methods: {
       addField() {
-        this.$set(this.dynamicFrom, `field${this.dynamicFromList.length}`, '')
+        const num = this.dynamicFromList.length > 9 ? this.dynamicFromList.length + 1 : `0${this.dynamicFromList.length + 1}`
+
+        if (this.dynamicFromList.length && !this.dynamicFromList.at(-1)[`field_${num}`]) {
+        } else {
+          this.$set(this.dynamicFrom, `field_${num}`, '')
+        }
+
         this.isShowDynamicForm = true
+
+        console.log(this.dynamicFrom)
       },
 
-      addItemToCanvas(name) {
+      removeField(index) {
-        this.panel.addPrintText({
+        this.dynamicFromList.splice(index, 1)
+      },
+
+      getConfig() {
+        this.$http.post(`/api/material/getPage?page=1&size=-1`).then(res => {
+          if (res.code === 0) {
+            this.images = res.data.records.filter(v => v.type === '1')
+            this.contents = res.data.records.filter(v => v.type === '0')
+          }
+        })
+      },
+
+      addImage(src) {
+        this.panel.addPrintImage({
           options: {
-            left: 200,
-            field: name,
-            testData: name,
             title: '',
             left: 70.5,
             top: 58.5,
-            height: 18,
+            src: src,
-            width: 116,
+            widthHeightSync: true
-            coordinateSync: false,
-            widthHeightSync: false,
-            hideTitle: true,
-            fontFamily: 'Microsoft YaHei',
-            fontWeight: '700',
-            textContentVerticalAlign: 'middle',
-            contentPaddingLeft: 5.25,
-            qrCodeLevel: 0,
-            right: 186.5,
-            bottom: 73.5,
-            vCenter: 128.5,
-            hCenter: 64.5
-          },
-          printElementType: {
-            title: '文本',
-            type: 'text'
           }
         })
         const el = this.hiprintTemplate.printPanels[0].printElements.at(-1)
@@ -294,14 +361,42 @@
         el.design(void 0, designPaper)
       },
 
+      addText(text, isSetField = true) {
+        this.panel.addPrintText({
+          options: {
+            field: isSetField ? text : '',
+            testData: isSetField ? text : '',
+            title: isSetField ? '' : text,
+            left: 70.5,
+            top: 58.5,
+            width: 140,
+            height: 20,
+            coordinateSync: true,
+            textContentVerticalAlign: 'middle',
+            widthHeightSync: true,
+            hideTitle: true,
+            fontFamily: 'Microsoft YaHei',
+            fontWeight: '700'
+          }
+        })
+        const el = this.hiprintTemplate.printPanels[0].printElements.at(-1)
+        const designPaper = this.hiprintTemplate.printPanels[0].designPaper
+        this.hiprintTemplate.printPanels[0].appendDesignPrintElement(designPaper, el, true)
+        el.design(void 0, designPaper)
+      },
+
+      addItemToCanvas(name) {
+        this.addText(name)
+      },
+
       onConfirm() {
         this.$refs.form.validate((valid) => {
           if (valid) {
+            const num = this.dynamicFromList.length > 9 ? this.dynamicFromList.length + 1 : `0${this.dynamicFromList.length + 1}`
             this.dynamicFromList.push({
-              fieldName: `field${this.dynamicFromList.length}`,
+              fieldValue: `field_${num}`,
-              fieldValue: this.dynamicFrom[`field${this.dynamicFromList.length}`]
+              fieldName: this.dynamicFrom[`field_${num}`]
             })
-
             this.isShowDynamicForm = false
           }
         })
@@ -342,11 +437,11 @@
 
 
         this.$nextTick(() => {
-          !this.isPrint && this.hiprintTemplate.design('#hiprint-printTemplate', {
+          this.hiprintTemplate.design('#hiprint-printTemplate', {
             grid: true
           })
 
-          // this.panel = this.hiprintTemplate.printPanels[0]
+          this.panel = this.hiprintTemplate.printPanels[0]
         })
       },
 
@@ -399,11 +494,26 @@
         })
       },
 
-      getHtml() {
+      save() {
+        const html = this.elementToString(this.hiprintTemplate.getHtml(this.printData))
+        const json = this.hiprintTemplate.getJson()
+
+        return {
+          html,
+          json,
+          params: JSON.stringify(this.dynamicFromList)
+        }
+      },
+
+      preview() {
         this.html = this.elementToString(this.hiprintTemplate.getHtml(this.printData))
         this.isShowPreview = true
       },
 
+      getHtml() {
+        return this.elementToString(this.hiprintTemplate.getHtml(this.printData))
+      },
+
       clearPaper() {
         this.hiprintTemplate.clear()
       },
@@ -414,6 +524,7 @@
     }
   }
 </script>
+
 <style lang="scss" scoped>
   .print {
     height: 100%;
@@ -506,6 +617,7 @@
 
           .item {
             display: flex;
+            position: relative;
             flex-direction: column;
             align-items: center;
             justify-content: center;
@@ -520,8 +632,17 @@
               margin-right: 0;
             }
 
-            span {
+            i {
-              margin-top: 10px;
+              margin-bottom: 10px;
+            }
+
+            .el-icon-error {
+              position: absolute;
+              top: -6px;
+              right: -6px;
+              color: red;
+              font-size: 18px;
+              cursor: pointer;
             }
           }
 

src/components/print/customProvider.js

@@ -9,19 +9,28 @@ export const customProvider = function (options) {
           title: 'temu条码',
           data: 'XS888888888',
           type: 'html',
-          formatter: function (data, options, templateData) {
+          formatter: function (data, options, sukData) {
-            console.log(data, options, templateData)
             const elId = options.elId || 'barCode-' + new Date().getTime()
             const codeWidth = parseInt((options.width - 22) * 0.85)
+            let printData = {
+              labelCode: 96778555251,
+              productSkuId: 6606980005,
+              skuExtCode: 'AAA1100mWh-orange',
+              skuSpecName: '8pcs'
+            }
+
             options.elId = `${elId}`
+            if (sukData) {
+              printData = sukData
+            }
 
             // eslint-disable-next-line no-undef
             $('body').append(`<div id="codewrapper-${elId}" style="width: ${codeWidth}pt">
               <svg id="${elId}" width="100%" display="block" height="100%" class="hibarcode_imgcode" preserveAspectRatio="none slice"></svg>
             </div>`)
             // eslint-disable-next-line no-undef
-            JsBarcode('#'+ elId, '96778555251', {
+            JsBarcode('#' + elId, printData.labelCode, {
-              format: "CODE128B",
+              format: 'CODE128B',
               width: 2,
               height:  parseInt(hinnn.pt.toPx(options.height - 22).toString()) * 0.6,
               margin: 0,
@@ -34,7 +43,7 @@ export const customProvider = function (options) {
             $(`body>#codewrapper-${elId}`).remove()
             // eslint-disable-next-line no-undef
             const resizeObserver = new ResizeObserver(() => {
-              JsBarcode('#'+ elId, '96778555251', {
+              JsBarcode('#'+ elId, printData.labelCode, {
                 format: "CODE128B",
                 width: 2,
                 height:  parseInt(hinnn.pt.toPx(options.height - 22).toString()) * 0.6,
@@ -52,8 +61,8 @@ export const customProvider = function (options) {
             var html = `
               <div class="temuBarCode" id="temuBarCode-${elId}">
                 <div class="temuBarCode-top">
-                  <div class="hiprint-printElement-text-content hiprint-printElement-content">(AA+AAA)*20PCS</div>
+                  <div class="hiprint-printElement-text-content hiprint-printElement-content">${ printData.skuExtCode }</div>
-                  <div class="hiprint-printElement-text-content hiprint-printElement-content">AA 20PCS+AAA 20PCS</div>
+                  <div class="hiprint-printElement-text-content hiprint-printElement-content">${ printData.skuSpecName }</div>
                 </div>
                 <div class="temuBarCode-middle">
                   <div class="hiprint-printElement-text-content hiprint-printElement-content temuBarCode-code" style="width: 100%">
@@ -61,7 +70,7 @@ export const customProvider = function (options) {
                   </div>
                 </div>
                 <div class="temuBarCode-bottom">
-                  <div class="hiprint-printElement-text-content hiprint-printElement-content">1034130097</div>
+                  <div class="hiprint-printElement-text-content hiprint-printElement-content">${ printData.productSkuId }</div>
                   <div class="hiprint-printElement-text-content hiprint-printElement-content">Made in China</div>
                 </div>
               </div>

src/components/print/template.js

@@ -126,7 +126,7 @@ export default {
         {
           "options": {
             "left": 13.5,
-            "top": 36.5,
+            "top": 36,
             "height": 477,
             "width": 9,
             "right": 22.5,
@@ -1050,12 +1050,12 @@ export default {
         },
         {
           "options": {
-            "left": 21,
+            "left": 24,
-            "top": 387,
+            "top": 381,
             "height": 120,
             "width": 316,
-            "elId": "barCode-1729837262980",
+            "elId": "barCode-1729918784411",
-            "formatter": "function (data, options, templateData) {\n        console.log(data, options, templateData);\n        const elId = options.elId || 'barCode-' + new Date().getTime();\n        const codeWidth = parseInt((options.width - 22) * 0.85);\n        options.elId = `${elId}`;\n\n        // eslint-disable-next-line no-undef\n        $('body').append(`<div id=\"codewrapper-${elId}\" style=\"width: ${codeWidth}pt\">\n              <svg id=\"${elId}\" width=\"100%\" display=\"block\" height=\"100%\" class=\"hibarcode_imgcode\" preserveAspectRatio=\"none slice\"></svg>\n            </div>`);\n        // eslint-disable-next-line no-undef\n        JsBarcode('#' + elId, '96778555251', {\n          format: \"CODE128B\",\n          width: 2,\n          height: parseInt(hinnn.pt.toPx(options.height - 22).toString()) * 0.6,\n          margin: 0,\n          displayValue: false\n        });\n\n        // eslint-disable-next-line no-undef\n        const codeHtml = $(`#codewrapper-${elId}`).html();\n        // eslint-disable-next-line no-undef\n        $(`body>#codewrapper-${elId}`).remove();\n        // eslint-disable-next-line no-undef\n        const resizeObserver = new ResizeObserver(() => {\n          JsBarcode('#' + elId, '96778555251', {\n            format: \"CODE128B\",\n            width: 2,\n            height: parseInt(hinnn.pt.toPx(options.height - 22).toString()) * 0.6,\n            margin: 0,\n            displayValue: false\n          });\n        });\n        setTimeout(() => {\n          const node = document.getElementById(`temuBarCode-${elId}`);\n          if (node) {\n            resizeObserver.observe(node);\n          }\n        }, 0);\n        var html = `\n              <div class=\"temuBarCode\" id=\"temuBarCode-${elId}\">\n                <div class=\"temuBarCode-top\">\n                  <div class=\"hiprint-printElement-text-content hiprint-printElement-content\">(AA+AAA)*20PCS</div>\n                  <div class=\"hiprint-printElement-text-content hiprint-printElement-content\">AA 20PCS+AAA 20PCS</div>\n                </div>\n                <div class=\"temuBarCode-middle\">\n                  <div class=\"hiprint-printElement-text-content hiprint-printElement-content temuBarCode-code\" style=\"width: 100%\">\n                    ${codeHtml}\n                  </div>\n                </div>\n                <div class=\"temuBarCode-bottom\">\n                  <div class=\"hiprint-printElement-text-content hiprint-printElement-content\">1034130097</div>\n                  <div class=\"hiprint-printElement-text-content hiprint-printElement-content\">Made in China</div>\n                </div>\n              </div>\n            `;\n        return html;\n      }"
+            "formatter": "function (data, options, sukData) {\n        const elId = options.elId || 'barCode-' + new Date().getTime();\n        const codeWidth = parseInt((options.width - 22) * 0.85);\n        let printData = {\n          labelCode: 96778555251,\n          productSkuId: 6606980005,\n          skuExtCode: 'AAA1100mWh-orange',\n          skuSpecName: '8pcs'\n        };\n        options.elId = `${elId}`;\n        if (sukData) {\n          printData = sukData;\n        }\n\n        // eslint-disable-next-line no-undef\n        $('body').append(`<div id=\"codewrapper-${elId}\" style=\"width: ${codeWidth}pt\">\n              <svg id=\"${elId}\" width=\"100%\" display=\"block\" height=\"100%\" class=\"hibarcode_imgcode\" preserveAspectRatio=\"none slice\"></svg>\n            </div>`);\n        // eslint-disable-next-line no-undef\n        JsBarcode('#' + elId, printData.labelCode, {\n          format: 'CODE128B',\n          width: 2,\n          height: parseInt(hinnn.pt.toPx(options.height - 22).toString()) * 0.6,\n          margin: 0,\n          displayValue: false\n        });\n\n        // eslint-disable-next-line no-undef\n        const codeHtml = $(`#codewrapper-${elId}`).html();\n        // eslint-disable-next-line no-undef\n        $(`body>#codewrapper-${elId}`).remove();\n        // eslint-disable-next-line no-undef\n        const resizeObserver = new ResizeObserver(() => {\n          JsBarcode('#' + elId, printData.labelCode, {\n            format: \"CODE128B\",\n            width: 2,\n            height: parseInt(hinnn.pt.toPx(options.height - 22).toString()) * 0.6,\n            margin: 0,\n            displayValue: false\n          });\n        });\n        setTimeout(() => {\n          const node = document.getElementById(`temuBarCode-${elId}`);\n          if (node) {\n            resizeObserver.observe(node);\n          }\n        }, 0);\n        var html = `\n              <div class=\"temuBarCode\" id=\"temuBarCode-${elId}\">\n                <div class=\"temuBarCode-top\">\n                  <div class=\"hiprint-printElement-text-content hiprint-printElement-content\">${printData.skuExtCode}</div>\n                  <div class=\"hiprint-printElement-text-content hiprint-printElement-content\">${printData.skuSpecName}</div>\n                </div>\n                <div class=\"temuBarCode-middle\">\n                  <div class=\"hiprint-printElement-text-content hiprint-printElement-content temuBarCode-code\" style=\"width: 100%\">\n                    ${codeHtml}\n                  </div>\n                </div>\n                <div class=\"temuBarCode-bottom\">\n                  <div class=\"hiprint-printElement-text-content hiprint-printElement-content\">${printData.productSkuId}</div>\n                  <div class=\"hiprint-printElement-text-content hiprint-printElement-content\">Made in China</div>\n                </div>\n              </div>\n            `;\n        return html;\n      }"
           },
           "printElementType": {
             "title": "temu条码",

src/view/Home.vue

@@ -38,13 +38,13 @@
     <div class="admin-main">
       <el-scrollbar class="left">
         <el-menu
-            :default-active="activePath"
+          :default-active="activePath"
-            :collapse-transition="true"
+          :collapse-transition="true"
-            unique-opened
+          unique-opened
-            background-color="#545c64"
+          background-color="#545c64"
-            router
+          router
-            text-color="#fff"
+          text-color="#fff"
-            :collapse="isCollapse">
+          :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="激活充值"
+      title="激活充值"
-        :visible="$store.state.activeDlgShow"
+      :visible="$store.state.activeDlgShow"
-        :close-on-click-modal="false"
+      :close-on-click-modal="false"
-        width="1200"
+      width="1200"
-        :before-close="handleClose">
+      :before-close="handleClose">
       <ai-payment/>
     </el-dialog>
     <el-dialog
-        title="温馨提示"
+      title="温馨提示"
-        :visible="$store.state.showSheinAlert"
+      :visible="$store.state.showSheinAlert"
-        :close-on-click-modal="false"
+      :close-on-click-modal="false"
-        width="1200">
+      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="温馨提示"
+      title="温馨提示"
-        :visible="$store.state.showTemuAlert"
+      :visible="$store.state.showTemuAlert"
-        :close-on-click-modal="false"
+      :close-on-click-modal="false"
-        width="1200">
+      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 {mapMutations, mapState} from 'vuex'
-import AiPayment from "@/components/AiPayment.vue";
+  import AiPayment from "@/components/AiPayment.vue";
-import {sendAliexpressAPIMessage, sendTemuSellerAgentMessage, sendGoodcangAPIMessage} from "@/api/chromeApi";
+  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: {
+      openMember() {
-    $route(v) {
+        this.$refs.LablesMember.show()
-      if (v.meta && v.meta.activeMenu) {
+      },
-        this.activePath = v.meta.activeMenu
-      } else {
-        this.activePath = v.fullPath
-      }
-    }
-  },
 
-  created() {
+      handleClose() {
-    const devVersion = require('../manifest.development.json').version
+        this.form.mallId = "";
-    const prodVersion = require('../manifest.production.json').version
+        this.form.mallName = "";
-    this.version = process.env.NODE_ENV === 'production' ? prodVersion : devVersion
+        this.form.code = "";
-    if (this.$route.meta && this.$route.meta.activeMenu) {
+        this.setActiveDlgShow(false)
-      this.activePath = this.$route.meta.activeMenu
+      },
-    } else {
+      toActive() {
-      this.activePath = this.$route.fullPath
+        this.setActiveDlgShow(true)
-    }
+      },
-    // this.testGoodcang()
+      getMessage(type) {
-  },
+        return `你使用的是“${this.vipType[type]}”兑换券，确定兑换？`;
-
+      },
-  methods: {
+      active() {
-    ...mapMutations(['setActiveDlgShow']),
+        this.$refs.form.validate((valid) => {
-    handleClick(e) {
+          if (valid) {
-      if (e === 'logout') {
+            this.$http.post(`/api/coupon/getDetail`, null, {
-        this.$store.dispatch('SignOut', false)
+              params: {
-      } else if (e === 'pwd') {
+                code: this.form.code
-        this.$router.push('changePwd')
+              }
-      } else if (e === 'message') {
+            }).then(res => {
-        this.$router.push('message')
+              if (res.code == 0) {
-      } else if (e === 'coin') {
+                let msg = this.getMessage(res.data.type);
-        this.$router.push('coinFlow')
+                this.$confirm(msg, '温馨提示', {
-      }
+                  confirmButtonText: '确定',
-    },
+                  cancelButtonText: '取消',
-    handleClose() {
+                  type: 'info'
-      this.form.mallId = "";
+                }).then(() => {
-      this.form.mallName = "";
+                  this.$http.post(`/api/order/upgradeByCode`, null, {
-      this.form.code = "";
+                    params: {
-      this.setActiveDlgShow(false)
+                      ...this.form
-    },
+                    }
-    toActive() {
+                  }).then(res => {
-      this.setActiveDlgShow(true)
+                    if (res.code == 0) {
-    },
+                      this.$message.success('激活成功')
-    getMessage(type) {
+                      this.$store.dispatch('getUserInfo')
-      return `你使用的是“${this.vipType[type]}”兑换券，确定兑换？`;
+                      this.setActiveDlgShow(false)
-    },
+                    }
-    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() {
+      sign() {
-      this.$http.post(`/api/malluser/sign`).then(res => {
+        this.$http.post(`/api/malluser/sign`).then(res => {
-        if (res.code == 0) {
+          if (res.code == 0) {
-          this.$message.success('签到成功')
+            this.$message.success('签到成功')
-          this.$store.dispatch('getUserInfo')
+            this.$store.dispatch('getUserInfo')
-        }
+          }
-      })
+        })
-    },
+      },
-    async openFolder() {
+      async openFolder() {
-      console.log(22)
+        console.log(22)
-      let fileList = []
+        let fileList = []
-      const res = await window.showDirectoryPicker({})
+        const res = await window.showDirectoryPicker({})
-      const detalAction = async (obj) => {
+        const detalAction = async (obj) => {
-        if (obj.entries) {
+          if (obj.entries) {
-          const dirs = obj.entries()
+            const dirs = obj.entries()
-          for await (const entry of dirs) {
+            for await (const entry of dirs) {
-            if (entry[1].entries) {
+              if (entry[1].entries) {
-              detalAction(entry[1])
+                detalAction(entry[1])
-            } else {
+              } else {
-              fileList.push({
+                fileList.push({
-                name: entry[0],
+                  name: entry[0],
-                path: obj.name,
+                  path: obj.name,
-                fileHandle: entry[1],
+                  fileHandle: entry[1],
-                file: await entry[1].getFile()
+                  file: await entry[1].getFile()
-              })
+                })
+              }
             }
           }
         }
-      }
+        await detalAction(res);
-      await detalAction(res);
+        console.log("--fileList--", fileList)
-      console.log("--fileList--", fileList)
+      },
-    },
+      gotoKefu() {
-    gotoKefu() {
+        window.open('https://work.weixin.qq.com/kfid/kfcaa4208f661131eba', '_blank')
-      window.open('https://work.weixin.qq.com/kfid/kfcaa4208f661131eba', '_blank')
+      },
-    },
+      closeSheinAlert() {
-    closeSheinAlert() {
+        this.$store.commit('setSheinAlertShow', false)
-      this.$store.commit('setSheinAlertShow', false)
+      },
-    },
+      closeTemuAlert() {
-    closeTemuAlert() {
+        this.$store.commit('setTemuAlertShow', false)
-      this.$store.commit('setTemuAlertShow', false)
+      },
-    },
+      getAliexpressGoodsList() {
-    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"
-      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(
-      url = url + "&data=" + encodeURIComponent(
+          JSON.stringify({
-        JSON.stringify({
+            "channelId": "701301",
-          "channelId": "701301",
+            "jsonBody": JSON.stringify({
-          "jsonBody": JSON.stringify({
+              "tab": "online_product",
-            "tab": "online_product",
+              "sort": {},
-            "sort": {},
+              "filter": {
-            "filter": {
+                "queryCategory": null,
-              "queryCategory": null,
+                "lowerPrice": null,
-              "lowerPrice": null,
+                "upperPrice": null,
-              "upperPrice": null,
+                "status": "0",
-              "status": "0",
+                "productId": null,
-              "productId": null,
+                "pagination": {
-              "pagination": {
+                  "pageSize": 10,
-                "pageSize": 10,
+                  "current": 3
-                "current": 3
+                }
               }
-            }
+            }),
-          }),
+            "from":"SELF",
-          "from":"SELF",
+            "bizParam":"{\"version\":\"simple\"}"
-          "bizParam":"{\"version\":\"simple\"}"
+          })
+        )
+        sendAliexpressAPIMessage({
+          url: url
+        }).then(res => {
+          //console.log(res)
         })
-      )
+      },
-      sendAliexpressAPIMessage({
+      testGoodcang() {
-        url: url
+        sendGoodcangAPIMessage({
-      }).then(res => {
+          url: "/api/v1/product/list",
-        //console.log(res)
+          method: 'POST',
-      })
+          data: {
+            "page_index": 1,
+            "page_size": 20,
+            "product_status": 1
+          }
+        }).then(res => {
+          console.log(res)
+        })
+      }
     },
-    testGoodcang() {
+    mounted() {
-      sendGoodcangAPIMessage({
+      // this.getAliexpressGoodsList()
-        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()
   }
-}
 </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()
+        const data = this.$refs.printRef.save()
-        console.log(json)
+        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' },
+          { type: 'selection' },
-          { prop: 'createTime', label: '发布时间', align: 'center' },
+          { 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: '',
+          productSkuId: '',
-          SKU: ''
+          productSkcId: '',
+          page: 1,
+          size: -1
         },
-        cateList: [],
+        addType: '1',
-        type: '1',
+        isLoading: false,
-        isLoading: false
+        lableList: [],
+        height: 600,
+        skuChoosedList: []
       }
     },
 
-    created () {
+    computed: {
-      this.getList()
+      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) {
+      toPrint(row) {
-        this.$refs.printData.print(template, printData)
+        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-upload
-          <el-button type="danger" size="small" @click="toAdd(row.url)">导出</el-button>
+            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">
+        @selection-change="handleSelectionChange"
-        <el-table-column slot="productName" width="300px" :show-overflow-tooltip='true' label="商品名称"  fixed="left">
+        v-loading="pageShow">
-          <template slot-scope="scope">
+        <el-table-column
-            <div>
+          v-for="(item, index) in relationList"
-              <el-image :src="scope.row.mainImageUrl" style="width: 40px; height: 40px" class="image" :preview-src-list="[scope.row.mainImageUrl]" />
+          :key="index"
-              {{ scope.row.productName }}
+          :prop="item.field"
-            </div>
+          :show-overflow-tooltip="true"
-          </template>
+          :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, {
+        this.$http.post(`/api/templateSku/getPage?size=-1&templateId=${this.id}`).then(res => {
-          params: {
-            ...this.search
-          }
-        }).then(res => {
           if (res.code === 0) {
-            this.tableData = res.data.records
+            this.skuList = res.data.records
-            this.total = res.data.total
+            // this.total = res.data.total
           }
         })
       },
 
       onConfirm () {
-        this.skuList = this.chooseSkuList
+        if (!this.chooseSkuList.length) {
-        this.isShow = false
+          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="toAddSku(row.id)">添加SKU</el-button>
-              <el-button type="text" @click="toAdd(row.url)">编辑</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: [
+        tableData: [],
-          {
-            name: '电池',
-            count: 2
-          }
-        ],
         total: 0,
         search: {
           current: 1,
@@ -61,28 +56,27 @@
     },
 
     created () {
-      // this.getList()
+      this.getList()
     },
 
     methods: {
-      toAdd () {
+      toAdd (id = '') {
-        this.$router.push('/addLabelsTemplate')
+        this.$router.push(`/addLabelsTemplate?id=${id}`)
       },
 
-      toAddSku () {
+      toAddSku (id) {
-        this.$router.push('/skuManage')
+        this.$router.push(`/skuManage?id=${id}`)
       },
 
       getList () {
-        console.log(this.tableData)
+        this.$http.post('/api/template/getPage', null, {
-        this.$http.post('/api/learning/pluginPage', null, {
           params: {
             ...this.search
           }
         }).then(res => {
           if (res.code === 0) {
-            // this.tableData = res.data.records
+            this.tableData = res.data.records
-            // this.total = res.data.total
+            this.total = res.data.total
           }
         })
       },