useCrudSchemas

统一生成 SearchFormDescriptionsTable 组件所需要的数据结构。

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

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

用法

TIP

如果不需要某个字段,如 formSchema 不需要 fieldindex 的字段,可以使用 form: { show: false } 进行过滤,其他组件同理。

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

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

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

<script setup lang="ts">
import { CrudSchema, useCrudSchemas } from '@/hooks/web/useCrudSchemas'

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

const { allSchemas } = useCrudSchemas(crudSchemas)
</script>

参数介绍

const { allSchemas } = useCrudSchemas(crudSchemas)

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[]--