上节课我们用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">费&nbsp;&nbsp;&nbsp;用&nbsp;&nbsp;&nbsp;报&nbsp;&nbsp;&nbsp;销&nbsp;&nbsp;&nbsp;单</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);
    });
}