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

feat: 综合示例重构

This commit is contained in:
kailong321200875 2023-07-23 15:15:28 +08:00
parent c181887f7f
commit 9a0259de5c
16 changed files with 510 additions and 451 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
src/components/ContentDetailWrap/src/ContentDetailWrap.vue
View File

@ -1,11 +1,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { ElCard, ElButton } from 'element-plus' import { ElCard } from 'element-plus'
import { propTypes } from '@/utils/propTypes' import { propTypes } from '@/utils/propTypes'
import { useDesign } from '@/hooks/web/useDesign' import { useDesign } from '@/hooks/web/useDesign'
import { ref, onMounted, defineEmits } from 'vue'
import { Sticky } from '@/components/Sticky'
import { useI18n } from '@/hooks/web/useI18n'
const { t } = useI18n()
const { getPrefixCls } = useDesign() const { getPrefixCls } = useDesign()
@ -15,45 +11,15 @@ defineProps({
title: propTypes.string.def(''), title: propTypes.string.def(''),
message: propTypes.string.def('') message: propTypes.string.def('')
}) })
const emit = defineEmits(['back'])
const offset = ref(85)
const contentDetailWrap = ref()
onMounted(() => {
offset.value = contentDetailWrap.value.getBoundingClientRect().top
})
</script> </script>
<template> <template>
<div :class="[`${prefixCls}-container`, 'relative bg-[#fff]']" ref="contentDetailWrap"> <div :class="[`${prefixCls}-container`, 'relative']">
<Sticky :offset="offset"> <ElCard :class="[`${prefixCls}-body`, 'mb-20px']" shadow="never">
<div <div class="mb-20px pb-20px" style="border-bottom: 1px solid var(--el-border-color)">
:class="[ <slot name="header"></slot>
`${prefixCls}-header`,
'flex b-b-1 h-50px items-center text-center bg-white pr-10px'
]"
>
<div :class="[`${prefixCls}-header__back`, 'flex pl-10px pr-10px ']">
<el-button @click="emit('back')">
<Icon icon="ep:arrow-left" class="mr-5px" />
{{ t('common.back') }}
</el-button>
</div>
<div :class="[`${prefixCls}-header__title`, 'flex flex-1 justify-center']">
<slot name="title">
<label class="text-16px font-700">{{ title }}</label>
</slot>
</div>
<div :class="[`${prefixCls}-header__right`, 'flex pl-10px pr-10px']">
<slot name="right"></slot>
</div>
</div> </div>
</Sticky> <slot></slot>
<div style="padding: var(--app-content-padding)"> </ElCard>
<ElCard :class="[`${prefixCls}-body`, 'mb-20px']" shadow="never">
<div>
<slot></slot>
</div>
</ElCard>
</div>
</div> </div>
</template> </template>

2
src/components/Descriptions/src/Descriptions.vue
View File

@ -113,7 +113,7 @@ export default defineComponent({
label: () => (item.slots?.label ? item.slots?.label(item) : item.label), label: () => (item.slots?.label ? item.slots?.label(item) : item.label),
default: () => default: () =>
item.slots?.default item.slots?.default
? item.slots?.default(item) ? item.slots?.default(props.data)
: props.data[item.field] : props.data[item.field]
}} }}
</ElDescriptionsItem> </ElDescriptionsItem>

2
src/components/Form/src/Form.vue
View File

@ -111,7 +111,7 @@ export default defineComponent({
const formItemComponents = ref({}) const formItemComponents = ref({})
// 表单数据 // 表单数据
const formModel = ref<Recordable>({}) const formModel = ref<Recordable>(props.model)
onMounted(() => { onMounted(() => {
emit('register', unref(elFormRef)?.$parent, unref(elFormRef)) emit('register', unref(elFormRef)?.$parent, unref(elFormRef))

4
src/components/Search/src/Search.vue
View File

@ -48,7 +48,7 @@ const emit = defineEmits(['search', 'reset', 'register', 'validate'])
const visible = ref(true) const visible = ref(true)
// 表单数据 // 表单数据
const formModel = ref<Recordable>({}) const formModel = ref<Recordable>(props.model)
const newSchema = computed(() => { const newSchema = computed(() => {
const propsComputed = unref(getProps) const propsComputed = unref(getProps)
@ -179,7 +179,7 @@ const setSchema = (schemaProps: FormSetProps[]) => {
// 对表单赋值 // 对表单赋值
const setValues = async (data: Recordable = {}) => { const setValues = async (data: Recordable = {}) => {
formModel.value = Object.assign(unref(formModel), data) formModel.value = Object.assign(props.model, unref(formModel), data)
const formExpose = await getFormExpose() const formExpose = await getFormExpose()
formExpose?.setValues(data) formExpose?.setValues(data)
} }

148
src/hooks/web/useCrudSchemas.ts
View File

@ -1,12 +1,8 @@
import { reactive } from 'vue' import { reactive } from 'vue'
import { eachTree, treeMap, filter } from '@/utils/tree' import { eachTree, treeMap, filter } from '@/utils/tree'
import { findIndex } from '@/utils' import { FormSchema } from '@/components/Form'
import { useDictStoreWithOut } from '@/store/modules/dict' import { TableColumn } from '@/components/Table'
import { useI18n } from '@/hooks/web/useI18n' import { DescriptionsSchema } from '@/components/Descriptions'
import type { AxiosPromise } from 'axios'
import { FormSchema } from '@/types/form'
import { TableColumn } from '@/types/table'
import { DescriptionsSchema } from '@/types/descriptions'
export type CrudSchema = Omit<TableColumn, 'children'> & { export type CrudSchema = Omit<TableColumn, 'children'> & {
search?: CrudSearchParams search?: CrudSearchParams
@ -16,39 +12,25 @@ export type CrudSchema = Omit<TableColumn, 'children'> & {
children?: CrudSchema[] children?: CrudSchema[]
} }
type CrudSearchParams = { interface CrudSearchParams extends Omit<FormSchema, 'field'> {
// 是否显示在查询项 // 是否显示在查询项
show?: boolean show?: boolean
// 字典名称，会去取全局的字典 }
dictName?: string
// 接口
api?: () => Promise<any>
// 搜索字段
field?: string
} & Omit<FormSchema, 'field'>
type CrudTableParams = { interface CrudTableParams extends Omit<TableColumn, 'field'> {
// 是否显示表头 // 是否显示表头
show?: boolean show?: boolean
} & Omit<FormSchema, 'field'> }
type CrudFormParams = { interface CrudFormParams extends Omit<FormSchema, 'field'> {
// 字典名称，会去取全局的字典
dictName?: string
// 接口
api?: () => Promise<any>
// 是否显示表单项 // 是否显示表单项
show?: boolean show?: boolean
} & Omit<FormSchema, 'field'> }
type CrudDescriptionsParams = { interface CrudDescriptionsParams extends Omit<DescriptionsSchema, 'field'> {
// 是否显示表单项 // 是否显示表单项
show?: boolean show?: boolean
} & Omit<DescriptionsSchema, 'field'> }
const dictStore = useDictStoreWithOut()
const { t } = useI18n()
interface AllSchemas { interface AllSchemas {
searchSchema: FormSchema[] searchSchema: FormSchema[]
@ -71,13 +53,14 @@ export const useCrudSchemas = (
detailSchema: [] detailSchema: []
}) })
const searchSchema = filterSearchSchema(crudSchema, allSchemas) const searchSchema = filterSearchSchema(crudSchema)
// @ts-ignore
allSchemas.searchSchema = searchSchema || [] allSchemas.searchSchema = searchSchema || []
const tableColumns = filterTableSchema(crudSchema) const tableColumns = filterTableSchema(crudSchema)
allSchemas.tableColumns = tableColumns || [] allSchemas.tableColumns = tableColumns || []
const formSchema = filterFormSchema(crudSchema, allSchemas) const formSchema = filterFormSchema(crudSchema)
allSchemas.formSchema = formSchema allSchemas.formSchema = formSchema
const detailSchema = filterDescriptionsSchema(crudSchema) const detailSchema = filterDescriptionsSchema(crudSchema)
@ -89,55 +72,26 @@ export const useCrudSchemas = (
} }
// 过滤 Search 结构 // 过滤 Search 结构
const filterSearchSchema = (crudSchema: CrudSchema[], allSchemas: AllSchemas): FormSchema[] => { const filterSearchSchema = (crudSchema: CrudSchema[]): FormSchema[] => {
const searchSchema: FormSchema[] = [] const searchSchema: FormSchema[] = []
const length = crudSchema.length
// 获取字典列表队列 for (let i = 0; i < length; i++) {
const searchRequestTask: Array<() => Promise<void>> = [] const schemaItem = crudSchema[i]
eachTree(crudSchema, (schemaItem: CrudSchema) => {
// 判断是否显示 // 判断是否显示
if (schemaItem?.search?.show) { if (schemaItem?.search?.show) {
const searchSchemaItem = { const searchSchemaItem = {
// 默认为 input component: schemaItem.search.component,
component: schemaItem.search.component || 'Input',
componentProps: {},
...schemaItem.search, ...schemaItem.search,
field: schemaItem?.search?.field || schemaItem.field, field: schemaItem.field,
label: schemaItem.search?.label || schemaItem.label label: schemaItem.label
}
if (searchSchemaItem.dictName) {
// 如果有 dictName 则证明是从字典中获取数据
const dictArr = dictStore.getDictObj[searchSchemaItem.dictName]
searchSchemaItem.componentProps!.options = filterOptions(dictArr)
} else if (searchSchemaItem.api) {
searchRequestTask.push(async () => {
const res = await (searchSchemaItem.api as () => AxiosPromise)()
if (res) {
const index = findIndex(allSchemas.searchSchema, (v: FormSchema) => {
return v.field === searchSchemaItem.field
})
if (index !== -1) {
allSchemas.searchSchema[index]!.componentProps!.options = filterOptions(
res,
searchSchemaItem.componentProps.optionsAlias?.labelField
)
}
}
})
} }
// 删除不必要的字段 // 删除不必要的字段
delete searchSchemaItem.show delete searchSchemaItem.show
delete searchSchemaItem.dictName
searchSchema.push(searchSchemaItem) searchSchema.push(searchSchemaItem)
} }
})
for (const task of searchRequestTask) {
task()
} }
return searchSchema return searchSchema
@ -166,56 +120,28 @@ const filterTableSchema = (crudSchema: CrudSchema[]): TableColumn[] => {
} }
// 过滤 form 结构 // 过滤 form 结构
const filterFormSchema = (crudSchema: CrudSchema[], allSchemas: AllSchemas): FormSchema[] => { const filterFormSchema = (crudSchema: CrudSchema[]): FormSchema[] => {
const formSchema: FormSchema[] = [] const formSchema: FormSchema[] = []
const length = crudSchema.length
// 获取字典列表队列 for (let i = 0; i < length; i++) {
const formRequestTask: Array<() => Promise<void>> = [] const formItem = crudSchema[i]
eachTree(crudSchema, (schemaItem: CrudSchema) => {
// 判断是否显示 // 判断是否显示
if (schemaItem?.form?.show !== false) { if (formItem?.form?.show) {
const formSchemaItem = { const formSchemaItem = {
// 默认为 input component: formItem.form.component,
component: schemaItem?.form?.component || 'Input', ...formItem.form,
componentProps: {}, field: formItem.field,
...schemaItem.form, label: formItem.label
field: schemaItem.field,
label: schemaItem.search?.label || schemaItem.label
}
if (formSchemaItem.dictName) {
// 如果有 dictName 则证明是从字典中获取数据
const dictArr = dictStore.getDictObj[formSchemaItem.dictName]
formSchemaItem.componentProps!.options = filterOptions(dictArr)
} else if (formSchemaItem.api) {
formRequestTask.push(async () => {
const res = await (formSchemaItem.api as () => AxiosPromise)()
if (res) {
const index = findIndex(allSchemas.formSchema, (v: FormSchema) => {
return v.field === formSchemaItem.field
})
if (index !== -1) {
allSchemas.formSchema[index]!.componentProps!.options = filterOptions(
res,
formSchemaItem.componentProps.optionsAlias?.labelField
)
}
}
})
} }
// 删除不必要的字段 // 删除不必要的字段
delete formSchemaItem.show delete formSchemaItem.show
delete formSchemaItem.dictName
formSchema.push(formSchemaItem) formSchema.push(formSchemaItem)
} }
})
for (const task of formRequestTask) {
task()
} }
return formSchema return formSchema
} }
@ -241,15 +167,3 @@ const filterDescriptionsSchema = (crudSchema: CrudSchema[]): DescriptionsSchema[
return descriptionsSchema return descriptionsSchema
} }
// 给options添加国际化
const filterOptions = (options: Recordable, labelField?: string) => {
return options?.map((v: Recordable) => {
if (labelField) {
v['labelField'] = t(v.labelField)
} else {
v['label'] = t(v.label)
}
return v
})
}

81
src/hooks/web/useTable.ts
View File

@ -1,7 +1,10 @@
import { useI18n } from '@/hooks/web/useI18n'
import { Table, TableExpose, TableProps, TableSetProps, TableColumn } from '@/components/Table' import { Table, TableExpose, TableProps, TableSetProps, TableColumn } from '@/components/Table'
import { ElTable } from 'element-plus' import { ElTable, ElMessageBox, ElMessage } from 'element-plus'
import { ref, watch, unref, nextTick, onMounted } from 'vue' import { ref, watch, unref, nextTick, onMounted } from 'vue'
const { t } = useI18n()
interface UseTableConfig { interface UseTableConfig {
/** /**
* 是否初始化的时候请求一次 * 是否初始化的时候请求一次
@ -11,6 +14,7 @@ interface UseTableConfig {
list: any[] list: any[]
total: number total: number
}> }>
fetchDelApi?: () => Promise<boolean>
} }
export const useTable = (config: UseTableConfig) => { export const useTable = (config: UseTableConfig) => {
@ -68,24 +72,6 @@ export const useTable = (config: UseTableConfig) => {
return table return table
} }
// const delData = async (ids: string[] | number[]) => {
// const res = await (config?.delListApi && config?.delListApi(ids))
// if (res) {
// ElMessage.success(t('common.delSuccess'))
// // 计算出临界点
// const currentPage =
// tableObject.total % tableObject.pageSize === ids.length || tableObject.pageSize === 1
// ? tableObject.currentPage > 1
// ? tableObject.currentPage - 1
// : tableObject.currentPage
// : tableObject.currentPage
// tableObject.currentPage = currentPage
// methods.getList()
// }
// }
const methods = { const methods = {
/** /**
* 获取表单数据 * 获取表单数据
@ -154,7 +140,7 @@ export const useTable = (config: UseTableConfig) => {
refresh: () => { refresh: () => {
methods.getList() methods.getList()
} },
// sortableChange: (e: any) => { // sortableChange: (e: any) => {
// console.log('sortableChange', e) // console.log('sortableChange', e)
@ -162,32 +148,35 @@ export const useTable = (config: UseTableConfig) => {
// dataList.value.splice(newIndex, 0, dataList.value.splice(oldIndex, 1)[0]) // dataList.value.splice(newIndex, 0, dataList.value.splice(oldIndex, 1)[0])
// // to do something // // to do something
// } // }
// // 删除数据 // 删除数据
// delList: async (ids: string[] | number[], multiple: boolean, message = true) => { delList: async (idsLength: number) => {
// const tableRef = await getTable() const { fetchDelApi } = config
// if (multiple) { if (!fetchDelApi) {
// if (!tableRef?.selections.length) { console.warn('fetchDelApi is undefined')
// ElMessage.warning(t('common.delNoData')) return
// return }
// } ElMessageBox.confirm(t('common.delMessage'), t('common.delWarning'), {
// } else { confirmButtonText: t('common.delOk'),
// if (!tableObject.currentRow) { cancelButtonText: t('common.delCancel'),
// ElMessage.warning(t('common.delNoData')) type: 'warning'
// return }).then(async () => {
// } const res = await fetchDelApi()
// } if (res) {
// if (message) { ElMessage.success(t('common.delSuccess'))
// ElMessageBox.confirm(t('common.delMessage'), t('common.delWarning'), {
// confirmButtonText: t('common.delOk'), // 计算出临界点
// cancelButtonText: t('common.delCancel'), const current =
// type: 'warning' unref(total) % unref(pageSize) === idsLength || unref(pageSize) === 1
// }).then(async () => { ? unref(currentPage) > 1
// await delData(ids) ? unref(currentPage) - 1
// }) : unref(currentPage)
// } else { : unref(currentPage)
// await delData(ids)
// } currentPage.value = current
// } methods.getList()
}
})
}
} }
return { return {

136
src/router/index.ts
View File

@ -409,74 +409,74 @@ export const asyncRouterMap: AppRouteRecordRaw[] = [
} }
] ]
}, },
// { {
// path: '/example', path: '/example',
// component: Layout, component: Layout,
// redirect: '/example/example-dialog', redirect: '/example/example-dialog',
// name: 'Example', name: 'Example',
// meta: { meta: {
// title: t('router.example'), title: t('router.example'),
// icon: 'ep:management', icon: 'ep:management',
// alwaysShow: true alwaysShow: true
// }, },
// children: [ children: [
// { {
// path: 'example-dialog', path: 'example-dialog',
// component: () => import('@/views/Example/Dialog/ExampleDialog.vue'), component: () => import('@/views/Example/Dialog/ExampleDialog.vue'),
// name: 'ExampleDialog', name: 'ExampleDialog',
// meta: { meta: {
// title: t('router.exampleDialog') title: t('router.exampleDialog')
// } }
// }, },
// { {
// path: 'example-page', path: 'example-page',
// component: () => import('@/views/Example/Page/ExamplePage.vue'), component: () => import('@/views/Example/Page/ExamplePage.vue'),
// name: 'ExamplePage', name: 'ExamplePage',
// meta: { meta: {
// title: t('router.examplePage') title: t('router.examplePage')
// } }
// }, },
// { {
// path: 'example-add', path: 'example-add',
// component: () => import('@/views/Example/Page/ExampleAdd.vue'), component: () => import('@/views/Example/Page/ExampleAdd.vue'),
// name: 'ExampleAdd', name: 'ExampleAdd',
// meta: { meta: {
// title: t('router.exampleAdd'), title: t('router.exampleAdd'),
// noTagsView: true, noTagsView: true,
// noCache: true, noCache: true,
// hidden: true, hidden: true,
// canTo: true, canTo: true,
// activeMenu: '/example/example-page' activeMenu: '/example/example-page'
// } }
// }, },
// { {
// path: 'example-edit', path: 'example-edit',
// component: () => import('@/views/Example/Page/ExampleEdit.vue'), component: () => import('@/views/Example/Page/ExampleEdit.vue'),
// name: 'ExampleEdit', name: 'ExampleEdit',
// meta: { meta: {
// title: t('router.exampleEdit'), title: t('router.exampleEdit'),
// noTagsView: true, noTagsView: true,
// noCache: true, noCache: true,
// hidden: true, hidden: true,
// canTo: true, canTo: true,
// activeMenu: '/example/example-page' activeMenu: '/example/example-page'
// } }
// }, },
// { {
// path: 'example-detail', path: 'example-detail',
// component: () => import('@/views/Example/Page/ExampleDetail.vue'), component: () => import('@/views/Example/Page/ExampleDetail.vue'),
// name: 'ExampleDetail', name: 'ExampleDetail',
// meta: { meta: {
// title: t('router.exampleDetail'), title: t('router.exampleDetail'),
// noTagsView: true, noTagsView: true,
// noCache: true, noCache: true,
// hidden: true, hidden: true,
// canTo: true, canTo: true,
// activeMenu: '/example/example-page' activeMenu: '/example/example-page'
// } }
// } }
// ] ]
// }, },
{ {
path: '/error', path: '/error',
component: Layout, component: Layout,

204
src/views/Example/Dialog/ExampleDialog.vue
View File

@ -1,10 +1,10 @@
<script setup lang="ts"> <script setup lang="tsx">
import { ContentWrap } from '@/components/ContentWrap' import { ContentWrap } from '@/components/ContentWrap'
import { Search } from '@/components/Search' import { Search } from '@/components/Search'
import { Dialog } from '@/components/Dialog' import { Dialog } from '@/components/Dialog'
import { useI18n } from '@/hooks/web/useI18n' import { useI18n } from '@/hooks/web/useI18n'
import { ElButton, ElTag } from 'element-plus' import { ElButton, ElTag } from 'element-plus'
import { Table } from '@/components/Table' import { Table, TableColumn } from '@/components/Table'
import { getTableListApi, saveTableApi, delTableListApi } from '@/api/table' import { getTableListApi, saveTableApi, delTableListApi } from '@/api/table'
import { useTable } from '@/hooks/web/useTable' import { useTable } from '@/hooks/web/useTable'
import { TableData } from '@/api/table/types' import { TableData } from '@/api/table/types'
@ -12,27 +12,51 @@ import { h, ref, unref, reactive } from 'vue'
import Write from './components/Write.vue' import Write from './components/Write.vue'
import Detail from './components/Detail.vue' import Detail from './components/Detail.vue'
import { CrudSchema, useCrudSchemas } from '@/hooks/web/useCrudSchemas' import { CrudSchema, useCrudSchemas } from '@/hooks/web/useCrudSchemas'
import { TableColumn } from '@/types/table'
const { register, tableObject, methods } = useTable<TableData>({ const ids = ref<string[]>([])
getListApi: getTableListApi,
delListApi: delTableListApi, const { tableRegister, tableState, tableMethods } = useTable({
response: { fetchDataApi: async () => {
list: 'list', const { currentPage, pageSize } = tableState
total: 'total' const res = await getTableListApi({
pageIndex: unref(currentPage),
pageSize: unref(pageSize),
...unref(searchParams)
})
return {
list: res.data.list,
total: res.data.total
}
}, },
defaultParams: { fetchDelApi: async () => {
title: 's' const res = await delTableListApi(unref(ids))
return !!res
} }
}) })
const { loading, dataList, total, currentPage, pageSize } = tableState
const { getList, getElTableExpose, delList } = tableMethods
const { getList, setSearchParams } = methods const searchParams = ref({})
const setSearchParams = (params: any) => {
getList() searchParams.value = params
getList()
}
const { t } = useI18n() const { t } = useI18n()
const crudSchemas = reactive<CrudSchema[]>([ const crudSchemas = reactive<CrudSchema[]>([
{
field: 'selection',
form: {
show: false
},
detail: {
show: false
},
table: {
type: 'selection'
}
},
{ {
field: 'index', field: 'index',
label: t('tableDemo.index'), label: t('tableDemo.index'),
@ -48,9 +72,12 @@ const crudSchemas = reactive<CrudSchema[]>([
field: 'title', field: 'title',
label: t('tableDemo.title'), label: t('tableDemo.title'),
search: { search: {
show: true show: true,
component: 'Input'
}, },
form: { form: {
show: true,
component: 'Input',
colProps: { colProps: {
span: 24 span: 24
} }
@ -67,6 +94,7 @@ const crudSchemas = reactive<CrudSchema[]>([
field: 'display_time', field: 'display_time',
label: t('tableDemo.displayTime'), label: t('tableDemo.displayTime'),
form: { form: {
show: true,
component: 'DatePicker', component: 'DatePicker',
componentProps: { componentProps: {
type: 'datetime', type: 'datetime',
@ -92,6 +120,7 @@ const crudSchemas = reactive<CrudSchema[]>([
) )
}, },
form: { form: {
show: true,
component: 'Select', component: 'Select',
componentProps: { componentProps: {
style: { style: {
@ -112,12 +141,32 @@ const crudSchemas = reactive<CrudSchema[]>([
} }
] ]
} }
},
detail: {
slots: {
default: (data: any) => {
return (
<ElTag
type={
data.importance === 1 ? 'success' : data.importance === 2 ? 'warning' : 'danger'
}
>
{data.importance === 1
? t('tableDemo.important')
: data.importance === 2
? t('tableDemo.good')
: t('tableDemo.commonly')}
</ElTag>
)
}
}
} }
}, },
{ {
field: 'pageviews', field: 'pageviews',
label: t('tableDemo.pageviews'), label: t('tableDemo.pageviews'),
form: { form: {
show: true,
component: 'InputNumber', component: 'InputNumber',
value: 0 value: 0
} }
@ -129,13 +178,19 @@ const crudSchemas = reactive<CrudSchema[]>([
show: false show: false
}, },
form: { form: {
show: true,
component: 'Editor', component: 'Editor',
colProps: { colProps: {
span: 24 span: 24
} }
}, },
detail: { detail: {
span: 24 span: 24,
slots: {
default: (data: any) => {
return <div innerHTML={data.content}></div>
}
}
} }
}, },
{ {
@ -147,115 +202,108 @@ const crudSchemas = reactive<CrudSchema[]>([
}, },
detail: { detail: {
show: false show: false
},
table: {
slots: {
default: (data: any) => {
return (
<>
<ElButton type="primary" onClick={() => action(data[0].row, 'edit')}>
{t('exampleDemo.edit')}
</ElButton>
<ElButton type="success" onClick={() => action(data[0].row, 'detail')}>
{t('exampleDemo.detail')}
</ElButton>
<ElButton type="danger" onClick={() => delData(data[0].row)}>
{t('exampleDemo.del')}
</ElButton>
</>
)
}
}
} }
} }
]) ])
// @ts-ignore
const { allSchemas } = useCrudSchemas(crudSchemas) const { allSchemas } = useCrudSchemas(crudSchemas)
const dialogVisible = ref(false) const dialogVisible = ref(false)
const dialogTitle = ref('') const dialogTitle = ref('')
const currentRow = ref<TableData | null>(null)
const actionType = ref('')
const AddAction = () => { const AddAction = () => {
dialogTitle.value = t('exampleDemo.add') dialogTitle.value = t('exampleDemo.add')
tableObject.currentRow = null currentRow.value = null
dialogVisible.value = true dialogVisible.value = true
actionType.value = '' actionType.value = ''
} }
const delLoading = ref(false) const delLoading = ref(false)
const delData = async (row: TableData | null, multiple: boolean) => { const delData = async (row: TableData | null) => {
tableObject.currentRow = row const elTableExpose = await getElTableExpose()
const { delList, getSelections } = methods ids.value = row ? [row.id] : elTableExpose?.getSelectionRows().map((v: TableData) => v.id) || []
const selections = await getSelections()
delLoading.value = true delLoading.value = true
await delList( await delList(unref(ids).length).finally(() => {
multiple ? selections.map((v) => v.id) : [tableObject.currentRow?.id as string],
multiple
).finally(() => {
delLoading.value = false delLoading.value = false
}) })
} }
const actionType = ref('')
const action = (row: TableData, type: string) => { const action = (row: TableData, type: string) => {
dialogTitle.value = t(type === 'edit' ? 'exampleDemo.edit' : 'exampleDemo.detail') dialogTitle.value = t(type === 'edit' ? 'exampleDemo.edit' : 'exampleDemo.detail')
actionType.value = type actionType.value = type
tableObject.currentRow = row currentRow.value = row
dialogVisible.value = true dialogVisible.value = true
} }
const writeRef = ref<ComponentRef<typeof Write>>() const writeRef = ref<ComponentRef<typeof Write>>()
const loading = ref(false) const saveLoading = ref(false)
const save = async () => { const save = async () => {
const write = unref(writeRef) const write = unref(writeRef)
await write?.elFormRef?.validate(async (isValid) => { const formData = await write?.submit()
if (isValid) { if (formData) {
loading.value = true saveLoading.value = true
const data = (await write?.getFormData()) as TableData const res = await saveTableApi(formData)
const res = await saveTableApi(data) .catch(() => {})
.catch(() => {}) .finally(() => {
.finally(() => { saveLoading.value = false
loading.value = false })
}) if (res) {
if (res) { dialogVisible.value = false
dialogVisible.value = false currentPage.value = 1
tableObject.currentPage = 1 getList()
getList()
}
} }
}) }
} }
</script> </script>
<template> <template>
<ContentWrap> <ContentWrap>
<Search <Search :schema="allSchemas.searchSchema" @search="setSearchParams" @reset="setSearchParams" />
:model="{ title: 's' }"
:schema="allSchemas.searchSchema"
@search="setSearchParams"
@reset="setSearchParams"
/>
<div class="mb-10px"> <div class="mb-10px">
<ElButton type="primary" @click="AddAction">{{ t('exampleDemo.add') }}</ElButton> <ElButton type="primary" @click="AddAction">{{ t('exampleDemo.add') }}</ElButton>
<ElButton :loading="delLoading" type="danger" @click="delData(null, true)"> <ElButton :loading="delLoading" type="danger" @click="delData(null)">
{{ t('exampleDemo.del') }} {{ t('exampleDemo.del') }}
</ElButton> </ElButton>
</div> </div>
<Table <Table
v-model:pageSize="tableObject.pageSize" v-model:pageSize="pageSize"
v-model:currentPage="tableObject.currentPage" v-model:currentPage="currentPage"
:columns="allSchemas.tableColumns" :columns="allSchemas.tableColumns"
:data="tableObject.tableList" :data="dataList"
:loading="tableObject.loading" :loading="loading"
:pagination="{ :pagination="{
total: tableObject.total total: total
}" }"
@register="register" @register="tableRegister"
> />
<template #action="{ row }">
<ElButton type="primary" v-hasPermi="['example:dialog:edit']" @click="action(row, 'edit')">
{{ t('exampleDemo.edit') }}
</ElButton>
<ElButton
type="success"
v-hasPermi="['example:dialog:view']"
@click="action(row, 'detail')"
>
{{ t('exampleDemo.detail') }}
</ElButton>
<ElButton type="danger" v-hasPermi="['example:dialog:delete']" @click="delData(row, false)">
{{ t('exampleDemo.del') }}
</ElButton>
</template>
</Table>
</ContentWrap> </ContentWrap>
<Dialog v-model="dialogVisible" :title="dialogTitle"> <Dialog v-model="dialogVisible" :title="dialogTitle">
@ -263,17 +311,17 @@ const save = async () => {
v-if="actionType !== 'detail'" v-if="actionType !== 'detail'"
ref="writeRef" ref="writeRef"
:form-schema="allSchemas.formSchema" :form-schema="allSchemas.formSchema"
:current-row="tableObject.currentRow" :current-row="currentRow"
/> />
<Detail <Detail
v-if="actionType === 'detail'" v-if="actionType === 'detail'"
:detail-schema="allSchemas.detailSchema" :detail-schema="allSchemas.detailSchema"
:current-row="tableObject.currentRow" :current-row="currentRow"
/> />
<template #footer> <template #footer>
<ElButton v-if="actionType !== 'detail'" type="primary" :loading="loading" @click="save"> <ElButton v-if="actionType !== 'detail'" type="primary" :loading="saveLoading" @click="save">
{{ t('exampleDemo.save') }} {{ t('exampleDemo.save') }}
</ElButton> </ElButton>
<ElButton @click="dialogVisible = false">{{ t('dialogDemo.close') }}</ElButton> <ElButton @click="dialogVisible = false">{{ t('dialogDemo.close') }}</ElButton>

3
src/views/Example/Dialog/components/Detail.vue
View File

@ -1,10 +1,9 @@
<script setup lang="ts"> <script setup lang="ts">
import { PropType } from 'vue' import { PropType } from 'vue'
import type { TableData } from '@/api/table/types' import type { TableData } from '@/api/table/types'
import { Descriptions } from '@/components/Descriptions' import { Descriptions, DescriptionsSchema } from '@/components/Descriptions'
import { useI18n } from '@/hooks/web/useI18n' import { useI18n } from '@/hooks/web/useI18n'
import { ElTag } from 'element-plus' import { ElTag } from 'element-plus'
import { DescriptionsSchema } from '@/types/descriptions'
const { t } = useI18n() const { t } = useI18n()

25
src/views/Example/Dialog/components/Write.vue
View File

@ -1,10 +1,9 @@
<script setup lang="ts"> <script setup lang="ts">
import { Form } from '@/components/Form' import { Form, FormSchema } from '@/components/Form'
import { useForm } from '@/hooks/web/useForm' import { useForm } from '@/hooks/web/useForm'
import { PropType, reactive, watch } from 'vue' import { PropType, reactive, watch } from 'vue'
import { TableData } from '@/api/table/types' import { TableData } from '@/api/table/types'
import { useValidator } from '@/hooks/web/useValidator' import { useValidator } from '@/hooks/web/useValidator'
import { FormSchema } from '@/types/form'
const { required } = useValidator() const { required } = useValidator()
@ -28,15 +27,24 @@ const rules = reactive({
content: [required()] content: [required()]
}) })
const { register, methods, elFormRef } = useForm({ const { formRegister, formMethods } = useForm()
schema: props.formSchema const { setValues, getFormData, getElFormExpose } = formMethods
})
const submit = async () => {
const elForm = await getElFormExpose()
const valid = await elForm?.validate().catch((err) => {
console.log(err)
})
if (valid) {
const formData = getFormData()
return formData
}
}
watch( watch(
() => props.currentRow, () => props.currentRow,
(currentRow) => { (currentRow) => {
if (!currentRow) return if (!currentRow) return
const { setValues } = methods
setValues(currentRow) setValues(currentRow)
}, },
{ {
@ -46,11 +54,10 @@ watch(
) )
defineExpose({ defineExpose({
elFormRef, submit
getFormData: methods.getFormData
}) })
</script> </script>
<template> <template>
<Form :rules="rules" @register="register" /> <Form :rules="rules" @register="formRegister" :schema="formSchema" />
</template> </template>

34
src/views/Example/Page/ExampleAdd.vue
View File

@ -6,12 +6,11 @@ import { ElButton } from 'element-plus'
import { useI18n } from '@/hooks/web/useI18n' import { useI18n } from '@/hooks/web/useI18n'
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
import { saveTableApi } from '@/api/table' import { saveTableApi } from '@/api/table'
import { TableData } from '@/api/table/types'
import { useEmitt } from '@/hooks/web/useEmitt' import { useEmitt } from '@/hooks/web/useEmitt'
const { emitter } = useEmitt() const { emitter } = useEmitt()
const { push } = useRouter() const { push, go } = useRouter()
const { t } = useI18n() const { t } = useI18n()
@ -21,21 +20,19 @@ const loading = ref(false)
const save = async () => { const save = async () => {
const write = unref(writeRef) const write = unref(writeRef)
await write?.elFormRef?.validate(async (isValid) => { const formData = await write?.submit()
if (isValid) { if (formData) {
loading.value = true loading.value = true
const data = (await write?.getFormData()) as TableData const res = await saveTableApi(formData)
const res = await saveTableApi(data) .catch(() => {})
.catch(() => {}) .finally(() => {
.finally(() => { loading.value = false
loading.value = false })
}) if (res) {
if (res) { emitter.emit('getList', 'add')
emitter.emit('getList', 'add') push('/example/example-page')
push('/example/example-page')
}
} }
}) }
} }
</script> </script>
@ -43,7 +40,10 @@ const save = async () => {
<ContentDetailWrap :title="t('exampleDemo.add')" @back="push('/example/example-page')"> <ContentDetailWrap :title="t('exampleDemo.add')" @back="push('/example/example-page')">
<Write ref="writeRef" /> <Write ref="writeRef" />
<template #right> <template #header>
<ElButton @click="go(-1)">
{{ t('common.back') }}
</ElButton>
<ElButton type="primary" :loading="loading" @click="save"> <ElButton type="primary" :loading="loading" @click="save">
{{ t('exampleDemo.save') }} {{ t('exampleDemo.save') }}
</ElButton> </ElButton>

8
src/views/Example/Page/ExampleDetail.vue
View File

@ -6,8 +6,9 @@ import { useI18n } from '@/hooks/web/useI18n'
import { useRouter, useRoute } from 'vue-router' import { useRouter, useRoute } from 'vue-router'
import { getTableDetApi } from '@/api/table' import { getTableDetApi } from '@/api/table'
import { TableData } from '@/api/table/types' import { TableData } from '@/api/table/types'
import { ElButton } from 'element-plus'
const { push } = useRouter() const { push, go } = useRouter()
const { query } = useRoute() const { query } = useRoute()
@ -27,6 +28,11 @@ getTableDet()
<template> <template>
<ContentDetailWrap :title="t('exampleDemo.detail')" @back="push('/example/example-page')"> <ContentDetailWrap :title="t('exampleDemo.detail')" @back="push('/example/example-page')">
<template #header>
<ElButton @click="go(-1)">
{{ t('common.back') }}
</ElButton>
</template>
<Detail :current-row="currentRow" /> <Detail :current-row="currentRow" />
</ContentDetailWrap> </ContentDetailWrap>
</template> </template>

16
src/views/Example/Page/ExampleEdit.vue
View File

@ -11,7 +11,7 @@ import { useEmitt } from '@/hooks/web/useEmitt'
const { emitter } = useEmitt() const { emitter } = useEmitt()
const { push } = useRouter() const { push, go } = useRouter()
const { query } = useRoute() const { query } = useRoute()
@ -34,17 +34,16 @@ const loading = ref(false)
const save = async () => { const save = async () => {
const write = unref(writeRef) const write = unref(writeRef)
const validate = await write?.elFormRef?.validate()?.catch(() => {}) const formData = await write?.submit()
if (validate) { if (formData) {
loading.value = true loading.value = true
const data = (await write?.getFormData()) as TableData const res = await saveTableApi(formData)
const res = await saveTableApi(data)
.catch(() => {}) .catch(() => {})
.finally(() => { .finally(() => {
loading.value = false loading.value = false
}) })
if (res) { if (res) {
emitter.emit('getList', 'edit') emitter.emit('getList', 'editor')
push('/example/example-page') push('/example/example-page')
} }
} }
@ -55,7 +54,10 @@ const save = async () => {
<ContentDetailWrap :title="t('exampleDemo.edit')" @back="push('/example/example-page')"> <ContentDetailWrap :title="t('exampleDemo.edit')" @back="push('/example/example-page')">
<Write ref="writeRef" :current-row="currentRow" /> <Write ref="writeRef" :current-row="currentRow" />
<template #right> <template #header>
<ElButton @click="go(-1)">
{{ t('common.back') }}
</ElButton>
<ElButton type="primary" :loading="loading" @click="save"> <ElButton type="primary" :loading="loading" @click="save">
{{ t('exampleDemo.save') }} {{ t('exampleDemo.save') }}
</ElButton> </ElButton>

194
src/views/Example/Page/ExamplePage.vue
View File

@ -1,17 +1,16 @@
<script setup lang="ts"> <script setup lang="tsx">
import { ContentWrap } from '@/components/ContentWrap' import { ContentWrap } from '@/components/ContentWrap'
import { Search } from '@/components/Search' import { Search } from '@/components/Search'
import { useI18n } from '@/hooks/web/useI18n' import { useI18n } from '@/hooks/web/useI18n'
import { ElButton, ElTag } from 'element-plus' import { ElButton, ElTag } from 'element-plus'
import { Table } from '@/components/Table' import { Table, TableColumn } from '@/components/Table'
import { getTableListApi, delTableListApi } from '@/api/table' import { getTableListApi, delTableListApi } from '@/api/table'
import { useTable } from '@/hooks/web/useTable' import { useTable } from '@/hooks/web/useTable'
import { TableData } from '@/api/table/types' import { TableData } from '@/api/table/types'
import { h, reactive, ref } from 'vue' import { h, reactive, ref, unref } from 'vue'
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
import { useEmitt } from '@/hooks/web/useEmitt' import { useEmitt } from '@/hooks/web/useEmitt'
import { CrudSchema, useCrudSchemas } from '@/hooks/web/useCrudSchemas' import { CrudSchema, useCrudSchemas } from '@/hooks/web/useCrudSchemas'
import { TableColumn } from '@/types/table'
defineOptions({ defineOptions({
name: 'ExamplePage' name: 'ExamplePage'
@ -19,16 +18,34 @@ defineOptions({
const { push } = useRouter() const { push } = useRouter()
const { register, tableObject, methods } = useTable<TableData>({ const ids = ref<string[]>([])
getListApi: getTableListApi,
delListApi: delTableListApi, const searchParams = ref({})
response: { const setSearchParams = (params: any) => {
list: 'list', searchParams.value = params
total: 'total' getList()
}
const { tableRegister, tableState, tableMethods } = useTable({
fetchDataApi: async () => {
const { currentPage, pageSize } = tableState
const res = await getTableListApi({
pageIndex: unref(currentPage),
pageSize: unref(pageSize),
...unref(searchParams)
})
return {
list: res.data.list,
total: res.data.total
}
},
fetchDelApi: async () => {
const res = await delTableListApi(unref(ids))
return !!res
} }
}) })
const { loading, dataList, total, currentPage, pageSize } = tableState
const { getList, setSearchParams } = methods const { getList, getElTableExpose, delList } = tableMethods
getList() getList()
@ -36,7 +53,7 @@ useEmitt({
name: 'getList', name: 'getList',
callback: (type: string) => { callback: (type: string) => {
if (type === 'add') { if (type === 'add') {
tableObject.currentPage = 1 currentPage.value = 1
} }
getList() getList()
} }
@ -45,16 +62,45 @@ useEmitt({
const { t } = useI18n() const { t } = useI18n()
const crudSchemas = reactive<CrudSchema[]>([ const crudSchemas = reactive<CrudSchema[]>([
{
field: 'selection',
form: {
show: false
},
detail: {
show: false
},
table: {
type: 'selection'
}
},
{ {
field: 'index', field: 'index',
label: t('tableDemo.index'), label: t('tableDemo.index'),
type: 'index' type: 'index',
form: {
show: false
},
detail: {
show: false
}
}, },
{ {
field: 'title', field: 'title',
label: t('tableDemo.title'), label: t('tableDemo.title'),
search: { search: {
show: true show: true,
component: 'Input'
},
form: {
show: true,
component: 'Input',
colProps: {
span: 24
}
},
detail: {
span: 24
} }
}, },
{ {
@ -63,7 +109,15 @@ const crudSchemas = reactive<CrudSchema[]>([
}, },
{ {
field: 'display_time', field: 'display_time',
label: t('tableDemo.displayTime') label: t('tableDemo.displayTime'),
form: {
show: true,
component: 'DatePicker',
componentProps: {
type: 'datetime',
valueFormat: 'YYYY-MM-DD HH:mm:ss'
}
}
}, },
{ {
field: 'importance', field: 'importance',
@ -81,26 +135,90 @@ const crudSchemas = reactive<CrudSchema[]>([
? t('tableDemo.good') ? t('tableDemo.good')
: t('tableDemo.commonly') : t('tableDemo.commonly')
) )
},
form: {
show: true,
component: 'Select',
componentProps: {
style: {
width: '100%'
},
options: [
{
label: '重要',
value: 3
},
{
label: '良好',
value: 2
},
{
label: '一般',
value: 1
}
]
}
} }
}, },
{ {
field: 'pageviews', field: 'pageviews',
label: t('tableDemo.pageviews') label: t('tableDemo.pageviews'),
form: {
show: true,
component: 'InputNumber',
value: 0
}
}, },
{ {
field: 'content', field: 'content',
label: t('exampleDemo.content'), label: t('exampleDemo.content'),
table: { table: {
show: false show: false
},
form: {
show: true,
component: 'Editor',
colProps: {
span: 24
}
},
detail: {
span: 24
} }
}, },
{ {
field: 'action', field: 'action',
width: '260px', width: '260px',
label: t('tableDemo.action') label: t('tableDemo.action'),
form: {
show: false
},
detail: {
show: false
},
table: {
slots: {
default: (data: any) => {
return (
<>
<ElButton type="primary" onClick={() => action(data[0].row, 'edit')}>
{t('exampleDemo.edit')}
</ElButton>
<ElButton type="success" onClick={() => action(data[0].row, 'detail')}>
{t('exampleDemo.detail')}
</ElButton>
<ElButton type="danger" onClick={() => delData(data[0].row)}>
{t('exampleDemo.del')}
</ElButton>
</>
)
}
}
}
} }
]) ])
// @ts-ignore
const { allSchemas } = useCrudSchemas(crudSchemas) const { allSchemas } = useCrudSchemas(crudSchemas)
const AddAction = () => { const AddAction = () => {
@ -109,15 +227,11 @@ const AddAction = () => {
const delLoading = ref(false) const delLoading = ref(false)
const delData = async (row: TableData | null, multiple: boolean) => { const delData = async (row: TableData | null) => {
tableObject.currentRow = row const elTableExpose = await getElTableExpose()
const { delList, getSelections } = methods ids.value = row ? [row.id] : elTableExpose?.getSelectionRows().map((v: TableData) => v.id) || []
const selections = await getSelections()
delLoading.value = true delLoading.value = true
await delList( await delList(unref(ids).length).finally(() => {
multiple ? selections.map((v) => v.id) : [tableObject.currentRow?.id as string],
multiple
).finally(() => {
delLoading.value = false delLoading.value = false
}) })
} }
@ -133,33 +247,21 @@ const action = (row: TableData, type: string) => {
<div class="mb-10px"> <div class="mb-10px">
<ElButton type="primary" @click="AddAction">{{ t('exampleDemo.add') }}</ElButton> <ElButton type="primary" @click="AddAction">{{ t('exampleDemo.add') }}</ElButton>
<ElButton :loading="delLoading" type="danger" @click="delData(null, true)"> <ElButton :loading="delLoading" type="danger" @click="delData(null)">
{{ t('exampleDemo.del') }} {{ t('exampleDemo.del') }}
</ElButton> </ElButton>
</div> </div>
<Table <Table
v-model:pageSize="tableObject.pageSize" v-model:pageSize="pageSize"
v-model:currentPage="tableObject.currentPage" v-model:currentPage="currentPage"
:columns="allSchemas.tableColumns" :columns="allSchemas.tableColumns"
:data="tableObject.tableList" :data="dataList"
:loading="tableObject.loading" :loading="loading"
:pagination="{ :pagination="{
total: tableObject.total total: total
}" }"
@register="register" @register="tableRegister"
> />
<template #action="{ row }">
<ElButton type="primary" @click="action(row, 'edit')">
{{ t('exampleDemo.edit') }}
</ElButton>
<ElButton type="success" @click="action(row, 'detail')">
{{ t('exampleDemo.detail') }}
</ElButton>
<ElButton type="danger" @click="delData(row, false)">
{{ t('exampleDemo.del') }}
</ElButton>
</template>
</Table>
</ContentWrap> </ContentWrap>
</template> </template>

29
src/views/Example/Page/components/Detail.vue
View File

@ -1,10 +1,9 @@
<script setup lang="ts"> <script setup lang="tsx">
import { PropType, reactive } from 'vue' import { PropType, reactive } from 'vue'
import type { TableData } from '@/api/table/types' import type { TableData } from '@/api/table/types'
import { Descriptions } from '@/components/Descriptions' import { Descriptions, DescriptionsSchema } from '@/components/Descriptions'
import { useI18n } from '@/hooks/web/useI18n' import { useI18n } from '@/hooks/web/useI18n'
import { ElTag } from 'element-plus' import { ElTag } from 'element-plus'
import { DescriptionsSchema } from '@/types/descriptions'
const { t } = useI18n() const { t } = useI18n()
@ -31,7 +30,22 @@ const schema = reactive<DescriptionsSchema[]>([
}, },
{ {
field: 'importance', field: 'importance',
label: t('exampleDemo.importance') label: t('exampleDemo.importance'),
slots: {
default: (data: any) => {
return (
<ElTag
type={data.importance === 1 ? 'success' : data.importance === 2 ? 'warning' : 'danger'}
>
{data.importance === 1
? t('tableDemo.important')
: data.importance === 2
? t('tableDemo.good')
: t('tableDemo.commonly')}
</ElTag>
)
}
}
}, },
{ {
field: 'pageviews', field: 'pageviews',
@ -40,7 +54,12 @@ const schema = reactive<DescriptionsSchema[]>([
{ {
field: 'content', field: 'content',
label: t('exampleDemo.content'), label: t('exampleDemo.content'),
span: 24 span: 24,
slots: {
default: (data: any) => {
return <div innerHTML={data.content}></div>
}
}
} }
]) ])
</script> </script>

27
src/views/Example/Page/components/Write.vue
View File

@ -1,12 +1,11 @@
<script setup lang="ts"> <script setup lang="ts">
import { Form } from '@/components/Form' import { Form, FormSchema } from '@/components/Form'
import { useForm } from '@/hooks/web/useForm' import { useForm } from '@/hooks/web/useForm'
import { PropType, reactive, watch } from 'vue' import { PropType, reactive, watch } from 'vue'
import { TableData } from '@/api/table/types' import { TableData } from '@/api/table/types'
import { useI18n } from '@/hooks/web/useI18n' import { useI18n } from '@/hooks/web/useI18n'
import { useValidator } from '@/hooks/web/useValidator' import { useValidator } from '@/hooks/web/useValidator'
import { IDomEditor } from '@wangeditor/editor' import { IDomEditor } from '@wangeditor/editor'
import { FormSchema } from '@/types/form'
const { required } = useValidator() const { required } = useValidator()
@ -19,6 +18,9 @@ const props = defineProps({
const { t } = useI18n() const { t } = useI18n()
const { formRegister, formMethods } = useForm()
const { setValues, getFormData, getElFormExpose, setSchema } = formMethods
const schema = reactive<FormSchema[]>([ const schema = reactive<FormSchema[]>([
{ {
field: 'title', field: 'title',
@ -92,8 +94,8 @@ const schema = reactive<FormSchema[]>([
}, },
componentProps: { componentProps: {
defaultHtml: '', defaultHtml: '',
// @ts-ignore
onChange: (edit: IDomEditor) => { onChange: (edit: IDomEditor) => {
const { setValues } = methods
setValues({ setValues({
content: edit.getHtml() content: edit.getHtml()
}) })
@ -112,15 +114,21 @@ const rules = reactive({
content: [required()] content: [required()]
}) })
const { register, methods, elFormRef } = useForm({ const submit = async () => {
schema const elForm = await getElFormExpose()
}) const valid = await elForm?.validate().catch((err) => {
console.log(err)
})
if (valid) {
const formData = getFormData()
return formData
}
}
watch( watch(
() => props.currentRow, () => props.currentRow,
(currentRow) => { (currentRow) => {
if (!currentRow) return if (!currentRow) return
const { setValues, setSchema } = methods
setValues(currentRow) setValues(currentRow)
setSchema([ setSchema([
{ {
@ -137,11 +145,10 @@ watch(
) )
defineExpose({ defineExpose({
elFormRef, submit
getFormData: methods.getFormData
}) })
</script> </script>
<template> <template>
<Form :rules="rules" @register="register" /> <Form :rules="rules" @register="formRegister" :schema="schema" />
</template> </template>