Skip to content
Return to top
On this page

# FatFormPage 表单页面 #

`FatFormPage` 是 FatForm 针对页面场景设计的一个组件。用于快速创建一个表单创建、编辑、预览页面。

# 示例 #

通过 FatFormPage 可以快速创建表单相关的预览、编辑、新建页面。

新建页面

编辑页面

详情页面

查看代码
tsx

    import { defineFatFormPage } from '@wakeadmin/components';
    import { ElMessage, ElMessageBox } from 'element-plus';

    interface User {
      id?: string;
      name?: string;
      nickName?: string;
      address?: string;
    }

    /**
     * 用户编辑、详情、创建页面三合一
     */
    export default defineFatFormPage<User>(({ item }) => {
      const url = new URL(window.location.href);
      // 数据 id
      const id = url.searchParams.get('id');
      // 模式, detail or edit
      const type = url.searchParams.get('type') ?? 'edit';

      const mode: 'create' | 'edit' | 'detail' =
        id != null && type === 'detail' ? 'detail' : id != null ? 'edit' : 'create';

      return () => ({
        title: mode === 'create' ? '新建用户' : mode === 'detail' ? '用户详情' : '编辑用户',
        mode: mode === 'detail' ? 'preview' : 'editable',
        async request() {
          // 在这里进行数据请求
          if (id != null) {
            // 编辑或详情
            // 模拟详情
            return {
              id,
              name: 'ivan',
              nickName: '狗蛋',
              address: '广东汕尾红海湾区遮浪镇',
            };
          } else {
            // 新建
            return {};
          }
        },
        async submit() {
          // 在这里执行数据保存
        },
        onFinish() {
          // 保存成功
          ElMessage.success('保存成功');
        },

        /**
         * 支持拦截取消操作
         */
        async beforeCancel(done) {
          await ElMessageBox.confirm('确定关闭当前页面？');
          done();
        },
        children: [
          item({ label: '名称', prop: 'name', width: 'medium', rules: { required: true } }),
          item({ label: '昵称', prop: 'nickName', width: 'medium', rules: { required: true } }),
          item({ label: '地址', prop: 'address', valueType: 'textarea', width: 'huge' }),
        ],
      });
    });

分组:

查看代码
tsx

    import { defineFatFormPage } from '@wakeadmin/components';

    export default defineFatFormPage(({ item, section }) => {
      return () => ({
        title: '新增 XX',
        children: [
          section({
            title: '个人信息',
            children: [
              item({ label: '名称', prop: 'name', width: 'medium', rules: { required: true } }),
              item({ label: '昵称', prop: 'nickName', width: 'medium', rules: { required: true } }),
              item({ label: '地址', prop: 'address', valueType: 'textarea', width: 'huge' }),
            ],
          }),
          section({
            title: '详细信息',
            children: [item({ label: '详细描述', prop: 'detail', width: 'huge', valueType: 'textarea' })],
          }),
        ],
      });
    });

WARNING

如果包含了 `FatFormSection`, 那么 title、extra 等属性或者插槽将被忽略

## 自定义布局 #

`FatFormPage` 默认使用的是惟客云的页面布局，我们也支持自定义布局。

布局协议如下:

tsx

    // 返回 JSX Node
    export type FatFormPageLayout = (renders: {
      class?: ClassValue;
      style?: StyleValue;

      /**
       * 表单实例引用
       */
      form?: Ref<FatFormMethods<any> | undefined>;

      /**
       * 子级中是否包含了 FatFormSection
       */
      includeSections?: boolean;

      /**
       * 渲染标题
       */
      renderTitle: () => any;

      /**
       * 渲染额外内容
       */
      renderExtra: () => any;

      /**
       * 渲染表单主体
       */
      renderForm: () => any;

      /**
       * 渲染提交按钮, 禁用时为空
       */
      renderSubmitter?: () => any;

      /**
       * 布局自定义参数
       */
      layoutProps: any;
    }) => any;

默认实现如下：

tsx

    const DefaultLayout: FatFormPageLayout = ctx => {
      return (
        <div class={normalizeClassName('fat-form-page', ctx.class)} style={ctx.style}>
          {ctx.includeSections ? (
            ctx.renderForm()
          ) : (
            <FatContainer
              {...ctx.layoutProps}
              v-slots={{
                title: ctx.renderTitle(),
                extra: ctx.renderExtra(),
              }}
            >
              {ctx.renderForm()}
            </FatContainer>
          )}
          {!!ctx.renderSubmitter && <FatFloatFooter>{ctx.renderSubmitter()}</FatFloatFooter>}
        </div>
      );
    };

TIP

也可以通过 `FatConfigurableProvider` 全局配置

## API #