feat: add crud api

This commit is contained in:
xingyu4j 2022-12-14 14:17:41 +08:00
parent 6beac96b44
commit 45a9a5a356

View File

@ -1,6 +1,9 @@
import { reactive } from 'vue' import { reactive } from 'vue'
import { AxiosPromise } from 'axios'
import { findIndex } from '@/utils'
import { eachTree, treeMap, filter } from '@/utils/tree' import { eachTree, treeMap, filter } from '@/utils/tree'
import { getBoolDictOptions, getDictOptions, getIntDictOptions } from '@/utils/dict' import { getBoolDictOptions, getDictOptions, getIntDictOptions } from '@/utils/dict'
import { useI18n } from '@/hooks/web/useI18n'
import { FormSchema } from '@/types/form' import { FormSchema } from '@/types/form'
import { TableColumn } from '@/types/table' import { TableColumn } from '@/types/table'
import { DescriptionsSchema } from '@/types/descriptions' import { DescriptionsSchema } from '@/types/descriptions'
@ -23,6 +26,8 @@ export type CrudSchema = Omit<TableColumn, 'children'> & {
type CrudSearchParams = { type CrudSearchParams = {
// 是否显示在查询项 // 是否显示在查询项
show?: boolean show?: boolean
// 接口
api?: () => Promise<any>
} & Omit<FormSchema, 'field'> } & Omit<FormSchema, 'field'>
type CrudTableParams = { type CrudTableParams = {
@ -33,6 +38,8 @@ type CrudTableParams = {
type CrudFormParams = { type CrudFormParams = {
// 是否显示表单项 // 是否显示表单项
show?: boolean show?: boolean
// 接口
api?: () => Promise<any>
} & Omit<FormSchema, 'field'> } & Omit<FormSchema, 'field'>
type CrudDescriptionsParams = { type CrudDescriptionsParams = {
@ -47,6 +54,8 @@ interface AllSchemas {
detailSchema: DescriptionsSchema[] detailSchema: DescriptionsSchema[]
} }
const { t } = useI18n()
// 过滤所有结构 // 过滤所有结构
export const useCrudSchemas = ( export const useCrudSchemas = (
crudSchema: CrudSchema[] crudSchema: CrudSchema[]
@ -61,13 +70,13 @@ export const useCrudSchemas = (
detailSchema: [] detailSchema: []
}) })
const searchSchema = filterSearchSchema(crudSchema) const searchSchema = filterSearchSchema(crudSchema, allSchemas)
allSchemas.searchSchema = searchSchema || [] allSchemas.searchSchema = searchSchema || []
const tableColumns = filterTableSchema(crudSchema) const tableColumns = filterTableSchema(crudSchema)
allSchemas.tableColumns = tableColumns || [] allSchemas.tableColumns = tableColumns || []
const formSchema = filterFormSchema(crudSchema) const formSchema = filterFormSchema(crudSchema, allSchemas)
allSchemas.formSchema = formSchema allSchemas.formSchema = formSchema
const detailSchema = filterDescriptionsSchema(crudSchema) const detailSchema = filterDescriptionsSchema(crudSchema)
@ -79,9 +88,11 @@ export const useCrudSchemas = (
} }
// 过滤 Search 结构 // 过滤 Search 结构
const filterSearchSchema = (crudSchema: CrudSchema[]): FormSchema[] => { const filterSearchSchema = (crudSchema: CrudSchema[], allSchemas: AllSchemas): FormSchema[] => {
const searchSchema: FormSchema[] = [] const searchSchema: FormSchema[] = []
// 获取字典列表队列
const searchRequestTask: Array<() => Promise<void>> = []
eachTree(crudSchema, (schemaItem: CrudSchema) => { eachTree(crudSchema, (schemaItem: CrudSchema) => {
// 判断是否显示 // 判断是否显示
if (schemaItem?.isSearch || schemaItem.search?.show) { if (schemaItem?.isSearch || schemaItem.search?.show) {
@ -107,12 +118,31 @@ const filterSearchSchema = (crudSchema: CrudSchema[]): FormSchema[] => {
field: schemaItem.field, field: schemaItem.field,
label: schemaItem.search?.label || schemaItem.label label: schemaItem.search?.label || schemaItem.label
} }
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
searchSchema.push(searchSchemaItem) searchSchema.push(searchSchemaItem)
} }
}) })
for (const task of searchRequestTask) {
task()
}
return searchSchema return searchSchema
} }
@ -139,9 +169,12 @@ const filterTableSchema = (crudSchema: CrudSchema[]): TableColumn[] => {
} }
// 过滤 form 结构 // 过滤 form 结构
const filterFormSchema = (crudSchema: CrudSchema[]): FormSchema[] => { const filterFormSchema = (crudSchema: CrudSchema[], allSchemas: AllSchemas): FormSchema[] => {
const formSchema: FormSchema[] = [] const formSchema: FormSchema[] = []
// 获取字典列表队列
const formRequestTask: Array<() => Promise<void>> = []
eachTree(crudSchema, (schemaItem: CrudSchema) => { eachTree(crudSchema, (schemaItem: CrudSchema) => {
// 判断是否显示 // 判断是否显示
if (schemaItem?.isForm !== false && schemaItem?.form?.show !== false) { if (schemaItem?.isForm !== false && schemaItem?.form?.show !== false) {
@ -185,6 +218,23 @@ const filterFormSchema = (crudSchema: CrudSchema[]): FormSchema[] => {
label: schemaItem.form?.label || schemaItem.label label: schemaItem.form?.label || schemaItem.label
} }
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
@ -192,6 +242,9 @@ const filterFormSchema = (crudSchema: CrudSchema[]): FormSchema[] => {
} }
}) })
for (const task of formRequestTask) {
task()
}
return formSchema return formSchema
} }
@ -225,3 +278,15 @@ 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
})
}