【新增】模板库

2024-10-28 22:09:57 +08:00
parent 8225f21d14
commit 6618242f7f
5 changed files with 147 additions and 38 deletions
--- a/src/components/print/Print.vue
+++ b/src/components/print/Print.vue
@@ -95,6 +95,7 @@
                <el-button slot="reference" size="small" :type="'other' == curPaperType ? 'primary' : ''">自定义纸张</el-button>
              </el-popover>
            </el-button-group>
+            <el-button @click="isShowTemplate = true" type="warning" size="small" style="margin-left: 10px;">模板库</el-button>
          </div>
        </div>
        <div class="center-wrapper">
@@ -180,6 +181,28 @@
        </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">
+        <el-table-column slot="options" label="操作" align="center">
+          <template v-slot="{ row }">
+            <div class="table-options">
+              <el-button type="text" @click="updateTempate(row), isShowTemplate = 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>
  </div>
 </template>

@@ -249,6 +272,8 @@
        html: '',
        isShowPreview: false,
        hiprintTemplate: null,
+        isShowTemplate: false,
+        templateList: [],
        curPaper: {
          type: 'other',
          width: 200,
@@ -279,9 +304,18 @@
          size: 10,
          type: 1
        },
+        searchTemplate: {
+          current: 1,
+          size: 10,
+          type: 1
+        },
+        templateTotal: 0,
        isShowImage: false,
        tableData: [],
-        total: 0
+        total: 0,
+        templateColConfigs: [
+          { prop: 'name', label: '模板名称', align: 'center' }
+        ]
      }
    },

@@ -342,6 +376,8 @@
        this.buildLeftElement()
        this.buildDesigner()
        this.getConfig()
+
+        this.getTemplateList()
      }
    },

@@ -355,14 +391,28 @@
        }

        this.isShowDynamicForm = true
-
-        console.log(this.dynamicFrom)
      },

      removeField(index) {
        this.dynamicFromList.splice(index, 1)
      },

+      updateTempate(row) {
+
+        this.hiprintTemplate.update(JSON.parse(row.content))
+      },
+
+      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
+          }
+        })
+      },
+
      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) {
--- a/src/view/Home.vue
+++ b/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">
+          <el-submenu index="labels">
            <template slot="title">
              <i class="el-icon-s-goods"></i>
              <div slot="title" style="display: inline-block;">
-                <span>标签管理</span>
-                <el-button type="text" style="margin-left: 72px; padding: 0;" @click.stop="openMember">开通</el-button>
+                <span>高级功能</span>
              </div>
            </template>
-            <el-menu-item index="/labelsTemplate">模板管理</el-menu-item>
-            <el-menu-item index="/labelsPrint">标签打印</el-menu-item>
+            <el-submenu index="/labelsTemplate" style="padding-left: 15px;">
+              <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>
--- a/src/view/lables/Print.vue
+++ b/src/view/lables/Print.vue
@@ -78,11 +78,10 @@
        :height="height"
        @getList="() => {}"
        :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>
@@ -93,7 +92,7 @@
        title="打印数量"
        width="890px"
        @confirm="onConfirm">
-        <el-form class="ai-form" :model="form" ref="form" label-width="80px">
+        <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>
@@ -118,13 +117,13 @@
    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: '',
@@ -177,23 +176,52 @@

      toPrint(row) {
        this.isLoading = true
-        this.$http.post(`/api/template/detail?id=${row.templateId}`).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]
+        if (this.addType === '1') {
+          this.$http.post(`/api/template/getPage?productSkuId=${row.productSkuId}`).then(res => {
+            if (!res.data.records.length) {
+              this.isLoading = false
+              return this.$message.error('该SKU未配置模板')
+            }
+
+            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))
              }
            })
-            this.printData = {
-              template: JSON.parse(res.data.content),
-              data: 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
            }
-            this.isShow = true
-          }
-        })
+          })
+        }
      },

      onConfirm () {
@@ -242,8 +270,8 @@
          }).then(res => {
            if (res.errorCode == 1000000) {
              resolve({
-                list: res.result.list.map(v => v.deliveryOrderSn),
-                isHasNext: res.result.total && res.result.list.length && (res.result.list.length < 200)
+                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 })
@@ -266,8 +294,9 @@
            }
          }).then(res => {
            if (res.errorCode == 1000000) {
-              resolve(res.data.result.map(v => {
+              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,
@@ -306,12 +335,15 @@
        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).join(',')
+          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
        console.log(list)
      }
    }
--- a/src/view/lables/SkuManage.vue
+++ b/src/view/lables/SkuManage.vue
@@ -56,11 +56,18 @@
              @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"
        style="margin-top: 8px;"
        @getList="getList"
@@ -207,7 +214,8 @@
          current: 1,
          size: -1,
          productSkuId: '',
-          productSkcId: ''
+          productSkcId: '',
+          isShowWhite: ''
        },
        lableSearch: {
          current: 1,
@@ -262,6 +270,19 @@
    },

    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 {}
@@ -324,9 +345,8 @@
      },

      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
@@ -380,7 +400,7 @@
            mallId: this.lableSearch.mallId,
            anti: true,
            data: {
-              page: page,
+              page,
              pageSize: 200,
              catIds: catIds
            }
@@ -388,7 +408,7 @@
            if (res.errorCode == 1000000) {
              resolve({
                list: res.result.pageItems.map(v => v.productSkcId),
-                isHasNext: res.result.pageItems.length < 200
+                isHasNext: res.result.total && res.result.pageItems.length && (res.result.pageItems.length < 200 && res.result.total > 200)
              })
            } else {
              resolve({ list: [], isHasNext: false })
--- a/src/view/lables/Template.vue
+++ b/src/view/lables/Template.vue
@@ -76,7 +76,7 @@
      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,