项目关注列表 - Ant Design Pro Table 可编辑表格

import { ModalForm, ProFormInstance } from '@ant-design/pro-form'; import { ActionType, EditableFormInstance, 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 { entity: any; projectName: string; projectChip: string; projectType: string; publicTime: string; id: string; releaseTime: string; rowIndex: string; }

const ModalFocus: React.FC<React.PropsWithChildren> = (props) => { const { children, refresh } = props; const [visible, setVisible] = useState(false); const actionRef = useRef(); const { initialState } = useModel('@@initialState'); const { currentUser } = initialState || {}; const [editableKeys, setEditableRowKeys] = useState<React.Key[]>([]); const [focusData, setFocusData] = useState([]); const [selectOptions, setSelectOptions] = useState<ProjectInfoDetail[]>([]); const [redioValue, setRedioValue] = useState(); const [projectOptions, setProjectOptions] = useState<ProjectInfoDetail[]>([]); const formRef = useRef(); const editableFormRef = useRef(null); /*** 获取项目列表*/ 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); setProjectOptions(data); } catch (error) { setSelectOptions([]); setProjectOptions([]); } };

/**列表/ const getUser = async () => { try { const { data } = await getUserList({ oaName: initialState?.currentUser?.userName }); const newData = data.map((item: any) => { if (item.isNew) return item; const defaultProject = projectOptions.find((option) => option.id === item.projectId); return { ...item, chip: defaultProject?.projectChip, projectType: defaultProject?.projectType, }; }); setFocusData(newData); } catch (error) {} };

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

const valueChange = (e: RadioChangeEvent) => { setRedioValue(e.target.value); }; const columns: ProColumns[] = [ { 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) => { const defaultProject = projectOptions.find((item) => item.id === record.projectId); return { fieldNames: { label: 'projectName', value: 'id' }, options: selectOptions, defaultValue: defaultProject ? defaultProject.id : undefined, 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);
        editableFormRef?.current?.setRowData?.(currentRowIndex, {
          chip: updatedRowData.chip,
          projectId: updatedRowData.projectId,
          projectType: updatedRowData.projectType,
        });
        setEditableRowKeys([...editableKeys, id]);
        // console.log(updatedFocusData, 130);
      },
    };
  },
},
{
  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: item.isNew ? undefined : item.id, deleted: redioValue})); // console.log(updatedFocusData,161); // return 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) => {dom}, submitButtonProps: {onClick: handleSave}}} modalProps={{destroyOnClose: true, onCancel: () => {setVisible(false)}}} layout="horizontal" formRef={formRef} onVisibleChange={(isVisible) => { if (isVisible) { formRef.current?.resetFields(); setEditableRowKeys(focusData.map((item: any) => item.id)); } else { setEditableRowKeys([]); } }} > <EditableProTable value={focusData} columns={columns} editableFormRef={editableFormRef} actionRef={actionRef} rowKey="id" recordCreatorProps={false} editable={{type: 'multiple', editableKeys, onChange: setEditableRowKeys, actionRender: (row, config, defaultDoms) => {return [];}}} onChange={(dataSource) => { setFocusData(dataSource); }} />

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

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