uview-ultra-plus 1.0.0

package/uview-ultra/components/up-datetime-picker/up-datetime-picker.uvue

@@ -0,0 +1,657 @@
+<template>
+    <view class="up-datetime-picker">
+        <view v-if="hasInput" class="up-datetime-picker__has-input"
+			@click="changeShow"
+        >
+            <up-input
+                :placeholder="placeholder"
+                :readonly="!!showByClickInput"
+                border="surround"
+                v-model="inputValue"
+            ></up-input>
+        </view>
+        <up-picker
+            ref="picker"
+            :show="show || (hasInput && showByClickInput)"
+            :popupMode="popupMode"
+            :closeOnClickOverlay="closeOnClickOverlay"
+            :columns="columns"
+            :title="title"
+            :itemHeight="itemHeight"
+            :showToolbar="showToolbar"
+            :visibleItemCount="visibleItemCount"
+            :defaultIndex="innerDefaultIndex"
+            :cancelText="cancelText"
+            :confirmText="confirmText"
+            :cancelColor="cancelColor"
+            :confirmColor="confirmColor"
+            :toolbarRightSlot="toolbarRightSlot"
+            @close="close"
+            @cancel="cancel"
+            @confirm="confirm"
+            @change="change"
+        >
+            <template #toolbar-right>
+                <slot name="toolbar-right">
+                </slot>
+            </template>
+            <template #toolbar-bottom>
+                <slot name="toolbar-bottom">
+                </slot>
+            </template>
+        </up-picker>
+    </view>
+</template>
+
+<script setup lang="uts">
+	// 导入ref
+	import type { PropType } from 'vue'
+	import { ref } from 'vue';
+	import {dayuts} from '@/uni_modules/lime-dayuts';
+	import { range, error, padZero } from '../../libs/function/index.uts';
+	import { date as testDate } from '../../libs/function/test.uts';
+	import defProps from './datetimePicker.uts';
+	
+	// props
+	const props = defineProps({
+		hasInput: {
+			type: Boolean,
+			default: defProps.getBoolean('datetimePicker.hasInput')
+		},
+		placeholder: {
+			type: String,
+			default: defProps.getString('datetimePicker.placeholder')
+		},
+		format: {
+			type: String,
+			default: defProps.getString('datetimePicker.format')
+		},
+		show: {
+			type: Boolean,
+			default: defProps.getBoolean('datetimePicker.show')
+		},
+		popupMode: {
+			type: String,
+			default: defProps.getString('datetimePicker.popupMode')
+		},
+		showToolbar: {
+			type: Boolean,
+			default: defProps.getBoolean('datetimePicker.showToolbar')
+		},
+		toolbarRightSlot: {
+			type: Boolean,
+			default: defProps.getBoolean('datetimePicker.toolbarRightSlot')
+		},
+		modelValue: {
+			type: [String, Number],
+			default: defProps.getString('datetimePicker.value')
+		},
+		title: {
+			type: String,
+			default: defProps.getString('datetimePicker.title')
+		},
+		mode: {
+			type: String,
+			default: defProps.getString('datetimePicker.mode')
+		},
+		maxDate: {
+			type: Number,
+			default: defProps.getNumber('datetimePicker.maxDate')
+		},
+		minDate: {
+			type: Number,
+			default: defProps.getNumber('datetimePicker.minDate')
+		},
+		minHour: {
+			type: Number,
+			default: defProps.getNumber('datetimePicker.minHour')
+		},
+		maxHour: {
+			type: Number,
+			default: defProps.getNumber('datetimePicker.maxHour')
+		},
+		minMinute: {
+			type: Number,
+			default: defProps.getNumber('datetimePicker.minMinute')
+		},
+		maxMinute: {
+			type: Number,
+			default: defProps.getNumber('datetimePicker.maxMinute')
+		},
+		filter: {
+			type: Function,
+			default: null
+		},
+		formatter: {
+			type: Function,
+			default: null
+		},
+		loading: {
+			type: Boolean,
+			default: defProps.getBoolean('datetimePicker.loading')
+		},
+		itemHeight: {
+			type: [String, Number],
+			default: defProps.getNumber('datetimePicker.itemHeight')
+		},
+		cancelText: {
+			type: String,
+			default: defProps.getString('datetimePicker.cancelText')
+		},
+		confirmText: {
+			type: String,
+			default: defProps.getString('datetimePicker.confirmText')
+		},
+		cancelColor: {
+			type: String,
+			default: defProps.getString('datetimePicker.cancelColor')
+		},
+		confirmColor: {
+			type: String,
+			default: defProps.getString('datetimePicker.confirmColor')
+		},
+		visibleItemCount: {
+			type: [String, Number],
+			default: defProps.getNumber('datetimePicker.visibleItemCount')
+		},
+		closeOnClickOverlay: {
+			type: Boolean,
+			default: defProps.getBoolean('datetimePicker.closeOnClickOverlay')
+		},
+		defaultIndex: {
+			type: Array as PropType<number[]>,
+			default: () : Array<number> => {
+				return defProps.getArray<number>('datetimePicker.defaultIndex')!
+			}
+		}
+	});
+	
+	// emits
+	const emit = defineEmits(['close', 'cancel', 'confirm', 'change', 'update:modelValue']);
+	
+	// 原来的日期选择器不方便，这里增加一个hasInput选项支持类似element的自带输入框的功能。
+	let inputValue = ref<string>(''); // 表单显示值
+	let showByClickInput = ref<boolean>(false); // 是否在hasInput模式下显示日期选择弹唱
+	let columns = ref<Array<Array<string>>>([]);
+	let innerDefaultIndex = ref<number[]>([]);
+	let innerFormatter = ref<(type: string, value: string) => string> ((type: string, value: string) => {
+		return value
+	});
+	let innerValue = ref<any>('');
+	
+	const changeShow = () => {
+		showByClickInput.value = !showByClickInput.value
+	}
+	
+	function getInputValue(newValue: string) {
+		if (newValue == '' || newValue == null) {
+			inputValue.value = ''
+			return
+		}
+		if (props.mode == 'time') {
+			inputValue.value = newValue
+		} else {
+			if (props.format != '') {
+				inputValue.value = dayuts(newValue).format(props.format)
+			} else {
+				let format = ''
+				switch (props.mode) {
+					case 'date':
+						format = 'YYYY-MM-DD'
+						break;
+					case 'year-month':
+						format = 'YYYY-MM'
+						break;
+					case 'datetime':
+						format = 'YYYY-MM-DD HH:mm'
+						break;
+					case 'time':
+						format = 'HH:mm'
+						break;
+					default:
+						break;
+				}
+				inputValue.value = dayuts(newValue).format(format)
+			}
+		}
+	}
+	
+	function getFormatFunc():(type: string, value: string) => string {
+		let formatter = function(type: string, value: string) {return value}
+		if (props.formatter != null) {
+			formatter = props.formatter as (type: string, value: string) => string
+		} else {
+			// formatter = function(type: string, value: string) {
+				
+			// 	return that.$callMethod('innerFormatter', type, value).toString()
+			// }
+			formatter = innerFormatter.value as (type: string, value: string) => string
+		}
+		return formatter
+	}
+	
+	// 更新索引
+	function updateIndexs(value: any) {
+		let values: string[] = []
+		let formatterFunc = (type: string, value: string) => {return value}
+		formatterFunc = getFormatFunc()
+		if (props.mode === 'time') {
+			// 将time模式的时间用:分隔成数组
+			const timeArr: string[] = value.toString().split(':')
+			// 使用formatter格式化方法进行管道处理
+			values = [formatterFunc('hour', timeArr[0]), formatterFunc('minute', timeArr[1])]
+		} else {
+			const date = new Date(value.toString())
+			values = [
+				formatterFunc('year', `${dayuts(value).year()}`),
+				// 月份补0
+				formatterFunc('month', padZero(dayuts(value).month() + 1))
+			]
+			if (props.mode === 'date') {
+				// date模式，需要添加天列
+				values.push(formatterFunc('day', padZero(dayuts(value).date())))
+			}
+			if (props.mode === 'datetime') {
+				// 数组的push方法，可以写入多个参数
+				values.push(formatterFunc('day', padZero(dayuts(value).date())), formatterFunc('hour', padZero(dayuts(value).hour())), formatterFunc('minute', padZero(dayuts(value).minute())))
+			}
+		}
+	
+		// 根据当前各列的所有值，从各列默认值中找到默认值在各列中的索引
+		let indexs: Array<number> = []
+		columns.value.forEach((column: string[], index: number) => {
+			indexs.push(Math.max(0, column.findIndex((item: string) => item === values[index])))
+		});
+		// const indexs = this.columns.map((column: any[], index: number): number => {
+		// 	// 通过取大值，可以保证不会出现找不到索引的-1情况
+		// 	return Math.max(0, column.findIndex((item: any) => item === values[index]))
+		// })
+		innerDefaultIndex.value = indexs
+	}
+	
+	// 根据minDate、maxDate、minHour、maxHour等边界值，判断各列的开始和结束边界值
+	function getBoundary(type: string, innerValue: any) {
+		const value = new Date(innerValue.toString())
+		let boundary = new Date(props.minDate as number)
+		switch (type){
+			case 'min':
+				boundary = new Date(props.minDate as number)
+				break;
+			case 'max':
+				boundary = new Date(props.maxDate as number)
+				break;
+			default:
+				break;
+		}
+		const year = dayuts(boundary).year()
+		let month = 1
+		let date = 1
+		let hour = 0
+		let minute = 0
+		if (type === 'max') {
+			month = 12
+			// 月份的天数 - 应该使用boundary的月份，而不是value的月份
+			date = dayuts(boundary).daysInMonth()
+			hour = 23
+			minute = 59
+		}
+		// 获取边界值，逻辑是：当年达到了边界值(最大或最小年)，就检查月允许的最大和最小值，以此类推
+		if (dayuts(value).year() === year) {
+			month = dayuts(boundary).month() + 1
+			if (dayuts(value).month() + 1 === month) {
+				date = dayuts(boundary).date()
+				if (dayuts(value).date() === date) {
+					hour = dayuts(boundary).hour()
+					if (dayuts(value).hour() === hour) {
+						minute = dayuts(boundary).minute()
+					}
+				}
+			}
+		}
+		let result = {} as UTSJSONObject
+		result[`${type}Year`] = year
+		result[`${type}Month`] = month
+		result[`${type}Date`] = date
+		result[`${type}Hour`] = hour
+		result[`${type}Minute`] = minute
+		return result
+	}
+	
+	// 获取每列的最大和最小值
+	function getRanges(): Array<UTSJSONObject> {
+		if (props.mode === 'time') {
+			return [
+				{
+					type: 'hour',
+					ranges: [props.minHour, props.maxHour],
+				},
+				{
+					type: 'minute',
+					ranges: [props.minMinute, props.maxMinute],
+				},
+			];
+		}
+		const maxObj = getBoundary('max', innerValue.value);
+		const minObj = getBoundary('min', innerValue.value);
+		const maxYear = maxObj['maxYear'];
+		const maxDate = maxObj['maxDate'];
+		const maxMonth = maxObj['maxMonth'];
+		const maxHour = maxObj['maxHour'];
+		const maxMinute = maxObj['maxMinute'];
+		const minYear = minObj['minYear'];
+		const minDate = minObj['minDate'];
+		const minMonth = minObj['minMonth'];
+		const minHour = minObj['minHour'];
+		const minMinute = minObj['minMinute'];
+		const result = [
+			{
+				type: 'year',
+				ranges: [minYear, maxYear],
+			},
+			{
+				type: 'month',
+				ranges: [minMonth, maxMonth],
+			},
+			{
+				type: 'day',
+				ranges: [minDate, maxDate],
+			},
+			{
+				type: 'hour',
+				ranges: [minHour, maxHour],
+			},
+			{
+				type: 'minute',
+				ranges: [minMinute, maxMinute],
+			},
+		];
+		if (props.mode === 'date')
+			result.splice(3, 2);
+		if (props.mode === 'year-month')
+			result.splice(2, 3);
+		return result;
+	}
+	
+	function getOriginColumns(): Array<UTSJSONObject> {
+		// 生成各列的值
+		let results: Array<UTSJSONObject> = []
+		let rangesList:Array<UTSJSONObject> = getRanges()
+		rangesList.forEach((item: UTSJSONObject) => {
+			// @ts-ignore
+			let type = item['type'].toString()
+			let ranges: Array<number> = item['ranges'] as Array<number>
+			let values: string[] = times(ranges[1] - ranges[0] + 1, type, ranges)
+			// 进行过滤
+			if (props.filter != null) {
+				let filterFunc = props.filter as (type: string, value: string[]) => string[]
+				let tmp = filterFunc(type, values)
+				if (tmp != null) {
+					values = tmp as string[]
+				}
+				if (values == null || (values.length == 0)) {
+					uni.showToast({
+						title: '日期filter结果不能为空',
+						icon: 'error',
+						mask: true
+					})
+				}
+			}
+			results.push({
+				type: type,
+				values: values
+			})
+		})
+		return results
+	}
+	
+	// 更新各列的值
+	function updateColumns() {
+		const formatter = getFormatFunc()
+		// 获取各列的值，并且map后，对各列的具体值进行补0操作
+		// const results = this.getOriginColumns().map((column: UTSJSONObject) => (column['values'] as Array<string>).map((value: string) => formatter(column['type'].toString(), value)))
+		const originColumns = getOriginColumns();
+		const results: Array<Array<string>> = [];
+		originColumns.forEach((column: UTSJSONObject) => {
+			// @ts-ignore
+			const formattedValues: string[] = (column['values'] as Array<string>).map((value: string) => formatter(column['type'].toString(), value));
+			results.push(formattedValues);
+		});
+		columns.value = results
+	}
+	
+	// 更新各列的值，进行补0、格式化等操作
+	function updateColumnValue(value: any) {
+		innerValue.value = value
+		updateColumns()
+		// 延迟执行,等待up-picker组件列数据更新完后再设置选中值索引
+		setTimeout(() => {
+		updateIndexs(value)
+		}, 0);
+	}
+	
+	// 得出合法的时间
+	function correctValue(val: number | string | null): any {
+		let value: number | string = ''
+		if (val != null && val != '') {
+			value = val
+		}
+		const isDateMode = props.mode !== 'time'
+		if (isDateMode && (value == null || value == '')) {
+			// 如果是日期类型，但是又没有设置值的话，使用当前时间为默认时间
+			value = new Date().getTime()
+		} else if (isDateMode) {
+			// 如果是日期类型且有值，确保它是有效的时间戳
+			let timestamp = 0
+			if (typeof value === 'number') {
+				timestamp = value
+			} else if (typeof value === 'string') {
+				// 尝试解析字符串为时间戳
+				const numValue = parseInt(value.toString())
+				if (!isNaN(numValue)) {
+					timestamp = numValue
+				} else {
+					// 尝试解析日期字符串
+					const date = new Date(value)
+					if (!isNaN(date.getTime())) {
+						timestamp = date.getTime()
+					} else {
+						// 无效的日期，使用当前时间
+						timestamp = new Date().getTime()
+					}
+				}
+			}
+			value = timestamp
+		} else if (!isDateMode && (value == null || value == '')) {
+			// 如果是时间类型，而又没有默认值的话，就用当前时间的时分秒
+			const now = new Date()
+			value = `${padZero(now.getHours())}:${padZero(now.getMinutes())}`
+		}
+		// 时间类型
+		if (!isDateMode) {
+			if ((value.toString()).indexOf(':') === -1)  {
+				error('时间错误，请传递如12:24的格式')
+				return ''
+			}
+			let [hour, minute] = value.toString().split(':')
+			// 对时间补零，同时控制在最小值和最大值之间
+			hour = padZero(range(props.minHour, props.maxHour, parseInt(hour)))
+			minute = padZero(range(props.minMinute, props.maxMinute, parseInt(minute)))
+			return `${ hour }:${ minute }`
+		} else {
+			// 如果是日期格式，控制在最小日期和最大日期之间
+			// @ts-ignore
+			value = dayuts(value).isBefore(dayuts(props.minDate)) ? props.minDate : value
+			// @ts-ignore
+			value = dayuts(value).isAfter(dayuts(props.maxDate)) ? props.maxDate : value
+			return value
+		}
+	}
+	
+	function init() {
+		// #ifdef VUE3
+		// @ts-ignore
+		innerValue.value = correctValue(props.modelValue)
+		// #endif
+		// #ifdef VUE2
+		innerValue.value = correctValue(props.value)
+		// #endif
+		updateColumnValue(innerValue.value)
+
+		// 初始化hasInput展示
+		getInputValue(innerValue.value.toString())
+	}
+	
+	// 在微信小程序中，不支持将函数当做props参数，故只能通过ref形式调用
+	function setFormatter(e: (type: string, value: string) => string) {
+		innerFormatter.value = e
+	}
+	
+	// 关闭选择器
+	function close() {
+		if (props.closeOnClickOverlay) {
+			emit('close')
+		}
+	}
+	
+	// 点击工具栏的取消按钮
+	function cancel() {
+		if (props.hasInput) {
+			showByClickInput.value = false
+		}
+		emit('cancel')
+	}
+	
+	// 点击工具栏的确定按钮
+	function confirm() {
+		emit('update:modelValue', innerValue.value)
+		if (props.hasInput) {
+			getInputValue(innerValue.value.toString())
+			showByClickInput.value = false
+		}
+		emit('confirm', {
+			value: innerValue.value,
+			mode: props.mode
+		})
+	}
+	
+	//用正则截取输出值,当出现多组数字时,抛出错误
+	function intercept(e: string, type: string = ''): string {
+		let judge = e.match(/\d+/g)
+		if (judge != null) {
+			//判断是否掺杂数字
+			if(judge!.length>1){
+				error("请勿在过滤或格式化函数时添加数字")
+				return '0'
+			}else if(type != '' && judge[0]?.length==4){//判断是否是年份
+				return judge![0].toString()
+			}else if(judge![0]!.length>2){
+				error("请勿在过滤或格式化函数时添加数字")
+				return '0'
+			}else{
+				return judge![0].toString()
+			}
+		} else {
+			return '0'
+		}
+	}
+	
+	// 列发生变化时触发
+	// {
+	// 	value: valueOrigin,
+	// 	index,
+	// 	indexs: value,
+	// 	// values为当前变化列的数组内容
+	// 	values,
+	// 	columnIndex
+	// }
+	function change(e: UTSJSONObject) {
+		let indexs = e['indexs'] as number[]
+		let values = e['values'] as Array<any[]>
+		let selectValue: any = ''
+		if(props.mode === 'time') {
+			// 根据value各列索引，从各列数组中，取出当前时间的选中值
+			// @ts-ignore
+			selectValue = `${intercept(values[0][indexs[0]].toString())}:${intercept(values[1][indexs[1]].toString())}`
+		} else {
+			// 将选择的值转为数值，比如'03'转为数值的3，'2019'转为数值的2019
+			// @ts-ignore
+			const year = parseInt(intercept(values[0][indexs[0]].toString(),'year'))
+			// @ts-ignore
+			const month = parseInt(intercept(values[1][indexs[1]].toString()))
+			// @ts-ignore
+			let date = parseInt(values[2] != null ? intercept(values[2][indexs[2]].toString()) : '1')
+			let hour = 0, minute = 0
+			// 此月份的最大天数
+			const maxDate = dayuts(`${year}-${month}`).daysInMonth()
+			// year-month模式下，date不会出现在列中，设置为1，为了符合后边需要减1的需求
+			if (props.mode === 'year-month') {
+				date = 1
+			}
+			// 不允许超过maxDate值
+			date = Math.min(maxDate, date)
+			if (props.mode === 'datetime') {
+				// @ts-ignore
+				hour = parseInt(intercept(values[3][indexs[3]].toString()))
+				// @ts-ignore
+				minute = parseInt(intercept(values[4][indexs[4]].toString()))
+			}
+			// 转为时间模式
+			selectValue = new Date(year, month - 1, date, hour, minute).getTime()
+		}
+		// 取出准确的合法值，防止超越边界的情况
+		let selectValueFormat: any = correctValue(selectValue)
+		innerValue.value = selectValueFormat
+		updateColumnValue(selectValueFormat)
+		// 发出change时间，value为当前选中的时间戳
+		emit('change', {
+			value: selectValueFormat,
+			// #ifndef MP-WEIXIN
+			// 微信小程序不能传递this实例，会因为循环引用而报错
+			// picker: this.$refs.picker,
+			// #endif
+			mode: props.mode
+		})
+	}
+	
+	function times(n: number, type: string, ranges: number[]): string[] {
+		let index = -1
+		let result: string[] = []
+		if (n > 0) {
+			for (var i = 0; i < n; i++) {
+				result.push('')
+			}
+		}
+		let fu = function(index: number): string {
+			let value = (parseInt(ranges[0].toString()) + index).toString()
+			value = type === 'year' ? `${value}` : padZero(value)
+			return value
+		}
+		while (++index < n) {
+			result[index] = fu(index)
+		}
+		return result
+	}
+	
+	// 通过最大值和最小值生成数组
+	function generateArray(start: number, end: number): number[] {
+		const result: number[] = []
+		for (let i = start; i <= end; i++) {
+			result.push(i)
+		}
+		return result
+	}
+	
+	// 初始化
+	init();
+</script>
+
+<style lang="scss" scoped>
+	@import '../../libs/css/components.scss';
+	.up-datetime-picker {
+		/* #ifndef APP-NVUE */
+		width: 100%;
+        /* #endif */
+        &__has-input {
+        }
+	}
+</style>