Vue+SpringBoot分页列表数据和详情数据的实现

avatar 2020年05月18日16:39:43 6 10240 views
博主分享免费Java教学视频,B站账号:Java刘哥 ,长期提供技术问题解决、项目定制:本站商品点此
本文介绍一下 Vue + SpringBoot 中如何实现一个分页列表数据,然后通过点击查看进入详情页面的功能实现。
同样还是前两天帮朋友写的项目里的代码。
代码地址:https://github.com/saysky/petition-system-server

一、效果图

1.列表

2.详情
点击查看进入详情


二、前端代码

朋友的需求是一个信访系统,里面有一些业务逻辑判断,大家可以自己去除掉
1、列表 vue 文件
ReportList.vue
<template>
<div>
<div class="crumbs">
<el-breadcrumb separator="/">
<el-breadcrumb-item>案件列表</el-breadcrumb-item>
</el-breadcrumb>
</div>
<el-row>
<el-col :span="16">
&nbsp;
</el-col>
<el-col :span="8" align="right">
<el-input placeholder="请输入搜索内容" v-model="keywords" class="input-with-select" clearable>
<el-button slot="append" icon="el-icon-search" @click="queryList">搜索</el-button>
</el-input>
</el-col>
</el-row>
<el-row>
<el-tabs v-model="state" @tab-click="handleClick">
<el-tab-pane label="待审批" name="0"></el-tab-pane>
<el-tab-pane label="初审通过" name="1"></el-tab-pane>
<el-tab-pane label="审批通过" name="2"></el-tab-pane>
<el-tab-pane label="驳回" name="-1"></el-tab-pane>
</el-tabs>
<el-table
:data="tableData"
style="width: 100%">
<el-table-column
v-for="(data,index) in tableHeader"
:key="index"
:prop="data.prop"
:label="data.label"
:min-width="data['min-width']"
:align="data.align">
</el-table-column>
<el-table-column
label="操作"
min-width="120">
<template slot-scope="scope">
<el-button type="primary" size="mini" @click="readReport(scope.row.id)">查看</el-button>
</template>
</el-table-column>
</el-table>
<br>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="pagination.pageIndex"
:page-sizes="[5, 10, 20, 30, 40]"
:page-size=pagination.pageSize
layout="total, sizes, prev, pager, next, jumper"
:total=pagination.total>
</el-pagination>
</el-row>
</div>
</template>
<script>
// import Util from '../../utils/utils';
import {formatDateTime, responseText, debounce} from '../../utils/utils.js';
export default {
name: "reportList",
data() {
return {
state: '0',
pageNo: '',
pageSize: '',
keywords: '',
pagination: {
pageIndex: 1,
pageSize: 10,
total: 0,
},
label: '待审批',
tableData: [],
loginLoading: false,
tableHeader: [
{
prop: 'id',
label: '编号',
align: 'left'
},
{
prop: 'title',
label: '标题',
'min-width': 300,
align: 'left'
},
{
prop: 'userRealName',
label: '姓名',
align: 'left'
},
{
prop: 'createTime',
label: '创建时间',
'min-width': 150,
align: 'left'
},
{
prop: 'categoryTitle',
label: '类型',
align: 'left'
},
{
prop: 'approvalState',
label: '状态',
align: 'left'
},
]
};
},
components: {},
created() {
this.queryList();
},
mounted() {
this.$watch('queryKeyword', debounce(() => {
this.pagination.pageIndex = 1;
this.queryList();
}, 1000));
},
methods: {
handleClick(tab, event) {
this.queryList();
},
queryList() {
this.loginLoading = true;
let params = {
state: this.state,
keywords: this.keywords,
pageNo: this.pagination.pageIndex,
pageSize: this.pagination.pageSize
};
const self = this;
self.$http.get('/api/report/paging', {params}).then(function (response) {
console.log(response);
let result = response.data;
self.pagination.total = result.data.total;
responseText(result.data.records).forEach((item) => {
if (item.approvalState == 0) {
item.approvalState = '待审核';
} else if (item.approvalState == 1) {
item.approvalState = '初审通过';
} else if (item.approvalState == 2) {
item.approvalState = '审核通过';
} else if (item.approvalState == -1) {
item.approvalState = '驳回';
}
});
self.tableData = responseText(result.data.records);
}).then(function (error) {
console.log(error);
})
},
readReport(id) {
return this.$router.push({
path: '/readReport',
name: 'readReport',
params: {
id: id
},
})
},
handleSizeChange(val) {
this.pagination.pageSize = val;
this.pagination.pageIndex = 1;
this.queryList();
},
handleCurrentChange(val) {
this.pagination.pageIndex = val;
this.queryList();
},
}
}
</script>
<style>
</style>

2、ReadReport
<template>
<div>
<div class="crumbs">
<el-breadcrumb separator="/">
<el-breadcrumb-item>信访列表</el-breadcrumb-item>
<el-breadcrumb-item>信访详情</el-breadcrumb-item>
</el-breadcrumb>
</div>
<div class="userContent">
<el-row>
<el-col :span="12">
<el-form ref="form" :model="form" label-width="100px">
<el-form-item prop="title" label="标题">
<el-input v-model="form.title" disabled></el-input>
</el-form-item>
<el-form-item prop="categoryTitle" label="内容分类">
<el-input v-model="form.categoryTitle" disabled></el-input>
</el-form-item>
<el-form-item prop="address" label="问题发生地">
<el-input v-model="form.place" disabled></el-input>
</el-form-item>
<el-form-item prop="content" label="信访内容">
<el-input type="textarea" :autosize="{minRows:1,maxRows:50}" v-model="form.content" disabled></el-input>
</el-form-item>
<el-form-item prop="attachmentUrl" label="附件">
<el-input v-model="form.attachmentUrl" disabled></el-input>
<el-button size="mini" type="primary" v-if="hasAttachment" @click="download()">下载
</el-button>
</el-form-item>
<el-form-item prop="approvalState" label="审核状态">
<el-input v-model="form.approvalState" disabled></el-input>
</el-form-item>
<el-form-item prop="approvalTime" label="审核时间">
<el-input v-model="form.approvalTime" disabled ></el-input>
</el-form-item>
<el-form-item prop="approvalSuggestion" label="审核意见">
<el-input type="textarea" :rows="5" v-model="form.approvalSuggestion" ></el-input>
</el-form-item>
<el-form-item id="operateBox" >
<el-button type="primary" @click="pass()">通过</el-button>
<el-button type="danger" @click="refuse()">驳回</el-button>
<el-button @click="back()">返回</el-button>
</el-form-item>
</el-form>
</el-col>
<el-col :span="12" style="padding-left: 100px;">
<el-form ref="form" label-width="100px" >
<el-form-item prop="realName" label="姓名">
<el-input v-model="userForm.realName" disabled></el-input>
</el-form-item>
<el-form-item prop="name" label="登录名">
<el-input v-model="userForm.name" disabled></el-input>
</el-form-item>
<el-form-item prop="password" label="密码">
<el-input v-model="userForm.password" disabled></el-input>
</el-form-item>
<el-form-item prop="sex" label="性别">
<el-input v-model="userForm.sex" disabled></el-input>
</el-form-item>
<el-form-item prop="phone" label="电话">
<el-input v-model="userForm.phone" disabled></el-input>
</el-form-item>
<el-form-item prop="email" label="电子邮箱">
<el-input v-model="userForm.email" disabled></el-input>
</el-form-item>
<el-form-item prop="address" label="联系地址">
<el-input v-model="userForm.address" disabled></el-input>
</el-form-item>
<el-form-item prop="card" label="身份证号码">
<el-input v-model="userForm.card" disabled></el-input>
</el-form-item>
</el-form>
</el-col>
</el-row>
</div>
</div>
</template>
<script>
import Util from '../../utils/utils';
export default {
data() {
return {
id: this.$route.params.id,
hasAttachment: true,
form: {
title: '',
categoryId: '',
categoryTitle: '',
place: '',
content: '',
attachmentUrl: '',
approvalState: '',
approvalTime: '',
approvalSuggestion: '',
},
userForm: {
realName: '',
name: '',
password: '',
sex: '',
phone: '',
email: '',
address: '',
card: ''
},
}
},
methods: {
getLoginUser() {
const self = this;
self.$http.get('/api/user/current').then(function (response) {
let result = response.data;
let item = result.data;
if (item == null) {
this.$router.push('/login')
}
}).then(function (error) {
console.log(error);
})
},
getReportData(id) {
if (id == null) {
return this.$router.push({
path: '/reportList'
})
}
const self = this;
let params = {id: id};
self.$http.get('/api/report/details', {params}).then(function (response) {
console.log(response);
let result = response.data;
let item = result.data;
if (item.approvalState == 0) {
item.approvalState = '待审核';
} else if (item.approvalState == 1) {
item.approvalState = '初审通过';
} else if (item.approvalState == 2) {
item.approvalState = '审核通过';
} else if (item.approvalState == -1) {
item.approvalState = '驳回';
}
if (item.attachmentUrl == null || item.attachmentUrl == '') {
item.attachmentUrl = '无';
self.hasAttachment = false;
}
self.form = item;
self.userForm = item.user;
}).then(function (error) {
console.log(error);
})
},
download() {
let a = document.createElement('a')
a.target = '_blank';
a.href = this.form.attachmentUrl;
a.click();
},
pass() {
const self = this;
let suggestion = self.form.approvalSuggestion;
let id = self.form.id;
let params = {
id: id,
approvalSuggestion: suggestion
};
self.$http.post('/api/report/pass', params).then(function (response) {
console.log(response);
if (response.data.code == 0) {
self.$message.success(response.data.msg);
self.getReportData(id);
} else {
self.$message.error(response.data.msg);
}
}).then(function (error) {
console.log(error);
})
},
refuse() {
const self = this;
let suggestion = self.form.approvalSuggestion;
let id = self.form.id;
if (suggestion == '' || suggestion == null) {
self.$message.error('请输入审核意见');
}
let params = {
id: id,
approvalSuggestion: suggestion
};
self.$http.post('/api/report/refuse', params).then(function (response) {
console.log(response);
if (response.data.code == 0) {
self.getReportData(id);
self.$message.success(response.data.msg);
} else {
self.$message.error(response.data.msg);
}
}).then(function (error) {
console.log(error);
})
},
back() {
this.$router.push('/reportList');
}
},
//初始化
created() {
this.getReportData(this.$route.params.id);
}
}
</script>
<style>
.userContent {
margin: 0 auto;
}
.el-input.is-disabled .el-input__inner {
background-color: #ffffff;
border-color: #ffffff;
color: #222;
cursor: pointer;
}
.el-textarea.is-disabled .el-textarea__inner {
background-color: #ffffff;
border-color: #ffffff;
color: #222;
cursor: pointer;
}
</style>

3.路由配置
import Vue from 'vue';
import Router from 'vue-router';
Vue.use(Router);
export default new Router({
routes: [
{
path: '/',
redirect: '/login'
},
{
path: '/home',
component: resolve => require(['../components/common/Home.vue'], resolve),
children:[
{
path: '/',
component: resolve => require(['../components/page/Home.vue'], resolve)
},
{
path: '/userCenter',
component: resolve => require(['../components/page/UserCenter.vue'], resolve) // 拖拽列表组件
},
{
path: '/changePassword',
component: resolve => require(['../components/page/ChangePassword.vue'], resolve)
},
{
path: '/reportList',
component: resolve => require(['../components/page/ReportList.vue'], resolve)
},
{
path: '/createReport',
name: 'createReport',
component: resolve => require(['../components/page/CreateReport.vue'], resolve)
},
{
path: '/readReport',
name: 'readReport',
component: resolve => require(['../components/page/ReadReport.vue'], resolve)
},
]
},
{
path: '/register',
component: resolve => require(['../components/page/Register.vue'], resolve)
},
{
path: '/login',
component: resolve => require(['../components/page/Login.vue'], resolve)
},
]
})

主要关注 reportList 和 readReport

三、后端代码如下

这里贴一下完整的代码
ReportController
package com.example.sens.controller;
import com.baomidou.mybatisplus.plugins.Page;
import com.example.sens.config.annotation.SystemLog;
import com.example.sens.entity.Report;
import com.example.sens.entity.User;
import com.example.sens.enums.ApprovalState;
import com.example.sens.enums.LogTypeEnum;
import com.example.sens.enums.UserType;
import com.example.sens.service.ReportService;
import com.example.sens.service.UserService;
import com.example.sens.util.Response;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
import javax.servlet.http.HttpSession;
import java.util.Date;
import java.util.Objects;
/**
* @author 言曌
* @date 2020-05-08 13:10
*/
@RestController
@RequestMapping("/api/report")
public class ReportController {
@Autowired
private ReportService reportService;
@Autowired
private UserService userService;
/**
* 分页列表
*
* @param pageNo
* @param pageSize
* @return
*/
@GetMapping("/paging")
public Response<Page<Report>> paging(@RequestParam(value = "keywords", required = false, defaultValue = "") String keywords,
@RequestParam(value = "state", required = false, defaultValue = "") Integer state,
@RequestParam(value = "pageNo", required = false, defaultValue = "1") Integer pageNo,
@RequestParam(value = "pageSize", required = false, defaultValue = "10") Integer pageSize,
HttpSession session) {
User user = (User) session.getAttribute("session_user");
if (user == null) {
return Response.no("请先登录");
}
Page pageable = new Page(pageNo, pageSize);
Page<Report> page;
if (UserType.USER.getValue().equalsIgnoreCase(user.getType())) {
// 用户
page = reportService.findAll(user.getId(), keywords, state, pageable);
} else {
// 管理员
page = reportService.findAll(keywords, state, pageable);
}
return Response.yes(page);
}
/**
* 创建
*
* @param report
* @return
*/
@PostMapping("/create")
@SystemLog(type = LogTypeEnum.CREATE_REPORT)
public Response createReport(@RequestBody Report report, HttpSession session) {
User user = (User) session.getAttribute("session_user");
if (user == null) {
return Response.no("请先登录");
}
report.setUserId(user.getId());
report.setCreateTime(new Date());
report.setApprovalState(ApprovalState.NOT_APPROVAL.getValue());
report.setApprovalTime(null);
reportService.saveByReport(report);
return Response.yes();
}
/**
* 案件详情
*
* @param id
* @return
*/
@GetMapping("/details")
public Response<Report> delete(@RequestParam("id") Long id, HttpSession session) {
Report report = reportService.findByReportId(id);
if (report == null) {
return Response.no("案件不存在");
}
report.setUser(userService.findByUserId(report.getUserId()));
User user = (User) session.getAttribute("session_user");
if (user == null) {
return Response.no("请先登录");
}
Boolean allowApproval = false;
if (Objects.equals(user.getType(), UserType.STAFF.getValue())) {
// 待审核,普通员工
if (user.getStaffLevel() == 1 && report.getApprovalState() == 0) {
allowApproval = true;
} else if(user.getStaffLevel() == 2 && report.getApprovalState() == 1) {
allowApproval = true;
}
}
report.setAllowApproval(allowApproval);
return Response.yes(report);
}
/**
* 审批通过案件
*
* @param reportParam
* @return
*/
@PostMapping("/pass")
@SystemLog(type = LogTypeEnum.PASS_REPORT)
public Response<Boolean> pass(@RequestBody Report reportParam,
HttpSession session) {
User user = (User) session.getAttribute("session_user");
if (user == null) {
return Response.no("请先登录");
}
if (Objects.equals(user.getType(), UserType.USER.getValue())) {
return Response.no("只有管理员可以审批");
}
Report report = reportService.findByReportId(reportParam.getId());
if (report == null) {
return Response.no("案件不存在");
}
report.setApprovalSuggestion(reportParam.getApprovalSuggestion());
if (user.getStaffLevel() == 1) {
report.setApprovalState(1);
} else {
report.setApprovalState(2);
report.setApprovalTime(new Date());
}
reportService.saveByReport(report);
return Response.yes(true);
}
/**
* 审批驳回案件
*
* @param reportParam
* @return
*/
@PostMapping("/refuse")
@SystemLog(type = LogTypeEnum.REFUSE_REPORT)
public Response<Boolean> refuse(@RequestBody Report reportParam,
HttpSession session) {
User user = (User) session.getAttribute("session_user");
if (user == null) {
return Response.no("请先登录");
}
if (Objects.equals(user.getType(), UserType.USER.getValue())) {
return Response.no("只有管理员可以审批");
}
Report report = reportService.findByReportId(reportParam.getId());
report.setApprovalSuggestion(reportParam.getApprovalSuggestion());
if (report == null) {
return Response.no("案件不存在");
}
report.setApprovalState(ApprovalState.REFUSE.getValue());
report.setApprovalTime(new Date());
reportService.saveByReport(report);
return Response.yes(true);
}
}

User
package com.example.sens.entity;
import lombok.Data;
import java.io.Serializable;
import java.util.Date;
/**
* <pre>
* 用户信息
* </pre>
*/
@Data
public class User implements Serializable {
private static final long serialVersionUID = -5144055068797033748L;
/**
* 用户ID
*/
private Long id;
/**
* 用户名
*/
private String name;
/**
* 密码
*/
private String password;
/**
* 姓名
*/
private String realName;
/**
* 性别
*/
private String sex;
/**
* 电子邮箱
*/
private String email;
/**
* 身份证号码
*/
private String card;
/**
* 地址
*/
private String address;
/**
* 手机号
*/
private String phone;
/**
* 用户类型:群众user, 员工staff
*/
private String type;
/**
* 员工等级:普通1,领导2
*/
private Integer staffLevel;
/**
* 创建时间
*/
private Date createTime;
/**
* 生日
*/
private Date birth;
}

Response
package com.example.sens.util;
import lombok.Data;
@Data
public class Response<T> {
private Integer code;
private String msg;
private T data;
public Response() {
}
public Response(Integer code) {
this.code = code;
}
public Response(Integer code, String msg) {
this.code = code;
this.msg = msg;
}
public Response(Integer code, String msg, T data) {
this.code = code;
this.msg = msg;
this.data = data;
}
public static <T> Response<T> yes() {
return new Response(0, "操作成功");
}
public static <T> Response<T> yes(String msg,T data) {
return new Response(0, msg, data);
}
public static <T> Response<T> yes(T data) {
return new Response(0, "操作成功", data);
}
public static <T> Response<T> no() {
return new Response(-1, "操作失败");
}
public static <T> Response<T> no(String msg) {
return new Response(-1, msg);
}
}

其他 Service 和 Dao 层就不贴了,这里主要是介绍 vue 的使用,能看懂是什么意思就行了。
需要完整代码,可以联系博主
  • 微信
  • 交流学习,资料分享
  • weinxin
  • 个人淘宝
  • 店铺名:言曌博客咨询部

  • (部分商品未及时上架淘宝)
avatar

发表评论

avatar 登录者:匿名
匿名评论,评论回复后会有邮件通知

  

已通过评论:0   待审核评论数:0