展开任务

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

@@ -7,13 +7,16 @@ import { dispatch } from '../../../../model';
 import './DatasourceItem.less';
 
 const DatasourceItem = (props) => {
-  const { data, onStartTask, onEditTask, onDeleteTask } = props;
-  const [ expanded, setExpanded ] = useState(false);
+  const { data, onStartTask, onEditTask, onDeleteTask, expanded } = props;
   const [ tasks, setTasks ] = useState(null);
 
   useEffect(() => {
-    getTasks();
-  }, [])
+    if (expanded && !tasks) {
+      getTasks();
+    }
+
+    //eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [expanded])
 
   const getTasks = () => {
     dispatch({
@@ -54,24 +57,28 @@ const DatasourceItem = (props) => {
         })
       }
       </Row>
-      <Divider />
-      <Row gutter={10}>
       {
-        (tasks||[]).map((task, index) => {
-          return (
-            <Col key={index} md={8}>
-              <TaskItem 
-                key={index} 
-                data={task} 
-                onStart={onStartTask}
-                onEdit={onEditTask}
-                onDelete={onDeleteTask}
-              />            
-            </Col>
-          );
-        })
+        expanded && <>
+          <Divider />
+          <Row gutter={10}>
+          {
+            (tasks||[]).map((task, index) => {
+              return (
+                <Col key={index} md={8}>
+                  <TaskItem 
+                    key={index} 
+                    data={task} 
+                    onStart={onStartTask}
+                    onEdit={onEditTask}
+                    onDelete={onDeleteTask}
+                  />            
+                </Col>
+              );
+            })
+          }
+          </Row>
+        </>
       }
-      </Row>
     </div>
   );
 }

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

-import React from 'react';
+import React, { useState } from 'react';
 import { List, Space, Button, Tooltip } from "antd";
-import { EditOutlined, DiffOutlined, DeleteOutlined } from '@ant-design/icons';
+import { EditOutlined, DiffOutlined, DeleteOutlined, DatabaseOutlined } from '@ant-design/icons';
 
 import DatasourceItem from './DatasourceItem';
 
@@ -8,6 +8,18 @@ const DatasourceList = (props) => {
 
   const { loading, data, onEdit, onAddTask, onDelete, onStartTask, onEditTask, onDeleteTask } = props;
 
+  const [ expandedBindId, setExpandedBindId ] = useState({});
+
+  const onExpanded = (item) => {
+    if (expandedBindId.hasOwnProperty(item.id)) {
+      expandedBindId[item.id] = !expandedBindId[item.id];
+    } else {
+      expandedBindId[item.id] = true;
+    }
+
+    setExpandedBindId({...expandedBindId});
+  }
+
   return (
     <List
       loading={loading}
@@ -16,13 +28,17 @@ const DatasourceList = (props) => {
       footer={null}
       renderItem={(item, index) => {
 
-        let title = '';
+        let title = '', expanded = false;
         (item.targetParameters||[]).forEach(item => {
           if (item.name === 'name') {
             title = item.value||'';
           }
         })
 
+        if (expandedBindId.hasOwnProperty(item.id)) {
+          expanded = expandedBindId[item.id];
+        }
+
         return (
           <List.Item key={index}>
             <List.Item.Meta
@@ -41,10 +57,13 @@ const DatasourceList = (props) => {
                     <Tooltip placement='bottom' title={'删除'}>
                       <Button icon={<DeleteOutlined />} size='small' onClick={() => { onDelete && onDelete(item); }} />
                     </Tooltip>
+                    <Tooltip placement='bottom' title={'任务列表'}>
+                      <Button icon={<DatabaseOutlined />} size='small' onClick={() => { onExpanded(item); }} />
+                    </Tooltip>
                   </Space>
                 </div>
               }
-              description={ <DatasourceItem data={item} onStartTask={onStartTask} onEditTask={onEditTask} onDeleteTask={onDeleteTask} /> }
+              description={ <DatasourceItem data={item} expanded={expanded} onStartTask={onStartTask} onEditTask={onEditTask} onDeleteTask={onDeleteTask} /> }
             />
           </List.Item>
         );

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

@@ -150,7 +150,7 @@ const UpdateDatasourceModal = (props) => {
         },
         callback: data => {
           setConfirmLoading(false);
-          onCancel && onCancel();
+          onCancel && onCancel(true);
         },
         error: () => {
           setConfirmLoading(false);

src/view/Manage/DatasourceManage/index.jsx

@@ -16,6 +16,7 @@ const DatasourceManage = () => {
   const [ rawSupportDatabases, setRawSupportDatabases ] = useState([]);
   const [ supportDatabases, setSupportDatabases ] = useState([]);
   const [ datasources, setDatasources ] = useState([]);
+  const [ filterDatasources, setFilterDatasources ] = useState([]);
   const [ selectedDatabaseKey, setSelectedDatabaseKey ] = useState('');
   const [ loadingDatabases, setLoadingDatabases ] = useState(false);
   const [ loadingDatasources, setLoadingDatasources ] = useState(false);
@@ -43,7 +44,7 @@ const DatasourceManage = () => {
         setRawSupportDatabases(data||[]);
         setSupportDatabases([{ targetType: 'all', targetName: '全部类型' }, ...(data||[])]);
         setSelectedDatabaseKey('all');
-        getAllDatasources();
+        getAllDatasources('all');
       },
       error: () => {
         setLoadingDatabases(false);
@@ -51,7 +52,7 @@ const DatasourceManage = () => {
     })
   }
 
-  const getAllDatasources = () => {
+  const getAllDatasources = (dbKey = selectedDatabaseKey) => {
     setLoadingDatasources(true);
     dispatch({
       type: 'datasource.getAllDatasources',
@@ -61,6 +62,7 @@ const DatasourceManage = () => {
       callback: data => {
         setLoadingDatasources(false);
         setDatasources(data);
+        setFilterDatasources((data||[]).filter(item=>dbKey==='all'||item.type===dbKey));
       },
       error: () => {
         setLoadingDatasources(false);
@@ -70,6 +72,7 @@ const DatasourceManage = () => {
 
   const onDatabaseChange = (value) => {
     setSelectedDatabaseKey(value);
+    setFilterDatasources((datasources||[]).filter(item=>value==='all'||item.type===value));
   }
 
   const addDatasource = () => {
@@ -95,14 +98,16 @@ const DatasourceManage = () => {
           },
           callback: () => {
             showMessage('success', '删除数据源成功');
+            getAllDatasources();
           }
         });
       }
     });
   }
 
-  const onUpdateDatasourceModalCancel = () => {
+  const onUpdateDatasourceModalCancel = (refresh = false) => {
     setUpdateDatasourceModalVisible(false);
+    refresh && getAllDatasources();
   }
 
   const addTask = (datasource) => {
@@ -193,7 +198,7 @@ const DatasourceManage = () => {
       <div className='list-container p-3'>
         <DatasourceList 
           loading={loadingDatasources}
-          data={datasources||[]}
+          data={filterDatasources||[]}
           onEdit={editDatasource}
           onAddTask={addTask}
           onDelete={deleteDatasource}