全部开发者教程

企业级在线办公系统

首页 慕课教程 企业级在线办公系统 企业级在线办公系统 附-2 查询线上会议分页数据(前端)

上个小节,我们写好了查询线上会议分页的后端代码,本小节我们来完成前端部分的设计。

一、熟悉前端页面

我们首先看一下模型层定义的变量,除了有查询条件之外,还有与分页相关的变量。总体上来看,跟用户管理页面的模型层差不多。

data: function() {
    return {
        dataForm: {
            date: null,
            mold: '全部会议'
        },
        dataList: [],
        pageIndex: 1,
        pageSize: 10,
        totalCount: 0,
        dataListLoading: false,
        addVisible: false,
        dataRule: {}
    };
},

接下来我们看看前端页面的表单控件是怎么定义的。当用户点击查询按钮的时候,触发点击事件对应的回调函数是searchHandle(),这个函数是我们一会儿要声明的。

<el-form :inline="true" :model="dataForm" :rules="dataRule" ref="dataForm" class="form">
    <el-form-item prop="date">
        <el-date-picker
            v-model="dataForm.date"
            type="date"
            placeholder="选择日期"
            class="input"
            size="medium"
        ></el-date-picker>
    </el-form-item>
    <el-form-item>
        <el-button size="medium" type="primary" @click="searchHandle()">查询</el-button>
        <el-button size="medium" type="danger" @click="addHandle()">会议申请</el-button>
    </el-form-item>
    <el-form-item class="mold">
        <el-radio-group v-model="dataForm.mold" size="medium" @change="changeHandle">
            <el-radio-button label="全部会议"></el-radio-button>
            <el-radio-button label="我的会议"></el-radio-button>
        </el-radio-group>
    </el-form-item>
</el-form>

Ajax查询出来的数据要显示在表格控件中,我们来看看表格控件的代码。

<el-table
    :data="dataList"
    border
    v-loading="dataListLoading"
    @selection-change="selectionChangeHandle"
    cell-style="padding: 4px 0"
    style="width: 100%;"
    size="medium"
>
    <el-table-column width="40px" prop="desc" header-align="center" align="center" type="expand">
        <template #default="scope">
            会议内容:{{ scope.row.desc }}
        </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="title" header-align="center" align="center" label="会议主题" width="450" />
    <el-table-column prop="creatorName" header-align="center" align="center" label="创建者" />
    <el-table-column prop="date" header-align="center" align="center" label="日期" />
    <el-table-column header-align="center" align="center" label="时间">
        <template #default="scope">
            <span>{{ scope.row.start }} ~ {{ scope.row.end }}</span>
        </template>
    </el-table-column>
    <el-table-column prop="num" header-align="center" align="center" label="人数" />
    <el-table-column prop="status" header-align="center" align="center" label="状态" />
    <el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
        <template #default="scope">
            <el-button
                type="text"
                size="medium"
                :disabled="!scope.row.canEnterMeeting"
                @click="enterHandle(scope.row.id, scope.row.uuid)"
            >
                进入
            </el-button>
            <el-button
                type="text"
                size="medium"
                :disabled="
                    !(
                        (scope.row.status == '待审批' || scope.row.status == '未开始') &&
                        scope.row.isCreator == 'true'
                    )
                "
                @click="deleteHandle(scope.row)"
            >
                删除
            </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>

二、加载页面数据

大家看好了,这才是你要写的代码,我们在online_meeting.vue页面中,声明加载线上会议数据的封装方法。

loadDataList: function() {
    let that = this;
    that.dataListLoading = true;
    let data = {
        mold: that.dataForm.mold,
        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('meeting/searchOnlineMeetingByPage', 'POST', data, true, function(resp) {
        let page = resp.page;
        for (let one of page.list) {
            if (one.status == 1) {
                one.status = '待审批';
            } else if (one.status == 3) {
                one.status = '未开始';
            } else if (one.status == 4) {
                one.status = '进行中';
            } else if (one.status == 5) {
                one.status = '已结束';
            }
            //计算会议是否可以进入
            //1.开会前15分钟可以进入会议室
            //2.会议状态必须是未开始或者进行中
            let minute = dayjs(new Date()).diff(dayjs(`${one.date} ${one.start}`), 'minute');
            if (
                one.mine == 'true' &&
                ((minute >= -15 && minute <= 0 && one.status == '未开始') || one.status == '进行中')
            ) {
                one.canEnterMeeting = true;
            } else {
                one.canEnterMeeting = false;
            }
        }
        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.name == '') {
                this.dataForm.name = null;
            }
            if (this.pageIndex != 1) {
                this.pageIndex = 1;
            }
            this.loadDataList();
        } else {
            return false;
        }
    });
},
changeHandle: function(val) {
    this.searchHandle();
},