12-3 查询请假分页数据（前端）_企业级在线办公系统-慕课网

上节课我们用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;
        }
    });
},