日期选择器

  • 页面效果

    页面效果

  • 组件源码

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    		 
    <!-- 
        daterange: 范围选择类型
        format: 绑定后表单中显示的格式
        value-format: 传递时显示的格式
     -->
    <template>
        <el-date-picker v-model="rangeTime" type="daterange" range-separator="至" start-placeholder="开始日期"
                end-placeholder="结束日期" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd">
        </el-date-picker>
    </template>

  • 数据绑定

    1
    2
    		 
    <!--  v-model="rangeTime" --> 
    rangeTime: [], 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    		 
    // 条件表单对象
    regionFormVO: {
        regionId: null,
        regionName: undefined,
        cityName: undefined,
        addressName: undefined,
        createTime: undefined,
        endTime: undefined,
    },
    		 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    		 
    <!-- 数据重组 -->
    onSubmit() {
        const data = this.regionFormVO
        if (data != null) {
    		// 将绑定后的值绑定
            data.createTime = this.rangeTime[0]
            data.endTime = this.rangeTime[1]
            console.log("data: ", data);
            // 重新组装提交的数据
            this.fetchData(this.currentPage, this.pageSize, data)
        }
        this.fetchData(this.currentPage, this.pageSize, this.regionFormVO)
    },
    		 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    		 
    // 异步请求
    fetchData(currentPage, pageSize, regionFormVO) {
        getListPage(currentPage, pageSize, regionFormVO).then(async response => {
            const { data: res } = await response
            console.log(res);
            this.currentPage = res.current
            this.pageSize = res.size
            this.tableData = res.records
            this.total = res.total
        })
    },

后端处理

  • 控制器

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    		 
    package com.example.controller;


    import com.baomidou.mybatisplus.core.metadata.IPage;
    import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
    import com.example.mapper.RegionMapper;
    import com.example.pojo.dto.RegionFormDTO;
    import com.example.pojo.vo.RegionFormVO;
    import com.example.result.ResultModel;
    import com.example.service.RegionService;
    import io.swagger.annotations.Api;
    import io.swagger.annotations.ApiOperation;
    import io.swagger.annotations.ApiParam;
    import lombok.extern.slf4j.Slf4j;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.beans.propertyeditors.CustomDateEditor;
    import org.springframework.format.annotation.DateTimeFormat;
    import org.springframework.web.bind.WebDataBinder;
    import org.springframework.web.bind.annotation.*;

    import java.text.SimpleDateFormat;
    import java.util.Date;

    @Slf4j
    @Api(tags = "区域信息")
    @RestController
    @CrossOrigin
    @RequestMapping("/region")
    public class RegionController {
        @Autowired
        private RegionService regionService;

        @ApiOperation("获取分页列表")
        @PostMapping("/list/{currentPage}/{pageSize}")
        public ResultModel<RegionFormDTO> listPage(
                @ApiParam(value = "当前页码", required = true)
                @PathVariable("currentPage") Integer currentPage,
                @ApiParam(value = "每页记录数", required = true)
                @PathVariable("pageSize") Integer pageSize,
                @ApiParam(value = "查询对象")
                @RequestBody RegionFormVO regionFormVO) {
            log.info("regionFormVO: {}",regionFormVO.toString());
            Page<RegionFormDTO> pageParam = new Page<>(currentPage, pageSize);
            IPage<RegionFormDTO> pageModel = regionService.selectListPage(pageParam, regionFormVO);
            return ResultModel.success(pageModel);
        }
    }

  • mapper

    1
    2
    3
    4
    5
    		 
    @Mapper
    public interface RegionMapper extends BaseMapper<Region> {
        IPage<RegionFormDTO> selectPageVo(Page<RegionFormDTO> page, RegionFormVO regionFormVO);
    }

    		 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    		 
    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
    <mapper namespace="com.example.mapper.RegionMapper">
    <!-- IPage<RegionFormDTO> selectPageVo(Page<RegionFormDTO> page, RegionFormVO regionFormVO);  -->
    <select id="selectPageVo" resultType="regionFormDTO" parameterType="regionFormVO">
        SELECT r.regionId, r.regionName, c.cityName, a.addressName, createTime, endTime
        FROM region r
        JOIN city c ON r.regionId = c.regionId
        JOIN address a ON c.cityId = a.cityId
        <where>
            <if test="regionFormVO.regionName != null and regionFormVO.regionName != ''">
                or r.regionName LIKE #{regionFormVO.regionName}
            </if>
            <if test="regionFormVO.cityName != null and  regionFormVO.cityName != ''">
                or c.cityName LIKE #{regionFormVO.cityName}
            </if>
            <if test="regionFormVO.addressName != null and regionFormVO.addressName != ''">
                or a.addressName LIKE #{regionFormVO.addressName}
            </if>
            <if test="regionFormVO.createTime != null and regionFormVO.createTime!='' and  regionFormVO.endTime != null and regionFormVO.endTime !=''">
                or createTime BETWEEN #{regionFormVO.createTime} AND #{regionFormVO.endTime}
            </if>
        </where>
    </select>
    </mapper>

  • service

    1
    2
    3
    4
    5
    		 

    public interface RegionService extends IService<Region> {
        IPage<RegionFormDTO> selectListPage(Page<RegionFormDTO> pageParam, RegionFormVO regionFormVO);
    }

    		 
    1
    2
    3
    4
    5
    6
    7
    8
    		 
    @Service
    public class RegionServiceImpl extends ServiceImpl<RegionMapper, Region> implements RegionService {
        @Override
        public IPage<RegionFormDTO> selectListPage(Page<RegionFormDTO> pageParam, RegionFormVO regionFormVO) {
            return baseMapper.selectPageVo(pageParam, regionFormVO);
        }
    }

  • 请求日志

    请求日期范围
    日志解析

说明

  • 数据库的日期类型是datetime

  • 在真正的实体类上对应的是

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    		 
    @Data
    @EqualsAndHashCode(callSuper = false)
    @Accessors(chain = true)
    @ApiModel(value = "Region对象", description = "")
    public class Region implements Serializable {
        private static final long serialVersionUID = 1L;
        @TableId(value = "regionId", type = IdType.AUTO)
        private Integer regionId;
        @TableField("regionName")
        private String regionName;
        @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss",timezone = "GMT+8")
        private Date createTime;
        @TableField("endTime")
        @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss",timezone = "GMT+8")
        private Date endTime;
    }

  • 使用vo 时使用String 类型,在测试过程中Date 反复报错