element ui 日期選擇組件控制可選時間範圍

原創

Lucky_Aimee

2020-02-20 16:22

業務場景：系統中各個界面已有時間選擇組件，沒有做到時間範圍統一限制，比較凌亂，需對其進行統一的可配置化管理。

業務需求，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>