element ui 日期选择组件控制可选时间范围

业务场景：系统中各个界面已有时间选择组件，没有做到时间范围统一限制，比较凌乱，需对其进行统一的可配置化管理。

业务需求，1.可选时间范围不可超过当前时间；2.选择的范围不能超过一年;3.可选择的范围后期可动态配置

一.封装了一个exportLimit.js

设置了三个缓存数据，再进入系统的时候，请求接口并将数据缓存下来，以供使用。

（因为产品需要不动代码就能改变这些参数，这里我的这些参数是在rancher的环境变量中进行配置管理的，接口读取的是环境变量的配置数据。根据产品需求不同也可以在自己本地定义变量，后期通过修改代码里面的变量来管理）

limitTimeNumber：限制时间的数据；

limitTimeType：限制时间的类型，可选值为moment.js提供的key值或者Shorthand值;

Key	Shorthand
years	y
quarters	Q
months	M
weeks	w
days	d
hours	h
minutes	m
seconds	s
milliseconds	ms

 limitLimitTxt：限制的中文描述。比如limitTimeNumber=1，limitTimeType=‘years'，那么limitLimitTxt=’一年‘，主要用来界面友好显示使用；

import moment from "moment";
import Session from '../local/session';
export function datePickerOptions(self) {
    return {
        onPick: ({ maxDate, minDate }) => {
            if(maxDate) {
                self.pickerMinDate = '';
            } else {
                self.pickerMinDate = minDate;
            }
        },
        disabledDate(time) {
            if (self.pickerMinDate) {
                let limitTimeNumber = Session.get('limitTimeNumber',);
                let limitTimeType = Session.get('limitTimeType');
                let minTime = moment(self.pickerMinDate).subtract(limitTimeNumber, limitTimeType);
                let maxTime = moment(self.pickerMinDate).add(limitTimeNumber, limitTimeType);
                if (maxTime > moment()) {
                    maxTime = moment();
                }
                return moment(time) > maxTime || moment(time) < minTime || moment(time) > moment();
            } else {
                return time.getTime() > Date.now() - 8.64e6;
            }
        }
    };
}
export const limitLimitTxt = Session.get('limitLimitTxt');

二.在系统的各个界面中引用上面js中的方法和变量 

 <el-date-picker v-model="hourData" clearable size='small' format='yyyy/MM/dd HH:00' :picker-options="pickerOptions" @change='hourDataChange' type="datetimerange" placeholder="选择时间范围"></el-date-picker>
<span class="time-tips">提示：(单次最多可选择{{limitLimitTxt}}）</span>

<script>
	import moment from 'moment'
    import {datePickerOptions, limitLimitTxt} from '../../utils/exportLimit';
	export default {
		data() {
		    const self = this;
			return {
				hourData: [moment().format('YYYY/MM/DD 01:00'), moment().format('YYYY/MM/DD HH:00')],
                pickerMinDate: '',
                pickerOptions: datePickerOptions(self),
                limitLimitTxt: limitLimitTxt
			}
		},
		methods: {
			hourDataChange(val) {
				if(!val) {
					this.$message({
						message: '请选择有效的时间范围！',
						type: 'warning'
					});
                    this.pickerMinDate = '';
					return
				}
			},
		}
	}
</script>