【新增】晚上打印页面和标签组件

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/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/print/Print.vue

@@ -262,7 +262,6 @@
       addItemToCanvas(name) {
         this.panel.addPrintText({
           options: {
-            left: 200,
             field: name,
             testData: name,
             title: '',

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/lables/AddTemplate.vue

@@ -2,9 +2,11 @@
   <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="print" size="small">打印</el-button>
@@ -17,7 +19,7 @@
       <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"></Print>
           </div>
         </template>
       </ai-card>
@@ -37,7 +39,17 @@
     data () {
       return {
         name: '',
-        template: template
+        template: template,
+        printData: {}
+      }
+    },
+
+    mounted() {
+      this.printData = {
+        labelCode: 96778555251,
+        productSkuId: 6606980005,
+        skuExtCode: 'AAA1100mWh-orange',
+        skuSpecName: '8pcs'
       }
     },
 
@@ -67,7 +79,7 @@
         console.log(json)
       },
 
-      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,7 +34,7 @@
         <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>
@@ -61,20 +61,20 @@
             </el-input>
             <el-button style="margin-left: 10px;" @click="getSkuList" size="small" :disabled="!search.mallId" :loading="isLoading">查询</el-button>
           </div>
+          <el-button style="margin-bottom: 10px" type="primary" size="small" :disabled="!skuChoosedList.length" @click="printAll">批量打印</el-button>
         </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">
         <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,127 @@
     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: 'productSkuId', label: 'SKU', align: 'center' },
+          { prop: 'skuExtCode', label: 'SKU货号',  align: 'center' },
+          { prop: 'skuSpecName', label: '次销售属性', align: 'center' }
         ],
         tableData: [],
         search: {
           mallId: '',
           SKC: '',
-          SKU: ''
+          SKU: '',
+          page: 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.$refs.printRef.toPrint(template, row)
       },
 
-      getList () {
+      requestSKUList() {
+        return sendChromeAPIMessage({
+          url: 'bg-visage-mms/labelcode/pageQuery',
+          needMallId: true,
+          mallId: this.search.mallId,
+          anti: true,
+          data: {
+            page: this.search.page,
+            pageSize: 200,
+            productSkcIdList: this.search.SKC.split(','),
+            productSkuIdList: this.addType === '3' ? this.search.SKU.split(',') : []
+          }
+        }).then(async (res) => {
+          if (res.errorCode == 1000000) {
+            const list = res.result.pageItems.map(v => {
+              return {
+                mallId: this.search.mallId,
+                mallName: this.currMall.mallName,
+                productName: v.productName,
+                productSkuId: v.labelCodeVO.productSkuId,
+                labelCode: v.labelCodeVO.labelCode,
+                skuExtCode: v.labelCodeVO.skuExtCode,
+                skuSpecName: v.productSkuSpecList.map(item => {
+                  return item.specName
+                }).join(',')
+              }
+            })
+            this.lableList.push(...list)
+
+            if (res.result.total > this.lableList.length) {
+              this.search.page++
+              await this.$sleepSync(5000)
+              await this.requestSKUList()
+            } else {
+              this.isLoading = false
+            }
+          }
+        })
+      },
+
+      printAll() {
+        this.$refs.printRef.toPrint(template, this.skuChoosedList)
+      },
+
+      getSkuList () {
+        if (!this.search.mallId) {
+          return this.$message.error('请选择店铺')
+        }
+
+        this.$userCheck(this.search.mallId).then(() => {
+          this.lableList = []
+          this.search.page = 1
+          this.isLoading = true
+          this.requestSKUList()
+        }).catch(() => {
+          this.search.mallId = ''
+          this.isLoading = false
+        })
+      },
+
+      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/Template.vue

@@ -37,7 +37,7 @@
 
 <script>
   export default {
-    name: 'Template',
+    name: 'PringTemplate',
 
     data () {
       return {