神思者 ·上节课我们在Swagger上面测试了Web方法，可以查询到报销分页数据。那么这节课咱们来写前端的JS代码，这样就能在VUE页面上看到报销分页数据了。
报销管理栏目对应的页面是reim.vue，这个页面还是以表格为主，并且还包含了查询条件。其中部门列表的数据需要通过Ajax查询出来，所以大家可以看一下页面的init()函数。
我们先来看一下前端页面的表单中都放置了什么控件，标签如下：
<el-form :inline="true" :model="dataForm" :rules="dataRule" ref="dataForm"> <el-form-item prop="name"> <el-input v-model="dataForm.name" placeholder="姓名" size="medium" class="input" clearable="clearable" /> </el-form-item> <el-form-item> <el-select v-model="dataForm.deptId" class="input" placeholder="部门" size="medium" clearable="clearable" > <el-option v-for="one in deptList" :label="one.deptName" :value="one.id" /> </el-select> </el-form-item> <el-form-item> <el-select v-model="dataForm.typeId" class="input" placeholder="类型" size="medium" clearable="clearable" > <el-option label="普通报销" value="1" /> <el-option label="差旅报销" value="2" /> </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 label="已否决" value="2" /> <el-option label="已同意" value="3" /> <el-option label="已归档" value="4" /> </el-select> </el-form-item> <el-form-item> <el-date-picker v-model="dataForm.date" type="daterange" range-separator="~" start-placeholder="开始日期" end-placeholder="结束日期" 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="primary" @click="addHandle()">新增</el-button> </el-form-item> </el-form>代码块预览 复制
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
页面中的表格标签稍微有些复杂，因为折叠面板中嵌套了表格。而且这个内嵌的表格使用DIV+CSS模拟的表格，这是为了避免用<table>标签，被强加上其他样式，导致排版错乱。
<el-table :data="dataList" border v-loading="dataListLoading" cell-style="padding: 4px 0" style="width: 100%;" size="medium" > <el-table-column width="40px" prop="content" header-align="center" align="center" type="expand" > <template #default="scope"> <div class="reim-table"> <div class="row"> <div class="title">序号</div> <div class="title">类别</div> <div class="title">报销项目</div> <div class="title">备注信息</div> <div class="title">金额</div> </div> <div class="row" v-for="(one, $index) in scope.row.content"> <div class="col">{{ $index + 1 }}</div> <div class="col">{{ one.type }}</div> <div class="col">{{ one.title }}</div> <div class="col">{{ one.desc }}</div> <div class="col">￥{{ one.money }}</div> </div> </div> </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="type" header-align="center" align="center" label="报销类型" min-width="150" /> <el-table-column prop="name" header-align="center" align="center" label="申请人" min-width="150" /> <el-table-column prop="deptName" header-align="center" align="center" label="所属部门" width="150" /> <el-table-column header-align="center" align="center" label="报销金额" min-width="120"> <template #default="scope"> <span>{{ scope.row.amount }}元</span> </template> </el-table-column> <el-table-column header-align="center" align="center" label="借款金额" min-width="120"> <template #default="scope"> <span>{{ scope.row.anleihen }}元</span> </template> </el-table-column> <el-table-column header-align="center" align="center" label="实际报销" min-width="120"> <template #default="scope"> <span>{{ scope.row.balance }}元</span> </template> </el-table-column> <el-table-column prop="status" header-align="center" align="center" label="状态" min-width="100" /> <el-table-column prop="createTime" header-align="center" align="center" label="申请日期" width="150" /> <el-table-column header-align="center" align="center" min-width="150" label="操作"> <template #default="scope"> <el-button type="text" size="medium" @click="pdfHandle(scope.row.id)"> 报销单 </el-button> <el-button type="text" size="medium" :disabled="!(['待审批', '已否决'].includes(scope.row.status) && scope.row.mine == 'true')" @click="deleteHandle(scope.row.id)" > 删除 </el-button> </template> </el-table-column> </el-table>代码块预览 复制
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
报销管理页面依旧保留了分页控件，所以一会儿我们要实现分页控件对应的两个回调函数。
<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>代码块预览 复制
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
接下来我们看一下reim.vue页面的模型层是怎么设计的。
data: function() { return { dataForm: { name: null, deptId: null, status: null, typeId: null, date: null }, deptList: [], dataList: [], pageIndex: 1, pageSize: 10, totalCount: 0, dataListLoading: false, dataRule: { name: [ { required: false, pattern: '^[\u4e00-\u9fa5]{1,10}$', message: '姓名格式错误' } ] }, addVisible: false, pdfVisible: false }; },代码块预览 复制
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
还是老规矩，我们要写好封装查询分页数据的JS函数，然后在created()生命周期函数中调用一下。
loadDataList: function() { let that = this; that.dataListLoading = true; let data = { name: that.dataForm.name, deptId: that.dataForm.deptId, typeId: that.dataForm.typeId, status: that.dataForm.status, page: that.pageIndex, length: that.pageSize }; if (that.dataForm.date != null && that.dataForm.date.length == 2) { let startDate = that.dataForm.date[0]; let endDate = that.dataForm.date[1]; data.startDate = dayjs(startDate).format('YYYY-MM-DD'); data.endDate = dayjs(endDate).format('YYYY-MM-DD'); } that.$http('reim/searchReimByPage', 'POST', data, true, function(resp) { let page = resp.page; let status = { 1: '待审批', 2: '已否决', 3: '已通过', 4: '已归档' }; let type = { 1: '普通报销', 2: '差旅报销' }; for (let one of page.list) { one.status = status[one.status]; one.type = type[one.typeId]; one.content = JSON.parse(one.content); } that.dataList = page.list; that.totalCount = page.totalCount; that.dataListLoading = false; }); },代码块预览 复制
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
created: function() { this.loadDeptList(); this.loadDataList(); }代码块预览 复制
- 1
- 2
- 3
- 4
按照老规矩，页面上有分页控件，那么对应的两个回调函数咱们就必须要声明一下。
sizeChangeHandle: function(val) { this.pageSize = val; this.pageIndex = 1; this.loadDataList(); }, currentChangeHandle: function(val) { this.pageIndex = val; this.loadDataList(); },代码块预览 复制
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
我们声明查询按钮点击事件对应的回调函数，写完这个函数大家就可以运行前后端项目，测试一下数据的查询和分页效果。
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; } }); },代码块预览 复制
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
2025 imooc.com All Rights Reserved |