CRUD 组件

友情提示：

CRUD 组件，比较适合开发简单的 CRUD 功能。如果是复杂的功能，使用起来会比较困难。所以一般情况下，我们还是建议使用 Element Plus 的原生组件。

管理后台的功能，一般就是 CRUD 增删改查，可以拆分 3 个部分：“列表”、“新增/修改”、“详情”，如下图所示：

部分	组件	示例
列表	Search + Table
新增 / 修改	Form
详情	Descriptions

1. 基础组件

涉及到 4 个前端基础组件，如下所示：

组件	文档
Search	查询组件
Table	表格组件
Form	表单组件
Descriptions	描述组件

2. CRUD 组件

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

① useCrudSchemas：位于 src/hooks/web/useCrudSchemas.ts 内

② useCrudSchemas 可以理解成一个 JSON 配置，示例如下：

useCrudSchemas 示例

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