From 9dab91e37e8e2f91b933d71eb4a0447b3fbe7a6b Mon Sep 17 00:00:00 2001 From: bqy_fe <1743369777@qq.com> Date: Sat, 8 May 2021 13:35:06 +0800 Subject: [PATCH] feat: datetimePicker --- package.json | 1 + .../base-widgets/datetimePicker/index.tsx | 88 ++++++++++++------- .../components/header/useTools.tsx | 2 +- .../right-attribute-panel/index.tsx | 4 +- src/visual-editor/visual-editor.props.tsx | 17 +++- yarn.lock | 2 +- 6 files changed, 76 insertions(+), 38 deletions(-) diff --git a/package.json b/package.json index 3eb42fc..0f022ed 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,7 @@ "@vueuse/core": "^4.9.1", "@vueuse/integrations": "^4.9.1", "axios": "^0.21.1", + "dayjs": "^1.10.4", "dexie": "^3.0.3", "element-plus": "^1.0.2-beta.41", "lodash": "^4.17.21", diff --git a/src/packages/base-widgets/datetimePicker/index.tsx b/src/packages/base-widgets/datetimePicker/index.tsx index 5fe0063..997dfb8 100644 --- a/src/packages/base-widgets/datetimePicker/index.tsx +++ b/src/packages/base-widgets/datetimePicker/index.tsx @@ -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 { 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: '杭州', - value: 'hangzhou' + label: 'date', + val: 'date' }, { - label: '上海', - value: 'shanghai' + label: 'time', + val: 'time' + }, + { + label: 'year-month', + val: 'year-month' + }, + { + label: 'month-day', + val: 'month-day' + }, + { + label: 'datehour', + val: 'datehour' } - ] + ], + defaultValue: 'time' }), - valueKey: createEditorInputProp({ label: '选项对象的键名', defaultValue: 'label' }), + 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' + }), + loading: createEditorSwitchProp({ label: '是否显示加载状态' }), + showToolbar: createEditorSwitchProp({ label: '是否显示顶部栏' }), + swipeDuration: createEditorInputProp({ label: '快速滑动时惯性滚动的时长，单位ms' }), + visibleItemCount: createEditorInputNumberProp({ label: '可见的选项个数' }), placeholder: createEditorInputProp({ label: '占位符', defaultValue: '请选择' }), ...createFieldProps() }, diff --git a/src/visual-editor/components/header/useTools.tsx b/src/visual-editor/components/header/useTools.tsx index 1ea0ba7..3adeafe 100644 --- a/src/visual-editor/components/header/useTools.tsx +++ b/src/visual-editor/components/header/useTools.tsx @@ -151,7 +151,7 @@ export const useTools = () => { icon: 'el-icon-position', onClick: () => { localStorage.setItem(localKey, JSON.stringify(jsonData)) - window.open('/preview/') + window.open(location.href.replace('/#/', '/preview/')) } }, { diff --git a/src/visual-editor/components/right-attribute-panel/index.tsx b/src/visual-editor/components/right-attribute-panel/index.tsx index 963bf88..adfcf89 100644 --- a/src/visual-editor/components/right-attribute-panel/index.tsx +++ b/src/visual-editor/components/right-attribute-panel/index.tsx @@ -47,7 +47,9 @@ export default defineComponent({ const { propObj, prop } = useDotProp(state.editData.props, propName) return { - [VisualEditorPropsType.input]: () => , + [VisualEditorPropsType.input]: () => ( + + ), [VisualEditorPropsType.inputNumber]: () => , [VisualEditorPropsType.switch]: () => , [VisualEditorPropsType.color]: () => , diff --git a/src/visual-editor/visual-editor.props.tsx b/src/visual-editor/visual-editor.props.tsx index 188288d..2ed97e9 100644 --- a/src/visual-editor/visual-editor.props.tsx +++ b/src/visual-editor/visual-editor.props.tsx @@ -17,7 +17,22 @@ export type VisualEditorProps = { } & { table?: VisualEditorTableOption } - +// 控制台输入以下代码，快速生成组件属性 +// let propObj = { +// string: (config) => `createEditorInputProp(${JSON.stringify(config)})`, +// number: (config) => `createEditorInputNumberProp(${JSON.stringify(config)})`, +// boolean: (config) => `createEditorSwitchProp(${JSON.stringify(config)})` +// } +// +// $$('#props + table tr').reduce((prev, curr) => { +// const children = curr.children +// const key = children[0].textContent.replace(/-([a-z])/g, (all, i) => i.toUpperCase()) +// const value = (propObj[children[2].textContent ?? propObj['string'])({ +// label: children[1].textContent +// }).replaceAll('"', '') +// prev[key] = value +// return prev +// }, {}) /*---------------------------------------switch-------------------------------------------*/ interface EditorSwitchProp { label: string diff --git a/yarn.lock b/yarn.lock index 8677db7..688817c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1919,7 +1919,7 @@ dargs@^7.0.0: resolved "https://registry.yarnpkg.com/dargs/-/dargs-7.0.0.tgz#04015c41de0bcb69ec84050f3d9be0caf8d6d5cc" integrity sha512-2iy1EkLdlBzQGvbweYRFxmFath8+K7+AKB0TlhHWkNuH+TmovaMH/Wp7V7R4u7f4SnX3OgLsU9t1NI9ioDnUpg== -dayjs@1.x: +dayjs@1.x, dayjs@^1.10.4: version "1.10.4" resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.10.4.tgz#8e544a9b8683f61783f570980a8a80eaf54ab1e2" integrity sha512-RI/Hh4kqRc1UKLOAf/T5zdMMX5DQIlDxwUe3wSyMMnEbGunnpENCdbUgM+dW7kXidZqCttBrmw7BhN4TMddkCw==