• SpringBoot+Vue实现excel导入带格式化的时间参数(moment格式化明天日期并设置el-date-picker默认值)


    场景

    若依管理系统前后端分离版基于ElementUI和SpringBoot怎样实现Excel导入和导出:

    若依管理系统前后端分离版基于ElementUI和SpringBoot怎样实现Excel导入和导出_霸道流氓气质的博客-CSDN博客

     

    在上面进行Excel导入导出的基础上,进行改造,将携带的额外参数是否更新已存在数据,

    修改为携带日期参数,业务需求是通过excel导入录入指定日期的计划数据。

     

    并且当点击导入按钮时,计划日期默认值为明天。

    注:

    博客:
    霸道流氓气质的博客_CSDN博客-C#,架构之路,SpringBoot领域博主
    关注公众号
    霸道的程序猿
    获取编程相关电子书、教程推送与免费下载。

    实现

    页面添加el-date-picker日期选择组件

    1. <template>
    2.   <!-- 用户导入对话框 -->
    3.   <el-dialog :title="title" :visible.sync="open" width="400px" append-to-body>
    4.     <div class="block">
    5.       <span class="demonstration">计划日期: </span>
    6.       <el-date-picker
    7.         v-model="planDate"
    8.         type="date"
    9.         placeholder="选择计划日期"
    10.         size="small"
    11.         value-format="yyyy-MM-dd"
    12.       >
    13.       </el-date-picker>
    14.     </div>
    15.     <br />
    16.     <el-upload
    17.       ref="upload"
    18.       :limit="1"
    19.       accept=".xlsx, .xls"
    20.       :headers="headers"
    21.       :action="upLoadUrl + '?planDateString=' + this.planDate"
    22.       :disabled="isUploading"
    23.       :on-progress="handleFileUploadProgress"
    24.       :on-success="handleFileSuccess"
    25.       :auto-upload="false"
    26.       :before-upload="beforeUpload"
    27.       drag
    28.     >
    29.       <i class="el-icon-upload"></i>
    30.       <div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
    31.       <div class="el-upload__tip text-center" slot="tip">
    32.         <span>仅允许导入xls、xlsx格式文件。</span>
    33.       </div>
    34.     </el-upload>
    35.     <div slot="footer" class="dialog-footer">
    36.       <el-button type="primary" @click="submitFileForm">确 定</el-button>
    37.       <el-button @click= "open= false">取 消</el-button>
    38.     </div>
    39.   </el-dialog>
    40. </template>

    el-date-picker设置默认值并格式化显示

    通过v-model给el-date-picker组件绑定值,并在mounted方法中设置默认值即可。

    格式化显示通过value-format="yyyy-MM-dd"来设置。

    声明planDate

    1.   data() {
    2.     return {
    3.       // 是否显示弹出层(用户导入)
    4.       open: false,
    5.       // 弹出层标题(用户导入)
    6.       title: "",
    7.       // 是否禁用上传
    8.       isUploading: false,
    9.       //计划日期
    10.       planDate: new Date(),

    所以在mounted中

    1.   mounted() {
    2.     //默认计划日期为明天
    3.     this.planDate = moment().subtract(-1, "days").format("YYYY-MM-DD");
    4.   },

    这样就可以通过moment获取明天并格式化显示。关于moment的使用自行学习。

    el-upload传递时间参数到SpringBoot接口接收

    上面时间格式化值之后通过

    :action="upLoadUrl + '?planDateString=' + this.planDate"

    传递到后台接口,这里要注意往后端传递的时间参数为字符串,所以后端SpringBoot接口应该用String接收

    并且保证名称一致

    1.     @PostMapping("/importData")
    2.     public AjaxResult importData(MultipartFile file, String planDateString) throws Exception {
    3.         LocalDate planDate = LocalDate.parse(planDateString, DateTimeFormatter.ofPattern("yyyy-MM-dd"));
    4.         ExcelUtil<LimitQuotaStatistics> util = new ExcelUtil<>(LimitQuotaStatistics.class);
    5.         List<LimitQuotaStatistics> limitQuotaStatisticsList = util.importExcel(file.getInputStream());
    6.         String message = "200";
    7.         return AjaxResult.success(message);
    8.     }

    这里接收时间参数使用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"));

    实现,这里前端传输的字符串需要提前格式化好。

    其他逻辑根据自己业务需求实现,这里不做具体实现。

    完整前端代码

    1. <template>
    2.   <!-- 用户导入对话框 -->
    3.   <el-dialog :title="title" :visible.sync="open" width="400px" append-to-body>
    4.     <div class="block">
    5.       <span class="demonstration">计划日期: </span>
    6.       <el-date-picker
    7.         v-model="planDate"
    8.         type="date"
    9.         placeholder="选择计划日期"
    10.         size="small"
    11.         value-format="yyyy-MM-dd"
    12.       >
    13.       </el-date-picker>
    14.     </div>
    15.     <br />
    16.     <el-upload
    17.       ref="upload"
    18.       :limit="1"
    19.       accept=".xlsx, .xls"
    20.       :headers="headers"
    21.       :action="upLoadUrl + '?planDateString=' + this.planDate"
    22.       :disabled="isUploading"
    23.       :on-progress="handleFileUploadProgress"
    24.       :on-success="handleFileSuccess"
    25.       :auto-upload="false"
    26.       :before-upload="beforeUpload"
    27.       drag
    28.     >
    29.       <i class="el-icon-upload"></i>
    30.       <div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
    31.       <div class="el-upload__tip text-center" slot="tip">
    32.         <span>仅允许导入xls、xlsx格式文件。</span>
    33.       </div>
    34.     </el-upload>
    35.     <div slot="footer" class="dialog-footer">
    36.       <el-button type="primary" @click="submitFileForm">确 定</el-button>
    37.       <el-button @click="open = false">取 消</el-button>
    38.     </div>
    39.   </el-dialog>
    40. </template>
    41. <script>
    42. import { getToken } from "@/utils/auth";
    43. import moment from "moment";
    44. export default {
    45.   data() {
    46.     return {
    47.       // 是否显示弹出层(用户导入)
    48.       open: false,
    49.       // 弹出层标题(用户导入)
    50.       title: "",
    51.       // 是否禁用上传
    52.       isUploading: false,
    53.       //计划日期
    54.       planDate: new Date(),
    55.       // 设置上传的请求头部
    56.       headers: { Authorization: "Bearer " + getToken() },
    57.       // 上传的地址
    58.       upLoadUrl: "",
    59.     };
    60.   },
    61.   mounted() {
    62.     //默认计划日期为明天
    63.     this.planDate = moment().subtract(-1, "days").format("YYYY-MM-DD");
    64.   },
    65.   methods: {
    66.     /** 导入按钮操作 */
    67.     handleImport(data) {
    68.       this.title = data.title;
    69.       this.upLoadUrl = process.env.VUE_APP_BASE_API + data.upLoadUrl;
    70.       this.open = true;
    71.     },
    72.     // 提交上传文件
    73.     submitFileForm() {
    74.       this.$refs.upload.submit();
    75.     },
    76.     // 文件上传中处理
    77.     handleFileUploadProgress() {
    78.       this.isUploading = true;
    79.     },
    80.     // 文件上传成功处理
    81.     handleFileSuccess(response) {
    82.       this.open = false;
    83.       this.isUploading = false;
    84.       this.$refs.upload.clearFiles();
    85.       this.$alert(
    86.         "
      " +
    87.           response.msg +
    88.           "
      ",
  •         "导入结果",
  •         { dangerouslyUseHTMLString: true }
  •       );
  •       //上传数据成功后重新请求数据
  •       this.$emit("getList");
  •     },
  •   },
  • };
  • </script>
  • <style>
  • </style>
  • 相关阅读:
    如何在数据库中存储小数:FLOAT、DECIMAL还是BIGINT?
    jmeter报Java.NET.BindException: Address already in use: connect
    WebMvcConfigurationSupport和WebMvcConfigure
    在 The Sandbox Alpha 第三季中体验金塔谷社交中心,探索多生物群系
    九月医疗宣传日|适合幼小学宣传的几款医疗模板
    PAT 1059 Prime Factors(建立素数表)
    人大女王金融硕士项目——不断挑战自己,提升自己就在现在
    HLS基础issue
    努力走向更优秀的测试/开发程序员,“我“打破自己了......
    工业互联网资料整理合集二
  • 原文地址:https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/127821880