You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
146 lines
4.7 KiB
146 lines
4.7 KiB
import { Field, Popup, DatetimePicker } from 'vant'
|
|
import type { VisualEditorComponent } from '@/visual-editor/visual-editor.utils'
|
|
import { createFieldProps } from './createFieldProps'
|
|
import { useGlobalProperties } from '@/hooks/useGlobalProperties'
|
|
import {
|
|
createEditorInputNumberProp,
|
|
createEditorInputProp,
|
|
createEditorModelBindProp,
|
|
createEditorSelectProp,
|
|
createEditorSwitchProp
|
|
} from '@/visual-editor/visual-editor.props'
|
|
import { reactive } from 'vue'
|
|
import { isDate } from '@/visual-editor/utils/is'
|
|
import dayjs from 'dayjs'
|
|
|
|
const dateType = {
|
|
'month-day': 'MM-DD',
|
|
'year-month': 'YYYY-MM',
|
|
date: 'YYYY-MM-DD',
|
|
datehour: 'YYYY-MM-DD HH',
|
|
datetime: 'YYYY-MM-DD HH:mm:ss'
|
|
}
|
|
|
|
export default {
|
|
key: 'datetimePicker',
|
|
moduleName: 'baseWidgets',
|
|
label: '表单项类型 - 选择器',
|
|
preview: () => <Field name="datetimePicker" label="时间选择器" placeholder={'点击选择'}></Field>,
|
|
render: ({ size, block, props }) => {
|
|
const { registerRef } = useGlobalProperties()
|
|
const state = reactive({
|
|
showPicker: false,
|
|
text: '',
|
|
currentDate: new Date()
|
|
})
|
|
|
|
const onConfirm = (value) => {
|
|
const date = isDate(value) ? dayjs(value).format(props.format || dateType[props.type]) : value
|
|
props.modelValue = date
|
|
state.text = date
|
|
state.showPicker = false
|
|
console.log(props)
|
|
}
|
|
|
|
const PopupPicker = () => (
|
|
<>
|
|
<Field
|
|
v-model={props.modelValue}
|
|
{...props}
|
|
readonly
|
|
clickable
|
|
onClick={() => (state.showPicker = true)}
|
|
style={{
|
|
width: size.width ? `${size.width}px` : null
|
|
}}
|
|
name={Array.isArray(props.name) ? [...props.name].pop() : props.name}
|
|
v-slots={{
|
|
input: () =>
|
|
state.text?.trim() == '' ? (
|
|
<span class={'placeholder'}>{props.placeholder}</span>
|
|
) : (
|
|
state.text
|
|
)
|
|
}}
|
|
/>
|
|
<Popup v-model={[state.showPicker, 'show', ['modifier']]} position={'bottom'}>
|
|
<DatetimePicker
|
|
ref={(el) => registerRef(el, block._vid)}
|
|
{...props}
|
|
v-model={state.currentDate}
|
|
onConfirm={onConfirm}
|
|
onCancel={() => (state.showPicker = false)}
|
|
/>
|
|
</Popup>
|
|
</>
|
|
)
|
|
|
|
return <PopupPicker />
|
|
},
|
|
props: {
|
|
modelValue: createEditorInputProp({ label: '默认值' }),
|
|
name: createEditorModelBindProp({ label: '字段绑定', defaultValue: '' }),
|
|
label: createEditorInputProp({ label: '输入框左侧文本', defaultValue: '时间选择器' }),
|
|
title: createEditorInputProp({ label: '顶部栏标题', defaultValue: '选择时间' }),
|
|
type: createEditorSelectProp({
|
|
label: '时间类型',
|
|
options: [
|
|
{
|
|
label: 'date',
|
|
value: 'date'
|
|
},
|
|
{
|
|
label: 'datetime',
|
|
value: 'datetime'
|
|
},
|
|
{
|
|
label: 'year-month',
|
|
value: 'year-month'
|
|
},
|
|
{
|
|
label: 'month-day',
|
|
value: 'month-day'
|
|
},
|
|
{
|
|
label: 'datehour',
|
|
value: 'datehour'
|
|
}
|
|
],
|
|
defaultValue: 'datetime'
|
|
}),
|
|
format: createEditorInputProp({
|
|
label: '自定义日期格式化值',
|
|
tips: 'YYYY-MM-DD HH:mm:ss',
|
|
defaultValue: ''
|
|
}),
|
|
cancelButtonText: createEditorInputProp({ label: '取消按钮文字' }),
|
|
columnsOrder: createEditorInputProp({
|
|
label: '自定义列排序数组',
|
|
tips: '可选值为:year、month、day、hour、minute,传多个值以英文逗号隔开'
|
|
}),
|
|
confirmButtonText: createEditorInputProp({ label: '确认按钮文字' }),
|
|
filter: createEditorInputProp({ label: '选项过滤函数' }),
|
|
formatter: createEditorInputProp({ label: '选项格式化函数' }),
|
|
itemHeight: createEditorInputProp({
|
|
label: '选项高度',
|
|
tips: '支持 px vw vh rem 单位,默认 px'
|
|
}),
|
|
loading: createEditorSwitchProp({ label: '是否显示加载状态' }),
|
|
showToolbar: createEditorSwitchProp({ label: '是否显示顶部栏' }),
|
|
swipeDuration: createEditorInputProp({ label: '快速滑动时惯性滚动的时长,单位ms' }),
|
|
visibleItemCount: createEditorInputNumberProp({ label: '可见的选项个数' }),
|
|
placeholder: createEditorInputProp({ label: '占位符', defaultValue: '请选择' }),
|
|
...createFieldProps()
|
|
},
|
|
events: [
|
|
{ label: '当值变化时触发的事件', value: 'change' },
|
|
{ label: '点击完成按钮时触发的事件', value: 'confirm' },
|
|
{ label: '点击取消按钮时触发的事件', value: 'cancel' }
|
|
],
|
|
resize: {
|
|
width: true
|
|
},
|
|
model: {
|
|
default: '绑定字段'
|
|
}
|
|
} as VisualEditorComponent
|
|
|