From 9a0259de5c47970502db95f4dda24998ad5d9efe Mon Sep 17 00:00:00 2001 From: kailong321200875 <321200875@qq.com> Date: Sun, 23 Jul 2023 15:15:28 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E7=BB=BC=E5=90=88=E7=A4=BA=E4=BE=8B?= =?UTF-8?q?=E9=87=8D=E6=9E=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/ContentDetailWrap.vue | 48 +---- .../Descriptions/src/Descriptions.vue | 2 +- src/components/Form/src/Form.vue | 2 +- src/components/Search/src/Search.vue | 4 +- src/hooks/web/useCrudSchemas.ts | 148 +++---------- src/hooks/web/useTable.ts | 81 +++---- src/router/index.ts | 136 ++++++------ src/views/Example/Dialog/ExampleDialog.vue | 204 +++++++++++------- .../Example/Dialog/components/Detail.vue | 3 +- src/views/Example/Dialog/components/Write.vue | 25 ++- src/views/Example/Page/ExampleAdd.vue | 34 +-- src/views/Example/Page/ExampleDetail.vue | 8 +- src/views/Example/Page/ExampleEdit.vue | 16 +- src/views/Example/Page/ExamplePage.vue | 194 +++++++++++++---- src/views/Example/Page/components/Detail.vue | 29 ++- src/views/Example/Page/components/Write.vue | 27 ++- 16 files changed, 510 insertions(+), 451 deletions(-) diff --git a/src/components/ContentDetailWrap/src/ContentDetailWrap.vue b/src/components/ContentDetailWrap/src/ContentDetailWrap.vue index 7591342..29b4ff7 100644 --- a/src/components/ContentDetailWrap/src/ContentDetailWrap.vue +++ b/src/components/ContentDetailWrap/src/ContentDetailWrap.vue @@ -1,11 +1,7 @@ diff --git a/src/components/Descriptions/src/Descriptions.vue b/src/components/Descriptions/src/Descriptions.vue index ef5fd6b..effaca7 100644 --- a/src/components/Descriptions/src/Descriptions.vue +++ b/src/components/Descriptions/src/Descriptions.vue @@ -113,7 +113,7 @@ export default defineComponent({ label: () => (item.slots?.label ? item.slots?.label(item) : item.label), default: () => item.slots?.default - ? item.slots?.default(item) + ? item.slots?.default(props.data) : props.data[item.field] }} diff --git a/src/components/Form/src/Form.vue b/src/components/Form/src/Form.vue index bd2c756..4e23ff8 100644 --- a/src/components/Form/src/Form.vue +++ b/src/components/Form/src/Form.vue @@ -111,7 +111,7 @@ export default defineComponent({ const formItemComponents = ref({}) // 表单数据 - const formModel = ref({}) + const formModel = ref(props.model) onMounted(() => { emit('register', unref(elFormRef)?.$parent, unref(elFormRef)) diff --git a/src/components/Search/src/Search.vue b/src/components/Search/src/Search.vue index 340f8b5..354fefe 100644 --- a/src/components/Search/src/Search.vue +++ b/src/components/Search/src/Search.vue @@ -48,7 +48,7 @@ const emit = defineEmits(['search', 'reset', 'register', 'validate']) const visible = ref(true) // 表单数据 -const formModel = ref({}) +const formModel = ref(props.model) const newSchema = computed(() => { const propsComputed = unref(getProps) @@ -179,7 +179,7 @@ const setSchema = (schemaProps: FormSetProps[]) => { // 对表单赋值 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() formExpose?.setValues(data) } diff --git a/src/hooks/web/useCrudSchemas.ts b/src/hooks/web/useCrudSchemas.ts index e5ca399..5cef69b 100644 --- a/src/hooks/web/useCrudSchemas.ts +++ b/src/hooks/web/useCrudSchemas.ts @@ -1,12 +1,8 @@ import { reactive } from 'vue' import { eachTree, treeMap, filter } from '@/utils/tree' -import { findIndex } from '@/utils' -import { useDictStoreWithOut } from '@/store/modules/dict' -import { useI18n } from '@/hooks/web/useI18n' -import type { AxiosPromise } from 'axios' -import { FormSchema } from '@/types/form' -import { TableColumn } from '@/types/table' -import { DescriptionsSchema } from '@/types/descriptions' +import { FormSchema } from '@/components/Form' +import { TableColumn } from '@/components/Table' +import { DescriptionsSchema } from '@/components/Descriptions' export type CrudSchema = Omit & { search?: CrudSearchParams @@ -16,39 +12,25 @@ export type CrudSchema = Omit & { children?: CrudSchema[] } -type CrudSearchParams = { +interface CrudSearchParams extends Omit { // 是否显示在查询项 show?: boolean - // 字典名称，会去取全局的字典 - dictName?: string - // 接口 - api?: () => Promise - // 搜索字段 - field?: string -} & Omit +} -type CrudTableParams = { +interface CrudTableParams extends Omit { // 是否显示表头 show?: boolean -} & Omit +} -type CrudFormParams = { - // 字典名称，会去取全局的字典 - dictName?: string - // 接口 - api?: () => Promise +interface CrudFormParams extends Omit { // 是否显示表单项 show?: boolean -} & Omit +} -type CrudDescriptionsParams = { +interface CrudDescriptionsParams extends Omit { // 是否显示表单项 show?: boolean -} & Omit - -const dictStore = useDictStoreWithOut() - -const { t } = useI18n() +} interface AllSchemas { searchSchema: FormSchema[] @@ -71,13 +53,14 @@ export const useCrudSchemas = ( detailSchema: [] }) - const searchSchema = filterSearchSchema(crudSchema, allSchemas) + const searchSchema = filterSearchSchema(crudSchema) + // @ts-ignore allSchemas.searchSchema = searchSchema || [] const tableColumns = filterTableSchema(crudSchema) allSchemas.tableColumns = tableColumns || [] - const formSchema = filterFormSchema(crudSchema, allSchemas) + const formSchema = filterFormSchema(crudSchema) allSchemas.formSchema = formSchema const detailSchema = filterDescriptionsSchema(crudSchema) @@ -89,55 +72,26 @@ export const useCrudSchemas = ( } // 过滤 Search 结构 -const filterSearchSchema = (crudSchema: CrudSchema[], allSchemas: AllSchemas): FormSchema[] => { +const filterSearchSchema = (crudSchema: CrudSchema[]): FormSchema[] => { const searchSchema: FormSchema[] = [] + const length = crudSchema.length - // 获取字典列表队列 - const searchRequestTask: Array<() => Promise> = [] - - eachTree(crudSchema, (schemaItem: CrudSchema) => { + for (let i = 0; i < length; i++) { + const schemaItem = crudSchema[i] // 判断是否显示 if (schemaItem?.search?.show) { const searchSchemaItem = { - // 默认为 input - component: schemaItem.search.component || 'Input', - componentProps: {}, + component: schemaItem.search.component, ...schemaItem.search, - field: schemaItem?.search?.field || schemaItem.field, - label: schemaItem.search?.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 - ) - } - } - }) + field: schemaItem.field, + label: schemaItem.label } // 删除不必要的字段 delete searchSchemaItem.show - delete searchSchemaItem.dictName searchSchema.push(searchSchemaItem) } - }) - - for (const task of searchRequestTask) { - task() } return searchSchema @@ -166,56 +120,28 @@ const filterTableSchema = (crudSchema: CrudSchema[]): TableColumn[] => { } // 过滤 form 结构 -const filterFormSchema = (crudSchema: CrudSchema[], allSchemas: AllSchemas): FormSchema[] => { +const filterFormSchema = (crudSchema: CrudSchema[]): FormSchema[] => { const formSchema: FormSchema[] = [] + const length = crudSchema.length - // 获取字典列表队列 - const formRequestTask: Array<() => Promise> = [] - - eachTree(crudSchema, (schemaItem: CrudSchema) => { + for (let i = 0; i < length; i++) { + const formItem = crudSchema[i] // 判断是否显示 - if (schemaItem?.form?.show !== false) { + if (formItem?.form?.show) { const formSchemaItem = { - // 默认为 input - component: schemaItem?.form?.component || 'Input', - componentProps: {}, - ...schemaItem.form, - 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 - ) - } - } - }) + component: formItem.form.component, + ...formItem.form, + field: formItem.field, + label: formItem.label } // 删除不必要的字段 delete formSchemaItem.show - delete formSchemaItem.dictName formSchema.push(formSchemaItem) } - }) - - for (const task of formRequestTask) { - task() } + return formSchema } @@ -241,15 +167,3 @@ const filterDescriptionsSchema = (crudSchema: CrudSchema[]): 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 - }) -} diff --git a/src/hooks/web/useTable.ts b/src/hooks/web/useTable.ts index e9cfad5..dc53872 100644 --- a/src/hooks/web/useTable.ts +++ b/src/hooks/web/useTable.ts @@ -1,7 +1,10 @@ +import { useI18n } from '@/hooks/web/useI18n' 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' +const { t } = useI18n() + interface UseTableConfig { /** * 是否初始化的时候请求一次 @@ -11,6 +14,7 @@ interface UseTableConfig { list: any[] total: number }> + fetchDelApi?: () => Promise } export const useTable = (config: UseTableConfig) => { @@ -68,24 +72,6 @@ export const useTable = (config: UseTableConfig) => { 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 = { /** * 获取表单数据 @@ -154,7 +140,7 @@ export const useTable = (config: UseTableConfig) => { refresh: () => { methods.getList() - } + }, // sortableChange: (e: any) => { // console.log('sortableChange', e) @@ -162,32 +148,35 @@ export const useTable = (config: UseTableConfig) => { // dataList.value.splice(newIndex, 0, dataList.value.splice(oldIndex, 1)[0]) // // to do something // } - // // 删除数据 - // delList: async (ids: string[] | number[], multiple: boolean, message = true) => { - // const tableRef = await getTable() - // if (multiple) { - // if (!tableRef?.selections.length) { - // ElMessage.warning(t('common.delNoData')) - // return - // } - // } else { - // if (!tableObject.currentRow) { - // ElMessage.warning(t('common.delNoData')) - // return - // } - // } - // if (message) { - // ElMessageBox.confirm(t('common.delMessage'), t('common.delWarning'), { - // confirmButtonText: t('common.delOk'), - // cancelButtonText: t('common.delCancel'), - // type: 'warning' - // }).then(async () => { - // await delData(ids) - // }) - // } else { - // await delData(ids) - // } - // } + // 删除数据 + delList: async (idsLength: number) => { + const { fetchDelApi } = config + if (!fetchDelApi) { + console.warn('fetchDelApi is undefined') + return + } + ElMessageBox.confirm(t('common.delMessage'), t('common.delWarning'), { + confirmButtonText: t('common.delOk'), + cancelButtonText: t('common.delCancel'), + type: 'warning' + }).then(async () => { + const res = await fetchDelApi() + if (res) { + ElMessage.success(t('common.delSuccess')) + + // 计算出临界点 + const current = + unref(total) % unref(pageSize) === idsLength || unref(pageSize) === 1 + ? unref(currentPage) > 1 + ? unref(currentPage) - 1 + : unref(currentPage) + : unref(currentPage) + + currentPage.value = current + methods.getList() + } + }) + } } return { diff --git a/src/router/index.ts b/src/router/index.ts index 5c22c16..a0f63cb 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -409,74 +409,74 @@ export const asyncRouterMap: AppRouteRecordRaw[] = [ } ] }, - // { - // 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: '/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, diff --git a/src/views/Example/Dialog/ExampleDialog.vue b/src/views/Example/Dialog/ExampleDialog.vue index 2024a4e..728d967 100644 --- a/src/views/Example/Dialog/ExampleDialog.vue +++ b/src/views/Example/Dialog/ExampleDialog.vue @@ -1,10 +1,10 @@ -