上个小节我们查询出来了某个审批任务的文字详情信息，这些信息绑定到R对象返回给了前端页面。那么这节课咱们就来写JS代码，获取到详情信息，然后显示在展开的面板上。

一、熟悉折叠面板的内容

因为在线审批页面能审批的工作流程目前分为会议申请、请假申请和报销申请，这三种申请的详情信息都不相同，所以我们要设计带有三种详情信息的表格，然后用v-if控制显示哪个详情信息。

我们去看看在线审批页面中折叠面板的三个表格都是怎么设计的。

<el-table
    ref="approvalTable"
    :data="dataList"
    border="border"
    v-loading="dataListLoading"
    cell-style="padding: 4px 0"
    size="medium"
    style="width: 100%;"
    //点击折叠按钮的时候触发事件的回调函数，我们在回调函数中发送Ajax请求查询数据
    @expand-change="expand"
>
    <el-table-column prop="remark" header-align="center" align="center" type="expand">
        <template #default="scope">
            <div class="content-container">
                <table class="content-table">
                    <tbody v-if="scope.row.type == '会议申请'">
                        <tr>
                            <th><span>主题</span></th>
                            <td :title="scope.row.title">{{ scope.row.title }}</td>
                        </tr>
                        <tr>
                            <th><span>内容</span></th>
                            <td :title="content.desc">{{ content.desc }}</td>
                        </tr>
                        <tr>
                            <th><span>日期</span></th>
                            <td>{{ content.date }}   {{ content.start }} ~ {{ content.end }}</td>
                        </tr>
                        <tr>
                            <th><span>地点</span></th>
                            <td>{{ content.place }}</td>
                        </tr>
                        <tr>
                            <th><span>参会人</span></th>
                            <td :title="content.members">{{ content.members }}</td>
                        </tr>
                        <tr>
                            <th><span>审批结果</span></th>
                            <td>
                                <span v-if="scope.row.status != '已结束'">审批中</span>
                                <span v-if="scope.row.status == '已结束' && scope.row.result == '同意'">
                                    已同意
                                </span>
                                <span v-if="scope.row.status == '已结束' && scope.row.result == '不同意'">
                                    已拒绝
                                </span>
                            </td>
                        </tr>
                    </tbody>
                    <tbody v-if="scope.row.type == '员工请假'">
                        <tr>
                            <th><span>请假原因</span></th>
                            <td :title="content.reason">{{ content.reason }}</td>
                        </tr>
                        <tr>
                            <th><span>请假类型</span></th>
                            <td>{{ content.type == 1 ? '病假' : '事假' }}</td>
                        </tr>
                        <tr>
                            <th><span>申请人</span></th>
                            <td>{{ content.name }}</td>
                        </tr>
                        <tr>
                            <th><span>起始时间</span></th>
                            <td>{{ content.start }}</td>
                        </tr>
                        <tr>
                            <th><span>截止时间</span></th>
                            <td>{{ content.end }}</td>
                        </tr>
                        <tr>
                            <th><span>审批结果</span></th>
                            <td>
                                <span v-if="scope.row.status != '已结束'">审批中</span>
                                <span v-if="scope.row.status == '已结束' && scope.row.result == '同意'">
                                    已同意
                                </span>
                                <span v-if="scope.row.status == '已结束' && scope.row.result == '不同意'">
                                    已拒绝
                                </span>
                            </td>
                        </tr>
                    </tbody>
                    <tbody v-if="scope.row.type == '报销申请'">
                        <tr>
                            <th><span>申请人</span></th>
                            <td>{{ content.name }}</td>
                        </tr>
                        <tr>
                            <th><span>报销金额</span></th>
                            <td>{{ content.amount }}元</td>
                        </tr>
                        <tr>
                            <th><span>借款金额</span></th>
                            <td>{{ content.anleihen }}元</td>
                        </tr>
                        <tr>
                            <th><span>实际金额</span></th>
                            <td>{{ content.balance }}元</td>
                        </tr>
                        <tr>
                            <th><span>报销类型</span></th>
                            <td>{{ content.type }}</td>
                        </tr>
                        <tr>
                            <th><span>审批结果</span></th>
                            <td>
                                <span v-if="scope.row.status != '已结束'">审批中</span>
                                <span v-if="scope.row.status == '已结束' && scope.row.result == '同意'">
                                    已同意
                                </span>
                                <span v-if="scope.row.status == '已结束' && scope.row.result == '不同意'">
                                    已拒绝
                                </span>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <el-image
                    class="archive"
                    v-if="content.hasOwnProperty('files')"
                    :src="content.files[0].url"
                    :preview-src-list="archiveList"
                ></el-image>
                <el-image class="bpmn" :src="bpmnUrl" :preview-src-list="bpmnList"></el-image>
            </div>
        </template>
    </el-table-column>
    ……
</el-table>

二、编写展开事件回调函数

当用户点击折叠按钮的时候会触发expand-change事件，我们要动手写回调函数，发送同步的Ajax请求查询任务详情信息。

expand: function(row, expandedRows) {
    //判断展开
    if (expandedRows.length>0) {
        let that = this;
        let data = {
            instanceId: row.processId,
            type: row.type,
            status: row.status
        };
        that.$http('approval/searchApprovalContent', 'POST', data, false, function(resp) {
            let content = resp.content;
            that.content = content;
        });
    }
},