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 全局配置

FatFormPage 表单页面 #

示例 #

自定义布局 #

API #

FatFormPage 表单页面

示例

自定义布局

API