【新增】标签目录和打印组件

src/view/lables/AddTemplate.vue

@@ -0,0 +1,95 @@
+<template>
+  <AiDetail class="add-label">
+    <template #title>
+      <ai-title title="添加标签" isShowBack :isShowBottomBorder="true" @onBackClick="cancel">
+        <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="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>
+        </template>
+      </ai-title>
+    </template>
+    <template #content>
+      <ai-card title="标签模板" class="card" :hideTitle="true">
+        <template #content>
+          <div class="add-label__wrapper">
+            <Print ref="printRef" :labels="labels"></Print>
+          </div>
+        </template>
+      </ai-card>
+    </template>
+  </AiDetail>
+</template>
+
+<script>
+  import Print from '@/components/print/Print'
+
+  export default {
+    components: {
+      Print
+    },
+
+    data () {
+      return {
+        labels: []
+      }
+    },
+
+    methods: {
+      cancel() {
+        this.$router.go(-1)
+      },
+
+      preview () {
+        this.$refs.printRef.getHtml()
+      },
+
+      savePdf () {
+        this.$refs.printRef.savePdf()
+      },
+
+      rotatePaper () {
+        this.$refs.printRef.rotatePaper()
+      },
+
+      saveTemplate () {
+        const json = this.$refs.printRef.exportJson()
+        console.log(json)
+      },
+
+      print () {
+        this.$refs.printRef.print()
+      },
+
+      clearPaper () {
+        this.$refs.printRef.clearPaper()
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .add-label {
+    ::v-deep(.ai-detail__content--wrapper) {
+      max-width: 100%;
+      height: 100%;
+      margin: 0 20px;
+    }
+
+    .card {
+      height: 100%;
+      overflow: hidden;
+
+      ::v-deep(.ai-card__body) {
+        flex: 1;
+        height: 100%;
+      }
+
+      .add-label__wrapper {
+        padding-bottom: 20px;
+      }
+    }
+  }
+</style>