wip: form改造中
This commit is contained in:
kailong321200875
parent
cc18f297ef
commit
09fe3467f6
|
|
@ -30,14 +30,7 @@ export const useForm = (props?: FormProps) => {
|
||||||
}
|
}
|
||||||
|
|
||||||
// 一些内置的方法
|
// 一些内置的方法
|
||||||
const methods: {
|
const methods = {
|
||||||
setProps: (props: Recordable) => void
|
|
||||||
setValues: (data: Recordable) => void
|
|
||||||
getFormData: <T = Recordable | undefined>() => Promise<T>
|
|
||||||
setSchema: (schemaProps: FormSetPropsType[]) => void
|
|
||||||
addSchema: (formSchema: FormSchema, index?: number) => void
|
|
||||||
delSchema: (field: string) => void
|
|
||||||
} = {
|
|
||||||
setProps: async (props: FormProps = {}) => {
|
setProps: async (props: FormProps = {}) => {
|
||||||
const form = await getForm()
|
const form = await getForm()
|
||||||
form?.setProps(props)
|
form?.setProps(props)
|
||||||
|
|
@ -89,7 +82,7 @@ export const useForm = (props?: FormProps) => {
|
||||||
|
|
||||||
return {
|
return {
|
||||||
register,
|
register,
|
||||||
elFormRef,
|
formRef: elFormRef,
|
||||||
methods
|
methods
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -148,335 +148,335 @@ export const asyncRouterMap: AppRouteRecordRaw[] = [
|
||||||
meta: {
|
meta: {
|
||||||
title: t('router.defaultForm')
|
title: t('router.defaultForm')
|
||||||
}
|
}
|
||||||
},
|
|
||||||
{
|
|
||||||
path: 'use-form',
|
|
||||||
component: () => import('@/views/Components/Form/UseFormDemo.vue'),
|
|
||||||
name: 'UseForm',
|
|
||||||
meta: {
|
|
||||||
title: 'UseForm'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: 'ref-form',
|
|
||||||
component: () => import('@/views/Components/Form/RefForm.vue'),
|
|
||||||
name: 'RefForm',
|
|
||||||
meta: {
|
|
||||||
title: 'RefForm'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: 'table',
|
|
||||||
component: getParentLayout(),
|
|
||||||
redirect: '/components/table/default-table',
|
|
||||||
name: 'TableDemo',
|
|
||||||
meta: {
|
|
||||||
title: t('router.table'),
|
|
||||||
alwaysShow: true
|
|
||||||
},
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
path: 'default-table',
|
|
||||||
component: () => import('@/views/Components/Table/DefaultTable.vue'),
|
|
||||||
name: 'DefaultTable',
|
|
||||||
meta: {
|
|
||||||
title: t('router.defaultTable')
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: 'use-table',
|
|
||||||
component: () => import('@/views/Components/Table/UseTableDemo.vue'),
|
|
||||||
name: 'UseTable',
|
|
||||||
meta: {
|
|
||||||
title: 'UseTable'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: 'ref-table',
|
|
||||||
component: () => import('@/views/Components/Table/RefTable.vue'),
|
|
||||||
name: 'RefTable',
|
|
||||||
meta: {
|
|
||||||
title: 'RefTable'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: 'editor-demo',
|
|
||||||
component: getParentLayout(),
|
|
||||||
redirect: '/components/editor-demo/editor',
|
|
||||||
name: 'EditorDemo',
|
|
||||||
meta: {
|
|
||||||
title: t('router.editor'),
|
|
||||||
alwaysShow: true
|
|
||||||
},
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
path: 'editor',
|
|
||||||
component: () => import('@/views/Components/Editor/Editor.vue'),
|
|
||||||
name: 'Editor',
|
|
||||||
meta: {
|
|
||||||
title: t('router.richText')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: 'search',
|
|
||||||
component: () => import('@/views/Components/Search.vue'),
|
|
||||||
name: 'Search',
|
|
||||||
meta: {
|
|
||||||
title: t('router.search')
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: 'descriptions',
|
|
||||||
component: () => import('@/views/Components/Descriptions.vue'),
|
|
||||||
name: 'Descriptions',
|
|
||||||
meta: {
|
|
||||||
title: t('router.descriptions')
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: 'image-viewer',
|
|
||||||
component: () => import('@/views/Components/ImageViewer.vue'),
|
|
||||||
name: 'ImageViewer',
|
|
||||||
meta: {
|
|
||||||
title: t('router.imageViewer')
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: 'dialog',
|
|
||||||
component: () => import('@/views/Components/Dialog.vue'),
|
|
||||||
name: 'Dialog',
|
|
||||||
meta: {
|
|
||||||
title: t('router.dialog')
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: 'icon',
|
|
||||||
component: () => import('@/views/Components/Icon.vue'),
|
|
||||||
name: 'Icon',
|
|
||||||
meta: {
|
|
||||||
title: t('router.icon')
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: 'echart',
|
|
||||||
component: () => import('@/views/Components/Echart.vue'),
|
|
||||||
name: 'Echart',
|
|
||||||
meta: {
|
|
||||||
title: t('router.echart')
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: 'count-to',
|
|
||||||
component: () => import('@/views/Components/CountTo.vue'),
|
|
||||||
name: 'CountTo',
|
|
||||||
meta: {
|
|
||||||
title: t('router.countTo')
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: 'qrcode',
|
|
||||||
component: () => import('@/views/Components/Qrcode.vue'),
|
|
||||||
name: 'Qrcode',
|
|
||||||
meta: {
|
|
||||||
title: t('router.qrcode')
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: 'highlight',
|
|
||||||
component: () => import('@/views/Components/Highlight.vue'),
|
|
||||||
name: 'Highlight',
|
|
||||||
meta: {
|
|
||||||
title: t('router.highlight')
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: 'infotip',
|
|
||||||
component: () => import('@/views/Components/Infotip.vue'),
|
|
||||||
name: 'Infotip',
|
|
||||||
meta: {
|
|
||||||
title: t('router.infotip')
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: 'input-password',
|
|
||||||
component: () => import('@/views/Components/InputPassword.vue'),
|
|
||||||
name: 'InputPassword',
|
|
||||||
meta: {
|
|
||||||
title: t('router.inputPassword')
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: 'sticky',
|
|
||||||
component: () => import('@/views/Components/Sticky.vue'),
|
|
||||||
name: 'Sticky',
|
|
||||||
meta: {
|
|
||||||
title: t('router.sticky')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: '/hooks',
|
|
||||||
component: Layout,
|
|
||||||
redirect: '/hooks/useWatermark',
|
|
||||||
name: 'Hooks',
|
|
||||||
meta: {
|
|
||||||
title: 'hooks',
|
|
||||||
icon: 'ic:outline-webhook',
|
|
||||||
alwaysShow: true
|
|
||||||
},
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
path: 'useWatermark',
|
|
||||||
component: () => import('@/views/hooks/useWatermark.vue'),
|
|
||||||
name: 'UseWatermark',
|
|
||||||
meta: {
|
|
||||||
title: 'useWatermark'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: 'useCrudSchemas',
|
|
||||||
component: () => import('@/views/hooks/useCrudSchemas.vue'),
|
|
||||||
name: 'UseCrudSchemas',
|
|
||||||
meta: {
|
|
||||||
title: 'useCrudSchemas'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: '/level',
|
|
||||||
component: Layout,
|
|
||||||
redirect: '/level/menu1/menu1-1/menu1-1-1',
|
|
||||||
name: 'Level',
|
|
||||||
meta: {
|
|
||||||
title: t('router.level'),
|
|
||||||
icon: 'carbon:skill-level-advanced'
|
|
||||||
},
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
path: 'menu1',
|
|
||||||
name: 'Menu1',
|
|
||||||
component: getParentLayout(),
|
|
||||||
redirect: '/level/menu1/menu1-1/menu1-1-1',
|
|
||||||
meta: {
|
|
||||||
title: t('router.menu1')
|
|
||||||
},
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
path: 'menu1-1',
|
|
||||||
name: 'Menu11',
|
|
||||||
component: getParentLayout(),
|
|
||||||
redirect: '/level/menu1/menu1-1/menu1-1-1',
|
|
||||||
meta: {
|
|
||||||
title: t('router.menu11'),
|
|
||||||
alwaysShow: true
|
|
||||||
},
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
path: 'menu1-1-1',
|
|
||||||
name: 'Menu111',
|
|
||||||
component: () => import('@/views/Level/Menu111.vue'),
|
|
||||||
meta: {
|
|
||||||
title: t('router.menu111')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: 'menu1-2',
|
|
||||||
name: 'Menu12',
|
|
||||||
component: () => import('@/views/Level/Menu12.vue'),
|
|
||||||
meta: {
|
|
||||||
title: t('router.menu12')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: 'menu2',
|
|
||||||
name: 'Menu2',
|
|
||||||
component: () => import('@/views/Level/Menu2.vue'),
|
|
||||||
meta: {
|
|
||||||
title: t('router.menu2')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: '/example',
|
|
||||||
component: Layout,
|
|
||||||
redirect: '/example/example-dialog',
|
|
||||||
name: 'Example',
|
|
||||||
meta: {
|
|
||||||
title: t('router.example'),
|
|
||||||
icon: 'ep:management',
|
|
||||||
alwaysShow: true
|
|
||||||
},
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
path: 'example-dialog',
|
|
||||||
component: () => import('@/views/Example/Dialog/ExampleDialog.vue'),
|
|
||||||
name: 'ExampleDialog',
|
|
||||||
meta: {
|
|
||||||
title: t('router.exampleDialog')
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: 'example-page',
|
|
||||||
component: () => import('@/views/Example/Page/ExamplePage.vue'),
|
|
||||||
name: 'ExamplePage',
|
|
||||||
meta: {
|
|
||||||
title: t('router.examplePage')
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: 'example-add',
|
|
||||||
component: () => import('@/views/Example/Page/ExampleAdd.vue'),
|
|
||||||
name: 'ExampleAdd',
|
|
||||||
meta: {
|
|
||||||
title: t('router.exampleAdd'),
|
|
||||||
noTagsView: true,
|
|
||||||
noCache: true,
|
|
||||||
hidden: true,
|
|
||||||
canTo: true,
|
|
||||||
activeMenu: '/example/example-page'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: 'example-edit',
|
|
||||||
component: () => import('@/views/Example/Page/ExampleEdit.vue'),
|
|
||||||
name: 'ExampleEdit',
|
|
||||||
meta: {
|
|
||||||
title: t('router.exampleEdit'),
|
|
||||||
noTagsView: true,
|
|
||||||
noCache: true,
|
|
||||||
hidden: true,
|
|
||||||
canTo: true,
|
|
||||||
activeMenu: '/example/example-page'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: 'example-detail',
|
|
||||||
component: () => import('@/views/Example/Page/ExampleDetail.vue'),
|
|
||||||
name: 'ExampleDetail',
|
|
||||||
meta: {
|
|
||||||
title: t('router.exampleDetail'),
|
|
||||||
noTagsView: true,
|
|
||||||
noCache: true,
|
|
||||||
hidden: true,
|
|
||||||
canTo: true,
|
|
||||||
activeMenu: '/example/example-page'
|
|
||||||
}
|
}
|
||||||
|
// {
|
||||||
|
// path: 'use-form',
|
||||||
|
// component: () => import('@/views/Components/Form/UseFormDemo.vue'),
|
||||||
|
// name: 'UseForm',
|
||||||
|
// meta: {
|
||||||
|
// title: 'UseForm'
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// {
|
||||||
|
// path: 'ref-form',
|
||||||
|
// component: () => import('@/views/Components/Form/RefForm.vue'),
|
||||||
|
// name: 'RefForm',
|
||||||
|
// meta: {
|
||||||
|
// title: 'RefForm'
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
]
|
||||||
}
|
}
|
||||||
|
// {
|
||||||
|
// path: 'table',
|
||||||
|
// component: getParentLayout(),
|
||||||
|
// redirect: '/components/table/default-table',
|
||||||
|
// name: 'TableDemo',
|
||||||
|
// meta: {
|
||||||
|
// title: t('router.table'),
|
||||||
|
// alwaysShow: true
|
||||||
|
// },
|
||||||
|
// children: [
|
||||||
|
// {
|
||||||
|
// path: 'default-table',
|
||||||
|
// component: () => import('@/views/Components/Table/DefaultTable.vue'),
|
||||||
|
// name: 'DefaultTable',
|
||||||
|
// meta: {
|
||||||
|
// title: t('router.defaultTable')
|
||||||
|
// }
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// path: 'use-table',
|
||||||
|
// component: () => import('@/views/Components/Table/UseTableDemo.vue'),
|
||||||
|
// name: 'UseTable',
|
||||||
|
// meta: {
|
||||||
|
// title: 'UseTable'
|
||||||
|
// }
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// path: 'ref-table',
|
||||||
|
// component: () => import('@/views/Components/Table/RefTable.vue'),
|
||||||
|
// name: 'RefTable',
|
||||||
|
// meta: {
|
||||||
|
// title: 'RefTable'
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// ]
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// path: 'editor-demo',
|
||||||
|
// component: getParentLayout(),
|
||||||
|
// redirect: '/components/editor-demo/editor',
|
||||||
|
// name: 'EditorDemo',
|
||||||
|
// meta: {
|
||||||
|
// title: t('router.editor'),
|
||||||
|
// alwaysShow: true
|
||||||
|
// },
|
||||||
|
// children: [
|
||||||
|
// {
|
||||||
|
// path: 'editor',
|
||||||
|
// component: () => import('@/views/Components/Editor/Editor.vue'),
|
||||||
|
// name: 'Editor',
|
||||||
|
// meta: {
|
||||||
|
// title: t('router.richText')
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// ]
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// path: 'search',
|
||||||
|
// component: () => import('@/views/Components/Search.vue'),
|
||||||
|
// name: 'Search',
|
||||||
|
// meta: {
|
||||||
|
// title: t('router.search')
|
||||||
|
// }
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// path: 'descriptions',
|
||||||
|
// component: () => import('@/views/Components/Descriptions.vue'),
|
||||||
|
// name: 'Descriptions',
|
||||||
|
// meta: {
|
||||||
|
// title: t('router.descriptions')
|
||||||
|
// }
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// path: 'image-viewer',
|
||||||
|
// component: () => import('@/views/Components/ImageViewer.vue'),
|
||||||
|
// name: 'ImageViewer',
|
||||||
|
// meta: {
|
||||||
|
// title: t('router.imageViewer')
|
||||||
|
// }
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// path: 'dialog',
|
||||||
|
// component: () => import('@/views/Components/Dialog.vue'),
|
||||||
|
// name: 'Dialog',
|
||||||
|
// meta: {
|
||||||
|
// title: t('router.dialog')
|
||||||
|
// }
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// path: 'icon',
|
||||||
|
// component: () => import('@/views/Components/Icon.vue'),
|
||||||
|
// name: 'Icon',
|
||||||
|
// meta: {
|
||||||
|
// title: t('router.icon')
|
||||||
|
// }
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// path: 'echart',
|
||||||
|
// component: () => import('@/views/Components/Echart.vue'),
|
||||||
|
// name: 'Echart',
|
||||||
|
// meta: {
|
||||||
|
// title: t('router.echart')
|
||||||
|
// }
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// path: 'count-to',
|
||||||
|
// component: () => import('@/views/Components/CountTo.vue'),
|
||||||
|
// name: 'CountTo',
|
||||||
|
// meta: {
|
||||||
|
// title: t('router.countTo')
|
||||||
|
// }
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// path: 'qrcode',
|
||||||
|
// component: () => import('@/views/Components/Qrcode.vue'),
|
||||||
|
// name: 'Qrcode',
|
||||||
|
// meta: {
|
||||||
|
// title: t('router.qrcode')
|
||||||
|
// }
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// path: 'highlight',
|
||||||
|
// component: () => import('@/views/Components/Highlight.vue'),
|
||||||
|
// name: 'Highlight',
|
||||||
|
// meta: {
|
||||||
|
// title: t('router.highlight')
|
||||||
|
// }
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// path: 'infotip',
|
||||||
|
// component: () => import('@/views/Components/Infotip.vue'),
|
||||||
|
// name: 'Infotip',
|
||||||
|
// meta: {
|
||||||
|
// title: t('router.infotip')
|
||||||
|
// }
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// path: 'input-password',
|
||||||
|
// component: () => import('@/views/Components/InputPassword.vue'),
|
||||||
|
// name: 'InputPassword',
|
||||||
|
// meta: {
|
||||||
|
// title: t('router.inputPassword')
|
||||||
|
// }
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// path: 'sticky',
|
||||||
|
// component: () => import('@/views/Components/Sticky.vue'),
|
||||||
|
// name: 'Sticky',
|
||||||
|
// meta: {
|
||||||
|
// title: t('router.sticky')
|
||||||
|
// }
|
||||||
|
// }
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
// {
|
||||||
|
// path: '/hooks',
|
||||||
|
// component: Layout,
|
||||||
|
// redirect: '/hooks/useWatermark',
|
||||||
|
// name: 'Hooks',
|
||||||
|
// meta: {
|
||||||
|
// title: 'hooks',
|
||||||
|
// icon: 'ic:outline-webhook',
|
||||||
|
// alwaysShow: true
|
||||||
|
// },
|
||||||
|
// children: [
|
||||||
|
// {
|
||||||
|
// path: 'useWatermark',
|
||||||
|
// component: () => import('@/views/hooks/useWatermark.vue'),
|
||||||
|
// name: 'UseWatermark',
|
||||||
|
// meta: {
|
||||||
|
// title: 'useWatermark'
|
||||||
|
// }
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// path: 'useCrudSchemas',
|
||||||
|
// component: () => import('@/views/hooks/useCrudSchemas.vue'),
|
||||||
|
// name: 'UseCrudSchemas',
|
||||||
|
// meta: {
|
||||||
|
// title: 'useCrudSchemas'
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// ]
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// path: '/level',
|
||||||
|
// component: Layout,
|
||||||
|
// redirect: '/level/menu1/menu1-1/menu1-1-1',
|
||||||
|
// name: 'Level',
|
||||||
|
// meta: {
|
||||||
|
// title: t('router.level'),
|
||||||
|
// icon: 'carbon:skill-level-advanced'
|
||||||
|
// },
|
||||||
|
// children: [
|
||||||
|
// {
|
||||||
|
// path: 'menu1',
|
||||||
|
// name: 'Menu1',
|
||||||
|
// component: getParentLayout(),
|
||||||
|
// redirect: '/level/menu1/menu1-1/menu1-1-1',
|
||||||
|
// meta: {
|
||||||
|
// title: t('router.menu1')
|
||||||
|
// },
|
||||||
|
// children: [
|
||||||
|
// {
|
||||||
|
// path: 'menu1-1',
|
||||||
|
// name: 'Menu11',
|
||||||
|
// component: getParentLayout(),
|
||||||
|
// redirect: '/level/menu1/menu1-1/menu1-1-1',
|
||||||
|
// meta: {
|
||||||
|
// title: t('router.menu11'),
|
||||||
|
// alwaysShow: true
|
||||||
|
// },
|
||||||
|
// children: [
|
||||||
|
// {
|
||||||
|
// path: 'menu1-1-1',
|
||||||
|
// name: 'Menu111',
|
||||||
|
// component: () => import('@/views/Level/Menu111.vue'),
|
||||||
|
// meta: {
|
||||||
|
// title: t('router.menu111')
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// ]
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// path: 'menu1-2',
|
||||||
|
// name: 'Menu12',
|
||||||
|
// component: () => import('@/views/Level/Menu12.vue'),
|
||||||
|
// meta: {
|
||||||
|
// title: t('router.menu12')
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// ]
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// path: 'menu2',
|
||||||
|
// name: 'Menu2',
|
||||||
|
// component: () => import('@/views/Level/Menu2.vue'),
|
||||||
|
// meta: {
|
||||||
|
// title: t('router.menu2')
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// ]
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// path: '/example',
|
||||||
|
// component: Layout,
|
||||||
|
// redirect: '/example/example-dialog',
|
||||||
|
// name: 'Example',
|
||||||
|
// meta: {
|
||||||
|
// title: t('router.example'),
|
||||||
|
// icon: 'ep:management',
|
||||||
|
// alwaysShow: true
|
||||||
|
// },
|
||||||
|
// children: [
|
||||||
|
// {
|
||||||
|
// path: 'example-dialog',
|
||||||
|
// component: () => import('@/views/Example/Dialog/ExampleDialog.vue'),
|
||||||
|
// name: 'ExampleDialog',
|
||||||
|
// meta: {
|
||||||
|
// title: t('router.exampleDialog')
|
||||||
|
// }
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// path: 'example-page',
|
||||||
|
// component: () => import('@/views/Example/Page/ExamplePage.vue'),
|
||||||
|
// name: 'ExamplePage',
|
||||||
|
// meta: {
|
||||||
|
// title: t('router.examplePage')
|
||||||
|
// }
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// path: 'example-add',
|
||||||
|
// component: () => import('@/views/Example/Page/ExampleAdd.vue'),
|
||||||
|
// name: 'ExampleAdd',
|
||||||
|
// meta: {
|
||||||
|
// title: t('router.exampleAdd'),
|
||||||
|
// noTagsView: true,
|
||||||
|
// noCache: true,
|
||||||
|
// hidden: true,
|
||||||
|
// canTo: true,
|
||||||
|
// activeMenu: '/example/example-page'
|
||||||
|
// }
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// path: 'example-edit',
|
||||||
|
// component: () => import('@/views/Example/Page/ExampleEdit.vue'),
|
||||||
|
// name: 'ExampleEdit',
|
||||||
|
// meta: {
|
||||||
|
// title: t('router.exampleEdit'),
|
||||||
|
// noTagsView: true,
|
||||||
|
// noCache: true,
|
||||||
|
// hidden: true,
|
||||||
|
// canTo: true,
|
||||||
|
// activeMenu: '/example/example-page'
|
||||||
|
// }
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// path: 'example-detail',
|
||||||
|
// component: () => import('@/views/Example/Page/ExampleDetail.vue'),
|
||||||
|
// name: 'ExampleDetail',
|
||||||
|
// meta: {
|
||||||
|
// title: t('router.exampleDetail'),
|
||||||
|
// noTagsView: true,
|
||||||
|
// noCache: true,
|
||||||
|
// hidden: true,
|
||||||
|
// canTo: true,
|
||||||
|
// activeMenu: '/example/example-page'
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// ]
|
||||||
|
// },
|
||||||
{
|
{
|
||||||
path: '/error',
|
path: '/error',
|
||||||
component: Layout,
|
component: Layout,
|
||||||
|
|
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -7,6 +7,7 @@ import { ContentWrap } from '@/components/ContentWrap'
|
||||||
import { useAppStore } from '@/store/modules/app'
|
import { useAppStore } from '@/store/modules/app'
|
||||||
import { FormSchema } from '@/types/form'
|
import { FormSchema } from '@/types/form'
|
||||||
import { ComponentOptions } from '@/types/components'
|
import { ComponentOptions } from '@/types/components'
|
||||||
|
import { useForm } from '@/hooks/web/useForm'
|
||||||
|
|
||||||
const appStore = useAppStore()
|
const appStore = useAppStore()
|
||||||
|
|
||||||
|
|
@ -1030,11 +1031,17 @@ const schema = reactive<FormSchema[]>([
|
||||||
label: t('formDemo.default')
|
label: t('formDemo.default')
|
||||||
}
|
}
|
||||||
])
|
])
|
||||||
|
|
||||||
|
const { register, formRef, methods } = useForm({
|
||||||
|
schema,
|
||||||
|
labelWidth: 'auto',
|
||||||
|
labelPosition: isMobile.value ? 'top' : 'right'
|
||||||
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<ContentWrap :title="t('formDemo.defaultForm')" :message="t('formDemo.formDes')">
|
<ContentWrap :title="t('formDemo.defaultForm')" :message="t('formDemo.formDes')">
|
||||||
<Form :schema="schema" label-width="auto" :label-position="isMobile ? 'top' : 'right'">
|
<!-- <Form :schema="schema" label-width="auto" :label-position="isMobile ? 'top' : 'right'">
|
||||||
<template #field4-prefix>
|
<template #field4-prefix>
|
||||||
<Icon icon="ep:calendar" class="el-input__icon" />
|
<Icon icon="ep:calendar" class="el-input__icon" />
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -1093,6 +1100,67 @@ const schema = reactive<FormSchema[]>([
|
||||||
<span v-if="isHoliday(cell)" class="holiday"></span>
|
<span v-if="isHoliday(cell)" class="holiday"></span>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
</Form> -->
|
||||||
|
|
||||||
|
<Form @register="register">
|
||||||
|
<!-- <template #field4-prefix>
|
||||||
|
<Icon icon="ep:calendar" class="el-input__icon" />
|
||||||
|
</template>
|
||||||
|
<template #field4-suffix>
|
||||||
|
<Icon icon="ep:calendar" class="el-input__icon" />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template #field5-prepend> Http:// </template>
|
||||||
|
<template #field5-append> .com </template>
|
||||||
|
|
||||||
|
<template #field9-default="{ item }">
|
||||||
|
<div class="value">{{ item.value }}</div>
|
||||||
|
<span class="link">{{ item.link }}</span>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template #field15-option="{ item }">
|
||||||
|
<span style="float: left">{{ item.label }}</span>
|
||||||
|
<span style="float: right; font-size: 13px; color: var(--el-text-color-secondary)">
|
||||||
|
{{ item.value }}
|
||||||
|
</span>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template #field17-option="{ item }">
|
||||||
|
<span style="float: left">{{ item.label }}</span>
|
||||||
|
<span style="float: right; font-size: 13px; color: var(--el-text-color-secondary)">
|
||||||
|
{{ item.value }}
|
||||||
|
</span>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template #field20-default="{ item }">
|
||||||
|
<span style="float: left">{{ item.label }}</span>
|
||||||
|
<span style="float: right; font-size: 13px; color: var(--el-text-color-secondary)">
|
||||||
|
{{ item.value }}
|
||||||
|
</span>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template #field22-default="{ item }">
|
||||||
|
<span style="float: left">{{ item.label }}</span>
|
||||||
|
<span style="float: right; font-size: 13px; color: var(--el-text-color-secondary)">
|
||||||
|
{{ item.value }}
|
||||||
|
</span>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template #field25-default="{ node, data }">
|
||||||
|
<span>{{ data.label }}</span>
|
||||||
|
<span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template #field36-default="{ option }">
|
||||||
|
<span>{{ option.value }} - {{ option.desc }}</span>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template #field55-default="cell">
|
||||||
|
<div class="cell" :class="{ current: cell.isCurrent }">
|
||||||
|
<span class="text">{{ cell.text }}</span>
|
||||||
|
<span v-if="isHoliday(cell)" class="holiday"></span>
|
||||||
|
</div>
|
||||||
|
</template> -->
|
||||||
</Form>
|
</Form>
|
||||||
</ContentWrap>
|
</ContentWrap>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -47,10 +47,10 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
|
||||||
}
|
}
|
||||||
}]
|
}]
|
||||||
}),
|
}),
|
||||||
EslintPlugin({
|
// EslintPlugin({
|
||||||
cache: false,
|
// cache: false,
|
||||||
include: ['src/**/*.vue', 'src/**/*.ts', 'src/**/*.tsx'] // 检查的文件
|
// include: ['src/**/*.vue', 'src/**/*.ts', 'src/**/*.tsx'] // 检查的文件
|
||||||
}),
|
// }),
|
||||||
VueI18nPlugin({
|
VueI18nPlugin({
|
||||||
runtimeOnly: true,
|
runtimeOnly: true,
|
||||||
compositionOnly: true,
|
compositionOnly: true,
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue