feat: datetimePicker

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",

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
+      const date = isDate(value) ? dayjs(value).format(props.format) : value
-      state.text = value[props.valueKey || 'text']
+      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({
+    title: createEditorInputProp({ label: '顶部栏标题', defaultValue: '选择时间' }),
-      label: '数据项',
+    type: createEditorSelectProp({
-      option: {
+      label: '时间类型',
-        options: [
+      options: [
-          {
-            label: '显示值',
-            field: 'label'
-          },
-          {
-            label: '绑定值',
-            field: 'value'
-          },
-          {
-            label: '备注',
-            field: 'comments'
-          }
-        ],
-        showKey: 'label'
-      },
-      defaultValue: [
         {
-          label: '杭州',
+          label: 'date',
-          value: 'hangzhou'
+          val: 'date'
         },
         {
-          label: '上海',
+          label: 'time',
-          value: 'shanghai'
+          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()
   },

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/'))
       }
     },
     {

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]: () => <ElInput v-model={propObj[prop]} />,
+        [VisualEditorPropsType.input]: () => (
+          <ElInput v-model={propObj[prop]} placeholder={propConfig.tips || propConfig.label} />
+        ),
         [VisualEditorPropsType.inputNumber]: () => <ElInputNumber v-model={propObj[prop]} />,
         [VisualEditorPropsType.switch]: () => <ElSwitch v-model={propObj[prop]} />,
         [VisualEditorPropsType.color]: () => <ElColorPicker v-model={propObj[prop]} />,

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

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==