useCrudSchemas.ts 5.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194
  1. import { reactive } from 'vue'
  2. import { eachTree, treeMap, filter } from '@/utils/tree'
  3. import { getIntDictOptions } from '@/utils/dict'
  4. import { FormSchema } from '@/types/form'
  5. import { TableColumn } from '@/types/table'
  6. import { DescriptionsSchema } from '@/types/descriptions'
  7. export type CrudSchema = Omit<TableColumn, 'children'> & {
  8. search?: CrudSearchParams
  9. table?: CrudTableParams
  10. form?: CrudFormParams
  11. detail?: CrudDescriptionsParams
  12. children?: CrudSchema[]
  13. dictType?: string
  14. }
  15. type CrudSearchParams = {
  16. // 是否显示在查询项
  17. show?: boolean
  18. } & Omit<FormSchema, 'field'>
  19. type CrudTableParams = {
  20. // 是否显示表头
  21. show?: boolean
  22. } & Omit<FormSchema, 'field'>
  23. type CrudFormParams = {
  24. // 是否显示表单项
  25. show?: boolean
  26. } & Omit<FormSchema, 'field'>
  27. type CrudDescriptionsParams = {
  28. // 是否显示表单项
  29. show?: boolean
  30. } & Omit<DescriptionsSchema, 'field'>
  31. interface AllSchemas {
  32. searchSchema: FormSchema[]
  33. tableColumns: TableColumn[]
  34. formSchema: FormSchema[]
  35. detailSchema: DescriptionsSchema[]
  36. }
  37. // 过滤所有结构
  38. export const useCrudSchemas = (
  39. crudSchema: CrudSchema[]
  40. ): {
  41. allSchemas: AllSchemas
  42. } => {
  43. // 所有结构数据
  44. const allSchemas = reactive<AllSchemas>({
  45. searchSchema: [],
  46. tableColumns: [],
  47. formSchema: [],
  48. detailSchema: []
  49. })
  50. const searchSchema = filterSearchSchema(crudSchema)
  51. allSchemas.searchSchema = searchSchema || []
  52. const tableColumns = filterTableSchema(crudSchema)
  53. allSchemas.tableColumns = tableColumns || []
  54. const formSchema = filterFormSchema(crudSchema)
  55. allSchemas.formSchema = formSchema
  56. const detailSchema = filterDescriptionsSchema(crudSchema)
  57. allSchemas.detailSchema = detailSchema
  58. return {
  59. allSchemas
  60. }
  61. }
  62. // 过滤 Search 结构
  63. const filterSearchSchema = (crudSchema: CrudSchema[]): FormSchema[] => {
  64. const searchSchema: FormSchema[] = []
  65. eachTree(crudSchema, (schemaItem: CrudSchema) => {
  66. // 判断是否显示
  67. if (schemaItem?.search?.show) {
  68. let component = schemaItem?.search?.component || 'Input'
  69. const options: ComponentOptions[] = []
  70. let comonentProps = {}
  71. if (schemaItem.dictType) {
  72. const allOptions: ComponentOptions = { label: '全部', value: '' }
  73. options.push(allOptions)
  74. getIntDictOptions(schemaItem.dictType).forEach((dict) => {
  75. options.push(dict)
  76. })
  77. comonentProps = {
  78. options: options
  79. }
  80. if (!schemaItem.search.component) component = 'Select'
  81. }
  82. const searchSchemaItem = {
  83. // 默认为 input
  84. component: component,
  85. componentProps: comonentProps,
  86. ...schemaItem.search,
  87. field: schemaItem.field,
  88. label: schemaItem.search?.label || schemaItem.label
  89. }
  90. // 删除不必要的字段
  91. delete searchSchemaItem.show
  92. searchSchema.push(searchSchemaItem)
  93. }
  94. })
  95. return searchSchema
  96. }
  97. // 过滤 table 结构
  98. const filterTableSchema = (crudSchema: CrudSchema[]): TableColumn[] => {
  99. const tableColumns = treeMap<CrudSchema>(crudSchema, {
  100. conversion: (schema: CrudSchema) => {
  101. if (schema?.table?.show !== false) {
  102. return {
  103. ...schema.table,
  104. ...schema
  105. }
  106. }
  107. }
  108. })
  109. // 第一次过滤会有 undefined 所以需要二次过滤
  110. return filter<TableColumn>(tableColumns as TableColumn[], (data) => {
  111. if (data.children === void 0) {
  112. delete data.children
  113. }
  114. return !!data.field
  115. })
  116. }
  117. // 过滤 form 结构
  118. const filterFormSchema = (crudSchema: CrudSchema[]): FormSchema[] => {
  119. const formSchema: FormSchema[] = []
  120. eachTree(crudSchema, (schemaItem: CrudSchema) => {
  121. // 判断是否显示
  122. if (schemaItem?.form?.show !== false) {
  123. let component = schemaItem?.form?.component || 'Input'
  124. const options: ComponentOptions[] = []
  125. let comonentProps = {}
  126. if (schemaItem.dictType) {
  127. getIntDictOptions(schemaItem.dictType).forEach((dict) => {
  128. options.push(dict)
  129. })
  130. comonentProps = {
  131. options: options
  132. }
  133. if (!(schemaItem.form && schemaItem.form.component)) component = 'Select'
  134. }
  135. const formSchemaItem = {
  136. // 默认为 input
  137. component: component,
  138. componentProps: comonentProps,
  139. ...schemaItem.form,
  140. field: schemaItem.field,
  141. label: schemaItem.form?.label || schemaItem.label
  142. }
  143. // 删除不必要的字段
  144. delete formSchemaItem.show
  145. formSchema.push(formSchemaItem)
  146. }
  147. })
  148. return formSchema
  149. }
  150. // 过滤 descriptions 结构
  151. const filterDescriptionsSchema = (crudSchema: CrudSchema[]): DescriptionsSchema[] => {
  152. const descriptionsSchema: FormSchema[] = []
  153. eachTree(crudSchema, (schemaItem: CrudSchema) => {
  154. // 判断是否显示
  155. if (schemaItem?.detail?.show !== false) {
  156. const descriptionsSchemaItem = {
  157. ...schemaItem.detail,
  158. field: schemaItem.field,
  159. label: schemaItem.detail?.label || schemaItem.label
  160. }
  161. // 删除不必要的字段
  162. delete descriptionsSchemaItem.show
  163. descriptionsSchema.push(descriptionsSchemaItem)
  164. }
  165. })
  166. return descriptionsSchema
  167. }