mobile-workflow/components/form/DateTime.vue

<template>
	<view class="w-form-timePicker" hover-class="w-click-hover" v-if="!readonly">
		<template v-if="format.length > 9">
			<!-- <uni-datetime-picker v-if="format === 'yyyy-mm-dd hh:mm'" class="w-form-input" :border="false"
				type="datetime" :clear-icon="false" v-model="_value" ref="uniDateTime" @change="changeTime"/>
			<uni-datetime-picker v-else class="w-form-input" :border="false" type="date" ref="uniDateTime"
				:clear-icon="false" v-model="_value" @change="changeTime"/> -->
			<uni-datetime-picker v-if="format === 'yyyy-mm-dd hh:mm' || format === 'yyyy-mm-dd hh:mm:ss'" class="w-form-input" :border="false"
				type="datetime" :date-format="format" :clear-icon="false" v-model="_value" ref="uniDateTime" @change="changeTime"/>
			<uni-datetime-picker v-else :date-format="format" class="w-form-input" :border="false" type="date" ref="uniDateTime"
				:clear-icon="false" v-model="_value" @change="changeTime"/>
			<uni-icons type="right" :size="20" color="#999999"></uni-icons>
		</template>
		<template v-else-if="props.formProps.format === 'yyyy-mm'">
			<picker style="width: 100%;" mode="multiSelector" :value="nowTime" @change="timeChange" :range="range">
				<click-input :value="_value" :placeholder="props.formProps.placeholder || '请选择年月'"
					pre-icon="calendar"></click-input>
			</picker>
		</template>
		<template v-else-if="props.formProps.format === 'yyyy'">
			<picker style="width: 100%;" mode="selector" :value="nowTime" @change="timeChange" :range="range[0]">
				<click-input :value="_value" :placeholder="props.formProps.placeholder || '请选择年份'"
					pre-icon="calendar"></click-input>
			</picker>
		</template>
	</view>
	<text class="w-form-input-rv" v-else>{{_value}}</text>
</template>

<script setup>
	import {
		computed,
		watch,
		ref,
		onMounted
	} from 'vue'
	import dayjs from "dayjs";
	import ClickInput from '@/components/ClickInput.vue'
	const uniDateTime = ref();
	const props = defineProps({
		formProps: {
			type: Object,
			default: () => {
				return {}
			}
		},
		modelValue: String,
		readonly: Boolean
	})
	const _value = computed({
		get() {
			if (props.modelValue) {
				console.log(88488,props.modelValue)
				console.log("我是时间", dayjs(props.modelValue).format(props.formProps.format.replaceAll('yyyy', 'YYYY').replaceAll('dd', 'DD')))
				return dayjs(props.modelValue).format(props.formProps.format.replaceAll('yyyy', 'YYYY').replaceAll('dd', 'DD'))
			}
			return props.modelValue
		},
		set(val) {
			console.log(11111111, props.formProps.format == 'yyyy-MM-dd HH:mm', val)
			if (props.formProps.format == 'yyyy-MM-dd HH:mm') {
				val = val.substring(0, 16)
			}
			console.log(val)
			emits('update:modelValue', val)
		}
	})
	const format = computed(() => {
		return (props.formProps.format || '').toLocaleLowerCase()
	})
	onMounted(() => {
		_value.value = props.modelValue ? dayjs(props.modelValue).format(props.formProps.format.replaceAll('yyyy', 'YYYY').replaceAll('dd', 'DD')) : ''
	})

	const range = computed(() => {
		const years = []
		const months = []
		for (let i = 1970; i < 2500; i++) {
			years.push(`${i}`)
		}
		for (let i = 1; i < 13; i++) {
			months.push(`${i > 9 ? '':'0'}${i}`)
		}
		return [years, months]
	})

	//缓存下时间，防止picker初始化时加载时间太远
	const nowTime = computed(() => {
		if ((props.modelValue || '') === '') {
			const now = new Date()
			if (props.formProps.format === 'yyyy-mm') {
				return [
					range.value[0].indexOf(`${now.getFullYear()}`),
					range.value[1].indexOf(`${now.getMonth()}`)
				]
			}
			return [range.value[0].indexOf(`${now.getFullYear()}`)]
		} else {
			//有值，进行格式化
			if (props.formProps.format === 'yyyy-mm') {
				let v = props.modelValue.split('-')
				return [
					range.value[0].indexOf(v[0]),
					range.value[1].indexOf(v[1])
				]
			}
			return [range.value[0].indexOf(props.modelValue)]
		}
	})
	const emits = defineEmits(['update:modelValue'])
	const timeVal = ref();
	const changeTime = (e) => {
		// 需要等到watch监听执行完才进行此操作
		setTimeout(function(){
			console.log(timeVal.value,222333)
			if(!props.modelValue){
				// uniDateTime.value.clear();
				uniDateTime.value.displayValue = ""
			}
		},100)
	}
	function timeChange(e) {
		const indexs = e.detail.value
		if (Array.isArray(indexs)) {
			_value.value = `${range.value[0][indexs[0]]}-${range.value[1][indexs[1]]}`
		} else {
			_value.value = `${range.value[0][indexs]}`
		}
	}
	watch(() => props.modelValue, (newVal) => {
		timeVal.value = newVal;
	}, {
		deep: true
	})
</script>

<style lang="less" scoped>
	.w-form-timePicker {
		display: flex;
		align-items: center;
	}
</style>