上个小节我们通过Swagger测试Web方法，拿到了审批任务的分页数据。这节课咱们就先来把分页数据显示到表格中，像什么审批详情信息之类的，下节课咱们再去做。

一、熟悉页面

approval.vue是在线审批页面，我们先来看看模型层定义了什么东西？

data: function() {
    return {
        pageIndex: 1,
        pageSize: 10,
        totalPage: 0,
        dataListLoading: false,
        archiveVisible: false,
        dataForm: {
            creatorName: null,
            type: null,
            status: '待审批',
            instanceId: null
        },
        dataList: [],
      
        //某个审批详情的文字详情
        content: {},
        //图片预览控件用到的数据
        bpmnUrl: null,
        bpmnList: [],
        archiveList: [],
      
        dataRule: {
            creatorName: [{ required: false, pattern: '^[\u4e00-\u9fa5]{2,20}$', message: '姓名格式错误' }],
            instanceId: [{ required: false, pattern: '^[0-9A-Za-z\\-]{36}$', message: '实例编号格式错误' }]
        }
    };
},

查询在线审批分页记录的条件一共有四个，我们看看表单控件是怎么定义的。

<el-form :inline="true" :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="searchHandle()">
    <el-form-item prop="creatorName">
        <el-input v-model="dataForm.creatorName" size="medium" placeholder="申请人" clearable="clearable" />
    </el-form-item>
    <el-form-item prop="type">
        <el-select v-model="dataForm.type" placeholder="类别" size="medium" clearable="clearable">
            <el-option label="会议申请" value="会议申请"></el-option>
            <el-option label="员工请假" value="员工请假"></el-option>
            <el-option label="报销申请" value="报销申请"></el-option>
        </el-select>
    </el-form-item>
    <el-form-item prop="instanceId">
        <el-input v-model="dataForm.instanceId" size="medium" placeholder="实例编号" clearable="clearable" />
    </el-form-item>
    <el-form-item>
        <el-button type="primary" size="medium" @click="searchHandle()">查询</el-button>
    </el-form-item>
    <el-form-item class="mold">
        <el-radio-group v-model="dataForm.status" size="medium" @change="searchHandle()">
            <el-radio-button label="待审批"></el-radio-button>
            <el-radio-button label="已审批"></el-radio-button>
            <el-radio-button label="已结束"></el-radio-button>
        </el-radio-group>
    </el-form-item>
</el-form>

在线审批页面的主体部分是表格，所以视图层的标签不难理解。

<el-table
    ref="approvalTable"
    :data="dataList"
    border="border"
    v-loading="dataListLoading"
    cell-style="padding: 4px 0"
    size="medium"
    style="width: 100%;"
    @expand-change="expand"
>
    <el-table-column prop="remark" header-align="center" align="center" type="expand">
        <template #default="scope">
            <!--此处省略-->
        </template>
    </el-table-column>
    <el-table-column type="index" header-align="center" align="center" label="序号" width="100" />
    <el-table-column prop="title" header-align="center" align="center" label="审批事项" min-width="400" />
    <el-table-column prop="type" header-align="center" align="center" label="类别" min-width="180" />
    <el-table-column prop="creatorName" header-align="center" align="center" label="申请人" min-width="150" />
    <el-table-column prop="createDate" header-align="center" align="center" label="发起日期" min-width="180" />
    <el-table-column prop="status" header-align="center" align="center" label="状态" min-width="150">
        <template #default="scope">
            <span v-if="scope.row.status != '已结束'" style="color: orange;">审批中</span>
            <span v-if="scope.row.status == '已结束' && scope.row.result == '同意'" style="color: #17B3A3;">
                已同意
            </span>
            <span v-if="scope.row.status == '已结束' && scope.row.result == '不同意'" style="color: #f56c6c;">
                已拒绝
            </span>
        </template>
    </el-table-column>
    <el-table-column header-align="center" align="center" width="150" label="操作">
        <template #default="scope">
            <el-button
                type="text"
                size="medium"
                v-if="isAuth(['ROOT', 'WORKFLOW:APPROVAL']) && dataForm.status == '待审批' && !scope.row.filing"
                @click="approveHandle(scope.row.taskId)"
            >
                审批
            </el-button>
            <el-button
                type="text"
                size="medium"
                v-if="dataForm.status != '待审批'"
                @click="viewHandle(scope.row)"
            >
                查看
            </el-button>
            <el-button
                type="text"
                size="medium"
                v-if="isAuth(['ROOT', 'FILE:ARCHIVE']) && scope.row.filing"
                @click="archive(scope.row.taskId)"
            >
                归档
            </el-button>
        </template>
    </el-table-column>
</el-table>

分页控件跟用户管理页面也差不多，基本上本项目所有页面的分页控件写法都是类似的。

<el-pagination
    @size-change="sizeChangeHandle"
    @current-change="currentChangeHandle"
    :current-page="pageIndex"
    :page-sizes="[10, 20, 50]"
    :page-size="pageSize"
    :total="totalCount"
    layout="total, sizes, prev, pager, next, jumper"
></el-pagination>

二、加载页面数据

大家看好了，这才是你要写的代码，我们在approval.vue页面中，声明加载审批数据的封装方法。

loadDataList: function() {
    let that = this;
    that.dataListLoading = true;
    let data = {
        creatorName: that.dataForm.creatorName,
        type: that.dataForm.type,
        status: that.dataForm.status,
        instanceId: that.dataForm.instanceId,
        page: that.pageIndex,
        length: that.pageSize
    };
    that.$http('approval/searchTaskByPage', 'POST', data, true, function(resp) {
        let page = resp.page;
        that.dataList = page.list;
        that.totalCount = page.totalCount;
        that.dataListLoading = false;
    });
},

然后在本页面的生命周期函数create()中调用loadDataList()，实现进入页面就在表格中加载无条件查询的第一页审批记录。

created: function() {
    this.loadDataList();
}

为分页控件设置翻页和改变显示记录数量的回调函数。

sizeChangeHandle: function(val) {
    this.pageSize = val;
    this.pageIndex = 1;
    this.loadDataList();
},
currentChangeHandle: function(val) {
    this.pageIndex = val;
    this.loadDataList();
},

三、有条件查询数据

我们声明查询按钮点击事件对应的回调函数，写完这个函数大家就可以运行前后端项目，测试一下数据的查询和分页效果。

searchHandle: function() {
    this.$refs['dataForm'].validate(valid => {
        if (valid) {
            this.$refs['dataForm'].clearValidate();
            if (this.dataForm.creatorName == '') {
                this.dataForm.creatorName = null;
            }
            if (this.dataForm.instanceId == '') {
                this.dataForm.instanceId = null;
            }
            if (this.pageIndex != 1) {
                this.pageIndex = 1;
            }
            this.loadDataList();
        } else {
            return false;
        }
    });
},