useCrudSchemas.ts 5.0 KB

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