1.批量导入Excel数据

1.实现模板下载

<el-card class="box-card">
<div class="boxMain">
<el-button style="margin-bottom: 20px;margin-right: 20px" type="primary" @click="downloadTemplate()">模板下载</el-button>
  <el-upload action="/ordersetting/upload.do"
                        name="excelFile"
                        :show-file-list="false"
                       :on-success="handleSuccess"
                        :before-upload="beforeUpload">
           <el-button type="primary">上传文件</el-button>
         </el-upload>
       </div>
 <div>
操作说明:请点击"模板下载"按钮获取模板文件,在模板文件中录入预约设置数据后点击"上传文件"按钮上传模板文件。
</div>
</el-card>
 downloadTemplate(){
    window.location.href="../../template/ordersetting_template.xlsx";}

../为退回上级目录,找到excel在服务器的位置即可下载

2.文件上传

<el-upload action="/ordersetting/upload.do"
           name="excelFile"
           :show-file-list="false"
           :on-success="handleSuccess"
           :before-upload="beforeUpload">
  <el-button type="primary">上传文件</el-button>
</el-upload>

拥有:on-success="handleSuccess" 和:before-upload="beforeUpload"为成功上传和上传前的方法

  handleSuccess(response, file) {
                    if(response.flag){
                        this.$message({
                            message: response.message,
                            type: 'success'
                        });
                    }else{
                        this.$message.error(response.message);
                    }
                    console.log(response, file, fileList);
                },
//上传之前进行文件格式校验
                beforeUpload(file){
                    const isXLS = file.type === 'application/vnd.ms-excel';
                    if(isXLS){
                        return true;
                    }
                    const isXLSX = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
                    if (isXLSX) {
                        return true;
                    }
                    this.$message.error('上传文件只能是xls或者xlsx格式!');
                    return false;
                },
 @PostMapping("/upload")
    public Result upload(MultipartFile excelFile){
        List<OrderSetting> orderSettingList=new ArrayList<>();
        System.out.println(excelFile);
        try {
            /**
             * 后端使用 List<String []>来接受,
             * list集合接受多对键值对,每个键值对都是excel中的一行
             * String【】中有两个数据,一个为orderDate预约时间,
             * 一个是number可预约数
             * 使用双层for循环取出
             *3.  List<String[]> 转成JavaBean对象 OrderSetting
             *4. 调业务层传递JavaBean对象,写入MySQL
             */
            List<String []> stringList= POIUtils.readExcel(excelFile);
            for (int i = 0; i < stringList.size(); i++) {
                String[] strings= stringList.get(i);
                for (int j = 0; j < strings.length; j++) {
                    System.out.println(strings[j]);
                    orderSettingList.add(new OrderSetting(new Date(strings[0]),Integer.parseInt(strings[1])));
                }
            }
            orderSettingServices.addOrderSetting(orderSettingList);
        } catch (IOException e) {
            throw new RuntimeException(e);
        }
        return new Result(true, MessageConstant.ORDERSETTING_SUCCESS);
    }

后端使用什么类型的集合或数组接收,全看前端传过来的数据,或者数据库语句决定

查询数据,防止用户多次提交,多次提交更新,第一次提交插入

 @Override
    public void addOrderSetting(List<OrderSetting> orderSettingList) {
       for (OrderSetting orderSetting:orderSettingList){
           int count=orderSettingMapper.queryOrderSettingByOrderDate(orderSetting);
           if (count!=0){
               orderSettingMapper.updateOrderSetting(orderSetting);
           }else {
               orderSettingMapper.addOrderSetting(orderSetting);
           }
       }
 <select id="queryOrderSettingByOrderDate" parameterType="OrderSetting" resultType="int">
        select count(0) from t_ordersetting where orderDate = #{orderDate}
    </select>
    <update id="updateOrderSetting" parameterType="OrderSetting">
        update t_ordersetting set number = #{number} where  orderDate = #{orderDate}
    </update>
    <insert id="addOrderSetting" parameterType="OrderSetting">
        insert into t_ordersetting values(#{id},#{orderDate},#{number},#{reservations})
    </insert>

2.日历展示预约设置信息

1.前端信息决定传参数据容器

<template>
  <template v-for="obj in leftobj">
    <template v-if="obj.date == dayobject.day.getDate()">
      <template v-if="obj.number > obj.reservations">
        <div class="usual">
          <p>可预约{{obj.number}}人</p>
          <p>已预约{{obj.reservations}}人</p>
        </div>
      </template>
      <template v-else>
        <div class="fulled">
          <p>可预约{{obj.number}}人</p>
          <p>已预约{{obj.reservations}}人</p>
          <p>已满</p>
        </div>
      </template>
    </template>
  </template>
  <button v-if="dayobject.day > today" 
          @click="handleOrderSet(dayobject.day)" class="orderbtn">设置</button>
</template>

可以发现leftobj中的对象obj包含date,number,reservations用来显示数据

this.leftobj = [
                  { date: 1, number: 120, reservations: 1 },
                  { date: 3, number: 120, reservations: 1 },
                  { date: 4, number: 120, reservations: 120 },
                  { date: 6, number: 120, reservations: 1 },
                  { date: 8, number: 120, reservations: 1 }
                ];

决定了后端传输参数使用

List<Map<String,Integer>>

传输数据,或者使用List<对象>也可以

2.后端发送数据

因为预约只能是从现在起当月当年,所以,后端需要查询数据库中年月符合的数据,所以需要的数据时当前年份和月份

axios.get("/ordersetting/findMonthOrderSetting.do?month="+this.currentMonth+"&year="+this.currentYear).
                    then(response=>{
                        if (response.data.flag){
                            //响应回来的data数组,赋值到
                            this.leftobj = response.data.data;
                        }else {
                            this.$message.error(response.data.message);
                        }
                    })

3.后端处理

/**
     * 查找当年当月的数据
     * @param month
     * @param year
     * @return
     */
    @GetMapping("/findMonthOrderSetting")
    public Result findMonthOrderSetting(Integer month,Integer year){
        List<Map<String,Integer>> mapList= orderSettingServices.findMonthOrderSetting(month,year);
        return new Result(true,MessageConstant.QUERY_ORDER_SUCCESS,mapList);
    }
 @Override
    public List<Map<String, Integer>> findMonthOrderSetting(Integer month, Integer year) {
        //查找出的数据封装成实体类列表
        List<OrderSetting> orderSettingList= orderSettingMapper.findMonthOrderSetting(month,year);
        //设置返回用的装满集合的列表
        List<Map<String ,Integer>> mapList=new ArrayList<>();
        for (OrderSetting orderSetting:orderSettingList){
            //新建Map对象
            Map<String,Integer> map = new HashMap<>();
            //取出orderSetting对象中的数据,存储Map集合中
            /**
             * number:总可预约数
             * reservations:已预约数
             * date:日期
             */
            map.put("number",orderSetting.getNumber());
            map.put("reservations",orderSetting.getReservations());
            map.put("date",orderSetting.getOrderDate().getDate());
            mapList.add(map);
        }
        return mapList;
    }
 @Select("select id,orderDate,number,reservations from" +
            " t_ordersetting where year(orderDate)=#{year} and month(orderDate)=#{month}")
    List<OrderSetting> findMonthOrderSetting(@Param("month") Integer month, @Param("year") Integer year);
where year(orderDate)=#{year} and month(orderDate)=#{month}

year(orderDate)=#{year}将orderDate中的年份提取,month同理

点赞(0) 打赏

评论列表 共有 0 条评论

暂无评论

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部