👑 [需求]强大的CrudTable组件！！！

[ilxqx]

🥰 需求描述

我有个想法，ProTable、ProForm等这样的组件功能固然强大，但依旧没有完美解决日常开发Crud的重复工作。我建议提供一个ProCrudTable的强大组件，这个组件可以展示表格、搜索表单、添加及更新表单和删除操作，真正做到集增删改查于一身，采用约定大于配置的方式，让使用者可以以最简洁的使用方式得到最强最全的功能。深度定制使用可对相关配置项进行自定义。

🧐 解决方案

下面是我自己实现的一套简单的方案（并不完美，仅供参考）：

CrudTable 组件

import {PlusOutlined} from '@ant-design/icons';
import {Button, message} from 'antd';
import React, {PropsWithChildren, useRef, useState} from 'react';
import ProTable, {ActionType, ProColumns} from '@ant-design/pro-table';
import {SortOrder} from 'antd/lib/table/interface';
import {PageResponseInfo} from '@/app';
import {get} from '@/utils/request';
import {SearchConfig} from '@ant-design/pro-table/es/Form';
import {TablePaginationConfig} from 'antd/es/table';
import Detail from './components/Detail';
import Update from './components/Update';

export type UpdateModel<T> = T & { [key: string]: any };

interface ExtraColumnProps<T> {
  /**
   * 创建表单类型
   */
  createValueType: string;
  /**
   * 修改表单类型
   */
  modifyValueType: ((model: UpdateModel<T>) => string) | string;
  /**
   * 搜索表单类型
   */
  searchValueType: ((model: T) => string) | string;
}

export type ExtendedProColumns<T> = ProColumns<T> & Partial<ExtraColumnProps<T>>;

export interface CrudTableProps<T, U = {}> {
  /**
   * 标题
   */
  title?: string;
  /**
   * 表格列
   */
  columns: Array<ExtendedProColumns<T>>;
  /**
   * 额外查询参数
   */
  params?: U;
  /**
   * REST Ful风格的请求路径
   */
  restPath?: string;
  /**
   * 获取数据列表的URL
   */
  fetchListPath?: string;
  /**
   * 创建请求路径
   */
  createPath?: string;
  /**
   * 修改请求路径
   */
  modifyPath?: string;
  /**
   * 删除请求路径
   */
  deletePath?: string;
  /**
   * 行唯一标识
   */
  rowKey?: string;
  /**
   * 是否展示详情
   */
  showDetail?: boolean;
  /**
   * 额外操作按钮
   */
  extraOperations?: Array<CrudTableOperation>;
  /**
   * 是否覆盖已有操作按钮
   */
  overrideExistedOperations?: boolean;
  /**
   * 额外操作处理器
   */
  extraOperationHandlers?: TableOperationHandlers<T>;
}

/**
 * 表格操作栏操作按钮
 */
export interface CrudTableOperation {
  name: string;
  key: string;
}

/**
 * 表格操作栏操作处理器
 */
export type TableOperationHandler<T> = (entity: T, action: ActionType, index: number) => void;
type TableOperationHandlers<T> = { [key: string]: TableOperationHandler<T> };

/**
 * 生成数据请求函数
 * @param requestPath
 */
function generateFetchDataFunc<T, U = {}>(requestPath: string) {
  return async (params: U & {
    pageSize?: number;
    current?: number;
  }, sort: {
    [key: string]: SortOrder;
  }, filter: {
    [key: string]: React.ReactText[];
  }) => {
    const {current, pageSize, ...otherParams} = params;
    // 发起请求
    const resp = await get<PageResponseInfo<Array<T>>>(requestPath, {
      page: current,
      size: pageSize,
      ...otherParams,
      sort,
      filter
    });
    // 返回数据
    return {
      success: resp.code === 0,
      data: resp.data,
      total: resp.total
    }
  }
}

/**
 * 默认操作按钮
 */
const defaultTableOperations: Array<CrudTableOperation> = [
  {
    name: '修改',
    key: 'modify'
  },
  {
    name: '删除',
    key: 'delete'
  }
]

/**
 * 操作处理器执行器
 * @param operationHandlers
 * @param key
 * @param entity
 * @param action
 * @param index
 */
function executeTableOperation<T>(operationHandlers: TableOperationHandlers<T>, key: string, entity: T, action: ActionType, index: number) {
  const operationHandler = operationHandlers[key];
  if (operationHandler) {
    // 有处理器，进行处理
    operationHandler.call(undefined, entity, action, index);
  } else {
    // 没有处理器，进行警告
    message.warning(`对应key=${key}的操作处理器不存在，请检查！`);
  }
}

/**
 * 处理操作列的宽度和按钮数组
 * @param operations
 * @param operationHandlers
 */
function handleOperationColumnAndComputeWidth<T>(operations: Array<CrudTableOperation>, operationHandlers: TableOperationHandlers<T>): { operationElementArray: (entity: T, action: ActionType, index: number) => JSX.Element[]; width: number } {
  const { length } = operations;
  const count = operations.reduce((prev, { name }) => prev + name.length, 0);
  return {
    width: 16 + 14 * count + (length - 1) * 8 + 20,
    operationElementArray: (entity: T, action: ActionType, index: number) => operations.map(({name, key}) => <a key={key} onClick={() => executeTableOperation<T>(operationHandlers, key, entity, action, index)}>{name}</a>)
  };
}

const CrudTable: React.FC<CrudTableProps<any>> = <T, U = {}>({
  title = '',
  columns,
  params: extraParams,
  restPath,
  fetchListPath,
  createPath,
  modifyPath,
  deletePath,
  rowKey = 'id',
  showDetail = false,
  extraOperations = [],
  overrideExistedOperations = false,
  extraOperationHandlers = {}
}: PropsWithChildren<CrudTableProps<T, U>>) => {

  const actionRef = useRef<ActionType>();
  // 详情框显示状态
  const [detailModalVisible, setDetailModalVisible] = useState<boolean>(false);
  const [detailEntity, setDetailEntity] = useState<T>();

  // 更新框显示状态
  const [updateModalVisible, setUpdateModalVisible] = useState<boolean>(false);

  let tableColumns = columns;
  /**
   * 处理表格操作按钮
   */
  let operations: Array<CrudTableOperation> = [];
  if (extraOperations != null && extraOperations.length > 0) {
    operations = extraOperations;
  }
  if (!overrideExistedOperations) {
    operations = [
      ...showDetail ? [{
        name: '详情',
        key: 'detail'
      }] : [],
      ...operations,
      ...defaultTableOperations
    ]
  }
  if (operations.length >= 0) {
    /**
     * 操作处理器
     */
    const operationHandlers: TableOperationHandlers<T> = {
      detail: entity => {
        setDetailEntity(entity);
        setDetailModalVisible(true);
      },
      modify: (entity, action) => {

        setUpdateModalVisible(true);
      },
      delete: (entity, action) => {
        setUpdateModalVisible(true);
      },
      // 额外处理器
      ...extraOperationHandlers
    };

    // 有操作按钮
    const { width, operationElementArray } = handleOperationColumnAndComputeWidth(operations, operationHandlers);
    tableColumns = [
      ...columns,
      {
        title: '操作',
        key: 'option',
        valueType: 'option',
        width,
        render: (_, entity, index, action) => operationElementArray(entity, action, index),
      }
    ]
  }

  /**
   * 分页配置
   */
  const tablePaginationConfig: TablePaginationConfig = {
    defaultPageSize: 10,
    pageSizeOptions: ['10', '15', '20', '30', '40', '50', '100'],
    showQuickJumper: true,
  }

  /**
   * 搜索表单配置
   */
  const searchConfig: SearchConfig = {
    defaultCollapsed: true,
    defaultColsNumber: 4,
    labelWidth: 'auto',
    split: false,
    span: {
      xs: 24,
      sm: 12,
      md: 12,
      lg: 8,
      xl: 6,
      xxl: 6,
    }
  }

  return (
    <>
      <ProTable<T, U>
        headerTitle={title}
        actionRef={actionRef}
        rowKey={rowKey}
        toolBarRender={() => [
          <Button type="primary" onClick={() => setUpdateModalVisible(true)}>
            <PlusOutlined /> 新建
          </Button>,
        ]}
        params={extraParams}
        request={generateFetchDataFunc<T, U>(fetchListPath || restPath)}
        columns={tableColumns}
        search={searchConfig}
        pagination={tablePaginationConfig}
      />
      <Detail<T> modalVisible={detailModalVisible} onCancel={() => setDetailModalVisible(false)} columns={columns} entity={detailEntity} />
      <Update<T> modalVisible={updateModalVisible} onCancel={() => setUpdateModalVisible(false)} columns={columns} model={detailEntity}  isCreation/>
    </>
  );
}

export default CrudTable;

Update 组件

import React from 'react';
import {Modal} from 'antd';
import {ExtendedProColumns} from '@/components/CrudTable';
import DynamicForm, {FormItem, FormItemType, SelectionOption} from '@/components/DynamicForm';
import {useForm} from 'antd/es/form/Form';

interface UpdateProps<T, E = { [key: string]: any }> {
  columns: Array<ExtendedProColumns<T>>
  model: T & E;
  isCreation: boolean;
  modalVisible: boolean;
  onCancel: () => void;
}

/**
 * 数据列类型映射
 * 'money' | 'textarea' | 'option' | 'date' | 'dateWeek' | 'dateMonth' | 'dateQuarter' | 'dateYear' | 'dateRange' | 'dateTimeRange' | 'dateTime' | 'time' | 'text' | 'index' | 'indexBorder' | 'progress' | 'percent' | 'digit' | 'avatar' | 'code' | 'jsonCode'
 */
const columnValueTypeMap = {
  text: 'text',
  textarea: 'textarea',
  digit: 'number',
  date: 'date',
  dateTime: 'datetime',
  select: 'select',
  radio: 'radio'
}

const handleOptions = (source: object): Array<SelectionOption> => {
  return Object.entries(source).map(([value, name]) => ({name, value}));
}

const handleFormItem = (formItem: FormItem, column: ExtendedProColumns<any>): FormItem => {
  const newFormItem: FormItem = {
    ...formItem
  };
  if (formItem.type === 'select') {
    newFormItem.options = handleOptions(column.valueEnum);
    if (newFormItem.options.length < 4) {
      newFormItem.type = 'radio';
    }
  }
  return newFormItem;
}

const Update = <T, E = {}>({ modalVisible, onCancel, columns, isCreation, model }: UpdateProps<T, E>) => {

  const formItems: Array<FormItem> = columns.map(column => {
    let valueType: string;
    if (column.valueType instanceof Function) {
      valueType = column.valueType(model) as string;
    } else {
      valueType = column.valueType as string;
      if (!valueType && column.valueEnum) {
        valueType = 'select';
      }
    }
    let type: FormItemType;
    if (isCreation) {
      type = column.createValueType ? column.createValueType : columnValueTypeMap[valueType];
    } else if (column.modifyValueType) {
      if (column.modifyValueType instanceof Function) {
        type = column.modifyValueType(model) as FormItemType;
      } else {
        type = column.modifyValueType as FormItemType;
      }
    } else {
      type = columnValueTypeMap[valueType];
    }
    const formItem: FormItem = {
      name: column.dataIndex as string,
      type,
      label: column.title as string
    };
    return handleFormItem(formItem, column);
  });
  const [ form ] = useForm();
  return (
    <Modal
      title={isCreation ? '创建' : '修改'}
      visible={modalVisible}
      onCancel={() => {
        form.resetFields();
        onCancel();
      }}
      onOk={() => form.submit()}
    >
      <DynamicForm formItems={formItems} model={model} form={form}/>
    </Modal>
  );
};

export default Update;

DynamicForm 组件

import React from 'react';
import {DatePicker, Form, Input, InputNumber, Radio, Select} from 'antd';
import {FormInstance} from 'antd/lib/form/hooks/useForm';

export interface DynamicFormProps<T, E> {
  formItems: Array<FormItem>;
  model: T & E,
  form: FormInstance
}

export interface SelectionOption {
  name: string;
  value: string | number;
}

/**
 * 表单字段类型
 */
export type FormItemType = 'text' | 'textarea' | 'number' | 'inputNumber' | 'date' | 'datetime' | 'select' | 'radio';
export interface FormItem {
  label: string;
  name: string;
  type: FormItemType;
  options?: Array<SelectionOption>;
}

const decideFormComponent = (type: FormItemType, props: Partial<FormItem>) => {
  if (type === 'text') {
    return <Input {...props} />;
  }
  if (type === 'textarea') {
    return <Input.TextArea {...props} />;
  }
  if (type === 'number') {
    return <Input {...props} />;
  }
  if (type === 'inputNumber') {
    return <InputNumber {...props} />;
  }
  if (type === 'select') {
    const {options, ...restProps} = props;
    return (<Select {...restProps}>
      {options.map(option => <Select.Option key={option.value} value={option.value}>{option.name}</Select.Option>)}
    </Select>);
  }
  if (type === 'radio') {
    const {options, ...restProps} = props;
    return (
      <Radio.Group {...restProps}>
        {options.map(option => <Radio key={option.value} value={option.value}>{option.name}</Radio>)}
      </Radio.Group>
    )
  }
  if (type === 'date') {
    return <DatePicker {...props} />;
  }
  if (type === 'datetime') {
    return <DatePicker showTime {...props} />;
  }
  return <span>无法识别的表单项类型：{type}</span>;
}
const DynamicForm = <T extends {}, E extends { [key: string]: any }>({ formItems, model, form }: DynamicFormProps<T, E>) => {
  const onFinish = values => {
    console.log('Success:', values);
  };

  return (
    <Form name="dynamic" labelCol={{
      xs: 10,
      sm: 8,
      md: 8,
      lg: 6,
      xl: 6,
      xxl: 6,
    }} initialValues={model} scrollToFirstError form={form} onFinish={onFinish}>
      {
        formItems.map(formItem => {
          const { type, label, ...restProps } = formItem;
          return (
            <Form.Item key={restProps.name} name={restProps.name} label={label} rules={[{ required: true }]}>
              { decideFormComponent(type, restProps) }
            </Form.Item>
          )
        })
      }
    </Form>
  );
};

export default DynamicForm;

说明：这里的动态表单组件跟ProForm有点类似，但是ProForm依旧使用的是自己写组件JSX代码的方式，我这里写成了公用表格columns列的形式，更加简洁了，但这个组件只是个雏形，仅仅可用来展示一下！

Detail 组件

import React from 'react';
import {Modal} from 'antd';
import ProDescriptions from '@ant-design/pro-descriptions';
import {ProColumns} from '@ant-design/pro-table';
import styles from './detail.less';

interface DetailProps<T> {
  columns: Array<ProColumns<T>>
  entity: T;
  modalVisible: boolean;
  onCancel: () => void;
}

const Detail = <T extends {}>({ modalVisible, onCancel, columns, entity }: DetailProps<T>) => {
  return (
    <Modal
      visible={modalVisible}
      onCancel={onCancel}
      footer={null}
    >
      { /* @ts-ignore */ }
      <ProDescriptions className={styles.detail} title="详情" column={1} columns={columns} request={async () => Promise.resolve({
        success: true,
        data: entity
      })}/>
    </Modal>
  );
};

export default Detail;

🚑 其他信息

本人仅仅是个初来乍到的菜鸟😂，很多东西并没有理解那么透彻，提这个issue仅仅是想提供更好的想法，写的不好，莫见怪哈！

[chenshuai2144]

我们就是这么想的，这个东西会等各个组件比较完备的时候在开始开发

[goodve]

伸手党内心OS：还要等多久？？？在线等

[rdmclin2]

哈哈，果然有同学也开始这么想了，原子组件的存在就是为了拉通对齐字段在各种形式下的展现形式

[tangtanglove]

@chenshuai2144 这个是我开发的laravel扩展：https://github.com/quarkcms/quark-admin；
具体思路是前端用ant-design作为引擎通过后台api渲染页面；已经基于ant-design-layout实现了列表页，创建页，编辑页，详情页、批量处理等功能；最近注意到官方好像也在做这方面的事情，所以准备下一个版本用ant-design-pro v5重写，现在遇到个问题是菜单这里，我的菜单是从接口读取的，而且路由只有一个，通过路由传参调用不同的接口，然后渲染页面，但是菜单高亮这一块儿好像还是有问题。

[tangtanglove]

[crashsol]

nice，这个出来天天可以5点就下班了

[itsuki0927]

期待这个功能的实现

[zmj0920]

期待这个功能的实现 这个我也在写了一下没他的完美

[travonf]

做了个类似的ant-enhance，自带detail,update,delete功能，共用一套columns配置，search form功能比较特殊还没时间弄。

[tolerance-go]

名字取得不好，Table and more

[Astra-RX]

不考虑把统一的组件格式标准同步回 antd 吗

[chenshuai2144]

antd 和 pro的定位有点不同，不能搞回去

[lg970044]

我采用的是前后端结合的方案，前端使用 约定式 路由 ， 建好 crud 页面，列表 用 ProTable，编辑页使用 Formily。从 服务端 读取 schema。

前端：https://github.com/3xdev/gen-adp5
后端：https://github.com/3xdev/gen-tp6