上节课我们用Swagger测试了Web方法，可以根据主键值查询出来报销单。这节课我们写前端JS代码，在弹窗页面显示报销单，并且用户还能下载PDF报销单。
一、熟悉前端页面
报销单弹窗是reim_pdf.vue页面，因为要生成PDF文件，所以页面DIV控件设置了id属性，而且属性值必须为pdfDom才行。
<el-dialog width="800px" :close-on-click-modal="false" v-model="visible" :show-close="false" center>
<div id="pdfDom">
<img :src="qrCodeBase64" class="qrCode" />
<h2 class="title">费 用 报 销 单</h2>
<div class="top-info-container">
<span class="info">报销部门：{{ dept }}</span>
<span class="info">报销人：{{ name }}</span>
<span class="info">报销日期：{{ date }}</span>
</div>
<div class="reim-table-container">
<table class="reim-table">
<tr align="center">
<th width="30%">报销项目</th>
<th width="34%">备注</th>
<th width="20%">类别</th>
<th width="16%">金额</th>
</tr>
<tr align="center" v-for="one in content">
<td align="left">{{ one.title }}</td>
<td align="left">{{ one.desc }}</td>
<td>{{ one.type }}</td>
<td align="left">{{ one.money != '' ? one.money + '元' : '' }}</td>
</tr>
<tr>
<th align="center">报销合计</th>
<td colspan="3">{{ amount }}元</td>
</tr>
<tr>
<th align="center">人民币大写</th>
<td colspan="3">{{ smalltoBIG(amount) }}</td>
</tr>
<tr>
<td colspan="5">
<div class="info-container">
<span class="info">借款金额：{{ anleihen }}元</span>
<span class="info">应退金额：{{ money_1 }}元</span>
<span class="info">应补金额：{{ money_2 }}元</span>
</div>
</td>
</tr>
</table>
</div>
<div class="bottom-info-container"></div>
<div class="bottom-info-container">
<span class="sig">会计主管：</span>
<span class="sig">复核：</span>
<span class="sig">出纳：</span>
<span class="sig">报销人：</span>
</div>
</div>
<template #footer>
<span class="dialog-footer">
<el-button type="primary" @click="getPdf()" size="medium">下载报销单</el-button>
<el-button size="medium" @click="cancel()">关闭窗口</el-button>
</span>
</template>
</el-dialog>
报销单页面的模型层部分并不复杂，我们来看一下。
data: function() {
return {
visible: false,
htmlTitle: '费用报销单',
dept: null,
name: null,
date: null,
amount: null,
balance: null,
anleihen: null,
money_1: 0,
money_2: 0,
content: [],
qrCodeBase64: null
};
},
二、加载报销单数据
上节课我们写好了后端代码，所以接下来我们要写弹窗页面的init()函数，发起Ajax请求查询数据，然后把数据显示到报销单之中。
init: function(id) {
let that = this;
that.visible = true;
that.dept = null;
that.name = null;
that.date = null;
that.amount = null;
that.balance = null;
that.anleihen = null;
that.money_1 = 0;
that.money_2 = 0;
that.content = [];
that.$http('reim/searchReimById', 'POST', { id: id }, true, function(resp) {
that.dept = resp.dept;
that.name = resp.name;
that.date = resp.date;
that.amount = resp.amount;
that.balance = resp.balance;
that.anleihen = resp.anleihen;
if (that.anleihen > that.amount) {
that.money_1 = that.anleihen - that.amount;
} else if (that.anleihen < that.amount) {
that.money_2 = that.amount - that.anleihen;
}
let content = JSON.parse(resp.content);
let temp = 5 - content.length;
for (let i = 0; i < temp; i++) {
content.push({ title: '', desc: '', type: '', money: '' });
}
that.content = content;
that.qrCodeBase64 = resp.qrCodeBase64;
});
},
三、下载报销单
我在main.js文件中封装了生成PDF文件的函数，所以我们调用getPdf()函数即可。
<span class="dialog-footer">
<el-button type="primary" @click="getPdf()" size="medium">下载报销单</el-button>
<el-button size="medium" @click="cancel()">关闭窗口</el-button>
</span>
我们顺手把关闭窗口按钮点击事件的回调函数cancel()给写了。
cancel: function() {
this.visible = false;
},
四、显示弹窗页面
在reim.vue页面引用了reim_pdf.vue弹窗，所以我们接下来要把报销单按钮的点击事件回调函数给实现了。
<el-button
type="text"
size="medium"
@click="pdfHandle(scope.row.id)"
>
报销单
</el-button>
pdfHandle: function(id) {
this.pdfVisible = true;
this.$nextTick(() => {
this.$refs.pdf.init(id);
});
}