神思者 ·上节课我们用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>代码块预览 复制
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
报销单页面的模型层部分并不复杂，我们来看一下。
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 }; },代码块预览 复制
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
上节课我们写好了后端代码，所以接下来我们要写弹窗页面的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; }); },代码块预览 复制
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
我在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>代码块预览 复制
- 1
- 2
- 3
- 4
我们顺手把关闭窗口按钮点击事件的回调函数cancel()给写了。
cancel: function() { this.visible = false; },代码块预览 复制
- 1
- 2
- 3
在reim.vue页面引用了reim_pdf.vue弹窗，所以我们接下来要把报销单按钮的点击事件回调函数给实现了。
<el-button type="text" size="medium" @click="pdfHandle(scope.row.id)" > 报销单 </el-button>代码块预览 复制
- 1
- 2
- 3
- 4
- 5
- 6
- 7
pdfHandle: function(id) { this.pdfVisible = true; this.$nextTick(() => { this.$refs.pdf.init(id); }); }代码块预览 复制
- 1
- 2
- 3
- 4
- 5
- 6
2025 imooc.com All Rights Reserved |