Ant Design Pro Table 项目选择弹窗组件优化

本文将针对 Ant Design Pro Table 项目选择弹窗组件中选择项目名称时机芯和项目ID未展示的问题进行优化。

问题分析

根据代码分析，可以看出是因为在 ProColumns 中的 fieldProps 函数中，没有将机芯和项目id的值赋给表格中的数据，导致展示时没有显示出来。

解决方法

在 onChange 函数中更新表格中的数据时，将机芯和项目id的值也更新进去。

const updatedRowData = {
  ...currentRowData,
  chip: projectChip,
  projectType,
  projectId: id,
  projectName,
  oaName: initialState?.currentUser?.userName,
};
const updatedFocusData = [...focusData];
updatedFocusData[currentRowIndex] = updatedRowData;
setFocusData(updatedFocusData);
setEditableRowKeys([...editableKeys, id]);

代码示例

import { ModalForm, ProFormInstance } from '@ant-design/pro-form';
import { ActionType, EditableProTable, ProColumns } from '@ant-design/pro-table';
import React, { useEffect, useRef, useState } from 'react';
import { getOnlyKey } from '@/utils/utils';
import { Button, Radio, RadioChangeEvent, Space, message } from 'antd';
import { PlusCircleOutlined } from '@ant-design/icons';
import { getProjectList, getSave } from '@/services/project/new/built';
import { useModel } from 'umi';
import { isArray } from 'lodash';
import { TYPE_PROJECT } from '@/constant/new';
import { getUserList } from '@/services/project/home/index';

interface Props {
  children: React.ReactElement;
  refresh: () => void;
}

interface ListItem {
  projectName: string;
  projectChip: string;
  projectType: string;
  publicTime: string;
  id: string;
  releaseTime: string;
  rowIndex: string;
}

const ModalFocus: React.FC<React.PropsWithChildren<Props>> = (props) => {
  const { children, refresh } = props;
  const [visible, setVisible] = useState<boolean>(false);
  const actionRef = useRef<ActionType>();
  const { initialState } = useModel('@@initialState');
  const { currentUser } = initialState || {};
  const [editableKeys, setEditableRowKeys] = useState<React.Key[]>([]);
  const [focusData, setFocusData] = useState<any>([]);
  const [selectOptions, setSelectOptions] = useState<ProjectInfoDetail[]>([]);
  const [redioValue, setRedioValue] = useState('');
  const formRef = useRef<ProFormInstance>();

  /*** 获取项目列表*/
  const getProjectOptions = async () => {
    try {
      const { data } = await getProjectList({
        projectStatuses: ['PROGRESSING', 'INIT', 'PAUSED', 'FINISH'],
        createBy: currentUser?.userName || '',
        userId: currentUser?.userId || '',
      });
      if (!isArray(data)) throw new Error('暂无已建项目列表！');
      setSelectOptions(data);
    } catch (error) {
      setSelectOptions([]);
    }
  };

  /***列表*/
  const getUser = async () => {
    try {
      const { data } = await getUserList({ oaName: initialState?.currentUser?.userName });
      setFocusData(data);
    } catch (error) {}
  };

  useEffect(() => {
    getProjectOptions();
    getUser();
   }, []);

  const valueChange = (e: RadioChangeEvent) => {
    setRedioValue(e.target.value);
  };
  const columns: ProColumns<ListItem>[] = [
    {
      dataIndex: 'index',
      valueType: 'indexBorder',
      width: 50,
    },
    {
      title: '机芯',
      dataIndex: 'chip',
      align: 'center',
      readonly: true,
    },
    {
      title: '项目ID',
      dataIndex: 'projectId',
      align: 'center',
      readonly: true,
      width: 100,
    },
    {
      title: '软件项目名称',
      dataIndex: 'projectName',
      valueType: 'select',
      readonly: false,
      fieldProps: (text: string, record: ListItem) => {
        return {
          fieldNames: { label: 'projectName', value: 'id' },
          options: selectOptions,
          onChange: (value: string, option: any) => {
            const { projectChip, id, projectType, projectName } = option;
            const currentRowIndex = record.rowIndex;
            const currentRowData = focusData[currentRowIndex];
            const updatedRowData = {
              ...currentRowData,
              chip: projectChip,
              projectType,
              projectId: id,
              projectName,
              oaName: initialState?.currentUser?.userName,
            };
            const updatedFocusData = [...focusData];
            updatedFocusData[currentRowIndex] = updatedRowData;
            setFocusData(updatedFocusData);
            setEditableRowKeys([...editableKeys, id]);
            console.log(updatedFocusData,115);
            
          },
        };
      },
    },
    {
      title: '项目类型',
      dataIndex: 'projectType',
      readonly: true,
      align: 'center',
      width: 120,
      valueEnum: TYPE_PROJECT,
    },
    {
      title: '操作',
      dataIndex: 'opeation',
      width: 140,
      renderFormItem: () => {
        return (
          <Radio.Group value={redioValue} onChange={valueChange}>
            <Radio value={1}>已关注</Radio>
            <Radio value={0}>已取消关注</Radio>
          </Radio.Group>
        );
      },
    },
  ];
  const handleSave = async () => {
    try {
      const updatedFocusData = focusData.map((item: any) => ({  
        ...item,
        id: undefined,
        deleted: redioValue, // 将 redioValue 值赋给 deleted 字段
      }));
      const { code, msg } = await getSave({ userCareProjectList: updatedFocusData });
      if (code !== 100000) throw new Error(msg);
      message.success('保存成功');
      setVisible(false);
      if (refresh) refresh();
    } catch (error) {}
  };
  return (
    <>
      {React.cloneElement(children, {
        onClick: () => {
          setVisible(true);
        },
      })}
      <ModalForm
        title="我关注的项目"
        visible={visible}
        submitter={{  
          searchConfig: {
            submitText: '保存',
            resetText: '取消',
          },
          render: (_, dom) => <Space>{dom}</Space>,
          submitButtonProps: {
            onClick: handleSave, // 点击保存按钮时调用 handleSave 函数
          },
        }}
        modalProps={{  
          destroyOnClose: true,
          onCancel: () => {
            setVisible(false);
          },
        }}
        layout="horizontal"
        formRef={formRef}
        onVisibleChange={(visible) => {
          if (visible) {
            formRef.current?.resetFields(); // 重置表单
            setEditableRowKeys(focusData.map((item: any) => item.id)); // 设置表格可编辑行
          } else {
            setEditableRowKeys([]); // 清空表格可编辑行
          }
        }}
      >
        <EditableProTable
          value={focusData}
          columns={columns}
          actionRef={actionRef}
          rowKey="id"
          recordCreatorProps={false}
          editable={{  
            type: 'multiple',
            editableKeys,
            onChange: setEditableRowKeys,
            actionRender: (row, config, defaultDoms) => {
              return [];
            },
          }}
          onChange={(dataSource) => {
            const newData = dataSource.map((item, rowIndex) => {
              const rowData = focusData.find((row: any) => row.id === item.id) || {};
              return {
                ...rowData,
                ...item,
              };
            });
            setFocusData(newData);
          }}
        />

        <Space>
          <Button
            style={{ border: '1px' }}
            onClick={() => {
              const data = [...focusData];
              const newId = getOnlyKey();
              data.push({ id: newId });
              setFocusData(data);
              setEditableRowKeys([...editableKeys, newId]);
            }}
          >
            <PlusCircleOutlined />
          </Button>
        </Space>
      </ModalForm>
    </>
  );
};

export default React.memo(ModalFocus);

通过以上优化，在选择项目名称时，机芯和项目ID将能够正常展示在表格中。