【新增】打印

2024-10-27 18:29:16 +08:00
parent 8900853066
commit 275f5f6abd
8 changed files with 1414 additions and 9602 deletions
--- a/src/assets/css/index.scss
+++ b/src/assets/css/index.scss
@@ -559,8 +559,10 @@ img {

  img {
    width: 180px;
+    height: 80px;
    margin-bottom: 10px;
    cursor: pointer;
+    object-fit: contain;
  }

  p {
--- a/src/components/print/Print.vue
+++ b/src/components/print/Print.vue
@@ -42,7 +42,6 @@
          </div>
          <div class="title">
            <span>素材</span>
-            <el-button type="primary" size="mini" @click="addField">添加</el-button>
          </div>
          <div class="left-item__wrapper">
            <el-popover
@@ -55,7 +54,12 @@
                <div>图片素材</div>
              </div>
              <div class="print-images">
-                <img src="../../assets/images/triman1.png" v-for="(item, index) in 20" :key="index"  @click="addImage(`https://foruda.gitee.com/avatar/1677050350324030848/5400665_ccsimple_1591166830.png!avatar200`)" />
+                <img
+                  :src="item.imgUrl"
+                  v-for="(item, index) in images"
+                  :key="index"
+                  :title="item.remark"
+                  @click="addImage(item.imgUrl)" />
              </div>
            </el-popover>
            <el-popover
@@ -68,7 +72,12 @@
                <div>文字素材</div>
              </div>
              <div class="print-images">
-                <p v-for="(item, index) in 20" @click="addText(`EVATOST CONSULTING LTD CONSULTING CONSULTING CONSULTING CONSULTING`, false)" :key="index">EVATOST CONSULTING LTD</p>
+                <p
+                  @click="addText(item.contents)"
+                  v-for="(item, index) in contents"
+                  :key="index">
+                  {{ item.contents }}
+                </p>
              </div>
            </el-popover>
          </div>
@@ -82,8 +91,9 @@
              v-for="(item, index) in dynamicFromList"
              :key="index"
              style="cursor: pointer;"
-              @click="addItemToCanvas(item.fieldValue)">
-              <div>{{ item.fieldValue }}</div>
+              @click="addItemToCanvas(item.fieldName)">
+              <div>{{ item.fieldName }}</div>
+              <span class="el-icon-error" @click.stop="removeField(index)"></span>
            </div>
          </div>
        </div>
@@ -142,9 +152,9 @@
      <el-form :model="dynamicFrom" ref="form" label-width="100px">
        <el-form-item
          label="数据名称："
-          :prop="`field${dynamicFromList.length}`"
-          :rules="[{ required: true, message: '请再次输入密码', trigger: 'blur' }]">
-          <el-input placeholder="请输入数据名称" type="text" v-model="dynamicFrom[`field${dynamicFromList.length}`]"></el-input>
+          :prop="`field_${dynamicFromList.length > 9 ? dynamicFromList.length + 1 : '0' + (dynamicFromList.length + 1)}`"
+          :rules="[{ required: true, message: '请输入数据名称', trigger: 'blur' }]">
+          <el-input placeholder="请输入数据名称" type="text" v-model="dynamicFrom[`field_${dynamicFromList.length > 9 ? dynamicFromList.length + 1 : '0' + (dynamicFromList.length + 1)}`]"></el-input>
        </el-form-item>
      </el-form>
    </ai-dialog>
@@ -167,6 +177,13 @@
        }
      },

+      params: {
+        type: Array,
+        default: () => {
+          return []
+        }
+      },
+
      printData: {
        type: Object,
        default: () => {
@@ -179,20 +196,22 @@
        type: Object,
        default: () => {
          return {
-            "index": 0,
-            "name": 1,
-            "height": 200,
-            "width": 200,
-            "paperHeader": 0,
-            "paperFooter": 547,
-            "printElements": [],
-            "paperNumberLeft": 500,
-            "paperNumberTop": 530,
-            "paperNumberDisabled": true,
-            "paperNumberContinue": true,
-            "fontFamily": "Microsoft YaHei",
-            "scale": 1,
-            "watermarkOptions": {}
+            "panels": [{
+              "index": 0,
+              "name": 1,
+              "height": 200,
+              "width": 200,
+              "paperHeader": 0,
+              "paperFooter": 547,
+              "printElements": [],
+              "paperNumberLeft": 500,
+              "paperNumberTop": 530,
+              "paperNumberDisabled": true,
+              "paperNumberContinue": true,
+              "fontFamily": "Microsoft YaHei",
+              "scale": 1,
+              "watermarkOptions": {}
+            }]
          }
        }
      },
@@ -244,10 +263,30 @@
        paperHeight: 200,
        isShowDynamicForm: false,
        dynamicFrom: {
-
        },
        dynamicFromList: [],
-        panel: null
+        panel: null,
+        contents: [],
+        images: []
+      }
+    },
+
+    watch: {
+      template: {
+        handler(value) {
+          if (value && this.hiprintTemplate && !this.isPrint) {
+            console.log(value)
+            const config = value.panels[0]
+            this.hiprintTemplate.update(value)
+            this.curPaper = {type: 'other', width: config.width, height: config.height}
+            this.hiprintTemplate.setPaper(config.width, config.height)
+
+            if (this.params) {
+              this.dynamicFromList = this.params
+            }
+          }
+        },
+        deep: true
      }
    },

@@ -267,31 +306,42 @@
    },

    mounted() {
-      hiprint.init({
-        providers: [defaultElementTypeProvider(), customProvider({})]
-      })
-
      if (this.isPrint) {
-        this.hiprintTemplate = newHiprintPrintTemplate('temulables', {
-          template: this.template
-        })
+        this.hiprintTemplate = newHiprintPrintTemplate('temulables')
      } else {
+        hiprint.init({
+          providers: [defaultElementTypeProvider(), customProvider({})]
+        })
        this.buildLeftElement()
        this.buildDesigner()
+        this.getConfig()
      }
-
-      this.getConfig()
    },

    methods: {
      addField() {
-        this.$set(this.dynamicFrom, `field${this.dynamicFromList.length}`, '')
+        const num = this.dynamicFromList.length > 9 ? this.dynamicFromList.length + 1 : `0${this.dynamicFromList.length + 1}`
+
+        if (this.dynamicFromList.length && !this.dynamicFromList.at(-1)[`field_${num}`]) {
+        } else {
+          this.$set(this.dynamicFrom, `field_${num}`, '')
+        }
+
        this.isShowDynamicForm = true
+
+        console.log(this.dynamicFrom)
+      },
+
+      removeField(index) {
+        this.dynamicFromList.splice(index, 1)
      },

      getConfig() {
-        this.$http.post(`/api/material/getPage`).then(res => {
-
+        this.$http.post(`/api/material/getPage?page=1&size=-1`).then(res => {
+          if (res.code === 0) {
+            this.images = res.data.records.filter(v => v.type === '1')
+            this.contents = res.data.records.filter(v => v.type === '0')
+          }
        })
      },

@@ -322,6 +372,7 @@
            width: 140,
            height: 20,
            coordinateSync: true,
+            textContentVerticalAlign: 'middle',
            widthHeightSync: true,
            hideTitle: true,
            fontFamily: 'Microsoft YaHei',
@@ -341,11 +392,11 @@
      onConfirm() {
        this.$refs.form.validate((valid) => {
          if (valid) {
+            const num = this.dynamicFromList.length > 9 ? this.dynamicFromList.length + 1 : `0${this.dynamicFromList.length + 1}`
            this.dynamicFromList.push({
-              fieldName: `field${this.dynamicFromList.length}`,
-              fieldValue: this.dynamicFrom[`field${this.dynamicFromList.length}`]
+              fieldValue: `field_${num}`,
+              fieldName: this.dynamicFrom[`field_${num}`]
            })
-
            this.isShowDynamicForm = false
          }
        })
@@ -566,6 +617,7 @@

          .item {
            display: flex;
+            position: relative;
            flex-direction: column;
            align-items: center;
            justify-content: center;
@@ -583,6 +635,15 @@
            i {
              margin-bottom: 10px;
            }
+
+            .el-icon-error {
+              position: absolute;
+              top: -6px;
+              right: -6px;
+              color: red;
+              font-size: 18px;
+              cursor: pointer;
+            }
          }

          ::v-deep(ul) {
--- a/src/components/print/template.js
+++ b/src/components/print/template.js
--- a/src/view/lables/AddTemplate.vue
+++ b/src/view/lables/AddTemplate.vue
@@ -19,7 +19,13 @@
      <ai-card title="标签模板" class="card" :hideTitle="true">
        <template #content>
          <div class="add-label__wrapper">
-            <Print ref="printRef" :template="template" :printData="printData" :isPrint="false"></Print>
+            <Print
+              ref="printRef"
+              :template="template"
+              :printData="printData"
+              :isPrint="false"
+              :params="params">
+            </Print>
          </div>
        </template>
      </ai-card>
@@ -39,9 +45,28 @@
    data () {
      return {
        name: '',
-        template: template,
+        template: {
+          "panels": [{
+            "index": 0,
+            "name": 1,
+            "height": 200,
+            "width": 200,
+            "paperHeader": 0,
+            "paperFooter": 547,
+            "printElements": [],
+            "paperNumberLeft": 500,
+            "paperNumberTop": 530,
+            "paperNumberDisabled": true,
+            "paperNumberContinue": true,
+            "fontFamily": "Microsoft YaHei",
+            "scale": 1,
+            "watermarkOptions": {}
+          }]
+        },
        printData: {},
        id: '',
+        info: {},
+        params: [],
        isLoading: false
      }
    },
@@ -53,6 +78,12 @@
        skuExtCode: 'AAA1100mWh-orange',
        skuSpecName: '8pcs'
      }
+
+      if (this.$route.query.id) {
+        this.id = this.$route.query.id
+
+        this.getInfo()
+      }
    },

    methods: {
@@ -60,6 +91,20 @@
        this.$router.go(-1)
      },

+      getInfo () {
+        this.$http.post(`/api/template/detail?id=${this.$route.query.id}`).then(res => {
+          if (res.code === 0) {
+            this.info = res.data
+            this.name = res.data.name
+            this.params = JSON.parse(res.data.params)
+
+            this.$nextTick(() => {
+              this.template = JSON.parse(res.data.content)
+            })
+          }
+        })
+      },
+
      preview () {
        this.$refs.printRef.preview()
      },
@@ -78,20 +123,23 @@
        }

        const data = this.$refs.printRef.save()
-        console.log(data)
-
        this.isLoading = true
-        this.$http.post('/api/template/addTemplate', {
+
+        const url = this.id ? `/api/template/modify` : `/api/template/addTemplate`
+        this.$http.post(url, {
          name: this.name,
          codes: data.html,
          content: JSON.stringify(data.json),
-          params: data.params
+          params: data.params,
+          id: this.id || ''
        }).then(res => {
          if (res.code === 0) {
            this.isLoading = false
+            this.$message.success('模板创建成功')
+            this.cancel()
+          } else {
+            this.isLoading = false
          }
-        }).catch(() => {
-          this.isLoading = false
        })
      },

--- a/src/view/lables/Print.vue
+++ b/src/view/lables/Print.vue
@@ -39,29 +39,28 @@
          <div class="search-item" v-show="addType === '2'">
            <label>SKC：</label>
            <el-input
-              v-model="search.SKC"
+              v-model="search.productSkcId"
              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>
+            <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.SKU"
+              v-model="search.productSkuId"
              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>
+            <el-button style="margin-left: 10px;" @click="getList" size="small" :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
@@ -70,7 +69,8 @@
        :isShowPagination="false"
        :height="height"
        @getList="() => {}"
-        @selection-change="handleSelectionChange">
+        @selection-change="handleSelectionChange"
+        :loading="isLoading">
        <el-table-column slot="options" label="操作" align="center" fixed="right" width="140px">
          <template v-slot="{ row }">
            <div class="table-options">
@@ -103,16 +103,17 @@
          { 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' }
        ],
-        tableData: [],
        search: {
          mallId: '',
-          SKC: '',
-          SKU: '',
-          page: 1
+          productSkuId: '',
+          productSkcId: '',
+          page: 1,
+          size: -1
        },
        addType: '1',
        isLoading: false,
@@ -140,45 +141,19 @@

    methods: {
      toPrint(row) {
-        this.$refs.printRef.toPrint(template, row)
-      },
-
-      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
+        this.isLoading = true
+        this.$http.post(`/api/template/detail?id=${row.templateId}`).then(res => {
+          this.isLoading = false
+          const params = JSON.parse(res.data.params)
+          const getValue = v => params.filter(e => e.fieldValue === v)[0].fieldName
+          Object.keys(row).forEach(key => {
+            if (params.findIndex(v => v.fieldValue === key) > -1) {
+              row[getValue(key)] = row[key]
            }
+          })
+
+          if (res.code === 0) {
+            this.$refs.printRef.toPrint(JSON.parse(res.data.content), row)
          }
        })
      },
@@ -191,15 +166,15 @@
        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
+      getList () {
+        this.$http.post('/api/templateSku/getPage', null, {
+          params: this.search
+        }).then(res => {
+          if (res.code === 0) {
+            this.lableList = res.data.records
+          }
        })
      },

--- a/src/view/lables/SkuManage.vue
+++ b/src/view/lables/SkuManage.vue
@@ -11,8 +11,23 @@
      <ai-search-bar>
        <template #left>
          <el-button type="primary" size="small" @click="chooseSkuList = [], isShow = true">添加</el-button>
-          <el-button type="warning" size="small" @click="toAdd(row.url)">导入</el-button>
-          <el-button type="danger" size="small" @click="toAdd(row.url)">导出</el-button>
+          <el-upload
+            action
+            :limit="1"
+            :show-file-list="false"
+            accept=".xls,.xlsx"
+            :auto-upload="false"
+            :file-list="fileList"
+            :on-change="onExcelChange">
+            <el-button size="small" type="danger">Excel导入</el-button>
+          </el-upload>
+          <json-excel
+            :data="skuList"
+            :fields="jsonFields"
+            name="SKU列表.xls"
+            worksheet="SKU列表">
+            <el-button size="small" type="warning" :disabled="!skuList.length">Excel导出</el-button>
+          </json-excel>
        </template>
        <template #right>
        </template>
@@ -25,23 +40,24 @@
        :size.sync="search.size"
        style="margin-top: 8px;"
        @getList="getList"
-        @selection-change="handleSelectionChange">
-        <el-table-column slot="productName" width="300px" :show-overflow-tooltip='true' label="商品名称"  fixed="left">
-          <template slot-scope="scope">
-            <div>
-              <el-image :src="scope.row.mainImageUrl" style="width: 40px; height: 40px" class="image" :preview-src-list="[scope.row.mainImageUrl]" />
-              {{ scope.row.productName }}
-            </div>
-          </template>
+        @selection-change="handleSelectionChange"
+        v-loading="pageShow">
+        <el-table-column
+          v-for="(item, index) in relationList"
+          :key="index"
+          :prop="item.field"
+          :show-overflow-tooltip="true"
+          :label="item.name"
+          align="center">
        </el-table-column>
-        <el-table-column slot="options" label="操作" align="center" fixed="right" width="240px">
+        <!-- <el-table-column slot="options" label="操作" align="center" fixed="right" width="240px">
          <template v-slot="{ row }">
            <div class="table-options">
              <el-button type="text" @click="toAdd(row.url)">编辑</el-button>
              <el-button type="text" @click="toDetail(row.url)">删除</el-button>
            </div>
          </template>
-        </el-table-column>
+        </el-table-column> -->
      </ai-table>
      <ai-dialog
        :visible.sync="isShow"
@@ -94,7 +110,6 @@
              v-model="skuReqParams.SKC"
              style="width: 250px"
              size="small"
-              v-throttle="() => {getSkuList()}"
              placeholder="多个查询请用户逗号分割"
              clearable
              @clear="getSkuList()"
@@ -109,7 +124,6 @@
              v-model="skuReqParams.SKU"
              style="width: 250px"
              size="small"
-              v-throttle="() => {getSkuList()}"
              placeholder="多个查询请用户逗号分割"
              clearable
              @clear="getSkuList()"
@@ -148,23 +162,17 @@

 <script>
  import { sendChromeAPIMessage } from '@/api/chromeApi'
+  import * as XLSX from 'xlsx'
+  import JsonExcel from 'vue-json-excel'
  export default {
    name: 'SkuManage',

+    components: {
+      JsonExcel
+    },
+
    data () {
      return {
-        colConfigs: [
-          { type: 'selection' },
-          // { slot: 'productName', label: '商品名称', width: '300px', align: 'left', fixed: 'left' },
-          // { prop: 'category', label: '分类', width: '140px', align: 'left', fixed: 'left' },
-          { prop: 'mallName', label: '店铺名称', align: 'left' },
-          { prop: 'labelCode', label: '条码编码', align: 'center' },
-          // { prop: 'productSkcId', label: 'SKC', align: 'left' },
-          { prop: 'productSkuId', label: 'SKU', align: 'center' },
-          // { prop: 'extCode', label: 'SKC货号', align: 'left' },
-          { prop: 'skuExtCode', label: 'SKU货号',  align: 'center' },
-          { prop: 'skuSpecName', label: '次销售属性', align: 'center' }
-        ],
        total: 0,
        search: {
          current: 1,
@@ -213,7 +221,11 @@
        },
        targetCatId: [],
        skuList: [],
-        chooseSkuList: []
+        chooseSkuList: [],
+        id: '',
+        fileList: [],
+        pageShow: false,
+        relationList: []
      }
    },

@@ -224,10 +236,45 @@
        }

        return this.$store.state.mallList.filter(v => v.mallId === this.lableSearch.mallId)[0]
+      },
+
+      colConfigs () {
+        const arr = this.isShow ? [] : this.relationList.map(v => {
+          return {
+            prop: v.field,
+            label: v.name,
+            align: 'center'
+          }
+        })
+
+        return [
+          { type: 'selection' },
+          { prop: 'mallName', label: '店铺名称', align: 'left' },
+          { prop: 'productName', label: '商品名称', align: 'center' },
+          { prop: 'labelCode', label: '条码编码', align: 'center' },
+          { prop: 'productSkcId', label: 'SKC', align: 'center' },
+          { prop: 'productSkuId', label: 'SKU', align: 'center' },
+          { prop: 'skuExtCode', label: 'SKU货号',  align: 'center' },
+          { prop: 'skuSpecName', label: '次销售属性', align: 'center' },
+          ...arr
+        ]
+      },
+
+      jsonFields () {
+        const obj = {}
+        this.colConfigs.filter(v => !!v.prop).forEach(v => {
+          obj[v.label] = v.prop
+        })
+
+        return {
+          ...obj
+        }
      }
    },

    created () {
+      this.id = this.$route.query.id || ''
+      this.getRelation()
      this.getList()
    },

@@ -236,6 +283,58 @@
        this.$router.push('/addLabelsTemplate')
      },

+      getRelation () {
+        this.$http.post(`/api/templateRelation/getRelation?templateId=${this.$route.query.id}`).then(res => {
+          if (res.code === 0) {
+            this.relationList = res.data
+
+            console.log(this.relationList)
+          }
+        })
+      },
+
+      readXLSX(file) {
+        return new Promise((resolve, reject) => {
+          const reader = new FileReader()
+
+          reader.readAsBinaryString(file)
+          reader.onload = evt => {
+            const data = evt.target.result
+            const workbook = XLSX.read(data, { type: 'binary' })
+            const ws = workbook.Sheets[workbook.SheetNames[0]]
+            const jsonData = XLSX.utils.sheet_to_json(ws)
+            resolve(jsonData)
+
+            this.fileList = []
+          }
+        })
+      },
+
+      onExcelChange (file) {
+        this.pageShow = true
+        this.readXLSX(file.raw).then(res => {
+          console.log(res)
+          this.$http.post(`/api/templateSku/updateBatchSku`, res.map(v => {
+            const result = {
+              templateId: this.id
+            }
+            Object.keys(this.jsonFields).forEach(item => {
+              result[this.jsonFields[item]] = v[item]
+            })
+
+            console.log(result)
+            return result
+          })).then(res => {
+            if (res.code === 0) {
+              this.$message.success('导入成功')
+              this.isShow = false
+              this.getList()
+            }
+            this.pageShow = false
+          })
+        })
+      },
+
      onSearchRest() {
        this.skuReqParams.SKC = ''
        this.skuReqParams.SKU = ''
@@ -324,6 +423,7 @@
                mallId: this.lableSearch.mallId,
                mallName: this.currMall.mallName,
                productName: v.productName,
+                productSkcId: v.labelCodeVO.productSkcId,
                productSkuId: v.labelCodeVO.productSkuId,
                labelCode: v.labelCodeVO.labelCode,
                skuExtCode: v.labelCodeVO.skuExtCode,
@@ -362,21 +462,31 @@
      },

      getList () {
-        this.$http.post('/api/learning/pluginPage', null, {
-          params: {
-            ...this.search
-          }
-        }).then(res => {
+        this.$http.post(`/api/templateSku/getPage?size=-1&templateId=${this.id}`).then(res => {
          if (res.code === 0) {
-            this.tableData = res.data.records
-            this.total = res.data.total
+            this.skuList = res.data.records
+            // this.total = res.data.total
          }
        })
      },

      onConfirm () {
-        this.skuList = this.chooseSkuList
-        this.isShow = false
+        if (!this.chooseSkuList.length) {
+          return this.$message.error('请选择SKU')
+        }
+
+        this.$http.post(`/api/templateSku/addBatchSku`, this.chooseSkuList.map(v => {
+          return {
+            ...v,
+            templateId: this.id
+          }
+        })).then(res => {
+          if (res.code === 0) {
+            this.$message.success('添加成功')
+            this.isShow = false
+            this.getList()
+          }
+        })
      }
    }
  }
--- a/src/view/lables/Template.vue
+++ b/src/view/lables/Template.vue
@@ -8,7 +8,7 @@
    <template slot="content">
      <ai-search-bar>
        <template #left>
-          <el-button type="primary" size="small" @click="toAdd">添加</el-button>
+          <el-button type="primary" size="small" @click="toAdd('')">添加</el-button>
        </template>
        <template #right>
        </template>
@@ -24,8 +24,8 @@
        <el-table-column slot="options" label="操作" align="center" fixed="right" width="220px">
          <template v-slot="{ row }">
            <div class="table-options">
-              <el-button type="text" @click="toAddSku(row.url)">添加SKU</el-button>
-              <el-button type="text" @click="toAdd(row.url)">编辑</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>
            </div>
          </template>
@@ -46,12 +46,7 @@
          { prop: 'count', label: '绑定SKU数量', align: 'center' },
          { prop: 'createTime', label: '创建时间', align: 'center' },
        ],
-        tableData: [
-          {
-            name: '电池',
-            count: 2
-          }
-        ],
+        tableData: [],
        total: 0,
        search: {
          current: 1,
@@ -65,12 +60,12 @@
    },

    methods: {
-      toAdd () {
-        this.$router.push('/addLabelsTemplate')
+      toAdd (id = '') {
+        this.$router.push(`/addLabelsTemplate?id=${id}`)
      },

-      toAddSku () {
-        this.$router.push('/skuManage')
+      toAddSku (id) {
+        this.$router.push(`/skuManage?id=${id}`)
      },

      getList () {
--- a/yarn.lock
+++ b/yarn.lock