kingecg
/
gohttpdUi
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

wip: form改造中

This commit is contained in:
kailong321200875 2023-04-18 20:03:01 +08:00
parent cc18f297ef
commit 09fe3467f6
5 changed files with 1535 additions and 338 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/hooks/web/useForm.ts
View File

@ -30,14 +30,7 @@ export const useForm = (props?: FormProps) => {
}
// 一些内置的方法
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
} = {
const methods = {
setProps: async (props: FormProps = {}) => {
const form = await getForm()
form?.setProps(props)
@ -89,7 +82,7 @@ export const useForm = (props?: FormProps) => {
return {
register,
elFormRef,
formRef: elFormRef,
methods
}
}

648
src/router/index.ts
View File

@ -148,335 +148,335 @@ export const asyncRouterMap: AppRouteRecordRaw[] = [
meta: {
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: '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: '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',
component: Layout,

1136
src/views/Components/Form/DefaultForm copy.vue Normal file
View File

File diff suppressed because it is too large Load Diff

70
src/views/Components/Form/DefaultForm.vue
View File

@ -7,6 +7,7 @@ import { ContentWrap } from '@/components/ContentWrap'
import { useAppStore } from '@/store/modules/app'
import { FormSchema } from '@/types/form'
import { ComponentOptions } from '@/types/components'
import { useForm } from '@/hooks/web/useForm'
const appStore = useAppStore()
@ -1030,11 +1031,17 @@ const schema = reactive<FormSchema[]>([
label: t('formDemo.default')
}
])
const { register, formRef, methods } = useForm({
schema,
labelWidth: 'auto',
labelPosition: isMobile.value ? 'top' : 'right'
})
</script>
<template>
<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>
<Icon icon="ep:calendar" class="el-input__icon" />
</template>
@ -1093,6 +1100,67 @@ const schema = reactive<FormSchema[]>([
<span v-if="isHoliday(cell)" class="holiday"></span>
</div>
</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>
</ContentWrap>
</template>

8
vite.config.ts
View File

@ -47,10 +47,10 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
}
}]
}),
EslintPlugin({
cache: false,
include: ['src/**/*.vue', 'src/**/*.ts', 'src/**/*.tsx'] // 检查的文件
}),
// EslintPlugin({
// cache: false,
// include: ['src/**/*.vue', 'src/**/*.ts', 'src/**/*.tsx'] // 检查的文件
// }),
VueI18nPlugin({
runtimeOnly: true,
compositionOnly: true,