体检上传
前期准备
自定义一个数据库，存放体检的报告内容
自定义一个pojo类，实现数据的封装
public class Report {
private Integer id;//主键
private Date reportLoadDate;//报告上传日期
private Integer memberId;//会员id
private String fileName;//文件名称
private String reportStatus;//报告是否上传状态
...
}
字符集乱码解决
package com.yy.filter;
import javax.servlet.*;
import javax.servlet.annotation.WebFilter;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
/**
* 解决全站乱码问题，处理所有的请求
*/
@WebFilter("/*")
public class CharchaterFilter implements Filter {
@Override
public void init(FilterConfig filterConfig) throws ServletException {
}
@Override
public void doFilter(ServletRequest req, ServletResponse rep, FilterChain filterChain) throws IOException, ServletException {
//将父接口转为子接口
HttpServletRequest request = (HttpServletRequest) req;
HttpServletResponse response = (HttpServletResponse) rep;
//获取请求方法
String method = request.getMethod();
//解决post请求中文数据乱码问题
if(method.equalsIgnoreCase("post")){
request.setCharacterEncoding("utf-8");
}
//解决get请求中文数据乱码问题
if(method.equalsIgnoreCase("get")){
request.setCharacterEncoding("utf-8");
}
//处理响应乱码
response.setContentType("text/html;charset=utf-8");
filterChain.doFilter(request,response);
}
@Override
public void destroy() {
}
}
vue实现的页面
<!DOCTYPE html>
<html>
<head>
<!-- 页面meta -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>客户体检信息健康管理系统</title>
<meta name="description" content="客户体检信息健康管理系统">
<meta name="keywords" content="客户体检信息健康管理系统">
<meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
<!-- 引入样式 -->
<link rel="stylesheet" href="../plugins/elementui/index.css">
<link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="../css/style.css">
</head>
<body class="hold-transition">
<div id="app">
<div class="content-header">
<h1>会员管理<small>体检上传</small></h1>
<el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
<el-breadcrumb-item>会员管理</el-breadcrumb-item>
<el-breadcrumb-item>体检上传</el-breadcrumb-item>
</el-breadcrumb>
</div>
<div class="app-container">
<div class="box">
<div class="filter-container">
<el-input placeholder="档案号/姓名/手机号" v-model="pagination.queryString" style="width: 200px;" class="filter-item"></el-input>
<el-button @click="_findPage()" class="dalfBut">查询</el-button>
</div>
<el-table size="small" current-row-key="id" :data="dataList" stripe highlight-current-row>
<el-table-column type="index" align="center" label="序号"></el-table-column>
<el-table-column prop="orderDate" label="体检时间" align="center"></el-table-column>
<el-table-column prop="fileNumber" label="档案号" align="center"></el-table-column>
<el-table-column prop="name" label="姓名" align="center"></el-table-column>
<el-table-column prop="phoneNumber" label="手机号码" align="center"></el-table-column>
<el-table-column prop="setmealName" label="体检套餐" align="center"></el-table-column>
<el-table-column prop="reportStatus" label="报告状态" align="center"></el-table-column>
<el-table-column label="操作" align="center">
<template slot-scope="scope">
<!-- 通过scop.row拿取当前这条列的数据，对应与这条列的json对象-->
<!-- <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">上传报告</el-button>-->
<!-- :data="scope.row"-->
<el-upload
class="avatar-uploader"
action="/report/upload.do"
:auto-upload="autoUpload"
name="reportFile"
:show-file-list="false"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload">
<el-button style="position: absolute;left: 10px;top:10px;" size="mini" type="primary" @click="memberId = scope.row.id">报告上传</el-button>
</el-upload>
<!-- 在handleAvatarSuccess里面进行axios访问，这里不需要点击事件，
点击的作用就是将当前的scope.row进行赋值给data里面的一个变量-->
<el-button style="position: absolute;right: 20px;top:10px;" size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<div class="pagination-container">
<el-pagination
class="pagiantion"
@current-change="handleCurrentChange"
:current-page="pagination.currentPage"
:page-size="pagination.pageSize"
layout="total, prev, pager, next, jumper"
:total="pagination.total">
</el-pagination>
</div>
</div>
</div>
</div>
</body>
<!-- 引入组件库 -->
<script src="../js/vue.js"></script>
<script src="../plugins/elementui/index.js"></script>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script src="../js/axios-0.18.0.js"></script>
<script>
var vue = new Vue({
el: '#app',
data:{
autoUpload:true,//自动上传
fileName:null,//模型数据，上传的文件名称
pagination: {//分页相关模型数据
currentPage: 1,//当前页码
pageSize:10,//每页显示的记录数
total:0,//总记录数
queryString:null//查询条件
},
dataList: [],//当前页要展示的分页列表数据
formData: {},//表单数据
dialogFormVisible: false,//增加表单是否可见
dialogFormVisible4Edit:false,//编辑表单是否可见
memberId:null,
rules: {//校验规则
code: [{ required: true, message: '项目编码为必填项', trigger: 'blur' }],
name: [{ required: true, message: '项目名称为必填项', trigger: 'blur' }]
}
},
//钩子函数，VUE对象初始化完成后自动执行
created() {
this.findPage();//vue对象初始化完成后调用分页查询方法，完成分页查询
},
methods: {
//文件上传成功后的钩子，response为服务端返回的值，file为当前上传的文件封装成的js对象
handleAvatarSuccess(response, file) {
// alert("上传成功之后");
//response为服务端返回的值，是elementUI自带的
//为模型数据imageUrl进行赋值，用于页面图片预览
this.fileName = 'http://r1mmj5zj3.hn-bkt.clouddn.com/' + response.data;
//弹出提示
this.$message({
type:response.flag ? 'success':'error',
message:response.message
});
console.log("上传之后的的文件名称："+this.fileName);
console.log("参数file:"+file.date);
console.log("参数response："+response.data)
// this.handleUpdate(row);
// alert(this.memberId);
console.log("发送请求之后的数据："+this.memberId+",filename= "+this.fileName);
//获取当前会员的id，通过这个id进行操作
axios.get("/report/update.do?memberId="+this.memberId+"&fileName="+this.fileName).then((res)=>{
//判断这个controller是否执行成功
// alert("现在是update在执行："+this.fileName+",numberId="+this.memberId)
console.log("update里面的：filename="+this.fileName+" ,memberId="+this.memberId);
if (res.data.flag){
//进行回显，基于vue的数据绑定实现，可以查看上面的内容可以发现都是双向绑定formData内容的
//操作成功
this.$message({
type:'success',
message:res.data.message
});
this.findPage();
}else {
//查询失败，弹出提示
this.$message.error(res.data.message);
}
}).catch((r)=>{
this.showMessage(r);
});
},
//上传图片之前执行
beforeAvatarUpload(file) {
// alert("上传成功之前")
// this.handleAvatarSuccess()
// alert("file.id")
// const isJPG = file.type === 'image/jpeg';
// const isLt2M = file.size / 1024 / 1024 < 2;
// if (!isJPG) {
// this.$message.error('上传套餐图片只能是 JPG 格式!');
// }
// if (!isLt2M) {
// this.$message.error('上传套餐图片大小不能超过 2MB!');
// }
// return isJPG && isLt2M;
},
//为查询按钮独立的设置一个查询方法,因为之前的查询会导致在不是首页查询时，查询不到所有的内容
_findPage(){
this.pagination.currentPage = 1;
this.findPage();
},
//分页查询
findPage() {
//封装请求参数数据（页码、每页显示的条数、查询条件），进行传送queryPageBean
var param = {
currentPage: this.pagination.currentPage,
pageSize: this.pagination.pageSize,
queryString: this.pagination.queryString
};
console.log(param);
//发送ajax请求，提交分页相关请求参数（页码、每页显示的条数、查询条件）
axios.post("/ordersetting/findPage.do",param).then((res)=>{
//解析controller响应回的数据，为模型数据赋值
this.pagination.total = res.data.total;//总记录数
this.dataList = res.data.rows;//返回的数据集合
}).catch((r)=>{
this.showMessage(r);
});
},
//切换页码
handleCurrentChange(currentPage) {
//设置最新的页码
this.pagination.currentPage = currentPage;
//重新调用findPage方法进行分页查询
this.findPage();
},
//检查是否有权限
showMessage(r){
if(r == 'Error: Request failed with status code 403'){
//权限不足
this.$message.error('无访问权限');
return;
}else{
this.$message.error('未知错误');
return;
}
},
// 删除
handleDelete(row) {//row其实是一个json对象，json对象中的数据为{"age":"0-100","attention":"无","code":"0007","id":34,"name":"裸视力（左）","price":5.0,"remark":"裸视力（左）","sex":"0","type":"1"}
console.log(row);
// alert(row.id);
this.$confirm("你确定要删除当前预约吗?","提示",{
type: 'warning'
}).then(()=>{
// alert("点击了确定按钮");
//用户点击确认按钮，发送ajax请求，将检查项提交到Controller进行处理
axios.get("/ordersetting/delete.do?id="+row.id).then((res)=>{
//判断是否执行成功
if (res.data.flag){
//执行成功
//弹出成功提示信息
this.$message({
type:'success',
message:res.data.message
});
//重新进行分页查询
this.findPage();
}else {
//执行失败
this.$message.error(res.data.message);
}
}).catch((r)=>{
this.showMessage(r);
});
}).catch(()=>{
// alert("点击了取消按钮");
this.$message({
type:'info',
message:'操作已取消'
});
});
}
}
})
</script>
</html>
页面展示已预约的会员信息
前台代码
<el-table-column type="index" align="center" label="序号"></el-table-column>
<el-table-column prop="orderDate" label="体检时间" align="center"></el-table-column>
<el-table-column prop="fileNumber" label="档案号" align="center"></el-table-column>
<el-table-column prop="name" label="姓名" align="center"></el-table-column>
<el-table-column prop="phoneNumber" label="手机号码" align="center"></el-table-column>
<el-table-column prop="setmealName" label="体检套餐" align="center"></el-table-column>
<el-table-column prop="reportStatus" label="报告状态" align="center"></el-table-column>
//为查询按钮独立的设置一个查询方法,因为之前的查询会导致在不是首页查询时，查询不到所有的内容
_findPage(){
this.pagination.currentPage = 1;
this.findPage();
},
//分页查询
findPage() {
//封装请求参数数据（页码、每页显示的条数、查询条件），进行传送queryPageBean
var param = {
currentPage: this.pagination.currentPage,
pageSize: this.pagination.pageSize,
queryString: this.pagination.queryString
};
console.log(param);
//发送ajax请求，提交分页相关请求参数（页码、每页显示的条数、查询条件）
axios.post("/ordersetting/findPage.do",param).then((res)=>{
//解析controller响应回的数据，为模型数据赋值
this.pagination.total = res.data.total;//总记录数
this.dataList = res.data.rows;//返回的数据集合
}).catch((r)=>{
this.showMessage(r);
});
},
//切换页码
handleCurrentChange(currentPage) {
//设置最新的页码
this.pagination.currentPage = currentPage;
//重新调用findPage方法进行分页查询
this.findPage();
},
后台代码
OrderSettingController
//预约列表分页查询功能
@PreAuthorize("hasAuthority('CHECKITEM_QUERY')")//权限校验
@RequestMapping("/findPage")//使其那个被访问到
public PageResult findPage(@RequestBody QueryPageBean queryPageBean){
PageResult pageResult = orderService.pageQuery(queryPageBean);
System.out.println(pageResult.toString());
System.out.println(queryPageBean.toString());
return pageResult;//框架会将这个对象自动转换为JSON数据，响应回页面
}
ReportServiceImpl
@Override
//预约列表分页查询
public PageResult pageQuery(QueryPageBean queryPageBean) {
Integer currentPage = queryPageBean.getCurrentPage();//获取当前页面
Integer pageSize = queryPageBean.getPageSize();//要查询的数据，每页的记录数
String queryString = queryPageBean.getQueryString();//过滤条件/查询条件
//完成分页查询，基于mybatis框架提供的分页助手插件完成，现在不需要写sql语句(使用limit)
//现在只需要写limit前面的内容就可以了，limit之后的内容会自动追加
PageHelper.startPage(currentPage,pageSize);//不需要返回值，这个原理是使用线程实现的
//调用dao继续数据的操作
Page<OrderList> page = orderDao.selectByCondition(queryString);
long total = page.getTotal();
List<OrderList> rows = page.getResult();
for (int i = 0; i < rows.size(); i++) {
OrderList orderList = rows.get(i);
Integer id = orderList.getId();
orderList.setSetmealName(setmealDao.findSetmealNameById(id));
Report report = reportDao.findByMemberId(id);
if (report == null){
orderList.setReportStatus("未上传");
}
if (report != null){
orderList.setReportStatus(report.getReportStatus());
}
}
return new PageResult(total,rows);
}
体检上传功能的实现
前台代码
<el-upload
class="avatar-uploader"
action="/report/upload.do"
:auto-upload="autoUpload"
name="reportFile"
:show-file-list="false"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload">
<el-button style="position: absolute;left: 10px;top:10px;" size="mini" type="primary" @click="memberId = scope.row.id">报告上传</el-button>
</el-upload>
//文件上传成功后的钩子，response为服务端返回的值，file为当前上传的文件封装成的js对象
handleAvatarSuccess(response, file) {
// alert("上传成功之后");
//response为服务端返回的值，是elementUI自带的
//为模型数据imageUrl进行赋值，用于页面图片预览
this.fileName = 'http://r1mmj5zj3.hn-bkt.clouddn.com/' + response.data;
//弹出提示
this.$message({
type:response.flag ? 'success':'error',
message:response.message
});
console.log("上传之后的的文件名称："+this.fileName);
console.log("参数file:"+file.date);
console.log("参数response："+response.data)
// this.handleUpdate(row);
// alert(this.memberId);
console.log("发送请求之后的数据："+this.memberId+",filename= "+this.fileName);
//获取当前会员的id，通过这个id进行操作
axios.get("/report/update.do?memberId="+this.memberId+"&fileName="+this.fileName).then((res)=>{
//判断这个controller是否执行成功
// alert("现在是update在执行："+this.fileName+",numberId="+this.memberId)
console.log("update里面的：filename="+this.fileName+" ,memberId="+this.memberId);
if (res.data.flag){
//进行回显，基于vue的数据绑定实现，可以查看上面的内容可以发现都是双向绑定formData内容的
//操作成功
this.$message({
type:'success',
message:res.data.message
});
this.findPage();
}else {
//查询失败，弹出提示
this.$message.error(res.data.message);
}
}).catch((r)=>{
this.showMessage(r);
});
},
后台代码
ReportController
//文件上传，实现预约设置数据批量导入
@RequestMapping("/upload")
public Result upload(@RequestParam("reportFile") MultipartFile reportFile){
System.out.println(reportFile);
//设置文件名
String originalFilename = reportFile.getOriginalFilename();//原始文件名（上传时文件的名字） 3bd90d2c-4e82-42a1-a401-882c88b06a1a2.jpg
int index = originalFilename.lastIndexOf(".");//获取最后一个点的位置
String extention = originalFilename.substring(index);//通过截取字符串获取：.jpg
String fileName = UUID.randomUUID().toString() + extention;// FuM1Sa5TtL_ekLsdkYWcf5pyjKGu.jpg
try {
//将文件上传到七牛云服务器
QiniuUtils.upload2Qiniu(reportFile.getBytes(),fileName);//fileName使用uuid自动产生，使其不重复
// jedisPool.getResource().sadd(RedisConstant.SETMEAL_PIC_RESOURCES,fileName);//操作set集合，想指定的set集合里面添加数据
//往t_report表里面添加数据，证明当前报告已经上传了
} catch (IOException e) {
e.printStackTrace();
return new Result(false, MessageConstant.REPORT_UPLOADQNY_FAIL);
}
return new Result(true, MessageConstant.REPORT_UPLOADQNY_SUCCESS,fileName);
// return null;
}
//进行报告的保存或者是更新
@RequestMapping(value = "/update",produces = "application/json; charset=utf-8")
public Result update(Integer memberId,String fileName){
try {
reportService.update(memberId,fileName);
System.out.println("更新时的："+fileName);
System.out.println("更新时的："+memberId);
return new Result(true, MessageConstant.REPORT_UPLOAD_SUCCESS);
}catch (Exception e){
//证明调用失败
e.printStackTrace();
return new Result(false, MessageConstant.REPORT_UPLOAD_FAIL);
}
}
ReportServiceImpl
@Override
public void update(Integer memberId,String fileName) {
Report report = reportDao.findByMemberId(memberId);//通过会员id查询是否拥有这条记录
//如果之前上传过的话，就进行更新操作
if (report != null){
report.setFileName(fileName);
report.setReportLoadDate(new Date());
System.out.println("更新时的："+report.toString());
System.out.println("更新时的："+fileName);
System.out.println("更新时的："+memberId);
reportDao.update(report);
}
//如果之前没有上传过的话，就进行添加操作
if (report == null){
Report r = new Report();
r.setMemberId(memberId);
r.setFileName(fileName);
r.setReportLoadDate(new Date());
System.out.println("增加时的："+r.toString());
System.out.println("增加时的："+fileName);
System.out.println("增加时的："+memberId);
r.setReportStatus("已上传");
reportDao.add(r);
}
}
删除该条报告
前台代码
// 删除
handleDelete(row) {//row其实是一个json对象，json对象中的数据为{"age":"0-100","attention":"无","code":"0007","id":34,"name":"裸视力（左）","price":5.0,"remark":"裸视力（左）","sex":"0","type":"1"}
console.log(row);
// alert(row.id);
this.$confirm("你确定要删除当前报告内容吗?","提示",{
type: 'warning'
}).then(()=>{
// alert("点击了确定按钮");
//用户点击确认按钮，发送ajax请求，将检查项提交到Controller进行处理
axios.get("/report/delete.do?id="+row.id).then((res)=>{
//判断是否执行成功
if (res.data.flag){
//执行成功
//弹出成功提示信息
this.$message({
type:'success',
message:res.data.message
});
//重新进行分页查询
this.findPage();
}else {
//执行失败
this.$message.error(res.data.message);
}
}).catch((r)=>{
this.showMessage(r);
});
}).catch(()=>{
// alert("点击了取消按钮");
this.$message({
type:'info',
message:'操作已取消'
});
});
}
后台代码
ReportController
//删除该报告内容
// @PreAuthorize("hasAuthority('CHECKITEM_DELETE')")//权限校验
@RequestMapping("/delete")//使其那个被访问到
public Result delete(Integer id){
//使用try。。catch。。进行成功还是失败判断
try{
System.out.println(id);
reportService.deleteById(id);//如果调用失败就进入catch，没有失败就
}catch (Exception e){
//证明调用失败
e.printStackTrace();
return new Result(false, MessageConstant.DELETE_REPORT_FAIL);
}
//证明删除成功
return new Result(true, MessageConstant.DELETE_REPORT_SUCCESS);
}
ReportServiceImpl
@Override
public void deleteById(Integer id) {
//判断当前检查项是否关联到检查组，关联了就不能删除
// long count = checkItemDao.findCountByCheckItemId(id);
// if (count > 0){
// //当前检查项已经被关联到检查组，不允许被删除
// throw new RuntimeException();
// }else{
reportDao.deleteById(id);
// }
}
扫一扫
2537
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
