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同理