react+antd pro实现【列表可实时行内编辑】的弹窗表单组件

纯列表版效果展示：

① 初始无值，展示为唤醒按钮+文案外链

②点击按钮唤醒弹窗（简易版示意图）

③配置后

可编辑表格组件文档：

https://procomponents.ant.design/components/editable-table

纯列表组件代码：

表单引用：

// antd-pro的高级表单组件
import SchemaForm from '@/components/SchemaForm';
import AssetsTable from './AssetsTable';

---------------------------------------

<SchemaForm<API.AssetsProps>
          formRef={formRef}
          dataSource={dataSource.map((item: any) => {
            if (item.id === 'event_asset') {
              return {
                ...item,
                required: '请配置事件资产',
                fieldProps: { ...item.fieldProps, fetchListApi },
                renderFormItem: (schema: any) => <AssetsTable {...schema.fieldProps} />,
                formItemProps: {
                  rules: [
                    {
                      required: true,
                      validator(rule: any, value: any[]) {
                        if (value && value.length) {
                          if (value.length !== accounts?.length) {
                            return Promise.reject(new Error('请为全部账户配置资产事件'));
                          }
                          if (value.find((itemDeep: any) => !itemDeep.deep_bid_type)) {
                            return Promise.reject(new Error('请为全部账户配置深度出价方式'));
                          }
                          return Promise.resolve();
                        }
                        return Promise.resolve();
                      },
                    },
                  ],
                },
              };
            }
            return item;
          })}
          submitter={false}
          autoFocusFirstInput={false}
          onValuesChange={(changedFields: any, allFields: any) => {
           // 表单值改变时的处理逻辑
          }}
        />

　　

组件代码：

import { useEffect, useState } from 'react';
import { Modal, Button, Input, message } from 'antd';
import { isEmpty } from 'lodash';
import type { ProColumns } from '@ant-design/pro-table';
import { EditableProTable } from '@ant-design/pro-table';
import { fetchAssetsList } from './services';

const { Search } = Input;

type AssetsProps = {
    value?: any[];
    onChange?: (value?: any[]) => void;
    /** 列表接口地址 */
    fetchListApi?: string;
};

/** 弹窗 */
const AssetsTable: React.FC<AssetsProps> = (props) => {
    const { value, onChange, fetchListApi } = props;
    const [data, setData] = useState<API.AssetsProps[]>(value || []); // 存储选中的数据
    const [visible, setVisible] = useState<boolean>(false);
    const [dataSource, setDataSource] = useState<API.AssetsProps[]>([]); // 列表数据
    const [tableColumns, setTableColumns] = useState<ProColumns[]>([]);
    const [tableParams, setTableParams] = useState<any>();
    const [tableLoading, setTableLoading] = useState<boolean>(false);
    const [editableKeys, setEditableRowKeys] = useState<React.Key[]>([]);
    const [keys, setKeys] = useState<(string | number)[]>([]);

    const handleOk = () => {
        if (onChange) { onChange(data); setVisible(false);}
    };

    const fetchList = async () => {
        setTableLoading(true);
        if (fetchListApi) {
            // 根据资产类型+投放账号调用头条已有的资产作为选择值
            try {
                const res: any = await fetchAssetsList(fetchListApi, tableParams);
                if (res.result) {
                    setTableColumns([]);
                    const { tableHeaderList = [], tableList = [] } = res.result;
                    // 当有存储值时，覆盖掉接口返回的对应数据
                    if (data && data.length) {
                        const initObj = data.find((item: any) => item.account_id === id);
                        const newList = tableList.map((item: any) => {
                            if (initObj && initObj.id && item.id === initObj.id) {
                                return initObj;
                            }
                            return item;
                        });
                        setDataSource(newList);
                        setEditableRowKeys(newList?.map((item: any) => item.id));
                    } else {
                        setDataSource(tableList);
                        setEditableRowKeys(tableList?.map((item: any) => item.id));
                    }
                    // 深度优化目标下拉单选
                    setTableColumns([
                        ...tableHeaderList.map((item: any) => {
                            if (item.dataIndex === 'deep_external_action') {
                                return {
                                    ...item,
                                    width: 200,
                                    valueType: 'select',
                                    valueEnum: (row: any) => {
                                        const optionList = row?.deep_goals
                                            ?.filter((itemF: any) => itemF.optimization_name)
                                            .map((itemO: any) => {
                                                return {
                                                    label: itemO.optimization_name,
                                                    value: itemO.deep_external_action,
                                                };
                                            });
                                        const valueEnumObj = {};
                                        optionList?.forEach((items: any) => {
                                            valueEnumObj[items.value] = { text: items.label };
                                        });
                                        return valueEnumObj;
                                    },
                                };
                            }
                            // 深度出价方式需要动态获取
                            if (item.dataIndex === 'deep_bid_type') {
                                return {
                                    ...item,
                                    width: 200,
                                    valueType: 'select',
                                    valueEnum: (row: any) => {
                                        let deepList: any[] = [];
                                        const hasChoose = row?.deep_goals?.find(
                                            (el: any) => el.deep_external_action === row.deep_external_action,
                                        );
                                        if (hasChoose) {
                                            deepList =
                                                row?.deep_goals.find(
                                                    (el: any) => el.deep_external_action === row.deep_external_action,
                                                )?.deep_bid_type || [];
                                        } else {
                                            deepList = row?.default_deep_bid_type || [];
                                        }
                                        const optionList = deepList?.map((itemO: any) => {
                                            return {
                                                label: itemO.name,
                                                value: itemO.id,
                                            };
                                        });
                                        const valueEnumObj = {};
                                        optionList?.forEach((items: any) => {
                                            valueEnumObj[items.value] = { text: items.label };
                                        });
                                        return valueEnumObj;
                                    },
                                };
                            }
                            return { ...item, editable: false };
                        }),
                    ]);
                }
                setTableLoading(false);
            } catch (error) {
                //
            }
        }
    };

    // 关键词搜索
    useEffect(() => {
        if (!isEmpty(tableParams)) fetchList();
    }, [tableParams]);

    useEffect(() => {
        setData(dataSource || []);
    }, [dataSource]);

    useEffect(() => {
        if (visible) {
            fetchList();
            // 更新data
            if (value && Array.isArray(value) && value.length) {
                setData(value);
            }
        }
    }, [visible]);

    useEffect(() => {
        // 更新data
        if (value && Array.isArray(value) && value.length) {
            setData(value);
        }
    }, [value]);

    return (
        <>
            <div>
                <Button onClick={() => setVisible(true)}>
                    {data && data.length ? '已' : ''}选择事件资产{data && data.length ? '，点击配置' : ''}
                </Button>
            </div>
            <Modal width={1500} visible={visible} onCancel={() => setVisible(false)} onOk={handleOk}>
                <div>
                    <Search
                        addonBefore="资产名称"
                        placeholder="请输入关键词搜索"
                        allowClear
                        onSearch={async (valueSearch: string) =>
                            setTableParams({ ...tableParams, asset_name: valueSearch })
                        }
                        style={{ width: 300, marginBottom: '8px' }}
                    />
                    <EditableProTable
                        rowKey="id"
                        loading={tableLoading}
                        bordered
                        request={async () => ({
                            data: dataSource,
                            total: dataSource.length,
                            success: true,
                        })}
                        tableAlertRender={false}
                        value={dataSource}
                        onChange={(valueNew: any[]) => {
                            const newTableData = valueNew.map((item: any, index: number) => {
                                // 深度优化目标的值改变时，清空本条数据的深度出价方式的值
                                if (item.id === dataSource[index].id) {
                                    if (item.deep_external_action !== dataSource[index].deep_external_action) {
                                        return { ...item, deep_bid_type: undefined };
                                    }
                                    return item;
                                }
                                return item;
                            });
                            setDataSource(newTableData);
                        }}
                        controlled
                        recordCreatorProps={false}
                        editable={{
                            type: 'multiple',
                            editableKeys,
                            actionRender: undefined,
                            onChange: setEditableRowKeys,
                        }}
                        scroll={{ y: 320, x: 'max-content' }}
                        columns={tableColumns}
                        tableRender={undefined}
                        pagination={false}
                        rowSelection={{
                            type: 'radio',
                            selectedRowKeys: keys,
                            onChange: (selectedRowKeys: any, selectedRows: any) => {
                                // 存储选中数据逻辑
                            },
                        }}
                    />
                    {dataSource && dataSource.length ? <p>共 {dataSource.length} 条</p> : null}
                </div>
            </Modal>
        </>
    );
};

export default AssetsTable;

　　

--------------------------------------以上代码可满足按钮唤醒弹窗并对列表数据进行行内修改的需求-------------------------------------

完整版需求效果展示：

其实就是多了左侧账号栏，要求给左侧每个账号进行配置，右侧展示可选列表，单项选择，可配置内容，其中选中项必须配置出价方式；

点击确定时校验是否满足要求，否则弹出提示；

重新点开弹窗时也要保留上次选择与配置的内容。

具体代码：

import { useEffect, useState, useRef, useContext } from 'react';
import { Modal, Button, Input, message } from 'antd';
import { isEmpty } from 'lodash';
import ScrollList from '@/components/ScrollList';
import type { ProColumns } from '@ant-design/pro-table';
import { EditableProTable } from '@ant-design/pro-table';
import { fetchAssetsList } from './services';
import SmartCreationContext from '../../context';
import styles from './Assets.less';

const { Search } = Input;

type AssetsProps = {
  value?: any[];
  onChange?: (value?: any[]) => void;
  /** 事件资产列表接口地址 */
  fetchListApi?: string;
};

/** 事件资产弹窗 */
const AssetsTable: React.FC<AssetsProps> = (props) => {
  const { value, onChange, fetchListApi } = props;
  const { dependentData, values } = useContext(SmartCreationContext);
  const { accounts = [] } = dependentData || {};
  const { create_rules } = values || {};
  const adsRef = useRef<any>();
  const [data, setData] = useState<API.AssetsProps[]>(value || []); // 存储选中的数据
  const [visible, setVisible] = useState<boolean>(false);
  const [dataSource, setDataSource] = useState<API.AssetsProps[]>([]); // 列表数据
  const [tableColumns, setTableColumns] = useState<ProColumns[]>([]);
  const [tableParams, setTableParams] = useState<any>();
  const [tableLoading, setTableLoading] = useState<boolean>(false);
  const [targetAccount, setTargetAccount] = useState<any>('');
  const [editableKeys, setEditableRowKeys] = useState<React.Key[]>([]);
  const [keys, setKeys] = useState<(string | number)[]>([]);

  const handleOk = () => {
    if (onChange) {
      if (data.length === accounts.length) {
        if (data?.find((itemDeep: any) => !itemDeep.deep_bid_type)) {
          message.error('请为全部账户配置深度出价方式');
          return;
        }
        onChange(data);
        setVisible(false);
      } else {
        message.error('请为全部账户配置资产事件');
      }
    }
  };

  const fetchList = async (id: string) => {
    setTargetAccount(id);
    setTableLoading(true);
    const trace_events = JSON.parse(sessionStorage.getItem('ASSETS_FORM') || '');
    if (fetchListApi) {
      // 根据账号调用已有的资产作为选择值
      try {
        const res: any = await fetchAssetsList(fetchListApi, {
          account_id: id, // 账号
          ...tableParams,
        });
        if (res.result) {
          setTableColumns([]);
          const { tableHeaderList = [], tableList = [] } = res.result;
          const dataTable = tableList.map((item: any) => {
            return { ...item, account_id: id };
          });
          // 当有存储值时，覆盖掉接口返回的对应数据
          if (data && data.length) {
            const initObj = data.find((item: any) => item.account_id === id);
            const newList = dataTable.map((item: any) => {
              if (initObj && initObj.id && item.id === initObj.id) {
                return initObj;
              }
              return item;
            });
            setDataSource(newList);
            setEditableRowKeys(newList?.map((item: any) => item.id));
          } else {
            setDataSource(dataTable);
            setEditableRowKeys(dataTable?.map((item: any) => item.id));
          }
          // 深度优化目标下拉单选
          setTableColumns([
            ...tableHeaderList.map((item: any) => {
              if (item.dataIndex === 'deep_external_action') {
                return {
                  ...item,
                  width: 200,
                  valueType: 'select',
                  valueEnum: (row: any) => {
                    const optionList = row?.deep_goals
                      ?.filter((itemF: any) => itemF.optimization_name)
                      .map((itemO: any) => {
                        return {
                          label: itemO.optimization_name,
                          value: itemO.deep_external_action,
                        };
                      });
                    const valueEnumObj = {};
                    optionList?.forEach((items: any) => {
                      valueEnumObj[items.value] = { text: items.label };
                    });
                    return valueEnumObj;
                  },
                };
              }
              // 深度出价方式需要动态获取
              if (item.dataIndex === 'deep_bid_type') {
                return {
                  ...item,
                  width: 200,
                  valueType: 'select',
                  valueEnum: (row: any) => {
                    let deepList: any[] = [];
                    const hasChoose = row?.deep_goals?.find(
                      (el: any) => el.deep_external_action === row.deep_external_action,
                    );
                    if (hasChoose) {
                      deepList =
                        row?.deep_goals.find(
                          (el: any) => el.deep_external_action === row.deep_external_action,
                        )?.deep_bid_type || [];
                    } else {
                      deepList = row?.default_deep_bid_type || [];
                    }
                    const optionList = deepList?.map((itemO: any) => {
                      return {
                        label: itemO.name,
                        value: itemO.id,
                      };
                    });
                    const valueEnumObj = {};
                    optionList?.forEach((items: any) => {
                      valueEnumObj[items.value] = { text: items.label };
                    });
                    return valueEnumObj;
                  },
                };
              }
               return {
                  ...item,
                  width: 200,
                  editable: false,
                };
            }),
          ]);
        }
        setTableLoading(false);
      } catch (error) {
        //
      }
    }
  };

  // 关键词搜索
  useEffect(() => {
    if (!isEmpty(tableParams)) fetchList(targetAccount);
  }, [tableParams]);

  useEffect(() => {
    if (dataSource.length) {
      const newList = data?.map((item: any) => {
        if (item.account_id === targetAccount) {
          const newObj = dataSource.find((itemList: any) => itemList.id === item.id);
          return newObj;
        }
        return item;
      });
      setData(newList);
    } else {
      setData([]);
    }
  }, [dataSource]);

  // 当前选中key
  useEffect(() => {
    if (targetAccount) {
      if (data && data.length) {
        const idList = data
          .filter((item) => item.account_id === targetAccount)
          .map((item: API.AssetsProps) => {
            return item.id;
          });
        setKeys(idList);
      } else {
        setKeys([]);
      }
    }
  }, [targetAccount, data]);

  // 打开弹窗时，默认左侧广告投放列表选中第一项，并进行列表请求
  useEffect(() => {
    if (accounts && accounts[0]) {
      adsRef?.current?.selectItem(accounts[0]);
      setTargetAccount(accounts[0].id);
      if (visible) {
        fetchList(accounts[0].id || '');
        // 更新data
        if (value && Array.isArray(value) && value.length) {
          setData(value);
        }
      }
    }
  }, [visible]);

  useEffect(() => {
    // 更新data
    if (value && Array.isArray(value) && value.length) {
      setData(value);
    }
  }, [value]);

  return (
    <>
      <div>
        <Button
          onClick={() => {
            const trace_events = JSON.parse(sessionStorage.getItem('ASSETS_FORM') || '');
            if (!trace_events?.app_type) {
              message.error('请选择资产类型');
              return;
            }
            setVisible(true);
          }}
        >
          {data && data.length ? '已' : ''}选择事件资产{data && data.length ? '，点击配置' : ''}
        </Button>
        {data && data.length ? null : (
          <span style={{ marginLeft: '8px' }}>
            找不到适用的资产，去
            <a
              href="/"
              key="createAssets"
              target="_blank"
              rel="noreferrer"
            >
              创建资产
            </a>
            ！
          </span>
        )}
      </div>
      <Modal width={1500} visible={visible} onCancel={() => setVisible(false)} onOk={handleOk}>
        <div className={styles['existring-ads-list']}>
          <div style={{ width: '16%', marginRight: '16px' }}>
            <ScrollList cRef={adsRef} list={accounts} title="账号名称" onChange={fetchList} />
          </div>
          <div style={{ width: '84%' }}>
            <Search
              addonBefore="资产名称"
              placeholder="请输入关键词搜索"
              allowClear
              onSearch={async (valueSearch: string) =>
                setTableParams({ ...tableParams, asset_name: valueSearch })
              }
              style={{ width: 300, marginBottom: '8px' }}
            />
            <EditableProTable
              rowKey="id"
              loading={tableLoading}
              bordered
              request={async () => ({
                data: dataSource,
                total: dataSource.length,
                success: true,
              })}
              tableAlertRender={false}
              className={styles['exist-table-edit']}
              value={dataSource}
              onChange={(valueNew: any[]) => {
                const newTableData = valueNew.map((item: any, index: number) => {
                  // 深度优化目标的值改变时，清空本条数据的深度出价方式的值
                  if (item.id === dataSource[index].id) {
                    if (item.deep_external_action !== dataSource[index].deep_external_action) {
                      return { ...item, deep_bid_type: undefined };
                    }
                    return item;
                  }
                  return item;
                });
                setDataSource(newTableData);
              }}
              controlled
              recordCreatorProps={false}
              editable={{
                type: 'multiple',
                editableKeys,
                actionRender: undefined,
                onChange: setEditableRowKeys,
              }}
              scroll={{ y: 320, x: 'max-content' }}
              columns={tableColumns}
              tableRender={undefined}
              pagination={false}
              rowSelection={{
                type: 'radio',
                selectedRowKeys: keys,
                onChange: (selectedRowKeys: any, selectedRows: any) => {
                  if (data && data.length) {
                    // hasAccount = 当前账号是否存在
                    const hasAccount = data.filter((item) => item.account_id === targetAccount);
                    if (hasAccount && hasAccount.length) {
                      const newList = data.map((item: API.AssetsProps) => {
                        if (item.account_id === targetAccount) {
                          return selectedRows[0];
                        }
                        return item;
                      });
                      setData(newList);
                    } else {
                      setData([...data, ...selectedRows]);
                    }
                  } else {
                    setData(selectedRows);
                  }
                },
              }}
            />
            {dataSource && dataSource.length ? <p>共 {dataSource.length} 条</p> : null}
          </div>
        </div>
      </Modal>
    </>
  );
};

export default AssetsTable;