130 lines
3.9 KiB
Vue
130 lines
3.9 KiB
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" :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-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
|
||
} from 'vue'
|
||
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() {
|
||
return props.modelValue
|
||
},
|
||
set(val) {
|
||
if (props.formProps.format === 'yyyy-mm-dd hh:mm') {
|
||
val = val.substring(0, 16) + ':00'
|
||
}
|
||
emits('update:modelValue', val)
|
||
}
|
||
})
|
||
const format = computed(() => {
|
||
return (props.formProps.format || '').toLocaleLowerCase()
|
||
})
|
||
|
||
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> |