上个小节，我们写好了查询部门分页的后端代码，本小节我们来完成前端部分的设计。
一、熟悉前端页面
我们首先看一下模型层定义的变量，除了有查询条件之外，还有与分页相关的变量，以及保存勾选的部门记录的变量，最后是表单验证的规则。总体上来看，跟用户管理页面的模型层差不多。
data: function() {
return {
dataForm: {
deptName: null
},
dataList: [],
pageIndex: 1,
pageSize: 10,
totalCount: 0,
dataListLoading: false,
dataListSelections: [],
addOrUpdateVisible: false,
dataRule: {
deptName: [
{ required: false, pattern: '^[a-zA-Z0-9\u4e00-\u9fa5]{1,10}$', message: '部门名称格式错误' }
]
}
};
},
接下来我们看看前端页面的表单控件是怎么定义的。当用户点击查询按钮的时候，触发点击事件对应的回调函数是searchHandle()，这个函数是我们一会儿要声明的。
<el-form :inline="true" :model="dataForm" :rules="dataRule" ref="dataForm">
<el-form-item prop="deptName">
<el-input
v-model="dataForm.deptName"
placeholder="部门名称"
size="medium"
class="input"
clearable="clearable"
/>
</el-form-item>
<el-form-item>
<el-button size="medium" type="primary" @click="searchHandle()">查询</el-button>
<el-button
size="medium"
type="primary"
:disabled="!isAuth(['ROOT', 'DEPT:INSERT'])"
@click="addHandle()"
>
新增
</el-button>
<el-button
size="medium"
type="danger"
:disabled="!isAuth(['ROOT', 'DEPT:DELETE'])"
@click="deleteHandle()"
>
批量删除
</el-button>
</el-form-item>
</el-form>
Ajax查询出来的数据要显示在表格控件中，我们来看看表格控件的代码。
<el-table
:data="dataList"
border
v-loading="dataListLoading"
@selection-change="selectionChangeHandle"
cell-style="padding: 4px 0"
size="medium"
style="width: 100%;"
>
<el-table-column
type="selection"
:selectable="selectable"
header-align="center"
align="center"
width="50"
/>
<el-table-column type="index" header-align="center" align="center" width="100" label="序号">
<template #default="scope">
<span>{{ (pageIndex - 1) * pageSize + scope.$index + 1 }}</span>
</template>
</el-table-column>
<el-table-column prop="deptName" header-align="center" align="center" label="部门名称" min-width="170" />
<el-table-column prop="tel" header-align="center" align="center" label="联系电话" min-width="170" />
<el-table-column prop="email" header-align="center" align="center" label="邮箱" min-width="270" />
<el-table-column header-align="center" align="center" label="员工数量" min-width="140">
<template #default="scope">
<span>{{ scope.row.emps }}人</span>
</template>
</el-table-column>
<el-table-column prop="desc" header-align="center" align="center" label="备注" min-width="400" />
<el-table-column header-align="center" align="center" width="150" label="操作">
<template #default="scope">
<el-button
type="text"
size="medium"
:disabled="!isAuth(['ROOT', 'DEPT:UPDATE'])"
@click="updateHandle(scope.row.id)"
>
修改
</el-button>
<el-button
type="text"
size="medium"
:disabled="!isAuth(['ROOT', 'DEPT:DELETE']) || scope.row.emps > 0"
@click="deleteHandle(scope.row.id)"
>
删除
</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>
二、加载页面数据
大家看好了，这才是你要写的代码，我们在dept.vue页面中，声明加载部门数据的封装方法。
loadDataList: function() {
let that = this;
that.dataListLoading = true;
let data = {
deptName: that.dataForm.deptName,
page: that.pageIndex,
length: that.pageSize
};
that.$http('dept/searchDeptByPage', '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();
}
为分页控件设置翻页和改变显示记录数量的回调函数。
<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>
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.deptName == '') {
this.dataForm.deptName = null;
}
if (this.pageIndex != 1) {
this.pageIndex = 1;
}
this.loadDataList();
} else {
return false;
}
});
},