神思者 ·上节课我们用Swagger测试了Web方法，可以得到返回的请假分页数据。如果用户没有LEAVE:SELECT或者ROOT权限，那么就只能看到自己的请假记录。作为管理者，可以看到所有人的请假记录。这节课，咱们把这些请假记录显示在前端页面上吧。
一、熟悉前端页面
请假管理栏目对应的是leave.vue页面，该页面的模型层部分我们都能看得懂。既有存放表单数据的变量，也有保存表单列表数据和表格数据的变量。请假管理页面有两个弹窗页面，分别是添加记录和生成PDF请假单的弹窗页面。
data: function() {
return {
pageIndex: 1,
pageSize: 10,
totalPage: 0,
dataListLoading: false,
dataListSelections: [],
dataForm: {
name: null,
deptId: null,
date: null,
type: null,
status: null
},
dataList: [],
deptList: [],
addVisible: false,
pdfVisible: false,
dataRule: {
name: [{ required: false, pattern: '^[\u4e00-\u9fa5]{1,10}$', message: '姓名格式错误' }]
}
};
},
接下来我们看看前端页面的表单控件是怎么定义的。当用户点击查询按钮的时候，触发点击事件对应的回调函数是searchHandle()，这个函数是我们一会儿要声明的。因为只有管理者才能查询别人的请假记录，所以姓名和部门这两个查询条件只有具备LEAVE:SELECT权限的用户可以使用。
<el-form :inline="true" :model="dataForm" :rules="dataRule" ref="dataForm">
<el-form-item prop="name">
<el-input
v-model="dataForm.name"
class="input"
placeholder="姓名"
size="medium"
:disabled="!isAuth(['ROOT', 'LEAVE:SELECT'])"
clearable="clearable"
></el-input>
</el-form-item>
<el-form-item>
<el-select
v-model="dataForm.deptId"
class="input"
placeholder="部门"
size="medium"
:disabled="!isAuth(['ROOT', 'LEAVE:SELECT'])"
clearable="clearable"
>
<el-option v-for="one in deptList" :key="one.id" :label="one.deptName" :value="one.id" />
</el-select>
</el-form-item>
<el-form-item>
<el-date-picker
v-model="dataForm.date"
style="width: 160px;"
type="date"
size="medium"
placeholder="请假日期"
clearable="clearable"
></el-date-picker>
</el-form-item>
<el-form-item>
<el-select v-model="dataForm.type" class="input" placeholder="类型" size="medium" clearable="clearable">
<el-option label="病假" value="1"></el-option>
<el-option label="事假" value="2"></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-select
v-model="dataForm.status"
class="input"
placeholder="状态"
size="medium"
clearable="clearable"
>
<el-option label="请假中" value="1"></el-option>
<el-option label="不同意" value="2"></el-option>
<el-option label="已同意" value="3"></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button @click="searchHandle()" type="primary" size="medium">查询</el-button>
<el-button type="danger" size="medium" @click="addHandle()">我要请假</el-button>
</el-form-item>
</el-form>
请假管理页面中的表格设计，并不复杂，列数也不多
<el-table
:data="dataList"
border="border"
v-loading="dataListLoading"
cell-style="padding: 4px 0"
style="width: 100%;"
size="medium"
>
<el-table-column width="40px" prop="reason" header-align="center" align="center" type="expand">
<template #default="scope">
请假原因：{{ scope.row.reason }}
</template>
</el-table-column>
<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="name"
header-align="center"
align="center"
label="姓名"
min-width="150"
></el-table-column>
<el-table-column
prop="deptName"
header-align="center"
align="center"
label="部门"
min-width="150"
></el-table-column>
<el-table-column
prop="start"
header-align="center"
align="center"
label="起始"
min-width="180"
></el-table-column>
<el-table-column
prop="end"
header-align="center"
align="center"
label="截止"
min-width="180"
></el-table-column>
<el-table-column
prop="type"
header-align="center"
align="center"
label="请假类型"
min-width="150"
></el-table-column>
<el-table-column prop="status" header-align="center" align="center" label="请假状态" min-width="120">
<template #default="scope">
<span v-if="scope.row.status == '请假中'" style="color: orange;">{{ scope.row.status }}</span>
<span v-if="scope.row.status == '已同意'" style="color: #17B3A3;">{{ scope.row.status }}</span>
<span v-if="scope.row.status == '不同意'" style="color: #f56c6c;">{{ scope.row.status }}</span>
</template>
</el-table-column>
<el-table-column header-align="center" align="center" width="120" label="请假单" min-width="120">
<template #default="scope">
<el-button
type="text"
size="medium"
v-if="scope.row.status == '已同意'"
@click="pdfHandle(scope.row.id)"
>
请假单
</el-button>
</template>
</el-table-column>
<el-table-column header-align="center" align="center" width="150" label="操作" min-width="120">
<template #default="scope">
<el-button
type="text"
size="medium"
:disabled="scope.row.status == '已同意' || scope.row.mine != true"
@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>
二、加载页面数据
大家看好了，这才是你要写的代码，我们在leave.vue页面中，声明加载请假分页数据的封装方法。
loadDataList: function() {
let that = this;
that.dataListLoading = true;
let data = {
name: that.dataForm.name,
deptId: that.dataForm.deptId,
date: that.dataForm.date,
type: that.dataForm.type,
status: that.dataForm.status,
page: that.pageIndex,
length: that.pageSize
};
if (that.dataForm.date != null && that.dataForm.date != '') {
data.date = dayjs(that.dataForm.date).format('YYYY-MM-DD');
}
that.$http('leave/searchLeaveByPage', 'POST', data, true, function(resp) {
let page = resp.page;
for (let one of page.list) {
if (one.type == 1) {
one.type = '病假';
} else if (one.type == 2) {
one.type = '事假';
}
if (one.status == 1) {
one.status = '请假中';
} else if (one.status == 2) {
one.status = '不同意';
} else if (one.status == 3) {
one.status = '已同意';
}
}
that.dataList = page.list;
that.totalCount = page.totalCount;
that.dataListLoading = false;
});
},
然后在本页面的生命周期函数created()中调用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.name == '') {
this.dataForm.name = null;
}
if (this.pageIndex != 1) {
this.pageIndex = 1;
}
this.loadDataList();
} else {
return false;
}
});
},
2024 imooc.com All Rights Reserved |