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

src/view/lables/AddTemplate.vue

@@ -2,9 +2,11 @@
   <AiDetail class="add-label">
     <template #title>
       <ai-title title="添加模板" isShowBack :isShowBottomBorder="true" @onBackClick="cancel">
-        <template #rightBtn>
+        <template #center>
           <label>模板名称：</label>
-          <el-input placeholder="请输入模板名称" size="small" v-model="name" style="width: 200px; margin-right: 300px;"></el-input>
+          <el-input placeholder="请输入模板名称" size="small" v-model="name" style="width: 200px;"></el-input>
+        </template>
+        <template #rightBtn>
           <el-button @click="preview" size="small" type="danger">预览</el-button>
           <el-button @click="savePdf" size="small" type="primary">下载pdf</el-button>
           <el-button @click="print" size="small">打印</el-button>
@@ -17,7 +19,7 @@
       <ai-card title="标签模板" class="card" :hideTitle="true">
         <template #content>
           <div class="add-label__wrapper">
-            <Print ref="printRef" :template="template" :isPrint="false"></Print>
+            <Print ref="printRef" :template="template" :printData="printData" :isPrint="false"></Print>
           </div>
         </template>
       </ai-card>
@@ -37,7 +39,17 @@
     data () {
       return {
         name: '',
-        template: template
+        template: template,
+        printData: {}
+      }
+    },
+
+    mounted() {
+      this.printData = {
+        labelCode: 96778555251,
+        productSkuId: 6606980005,
+        skuExtCode: 'AAA1100mWh-orange',
+        skuSpecName: '8pcs'
       }
     },
 
@@ -67,7 +79,7 @@
         console.log(json)
       },
 
-      print () {
+      print() {
         this.$refs.printRef.print()
       },