基于ssm+vue的综合项目健康体检管理系统-第五章----预约管理-预约设置-文件上传下载

本文链接：https://blog.csdn.net/weixin_45087693/article/details/111900523

ApachePOI

读取excel数据内嵌for循环
读取excel循环获取最后一行和最后一列
想excel文件写入数据

文件下载

在这里插入图片描述

将可预约和已预约的人数的excel模板下载到本地
通过一个点击事件里面一个href属性连接到服务器的一个文件里面的excel文件
window.location.href = "../../template/ordersetting_template.xlsx"

文件上传

功能描述：点击页面的文件上传将编辑号的excel文件上传到服务器然后后台解析excel文件里面的数据封装到数据然后传递给前台将数据渲染到页面
在这里插入图片描述

访问到后台这个接口

  @RequestMapping("/upload")
    public Result upload(@RequestParam("excelFile") MultipartFile excelFile) {
        try {
            List<String[]> list = POIUtils.readExcel(excelFile);
            List<OrderSetting> data = new ArrayList<>();
            for (String[] strings : list) {
                String orderDate = strings[0];
                String number = strings[1];
                OrderSetting orderSetting = new OrderSetting(new Date(orderDate), Integer.parseInt(number));
                data.add(orderSetting);
            }
            //通过dubbo远程调用服务实现数据批量导入到数据库
            orderSettingService.add(data);
            return new Result(true, MessageConstant.IMPORT_ORDERSETTING_SUCCESS);

        } catch (IOException e) {
            e.printStackTrace();
            return new Result(false, MessageConstant.IMPORT_ORDERSETTING_FAIL);
        }
    }

思路
1. 通过一个工具类读取excel文件返回一个list集合
2. 遍历这个集合将集合按照索引获取其中的数据
3. 将获取到数据封装到一个OrderSetting的实体类中
4. 将这个类添加到集合中
5. 调用service的添加方法将集合传递过来
业务层判断这个传递过来的list集合

   @Override
    public void add(List<OrderSetting> list) {
        if (list != null && list.size() > 0) {
            for (OrderSetting orderSetting : list) {
                //查询数据库看日期是否被预约设置
                long orderDate = orderSettingDao.findCountByOrderDate(orderSetting.getOrderDate());
                if (orderDate > 0) {
                    //如果已经被预约再次添加就修改数据
                    orderSettingDao.editNumberByOrderDate(orderSetting);
                } else {
                    //如果没有被预约就增添数据
                    orderSettingDao.add(orderSetting);
                }
            }
        }
    }

思路
1. 接受一个list集合里面list的泛型为OrderSetting类型
2. 判断这个集合是否为空，如果不为空继续往下执行
3. 遍历这个list集合
4. 获取orderSetting的data属性调用dao层查询数据库看日期是否被设置过
5. 在判断返回的数据是否大于0那么继续向下判断
6. 如果大于0说明这个日期的预约设置过就进行数据的修改操作
7. 如果不是大于0就进行数据添加操作
8. 上传成功就信息返回给前台，前台给用户提示信息

  //上传成功提示
            handleSuccess(response, file) {
                if (response.flag) {
                    this.$message({
                        message: response.message,
                        type: 'success'
                    });
                } else {
                    this.$message.error(response.message);
                }
            },

预约设置

功能描述：当点击页面的设置按钮时弹出输入框,当输入完点击确定时发送异步请求将数据返回到后台进行数据的修改(有几个注意点需要注意)
在这里插入图片描述

当输入人数点击确实发送数据到后台进行处理

 //预约设置
            handleOrderSet(day) {
                this.$prompt('请输入可预约人数', '预约设置', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    inputPattern: /^[0-9]*[1-9][0-9]*$/,
                    inputErrorMessage: '只能输入正整数'
                }).then(({value}) => {
                    axios.post("/ordersetting/editNumberByDate.do", {
                        number: value,
                        orderDate: this.formatDate(day.getFullYear(), day.getMonth() + 1, day.getDate())
                    }).then((res) => {
                        if (res.data.flag) {
                            this.initData(this.formatDate(day.getFullYear(), day.getMonth() + 1, 1));
                            this.$message({
                                type: 'success',
                                message: res.data.message
                            })
                        } else {
                            this.$message.error(res.data.message);
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '取消输入'
                    });
                });

思路

在elementui官网复制消息提示弹框的模板进行修改
当点击确定时发送异步请求
需要传递两个参数

number:需要修改的预约数据
orderDate：当前的日期

传递orderDate调用封装好的方法
传递当前年月日的日期注意日期需要+1
在成功的回调函数里面需要重新调用初始化方法initData()
依旧需要传递这个三个参数日期+1

传递到后台的这个接口

@RequestMapping("/editNumberByDate")
    public Result editNumberByDate(@RequestBody OrderSetting orderSetting) {
        try {
            orderSettingService.editNumberByDate(orderSetting);
            return new Result(true, MessageConstant.ORDERSETTING_SUCCESS);
        } catch (Exception e) {
            e.printStackTrace();
            return new Result(false, MessageConstant.ORDERSETTING_FAIL);
        }
    }

将传递过来的参数封装为OrderSetting的对象
直接调用业务层的修改方法
然后service里面判断传过来的日期这个日期是否被修改过
如果被修改过就调用修改方法
如果没有被修改叫调用添加方法

根据当前页的月份查询对应的预约和预约的人数

1 前台参数的传递

因为init这个初始化方法在vue生命周期的created钩子函数里面
所以可以直接在ini方法最后面异步请求到后台
注意需要传递的参数：
this.currentYear：当前对应的年份
this.currentMonth:当前对应的月份
传参的时候需要-进行拼接（this.currentYear+"-"+this.currentYear）
传递到后台的格式为列如：2020-12

//发送ajax请求,根据当前页面对应的月份查询数据库,封装为响应的结果给leftobj,在页面展示
                axios.post("/ordersetting/getOrderSettingByMonth.do?date=" + this.currentYear + "-" + this.currentMonth).then((res) => {
                    if (res.data.flag) {
                        this.leftobj = res.data.data;
                    } else {
                        this.message.error(res.data.message);
                    }
                })

2. 后台对参数的处理及响应

后台以一个字符串的date接受前台传递过来的参数
调用service层的getOrderSettingByMonth返回一个list集合里面封装一个map集合
这个map集合就是对应的展示预约人数的json格式
这个date传递到service层,首页定义两个字符串
定义两个字符串-1 和-30 用于拼接参数
将拼接为列如：2020-12-1 -2020-12-31
然后调用查询数据库这个范围内的预约和被预约人数是多少
在创建一个新的map集合用户接受查询的数据
首先查询出出来的数据应该list集合里面封装的OrderSetting类型
然后获取到这个类的属性分别装到新的map集合里面
然后在将数据封装为一个list集合里面封装的map键值对集合返回回去

 @Override
    public List<Map<String, Object>> getOrderSettingByMonth(String date) {
        String begin = date + "-1";
        String end = date + "-31";
        HashMap<String, String> hashMap = new HashMap<>();
        System.out.println("service的hashmap:" + hashMap);
        hashMap.put("begin", begin);
        hashMap.put("end", end);
        //调用dao,根据日期范围查询预约设置数据
        List<OrderSetting> list = orderSettingDao.getOrderSettingByMonth(hashMap);
        List<Map<String, Object>> result = new ArrayList<>();
        if (list != null && list.size() > 0) {
            for (OrderSetting orderSetting : list) {
                Map<String, Object> map = new HashMap<>();
                map.put("date", orderSetting.getOrderDate().getDate());
                map.put("number", orderSetting.getNumber());
                map.put("reservations", orderSetting.getReservations());
                result.add(map);
            }
        }
        return result;
    }