【新增】打印

src/assets/css/index.scss

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

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)">
+              @click="addItemToCanvas(item.fieldName)">
-              <div>{{ item.fieldValue }}</div>
+              <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}`"
+          :prop="`field_${dynamicFromList.length > 9 ? dynamicFromList.length + 1 : '0' + (dynamicFromList.length + 1)}`"
-          :rules="[{ required: true, message: '请再次输入密码', trigger: 'blur' }]">
+          :rules="[{ required: true, message: '请输入数据名称', trigger: 'blur' }]">
-          <el-input placeholder="请输入数据名称" type="text" v-model="dynamicFrom[`field${dynamicFromList.length}`]"></el-input>
+          <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,
+            "panels": [{
-            "name": 1,
+              "index": 0,
-            "height": 200,
+              "name": 1,
-            "width": 200,
+              "height": 200,
-            "paperHeader": 0,
+              "width": 200,
-            "paperFooter": 547,
+              "paperHeader": 0,
-            "printElements": [],
+              "paperFooter": 547,
-            "paperNumberLeft": 500,
+              "printElements": [],
-            "paperNumberTop": 530,
+              "paperNumberLeft": 500,
-            "paperNumberDisabled": true,
+              "paperNumberTop": 530,
-            "paperNumberContinue": true,
+              "paperNumberDisabled": true,
-            "fontFamily": "Microsoft YaHei",
+              "paperNumberContinue": true,
-            "scale": 1,
+              "fontFamily": "Microsoft YaHei",
-            "watermarkOptions": {}
+              "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', {
+        this.hiprintTemplate = newHiprintPrintTemplate('temulables')
-          template: this.template
-        })
       } 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: `field_${num}`,
-              fieldValue: this.dynamicFrom[`field${this.dynamicFromList.length}`]
+              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) {

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
         })
       },
 

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: '',
+          productSkuId: '',
-          SKU: '',
+          productSkcId: '',
-          page: 1
+          page: 1,
+          size: -1
         },
         addType: '1',
         isLoading: false,
@@ -140,45 +141,19 @@
 
     methods: {
       toPrint(row) {
-        this.$refs.printRef.toPrint(template, row)
+        this.isLoading = true
-      },
+        this.$http.post(`/api/template/detail?id=${row.templateId}`).then(res => {
-
+          this.isLoading = false
-      requestSKUList() {
+          const params = JSON.parse(res.data.params)
-        return sendChromeAPIMessage({
+          const getValue = v => params.filter(e => e.fieldValue === v)[0].fieldName
-          url: 'bg-visage-mms/labelcode/pageQuery',
+          Object.keys(row).forEach(key => {
-          needMallId: true,
+            if (params.findIndex(v => v.fieldValue === key) > -1) {
-          mallId: this.search.mallId,
+              row[getValue(key)] = row[key]
-          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
             }
+          })
+
+          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(() => {
+      getList () {
-          this.lableList = []
+        this.$http.post('/api/templateSku/getPage', null, {
-          this.search.page = 1
+          params: this.search
-          this.isLoading = true
+        }).then(res => {
-          this.requestSKUList()
+          if (res.code === 0) {
-        }).catch(() => {
+            this.lableList = res.data.records
-          this.search.mallId = ''
+          }
-          this.isLoading = false
         })
       },
 

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-upload
-          <el-button type="danger" size="small" @click="toAdd(row.url)">导出</el-button>
+            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">
+        @selection-change="handleSelectionChange"
-        <el-table-column slot="productName" width="300px" :show-overflow-tooltip='true' label="商品名称"  fixed="left">
+        v-loading="pageShow">
-          <template slot-scope="scope">
+        <el-table-column
-            <div>
+          v-for="(item, index) in relationList"
-              <el-image :src="scope.row.mainImageUrl" style="width: 40px; height: 40px" class="image" :preview-src-list="[scope.row.mainImageUrl]" />
+          :key="index"
-              {{ scope.row.productName }}
+          :prop="item.field"
-            </div>
+          :show-overflow-tooltip="true"
-          </template>
+          :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, {
+        this.$http.post(`/api/templateSku/getPage?size=-1&templateId=${this.id}`).then(res => {
-          params: {
-            ...this.search
-          }
-        }).then(res => {
           if (res.code === 0) {
-            this.tableData = res.data.records
+            this.skuList = res.data.records
-            this.total = res.data.total
+            // this.total = res.data.total
           }
         })
       },
 
       onConfirm () {
-        this.skuList = this.chooseSkuList
+        if (!this.chooseSkuList.length) {
-        this.isShow = false
+          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()
+          }
+        })
       }
     }
   }

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="toAddSku(row.id)">添加SKU</el-button>
-              <el-button type="text" @click="toAdd(row.url)">编辑</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: [
+        tableData: [],
-          {
-            name: '电池',
-            count: 2
-          }
-        ],
         total: 0,
         search: {
           current: 1,
@@ -65,12 +60,12 @@
     },
 
     methods: {
-      toAdd () {
+      toAdd (id = '') {
-        this.$router.push('/addLabelsTemplate')
+        this.$router.push(`/addLabelsTemplate?id=${id}`)
       },
 
-      toAddSku () {
+      toAddSku (id) {
-        this.$router.push('/skuManage')
+        this.$router.push(`/skuManage?id=${id}`)
       },
 
       getList () {