DateTimePicker 日期时间选择器 + mybatis-plus 传参后端查询传值自定义list,后端再接收...

最新推荐文章于 2023-10-24 10:01:37 发布

原创最新推荐文章于 2023-10-24 10:01:37 发布 · 638 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#mybatis #java #vue.js #开发语言 #前端

文章展示了在前端使用ElementUI的日期选择器组件实现时间范围选择，并配置快捷选项，如最近一周、最近一个月和最近三个月。后端通过注解处理查询请求，对日期范围进行过滤。在处理日期时，存在一个条件判断问题，可能在条件不满足时仍尝试访问对象属性。

前端

<el-form-item label="创建时间" prop="extendate">
              <el-date-picker
                v-model="queryParams.extendate"
                value-format="yyyy-MM-dd HH:mm:ss"
                type="datetimerange"
                :picker-options="pickerOptions"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                align="right"
              >
              </el-date-picker>
            </el-form-item>


  // 时间控件
      pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        extendate: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],

后端

// 实体
  //  @TableField(exist = false)
  // private List<Date> extendate;


    @Log(title = "承运商查询", businessType = BusinessType.QUERY)
    @GetMapping("/listByPage")
    public TableDataInfo listforPage(Carrier car) {
        startPage();
        List<Carrier> list = carrierService.lambdaQuery()
                .like(StrUtil.isNotBlank(car.getCode()), Carrier::getCode, car.getCode())
                .like(StrUtil.isNotBlank(car.getName()), Carrier::getName, car.getName())
                .eq(StrUtil.isNotBlank(car.getWarehousecode()), Carrier::getWarehousecode, car.getWarehousecode())
                .ge(car.getExtendate() != null, Carrier::getCreated, car.getExtendate() != null ? car.getExtendate().get(0) : 1)
                .le(car.getExtendate() != null, Carrier::getCreated, car.getExtendate() != null ? car.getExtendate().get(1) : 1)
                .list();
        return getDataTable(list);
    }
// car.getExtendate() != null ? car.getExtendate().get(0) : 1  用了一个三元表达式来区分前端是否传值，虽然 condition 判断了，如果为false就不会拼接，但是他没有管是否get,即condition为false 依然会去执行 car.getExtendate().get(0)