关注项目弹窗 - 可编辑项目列表

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';

interface Props { children: React.ReactElement; }

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

interface ProjectInfoDetail { projectChip: string; id: string; }

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', // render: (, record) => ( // <Link // onClick={() => { // history.push(/project/operation/home?projectId=${record.id}); // }} // > // {record.projectName} // // ), fieldProps: { options: selectOptions, fieldNames: { label: 'projectName', value: 'id', }, onChange:(val:string,option:any)=>{ console.log(val,95,option); option.find((item:projectTypeItem[])=>{item.id==val}); const optionData={
projectChip:option.projectChip,
}
} }, }, { title: '项目类型', dataIndex: 'projectType', readonly: true, align: 'center', width: 100, // request: async () => { // const { data } = await queryDict({ types: ['projectType'] }); // return data[0].enumTypeVOS; // }, }, { title: '操作', dataIndex: 'opeation', width: 100, }, ]; return ( <> {React.cloneElement(children, { onClick: () => { setVisible(true); }, // type: 'primary', })} <ModalForm title="我关注的项目" visible={visible} submitter={{ searchConfig: { submitText: '保存', resetText: '取消', }, }} modalProps={{ destroyOnClose: true, onCancel: () => { setVisible(false); }, }} layout="horizontal" > {/* <ProForm.Item name="dataSource" trigger="onValuesChange" style={{ margin: '0' }}> */} <EditableProTable value={focusData} columns={columns} actionRef={actionRef} rowKey="id" recordCreatorProps={false} editable={{ type: 'multiple', editableKeys, // onSave: async (, row) => { // try { // const { code, msg } = row.id // ? await updateRoleConfigList(row) // : await addRoleConfigList(row); // if (code !== 100000) throw new Error(msg); // message.success('保存成功！'); // } catch (error) {}
// fetchList(); // }, onChange: setEditableRowKeys, actionRender: (row, config, defaultDoms) => { return []; }, }} /> {/* </ProForm.Item> */}

    <Space>
      <Button
        style={{ border: '1px' }}
        onClick={() => {
          // actionRef.current?.addEditRecord?.({
          //   key: getOnlyKey(),
          // });
          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);