110 lines
3.1 KiB
Vue
110 lines
3.1 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" />
|
||
<uni-datetime-picker v-else class="w-form-input" :border="false" type="date" :clear-icon="false"
|
||
v-model="_value" />
|
||
<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 } from 'vue'
|
||
import ClickInput from '@/components/ClickInput.vue'
|
||
|
||
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'])
|
||
|
||
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]}`
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.w-form-timePicker {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
</style> |