temu-plugin/src/view/lables/AddTemplate.vue

<template>
  <AiDetail class="add-label">
    <template #title>
      <ai-title title="添加模板" isShowBack :isShowBottomBorder="true" @onBackClick="cancel">
        <template #center>
          <label>模板名称：</label>
          <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>
          <el-button @click="clearPaper" size="small" type="danger">清空纸张</el-button>
          <el-button @click="saveTemplate" size="small" type="primary">保存</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" :template="template" :printData="printData" :isPrint="false"></Print>
          </div>
        </template>
      </ai-card>
    </template>
  </AiDetail>
</template>

<script>
  import Print from '@/components/print/Print'
  import template from '@/components/print/template'

  export default {
    components: {
      Print
    },

    data () {
      return {
        name: '',
        template: template,
        printData: {}
      }
    },

    mounted() {
      this.printData = {
        labelCode: 96778555251,
        productSkuId: 6606980005,
        skuExtCode: 'AAA1100mWh-orange',
        skuSpecName: '8pcs'
      }
    },

    methods: {
      cancel() {
        this.$router.go(-1)
      },

      preview () {
        this.$refs.printRef.getHtml()
      },

      savePdf () {
        this.$refs.printRef.savePdf()
      },

      rotatePaper () {
        this.$refs.printRef.rotatePaper()
      },

      saveTemplate () {
        if (!this.name) {
          return this.$message.error('模板名称不能为空')
        }

        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>