项目关注列表 - 关注项目，方便管理

import { queryDict } from '@/services/common'; import ProForm, { 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, Space } from 'antd'; import { PlusCircleOutlined } from '@ant-design/icons'; import { getProjectList } from '@/services/project/new/built'; import { useModel } from 'umi'; import { isArray } from 'lodash'; import { option } from 'yargs'; import { TYPE_PROJECT } from '@/constant/new'; import { log } from 'util'; interface Props { children: React.ReactElement; }

interface ListItem { projectName: string; projectChip: string; projectType: string; publicTime: string; id: string; releaseTime: string; key: React.Key; }

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

/*** 获取项目列表*/ 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); return data; } catch (error) { setSelectOptions([]); return []; } };

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

const columns: ProColumns[] = [ { dataIndex: 'index', valueType: 'indexBorder', width: 50, }, { title: '机芯', dataIndex: 'projectChip', align: 'center', readonly: true, }, { title: '项目ID', dataIndex: 'id', align: 'center', readonly: true, width: 100, }, { title: '软件项目名称', dataIndex: 'projectName', valueType: 'select', fieldProps: { options: selectOptions, fieldNames: { label: 'projectName', value: 'projectName', }, onChange: (val: string, option: ProjectInfoDetail) => { const { projectName, id, projectChip, projectType } = option; const newData = focusData.map((item:any) => { if (item.key === record.key) { return { ...item, projectName, id, projectChip, projectType, }; } return item; }); console.log(newData, 98);

      setFocusData(newData);
      actionRef.current?.reloadAndRest?.();
    },
  },
},
{
  title: '项目类型',
  dataIndex: 'projectType',
  readonly: true,
  align: 'center',
  width: 120,
  valueEnum: TYPE_PROJECT,
},
{
  title: '操作',
  dataIndex: 'opeation',
  width: 100,
},

]; return ( <> {React.cloneElement(children, { onClick: () => { setVisible(true); }, })} <ModalForm title='我关注的项目' visible={visible} submitter={{ searchConfig: { submitText: '保存', resetText: '取消', }, }} modalProps={{ destroyOnClose: true, onCancel: () => { setVisible(false); }, }} layout='horizontal' > <EditableProTable value={focusData} columns={columns} actionRef={actionRef} rowKey='id' recordCreatorProps={false} editable={{ type: 'multiple', editableKeys, onChange: setEditableRowKeys, actionRender: (row, config, defaultDoms) => { return []; }, }} onValuesChange={(changedValues, record) => { console.log(changedValues,'changedValues',);

          const index = focusData.findIndex((item: any) => item.key === record.key);
          if (index !== -1) {
            const newData = [...focusData];
            newData[index] = { ...newData[index], ...changedValues };
            setFocusData(newData);
          }
        }}
      />
    </ProForm>

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

); }; export default React.memo(ModalFocus);

record.key找不到名称“record”内容：这个错误通常是因为代码中使用了变量或参数名“record”，但实际上并没有定义该变量或参数。需要检查代码中是否有定义该变量或参数，或者可能需要重新命名变量或参数以避免冲突。