【新增】打印组件

src/view/lables/AddTemplate.vue

@@ -1,13 +1,15 @@
 <template>
   <AiDetail class="add-label">
     <template #title>
-      <ai-title title="添加标签" isShowBack :isShowBottomBorder="true" @onBackClick="cancel">
+      <ai-title title="添加模板" isShowBack :isShowBottomBorder="true" @onBackClick="cancel">
         <template #rightBtn>
+          <label>模板名称：</label>
+          <el-input placeholder="请输入模板名称" size="small" v-model="name" style="width: 200px; margin-right: 300px;"></el-input>
           <el-button @click="preview" size="small" type="danger">预览</el-button>
           <el-button @click="savePdf" size="small" type="primary">下载pdf</el-button>
-          <el-button @click="saveTemplate" size="small" type="primary">保存</el-button>
           <el-button @click="print" size="small">打印</el-button>
           <el-button @click="clearPaper" size="small" type="danger">清空纸张</el-button>
+          <el-button @click="saveTemplate" size="small" type="primary">保存</el-button>
         </template>
       </ai-title>
     </template>
@@ -15,7 +17,7 @@
       <ai-card title="标签模板" class="card" :hideTitle="true">
         <template #content>
           <div class="add-label__wrapper">
-            <Print ref="printRef" :labels="labels"></Print>
+            <Print ref="printRef" :template="template" :isPrint="false"></Print>
           </div>
         </template>
       </ai-card>
@@ -25,6 +27,7 @@
 
 <script>
   import Print from '@/components/print/Print'
+  import template from '@/components/print/template'
 
   export default {
     components: {
@@ -33,7 +36,8 @@
 
     data () {
       return {
-        labels: []
+        name: '',
+        template: template
       }
     },
 
@@ -55,6 +59,10 @@
       },
 
       saveTemplate () {
+        if (!this.name) {
+          return this.$message.error('模板名称不能为空')
+        }
+
         const json = this.$refs.printRef.exportJson()
         console.log(json)
       },