useVxeCrudSchemas.ts 6.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251
  1. import { DescriptionsSchema } from '@/types/descriptions'
  2. import { getIntDictOptions } from '@/utils/dict'
  3. import { reactive } from 'vue'
  4. import {
  5. FormItemRenderOptions,
  6. VxeFormItemProps,
  7. VxeGridPropTypes,
  8. VxeTableDefines
  9. } from 'vxe-table'
  10. import { eachTree } from 'xe-utils'
  11. import { useI18n } from '@/hooks/web/useI18n'
  12. import { VxeTableColumn } from '@/types/table'
  13. export type VxeCrudSchema = Omit<VxeTableColumn, 'children'> & {
  14. field: string
  15. title?: string
  16. search?: CrudSearchParams
  17. table?: CrudTableParams
  18. form?: CrudFormParams
  19. detail?: CrudDescriptionsParams
  20. print?: CrudPrintParams
  21. children?: VxeCrudSchema[]
  22. dictType?: string
  23. }
  24. type CrudSearchParams = {
  25. // 是否显示在查询项
  26. show?: boolean
  27. } & Omit<VxeFormItemProps, 'field'>
  28. type CrudTableParams = {
  29. // 是否显示表头
  30. show?: boolean
  31. } & Omit<VxeTableDefines.ColumnOptions, 'field'>
  32. type CrudFormParams = {
  33. // 是否显示表单项
  34. show?: boolean
  35. } & Omit<VxeFormItemProps, 'field'>
  36. type CrudDescriptionsParams = {
  37. // 是否显示表单项
  38. show?: boolean
  39. } & Omit<DescriptionsSchema, 'field'>
  40. type CrudPrintParams = {
  41. // 是否显示表单项
  42. show?: boolean
  43. } & Omit<VxeTableDefines.ColumnInfo[], 'field'>
  44. interface VxeAllSchemas {
  45. searchSchema: VxeFormItemProps[]
  46. tableSchema: VxeGridPropTypes.Columns
  47. formSchema: VxeFormItemProps[]
  48. detailSchema: DescriptionsSchema[]
  49. printSchema: VxeTableDefines.ColumnInfo[]
  50. }
  51. // 过滤所有结构
  52. export const useVxeCrudSchemas = (
  53. crudSchema: VxeCrudSchema[]
  54. ): {
  55. allSchemas: VxeAllSchemas
  56. } => {
  57. // 所有结构数据
  58. const allSchemas = reactive<VxeAllSchemas>({
  59. searchSchema: [],
  60. tableSchema: [],
  61. formSchema: [],
  62. detailSchema: [],
  63. printSchema: []
  64. })
  65. const searchSchema = filterSearchSchema(crudSchema)
  66. allSchemas.searchSchema = searchSchema || []
  67. const tableSchema = filterTableSchema(crudSchema)
  68. allSchemas.tableSchema = tableSchema || []
  69. const formSchema = filterFormSchema(crudSchema)
  70. allSchemas.formSchema = formSchema
  71. const detailSchema = filterDescriptionsSchema(crudSchema)
  72. allSchemas.detailSchema = detailSchema
  73. const printSchema = filterPrintSchema(crudSchema)
  74. allSchemas.printSchema = printSchema
  75. return {
  76. allSchemas
  77. }
  78. }
  79. // 过滤 Search 结构
  80. const filterSearchSchema = (crudSchema: VxeCrudSchema[]): VxeFormItemProps[] => {
  81. const searchSchema: VxeFormItemProps[] = []
  82. const { t } = useI18n()
  83. eachTree(crudSchema, (schemaItem: VxeCrudSchema) => {
  84. // 判断是否显示
  85. if (schemaItem?.search?.show) {
  86. let itemRenderName = schemaItem?.search?.itemRender?.name || '$input'
  87. const options: any[] = []
  88. let itemRender: FormItemRenderOptions = {
  89. name: itemRenderName,
  90. props: { placeholder: t('common.inputText') }
  91. }
  92. if (schemaItem.dictType) {
  93. const allOptions = { label: '全部', value: '' }
  94. options.push(allOptions)
  95. getIntDictOptions(schemaItem.dictType).forEach((dict) => {
  96. options.push(dict)
  97. })
  98. itemRender.options = options
  99. if (!schemaItem.search.itemRender?.name) itemRenderName = '$select'
  100. itemRender = {
  101. name: itemRenderName,
  102. options: options,
  103. props: { placeholder: t('common.selectText') }
  104. }
  105. }
  106. const searchSchemaItem = {
  107. // 默认为 input
  108. span: 6,
  109. itemRender: itemRender,
  110. ...schemaItem.search,
  111. field: schemaItem.field,
  112. title: schemaItem.search?.title || schemaItem.title
  113. }
  114. // 删除不必要的字段
  115. delete searchSchemaItem.show
  116. searchSchema.push(searchSchemaItem)
  117. }
  118. })
  119. // 添加搜索按钮
  120. const buttons: VxeFormItemProps = {
  121. span: 24,
  122. align: 'center',
  123. collapseNode: true,
  124. itemRender: {
  125. name: '$buttons',
  126. children: [
  127. { props: { type: 'submit', content: t('common.query'), status: 'primary' } },
  128. { props: { type: 'reset', content: t('common.reset') } }
  129. ]
  130. }
  131. }
  132. searchSchema.push(buttons)
  133. return searchSchema
  134. }
  135. // 过滤 table 结构
  136. const filterTableSchema = (crudSchema: VxeCrudSchema[]): VxeGridPropTypes.Columns => {
  137. const tableSchema: VxeGridPropTypes.Columns = []
  138. eachTree(crudSchema, (schemaItem: VxeCrudSchema) => {
  139. // 判断是否显示
  140. if (schemaItem?.table?.show !== false) {
  141. const tableSchemaItem = {
  142. ...schemaItem.table,
  143. field: schemaItem.field,
  144. title: schemaItem.table?.title || schemaItem.title
  145. }
  146. // 删除不必要的字段
  147. delete tableSchemaItem.show
  148. tableSchema.push(tableSchemaItem)
  149. }
  150. })
  151. return tableSchema
  152. }
  153. // 过滤 form 结构
  154. const filterFormSchema = (crudSchema: VxeCrudSchema[]): VxeFormItemProps[] => {
  155. const formSchema: VxeFormItemProps[] = []
  156. const { t } = useI18n()
  157. eachTree(crudSchema, (schemaItem: VxeCrudSchema) => {
  158. // 判断是否显示
  159. if (schemaItem?.form?.show !== false) {
  160. let itemRenderName = schemaItem?.form?.itemRender?.name || '$input'
  161. let itemRender: FormItemRenderOptions = {
  162. name: itemRenderName,
  163. props: { placeholder: t('common.inputText') }
  164. }
  165. if (schemaItem.dictType) {
  166. if (!(schemaItem.form && schemaItem.form.itemRender?.name)) itemRenderName = '$select'
  167. itemRender = {
  168. name: itemRenderName,
  169. options: getIntDictOptions(schemaItem.dictType),
  170. props: { placeholder: t('common.selectText') }
  171. }
  172. }
  173. const formSchemaItem = {
  174. // 默认为 input
  175. itemRender: itemRender,
  176. ...schemaItem.form,
  177. span: schemaItem.form?.span || 12,
  178. field: schemaItem.field,
  179. title: schemaItem.form?.title || schemaItem.title
  180. }
  181. // 删除不必要的字段
  182. delete formSchemaItem.show
  183. formSchema.push(formSchemaItem)
  184. }
  185. })
  186. return formSchema
  187. }
  188. // 过滤 descriptions 结构
  189. const filterDescriptionsSchema = (crudSchema: VxeCrudSchema[]): DescriptionsSchema[] => {
  190. const descriptionsSchema: DescriptionsSchema[] = []
  191. eachTree(crudSchema, (schemaItem: VxeCrudSchema) => {
  192. // 判断是否显示
  193. if (schemaItem?.detail?.show !== false) {
  194. const descriptionsSchemaItem = {
  195. ...schemaItem.detail,
  196. field: schemaItem.field,
  197. label: schemaItem.detail?.label || schemaItem.title
  198. }
  199. // 删除不必要的字段
  200. delete descriptionsSchemaItem.show
  201. descriptionsSchema.push(descriptionsSchemaItem)
  202. }
  203. })
  204. return descriptionsSchema
  205. }
  206. // 过滤 打印 结构
  207. const filterPrintSchema = (crudSchema: VxeCrudSchema[]): any[] => {
  208. const printSchema: any[] = []
  209. eachTree(crudSchema, (schemaItem: VxeCrudSchema) => {
  210. // 判断是否显示
  211. if (schemaItem?.print?.show !== false) {
  212. const printSchemaItem = {
  213. field: schemaItem.field
  214. }
  215. printSchema.push(printSchemaItem)
  216. }
  217. })
  218. return printSchema
  219. }