＜a_range-picker＞组件选择时间段的使用

仅供学习，不可转载

研究了好长时间终于把选择时间段存到数据库和从数据库里面拿出来做到回显给弄明白了，在这里做一个非常详细的笔记，从前端的vue到后端整个的实现过程。

效果图

思路：

1>首先这个组件的使用比较简单，直接拿过来用就可以了，

<a-range-picker
style="width: 100%"
v-decorator="['Times',validatorRules.trainDate]"
format="YYYY-MM-DD"
:placeholder="['开始时间', '结束时间']"
@change="timeChange"/>

同时需要引入moment这个组件

import moment from 'moment'

2>拿到之后取组件里面的时间，这个相对而言也是比较简单，调用@change="timeChange"的方法，直接用moment取开始时间和结束时间就可以了。

timeChange(value,dateString){
this.startTime = dateString[0]
this.endTime = dateString[1]
this.model.Times = [moment(`${this.startTime}`, 'YYYY-MM-DD'), moment(`${this.endTime}`, 'YYYY-MM-DD')]
},

3>拿到时间之后存到数据库里面，这里运用了比较笨的方法，但是比较好理解。一般情况下我们习惯的把数据库里面字段的值的变量类型设置为datetime类型的，但是容易出现字段过长，存不到数据库里面的情况，找了很多的资料也是没有解决。而我在这里面的解决方法就是，首先在model里面设置一个List类型的变量，用来暂时的存储这个时间段

@Excel(name = "***时间", width = 15, format = "yyyy-MM-dd")
@JsonFormat(timezone = "GMT+8",pattern = "yyyy-MM-dd")
@DateTimeFormat(pattern="yyyy-MM-dd")
private List<Date> Times;

然后在数据库里面设置了两个datetime类型的变量，分别来存开始时间和结束时间。

如果想在前端显示出来两个时间，可以拿到这两个时间之后进行一个转换，转换成字符串类型的，然后存储到另一个String类型的变量，这样在表单显示的时候就是一个时间段，格式可以自己设计。

4>拿到前端传过来类型为List的变量的数据之后需要做做一些处理。
需要拿到该时间段的index为0,1的时间，然后把对应的时间赋值给相应的变量就可以了，当然这个类型为List的变量没有存到数据库里面，这样就避免了出现字段过长而存不到数据库里面的情况。

5>以上是选择时间段之后存到数据库里面的过程，接下来就是回显的过程。同样的过程，需要从数据库里面查到开始时间和结束时间，然后把这个两个时间add到类型为List的变量里面。然后就是对传到前端数据的处理，处理的时候也是需要用到moment。

this.form.setFieldsValue({'Times': [moment(this.model.Times[0] ),moment(this.model.Times[1])]})

以上的过程就是从选择时间段到列表的显示以及回显的整个过程。

效果图

如若有相对简单的方法可以评论，一起学习！！！