Ant Design Pro Vue 时间段查询 问题
<a-form-item
label="起止日期"
:labelCol="{lg: {span: 7}, sm: {span: 7}}"
:wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
<a-range-picker
name="buildTime"
style="width: 100%"
v-model="queryParam.date"
v-decorator="[
'buildTime',
{rules: [{ required: true, message: '请选择起止日期' }]}
]" />
</a-form-item>
查询的时候,URL地址会变成
his/list/advice?pageNo=1&pageSize=10&status=0&date[]=2019-11-26&date[]=2019-11-27
不符合URL规范
import { axios } from '@/utils/request'
import Mock from 'mockjs2'
import qs from 'qs'
const api = {
adviceList: '/mongo/his/list/advice',
}
export default api
export function getAdviceList (parameter) {
console.log('loadData.parameter =>', parameter)
if(parameter.date!=null && parameter.date.length>1){
//parameter.date = ['2019-11-17','2019-11-20']
parameter.date = [parameter.date[0].format('YYYY-MM-DD'),parameter.date[1].format('YYYY-MM-DD')]
parameter.date = qs.stringify(parameter.date, { indices: false })
console.log('loadData.parameter.date =>', parameter.date)
}
return axios({
url: api.adviceList,
method: 'get',
params: parameter
})
}
1.日期转字符串
2.数组转字符串 qs.stringify
注意:v-model="queryParam.date" 用的是moment,他是个对象,所在qs.stringify 的时候,要把它format成需要的字符串格式,重拼成数组,再用 qs.stringif转一下
parameter.date = ['2019-11-17','2019-11-20']
通过parameter.date = qs.stringify(parameter.date, { indices: false })
转换后,会得到 his/list/advice?pageNo=1&pageSize=10&status=0&date=0=2019-11-17&1=2019-11-20
后台
private Criteria buildCriteria(HttpServletRequest request) {
String date = request.getParameter("date");
if (StringUtil.isNotEmpty(keyword)) {
criteria.add(SyncAdvice.CONTENT, OP.LIKE, keyword);
}
if (StringUtil.isNotEmpty(date)) {
// Date dt = DateUtil.convert("yyyy-MM-dd'T'HH:mm:ss.SSS'Z'", date.replace("\"", ""));
// Date dtBegin = DateUtil.getDateAt0(dt);
// Date dtEnd = DateUtil.getDateAt24(dt);
// String dt = "0=2019-11-08&1=2019-11-15";
String[] sp = date.split("&");
if(sp.length>1){
String[] dtBeginArr = sp[0].split("=");
String[] dtEndArr = sp[1].split("=");
String dtBeginStr=dtBeginArr[1].toString();
String dtEndStr=dtEndArr[1].toString();
Date dtB = DateUtil.convert("yyyy-MM-dd", dtBeginStr);
Date dtE = DateUtil.convert("yyyy-MM-dd", dtEndStr);
Date dtBegin = DateUtil.getDateAt0(dtB);
Date dtEnd = DateUtil.getDateAt24(dtE);
criteria.add(SyncAdvice.CREATE_TIME, OP.GE, DateUtil.toFormatString("yyyy-MM-dd'T'HH:mm:ss.SSS'Z'", dtBegin));
criteria.add(SyncAdvice.CREATE_TIME, OP.LE, DateUtil.toFormatString("yyyy-MM-dd'T'HH:mm:ss.SSS'Z'", dtEnd));
}
}
return criteria;
}
效果如下

Ant Design Pro Vue 时间段查询 问题的更多相关文章
- Ant Design Pro快速入门
在上一篇文章中,我们介绍了如何构建一个Ant Design Pro的环境. 同时讲解了如何启动服务并查看前端页面功能. 在本文中,我们将简单讲解如何在Ant Design Pro框架下实现自己的业务功 ...
- Ant Design Pro 脚手架+umiJS 实践总结
一.简介 1.Ant Design Pro Ant Design Pro是一款搭建中后台管理控制台的脚手架 ,基于React,dva.js,Ant Design (1)其中dva主要是控制数据流向,是 ...
- Ant design在vue,react的引入
文章地址: https://www.cnblogs.com/sandraryan/ 最近由于 一些不可描述的原因 要研究一下Ant design这个前端框架. 祭上官网: https://ant.de ...
- ant design pro 当中改变ant design 组件的样式和 数据管理
ant design pro 简介 官网简介 链接 https://pro.ant.design/docs/getting-started-cn 项目结构 https://github.com/ant ...
- Ant Design Pro入门教程,安装,运行(V5 Typescript版)
[前言] 找了很多Admin模板,最后还是看中了AntDesignPro这个阿里巴巴开源的Admin框架,长这样(还行吧,目前挺主流的): 官网地址:https://pro.ant.design/in ...
- Ant Design Pro+Electron+electron-builder实现React应用脱离浏览器,桌面安装运行
ant-design-pro ----> version :2.3.1 由于网上Ant Design Pro+Electron的资料太少,我就贡献一点经验 最近需要讲AntD Pro项目(以 ...
- 阿里开源项目之Ant Design Pro
本篇文章主要包含的内容有三个方面. 第一.Ant Design Pro简介; 第二.Ant Design Pro能做什么; 第三.初步使用; 我相信通过这三个方面的讲解能让你大概知道Ant Desig ...
- ant design pro (十五)advanced 使用 API 文档工具
一.概述 原文地址:https://pro.ant.design/docs/api-doc-cn 在日常开发中,往往是前后端分离的,这个时候约定好一套接口标准,前后端各自独立开发,就不会被对方的技术难 ...
- ant design pro (十四)advanced 使用 CLI 工具
一.概述 原文地址:https://pro.ant.design/docs/cli-cn 为了更好以及高效的开发效率,我们提供了配套的 ant-design-pro-cli 工具. pro cli 提 ...
随机推荐
- Linux-crontab定时执行脚本配置
crontab是一个可以根据自己配置的命令定时执行脚本的服务 安装crontab(centos) yum install Vixie-cron yum install crontabs vixie-c ...
- zabbix--源码安装报错总结
源码安装 zabbix 报错总结 1)报错: configure: error: MySQL library not found 解决办法 # find / -name "mysql_con ...
- SQL血的教训
1. 每次查询的数据要有限制 2013年1月 产品独立数据库,由于多条SQL每次查询数据超过几千条,有些超过10万条数据未分页,造成应用服务器CPU有时持续100%. 2. 禁止 ...
- 使用MPU6050陀螺仪自制Arduino数字量角器
MPU6050惯性单元是一个3轴加速度计和一个3轴陀螺仪组合的单元.它还包含温度传感器和DCM,可执行复杂的任务. MPU6050通常用于制作无人机和其他远程控制机器人,如自平衡机器人.在本篇文章中, ...
- dapi 基于Django的轻量级测试平台一 设计思想
GitHub:https://github.com/yjlch1016/dapi 一.项目命名: dapi:即Django+API测试的缩写 二.设计思想: 模拟性能测试工具JMeter的思路, 实现 ...
- Linux 定时任务的控制台导出导入到文件
这个不但适用于定时任务,也适用于一般的脚本. 以前喜欢用>>这样的快捷方式, 今天看到用tee命令的,也记下. 55 23 * * * /bin/sh /sql_bak/restore_s ...
- sublime设置代码缩进
打开sublime的首选项(Preferences)下的设置-用户(Setting-User) ,配置如下代码 , "translate_tabs_to_spaces": true ...
- (待做例子)问题描述: el-tab 下有2个路由,其中第1个路由设置了 beforeRouteLeave,点击 el-tab 第2个tab时,样式直接跟过去了(预期结果是:样式不到第二个tab上,beforeRouteLeave允许跳转后才到第二个tab上)
解决: 经过以上分析,强制赋值应该在前次赋值而且DOM已经刷新完毕之后进行.可以使用$nextTick,以下是代码: handleTabClick (tab) { let name = this.fi ...
- Arthas - 开源的java诊断工具,非常有用
常用命令 help 查看帮助 help COMMAND 查看指定命令的详细帮助 COMMAND -h 查看指定命令的详细帮助 double tab 查看支持的所有命令 dashboard 查看线程JV ...
- 本地部署Easy Mock
最近在自己捣腾个vue的项目,苦于没有接口测试.网上搜寻一遍,基本上是使用mock.js模拟数据.研究mock.js 过程中,发现很多人提到了Easy Mock,发现它更加的方便.但是访问Eash M ...