import { Field, Popup, DatetimePicker } from 'vant'
import { VisualEditorComponent } from '@/visual-editor/visual-editor.utils'
import { createFieldProps } from './createFieldProps'
import { useGlobalProperties } from '@/hooks/useGlobalProperties'
import {
createEditorInputNumberProp,
createEditorInputProp,
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: () => ,
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 = () => (
<>
(state.showPicker = true)}
style={{
width: size.width ? `${size.width}px` : null
}}
v-slots={{
input: () =>
state.text?.trim() == '' ? (
{props.placeholder}
) : (
state.text
)
}}
/>
registerRef(el, block._vid)}
{...props}
v-model={state.currentDate}
onConfirm={onConfirm}
onCancel={() => (state.showPicker = false)}
/>
>
)
return
},
props: {
modelValue: createEditorInputProp({ label: '默认值' }),
name: createEditorInputProp({
label: '字段名',
defaultValue: 'datetimePicker'
}),
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()
},
resize: {
width: true
},
model: {
default: '绑定字段'
}
} as VisualEditorComponent