|  |  |  | @ -2,8 +2,15 @@ import { Field, Popup, DatetimePicker } from 'vant' | 
			
		
	
		
			
				
					|  |  |  |  | import { VisualEditorComponent } from '@/visual-editor/visual-editor.utils' | 
			
		
	
		
			
				
					|  |  |  |  | import { createFieldProps } from './createFieldProps' | 
			
		
	
		
			
				
					|  |  |  |  | import { useGlobalProperties } from '@/hooks/useGlobalProperties' | 
			
		
	
		
			
				
					|  |  |  |  | import { createEditorInputProp, createEditorTableProp } from '@/visual-editor/visual-editor.props' | 
			
		
	
		
			
				
					|  |  |  |  | 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' | 
			
		
	
		
			
				
					|  |  |  |  | 
 | 
			
		
	
		
			
				
					|  |  |  |  | export default { | 
			
		
	
		
			
				
					|  |  |  |  |   key: 'datetimePicker', | 
			
		
	
	
		
			
				
					|  |  |  | @ -16,14 +23,11 @@ export default { | 
			
		
	
		
			
				
					|  |  |  |  |       showPicker: false, | 
			
		
	
		
			
				
					|  |  |  |  |       text: '' | 
			
		
	
		
			
				
					|  |  |  |  |     }) | 
			
		
	
		
			
				
					|  |  |  |  |     const customFieldName = { | 
			
		
	
		
			
				
					|  |  |  |  |       text: 'label', | 
			
		
	
		
			
				
					|  |  |  |  |       value: 'value' | 
			
		
	
		
			
				
					|  |  |  |  |     } | 
			
		
	
		
			
				
					|  |  |  |  | 
 | 
			
		
	
		
			
				
					|  |  |  |  |     const onConfirm = (value) => { | 
			
		
	
		
			
				
					|  |  |  |  |       props.modelValue = value.value | 
			
		
	
		
			
				
					|  |  |  |  |       state.text = value[props.valueKey || 'text'] | 
			
		
	
		
			
				
					|  |  |  |  |       const date = isDate(value) ? dayjs(value).format(props.format) : value | 
			
		
	
		
			
				
					|  |  |  |  |       props.modelValue = date | 
			
		
	
		
			
				
					|  |  |  |  |       state.text = date | 
			
		
	
		
			
				
					|  |  |  |  |       state.showPicker = false | 
			
		
	
		
			
				
					|  |  |  |  |       console.log(props) | 
			
		
	
		
			
				
					|  |  |  |  |     } | 
			
		
	
	
		
			
				
					|  |  |  | @ -52,7 +56,6 @@ export default { | 
			
		
	
		
			
				
					|  |  |  |  |           <DatetimePicker | 
			
		
	
		
			
				
					|  |  |  |  |             ref={(el) => registerRef(el, block._vid)} | 
			
		
	
		
			
				
					|  |  |  |  |             {...props} | 
			
		
	
		
			
				
					|  |  |  |  |             columnsFieldNames={customFieldName} | 
			
		
	
		
			
				
					|  |  |  |  |             onConfirm={onConfirm} | 
			
		
	
		
			
				
					|  |  |  |  |             onCancel={() => (state.showPicker = false)} | 
			
		
	
		
			
				
					|  |  |  |  |           /> | 
			
		
	
	
		
			
				
					|  |  |  | @ -73,37 +76,54 @@ export default { | 
			
		
	
		
			
				
					|  |  |  |  |       defaultValue: 'datetimePicker' | 
			
		
	
		
			
				
					|  |  |  |  |     }), | 
			
		
	
		
			
				
					|  |  |  |  |     label: createEditorInputProp({ label: '输入框左侧文本', defaultValue: '时间选择器' }), | 
			
		
	
		
			
				
					|  |  |  |  |     columns: createEditorTableProp({ | 
			
		
	
		
			
				
					|  |  |  |  |       label: '数据项', | 
			
		
	
		
			
				
					|  |  |  |  |       option: { | 
			
		
	
		
			
				
					|  |  |  |  |         options: [ | 
			
		
	
		
			
				
					|  |  |  |  |           { | 
			
		
	
		
			
				
					|  |  |  |  |             label: '显示值', | 
			
		
	
		
			
				
					|  |  |  |  |             field: 'label' | 
			
		
	
		
			
				
					|  |  |  |  |           }, | 
			
		
	
		
			
				
					|  |  |  |  |           { | 
			
		
	
		
			
				
					|  |  |  |  |             label: '绑定值', | 
			
		
	
		
			
				
					|  |  |  |  |             field: 'value' | 
			
		
	
		
			
				
					|  |  |  |  |           }, | 
			
		
	
		
			
				
					|  |  |  |  |           { | 
			
		
	
		
			
				
					|  |  |  |  |             label: '备注', | 
			
		
	
		
			
				
					|  |  |  |  |             field: 'comments' | 
			
		
	
		
			
				
					|  |  |  |  |           } | 
			
		
	
		
			
				
					|  |  |  |  |         ], | 
			
		
	
		
			
				
					|  |  |  |  |         showKey: 'label' | 
			
		
	
		
			
				
					|  |  |  |  |       }, | 
			
		
	
		
			
				
					|  |  |  |  |       defaultValue: [ | 
			
		
	
		
			
				
					|  |  |  |  |     title: createEditorInputProp({ label: '顶部栏标题', defaultValue: '选择时间' }), | 
			
		
	
		
			
				
					|  |  |  |  |     type: createEditorSelectProp({ | 
			
		
	
		
			
				
					|  |  |  |  |       label: '时间类型', | 
			
		
	
		
			
				
					|  |  |  |  |       options: [ | 
			
		
	
		
			
				
					|  |  |  |  |         { | 
			
		
	
		
			
				
					|  |  |  |  |           label: 'date', | 
			
		
	
		
			
				
					|  |  |  |  |           val: 'date' | 
			
		
	
		
			
				
					|  |  |  |  |         }, | 
			
		
	
		
			
				
					|  |  |  |  |         { | 
			
		
	
		
			
				
					|  |  |  |  |           label: 'time', | 
			
		
	
		
			
				
					|  |  |  |  |           val: 'time' | 
			
		
	
		
			
				
					|  |  |  |  |         }, | 
			
		
	
		
			
				
					|  |  |  |  |         { | 
			
		
	
		
			
				
					|  |  |  |  |           label: '杭州', | 
			
		
	
		
			
				
					|  |  |  |  |           value: 'hangzhou' | 
			
		
	
		
			
				
					|  |  |  |  |           label: 'year-month', | 
			
		
	
		
			
				
					|  |  |  |  |           val: 'year-month' | 
			
		
	
		
			
				
					|  |  |  |  |         }, | 
			
		
	
		
			
				
					|  |  |  |  |         { | 
			
		
	
		
			
				
					|  |  |  |  |           label: '上海', | 
			
		
	
		
			
				
					|  |  |  |  |           value: 'shanghai' | 
			
		
	
		
			
				
					|  |  |  |  |           label: 'month-day', | 
			
		
	
		
			
				
					|  |  |  |  |           val: 'month-day' | 
			
		
	
		
			
				
					|  |  |  |  |         }, | 
			
		
	
		
			
				
					|  |  |  |  |         { | 
			
		
	
		
			
				
					|  |  |  |  |           label: 'datehour', | 
			
		
	
		
			
				
					|  |  |  |  |           val: 'datehour' | 
			
		
	
		
			
				
					|  |  |  |  |         } | 
			
		
	
		
			
				
					|  |  |  |  |       ] | 
			
		
	
		
			
				
					|  |  |  |  |       ], | 
			
		
	
		
			
				
					|  |  |  |  |       defaultValue: 'time' | 
			
		
	
		
			
				
					|  |  |  |  |     }), | 
			
		
	
		
			
				
					|  |  |  |  |     format: createEditorInputProp({ | 
			
		
	
		
			
				
					|  |  |  |  |       label: '选择时间后格式化值', | 
			
		
	
		
			
				
					|  |  |  |  |       tips: 'YYYY-MM-DD HH:mm:ss', | 
			
		
	
		
			
				
					|  |  |  |  |       defaultValue: 'YYYY-MM-DD HH:mm:ss' | 
			
		
	
		
			
				
					|  |  |  |  |     }), | 
			
		
	
		
			
				
					|  |  |  |  |     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' | 
			
		
	
		
			
				
					|  |  |  |  |     }), | 
			
		
	
		
			
				
					|  |  |  |  |     valueKey: createEditorInputProp({ label: '选项对象的键名', defaultValue: 'label' }), | 
			
		
	
		
			
				
					|  |  |  |  |     loading: createEditorSwitchProp({ label: '是否显示加载状态' }), | 
			
		
	
		
			
				
					|  |  |  |  |     showToolbar: createEditorSwitchProp({ label: '是否显示顶部栏' }), | 
			
		
	
		
			
				
					|  |  |  |  |     swipeDuration: createEditorInputProp({ label: '快速滑动时惯性滚动的时长,单位ms' }), | 
			
		
	
		
			
				
					|  |  |  |  |     visibleItemCount: createEditorInputNumberProp({ label: '可见的选项个数' }), | 
			
		
	
		
			
				
					|  |  |  |  |     placeholder: createEditorInputProp({ label: '占位符', defaultValue: '请选择' }), | 
			
		
	
		
			
				
					|  |  |  |  |     ...createFieldProps() | 
			
		
	
		
			
				
					|  |  |  |  |   }, | 
			
		
	
	
		
			
				
					|  |  |  | 
 |