上个小节我们通过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;
}
});
},