场景
若依管理系统前后端分离版基于ElementUI和SpringBoot怎样实现Excel导入和导出：
若依管理系统前后端分离版基于ElementUI和SpringBoot怎样实现Excel导入和导出_霸道流氓气质的博客-CSDN博客
在上面进行Excel导入导出的基础上，进行改造，将携带的额外参数是否更新已存在数据，
修改为携带日期参数，业务需求是通过excel导入录入指定日期的计划数据。
并且当点击导入按钮时，计划日期默认值为明天。
注：
博客：
霸道流氓气质的博客_CSDN博客-C#,架构之路,SpringBoot领域博主
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。
实现
页面添加el-date-picker日期选择组件
<template>
  <!-- 用户导入对话框 -->
  <el-dialog :title="title" :visible.sync="open" width="400px" append-to-body>
    <div class="block">
      <span class="demonstration">计划日期: </span>
      <el-date-picker v-model="planDate" type="date" placeholder="选择计划日期" size="small" value-format="yyyy-MM-dd" >
      </el-date-picker>
    </div>
   
    <el-upload ref="upload" :limit="1" accept=".xlsx, .xls" :headers="headers" :action="upLoadUrl + '?planDateString=' + this.planDate" :disabled="isUploading" :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false" :before-upload="beforeUpload" drag >
     
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      <div class="el-upload__tip text-center" slot="tip">
        <span>仅允许导入xls、xlsx格式文件。</span>
      </div>
    </el-upload>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitFileForm">确 定</el-button>
      <el-button @click="open= false">取 消</el-button>
    </div>
  </el-dialog>
</template>
el-date-picker设置默认值并格式化显示
通过v-model给el-date-picker组件绑定值，并在mounted方法中设置默认值即可。
格式化显示通过value-format=”yyyy-MM-dd”来设置。
声明planDate
  data() {
    return {
      // 是否显示弹出层（用户导入）
      open: false,
      // 弹出层标题（用户导入）
      title: "",
      // 是否禁用上传
      isUploading: false,
      //计划日期
      planDate: new Date(),
所以在mounted中
  mounted() {
    //默认计划日期为明天
    this.planDate = moment().subtract(-1, "days").format("YYYY-MM-DD");
  },
这样就可以通过moment获取明天并格式化显示。关于moment的使用自行学习。
el-upload传递时间参数到SpringBoot接口接收
上面时间格式化值之后通过
:action="upLoadUrl + '?planDateString=' + this.planDate"
传递到后台接口，这里要注意往后端传递的时间参数为字符串，所以后端SpringBoot接口应该用String接收
并且保证名称一致
    @PostMapping("/importData")
    public AjaxResult importData(MultipartFile file, String planDateString) throws Exception {
        LocalDate planDate = LocalDate.parse(planDateString, DateTimeFormatter.ofPattern("yyyy-MM-dd"));
        ExcelUtil<limitquotastatistics> util = new ExcelUtil<>(LimitQuotaStatistics.class);
        List<limitquotastatistics> limitQuotaStatisticsList = util.importExcel(file.getInputStream());
        String message = "200";
        return AjaxResult.success(message);
    }</limitquotastatistics></limitquotastatistics>
这里接收时间参数使用String planDateString接收，不然会提示
Failed to convert type [java.lang.String] to type [java.time.LocalDate] for value错误
时间字符串转换为LocalDate通过
 LocalDate planDate = LocalDate.parse(planDateString, DateTimeFormatter.ofPattern("yyyy-MM-dd"));
实现，这里前端传输的字符串需要提前格式化好。
其他逻辑根据自己业务需求实现，这里不做具体实现。
完整前端代码
<template>
  <!-- 用户导入对话框 -->
  <el-dialog :title="title" :visible.sync="open" width="400px" append-to-body>
    <div class="block">
      <span class="demonstration">计划日期: </span>
      <el-date-picker v-model="planDate" type="date" placeholder="选择计划日期" size="small" value-format="yyyy-MM-dd" >
      </el-date-picker>
    </div>
   
    <el-upload ref="upload" :limit="1" accept=".xlsx, .xls" :headers="headers" :action="upLoadUrl + '?planDateString=' + this.planDate" :disabled="isUploading" :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false" :before-upload="beforeUpload" drag >
     
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      <div class="el-upload__tip text-center" slot="tip">
        <span>仅允许导入xls、xlsx格式文件。</span>
      </div>
    </el-upload>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitFileForm">确 定</el-button>
      <el-button @click="open = false">取 消</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { getToken } from "@/utils/auth";
import moment from "moment";
export default {
data() {
return {
// 是否显示弹出层（用户导入）
open: false,
// 弹出层标题（用户导入）
title: "",
// 是否禁用上传
isUploading: false,
//计划日期
planDate: new Date(),
// 设置上传的请求头部
headers: { Authorization: "Bearer " + getToken() },
// 上传的地址
upLoadUrl: "",
};
},
mounted() {
//默认计划日期为明天
this.planDate = moment().subtract(-1, "days").format("YYYY-MM-DD");
},
methods: {
/** 导入按钮操作 */
handleImport(data) {
this.title = data.title;
this.upLoadUrl = process.env.VUE_APP_BASE_API + data.upLoadUrl;
this.open = true;
},
// 提交上传文件
submitFileForm() {
this.$refs.upload.submit();
},
// 文件上传中处理
handleFileUploadProgress() {
this.isUploading = true;
},
// 文件上传成功处理
handleFileSuccess(response) {
this.open = false;
this.isUploading = false;
this.$refs.upload.clearFiles();
this.$alert(
"<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" +
response.msg +
"</div>",
"导入结果",
{ dangerouslyUseHTMLString: true }
);
//上传数据成功后重新请求数据
this.$emit("getList");
},
},
};
</script>
<style>
</style>
Original: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/127821880
Author: 霸道流氓气质
Title: SpringBoot+Vue实现excel导入带格式化的时间参数(moment格式化明天日期并设置el-date-picker默认值)
原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/659405/
转载文章受原作者版权保护。转载请注明原作者出处！