优化代码

src/view/Manage/DatasourceManage/Component/ContextManager.js

+import React from 'react';
+
+export const DatasourceContext = React.createContext();
\ No newline at end of file

src/view/Manage/DatasourceManage/Component/DatasourceItem.jsx

-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useContext } from 'react';
 import { Row, Col, Typography, Divider, Spin, Empty } from 'antd';
 
 import TaskItem from './TaskItem';
 import { dispatch } from '../../../../model';
+import { DatasourceContext } from './ContextManager';
 
 import './DatasourceItem.less';
 
 const DatasourceItem = (props) => {
-  const { data, onStartTask, onEditTask, onLogTask, onDeleteTask, expanded, refresh, refreshSuccess, scope } = props;
+  const { data, expanded, refresh, scope } = props;
   const [ tasks, setTasks ] = useState(null);
   const [ loading, setLoading ] = useState(false);
 
+  const { refreshTasksSuccess } = useContext(DatasourceContext);
+
   useEffect(() => {
     if (expanded && !tasks) {
       getTasks();
@@ -42,7 +45,7 @@ const DatasourceItem = (props) => {
       callback: data => {
         setLoading(false);
         setTasks(data);
-        refresh && refreshSuccess && refreshSuccess();
+        refresh && refreshTasksSuccess && refreshTasksSuccess();
       },
       error: () => {
         setLoading(false);
@@ -93,10 +96,6 @@ const DatasourceItem = (props) => {
                     <TaskItem 
                       key={index} 
                       data={task} 
-                      onStart={onStartTask}
-                      onEdit={onEditTask}
-                      onLog={onLogTask}
-                      onDelete={onDeleteTask}
                     />            
                   </Col>
                 );

src/view/Manage/DatasourceManage/Component/DatasourceList.jsx

@@ -6,7 +6,7 @@ import DatasourceItem from './DatasourceItem';
 
 const DatasourceList = (props) => {
 
-  const { loading, data, onEdit, onAddTask, onDelete, onStartTask, onEditTask, onLogTask, onDeleteTask, idBindTasksNeedRefresh, refreshTasksSuccess, scope } = props;
+  const { loading, data, onEdit, onAddTask, onDelete, idBindTasksNeedRefresh, scope } = props;
 
   const [ expandedBindId, setExpandedBindId ] = useState({});
 
@@ -69,7 +69,7 @@ const DatasourceList = (props) => {
                   </Space>
                 </div>
               }
-              description={ <DatasourceItem data={item} scope={scope} expanded={expanded} refresh={idBindTasksNeedRefresh===item.id} onStartTask={onStartTask} onEditTask={onEditTask} onLogTask={onLogTask} onDeleteTask={onDeleteTask} refreshSuccess={refreshTasksSuccess} /> }
+              description={ <DatasourceItem data={item} scope={scope} expanded={expanded} refresh={idBindTasksNeedRefresh===item.id} /> }
             />
           </List.Item>
         );

src/view/Manage/DatasourceManage/Component/TaskItem.jsx

-import React from 'react';
+import React, { useContext } from 'react';
 import { Card, Typography, Space, Button, Tooltip } from 'antd';
 import { EditOutlined, DeleteOutlined, DatabaseOutlined, FileOutlined } from '@ant-design/icons';
 
+import { DatasourceContext } from './ContextManager';
 import './TaskItem.less';
 
 const TaskItem = (props) => {
-  const { data, onStart, onEdit, onDelete, onLog } = props;
+  const { data } = props;
   
+  const { onStartTask, onLogTask, onEditTask, onDeleteTask } = useContext(DatasourceContext);
+
   return (
     <Card className='task-item'>
       <div style={{ height: 80, overflow: 'auto' }}>
@@ -23,16 +26,16 @@ const TaskItem = (props) => {
       <div className='d-flex mt-2'>
         <Space style={{ marginLeft: 'auto' }}>
           <Tooltip placement='bottom' title='抽取'>
-            <Button icon={<DatabaseOutlined />} size='small' onClick={() => { onStart && onStart(data); }} />
+            <Button icon={<DatabaseOutlined />} size='small' onClick={() => { onStartTask && onStartTask(data); }} />
           </Tooltip>
           <Tooltip placement='bottom' title='日志'>
-            <Button icon={<FileOutlined />} size='small' onClick={() => { onLog && onLog(data); }} />
+            <Button icon={<FileOutlined />} size='small' onClick={() => { onLogTask && onLogTask(data); }} />
           </Tooltip>
           <Tooltip placement='bottom' title='修改'>
-            <Button icon={<EditOutlined />} size='small' onClick={() => { onEdit && onEdit(data); }} />
+            <Button icon={<EditOutlined />} size='small' onClick={() => { onEditTask && onEditTask(data); }} />
           </Tooltip>
           <Tooltip placement='bottom' title='删除'>
-            <Button icon={<DeleteOutlined />} size='small' onClick={() => { onDelete && onDelete(data); }} />
+            <Button icon={<DeleteOutlined />} size='small' onClick={() => { onDeleteTask && onDeleteTask(data); }} />
           </Tooltip>
         </Space>
       </div>

src/view/Manage/DatasourceManage/Component/TaskLogModal.jsx

 import React, { useState, useEffect } from 'react';
-import { Modal, Table, Typography, Spin, Empty, Button, DatePicker } from 'antd';
+import { Modal, Table, Typography, Spin, Empty, Button } from 'antd';
 
 import { dispatch } from '../../../../model';
 

src/view/Manage/DatasourceManage/index.jsx

@@ -8,6 +8,7 @@ import TaskLogModal from './Component/TaskLogModal';
 import UpdateTaskModal from './Component/UpdateTaskModal';
 import { dispatch } from '../../../model';
 import { showMessage } from '../../../util';
+import { DatasourceContext } from './Component/ContextManager.js';
 
 import './index.less';
 
@@ -265,6 +266,13 @@ const DatasourceManage = () => {
   }
 
   return (
+    <DatasourceContext.Provider value={{
+      refreshTasksSuccess: refreshTasksSuccess,
+      onStartTask: startTask,
+      onLogTask: logTask,
+      onEditTask: editTask,
+      onDeleteTask: deleteTask,
+    }}>
     <div className='datasource-manage' style={{ backgroundColor: '#fff' }}>
       <div
         className='d-flex p-3'
@@ -313,11 +321,6 @@ const DatasourceManage = () => {
           onEdit={editDatasource}
           onAddTask={addTask}
           onDelete={deleteDatasource}
-          onStartTask={startTask}
-          onEditTask={editTask}
-          onLogTask={logTask}
-          onDeleteTask={deleteTask}
-          refreshTasksSuccess={refreshTasksSuccess}
         />
       </div>
 
@@ -353,6 +356,7 @@ const DatasourceManage = () => {
       
       {contextHolder}  
     </div>
+    </DatasourceContext.Provider>
   );
 }