React使用ProComponent建立表单和列表

ProComponent

ProComponent基于Antd组件库，进一步封装，成为满足企业级开发需求的组件库。其兼容Antd内容的基础上，对表单列表等内容进行完善，在建立表单等需求中能够提供强大的api以及功能集合

Ant Design 定义了基础的设计规范，对应也提供了大量的基础组件。但是对于中后台类应用，我们希望提供更高程度的抽象，提供更上层的设计规范，并且提供相应的组件使得开发者可以快速搭建出高质量的页面。

在 ProComponents 中我们内置了一系列的设计规范，预设了常用的逻辑。在这个基础上我们同样提供了灵活的支持，比如对于 ProTable 来说你也可以把它完全当做 Ant Design 的 Table 来用，对于 ProForm 来说你也可以直接使用 Ant Design 的基础组件或者你的自定义组件。

使用ProTable建立列表

ProTable通过传入columns对象数组，遍历节点进行组件组合，无需通过模版进行表单组件组合，极大减少代码长度，便于管理

构建columns

//columns数组构建
//通过使用useMemo，创建缓存数据，避免造成重新渲染
const columns: ProFormColumnsType[] = useMemo(
  () => [
    createTableColumnIndex() as any,
    {
      title: '广告名称',
      dataIndex: 'advertName',
      formItemProps: {
        rules: [{ required: true }],
      },
    },
    {
      title: '广告描述',
      dataIndex: 'advertDescribe',
    },
    {
      title: '排序',
      dataIndex: 'sort',
      hideInSearch: true,
      valueType: 'digit',
      formItemProps: { min: 0 },
    },
    {
      title: '发布状态',
      dataIndex: 'state',
      hideInForm: true,
      valueEnum: {
        0: {
          text: '未发布',
          status: 'default',
        },
        1: {
          text: '已发布',
          status: 'success',
        },
      },
    },
    {
      title: '操作',
      dataIndex: 'btn',
      hideInForm: true,
      hideInSearch: true,
      render: (_: any, record: any) => (
        <Space split={<Divider type="vertical" style={{ margin: 0 }} />}>
          <a>发布</a>
          <a onClick={() => editorRef.current?.show(record)}>编辑</a>
          <a>详情</a>
          <Popconfirm
            title={'是否删除'}
            onConfirm={() => onRemove(record.id)}
          >
            <a style={{ color: 'red' }}>删除</a>
          </Popconfirm>
        </Space>
      ),
    },
  ],
  [],
);

举例一个列表页，columns每一个对象为一竖列

title 表头 dataIndex 对应值字段名

通过设置hideInForm hideInTabel hideInSearch，控制当前列是否在表单中，列表中和查询中显示

render属性能够改变元素在行中的展示，通过返回相应的节点

构建列表

<PageContainer>
  <ProTable
    rowKey={'id'}
    columns={columns as any}
    request={getTableRequest}
    actionRef={actionRef}
    toolbar={{
      menu: {
        type: 'tab',
        activeKey: activeKey,
        items: [
          {
            key: 'tab1',
            label: <span>门户</span>,
          },
          {
            key: 'tab2',
            label: <span>小程序</span>,
          },
        ],
        onChange: (key) => {
          setActiveKey(key as string);
        },
      },
      actions: [
        <Button
          key="add"
          type="primary"
          icon={<PlusOutlined />}
          onClick={() => editorRef.current?.show()}
        >
          新增
        </Button>,
      ],
    }}
  />
</PageContainer>

rowId 每一列设定一个唯一id进行辨识 

columns 传入定义的columns数组

request 传入请求数据返回的promise，此处需要进行数据构建，大概为{content:[],total:100,msg:'***'}，具体看文档

actionRef 传入创建的ref节点，用来控制列表的渲染相关内容const actionRef = useRef<ActionType>()

toolbar 用来定义工具栏，能够构建不同的内容。此处构建了一个按钮和tab切换

表单构建

将表单作为子组件，通过父组件（列表页）控制表单页ref属性，进行表单页的展示与隐藏

export const Index: React.ForwardRefExoticComponent<
  Props & React.RefAttributes<ModalRefObject>
> = forwardRef((props, ref) => {
  const formRef = useRef<ProFormInstance>();
  const [visible, setVisible] = useState<boolean>();
  const [record, setRecord] = useState<any>();

  useImperativeHandle(ref, () => ({
    show: (values: any) => {
      setRecord(values);
      setVisible(true);
    },
  }));

  useEffect(() => {
    if (visible) {
      formRef.current?.resetFields();
      formRef.current?.setFieldsValue(record);
    }
  }, [visible, record]);

  return (
    <>
      ***
    </>
  );
});

• 子组件利用React.forwardRef()构建组件hook，接受父组件传入的ref对象，
• 通过useImperativeHandle()设置ref相应方法
• 定义visible 和 record 状态记录表单展示和表单数据

如果是平常的表单，可以通过<BetaSchemaForm/>进行构建，其columns与ProTable相同，通过每个对象创建表单项

<BetaSchemaForm
  width={600}
  columns={columns as any}
  formRef={formRef}
  layout={'horizontal'}
  layoutType={'ModalForm'}
  labelCol={{ flex: '80px' }}
  open={visible}
  onOpenChange={setVisible}
  title={'表单'}
  onFinish={onSave}
  modalProps={{
    centered: true,
    styles: {
      body: { paddingTop: 30 },
    },
  }}
/>

如果表单复杂，可以通过<ProForm/>既相应ProForm项组件进行构建

<ModalForm
  width={600}
  formRef={formRef}
  layout={'horizontal'}
  labelCol={{ flex: '80px' }}
  open={visible}
  onOpenChange={setVisible}
  title={record ? '编辑广告' : '新增广告'}
  onFinish={onSave}
  modalProps={{
    centered: true,
    styles: {
      body: { paddingTop: 30 },
    },
  }}
>
  <ProFormText
    name="advertName"
    label="广告名称"
    placeholder="请填写"
    rules={[{ required: true }]}
  />
  <ProFormUploadButton
    label="视频文件"
    name="file"
    title=""
    listType="picture-card"
    icon={<PlusOutlined />}
    required={true}
    fileList={fileList}
    fieldProps={{
      multiple: true,
      onRemove: onVideoRemove,
      customRequest: uploadFile,
    }}
  />

  <ProFormText
    name="advertDescribe"
    label="广告描述"
    placeholder="请填写"
  />
  <ProFormText
    name="sort"
    label="排序"
    placeholder="请填写"
    fieldProps={{ style: { width: 150 } }}
  />
</ModalForm>