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>
|