feat: datetimePicker
This commit is contained in:
bqy_fe
parent
a77baa04a8
commit
9dab91e37e
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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: {
|
||||
title: createEditorInputProp({ label: '顶部栏标题', defaultValue: '选择时间' }),
|
||||
type: createEditorSelectProp({
|
||||
label: '时间类型',
|
||||
options: [
|
||||
{
|
||||
label: '显示值',
|
||||
field: 'label'
|
||||
label: 'date',
|
||||
val: 'date'
|
||||
},
|
||||
{
|
||||
label: '绑定值',
|
||||
field: 'value'
|
||||
label: 'time',
|
||||
val: 'time'
|
||||
},
|
||||
{
|
||||
label: '备注',
|
||||
field: 'comments'
|
||||
label: 'year-month',
|
||||
val: 'year-month'
|
||||
},
|
||||
{
|
||||
label: 'month-day',
|
||||
val: 'month-day'
|
||||
},
|
||||
{
|
||||
label: 'datehour',
|
||||
val: 'datehour'
|
||||
}
|
||||
],
|
||||
showKey: 'label'
|
||||
},
|
||||
defaultValue: [
|
||||
{
|
||||
label: '杭州',
|
||||
value: 'hangzhou'
|
||||
},
|
||||
{
|
||||
label: '上海',
|
||||
value: 'shanghai'
|
||||
}
|
||||
]
|
||||
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()
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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/'))
|
||||
}
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -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]} />,
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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==
|
||||
|
|
|
|||
Loading…
Reference in New Issue