Skip to content

Commit 9dab91e

Browse files
buqiyuanbuqiyuan
committed
feat: datetimePicker
1 parent a77baa0 commit 9dab91e

File tree

6 files changed

+76
-38
lines changed

6 files changed

+76
-38
lines changed

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@
1919
"@vueuse/core": "^4.9.1",
2020
"@vueuse/integrations": "^4.9.1",
2121
"axios": "^0.21.1",
22+
"dayjs": "^1.10.4",
2223
"dexie": "^3.0.3",
2324
"element-plus": "^1.0.2-beta.41",
2425
"lodash": "^4.17.21",

‎src/packages/base-widgets/datetimePicker/index.tsx

Lines changed: 54 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,15 @@ import { Field, Popup, DatetimePicker } from 'vant'
22
import { VisualEditorComponent } from '@/visual-editor/visual-editor.utils'
33
import { createFieldProps } from './createFieldProps'
44
import { useGlobalProperties } from '@/hooks/useGlobalProperties'
5-
import { createEditorInputProp, createEditorTableProp } from '@/visual-editor/visual-editor.props'
5+
import {
6+
createEditorInputNumberProp,
7+
createEditorInputProp,
8+
createEditorSelectProp,
9+
createEditorSwitchProp
10+
} from '@/visual-editor/visual-editor.props'
611
import { reactive } from 'vue'
12+
import { isDate } from '@/visual-editor/utils/is'
13+
import dayjs from 'dayjs'
714

815
export default {
916
key: 'datetimePicker',
@@ -16,14 +23,11 @@ export default {
1623
showPicker: false,
1724
text: ''
1825
})
19-
const customFieldName = {
20-
text: 'label',
21-
value: 'value'
22-
}
2326

2427
const onConfirm = (value) => {
25-
props.modelValue = value.value
26-
state.text = value[props.valueKey || 'text']
28+
const date = isDate(value) ? dayjs(value).format(props.format) : value
29+
props.modelValue = date
30+
state.text = date
2731
state.showPicker = false
2832
console.log(props)
2933
}
@@ -52,7 +56,6 @@ export default {
5256
<DatetimePicker
5357
ref={(el) => registerRef(el, block._vid)}
5458
{...props}
55-
columnsFieldNames={customFieldName}
5659
onConfirm={onConfirm}
5760
onCancel={() => (state.showPicker = false)}
5861
/>
@@ -73,37 +76,54 @@ export default {
7376
defaultValue: 'datetimePicker'
7477
}),
7578
label: createEditorInputProp({ label: '输入框左侧文本', defaultValue: '时间选择器' }),
76-
columns: createEditorTableProp({
77-
label: '数据项',
78-
option: {
79-
options: [
80-
{
81-
label: '显示值',
82-
field: 'label'
83-
},
84-
{
85-
label: '绑定值',
86-
field: 'value'
87-
},
88-
{
89-
label: '备注',
90-
field: 'comments'
91-
}
92-
],
93-
showKey: 'label'
94-
},
95-
defaultValue: [
79+
title: createEditorInputProp({ label: '顶部栏标题', defaultValue: '选择时间' }),
80+
type: createEditorSelectProp({
81+
label: '时间类型',
82+
options: [
83+
{
84+
label: 'date',
85+
val: 'date'
86+
},
87+
{
88+
label: 'time',
89+
val: 'time'
90+
},
9691
{
97-
label: '杭州',
98-
value: 'hangzhou'
92+
label: 'year-month',
93+
val: 'year-month'
9994
},
10095
{
101-
label: '上海',
102-
value: 'shanghai'
96+
label: 'month-day',
97+
val: 'month-day'
98+
},
99+
{
100+
label: 'datehour',
101+
val: 'datehour'
103102
}
104-
]
103+
],
104+
defaultValue: 'time'
105+
}),
106+
format: createEditorInputProp({
107+
label: '选择时间后格式化值',
108+
tips: 'YYYY-MM-DD HH:mm:ss',
109+
defaultValue: 'YYYY-MM-DD HH:mm:ss'
110+
}),
111+
cancelButtonText: createEditorInputProp({ label: '取消按钮文字' }),
112+
columnsOrder: createEditorInputProp({
113+
label: '自定义列排序数组',
114+
tips: '可选值为：year、month、day、hour、minute，传多个值以英文逗号隔开'
115+
}),
116+
confirmButtonText: createEditorInputProp({ label: '确认按钮文字' }),
117+
filter: createEditorInputProp({ label: '选项过滤函数' }),
118+
formatter: createEditorInputProp({ label: '选项格式化函数' }),
119+
itemHeight: createEditorInputProp({
120+
label: '选项高度',
121+
tips: '支持 px vw vh rem 单位，默认 px'
105122
}),
106-
valueKey: createEditorInputProp({ label: '选项对象的键名', defaultValue: 'label' }),
123+
loading: createEditorSwitchProp({ label: '是否显示加载状态' }),
124+
showToolbar: createEditorSwitchProp({ label: '是否显示顶部栏' }),
125+
swipeDuration: createEditorInputProp({ label: '快速滑动时惯性滚动的时长，单位ms' }),
126+
visibleItemCount: createEditorInputNumberProp({ label: '可见的选项个数' }),
107127
placeholder: createEditorInputProp({ label: '占位符', defaultValue: '请选择' }),
108128
...createFieldProps()
109129
},

‎src/visual-editor/components/header/useTools.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -151,7 +151,7 @@ export const useTools = () => {
151151
icon: 'el-icon-position',
152152
onClick: () => {
153153
localStorage.setItem(localKey, JSON.stringify(jsonData))
154-
window.open('/preview/')
154+
window.open(location.href.replace('/#/', '/preview/'))
155155
}
156156
},
157157
{

‎src/visual-editor/components/right-attribute-panel/index.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,9 @@ export default defineComponent({
4747
const { propObj, prop } = useDotProp(state.editData.props, propName)
4848

4949
return {
50-
[VisualEditorPropsType.input]: () => <ElInput v-model={propObj[prop]} />,
50+
[VisualEditorPropsType.input]: () => (
51+
<ElInput v-model={propObj[prop]} placeholder={propConfig.tips || propConfig.label} />
52+
),
5153
[VisualEditorPropsType.inputNumber]: () => <ElInputNumber v-model={propObj[prop]} />,
5254
[VisualEditorPropsType.switch]: () => <ElSwitch v-model={propObj[prop]} />,
5355
[VisualEditorPropsType.color]: () => <ElColorPicker v-model={propObj[prop]} />,

‎src/visual-editor/visual-editor.props.tsx

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,22 @@ export type VisualEditorProps = {
1717
} & {
1818
table?: VisualEditorTableOption
1919
}
20-
20+
// 控制台输入以下代码，快速生成组件属性
21+
// let propObj = {
22+
// string: (config) => `createEditorInputProp(${JSON.stringify(config)})`,
23+
// number: (config) => `createEditorInputNumberProp(${JSON.stringify(config)})`,
24+
// boolean: (config) => `createEditorSwitchProp(${JSON.stringify(config)})`
25+
// }
26+
//
27+
// $$('#props + table tr').reduce((prev, curr) => {
28+
// const children = curr.children
29+
// const key = children[0].textContent.replace(/-([a-z])/g, (all, i) => i.toUpperCase())
30+
// const value = (propObj[children[2].textContent ?? propObj['string'])({
31+
// label: children[1].textContent
32+
// }).replaceAll('"', '')
33+
// prev[key] = value
34+
// return prev
35+
// }, {})
2136
/*---------------------------------------switch-------------------------------------------*/
2237
interface EditorSwitchProp {
2338
label: string

‎yarn.lock

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1919,7 +1919,7 @@ dargs@^7.0.0:
19191919
resolved "https://registry.yarnpkg.com/dargs/-/dargs-7.0.0.tgz#04015c41de0bcb69ec84050f3d9be0caf8d6d5cc"
19201920
integrity sha512-2iy1EkLdlBzQGvbweYRFxmFath8+K7+AKB0TlhHWkNuH+TmovaMH/Wp7V7R4u7f4SnX3OgLsU9t1NI9ioDnUpg==
19211921

1922-
dayjs@1.x:
1922+
dayjs@1.x, dayjs@^1.10.4:
19231923
version "1.10.4"
19241924
resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.10.4.tgz#8e544a9b8683f61783f570980a8a80eaf54ab1e2"
19251925
integrity sha512-RI/Hh4kqRc1UKLOAf/T5zdMMX5DQIlDxwUe3wSyMMnEbGunnpENCdbUgM+dW7kXidZqCttBrmw7BhN4TMddkCw==

0 commit comments

Comments
 (0)