fusions-ui 1.2.7 → 1.2.8

package/components/fu-datetime-picker/fu-datetime-picker.vue

@@ -1,375 +0,0 @@
-<template>
-	<fu-picker 
-		ref="picker"
-		:columns="columns"
-		:title="title" 
-		:titleSize="titleSize" 
-		:titleColor="titleColor" 
-		:itemHeight="itemHeight" 
-		:visibleItemCount="visibleItemCount"
-		:defaultIndex="innerDefaultIndex" 
-		:cancelText="cancelText" 
-		:cancelSize="cancelSize"
-		:cancelColor="cancelColor" 
-		:confirmText="confirmText"
-		:confirmSize="confirmSize"
-		:confirmColor="confirmColor" 
-		:maskClosable="maskClosable"
-		@close="close"
-		@cancel="cancel" 
-		@confirm="confirm" 
-		@change="change"></fu-picker>
-</template>
-
-<script>
-	import mpMixin from '../../libs/mixin/mpMixin.js';
-	import mixin from '../../libs/mixin/mixin.js';
-	import dayjs from '../../libs/function/dayjs.js';
-	import props from './props.js';
-	function times(n, iteratee) {
-	    let index = -1
-	    const result = Array(n < 0 ? 0 : n)
-	    while (++index < n) {
-	        result[index] = iteratee(index)
-	    }
-	    return result
-	}
-	/**
-	 * DatetimePicker 时间日期选择器
-	 * @description 此组件选择器用于时间日期
-	 * @property {String,Number} value 绑定值 默认0
-	 * @property {String} title 顶部标题  不传不显示
-	 * @property {String,Number} titleSize 顶部标题字体大小 默认15  (注：不传单位，默认px)
-	 * @property {String} titleColor 顶部标题字体颜色
-	 * @property {String} mode 展示格式 mode=date为日期选择，mode=time为时间选择，mode=year为年选择， mode=year-month为年月选择，mode=datetime为日期时间选择 ( 默认 'datetime' )
-	 * 	@value date 日期选择
-	 * 	@value time 时间选择
-	 * 	@value year 年选择
-	 * 	@value year-month 年月选择
-	 * 	@value datetime 日期时间
-	 * @property {Number} maxDate 可选的最大时间 最大默认值为后10年
-	 * @property {Number} minDate 可选的最小时间 最小默认值为前10年
-	 * @property {Number} maxHour 可选的最大小时，仅mode=time有效 ( 默认 23 )
-	 * @property {Number} minHour 可选的最小小时，仅mode=time有效 ( 默认 0 )
-	 * @property {Number} maxMinute 可选的最大分钟，仅mode=time有效 ( 默认 59 )
-	 * @property {Number} minMinute	可选的最小分钟，仅mode=time有效 ( 默认 0 )
-	 * @property {Function}	filter 选项过滤函数 默认null
-	 * @property {Function}	formatter 选项格式化函数 默认null
-	 * @property {Boolean} loading = [true|false] 是否显示加载中状态 默认false
-	 * @property {String,Number} itemHeight	各列中，单个选项的高度  ( 默认 44 )
-	 * @property {String} cancelText 取消按钮文本 默认取消
-	 * @property {String,Number} cancelSize 取消按钮字体大小 默认13 (注：不传单位，默认px)
-	 * @property {String} cancelColor 取消按钮文本颜色 默认#888888
-	 * @property {String} confirmText 确认按钮的文字  ( 默认 '确定' )
-	 * @property {String,Number} confirmSize 确认按钮字体大小 默认13  (注：不传单位，默认px)
-	 * @property {String} confirmColor 确认按钮文本颜色
-	 * @property {String,Number} visibleItemCount 每列中可见选项的数量  ( 默认 5 )
-	 * @property {Array} defaultIndex 各列的默认索引
-	 * @property {Boolean} maskClosable = [true|false] 是否允许点击遮罩关闭选择器 默认 true
-	 * 
-	 * @event {Function} close 关闭选择器时触发
-	 * @event {Function} confirm 点击确定按钮，返回当前选择的值
-	 * @event {Function} change 当选择值变化时触发
-	 * @event {Function} cancel 点击取消按钮
-	 * @example <fu-datetime-picker ref="datetimePicker" mode="datetime"></fu-datetime-picker>
-	 */
-	export default {
-		name: 'FuDatetimePicker',
-		emits: ['close', 'cancel', 'confirm', 'change', 'input', 'update:modelValue'],
-		mixins: [mpMixin, mixin, props],
-		data() {
-			return {
-				columns: [],
-				innerDefaultIndex: [],
-				innerFormatter: (type, value) => value
-			}
-		},
-		computed: {
-			// 如果以下这些变量发生了变化，意味着需要重新初始化各列的值
-			propsChange() {
-				const propsValue = this.value || this.modelValue;
-				return [this.mode, this.maxDate, this.minDate, this.minHour, this.maxHour, this.minMinute, this.maxMinute, this.filter, propsValue]
-			}
-		},
-		mounted() {
-			this.init()
-		},
-		methods: {
-			init() {
-				this.getValue()
-				// this.updateColumnValue(this.innerValue)
-			},
-			
-			getValue() {
-				const propsValue = this.value || this.modelValue;
-				this.innerValue = this.correctValue(propsValue);
-			},
-			
-			// 在微信小程序中，不支持将函数当做props参数，故只能通过ref形式调用
-			setFormatter(e) {
-				this.innerFormatter = e;
-			},
-			
-			// 打开
-			open() {
-				this.$refs.picker.open();
-				this.getValue()
-				this.updateColumnValue(this.innerValue);
-			},
-			
-			// 关闭选择器
-			close() {
-				if (this.maskClosable) {
-					this.cancel()
-					this.$emit('close')
-				}
-			},
-			
-			// 点击工具栏的取消按钮
-			cancel() {
-				this.$emit('cancel')
-			},
-			
-			// 点击工具栏的确定按钮
-			confirm() {
-				this.cancel()
-				this.$emit('confirm', {
-					value: this.innerValue,
-					mode: this.mode
-				})
-				this.$emit('input', this.innerValue)
-				this.$emit('update:modelValue', this.innerValue)
-			},
-			
-			//用正则截取输出值,当出现多组数字时,抛出错误
-			intercept(e,type){
-				let judge = e.match(/\d+/g)
-				//判断是否掺杂数字
-				if(judge.length>1){
-					this.$fu.error('请勿在过滤或格式化函数时添加数字')
-					return 0
-				}else if(type && judge[0].length == 4){//判断是否是年份
-					return judge[0]
-				}else if(judge[0].length > 2){
-					this.$fu.error('请勿在过滤或格式化函数时添加数字')
-					return 0
-				}else{
-					return judge[0]
-				}
-			},
-			
-			// 列发生变化时触发
-			change(e) {
-				const { indexs, values } = e;
-				let selectValue = '';
-				if(this.mode === 'time') {
-					// 根据value各列索引，从各列数组中，取出当前时间的选中值
-					selectValue = `${this.intercept(values[0][indexs[0]])}:${this.intercept(values[1][indexs[1]])}`;
-				} else if (this.mode === 'year') {
-					const year = parseInt(this.intercept(values[0][indexs[0]], 'year'));
-					selectValue = Number(new Date(year, 0));
-				} else {
-					// 将选择的值转为数值，比如'03'转为数值的3，'2019'转为数值的2019
-					const year = parseInt(this.intercept(values[0][indexs[0]],'year'));
-					const month = parseInt(this.intercept(values[1][indexs[1]]));
-					let date = parseInt(values[2] ? this.intercept(values[2][indexs[2]]) : 1);
-					let hour = 0, minute = 0;
-					// 此月份的最大天数
-					const maxDate = dayjs(`${year}-${month}`).daysInMonth();
-					// year-month模式下，date不会出现在列中，设置为1，为了符合后边需要减1的需求
-					if (this.mode === 'year-month') {
-					    date = 1;
-					}
-					// 不允许超过maxDate值
-					date = Math.min(maxDate, date);
-					if (this.mode === 'datetime') {
-					    hour = parseInt(this.intercept(values[3][indexs[3]]));
-					    minute = parseInt(this.intercept(values[4][indexs[4]]));
-					}
-					// 转为时间模式
-					selectValue = Number(new Date(year, month - 1, date, hour, minute));
-				}
-				// 取出准确的合法值，防止超越边界的情况
-				selectValue = this.correctValue(selectValue);
-				this.innerValue = selectValue;
-				this.updateColumnValue(selectValue)
-				// 发出change时间，value为当前选中的时间戳
-				this.$emit('change', {
-					value: selectValue,
-					// #ifndef MP-WEIXIN
-					// 微信小程序不能传递this实例，会因为循环引用而报错
-					picker: this.$refs.picker,
-					// #endif
-					mode: this.mode
-				})
-			},
-			
-			// 更新各列的值，进行补0、格式化等操作
-			updateColumnValue(value) {
-				this.innerValue = value;
-				this.updateColumns()
-				this.updateIndexs(value)
-			},
-			
-			// 更新索引
-			updateIndexs(value) {
-				let values = [];
-				const formatter = this.formatter || this.innerFormatter;
-				const padZero = this.$fu.padZero;
-				if (this.mode === 'time') {
-					// 将time模式的时间用:分隔成数组
-				  const timeArr = value.split(':');
-					// 使用formatter格式化方法进行管道处理
-				  values = [formatter('hour', timeArr[0]), formatter('minute', timeArr[1])];
-				} else {
-					const date = new Date(value);
-					values = [
-						formatter('year', `${dayjs(value).year()}`),
-						// 月份补0
-						formatter('month', padZero(dayjs(value).month() + 1))
-					];
-					if (this.mode === 'date') {
-						// date模式，需要添加天列
-						values.push(formatter('day', padZero(dayjs(value).date())))
-					}
-					if (this.mode === 'datetime') {
-						// 数组的push方法，可以写入多个参数
-						values.push(formatter('day', padZero(dayjs(value).date())), formatter('hour', padZero(dayjs(value).hour())), formatter('minute', padZero(dayjs(value).minute())))
-					}
-				}
-			
-				// 根据当前各列的所有值，从各列默认值中找到默认值在各列中的索引
-				const indexs = this.columns.map((column, index) => {
-					// 通过取大值，可以保证不会出现找不到索引的-1情况
-					return Math.max(0, column.findIndex(item => item === values[index]))
-				});
-				this.innerDefaultIndex = indexs;
-			},
-			
-			// 更新各列的值
-			updateColumns() {
-				const formatter = this.formatter || this.innerFormatter;
-				// 获取各列的值，并且map后，对各列的具体值进行补0操作
-				const results = this.getOriginColumns().map((column) => column.values.map((value) => formatter(column.type, value)));
-				this.columns = results;
-			},
-			
-			getOriginColumns() {
-				// 生成各列的值
-				const results = this.getRanges().map(({ type, range }) => {
-					let values = times(range[1] - range[0] + 1, (index) => {
-						let value = range[0] + index
-						value = type === 'year' ? `${value}` : this.$fu.padZero(value)
-						return value
-					});
-					// 进行过滤
-					if (this.filter) {
-						values = this.filter(type, values);
-					}
-					return { type, values }
-				});
-				return results
-			},
-			
-			// 通过最大值和最小值生成数组
-			generateArray(start, end) {
-				return Array.from(new Array(end + 1).keys()).slice(start)
-			},
-			
-			// 得出合法的时间
-			correctValue(value) {
-				const isDateMode = this.mode !== 'time';
-				if (isDateMode && !this.$fu.checkDate(value)) {
-					// 如果是日期类型，但是又没有设置合法的当前时间的话，使用最小时间为当前时间
-					value = this.minDate;
-				} else if (!isDateMode && !value) {
-					// 如果是时间类型，而又没有默认值的话，就用最小时间
-					value = `${this.$fu.padZero(this.minHour)}:${this.$fu.padZero(this.minMinute)}`;
-				}
-				// 时间类型
-				if (!isDateMode) {
-					if (String(value).indexOf(':') === -1) return this.$fu.error('时间错误，请传递如12:24的格式')
-					let [hour, minute] = value.split(':');
-					// 对时间补零，同时控制在最小值和最大值之间
-					hour = this.$fu.padZero(this.$fu.range(this.minHour, this.maxHour, Number(hour)));
-					minute = this.$fu.padZero(this.$fu.range(this.minMinute, this.maxMinute, Number(minute)));
-					return `${ hour }:${ minute }`
-				} else {
-					// 如果是日期格式，控制在最小日期和最大日期之间
-					value = dayjs(value).isBefore(dayjs(this.minDate)) ? this.minDate : value;
-					value = dayjs(value).isAfter(dayjs(this.maxDate)) ? this.maxDate : value;
-					return value
-				}
-			},
-			
-			// 获取每列的最大和最小值
-			getRanges() {
-				if (this.mode === 'time') {
-					return [
-						{ type: 'hour', range: [this.minHour, this.maxHour] },
-						{ type: 'minute', range: [this.minMinute, this.maxMinute] },
-					];
-				}
-				const { maxYear, maxDate, maxMonth, maxHour, maxMinute, } = this.getBoundary('max', this.innerValue);
-				const { minYear, minDate, minMonth, minHour, minMinute, } = this.getBoundary('min', this.innerValue);
-				const result = [
-					{ type: 'year', range: [minYear, maxYear] },
-					{ type: 'month', range: [minMonth, maxMonth] },
-					{ type: 'day', range: [minDate, maxDate] },
-					{ type: 'hour', range: [minHour, maxHour] },
-					{ type: 'minute', range: [minMinute, maxMinute] },
-				];
-				if (this.mode === 'date') result.splice(3, 2);
-				if (this.mode === 'year') result.splice(1, 4);
-				if (this.mode === 'year-month') result.splice(2, 3);
-				return result;
-			},
-			
-			// 根据minDate、maxDate、minHour、maxHour等边界值，判断各列的开始和结束边界值
-			getBoundary(type, innerValue) {
-				const value = new Date(innerValue);
-				const boundary = new Date(this[`${type}Date`]);
-				const year = dayjs(boundary).year();
-				let month = 1;
-				let date = 1;
-				let hour = 0;
-				let minute = 0;
-				if (type === 'max') {
-					month = 12;
-					// 月份的天数
-					date = dayjs(value).daysInMonth();
-					hour = 23;
-					minute = 59;
-				}
-				// 获取边界值，逻辑是：当年达到了边界值(最大或最小年)，就检查月允许的最大和最小值，以此类推
-				if (dayjs(value).year() === year) {
-					month = dayjs(boundary).month() + 1;
-					if (dayjs(value).month() + 1 === month) {
-						date = dayjs(boundary).date();
-						if (dayjs(value).date() === date) {
-							hour = dayjs(boundary).hour();
-							if (dayjs(value).hour() === hour) {
-									minute = dayjs(boundary).minute();
-							}
-						}
-					}
-				}
-				return {
-					[`${type}Year`]: year,
-					[`${type}Month`]: month,
-					[`${type}Date`]: date,
-					[`${type}Hour`]: hour,
-					[`${type}Minute`]: minute
-				}
-			}
-		},
-		watch: {
-			propsChange() {
-				this.init()
-			}
-		}
-	}
-</script>
-
-<style>
-</style>

package/components/fu-datetime-picker/props.js

@@ -1,194 +0,0 @@
-export default {
-	props: {
-		/**
-		 * @description 绑定值
-		 */
-		value: {
-			type: [String, Number],
-			default: 0
-		},
-		modelValue: {
-			type: [String, Number],
-			default: ''
-		},
-		/**
-		 * @description 顶部标题
-		 */
-		title: {
-			type: String,
-			default: ''
-		},
-		/**
-		 * @description 顶部标题字体大小 (注：不传单位，默认px)
-		 * @default 15
-		 */
-		titleSize: {
-			type: [String,Number],
-			default: 15
-		},
-		/**
-		 * @description 顶部标题字体颜色
-		 * @default '#333333'
-		 */
-		titleColor: {
-			type: String,
-			default: '#333333'
-		},
-		/**
-		 * @description 展示格式
-		 * @values 'date' - 日期选择, 'time' - 时间选择, 'year' - 年选择, 'year-month' - 年月选择, 'datetime' - 日期时间选择
-		 * @default 'datetime'
-		 */
-		mode: {
-			type: String,
-			default: 'datetime'
-		},
-		/**
-		 * @description 可选的最大时间 最大默认值为后10年
-		 */
-		maxDate: {
-			type: Number,
-			default: new Date(new Date().getFullYear() + 10, 0, 1).getTime()
-		},
-		/**
-		 * @description 可选的最小时间 最小默认值为前10年
-		 */
-		minDate: {
-			type: Number,
-			default: new Date(new Date().getFullYear() - 10, 0, 1).getTime()
-		},
-		/**
-		 * @description 可选的最小小时（仅mode=time时生效）
-		 */
-		minHour: {
-			type: Number,
-			default: 0
-		},
-		/**
-		 * @description 可选的最大小时（仅mode=time时生效）
-		 * @default 23
-		 */
-		maxHour: {
-			type: Number,
-			default: 23
-		},
-		/**
-		 * @description 可选的最小分钟（仅mode=time时生效）
-		 * @default 0
-		 */
-		minMinute: {
-			type: Number,
-			default: 0
-		},
-		/**
-		 * @description 可选的最大分钟（仅mode=time时生效）
-		 * @default 59
-		 */
-		maxMinute: {
-			type: Number,
-			default: 59
-		},
-		/**
-		 * @description 选项过滤函数
-		 * @default null
-		 */
-		filter: {
-			type: [Function, null],
-			default: null
-		},
-		/**
-		 * @description 选项格式化函数
-		 * @default null
-		 */
-		formatter: {
-			type: [Function, null],
-			default: null
-		},
-		/**
-		 * @description 是否显示加载中状态
-		 * @default false
-		 */
-		loading: {
-			type: Boolean,
-			default: false
-		},
-		/**
-		 * @description 各列中，单个选项的高度
-		 * @default 44
-		 */
-		itemHeight: {
-			type: [String, Number],
-			default: 44
-		},
-		/**
-		 * @description 取消按钮的文字
-		 * @default '取消'
-		 */
-		cancelText: {
-			type: String,
-			default: '取消'
-		},
-		/**
-		 * @description 取消按钮字体大小 (注：不传单位，默认px)
-		 * @default 13
-		 */
-		cancelSize: {
-			type: [String,Number],
-			default: 13
-		},
-		/**
-		 * @description 取消按钮文本颜色
-		 * @default '#888888'
-		 */
-		cancelColor: {
-			type: String,
-			default: '#888888'
-		},
-		/**
-		 * @description 确认按钮的文字
-		 * @default '确认'
-		 */
-		confirmText: {
-			type: String,
-			default: '确认'
-		},
-		/**
-		 * @description 确认按钮字体大小 (注：不传单位，默认px)
-		 * @default 13
-		 */
-		confirmSize: {
-			type: [String,Number],
-			default: 13
-		},
-		/**
-		 * @description 确认按钮文本颜色
-		 */
-		confirmColor: {
-			type: String,
-			default: ''
-		},
-		/**
-		 * @description 每列中可见选项的数量
-		 * @default 5
-		 */
-		visibleItemCount: {
-			type: [String, Number],
-			default: 5
-		},
-		/**
-		 * @description 各列的默认索引
-		 */
-		defaultIndex: {
-			type: Array,
-			default: () => []
-		},
-		/**
-		 * @description 是否允许点击遮罩关闭选择器
-		 * @default true
-		 */
-		maskClosable: {
-			type: Boolean,
-			default: true
-		}
-	}
-}