调整

.gitignore

@@ -3,6 +3,7 @@ node_modules
 /dist
 /artifacts
 package-lock.json
+/node_modules
 
 # local env files
 .env.local

node_modules/vue-plugin-hiprint/dist/vue-plugin-hiprint.js

@@ -7466,10 +7466,18 @@
               }, t.prototype.mathroundToporleft = function (t) {
                 var e = p.a.instance.movingDistance;
                 return Math.round(t / e) * e
+<<<<<<< HEAD
               }, t.prototype.appendDesignPrintElement = function (t, e, i) {
                 e.setCurrenttemplateData(void 0);
                 var n = e.getDesignTarget(t);
                 n.addClass("design"), i && e.initSizeByHtml(n), t.append(n)
+=======
+              }, t.prototype.appendDesignPrintElement = function (t, e, i, className) {
+                e.setCurrenttemplateData(void 0);
+                var n = e.getDesignTarget(t);
+                const isAddClass = !!e.options.field
+                n.addClass(`design ${isAddClass ? 'dynamicField' : ''}`), i && e.initSizeByHtml(n), t.append(n)
+>>>>>>> 4b6e221369194b3387a0e3c28135acd3736c1bcd
               }, t.prototype.createNewPage = function (t, e) {
                 t = new T(this.templateId, this.index, this.watermarkOptions, this.panelPageRule, this.scale, this.width, this.height, this.paperHeader, this.paperFooter, this.paperNumberLeft, this.paperNumberTop, this.paperNumberDisabled, this.paperNumberContinue, this.paperNumberFormat, t, e);
                 return t.setFooter(this.firstPaperFooter, this.evenPaperFooter, this.oddPaperFooter, this.lastPaperFooter), t.setOffset(this.leftOffset, this.topOffset), t

src/api/index.js

@@ -4,7 +4,7 @@ import store from '@/store'
 
 
 var instance = axios.create({
-  baseURL: process.env.NODE_ENV === 'production' ? 'http://124.71.2.127:8888' : 'http://124.71.2.127:8888',
+  baseURL: process.env.NODE_ENV === 'production' ? 'http://124.71.2.127:8888' : 'http://124.71.2.127:10248',
   timeout: 50000,
   validateStatus: function (status) {
     return status < 500

src/components/LablesMember.vue

@@ -18,13 +18,13 @@
           <div class="left">
             <div class="tab">
               <div @click="tabIndex = 0" :class="[tabIndex === 0 ? 'active' : '']">
-                <span>VIP</span>
+                <span>金币充值</span>
               </div>
               <div @click="tabIndex = 1" :class="[tabIndex === 1 ? 'active' : '']">
-                <span>SVIP</span>
+                <span>基础功能</span>
               </div>
               <div @click="tabIndex = 2" :class="[tabIndex === 2 ? 'active' : '']">
-                <span>超级VIP</span>
+                <span>高级功能</span>
               </div>
             </div>
             <div class="tab-content"
@@ -34,17 +34,17 @@
               <div
                 class="tab-content__item"
                 :class="[currIndex === i ? 'active' : '']"
-                v-for="(price, i) in 4"
+                v-for="(price, i) in priceList"
                 :key="i"
-                @click="currIndex = i">
+                @click="currIndex = i, getQrcode(price)">
-                <h3>12个月</h3>
+                <h3>{{ price.remark }}</h3>
                 <div class="price">
                   <i>¥</i>
-                  <span>88</span>
+                  <span>{{ price.price }}</span>
                 </div>
                 <div class="original-price">
                   <i>¥</i>
-                  <span>88</span>
+                  <span>{{ price.originPrice }}</span>
                 </div>
               </div>
             </div>
@@ -55,7 +55,8 @@
               <span class="price">88</span>
             </div>
             <div class="code">
-              <img src="../assets/code.png" />
+              <!-- <img src="../assets/code.png" /> -->
+              <vue-qr v-if="qrcode" :text="qrcode" :size="120" :margin="8" :logoSrc="wechatLogo"/>
             </div>
             <div class="paytype">
               <svg width="13" height="13" viewBox="0 0 13 13" xmlns="http://www.w3.org/2000/svg">
@@ -80,11 +81,40 @@
       return {
         isShow: false,
         tabIndex: 0,
-        currIndex: 0
+        currIndex: 0,
+        qrcode: '',
+        priceList: []
       }
     },
 
+    mounted() {
+      this.getPriceList()
+    },
+
     methods: {
+      getPriceList() {
+        this.$http.post(`/api/priceConfig/page?module=2`).then(res => {
+          if (res.code === 0) {
+            this.priceList = res.data.records
+          }
+        })
+      },
+
+      getQrcode(item) {
+        this.$http.post(`/api/order/createOrder`, null, {
+          params: {
+            priceConfigId: item.id
+          }
+        }).then(res => {
+          if (res?.data?.id) {
+            return res.data.id
+          }
+        }).then(id => this.$http.post(`/api/order/createPrepayOrder?id=${id}`)).then(res => {
+          if (res?.data) {
+            this.qrcode = res.data.codeUrl
+          }
+        })
+      },
       show () {
         this.isShow = true
       },
@@ -120,8 +150,9 @@
       top: 50%;
       left: 50%;
       z-index: 11;
-      width: 900px;
+      width: 1100px;
-      padding: 40px 40px;
+      height: 560px;
+      padding: 40px 60px;
       transform: translate(-50%, -50%);
       border-radius: 12px;
       overflow: hidden;
@@ -130,7 +161,7 @@
       .top {
         display: flex;
         align-items: center;
-        margin-bottom: 30px;
+        margin-bottom: 60px;
 
         img {
           width: 40px;
@@ -180,6 +211,7 @@
 
       .middle {
         display: flex;
+        height: 380px;
 
         .left {
           flex: 1;
@@ -295,6 +327,7 @@
           display: flex;
           flex-direction: column;
           align-items: center;
+          justify-content: center;
           margin-left: 40px;
           padding: 20px 0 20px 0;
 
@@ -330,7 +363,7 @@
             }
           }
 
-          .code img {
+          .code {
             width: 150px;
             height: 150px;
             margin: 14px 0;

src/components/print/Print.vue

@@ -44,42 +44,18 @@
             <span>素材</span>
           </div>
           <div class="left-item__wrapper">
-            <el-popover
+            <div
-              title="图片素材(点击添加)"
+              class="item"
-              trigger="hover">
+              style="cursor: pointer;"
-              <div
+              @click="search.type = 1, search.current = 1, isShowImage = true, getConfig()">
-                class="item"
+              <div>图片素材</div>
-                slot="reference"
+            </div>
-                style="cursor: pointer;">
+            <div
-                <div>图片素材</div>
+              class="item"
-              </div>
+              style="cursor: pointer;"
-              <div class="print-images">
+              @click="search.type = 0, search.current = 1, isShowImage = true, getConfig()">
-                <img
+              <div>文字素材</div>
-                  :src="item.imgUrl"
+            </div>
-                  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>
@@ -119,15 +95,7 @@
                 <el-button slot="reference" size="small" :type="'other' == curPaperType ? 'primary' : ''">自定义纸张</el-button>
               </el-popover>
             </el-button-group>
-            <!-- <div class="scale">
+            <el-button @click="isShowTemplate = true" type="warning" size="small" style="margin-left: 10px;">模板库</el-button>
-              <el-button @click="changeScale(false)" size="small">
-                <el-icon size="18"><ZoomOut /></el-icon>
-              </el-button>
-              <div style="margin: 0 4px; width: 40px">{{ (scaleValue * 100).toFixed(0) }}%</div>
-              <el-button @click="changeScale(true)" size="small">
-                <el-icon size="18"><ZoomIn /></el-icon>
-              </el-button>
-            </div> -->
           </div>
         </div>
         <div class="center-wrapper">
@@ -144,6 +112,61 @@
         <el-button @click="isShowPreview = false">取消</el-button>
       </div>
     </ai-dialog>
+    <ai-dialog :visible.sync="isShowImage" title="图片/文字素材" width="960" customFooter>
+      <el-select v-model="search.type" placeholder="请选择图片/文字素材" size="small" @change="search.current = 1, getConfig()">
+        <el-option label="图片素材" :value="1"></el-option>
+        <el-option label="文字素材" :value="0"></el-option>
+      </el-select>
+      <ai-table
+        v-if="search.type === 1"
+        :tableData="tableData"
+        :col-configs="colConfigs"
+        :total="total"
+        :current.sync="search.current"
+        :size.sync="search.size"
+        style="margin-top: 8px;"
+        height="400"
+        @getList="getConfig">
+        <el-table-column slot="image" label="图片" align="left">
+          <template v-slot="{ row }">
+            <el-image
+              v-if="search.type === 1"
+              style="width: 80px; height: 80px"
+              :src="row.imgUrl"
+              :preview-src-list="[row.imgUrl]">
+            </el-image>
+          </template>
+        </el-table-column>
+        <el-table-column slot="options" label="操作" align="center">
+          <template v-slot="{ row }">
+            <div class="table-options">
+              <el-button type="text" @click="row.type === '1' ? addImage(row.imgUrl) : addText(row.contents), isShowImage = false">添加</el-button>
+            </div>
+          </template>
+        </el-table-column>
+      </ai-table>
+      <ai-table
+        v-if="search.type === 0"
+        :tableData="tableData"
+        :col-configs="colConfigs"
+        :total="total"
+        :current.sync="search.current"
+        :size.sync="search.size"
+        style="margin-top: 8px;"
+        height="400"
+        @getList="getConfig">
+        <el-table-column slot="options" label="操作" align="center">
+          <template v-slot="{ row }">
+            <div class="table-options">
+              <el-button type="text" @click="row.type === '1' ? addImage(row.imgUrl) : addText(row.contents), isShowImage = false">添加</el-button>
+            </div>
+          </template>
+        </el-table-column>
+      </ai-table>
+      <div class="dialog-footer" slot="footer">
+        <el-button @click="isShowImage = false">取消</el-button>
+      </div>
+    </ai-dialog>
     <ai-dialog
       :visible.sync="isShowDynamicForm"
       title="动态数据"
@@ -158,6 +181,30 @@
         </el-form-item>
       </el-form>
     </ai-dialog>
+    <ai-dialog :visible.sync="isShowTemplate" title="模板库" width="960" customFooter>
+      <ai-table
+        :tableData="templateList"
+        :col-configs="templateColConfigs"
+        :total="templateTotal"
+        :current.sync="searchTemplate.current"
+        :size.sync="searchTemplate.size"
+        style="margin-top: 8px;"
+        height="400"
+        @getList="getTemplateList"
+        v-loading="templateLoading">
+        <el-table-column slot="options" label="操作" align="center" width="200">
+          <template v-slot="{ row }">
+            <div class="table-options">
+              <el-button type="text" @click="showTemplate(row)">模板预览</el-button>
+              <el-button type="text" @click="updateTempate(row)">使用</el-button>
+            </div>
+          </template>
+        </el-table-column>
+      </ai-table>
+      <div class="dialog-footer" slot="footer">
+        <el-button @click="isShowImage = false">取消</el-button>
+      </div>
+    </ai-dialog>
   </div>
 </template>
 
@@ -227,35 +274,29 @@
         html: '',
         isShowPreview: false,
         hiprintTemplate: null,
+        isShowTemplate: false,
+        templateList: [],
         curPaper: {
           type: 'other',
           width: 200,
           height: 200
         },
         paperTypes: {
-          'A3': {
+          '100 * 100': {
-            width: 420,
+            width: 200,
-            height: 296.6
+            height: 200
           },
-          'A4': {
+          '100 * 80': {
-            width: 210,
+            width: 200,
-            height: 296.6
+            height: 160
           },
-          'A5': {
+          '80 * 60': {
-            width: 210,
+            width: 160,
-            height: 147.6
+            height: 120
           },
-          'B3': {
+          '60 * 40': {
-            width: 500,
+            width: 120,
-            height: 352.6
+            height: 80
-          },
-          'B4': {
-            width: 250,
-            height: 352.6
-          },
-          'B5': {
-            width: 250,
-            height: 175.6
           }
         },
         paperPopVisible: false,
@@ -267,7 +308,25 @@
         dynamicFromList: [],
         panel: null,
         contents: [],
-        images: []
+        images: [],
+        search: {
+          current: 1,
+          size: 10,
+          type: 1
+        },
+        searchTemplate: {
+          current: 1,
+          size: 10,
+          type: 1
+        },
+        templateTotal: 0,
+        isShowImage: false,
+        tableData: [],
+        total: 0,
+        templateColConfigs: [
+          { prop: 'name', label: '模板名称', align: 'left' }
+        ],
+        templateLoading: false
       }
     },
 
@@ -275,7 +334,6 @@
       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}
@@ -302,6 +360,20 @@
           }
         }
         return type
+      },
+
+      colConfigs () {
+        if (this.search.type === 1) {
+          return [
+            { slot: 'image' },
+            { prop: 'remark', label: '描述', align: 'center' }
+          ]
+        }
+
+        return [
+          { prop: 'contents', label: '文本', align: 'center' },
+          { prop: 'remark', label: '描述', align: 'center' }
+        ]
       }
     },
 
@@ -315,6 +387,8 @@
         this.buildLeftElement()
         this.buildDesigner()
         this.getConfig()
+
+        this.getTemplateList()
       }
     },
 
@@ -322,25 +396,62 @@
       addField() {
         const num = this.dynamicFromList.length > 9 ? this.dynamicFromList.length + 1 : `0${this.dynamicFromList.length + 1}`
 
+        // eslint-disable-next-line no-empty
         if (this.dynamicFromList.length && !this.dynamicFromList.at(-1)[`field_${num}`]) {
         } else {
           this.$set(this.dynamicFrom, `field_${num}`, '')
         }
 
         this.isShowDynamicForm = true
-
-        console.log(this.dynamicFrom)
       },
 
       removeField(index) {
         this.dynamicFromList.splice(index, 1)
       },
 
-      getConfig() {
+      updateTempate(row) {
-        this.$http.post(`/api/material/getPage?page=1&size=-1`).then(res => {
+        this.templateLoading = true
+        this.$http.post(`/api/templateRecommend/detail?id=${row.id}`).then(res => {
           if (res.code === 0) {
-            this.images = res.data.records.filter(v => v.type === '1')
+            const config = JSON.parse(res.data.content)
-            this.contents = res.data.records.filter(v => v.type === '0')
+            this.hiprintTemplate.update(config)
+            this.hiprintTemplate.setPaper(config.panels[0].width, config.panels[0].height)
+
+            this.dynamicFromList = JSON.parse(res.data.params)
+            this.isShowTemplate = false
+          }
+
+          this.templateLoading = false
+        })
+      },
+
+      getTemplateList() {
+        this.$http.post(`/api/templateRecommend/getRecommendPage`, null, {
+          params: this.searchTemplate
+        }).then(res => {
+          if (res.code === 0) {
+            this.templateList = res.data.records
+            this.templateTotal = res.data.total
+          }
+        })
+      },
+
+      showTemplate (row) {
+        this.templateLoading = true
+        this.$http.post(`/api/templateRecommend/detail?id=${row.id}`).then(res => {
+          this.templateLoading = false
+          if (res.code === 0) {
+            this.html = res.data.codes
+            this.isShowPreview = true
+          }
+        })
+      },
+
+      getConfig() {
+        this.$http.post(`/api/material/getPage?current=${this.search.current}&size=${this.search.size}&type=${this.search.type}`).then(res => {
+          if (res.code === 0) {
+            this.tableData = res.data.records
+            this.total = res.data.total
           }
         })
       },
@@ -352,7 +463,8 @@
             left: 70.5,
             top: 58.5,
             src: src,
-            widthHeightSync: true
+            width: 100,
+            height: 100
           }
         })
         const el = this.hiprintTemplate.printPanels[0].printElements.at(-1)
@@ -361,7 +473,7 @@
         el.design(void 0, designPaper)
       },
 
-      addText(text, isSetField = true) {
+      addText(text, isSetField = false) {
         this.panel.addPrintText({
           options: {
             field: isSetField ? text : '',
@@ -372,6 +484,7 @@
             width: 140,
             height: 20,
             coordinateSync: true,
+            contentPaddingLeft: 5.25,
             textContentVerticalAlign: 'middle',
             widthHeightSync: true,
             hideTitle: true,
@@ -386,7 +499,7 @@
       },
 
       addItemToCanvas(name) {
-        this.addText(name)
+        this.addText(name, true)
       },
 
       onConfirm() {
@@ -561,8 +674,9 @@
       ::v-deep(.hiprint-printPanel) {
         display: block;
 
-        & > div {
+        .dynamicField {
-          // margin: 0 auto !important;
+          background-color: #bfc2e9;
+          border-color: #bfc2e9;
         }
       }
 
@@ -621,6 +735,8 @@
             flex-direction: column;
             align-items: center;
             justify-content: center;
+            left: 0!important;
+            top: 0!important;
             width: 100px;
             margin-bottom: 10px;
             margin-right: 10px;

src/components/print/customProvider.js

@@ -1,5 +1,7 @@
+/* eslint-disable no-undef */
 import { hiprint } from 'vue-plugin-hiprint'
-export const customProvider = function (options) {
+
+export const customProvider = function () {
   const addElementTypes = function (context) {
     context.removePrintElementTypes('customProvider')
     context.addPrintElementTypes('customProvider', [
@@ -13,10 +15,10 @@ export const customProvider = function (options) {
             const elId = options.elId || 'barCode-' + new Date().getTime()
             const codeWidth = parseInt((options.width - 22) * 0.85)
             let printData = {
-              labelCode: 96778555251,
+              labelCode: 123456789,
-              productSkuId: 6606980005,
+              productSkuId: `XXXXXXXXXXXXXX`,
-              skuExtCode: 'AAA1100mWh-orange',
+              skuExtCode: 'XXXXXXXXXXXXXX',
-              skuSpecName: '8pcs'
+              skuSpecName: 'XXXXX'
             }
 
             options.elId = `${elId}`
@@ -24,29 +26,25 @@ export const customProvider = function (options) {
               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, printData.labelCode, {
               format: 'CODE128B',
               width: 2,
-              height:  parseInt(hinnn.pt.toPx(options.height - 22).toString()) * 0.6,
+              height: parseInt(hinnn.pt.toPx(options.height - 22).toString()) * 0.6,
               margin: 0,
               displayValue: false
             })
 
-            // eslint-disable-next-line no-undef
             const codeHtml = $(`#codewrapper-${elId}`).html()
-            // eslint-disable-next-line no-undef
             $(`body>#codewrapper-${elId}`).remove()
-            // eslint-disable-next-line no-undef
+
             const resizeObserver = new ResizeObserver(() => {
-              JsBarcode('#'+ elId, printData.labelCode, {
+               JsBarcode('#' + elId, printData.labelCode, {
                 format: "CODE128B",
                 width: 2,
-                height:  parseInt(hinnn.pt.toPx(options.height - 22).toString()) * 0.6,
+                height: parseInt(hinnn.pt.toPx(options.height - 22).toString()) * 0.6,
                 margin: 0,
                 displayValue: false
               })
@@ -61,8 +59,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">${ printData.skuExtCode }</div>
+                  <div class="hiprint-printElement-text-content hiprint-printElement-content">${printData.skuExtCode || printData.productSkcId}</div>
-                  <div class="hiprint-printElement-text-content hiprint-printElement-content">${ printData.skuSpecName }</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%">
@@ -70,7 +68,7 @@ export const customProvider = function (options) {
                   </div>
                 </div>
                 <div class="temuBarCode-bottom">
-                  <div class="hiprint-printElement-text-content hiprint-printElement-content">${ printData.productSkuId }</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>
@@ -85,37 +83,37 @@ export const customProvider = function (options) {
           printElementType: {
           }
         },
-        {
+        // {
-          tid: 'providerModule1.barcode',
+        //   tid: 'providerModule1.barcode',
-          title: '条形码',
+        //   title: '条形码',
-          data: 'XS888888888',
+        //   data: 'XS888888888',
-          type: 'text',
+        //   type: 'text',
-          options: {
+        //   options: {
-            field: 'barcode',
+        //     field: 'barcode',
-            testData: 'XS888888888',
+        //     testData: 'XS888888888',
-            height: 32,
+        //     height: 32,
-            fontSize: 12,
+        //     fontSize: 12,
-            lineHeight: 18,
+        //     lineHeight: 18,
-            textAlign: 'left',
+        //     textAlign: 'left',
-            textType: 'barcode',
+        //     textType: 'barcode',
-            hideTitle: false
+        //     hideTitle: false
-          }
+        //   }
-        },
+        // },
-        {
+        // {
-          tid: 'providerModule1.qrcode',
+        //   tid: 'providerModule1.qrcode',
-          title: '二维码',
+        //   title: '二维码',
-          data: 'XS888888888',
+        //   data: 'XS888888888',
-          type: 'text',
+        //   type: 'text',
-          options: {
+        //   options: {
-            field: '',
+        //     field: '',
-            testData: '',
+        //     testData: '',
-            height: 32,
+        //     height: 32,
-            fontSize: 12,
+        //     fontSize: 12,
-            lineHeight: 18,
+        //     lineHeight: 18,
-            textType: 'qrcode',
+        //     textType: 'qrcode',
-            hideTitle: false
+        //     hideTitle: false
-          }
+        //   }
-        },
+        // },
         {
           tid: 'providerModule1.image',
           title: '图片',

src/components/print/vue-plugin-hiprint.js

@@ -7466,10 +7466,11 @@
               }, t.prototype.mathroundToporleft = function (t) {
                 var e = p.a.instance.movingDistance;
                 return Math.round(t / e) * e
-              }, t.prototype.appendDesignPrintElement = function (t, e, i) {
+              }, t.prototype.appendDesignPrintElement = function (t, e, i, className) {
                 e.setCurrenttemplateData(void 0);
                 var n = e.getDesignTarget(t);
-                n.addClass("design"), i && e.initSizeByHtml(n), t.append(n)
+                const isAddClass = !!e.options.field
+                n.addClass(`design ${isAddClass ? 'dynamicField' : ''}`), i && e.initSizeByHtml(n), t.append(n)
               }, t.prototype.createNewPage = function (t, e) {
                 t = new T(this.templateId, this.index, this.watermarkOptions, this.panelPageRule, this.scale, this.width, this.height, this.paperHeader, this.paperFooter, this.paperNumberLeft, this.paperNumberTop, this.paperNumberDisabled, this.paperNumberContinue, this.paperNumberFormat, t, e);
                 return t.setFooter(this.firstPaperFooter, this.evenPaperFooter, this.oddPaperFooter, this.lastPaperFooter), t.setOffset(this.leftOffset, this.topOffset), t

src/view/Home.vue

@@ -192,16 +192,23 @@
             <i class="el-icon-s-data"></i>
             <span slot="title">数据统计</span>
           </el-menu-item> -->
-          <el-submenu index="/labelsTemplate" v-if="$store.state.userInfo.phone == '18571466720'">
+          <el-submenu index="labels">
             <template slot="title">
               <i class="el-icon-s-goods"></i>
               <div slot="title" style="display: inline-block;">
-                <span>标签管理</span>
+                <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-submenu index="/labelsTemplate" style="padding-left: 15px;">
-            <el-menu-item index="/labelsPrint">标签打印</el-menu-item>
+              <template slot="title">
+                <div slot="title" style="display: inline-block; ">
+                  <span>标签管理</span>
+                  <el-button type="text" style="margin-left: 57px; 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>
+            </el-submenu>
           </el-submenu>
         </el-menu>
       </el-scrollbar>

src/view/lables/AddTemplate.vue

@@ -16,7 +16,7 @@
       </ai-title>
     </template>
     <template #content>
-      <ai-card title="标签模板" class="card" :hideTitle="true">
+      <ai-card title="标签模板" class="card" :hideTitle="true" v-loading="isLoading">
         <template #content>
           <div class="add-label__wrapper">
             <Print
@@ -35,7 +35,6 @@
 
 <script>
   import Print from '@/components/print/Print'
-  import template from '@/components/print/template'
 
   export default {
     components: {
@@ -91,7 +90,8 @@
         this.$router.go(-1)
       },
 
-      getInfo () {
+      getInfo() {
+        this.isLoading = true
         this.$http.post(`/api/template/detail?id=${this.$route.query.id}`).then(res => {
           if (res.code === 0) {
             this.info = res.data
@@ -102,6 +102,8 @@
               this.template = JSON.parse(res.data.content)
             })
           }
+
+          this.isLoading = false
         })
       },
 

src/view/lables/Print.vue

@@ -9,15 +9,20 @@
       <div class="search-item__wrapper">
         <div class="left">
           <div class="search-item">
-            <label>添加方式：</label>
+            <label>打印方式：</label>
-            <el-radio-group v-model="addType" size="small">
+            <el-radio-group v-model="addType" size="small" @click="lableList = [], search.productSkuId = '', search.productSkcId = ''">
               <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>
             </el-radio-group>
           </div>
-          <div class="search-item">
+        </div>
-            <label>店铺：</label>
+        <div class="right"></div>
+      </div>
+      <div class="search-item__wrapper">
+        <div class="left">
+          <div class="search-item" v-show="addType === '1'">
+            <label>发货单：</label>
             <el-select v-model="search.mallId" placeholder="请选择店铺" size="small">
               <el-option
                 v-for="item in $store.state.mallList"
@@ -26,30 +31,10 @@
                 :value="item.mallId">
               </el-option>
             </el-select>
+            <el-button style="margin-left: 10px;" size="small" :disabled="!search.mallId" :loading="isLoading" @click="searchSkuList">查询</el-button>
           </div>
-        </div>
+          <div class="search-item" v-show="addType === '2' || addType === '3'">
-        <div class="right"></div>
+            <label>{{ addType === '2' ? 'SKC：' : 'SKU：' }}</label>
-      </div>
-      <div class="search-item__wrapper">
-        <div class="left">
-          <div class="search-item" v-show="addType === '1'">
-            <label>备货单：</label>
-            <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"
@@ -59,6 +44,29 @@
               placeholder="多个查询请用户逗号分割"
               suffix-icon="iconfont iconSearch">
             </el-input>
+            <el-input
+              v-else
+              v-model="search.productSkcId"
+              style="width: 250px"
+              size="small"
+              placeholder="多个查询请用户逗号分割"
+              clearable
+              suffix-icon="iconfont iconSearch">
+            </el-input>
+            <el-select
+              clearable
+              v-model="search.templateId"
+              placeholder="请选择模板"
+              size="small"
+              @change="getList"
+              style="margin-left: 10px;">
+              <el-option
+                v-for="item in templateList"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id">
+              </el-option>
+            </el-select>
             <el-button style="margin-left: 10px;" @click="getList" size="small" :loading="isLoading">查询</el-button>
           </div>
         </div>
@@ -69,18 +77,27 @@
         :isShowPagination="false"
         :height="height"
         @getList="() => {}"
-        @selection-change="handleSelectionChange"
         :loading="isLoading">
-        <el-table-column slot="options" label="操作" align="center" fixed="right" width="140px">
+        <el-table-column slot="options" label="操作" align="center" fixed="right" width="120px">
           <template v-slot="{ row }">
             <div class="table-options">
               <el-button type="text" @click="toPrint(row)">打印</el-button>
-              <el-button type="text" @click="toDetail(row.url)">详情</el-button>
             </div>
           </template>
         </el-table-column>
       </ai-table>
       <Print ref="printRef" :isPrint="true"></Print>
+      <ai-dialog
+        :visible.sync="isShow"
+        title="打印数量"
+        width="890px"
+        @confirm="onConfirm">
+        <el-form class="ai-form" :model="form" ref="form" label-width="100px">
+          <el-form-item label="标签名称" style="width: 100%;" prop="count" :rules="[{ required: true, message: '请输入打印数量', trigger: 'change' }]">
+            <el-input-number v-model="form.count" :min="1" :max="500" label="请输入打印数量"></el-input-number>
+          </el-form-item>
+        </el-form>
+      </ai-dialog>
     </template>
   </ai-list>
 </template>
@@ -100,26 +117,34 @@
     data () {
       return {
         colConfigs: [
-          { type: 'selection' },
           { prop: 'mallName', label: '店铺名称', align: 'left' },
           { prop: 'labelCode', label: '条码编码', align: 'center' },
           { prop: 'productSkcId', label: 'SKC', align: 'center' },
           { prop: 'productSkuId', label: 'SKU', align: 'center' },
           { prop: 'skuExtCode', label: 'SKU货号',  align: 'center' },
-          { prop: 'skuSpecName', label: '次销售属性', align: 'center' }
+          { prop: 'skuSpecName', label: '次销售属性', align: 'center' },
+          { prop: 'deliveryNum', label: '发货数', align: 'center' }
         ],
         search: {
           mallId: '',
           productSkuId: '',
           productSkcId: '',
           page: 1,
-          size: -1
+          size: -1,
+          templateId: ''
         },
         addType: '1',
         isLoading: false,
         lableList: [],
         height: 600,
-        skuChoosedList: []
+        skuChoosedList: [],
+        isShow: false,
+        form: {
+          count: 1
+        },
+        printData: [],
+        templateList: [],
+        page: 1
       }
     },
 
@@ -134,26 +159,76 @@
     },
 
     mounted() {
+      this.getTemplateList()
       this.$nextTick(() => {
         this.height = document.querySelector('.ai-list__content--right').clientHeight - 140
       })
     },
 
     methods: {
+      getTemplateList () {
+        this.$http.post('/api/template/getPage?size=-1').then(res => {
+          if (res.code === 0) {
+            this.templateList = res.data.records
+          }
+        })
+      },
+
       toPrint(row) {
         this.isLoading = true
-        this.$http.post(`/api/template/detail?id=${row.templateId}`).then(res => {
+        if (this.addType === '1') {
-          this.isLoading = false
+          this.$http.post(`/api/template/getPage?productSkuId=${row.productSkuId}`).then(res => {
-          const params = JSON.parse(res.data.params)
+            if (!res.data.records.length) {
-          const getValue = v => params.filter(e => e.fieldValue === v)[0].fieldName
+              this.isLoading = false
-          Object.keys(row).forEach(key => {
+              return this.$message.error('该SKU未配置模板')
-            if (params.findIndex(v => v.fieldValue === key) > -1) {
+            }
-              row[getValue(key)] = row[key]
+
+            this.$http.post(`/api/template/detail?id=${res.data.records[0].id}`).then(res => {
+              this.isLoading = false
+              if (res.code === 0) {
+                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]
+                  }
+                })
+
+                this.$refs.printRef.toPrint(JSON.parse(res.data.content), new Array(row.deliveryNum).fill(row))
+              }
+            })
+          })
+        }  else {
+          this.$http.post(`/api/template/detail?id=${row.templateId}`).then(res => {
+            this.isLoading = false
+            if (res.code === 0) {
+              if (!res.data) {
+                this.isLoading = false
+                return this.$message.error('该SKU未配置模板')
+              }
+              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]
+                }
+              })
+
+              this.printData = {
+                template: JSON.parse(res.data.content),
+                data: row
+              }
+              this.isShow = true
             }
           })
+        }
+      },
 
-          if (res.code === 0) {
+      onConfirm () {
-            this.$refs.printRef.toPrint(JSON.parse(res.data.content), row)
+        this.$refs.form.validate((valid) => {
+          if (valid) {
+            this.isShow = false
+            this.$refs.printRef.toPrint(this.printData.template, new Array(this.form.count).fill(this.printData.data))
           }
         })
       },
@@ -178,8 +253,97 @@
         })
       },
 
-      handleSelectionChange(e) {
+      getDeliveryOrderSn (page) {
-        this.skuChoosedList = e
+        return new Promise(resolve => {
+          sendChromeAPIMessage({
+            url: 'bgSongbird-api/supplier/deliverGoods/management/pageQueryDeliveryBatch',
+            needMallId: true,
+            mallId: this.search.mallId,
+            anti: true,
+            data: {
+              pageNo: page,
+              status: 1,
+              onlyTaxWarehouseWaitApply: false,
+              productLabelCodeStyle: 0,
+              pageSize: 200
+            }
+          }).then(res => {
+            if (res.errorCode == 1000000) {
+              resolve({
+                list: [].concat(res.result.list.map(v => v.deliveryOrderList.map(e => e.deliveryOrderSn)).flat()),
+                isHasNext: res.result.total && res.result.list.length && (res.result.list.length < 200 && res.result.total > 200)
+              })
+            } else {
+              resolve({ list: [], isHasNext: false })
+            }
+          }).catch(() => {
+            resolve({ list: [], isHasNext: false })
+          })
+        })
+      },
+
+      getLabels (deliveryOrderSnList) {
+        return new Promise(resolve => {
+          sendChromeAPIMessage({
+            url: 'bgSongbird-api/supplier/deliverGoods/management/printProductSkuLabel',
+            needMallId: true,
+            mallId: this.search.mallId,
+            anti: true,
+            data: {
+              deliveryOrderSnList: deliveryOrderSnList
+            }
+          }).then(res => {
+            if (res.errorCode == 1000000) {
+              resolve(res.result.map(v => {
+                return {
+                  mallName: this.$store.state.mallList.filter(v => v.mallId === this.search.mallId)[0].mallName,
+                  productName: v.productName,
+                  productSkcId: v.productSkcId,
+                  productSkuId: v.productSkuId,
+                  labelCode: v.labelCode,
+                  skuExtCode: v.skuExtCode,
+                  deliveryNum: v.deliveryNum,
+                  skuSpecName: v.secondarySpecVOList.map(item => {
+                    return item.specName
+                  }).join(',')
+                }
+              }))
+            } else {
+              resolve([])
+            }
+          }).catch(() => {
+            resolve([])
+          })
+        })
+      },
+
+      async searchSkuList () {
+        let page = 1
+        let isHasNext = true
+        let list = []
+        let deliveryOrderSnList = []
+        this.isLoading = true
+        while (isHasNext) {
+          const result = await this.getDeliveryOrderSn(page)
+          page = page + 1
+          isHasNext = result.isHasNext ? true : false
+          deliveryOrderSnList.push(...result.list)
+
+          await this.$sleepSync(1000)
+        }
+
+        const len = Math.ceil(deliveryOrderSnList.length / 100)
+        for (let i = 0; i < len; i++) {
+          this.page = 1
+          const ids = [...new Set(deliveryOrderSnList)].slice(i * 100, i * 100 + 100)
+          const res = await this.getLabels(ids)
+          list.push(...res)
+          await this.$sleepSync(500)
+        }
+
+        this.isLoading = false
+
+        this.lableList = list
       }
     }
   }

src/view/lables/SkuManage.vue

@@ -19,7 +19,7 @@
             :auto-upload="false"
             :file-list="fileList"
             :on-change="onExcelChange">
-            <el-button size="small" type="danger">Excel导入</el-button>
+            <el-button size="small" type="danger" :disabled="!skuList.length">Excel导入</el-button>
           </el-upload>
           <json-excel
             :data="skuList"
@@ -29,19 +29,51 @@
             <el-button size="small" type="warning" :disabled="!skuList.length">Excel导出</el-button>
           </json-excel>
         </template>
-        <template #right>
+      </ai-search-bar>
+      <ai-search-bar>
+        <template #left>
+          <div class="search-item" style="margin-bottom: 0;">
+            <label>SKU：</label>
+            <el-input
+              v-model="search.productSkuId"
+              style="width: 250px"
+              size="small"
+              clearable
+              placeholder="请输入SKU"
+              suffix-icon="iconfont iconSearch"
+              @clear="getList">
+            </el-input>
+          </div>
+          <div class="search-item" style="margin-bottom: 0;">
+            <label>SKC：</label>
+            <el-input
+              v-model="search.productSkcId"
+              style="width: 250px"
+              size="small"
+              placeholder="请输入SKC"
+              clearable
+              suffix-icon="iconfont iconSearch"
+              @clear="getList">
+            </el-input>
+          </div>
+          <div class="search-item" style="margin-bottom: 0;">
+            <label style="width: 100px;">仅显示未填写：</label>
+            <el-select v-model="search.isShowWhite" placeholder="请选择" clearable size="small">
+              <el-option label="是" value="1"></el-option>
+              <el-option label="否" value="0"></el-option>
+            </el-select>
+          </div>
+          <el-button style="margin-left: 10px;" @click="getList" size="small" :loading="pageShow">查询</el-button>
         </template>
       </ai-search-bar>
       <ai-table
-        :tableData="skuList"
+        :tableData="list"
         :col-configs="colConfigs"
-        :total="total"
-        :current.sync="search.current"
-        :size.sync="search.size"
         style="margin-top: 8px;"
         @getList="getList"
         @selection-change="handleSelectionChange"
-        v-loading="pageShow">
+        v-loading="pageShow"
+        :isShowPagination="false">
         <el-table-column
           v-for="(item, index) in relationList"
           :key="index"
@@ -50,19 +82,19 @@
           :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="120px">
           <template v-slot="{ row }">
             <div class="table-options">
-              <el-button type="text" @click="toAdd(row.url)">编辑</el-button>
+              <el-button type="text" @click="remove(row.id)">删除</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"
         title="添加SKU"
         width="1400px"
+        customFooter
         @confirm="onConfirm">
         <div class="search-item__wrapper">
           <div class="left">
@@ -155,6 +187,10 @@
             </template>
           </el-table-column>
         </ai-table>
+        <template #footer>
+          <el-button @click="isShow = false">取消</el-button>
+          <el-button @click="onConfirm" type="primary" :loading="btnLoading">确认</el-button>
+        </template>
       </ai-dialog>
     </template>
   </ai-list>
@@ -176,7 +212,10 @@
         total: 0,
         search: {
           current: 1,
-          size: 100
+          size: -1,
+          productSkuId: '',
+          productSkcId: '',
+          isShowWhite: ''
         },
         lableSearch: {
           current: 1,
@@ -225,11 +264,25 @@
         id: '',
         fileList: [],
         pageShow: false,
-        relationList: []
+        relationList: [],
+        btnLoading: false
       }
     },
 
     computed: {
+      list () {
+        if (!this.skuList.length) {
+          return []
+        }
+
+        if (this.search.isShowWhite !== '1') {
+          return this.skuList
+        }
+
+        const keys = this.relationList.map(v => v.field)
+        return this.skuList.filter(v => keys.some(e => !v[e]))
+      },
+
       currMall () {
         if (!this.$store.state.mallList.length) {
           return {}
@@ -239,7 +292,7 @@
       },
 
       colConfigs () {
-        const arr = this.isShow ? [] : this.relationList.map(v => {
+        const fields = this.isShow ? [] : this.relationList.map(v => {
           return {
             prop: v.field,
             label: v.name,
@@ -256,7 +309,7 @@
           { prop: 'productSkuId', label: 'SKU', align: 'center' },
           { prop: 'skuExtCode', label: 'SKU货号',  align: 'center' },
           { prop: 'skuSpecName', label: '次销售属性', align: 'center' },
-          ...arr
+          ...fields
         ]
       },
 
@@ -287,16 +340,13 @@
         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) => {
+        return new Promise(resolve => {
           const reader = new FileReader()
-
           reader.readAsBinaryString(file)
           reader.onload = evt => {
             const data = evt.target.result
@@ -313,7 +363,6 @@
       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
@@ -322,7 +371,6 @@
               result[this.jsonFields[item]] = v[item]
             })
 
-            console.log(result)
             return result
           })).then(res => {
             if (res.code === 0) {
@@ -341,7 +389,6 @@
       },
 
       handleSelectionChange(e) {
-        console.log(e)
         this.chooseSkuList = e
       },
 
@@ -353,7 +400,7 @@
             mallId: this.lableSearch.mallId,
             anti: true,
             data: {
-              page: 1,
+              page,
               pageSize: 200,
               catIds: catIds
             }
@@ -361,7 +408,7 @@
             if (res.errorCode == 1000000) {
               resolve({
                 list: res.result.pageItems.map(v => v.productSkcId),
-                isHasNext: page * 200 < res.result.total
+                isHasNext: res.result.total && res.result.pageItems.length && (res.result.pageItems.length < 200 && res.result.total > 200)
               })
             } else {
               resolve({ list: [], isHasNext: false })
@@ -373,35 +420,28 @@
       },
 
       async onCateChange() {
-        this.$userCheck(this.lableSearch.mallId).then(async () => {
+        let page = 1
-          let page = 1
+        let list = []
-          let list = []
+        let isHasNext = true
-          let isHasNext = true
+        this.lableList = []
-          this.lableList = []
+        this.isLoading = true
-          this.isLoading = true
+        while (isHasNext) {
-          while (isHasNext) {
+          const result = await this.getSKCList([].concat(this.targetCatId.flat()), page)
-            const result = await this.getSKCList([].concat(this.targetCatId.flat()), page)
+          page = page + 1
-            page = page + 1
+          isHasNext = result.isHasNext ? true : false
-            isHasNext = result.isHasNext ? true : false
+          list.push(...result.list)
-            list.push(...result.list)
 
-            await this.$sleepSync(5000)
+          await this.$sleepSync(1000)
-          }
+        }
 
-          const skcList = [...new Set(list)]
+        const skcList = [...new Set(list)]
-          const len = Math.ceil(skcList.length / 100)
+        const len = Math.ceil(skcList.length / 100)
-          for (let i = 0; i < len; i++) {
+        for (let i = 0; i < len; i++) {
-            this.skuReqParams.page = 1
+          this.skuReqParams.page = 1
-            this.skuReqParams.SKC = [...new Set(list)].slice(i * 100, i * 100 + 100).join(',')
+          this.skuReqParams.SKC = [...new Set(list)].slice(i * 100, i * 100 + 100).join(',')
-            await this.requestSKUList(true)
+          await this.requestSKUList(true)
-            await this.$sleepSync(2000)
+          await this.$sleepSync(500)
-          }
+        }
-
-          console.log(111)
-          this.isLoading = false
-        }).catch(() => {
-          this.lableSearch.mallId = ''
-        })
       },
 
       requestSKUList(flag) {
@@ -437,7 +477,7 @@
 
             if (res.result.total > this.lableList.length) {
               this.skuReqParams.page++
-              await this.$sleepSync(5000)
+              await this.$sleepSync(500)
               await this.requestSKUList()
             } else {
               !flag && (this.isLoading = false)
@@ -451,22 +491,25 @@
           return this.$message.error('请选择店铺')
         }
 
-        this.$userCheck(this.lableSearch.mallId).then(() => {
+        this.lableList = []
-          this.lableList = []
+        this.skuReqParams.page = 1
-          this.skuReqParams.page = 1
+        this.isLoading = true
-          this.isLoading = true
+        this.requestSKUList()
-          this.requestSKUList()
-        }).catch(() => {
-          this.lableSearch.mallId = ''
-        })
       },
 
       getList () {
-        this.$http.post(`/api/templateSku/getPage?size=-1&templateId=${this.id}`).then(res => {
+        this.pageShow = true
+        this.$http.post(`/api/templateSku/getPage`, null, {
+          params: {
+            ...this.search,
+            templateId: this.id
+          }
+        }).then(res => {
           if (res.code === 0) {
             this.skuList = res.data.records
-            // this.total = res.data.total
           }
+
+          this.pageShow = false
         })
       },
 
@@ -475,6 +518,7 @@
           return this.$message.error('请选择SKU')
         }
 
+        this.btnLoading = true
         this.$http.post(`/api/templateSku/addBatchSku`, this.chooseSkuList.map(v => {
           return {
             ...v,
@@ -486,8 +530,24 @@
             this.isShow = false
             this.getList()
           }
+
+          this.btnLoading = false
         })
-      }
+      },
+
+      remove (id) {
+        this.$confirm('确定删除该数据？', '温馨提示', {
+          type: 'warning'
+        }).then(() => {
+          this.$http.post(`/api/templateSku/removeById?id=${id}`).then(res => {
+            if (res.code == 0) {
+              this.$message.success('删除成功')
+
+              this.getList()
+            }
+          })
+        })
+      },
     }
   }
 </script>

src/view/lables/Template.vue

@@ -8,10 +8,42 @@
     <template slot="content">
       <ai-search-bar>
         <template #left>
+          <div class="search-item">
+            <label>SKU：</label>
+            <el-input
+              v-model="search.productSkuId"
+              style="width: 250px"
+              size="small"
+              clearable
+              placeholder="请输入SKU"
+              suffix-icon="iconfont iconSearch">
+            </el-input>
+          </div>
+          <div class="search-item">
+            <label>SKC：</label>
+            <el-input
+              v-model="search.productSkcId"
+              style="width: 250px"
+              size="small"
+              placeholder="请输入SKC"
+              clearable
+              suffix-icon="iconfont iconSearch">
+            </el-input>
+          </div>
+          <div class="search-item">
+            <label>模板名称：</label>
+            <el-input
+              v-model="search.name"
+              style="width: 250px"
+              size="small"
+              placeholder="请输入模板名称"
+              clearable
+              suffix-icon="iconfont iconSearch">
+            </el-input>
+          </div>
+          <el-button style="margin-left: 10px;" @click="getList" size="small" :loading="isLoading">查询</el-button>
           <el-button type="primary" size="small" @click="toAdd('')">添加</el-button>
         </template>
-        <template #right>
-        </template>
       </ai-search-bar>
       <ai-table
         :tableData="tableData"
@@ -20,13 +52,14 @@
         :current.sync="search.current"
         :size.sync="search.size"
         style="margin-top: 8px;"
-        @getList="getList">
+        @getList="getList"
+        :loading="isLoading">
         <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.id)">添加SKU</el-button>
+              <el-button type="text" @click="toAddSku(row.id)">管理SKU</el-button>
               <el-button type="text" @click="toAdd(row.id)">编辑</el-button>
-              <el-button type="text" @click="toDetail(row.url)">删除</el-button>
+              <el-button type="text" @click="remove(row.id)">删除</el-button>
             </div>
           </template>
         </el-table-column>
@@ -43,14 +76,18 @@
       return {
         colConfigs: [
           { prop: 'name', label: '模板名称', align: 'left' },
-          { prop: 'count', label: '绑定SKU数量', align: 'center' },
+          { prop: 'skuTotal', label: '绑定SKU数量', align: 'center' },
           { prop: 'createTime', label: '创建时间', align: 'center' },
         ],
+        isLoading: false,
         tableData: [],
         total: 0,
         search: {
           current: 1,
-          size: 10
+          size: 10,
+          name: '',
+          productSkuId: '',
+          productSkcId: ''
         }
       }
     },
@@ -69,6 +106,7 @@
       },
 
       getList () {
+        this.isLoading = true
         this.$http.post('/api/template/getPage', null, {
           params: {
             ...this.search
@@ -78,6 +116,22 @@
             this.tableData = res.data.records
             this.total = res.data.total
           }
+
+          this.isLoading = false
+        })
+      },
+
+      remove (id) {
+        this.$confirm('确定删除该模板？', '温馨提示', {
+          type: 'warning'
+        }).then(() => {
+          this.$http.post(`/api/template/removeById?id=${id}`).then(res => {
+            if (res.code == 0) {
+              this.$message.success('删除成功')
+
+              this.getList()
+            }
+          })
         })
       },
 
@@ -89,4 +143,9 @@
 </script>
 
 <style scoped lang="scss">
+  .Template {
+    .search-item {
+      margin-bottom: 0;
+    }
+  }
 </style>