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" :loading="isLoading">保存</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"
              :params="params">
            </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: {
          "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
      }
    },

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

      if (this.$route.query.id) {
        this.id = this.$route.query.id

        this.getInfo()
      }
    },

    methods: {
      cancel() {
        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()
      },

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

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

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

        const data = this.$refs.printRef.save()
        this.isLoading = true

        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,
          id: this.id || ''
        }).then(res => {
          if (res.code === 0) {
            this.isLoading = false
            this.$message.success('模板创建成功')
            this.cancel()
          } else {
            this.isLoading = false
          }
        })
      },

      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>