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

2024-10-26 13:55:47 +08:00
parent a51a0d49bc
commit 05f63c7af5
9 changed files with 1259 additions and 1135 deletions
--- a/public/css/print-lock.css
+++ b/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%;
 }
--- a/public/index.html
+++ b/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>
--- a/src/components/AiTitle.vue
+++ b/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;
--- a/src/components/print/Print.vue
+++ b/src/components/print/Print.vue
@@ -262,7 +262,6 @@
      addItemToCanvas(name) {
        this.panel.addPrintText({
          options: {
-            left: 200,
            field: name,
            testData: name,
            title: '',
--- a/src/components/print/customProvider.js
+++ b/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) {
-            console.log(data, options, templateData)
+          formatter: function (data, options, sukData) {
            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', {
-              format: "CODE128B",
+            JsBarcode('#' + elId, printData.labelCode, {
+              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">AA 20PCS+AAA 20PCS</div>
+                  <div class="hiprint-printElement-text-content hiprint-printElement-content">${ printData.skuExtCode }</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>
--- a/src/components/print/template.js
+++ b/src/components/print/template.js
--- a/src/view/lables/AddTemplate.vue
+++ b/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()
      },

--- a/src/view/lables/Print.vue
+++ b/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.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 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>
+          <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' },
-          { prop: 'createTime', label: '发布时间', align: 'center' },
+          { type: 'selection' },
+          { 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: [],
-        type: '1',
-        isLoading: false
+        addType: '1',
+        isLoading: false,
+        lableList: [],
+        height: 600,
+        skuChoosedList: []
      }
    },

-    created () {
-      this.getList()
+    computed: {
+      currMall () {
+        if (!this.$store.state.mallList.length) {
+          return {}
+        }
+
+        return this.$store.state.mallList.filter(v => v.mallId === this.search.mallId)[0]
+      }
+    },
+
+    mounted() {
+      this.$nextTick(() => {
+        this.height = document.querySelector('.ai-list__content--right').clientHeight - 140
+      })
    },

    methods: {
-      toPrint (template, printData) {
-        this.$refs.printData.print(template, printData)
+      toPrint(row) {
+        this.$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>
--- a/src/view/lables/Template.vue
+++ b/src/view/lables/Template.vue
@@ -37,7 +37,7 @@

 <script>
  export default {
-    name: 'Template',
+    name: 'PringTemplate',

    data () {
      return {