ElCruPage CRU 编辑页面
<el-cru-page /> 组件是一个超级组件，它聚合了 <el-simple-page-header /> 和 <el-form-builder /> 两个组件，并提供了一些便捷的配置和功能。它主要用于常见的 CRU 编辑页面。
一般与业务侧的列表页 / 查询页配合：由路由或按钮进入本编辑页。仓库内 el-cru-index 尚在计划中，可直接自建列表 + <el-cru-page /> 路由。
页头常见为【返回】+ 标题 或 选项卡（无 title 时默认 申请信息 / 流程图）。【保存】【提交】（及可选【重置】） 由 ElFormBuilder 的 actions 经 portal-vue 落到页头右侧 ${uid}-actions，与 el-form-query 命名一致；并非插在头部组件内部写死的内容。若产品设计与此差异大，可改用 el-simple-page-header + el-form-builder 自行组合。
基础用法
只需要提供表单的 model、schema 和 submitHandler、saveHandler 即可，其他配置项使用默认值即可。
选项卡模式
在 headerConfig 中不配置 title（且不使用 #title）时，页头为选项卡布局；默认仍为 申请信息（value: '0'）与 流程图（value: '1'），可用 tabConfig / defaultTab 覆盖。
- 当
tab === defaultTab或tab为空（仅有标题、无选项卡状态）时：表单与#form-prepend/#form-append会包在同一PortalTarget内，名为${uid}-tab-${defaultTab}（与headerConfig.defaultTab/ 首项tabConfig解析一致）。 - 切换到其它 tab 时：主体区域只挂载空的
${uid}-tab-<当前 value>PortalTarget，不含表单；该 tab 的内容须在默认插槽取uid，使用Portal的to指向上述名称注入（见tabs示例）。
默认插槽参数：{ uid }（与 props.uid 或内部生成的 id 一致）。
说明
选项卡的自定义配置可以参考 <el-simple-page-header /> 组件的配置。
下面我们通过自定义选项卡配置来实现一个更加复杂的页面。
表单配置
组件内部封装 <el-form-builder /> 组件，它提供了表单布局、分组与自定义字段的能力。
说明
表单的配置项与 <el-form-builder /> 组件的配置项一致。
如何添加自定义内容
默认插槽
根级默认插槽仅暴露作用域参数 { uid }（实现上等价于将 uid 传给子树），适用于：
- 非默认 tab 下，向
${uid}-tab-*投递Portal内容； - 向页头
${uid}-actions扩展按钮（配合order，见ElSimplePageHeader/el-form-query约定）； - 向
ElFormBuilder已暴露的锚点命名（如${uid}-form-header、${uid}-<分组 field>-group-extra等）投递内容，详见 FormBuilder 与示例content。
如需 formRef / 表单 model 引用：请使用 v-model 绑定页面数据，或对 ElCruPage 使用 组件 ref，通过 defineExpose 访问（与下表 Expose 一致）；默认插槽不会传入 formRef / model。
页面状态
通过 formConfig.mode 传给 ElFormBuilder：edit（默认）、disabled、preview。详见 ElFormRenderer。
disabled 下若某字段 dependencies.disabled 对当前 model 求值为 false，该字段仍可编辑（只读页面临时放开个别项）。
loading
loading 为 true 时：根节点设置 data-ell-cru-page-loading="true"，表单区域容器使用 Element Plus v-loading（可作为页面级加载占位；与 formConfig 内其它配置无关）。
API
Props
| 属性名 | 描述 | 类型 |
|---|---|---|
modelValue | 表单数据，请使用 v-model | Record<string, unknown> |
uid | 与页头、ElFormBuilder 共用的实例 id，便于 portal 命名；未传时每挂载一次生成新 id（ulid），文档/联调建议固定传入 | string |
loading | 为 true 时根节点 data-ell-cru-page-loading，表单区 v-loading | boolean |
headerConfig | 透传 ElSimplePageHeader（内部的 uid 由本组件覆盖） | EllSimplePageHeaderProps |
formConfig | ElFormBuilder 配置，不含 modelValue、uid、actions 及三个 *Handler（由本组件注入） | 见类型 ElCruPageProps['formConfig'] |
toolbarActions | 要展示的默认按钮及顺序；默认 ['save','submit']（不含重置）；重复项去重 | ('reset' | 'save' | 'submit')[] |
submitHandler | 提交：校验通过后调用（未传时 ElFormBuilder 仍 emit('submit')） | (model, formRef) => void | Promise<void> |
saveHandler | 保存：不校验（未传时仍 emit('save')） | (model, formRef) => void | Promise<void> |
resetHandler | 若传入则覆盖 重置 默认行为（详见 ElFormBuilder） | (model, formRef) => void |
与 *Handler 的关系
toolbarActions决定是否生成对应内置action（Portal到${uid}-actions）。submit/save/reset的点击逻辑仍由submitHandler/saveHandler/resetHandler（及ElFormBuilder默认reset）处理。
Events
| 事件名 | 描述 |
|---|---|
update:modelValue | 表单数据变更 |
back | 页头返回 |
tabChange / tabChangeError | 选项卡切换（透传头部） |
submit / save | 校验通过后的提交、保存（载荷为当前 model 对象，透传 ElFormBuilder） |
reset | 重置（透传 ElFormBuilder） |
validateFailed | 校验失败（透传 ElFormBuilder） |
Slots
| 插槽名 | 描述 |
|---|---|
| 默认 | 作用域 { uid }；用于 tab 下 Portal、页头 ${uid}-actions、ElFormBuilder 各锚点等 |
back | 透传页头 #back |
title | 透传页头 #title（使用后页头 #extra 由 ElCruPage 提供 header-extra → PortalTarget ${uid}-actions） |
header-extra | 仅在 #title 模式下，插在 #extra 内、PortalTarget 之前 |
form-prepend / form-append | 包进默认 tab 的 ${uid}-tab-${defaultTab} 目标内，紧贴 ElFormBuilder 上 / 下 |
Expose
| 属性/方法 | 说明 |
|---|---|
uid | 解析后的实例 id |
activeHeaderTab | 当前页头选项卡 value（ref） |
formRef / model / formItemRef | 转发 ElFormBuilder |
getControlRef / getFormItemRef | 转发 ElFormBuilder |
类型说明
显示类型声明
/**
* 下文与 `packages/components/cru-page/src/types.ts` 对齐。
* `EllSimplePageHeaderProps`、`ElFormBuilderProps`、`FormInstance` 由依赖包提供。
*/
import type { ElFormBuilderProps } from '@element-plus-lab/components/form-builder'
import type { EllSimplePageHeaderProps } from '@element-plus-lab/components/simple-page-header'
import type { FormInstance } from 'element-plus'
/** 页头工具栏内置按钮项；与 ElFormQuery 相同，Portal 目标名为 `${uid}-actions`。 */
export type EllCruPageToolbarAction = 'reset' | 'save' | 'submit'
/**
* el-cru-page 的 Props 形状（v-model / modelValue 由 SFC defineModel 声明，本接口不重复列出）。
*/
export interface ElCruPageProps {
uid?: string
loading?: boolean
headerConfig: EllSimplePageHeaderProps
formConfig: Omit<
ElFormBuilderProps,
| 'modelValue'
| 'uid'
| 'actions'
| 'submitHandler'
| 'saveHandler'
| 'resetHandler'
>
toolbarActions?: EllCruPageToolbarAction[]
submitHandler?: (model: Record<string, unknown>, formRef: FormInstance | undefined) => void | Promise<void>
saveHandler?: (model: Record<string, unknown>, formRef: FormInstance | undefined) => void | Promise<void>
resetHandler?: (model: Record<string, unknown>, formRef: FormInstance | undefined) => void
}
jenemy