ai.touchui-vue 1.31.3 → 1.32.0

package/packages/date-picker/src/picker.vue

@@ -1,342 +1,342 @@
-<template>
-	<to-padding>
-		<to-grid space="1">
-			<template v-if="type!=='time'">
-				<to-grid-item>
-					<to-center-scroll v-model="year" :data="years" @change="yearChange"></to-center-scroll>
-				</to-grid-item>
-				<to-grid-item>
-					<to-center-scroll v-model="month" :data="monthList" @change="monthChange"></to-center-scroll>
-				</to-grid-item>
-				<to-grid-item v-if="type !== 'month'">
-					<to-center-scroll v-model="day" :data="days"></to-center-scroll>
-				</to-grid-item>
-			</template>
-			<to-grid-item v-if="type === 'datetime'" width="1"></to-grid-item>
-			<template v-if="type === 'datetime' || type === 'time'">
-				<to-grid-item>
-					<to-center-scroll v-model="hour" :data="hours"></to-center-scroll>
-				</to-grid-item>
-				<to-grid-item>
-					<to-center-scroll v-model="minute" :data="minutes"></to-center-scroll>
-				</to-grid-item>
-				<to-grid-item>
-					<to-center-scroll v-model="second" :data="seconds"></to-center-scroll>
-				</to-grid-item>
-			</template>
-		</to-grid>
-		<to-space></to-space>
-		<to-submit width="full" :space="2">
-			<to-button v-size="'l'" fillet="normal" mode="line" color="primary" @click="$emit('cancel')">取消</to-button>
-			<to-button v-size="'l'" fillet="normal" mode="line" color="primary" @click="clear">清除</to-button>
-			<to-button v-size="'l'" fillet="normal" color="primary" @click="submit">确定</to-button>
-		</to-submit>
-	</to-padding>
-</template>
-
-<script>
-export default {
-	props: {
-		value: {
-			type: [String, Date],
-			default: ''
-		},
-		type: {
-			type: String,
-			default: ''
-		},
-		time: {
-			type: String,
-			default: ''
-		},
-		min: {
-			type: [String, Date, Number],
-			default: ''
-		},
-		max: {
-			type: [String, Date, Number],
-			default: ''
-		}
-	},
-	data() {
-		return {
-			inited: false,
-			year: '',
-			month: '',
-			day: '',
-			hour: '',
-			minute: '',
-			second: '',
-			years: [],
-			months: '01,02,03,04,05,06,07,08,09,10,11,12',
-			monthList: [],
-			days: [],
-			hours: '00,01,02,03,04,05,06,07,08,09,10,11,12,13,14,15,16,17,18,19,20,21,22,23',
-			minutes: '00,01,02,03,04,05,06,07,08,09,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59',
-			seconds: '00,01,02,03,04,05,06,07,08,09,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59'
-		}
-	},
-	computed: {
-		valueo() {
-			const [date, time] = this.formatDate(this.value).split(' ')
-			const [year, month, day] = date.split('-')
-			const [hour, minute, second] = time.split(':')
-			let obj = {
-				year: year || '',
-				month: month || '',
-				day: day || '',
-				hour: hour || '',
-				minute: minute || '',
-				second: second || ''
-			}
-			return obj
-		},
-		minDate() {
-			if (this.min) {
-				let min = ''
-				// 默认使用 2023-03-01 格式时，其 hour = 8 而不是 0，所以要转为 2023/03/01 格式
-				if (typeof this.min === 'string') {
-					min = this.min.replace(/-/gi, '/')
-				} else {
-					min = this.min
-				}
-				return new Date(min)
-			} else {
-				return new Date('1900-01-01')
-			}
-		},
-		maxDate() {
-			if (this.max) {
-				let max = ''
-				// 默认使用 2023-03-01 格式时，其 hour = 8 而不是 0，所以要转为 2023/03/01 格式
-				if (typeof this.max === 'string') {
-					max = this.max.replace(/-/gi, '/')
-				} else {
-					max = this.max
-				}
-				return new Date(max)
-			} else {
-				return new Date('2099-12-31')
-			}
-		}
-	},
-	watch: {
-		value() {
-			this.setYear(() => {
-				this.setMonth(() => {
-					this.setDay()
-				})
-			})
-		}
-	},
-	mounted() {
-		setTimeout(() => {
-			if (this.type !== 'time') {
-				this.setYear(() => {
-					this.setMonth(() => {
-						if (this.type !== 'month') {
-							this.setDay()
-						}
-					})
-				})
-			}
-			if (this.type === 'datetime' || this.type === 'time') {
-				this.setHour()
-				this.setMinute()
-				this.setSecond()
-			}
-			this.inited = true
-		}, 100)
-	},
-	methods: {
-		setYear(callback) {
-			function getYearsRange(currentYear, range) {
-				const startYear = currentYear - range
-				const endYear = currentYear + range
-				const years = []
-
-				for (let year = startYear; year <= endYear; year++) {
-					years.push(String(year))
-				}
-
-				return years
-			}
-
-			// 获取当前年份
-			const currentYear = new Date().getFullYear()
-
-			// 获取前后 100 年的年份
-			const years = getYearsRange(currentYear, 100)
-
-			// 设置数据
-			years.map(item => {
-				let object = {
-					label: item,
-					value: item
-				}
-
-				if (item >= this.minDate.getFullYear() && item <= this.maxDate.getFullYear()) {
-					this.years.push(object)
-				}
-			})
-
-			// 将今年设置为默认年份
-			this.$nextTick(()=>{
-				if (this.value) {
-					this.year = this.valueo.year
-				} else {
-					this.year = String(new Date().getFullYear())
-				}
-				callback && callback()
-			})
-		},
-		setMonth(callback) {
-			this.monthList = []
-			this.months.split(',').forEach(item => {
-
-				let object = {
-					label: item,
-					value: item
-				}
-
-				const date = new Date(`${this.year}-${item}`)
-
-				// 在 safari 或者 IOS 端，年月必须采用 '2024-07' 的String 类型
-				const minDate = new Date(`${String(this.minDate.getFullYear())}-${this.addZero(String(this.minDate.getMonth() + 1))}`)
-				const maxDate = new Date(`${String(this.maxDate.getFullYear())}-${this.addZero(String(this.maxDate.getMonth() + 1))}`)
-
-				if (date >= minDate && date <= maxDate) {
-					this.monthList.push(object)
-				}
-
-			})
-
-			this.$nextTick(() => {
-				if (this.value) {
-					this.month = this.valueo.month
-				} else if (Array.isArray(this.monthList) && this.monthList.length) {
-					let month = ''
-					if (this.min) {
-						month = this.monthList[0].value
-					} else {
-						month = new Date().getMonth() + 1
-					}
-					const date = new Date(`${String(this.year)}-${this.addZero(String(month))}`)
-					this.month = this.addZero(String(date.getMonth() + 1))
-				} else {
-					this.month = this.addZero(String(new Date().getMonth() + 1))
-				}
-				callback && callback()
-			})
-		},
-		setDay() {
-			const total = new Date(this.year, this.month, 0).getDate()
-			this.days = []
-
-			for (let i = 0; i < total; i++) {
-				const day = this.addZero(i + 1)
-
-				let object = {
-					label: day,
-					value: day
-				}
-
-				// 在年月都在可用范围时，再判断天
-				const minDate = new Date(this.minDate.getFullYear(), this.minDate.getMonth(), this.minDate.getDate());
-				const maxDate = new Date(this.maxDate.getFullYear(), this.maxDate.getMonth(), this.maxDate.getDate());
-				const date = new Date(this.year, this.month - 1, day);
-				if (date >= minDate && date <= maxDate) {
-					this.days.push(object)
-				}
-			}
-			this.$nextTick(()=>{
-				if (this.value) {
-					this.day = this.valueo.day
-				} else if (Array.isArray(this.days) && this.days.length) {
-					const day = new Date().getDate()
-					const date = new Date(`${this.year}/${this.month}/${day}`)
-					this.day = this.addZero(String(date.getDate()))
-				} else {
-					this.day = this.addZero(String(new Date().getDate()))
-				}
-
-			})
-		},
-		setHour() {
-			if (this.value) {
-				this.hour = this.valueo.hour
-			} else {
-				this.hour = this.addZero(String(new Date().getHours()))
-			}
-		},
-		setMinute() {
-			if (this.value) {
-				this.minute = this.valueo.minute
-			} else {
-				this.minute = this.addZero(String(new Date().getMinutes()))
-			}
-		},
-		setSecond() {
-			if (this.value) {
-				this.second = this.valueo.second
-			} else {
-				this.second = this.addZero(String(new Date().getSeconds()))
-			}
-		},
-		yearChange() {
-			if (this.inited) {
-				this.setMonth(() => {
-					this.setDay()
-				})
-			}
-		},
-		monthChange() {
-			if (this.inited) {
-				this.setDay()
-			}
-		},
-		submit() {
-			if (this.type === 'datetime') {
-				this.$emit('change', `${this.year}-${this.month}-${this.day} ${this.hour}:${this.minute}:${this.second}`)
-			} else if (this.type === 'time') {
-				this.$emit('change', `${this.hour}:${this.minute}:${this.second}`)
-			} else {
-				this.$emit('change', `${this.year}-${this.month}-${this.day}`)
-			}
-		},
-		clear() {
-			this.$emit('clear')
-		},
-		// 格式化日期
-		formatDate(date, fmt) {
-			if (typeof date === 'string') {
-				date = new Date(date)
-			}
-
-			if (!fmt) {
-				fmt = 'yyyy-MM-dd HH:mm:ss'
-			}
-			if (/(y+)/.test(fmt)) {
-				fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
-			}
-			const o = {
-				'M+': date.getMonth() + 1,
-				'd+': date.getDate(),
-				'H+': date.getHours(),
-				'm+': date.getMinutes(),
-				's+': date.getSeconds()
-			};
-			for (const k in o) {
-				if (new RegExp('(' + k + ')').test(fmt)) {
-					const str = o[k] + '';
-					fmt = fmt.replace(RegExp.$1, RegExp.$1.length === 1 ? str : this.addZero(str));
-				}
-			}
-			return fmt;
-		},
-		addZero(str) {
-			return ('00' + str).substr(str.toString().length);
-		}
-	}
-}
-</script>
+<template>
+	<to-padding>
+		<to-grid space="1">
+			<template v-if="type!=='time'">
+				<to-grid-item>
+					<to-center-scroll v-model="year" :data="years" @change="yearChange"></to-center-scroll>
+				</to-grid-item>
+				<to-grid-item>
+					<to-center-scroll v-model="month" :data="monthList" @change="monthChange"></to-center-scroll>
+				</to-grid-item>
+				<to-grid-item v-if="type !== 'month'">
+					<to-center-scroll v-model="day" :data="days"></to-center-scroll>
+				</to-grid-item>
+			</template>
+			<to-grid-item v-if="type === 'datetime'" width="1"></to-grid-item>
+			<template v-if="type === 'datetime' || type === 'time'">
+				<to-grid-item>
+					<to-center-scroll v-model="hour" :data="hours"></to-center-scroll>
+				</to-grid-item>
+				<to-grid-item>
+					<to-center-scroll v-model="minute" :data="minutes"></to-center-scroll>
+				</to-grid-item>
+				<to-grid-item>
+					<to-center-scroll v-model="second" :data="seconds"></to-center-scroll>
+				</to-grid-item>
+			</template>
+		</to-grid>
+		<to-space></to-space>
+		<to-submit width="full" :space="2">
+			<to-button v-size="'l'" fillet="normal" mode="line" color="primary" @click="$emit('cancel')">取消</to-button>
+			<to-button v-size="'l'" fillet="normal" mode="line" color="primary" @click="clear">清除</to-button>
+			<to-button v-size="'l'" fillet="normal" color="primary" @click="submit">确定</to-button>
+		</to-submit>
+	</to-padding>
+</template>
+
+<script>
+export default {
+	props: {
+		value: {
+			type: [String, Date],
+			default: ''
+		},
+		type: {
+			type: String,
+			default: ''
+		},
+		time: {
+			type: String,
+			default: ''
+		},
+		min: {
+			type: [String, Date, Number],
+			default: ''
+		},
+		max: {
+			type: [String, Date, Number],
+			default: ''
+		}
+	},
+	data() {
+		return {
+			inited: false,
+			year: '',
+			month: '',
+			day: '',
+			hour: '',
+			minute: '',
+			second: '',
+			years: [],
+			months: '01,02,03,04,05,06,07,08,09,10,11,12',
+			monthList: [],
+			days: [],
+			hours: '00,01,02,03,04,05,06,07,08,09,10,11,12,13,14,15,16,17,18,19,20,21,22,23',
+			minutes: '00,01,02,03,04,05,06,07,08,09,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59',
+			seconds: '00,01,02,03,04,05,06,07,08,09,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59'
+		}
+	},
+	computed: {
+		valueo() {
+			const [date, time] = this.formatDate(this.value).split(' ')
+			const [year, month, day] = date.split('-')
+			const [hour, minute, second] = time.split(':')
+			let obj = {
+				year: year || '',
+				month: month || '',
+				day: day || '',
+				hour: hour || '',
+				minute: minute || '',
+				second: second || ''
+			}
+			return obj
+		},
+		minDate() {
+			if (this.min) {
+				let min = ''
+				// 默认使用 2023-03-01 格式时，其 hour = 8 而不是 0，所以要转为 2023/03/01 格式
+				if (typeof this.min === 'string') {
+					min = this.min.replace(/-/gi, '/')
+				} else {
+					min = this.min
+				}
+				return new Date(min)
+			} else {
+				return new Date('1900-01-01')
+			}
+		},
+		maxDate() {
+			if (this.max) {
+				let max = ''
+				// 默认使用 2023-03-01 格式时，其 hour = 8 而不是 0，所以要转为 2023/03/01 格式
+				if (typeof this.max === 'string') {
+					max = this.max.replace(/-/gi, '/')
+				} else {
+					max = this.max
+				}
+				return new Date(max)
+			} else {
+				return new Date('2099-12-31')
+			}
+		}
+	},
+	watch: {
+		value() {
+			this.setYear(() => {
+				this.setMonth(() => {
+					this.setDay()
+				})
+			})
+		}
+	},
+	mounted() {
+		setTimeout(() => {
+			if (this.type !== 'time') {
+				this.setYear(() => {
+					this.setMonth(() => {
+						if (this.type !== 'month') {
+							this.setDay()
+						}
+					})
+				})
+			}
+			if (this.type === 'datetime' || this.type === 'time') {
+				this.setHour()
+				this.setMinute()
+				this.setSecond()
+			}
+			this.inited = true
+		}, 100)
+	},
+	methods: {
+		setYear(callback) {
+			function getYearsRange(currentYear, range) {
+				const startYear = currentYear - range
+				const endYear = currentYear + range
+				const years = []
+
+				for (let year = startYear; year <= endYear; year++) {
+					years.push(String(year))
+				}
+
+				return years
+			}
+
+			// 获取当前年份
+			const currentYear = new Date().getFullYear()
+
+			// 获取前后 100 年的年份
+			const years = getYearsRange(currentYear, 100)
+
+			// 设置数据
+			years.map(item => {
+				let object = {
+					label: item,
+					value: item
+				}
+
+				if (item >= this.minDate.getFullYear() && item <= this.maxDate.getFullYear()) {
+					this.years.push(object)
+				}
+			})
+
+			// 将今年设置为默认年份
+			this.$nextTick(()=>{
+				if (this.value) {
+					this.year = this.valueo.year
+				} else {
+					this.year = String(new Date().getFullYear())
+				}
+				callback && callback()
+			})
+		},
+		setMonth(callback) {
+			this.monthList = []
+			this.months.split(',').forEach(item => {
+
+				let object = {
+					label: item,
+					value: item
+				}
+
+				const date = new Date(`${this.year}-${item}`)
+
+				// 在 safari 或者 IOS 端，年月必须采用 '2024-07' 的String 类型
+				const minDate = new Date(`${String(this.minDate.getFullYear())}-${this.addZero(String(this.minDate.getMonth() + 1))}`)
+				const maxDate = new Date(`${String(this.maxDate.getFullYear())}-${this.addZero(String(this.maxDate.getMonth() + 1))}`)
+
+				if (date >= minDate && date <= maxDate) {
+					this.monthList.push(object)
+				}
+
+			})
+
+			this.$nextTick(() => {
+				if (this.value) {
+					this.month = this.valueo.month
+				} else if (Array.isArray(this.monthList) && this.monthList.length) {
+					let month = ''
+					if (this.min) {
+						month = this.monthList[0].value
+					} else {
+						month = new Date().getMonth() + 1
+					}
+					const date = new Date(`${String(this.year)}-${this.addZero(String(month))}`)
+					this.month = this.addZero(String(date.getMonth() + 1))
+				} else {
+					this.month = this.addZero(String(new Date().getMonth() + 1))
+				}
+				callback && callback()
+			})
+		},
+		setDay() {
+			const total = new Date(this.year, this.month, 0).getDate()
+			this.days = []
+
+			for (let i = 0; i < total; i++) {
+				const day = this.addZero(i + 1)
+
+				let object = {
+					label: day,
+					value: day
+				}
+
+				// 在年月都在可用范围时，再判断天
+				const minDate = new Date(this.minDate.getFullYear(), this.minDate.getMonth(), this.minDate.getDate());
+				const maxDate = new Date(this.maxDate.getFullYear(), this.maxDate.getMonth(), this.maxDate.getDate());
+				const date = new Date(this.year, this.month - 1, day);
+				if (date >= minDate && date <= maxDate) {
+					this.days.push(object)
+				}
+			}
+			this.$nextTick(()=>{
+				if (this.value) {
+					this.day = this.valueo.day
+				} else if (Array.isArray(this.days) && this.days.length) {
+					const day = new Date().getDate()
+					const date = new Date(`${this.year}/${this.month}/${day}`)
+					this.day = this.addZero(String(date.getDate()))
+				} else {
+					this.day = this.addZero(String(new Date().getDate()))
+				}
+
+			})
+		},
+		setHour() {
+			if (this.value) {
+				this.hour = this.valueo.hour
+			} else {
+				this.hour = this.addZero(String(new Date().getHours()))
+			}
+		},
+		setMinute() {
+			if (this.value) {
+				this.minute = this.valueo.minute
+			} else {
+				this.minute = this.addZero(String(new Date().getMinutes()))
+			}
+		},
+		setSecond() {
+			if (this.value) {
+				this.second = this.valueo.second
+			} else {
+				this.second = this.addZero(String(new Date().getSeconds()))
+			}
+		},
+		yearChange() {
+			if (this.inited) {
+				this.setMonth(() => {
+					this.setDay()
+				})
+			}
+		},
+		monthChange() {
+			if (this.inited) {
+				this.setDay()
+			}
+		},
+		submit() {
+			if (this.type === 'datetime') {
+				this.$emit('change', `${this.year}-${this.month}-${this.day} ${this.hour}:${this.minute}:${this.second}`)
+			} else if (this.type === 'time') {
+				this.$emit('change', `${this.hour}:${this.minute}:${this.second}`)
+			} else {
+				this.$emit('change', `${this.year}-${this.month}-${this.day}`)
+			}
+		},
+		clear() {
+			this.$emit('clear')
+		},
+		// 格式化日期
+		formatDate(date, fmt) {
+			if (typeof date === 'string') {
+				date = new Date(date)
+			}
+
+			if (!fmt) {
+				fmt = 'yyyy-MM-dd HH:mm:ss'
+			}
+			if (/(y+)/.test(fmt)) {
+				fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
+			}
+			const o = {
+				'M+': date.getMonth() + 1,
+				'd+': date.getDate(),
+				'H+': date.getHours(),
+				'm+': date.getMinutes(),
+				's+': date.getSeconds()
+			};
+			for (const k in o) {
+				if (new RegExp('(' + k + ')').test(fmt)) {
+					const str = o[k] + '';
+					fmt = fmt.replace(RegExp.$1, RegExp.$1.length === 1 ? str : this.addZero(str));
+				}
+			}
+			return fmt;
+		},
+		addZero(str) {
+			return ('00' + str).substr(str.toString().length);
+		}
+	}
+}
+</script>