<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="请选择收费类型">
<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: ''
},
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({
...this.model,
templateStyle: this.content
}).then(res=> {
this.$message.warning(res.message);
this.backbtn()
}).finally(() => {
this.confirmLoading = false;
})
} else {
console.log('111111111111111111111')
}
})
},
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>