DatePicker中选择日期范围（daterange）的日期做为搜索条件时，前端和后端处理的两种不同方式

标签：DatePicker name RequestParam daterange getList listQuery 日期 endTime String

一、前端将日期分为开始时间和结束时间

1、前端代码

<el-form-item label="实际入库时间区间：">
        <el-date-picker
                v-model="listQuery.inStoreDate"
                type="daterange"
                value-format="yyyy-MM-dd"
                start-placeholder="开始日期"
                end-placeholder="结束日期"/>
      </el-form-item>

查询按钮

<el-button class="el-button el-button--primary el-button--small" type="primary" icon="el-icon-search" @click="getList" >查询</el-button>

getList方法：

getList() {
      this.listLoading = true
      this.listQuery.startTime = this.listQuery.inStoreDate == null ? null : this.listQuery.inStoreDate[0]
      this.listQuery.endTime = this.listQuery.inStoreDate == null ? null : this.listQuery.inStoreDate[1]
      console.log(this.listQuery)
      inStore.getList(this.listQuery).then(response => {
        console.log(response)
        this.list = response.data
        this.total = response.total
        this.listLoading = false
      })
    },

js:

getList(query) {
    return request({
      url: '/inStore/list',
      method: 'post',
      params: query
    })
  },

2、后台代码

controller

@PostMapping("/list")
    public Result getList(
            @RequestParam(name = "entityId", required = false) String entityId,
            @RequestParam(name = "deliveryEntName", required = false) String deliveryEntName,
            @RequestParam(name = "inStoreNoteNo", required = false) String inStoreNoteNo,
            @RequestParam(name = "startTime", required = false) String startTime,
            @RequestParam(name = "endTime", required = false) String endTime,
            @RequestParam(name = "inStoreType", required = false) String inStoreType,
            @RequestParam(name = "page", defaultValue = "1") int pageIndex,
            @RequestParam(name = "limit", defaultValue = "10") int length
    ) {
        return inStoreService.getList(entityId, deliveryEntName, inStoreNoteNo,startTime, endTime, inStoreType, pageIndex, length);
    }

service

@Override
    public Result getList(String entityId, String deliveryEntName, String inStoreNoteNo, String startTime, String endTime, String inStoreType,
                          int pageIndex, int length) {
        Map map = new HashMap();
        map.put("entityId", entityId);
        map.put("deliveryEntName", deliveryEntName);
        map.put("inStoreNoteNo", inStoreNoteNo);
        map.put("startTime", startTime);
        map.put("endTime", endTime);
        map.put("inStoreType", inStoreType);
        PageHelper.startPage(pageIndex, length);
        List<Map> inStoreList = inStoreDao.selectList(map);
        PageInfo pageInfo = new PageInfo(inStoreList);
        return Result.operating("入库信息", true, ResultCode.SUCCESS, pageInfo.getList(), (int) pageInfo.getTotal(), pageInfo.getPages());
    }

dao

<select id="selectList" resultMap="inStore">
        select *
        from b_in t1
        <where>
            <if test="entityId!=null and entityId!=''">
                AND t1.entity_id =#{entityId}
            </if>
            <if test="deliveryEntName!=null and deliveryEntName!=''">
                AND t1.from_name like concat('%',#{deliveryEntName},'%')
            </if>
            <if test="inStoreNoteNo!=null and inStoreNoteNo!=''">
                AND t1.in_no like concat('%',#{inStoreNoteNo},'%')
            </if>
            <if test="startTime!=null and startTime!='' and endTime!=null and endTime !=''">
                AND t1.in_date BETWEEN  #{startTime} AND #{endTime}
            </if>
            <if test="inStoreType!=null and inStoreType!=''">
                AND t1.in_type = #{inStoreType}
            </if>
        </where>
        ORDER BY t1.create_time desc, t1.id desc
    </select>

二、后台分为开始时间和结束时间

1、前端代码

<el-form-item label="生产日期：">
        <el-date-picker
            v-model="listQuery.produceDate"
            type="daterange"
            range-separator="-"
            start-placeholder="起始时间"
            end-placeholder="结束时间"
            value-format="YYYY-MM-DD"
            clearable
        />
      </el-form-item>

getList方法

getList() {
      this.listLoading = true;
      productRelation.getList(this.listQuery).then(res => {
        if (res.success) {
          this.list = res.data;
          this.total = res.total;
        }
      }).catch(err => {
        console.log(err);
      }).finally(() => {
        this.listLoading = false;
      })
    },

2、后台代码

controller

@PostMapping("/getList")public Result getList(@RequestBody JSONObject jsonQuery) {
        return productRelationService.getList(jsonQuery);
    }

service实现类中通过JSONObject的getList方法得到数组，再得到开始时间和结束时间。

// 获取到前台传递的生产日期查询区间
        List<String> produceDate = jsonQuery.getList("produceDate", String.class);
        if (CollectionUtil.isNotEmpty(produceDate)) {
            jsonQuery.put("beginDate", produceDate.get(0));
            jsonQuery.put("endDate", produceDate.get(1));
        }

 

标签：DatePicker,name,RequestParam,daterange,getList,listQuery,日期,endTime,String
From： https://www.cnblogs.com/zwh0910/p/15143717.html