业务场景:系统中各个界面已有时间选择组件,没有做到时间范围统一限制,比较凌乱,需对其进行统一的可配置化管理。
业务需求,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>