feat: 完成申请审批时间选择器组件封装
This commit is contained in:
范鹏
parent
a8a9f0863a
commit
813ec1dfd6
@ -43,6 +43,23 @@
|
|||||||
placeholder="数字"
|
placeholder="数字"
|
||||||
@change="inputChange"
|
@change="inputChange"
|
||||||
></Input>
|
></Input>
|
||||||
|
<wd-divider color="#bcbfbe"></wd-divider>
|
||||||
|
<DatetimePicker :id="5" title="日期1" @change="changeDate"></DatetimePicker>
|
||||||
|
<wd-divider color="#bcbfbe"></wd-divider>
|
||||||
|
<DatetimePicker
|
||||||
|
:id="6"
|
||||||
|
title="日期2"
|
||||||
|
type="dateHalfDay"
|
||||||
|
@change="changeDate"
|
||||||
|
></DatetimePicker>
|
||||||
|
<wd-divider color="#bcbfbe"></wd-divider>
|
||||||
|
<DatetimePicker
|
||||||
|
:id="7"
|
||||||
|
type="datetime"
|
||||||
|
:value="1737043380000"
|
||||||
|
title="日期3"
|
||||||
|
@change="changeDate"
|
||||||
|
></DatetimePicker>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
@ -51,6 +68,7 @@
|
|||||||
import Input from '@/pages/approval/components/Input.vue'
|
import Input from '@/pages/approval/components/Input.vue'
|
||||||
import Textarea from '@/pages/approval/components/Textarea.vue'
|
import Textarea from '@/pages/approval/components/Textarea.vue'
|
||||||
import SelectPicker from '@/pages/approval/components/SelectPicker.vue'
|
import SelectPicker from '@/pages/approval/components/SelectPicker.vue'
|
||||||
|
import DatetimePicker from '@/pages/approval/components/DatetimePicker.vue'
|
||||||
|
|
||||||
const columns = ref<Record<number, any>>([
|
const columns = ref<Record<number, any>>([
|
||||||
{
|
{
|
||||||
@ -74,6 +92,10 @@
|
|||||||
const textareaChange = e => {
|
const textareaChange = e => {
|
||||||
console.log('textareaChange', e)
|
console.log('textareaChange', e)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const changeDate = e => {
|
||||||
|
console.log('changeDate', e)
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
|||||||
196
src/pages/approval/components/DatetimePicker.vue
Normal file
196
src/pages/approval/components/DatetimePicker.vue
Normal file
@ -0,0 +1,196 @@
|
|||||||
|
<template>
|
||||||
|
<view class="px-2 text-3.5">
|
||||||
|
<view class="flex flex-items-center pos-relative">
|
||||||
|
<view v-if="required" class="color-#f62933 pos-absolute left--2 mt-1">*</view>
|
||||||
|
<view>{{ title }}</view>
|
||||||
|
</view>
|
||||||
|
<view class="py-2" @click="openDialog">
|
||||||
|
<view class="flex flex-items-center flex-justify-between">
|
||||||
|
<view>{{ text || placeholder }}</view>
|
||||||
|
<wd-icon name="arrow-right" color="rgba(0,0,0,0.25)" size="18px"></wd-icon>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<wd-popup
|
||||||
|
v-model="show"
|
||||||
|
position="bottom"
|
||||||
|
custom-style="border-radius:12rpx;"
|
||||||
|
@after-leave="afterLeave"
|
||||||
|
>
|
||||||
|
<view>
|
||||||
|
<view class="p-4 text-3.5 border-b-1 border-[#dcdcdc] border-solid flex flex-items-center">
|
||||||
|
<view class="font-bold">日期：</view>
|
||||||
|
<view class="font-bold ml-a" v-if="type !== 'dateHalfDay'">{{ date }}</view>
|
||||||
|
</view>
|
||||||
|
<view v-if="(type === 'date' || type === 'datetime') && showPicker">
|
||||||
|
<wd-datetime-picker-view
|
||||||
|
:formatter="formatter"
|
||||||
|
:type="type"
|
||||||
|
v-model="timestamp"
|
||||||
|
label="日期选择"
|
||||||
|
@change="change"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
<view v-if="type === 'dateHalfDay' && showPicker">
|
||||||
|
<wd-tabs v-model="tab">
|
||||||
|
<wd-tab :title="index === 0 ? date : halfDay" v-for="(item, index) in 2" :key="index">
|
||||||
|
<view v-show="index === 0">
|
||||||
|
<wd-datetime-picker-view
|
||||||
|
:formatter="formatter"
|
||||||
|
type="date"
|
||||||
|
v-model="timestamp"
|
||||||
|
@change="change"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
<view v-show="index === 1">
|
||||||
|
<wd-picker-view :columns="['上午', '下午']" v-model="halfDay" @change="change" />
|
||||||
|
</view>
|
||||||
|
</wd-tab>
|
||||||
|
</wd-tabs>
|
||||||
|
</view>
|
||||||
|
<view class="pb-safe">
|
||||||
|
<view class="flex py-3 flex-items-center flex-justify-around text-3.5 px-2 font-bold">
|
||||||
|
<view
|
||||||
|
class="w-45% bg-#eeeff4 custom-color-blue py-2.5 rounded-2 text-center"
|
||||||
|
@click="show = false"
|
||||||
|
>
|
||||||
|
取消
|
||||||
|
</view>
|
||||||
|
<view
|
||||||
|
class="w-45% custom-bg-blue color-white py-2.5 rounded-2 text-center"
|
||||||
|
@click="confirm"
|
||||||
|
>
|
||||||
|
确定
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</wd-popup>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import dayjs from 'dayjs'
|
||||||
|
|
||||||
|
const show = ref<boolean>(false)
|
||||||
|
const timestamp = ref<number>(0)
|
||||||
|
const text = ref<string>('')
|
||||||
|
const date = ref<string>('')
|
||||||
|
const halfDay = ref<string>('')
|
||||||
|
const showPicker = ref<boolean>(false)
|
||||||
|
const returnTimestamp = ref<number>(0)
|
||||||
|
|
||||||
|
const tab = ref<number>(0)
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
id: {
|
||||||
|
type: Number,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
type: {
|
||||||
|
type: String,
|
||||||
|
default: 'date'
|
||||||
|
},
|
||||||
|
required: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
title: {
|
||||||
|
type: String,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
value: {
|
||||||
|
type: [Number, null],
|
||||||
|
default: null
|
||||||
|
},
|
||||||
|
placeholder: {
|
||||||
|
type: String,
|
||||||
|
default: '请输入'
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
const formatter = (type, value) => {
|
||||||
|
switch (type) {
|
||||||
|
case 'year':
|
||||||
|
return value + '年'
|
||||||
|
case 'month':
|
||||||
|
return value + '月'
|
||||||
|
case 'date':
|
||||||
|
return value + '日'
|
||||||
|
case 'hour':
|
||||||
|
return value + '时'
|
||||||
|
case 'minute':
|
||||||
|
return value + '分'
|
||||||
|
default:
|
||||||
|
return value
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const emits = defineEmits(['change'])
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
if (props.value) {
|
||||||
|
timestamp.value = props.value
|
||||||
|
if (props.type === 'date') {
|
||||||
|
date.value = dayjs(props.value).format('YYYY-M-D')
|
||||||
|
text.value = date.value
|
||||||
|
} else if (props.type === 'datetime') {
|
||||||
|
date.value = dayjs(props.value).format('YYYY-M-D HH:mm')
|
||||||
|
text.value = date.value
|
||||||
|
} else if (props.type === 'dateHalfDay') {
|
||||||
|
date.value = dayjs(props.value).format('YYYY年M月D日')
|
||||||
|
halfDay.value = dayjs(props.value).hour() < 12 ? '上午' : '下午'
|
||||||
|
text.value = `${date.value} ${halfDay.value}`
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
const change = ({ value }) => {
|
||||||
|
if (props.type === 'date') {
|
||||||
|
date.value = dayjs(value).format('YYYY-M-D')
|
||||||
|
} else if (props.type === 'datetime') {
|
||||||
|
date.value = dayjs(value).format('YYYY-M-D HH:mm')
|
||||||
|
} else if (props.type === 'dateHalfDay') {
|
||||||
|
if (tab.value === 0) {
|
||||||
|
date.value = dayjs(value).format('YYYY年M月D日')
|
||||||
|
} else {
|
||||||
|
halfDay.value = value
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const openDialog = () => {
|
||||||
|
if (!props.value) {
|
||||||
|
if (text.value === '') {
|
||||||
|
timestamp.value = new Date().getTime()
|
||||||
|
} else {
|
||||||
|
timestamp.value = returnTimestamp.value
|
||||||
|
}
|
||||||
|
|
||||||
|
if (props.type === 'date') {
|
||||||
|
date.value = dayjs(timestamp.value).format('YYYY-M-D')
|
||||||
|
} else if (props.type === 'datetime') {
|
||||||
|
date.value = dayjs(timestamp.value).format('YYYY-M-D HH:mm')
|
||||||
|
} else if (props.type === 'dateHalfDay') {
|
||||||
|
date.value = dayjs(timestamp.value).format('YYYY年M月D日')
|
||||||
|
halfDay.value = dayjs(timestamp.value).hour() < 12 ? '上午' : '下午'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
showPicker.value = true
|
||||||
|
show.value = true
|
||||||
|
}
|
||||||
|
|
||||||
|
const confirm = () => {
|
||||||
|
show.value = false
|
||||||
|
returnTimestamp.value = timestamp.value
|
||||||
|
if (props.type === 'dateHalfDay') {
|
||||||
|
text.value = `${date.value} ${halfDay.value}`
|
||||||
|
} else {
|
||||||
|
text.value = date.value
|
||||||
|
}
|
||||||
|
emits('change', { id: props.id, value: returnTimestamp.value, text: text.value })
|
||||||
|
}
|
||||||
|
|
||||||
|
const afterLeave = () => {
|
||||||
|
showPicker.value = false
|
||||||
|
}
|
||||||
|
</script>
|
||||||
Loading…
x
Reference in New Issue
Block a user