import{o as n,c as s,a}from"./app.c38d1953.js";const t='{"title":"useCrudSchemas","description":"","frontmatter":{},"headers":[{"level":2,"title":"用法","slug":"用法"},{"level":3,"title":"参数介绍","slug":"参数介绍"},{"level":2,"title":"CrudSchema","slug":"crudschema"}],"relativePath":"hooks/useCrudSchemas.md","lastUpdated":1721206001124}',p={},o=a('

useCrudSchemas

统一生成 Search 、 Form 、 Descriptions 、 Table 组件所需要的数据结构。

由于以上四个组件都需要 Sechema 或者 columns 的字段，如果每个组件都写一遍的话，会造成大量重复代码，所以提供 useCrudSchemas 来进行统一的数据生成。

useCrudSchemas 位于 src/hooks/web/useCrudSchemas.ts

用法

TIP

如果不需要某个字段，如 formSchema 不需要 field 为 index 的字段，可以使用 form: { hidden: true } 进行过滤，其他组件同理。

Search 是基于 Form 进行二次封装的，所以 Search 支持的参数 Form 也都支持。

search 与 form 字段，可以传入 dictName 来获取全局的字典数据，也可以传入 api 来获取接口数据，如果使用 api ，需要主动 return 数据。

如果想看更复杂点的例子，请在线预览

<script setup lang="ts">\nimport { CrudSchema, useCrudSchemas } from '@/hooks/web/useCrudSchemas'\n\nconst crudSchemas = reactive<CrudSchema[]>([\n  {\n    field: 'index',\n    label: t('tableDemo.index'),\n    type: 'index',\n    form: {\n      hidden: true\n    },\n    detail: {\n      hidden: true\n    }\n  },\n  {\n    field: 'title',\n    label: t('tableDemo.title'),\n    search: {\n      show: true\n    },\n    form: {\n      colProps: {\n        span: 24\n      }\n    },\n    detail: {\n      span: 24\n    }\n  },\n  {\n    field: 'author',\n    label: t('tableDemo.author')\n  },\n  {\n    field: 'display_time',\n    label: t('tableDemo.displayTime'),\n    form: {\n      component: 'DatePicker',\n      componentProps: {\n        type: 'datetime',\n        valueFormat: 'YYYY-MM-DD HH:mm:ss'\n      }\n    }\n  },\n  {\n    field: 'importance',\n    label: t('tableDemo.importance'),\n    formatter: (_: Recordable, __: TableColumn, cellValue: number) => {\n      return h(\n        ElTag,\n        {\n          type: cellValue === 1 ? 'success' : cellValue === 2 ? 'warning' : 'danger'\n        },\n        () =>\n          cellValue === 1\n            ? t('tableDemo.important')\n            : cellValue === 2\n            ? t('tableDemo.good')\n            : t('tableDemo.commonly')\n      )\n    },\n    form: {\n      component: 'Select',\n      componentProps: {\n        options: [\n          {\n            label: '重要',\n            value: 3\n          },\n          {\n            label: '良好',\n            value: 2\n          },\n          {\n            label: '一般',\n            value: 1\n          }\n        ]\n      }\n    }\n  },\n  {\n    field: 'pageviews',\n    label: t('tableDemo.pageviews'),\n    form: {\n      component: 'InputNumber',\n      value: 0\n    }\n  },\n  {\n    field: 'content',\n    label: t('exampleDemo.content'),\n    table: {\n      hidden: true\n    },\n    form: {\n      component: 'Editor',\n      colProps: {\n        span: 24\n      }\n    },\n    detail: {\n      span: 24\n    }\n  },\n  {\n    field: 'action',\n    width: '260px',\n    label: t('tableDemo.action'),\n    form: {\n      hidden: true\n    },\n    detail: {\n      hidden: true\n    }\n  }\n])\n\nconst { allSchemas } = useCrudSchemas(crudSchemas)\n</script>\n\n

参数介绍

const { allSchemas } = useCrudSchemas(crudSchemas)\n

allSchemas

allSchemas 存放着四个组件所需要的数据结果

allSchemas.fromSchema

Form 组件的 Sechema

allSchemas.searchSchema

Search 组件的 Sechema

allSchemas.detailSchema

Descriptions 组件的 Sechema

allSchemas.tableColumns

Table 组件的 columns

CrudSchema

属性说明类型可选值默认值
search用于设置 searchSchemaCrudSearchParams--
table用于设置 tableColumnsCrudTableParams--
form用于设置 fromSchemaCrudFormParams--
detail用于设置 DescriptionsSchemaCrudDescriptionsParams--
children如果是 Table 组件，则可能会有多表头的情况存在CrudSchema[]--
',24);p.render=function(a,t,p,e,c,l){return n(),s("div",null,[o])};export default p;export{t as __pageData};