add.vue

<template>
  <a-spin :spinning="confirmLoading">
    <div class="top-card">
      <span class="card-title">新增模板</span>
      <a-row type="flex" justify="start">
        <a-button @click="backbtn">返回</a-button>
        <a-button style="margin-left: 10px" type="primary" @click="handlePreviewPdf">预览</a-button>
        <a-button style="margin-left: 10px" type="primary" @click="handleSaveToPdf">导出pdf</a-button>
        <a-button style="margin-left: 10px" type="primary" @click="handleSave()">保存</a-button>
      </a-row>
    </div>
    <div class="template-contract-box">
      <a-form-model ref="form" :model="model" :rules="validatorRules">
        <a-row>
          <a-col :span="8">
            <a-form-model-item label="收费名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="templateName">
              <a-input placeholder="请输入收费名称" v-model="model.templateName"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="收费类型" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="templateType">
              <a-select style="width: 100%" v-model="model.templateType" placeholder="请选择收费类型" label-in-value>
                <a-select-option v-for="item in chargeList" :key="item.id" :value="item.id">{{item.typeName}}</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
      <my-editor-with-mention ref="editorHtml"></my-editor-with-mention>

      <vue-html2pdf
        :show-layout="false"
        :float-layout="true"
        :enable-download="true"
        :preview-modal="false"
        :html-to-pdf-options="pdfOptions"
        :paginate-elements-by-height="1400"
        filename="tempFileName"
        :pdf-quality="2"
        :manual-pagination="false"
        pdf-format="a4"
        pdf-orientation="landscape"
        pdf-content-width="98%"
        @progress="onProgress"
        ref="html2PdfDownLoad"
      >
        <section slot="pdf-content">
          <!-- PDF Content Here -->
          <span id="report" v-html="content"></span>
        </section>
      </vue-html2pdf>

      <vue-html2pdf
        :show-layout="false"
        :float-layout="true"
        :enable-download="false"
        :preview-modal="true"
        :html-to-pdf-options="pdfOptions"
        :paginate-elements-by-height="1400"
        filename="tempFileName"
        :pdf-quality="2"
        :manual-pagination="false"
        pdf-format="a4"
        pdf-orientation="landscape"
        pdf-content-width="98%"
        @progress="onProgress"
        ref="html2PdfPreview"
      >
        <section slot="pdf-content">
          <!-- PDF Content Here -->
          <span id="report" v-html="content"></span>
        </section>
      </vue-html2pdf>
    </div>
  </a-spin>
</template>

<script>
import {getChargeListApi, addReceiptTemplate} from '@/api/api'
import MyEditorWithMention from './components/MyEditorWithMention'
import VueHtml2pdf from "vue-html2pdf";
const tableHtml = '<table border="1" cellspacing="0" style="width: 100%;"><tbody><tr><th colSpan="1" rowSpan="1">序号</th><th colSpan="1" rowSpan="1">品名</th><th colSpan="1" rowSpan="1">产地品牌</th><th colSpan="1" rowSpan="1">规格型号</th><th colSpan="1" rowSpan="1">数量</th><th colSpan="1" rowSpan="1">税率</th><th colSpan="1" rowSpan="1">单位</th><th colSpan="1" rowSpan="1">单价</th><th colSpan="1" rowSpan="1">总金额（不含税）</th><th colSpan="1" rowSpan="1">税额</th><th colSpan="1" rowSpan="1">总金额（含税）</th><th colSpan="1" rowSpan="1">备注</th></tr><tr><td colspan="1" rowspan="1" style="text-align: center;">1</td><td colSpan="1" rowSpan="1"></td><td colSpan="1" rowSpan="1"></td><td colSpan="1" rowSpan="1"></td><td colSpan="1" rowSpan="1"></td><td colSpan="1" rowSpan="1"></td><td colSpan="1" rowSpan="1"></td><td colSpan="1" rowSpan="1"></td><td colSpan="1" rowSpan="1"></td><td colSpan="1" rowSpan="1"></td><td colSpan="1" rowSpan="1"></td><td colSpan="1" rowSpan="1"></td></tr><tr><td colSpan="1" rowSpan="1">合计</td><td colSpan="1" rowSpan="1"></td><td colSpan="1" rowSpan="1"></td><td colSpan="1" rowSpan="1"></td><td colSpan="1" rowSpan="1"></td><td colSpan="1" rowSpan="1"></td><td colSpan="1" rowSpan="1"></td><td colSpan="1" rowSpan="1"></td><td colSpan="1" rowSpan="1"></td><td colSpan="1" rowSpan="1"></td><td colSpan="1" rowSpan="1"></td><td colSpan="1" rowSpan="1"></td></tr><tr><td colSpan="3" rowSpan="1" style="text-align: center;">合同金额（大写）：</td><td colSpan="9" rowSpan="1"></td></tr></tbody></table>'

export default {
  name: 'templateContractAdd',
  inject:['closeCurrent'],
  components: {
    MyEditorWithMention,
    VueHtml2pdf
  },
  data() {
    return {
      content: '',
      previewModal: false,
      downloadFile: false,
      pdfOptions: {
        margin: [20, 10, 20, 10],
        filename: ''
      },
      confirmLoading: false,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      chargeList: [],
      model: {
        templateName: '',
        // templateType: {key: "1660940550578327554",label: "水费"},
        templateType: 'SFLX00004'
      },
      validatorRules: {
        templateName: [{ required: true, message: '请输入收费名称', trigger: 'blur' }],
        templateType: [{ required: true, message: '请选择收费类型', trigger: 'change' }]
      }
    }
  },
  methods: {
    async getChargeList() {
      let {result} = await getChargeListApi()
      this.chargeList = result
    },
    onProgress(e) {
      console.log(e)
    },
    backbtn() {
      this.closeCurrent()
    },
    handleSave() {
      this.$refs.form.validate(valid => {
        if(valid) {
          this.confirmLoading = true;
          addReceiptTemplate({
            templateName: this.model.templateName,
            templateType: this.model.templateType.key,
            typeName: this.model.templateType.label,
            templateStyle: this.content
          }).then(res=> {
            this.$message.warning(res.message);
            this.backbtn()
          }).finally(() => {
            this.confirmLoading = false;
          })
        }
      })
    },
    handleSaveToPdf() {
      this.pdfOptions.filename = '收费模板'
      this.content = this.$refs.editorHtml.curHtml.replace('<p><span data-w-e-type="mention" data-w-e-is-void data-w-e-is-inline data-value="产品列表" data-info="%7B%22id%22%3A%22e%22%7D">@产品列表</span></p>', tableHtml)
      console.log(this.content)
      this.$refs.html2PdfDownLoad.generatePdf();
    },
    handlePreviewPdf() {
      this.content = this.$refs.editorHtml.curHtml.replace('<p><span data-w-e-type="mention" data-w-e-is-void data-w-e-is-inline data-value="产品列表" data-info="%7B%22id%22%3A%22e%22%7D">@产品列表</span></p>', tableHtml)
      // this.downloadFile = false
      // this.previewModal = true
      this.$refs.html2PdfPreview.generatePdf()
    }
  },
  created () {
    this.getChargeList()
  },
  mounted() {
    this.content = this.$refs.editorHtml.curHtml
  }
}
</script>

<style lang="less" scoped>
.template-contract-box {
  background-color: #fff;
  padding: 25px 5px 5px;
  margin-top: 10px;
}
.top-card {
  -webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border: 1px solid #ebeef5;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 4px;
  padding: 15px 20px;

  .card-title {
    font-weight: 700;
    margin-right: 15px;
    color: #000;
  }
}
.box-card {
  width: 800px;
}
.page-break-after {
  page-break-after: always;
}
</style>