Commit 45a9a5a356f782da5c5c9227da338eb01f262e08
1 parent
6beac96b
feat: add crud api
Showing
1 changed file
with
69 additions
and
4 deletions
yudao-ui-admin-vue3/src/hooks/web/useCrudSchemas.ts
| 1 | import { reactive } from 'vue' | 1 | import { reactive } from 'vue' |
| 2 | +import { AxiosPromise } from 'axios' | ||
| 3 | +import { findIndex } from '@/utils' | ||
| 2 | import { eachTree, treeMap, filter } from '@/utils/tree' | 4 | import { eachTree, treeMap, filter } from '@/utils/tree' |
| 3 | import { getBoolDictOptions, getDictOptions, getIntDictOptions } from '@/utils/dict' | 5 | import { getBoolDictOptions, getDictOptions, getIntDictOptions } from '@/utils/dict' |
| 6 | +import { useI18n } from '@/hooks/web/useI18n' | ||
| 4 | import { FormSchema } from '@/types/form' | 7 | import { FormSchema } from '@/types/form' |
| 5 | import { TableColumn } from '@/types/table' | 8 | import { TableColumn } from '@/types/table' |
| 6 | import { DescriptionsSchema } from '@/types/descriptions' | 9 | import { DescriptionsSchema } from '@/types/descriptions' |
| @@ -23,6 +26,8 @@ export type CrudSchema = Omit<TableColumn, 'children'> & { | @@ -23,6 +26,8 @@ export type CrudSchema = Omit<TableColumn, 'children'> & { | ||
| 23 | type CrudSearchParams = { | 26 | type CrudSearchParams = { |
| 24 | // 是否显示在查询项 | 27 | // 是否显示在查询项 |
| 25 | show?: boolean | 28 | show?: boolean |
| 29 | + // 接口 | ||
| 30 | + api?: () => Promise<any> | ||
| 26 | } & Omit<FormSchema, 'field'> | 31 | } & Omit<FormSchema, 'field'> |
| 27 | 32 | ||
| 28 | type CrudTableParams = { | 33 | type CrudTableParams = { |
| @@ -33,6 +38,8 @@ type CrudTableParams = { | @@ -33,6 +38,8 @@ type CrudTableParams = { | ||
| 33 | type CrudFormParams = { | 38 | type CrudFormParams = { |
| 34 | // 是否显示表单项 | 39 | // 是否显示表单项 |
| 35 | show?: boolean | 40 | show?: boolean |
| 41 | + // 接口 | ||
| 42 | + api?: () => Promise<any> | ||
| 36 | } & Omit<FormSchema, 'field'> | 43 | } & Omit<FormSchema, 'field'> |
| 37 | 44 | ||
| 38 | type CrudDescriptionsParams = { | 45 | type CrudDescriptionsParams = { |
| @@ -47,6 +54,8 @@ interface AllSchemas { | @@ -47,6 +54,8 @@ interface AllSchemas { | ||
| 47 | detailSchema: DescriptionsSchema[] | 54 | detailSchema: DescriptionsSchema[] |
| 48 | } | 55 | } |
| 49 | 56 | ||
| 57 | +const { t } = useI18n() | ||
| 58 | + | ||
| 50 | // 过滤所有结构 | 59 | // 过滤所有结构 |
| 51 | export const useCrudSchemas = ( | 60 | export const useCrudSchemas = ( |
| 52 | crudSchema: CrudSchema[] | 61 | crudSchema: CrudSchema[] |
| @@ -61,13 +70,13 @@ export const useCrudSchemas = ( | @@ -61,13 +70,13 @@ export const useCrudSchemas = ( | ||
| 61 | detailSchema: [] | 70 | detailSchema: [] |
| 62 | }) | 71 | }) |
| 63 | 72 | ||
| 64 | - const searchSchema = filterSearchSchema(crudSchema) | 73 | + const searchSchema = filterSearchSchema(crudSchema, allSchemas) |
| 65 | allSchemas.searchSchema = searchSchema || [] | 74 | allSchemas.searchSchema = searchSchema || [] |
| 66 | 75 | ||
| 67 | const tableColumns = filterTableSchema(crudSchema) | 76 | const tableColumns = filterTableSchema(crudSchema) |
| 68 | allSchemas.tableColumns = tableColumns || [] | 77 | allSchemas.tableColumns = tableColumns || [] |
| 69 | 78 | ||
| 70 | - const formSchema = filterFormSchema(crudSchema) | 79 | + const formSchema = filterFormSchema(crudSchema, allSchemas) |
| 71 | allSchemas.formSchema = formSchema | 80 | allSchemas.formSchema = formSchema |
| 72 | 81 | ||
| 73 | const detailSchema = filterDescriptionsSchema(crudSchema) | 82 | const detailSchema = filterDescriptionsSchema(crudSchema) |
| @@ -79,9 +88,11 @@ export const useCrudSchemas = ( | @@ -79,9 +88,11 @@ export const useCrudSchemas = ( | ||
| 79 | } | 88 | } |
| 80 | 89 | ||
| 81 | // 过滤 Search 结构 | 90 | // 过滤 Search 结构 |
| 82 | -const filterSearchSchema = (crudSchema: CrudSchema[]): FormSchema[] => { | 91 | +const filterSearchSchema = (crudSchema: CrudSchema[], allSchemas: AllSchemas): FormSchema[] => { |
| 83 | const searchSchema: FormSchema[] = [] | 92 | const searchSchema: FormSchema[] = [] |
| 84 | 93 | ||
| 94 | + // 获取字典列表队列 | ||
| 95 | + const searchRequestTask: Array<() => Promise<void>> = [] | ||
| 85 | eachTree(crudSchema, (schemaItem: CrudSchema) => { | 96 | eachTree(crudSchema, (schemaItem: CrudSchema) => { |
| 86 | // 判断是否显示 | 97 | // 判断是否显示 |
| 87 | if (schemaItem?.isSearch || schemaItem.search?.show) { | 98 | if (schemaItem?.isSearch || schemaItem.search?.show) { |
| @@ -107,12 +118,31 @@ const filterSearchSchema = (crudSchema: CrudSchema[]): FormSchema[] => { | @@ -107,12 +118,31 @@ const filterSearchSchema = (crudSchema: CrudSchema[]): FormSchema[] => { | ||
| 107 | field: schemaItem.field, | 118 | field: schemaItem.field, |
| 108 | label: schemaItem.search?.label || schemaItem.label | 119 | label: schemaItem.search?.label || schemaItem.label |
| 109 | } | 120 | } |
| 121 | + if (searchSchemaItem.api) { | ||
| 122 | + searchRequestTask.push(async () => { | ||
| 123 | + const res = await (searchSchemaItem.api as () => AxiosPromise)() | ||
| 124 | + if (res) { | ||
| 125 | + const index = findIndex(allSchemas.searchSchema, (v: FormSchema) => { | ||
| 126 | + return v.field === searchSchemaItem.field | ||
| 127 | + }) | ||
| 128 | + if (index !== -1) { | ||
| 129 | + allSchemas.searchSchema[index]!.componentProps!.options = filterOptions( | ||
| 130 | + res, | ||
| 131 | + searchSchemaItem.componentProps.optionsAlias?.labelField | ||
| 132 | + ) | ||
| 133 | + } | ||
| 134 | + } | ||
| 135 | + }) | ||
| 136 | + } | ||
| 110 | // 删除不必要的字段 | 137 | // 删除不必要的字段 |
| 111 | delete searchSchemaItem.show | 138 | delete searchSchemaItem.show |
| 112 | 139 | ||
| 113 | searchSchema.push(searchSchemaItem) | 140 | searchSchema.push(searchSchemaItem) |
| 114 | } | 141 | } |
| 115 | }) | 142 | }) |
| 143 | + for (const task of searchRequestTask) { | ||
| 144 | + task() | ||
| 145 | + } | ||
| 116 | return searchSchema | 146 | return searchSchema |
| 117 | } | 147 | } |
| 118 | 148 | ||
| @@ -139,9 +169,12 @@ const filterTableSchema = (crudSchema: CrudSchema[]): TableColumn[] => { | @@ -139,9 +169,12 @@ const filterTableSchema = (crudSchema: CrudSchema[]): TableColumn[] => { | ||
| 139 | } | 169 | } |
| 140 | 170 | ||
| 141 | // 过滤 form 结构 | 171 | // 过滤 form 结构 |
| 142 | -const filterFormSchema = (crudSchema: CrudSchema[]): FormSchema[] => { | 172 | +const filterFormSchema = (crudSchema: CrudSchema[], allSchemas: AllSchemas): FormSchema[] => { |
| 143 | const formSchema: FormSchema[] = [] | 173 | const formSchema: FormSchema[] = [] |
| 144 | 174 | ||
| 175 | + // 获取字典列表队列 | ||
| 176 | + const formRequestTask: Array<() => Promise<void>> = [] | ||
| 177 | + | ||
| 145 | eachTree(crudSchema, (schemaItem: CrudSchema) => { | 178 | eachTree(crudSchema, (schemaItem: CrudSchema) => { |
| 146 | // 判断是否显示 | 179 | // 判断是否显示 |
| 147 | if (schemaItem?.isForm !== false && schemaItem?.form?.show !== false) { | 180 | if (schemaItem?.isForm !== false && schemaItem?.form?.show !== false) { |
| @@ -185,6 +218,23 @@ const filterFormSchema = (crudSchema: CrudSchema[]): FormSchema[] => { | @@ -185,6 +218,23 @@ const filterFormSchema = (crudSchema: CrudSchema[]): FormSchema[] => { | ||
| 185 | label: schemaItem.form?.label || schemaItem.label | 218 | label: schemaItem.form?.label || schemaItem.label |
| 186 | } | 219 | } |
| 187 | 220 | ||
| 221 | + if (formSchemaItem.api) { | ||
| 222 | + formRequestTask.push(async () => { | ||
| 223 | + const res = await (formSchemaItem.api as () => AxiosPromise)() | ||
| 224 | + if (res) { | ||
| 225 | + const index = findIndex(allSchemas.formSchema, (v: FormSchema) => { | ||
| 226 | + return v.field === formSchemaItem.field | ||
| 227 | + }) | ||
| 228 | + if (index !== -1) { | ||
| 229 | + allSchemas.formSchema[index]!.componentProps!.options = filterOptions( | ||
| 230 | + res, | ||
| 231 | + formSchemaItem.componentProps.optionsAlias?.labelField | ||
| 232 | + ) | ||
| 233 | + } | ||
| 234 | + } | ||
| 235 | + }) | ||
| 236 | + } | ||
| 237 | + | ||
| 188 | // 删除不必要的字段 | 238 | // 删除不必要的字段 |
| 189 | delete formSchemaItem.show | 239 | delete formSchemaItem.show |
| 190 | 240 | ||
| @@ -192,6 +242,9 @@ const filterFormSchema = (crudSchema: CrudSchema[]): FormSchema[] => { | @@ -192,6 +242,9 @@ const filterFormSchema = (crudSchema: CrudSchema[]): FormSchema[] => { | ||
| 192 | } | 242 | } |
| 193 | }) | 243 | }) |
| 194 | 244 | ||
| 245 | + for (const task of formRequestTask) { | ||
| 246 | + task() | ||
| 247 | + } | ||
| 195 | return formSchema | 248 | return formSchema |
| 196 | } | 249 | } |
| 197 | 250 | ||
| @@ -225,3 +278,15 @@ const filterDescriptionsSchema = (crudSchema: CrudSchema[]): DescriptionsSchema[ | @@ -225,3 +278,15 @@ const filterDescriptionsSchema = (crudSchema: CrudSchema[]): DescriptionsSchema[ | ||
| 225 | 278 | ||
| 226 | return descriptionsSchema | 279 | return descriptionsSchema |
| 227 | } | 280 | } |
| 281 | + | ||
| 282 | +// 给options添加国际化 | ||
| 283 | +const filterOptions = (options: Recordable, labelField?: string) => { | ||
| 284 | + return options.map((v: Recordable) => { | ||
| 285 | + if (labelField) { | ||
| 286 | + v['labelField'] = t(v.labelField) | ||
| 287 | + } else { | ||
| 288 | + v['label'] = t(v.label) | ||
| 289 | + } | ||
| 290 | + return v | ||
| 291 | + }) | ||
| 292 | +} |