数据源管理样式调整

src/index.less

@@ -102,5 +102,6 @@ div[id^='__qiankun_microapp_wrapper_'] {
   pointer-events: auto !important;
 }
 
-
-
+.yy-typography, .yy-typography p {
+  margin-bottom: 0 !important;
+}

src/view/Manage/AssetManage/Component/AssetItem.less

@@ -2,8 +2,4 @@
   .yy-divider-horizontal {
     margin: 0 !important;
   }
-
-  .yy-typography, .yy-typography p {
-    margin-bottom: 0 !important;
-  }
 }
\ No newline at end of file

src/view/Manage/AssetManage/Component/AssetTable.jsx

@@ -295,7 +295,6 @@ const AssetTable = (props) =>{
         value={ selectedKeys }
       >
         <List
-          loading={loading}
           itemLayout="vertical"
           dataSource={ assets||[] }
           footer={null}

src/view/Manage/AssetManage/Component/FilterElement.less

@@ -2,7 +2,4 @@
   .yy-divider-horizontal {
     margin: 0 !important;
   }
-  .yy-typography, .yy-typography p {
-    margin-bottom: 0 !important;
-  }
 }
\ No newline at end of file

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

+import React, { useEffect, useState } from 'react';
+import { Row, Col, Typography, Divider } from 'antd';
+
+import TaskItem from './TaskItem';
+import { dispatch } from '../../../../model';
+
+import './DatasourceItem.less';
+
+const DatasourceItem = (props) => {
+  const { data, onStartTask, onEditTask, onDeleteTask } = props;
+  const [ expanded, setExpanded ] = useState(false);
+  const [ tasks, setTasks ] = useState(null);
+
+  useEffect(() => {
+    getTasks();
+  }, [])
+
+  const getTasks = () => {
+    dispatch({
+      type: 'datasource.getTasksByDatasourceId',
+      payload: {
+        datasourceId: data.id
+      },
+      callback: data => {
+        setTasks(data);
+      }
+    })
+  }
+
+  
+  return (
+    <div className="datasource-item">
+      <Row>
+      {
+        data && (data.targetParameters||[]).map((param, index) => {
+          return param.show ? (
+            <Col className='mt-1' key={index} md={8}>
+              <Typography.Paragraph title={ `${param.cnName||''}: ${param.value||''}` } ellipsis>
+              { `${param.cnName||''}: ${param.value||''}` }
+              </Typography.Paragraph>
+            </Col>
+          ) : null;
+        })
+      }
+      {
+        data && data.credential && (data.credential.credentialParameters||[]).map((param, index) => {
+          return param.show ? (
+            <Col className='mt-1' key={index} md={8}>
+              <Typography.Paragraph title={ `${param.cnName||''}: ${param.value||''}` } ellipsis>
+              { `${param.cnName||''}: ${param.value||''}` }
+              </Typography.Paragraph>
+            </Col>
+          ) : null;
+        })
+      }
+      </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>
+          );
+        })
+      }
+      </Row>
+    </div>
+  );
+}
+
+export default DatasourceItem;
\ No newline at end of file

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

+.datasource-item {
+  .yy-divider-horizontal {
+    margin: 15px 0 !important;
+  }
+}
\ No newline at end of file

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

+import React from 'react';
+import { List, Space, Button, Tooltip } from "antd";
+import { EditOutlined, DiffOutlined, DeleteOutlined } from '@ant-design/icons';
+
+import DatasourceItem from './DatasourceItem';
+
+const DatasourceList = (props) => {
+
+  const { loading, data, onEdit, onAddTask, onDelete, onStartTask, onEditTask, onDeleteTask } = props;
+
+  return (
+    <List
+      loading={loading}
+      itemLayout="vertical"
+      dataSource={ data||[] }
+      footer={null}
+      renderItem={(item, index) => {
+
+        let title = '';
+        (item.targetParameters||[]).forEach(item => {
+          if (item.name === 'name') {
+            title = item.value||'';
+          }
+        })
+
+        return (
+          <List.Item key={index}>
+            <List.Item.Meta
+              title={
+                <div className='d-flex' style={{ alignItems: 'center' }}>
+                  <div className='textOverflow' style={{ flex: 1 }}>
+                    <span title={title}>{title}</span>
+                  </div>
+                  <Space className='mx-3' style={{ marginLeft: 'auto' }} size='small'>
+                    <Tooltip placement='bottom' title={'修改'}>
+                      <Button icon={<EditOutlined />} size='small' onClick={() => { onEdit && onEdit(item); }} />
+                    </Tooltip>
+                    <Tooltip placement='bottom' title={'新增任务'}>
+                      <Button icon={<DiffOutlined />} size='small' onClick={() => { onAddTask && onAddTask(item); }} />
+                    </Tooltip>
+                    <Tooltip placement='bottom' title={'删除'}>
+                      <Button icon={<DeleteOutlined />} size='small' onClick={() => { onDelete && onDelete(item); }} />
+                    </Tooltip>
+                  </Space>
+                </div>
+              }
+              description={ <DatasourceItem data={item} onStartTask={onStartTask} onEditTask={onEditTask} onDeleteTask={onDeleteTask} /> }
+            />
+          </List.Item>
+        );
+      }}
+    />
+  );
+}
+
+export default DatasourceList;
\ No newline at end of file

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

+import React from 'react';
+import { Card, Typography, Space, Button, Tooltip } from 'antd';
+import { EditOutlined, DeleteOutlined, DatabaseOutlined } from '@ant-design/icons';
+
+import './TaskItem.less';
+
+const TaskItem = (props) => {
+  const { data, onStart, onEdit, onDelete } = props;
+  
+  return (
+    <Card className='task-item'>
+      <div style={{ height: 80, overflow: 'auto' }}>
+      {
+        data && (data.targetConfParameters||[]).map((param, index) => {
+          return (
+            <Typography.Paragraph className='mt-1' key={index} title={ `${param.cnName||''}: ${param.value||''}` } ellipsis>
+            { `${param.cnName||''}: ${param.value||''}` }
+            </Typography.Paragraph>
+          );
+        })
+      }
+      </div>
+      <div className='d-flex mt-2'>
+        <Space style={{ marginLeft: 'auto' }}>
+          <Tooltip placement='bottom' title='抽取'>
+            <Button icon={<DatabaseOutlined />} size='small' onClick={() => { onStart && onStart(data); }} />
+          </Tooltip>
+          <Tooltip placement='bottom' title='修改'>
+            <Button icon={<EditOutlined />} size='small' onClick={() => { onEdit && onEdit(data); }} />
+          </Tooltip>
+          <Tooltip placement='bottom' title='删除'>
+            <Button icon={<DeleteOutlined />} size='small' onClick={() => { onDelete && onDelete(data); }} />
+          </Tooltip>
+        </Space>
+      </div>
+    </Card>
+  );
+}
+
+export default TaskItem;
\ No newline at end of file

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

+.task-item {
+  .yy-card-body {
+    padding: 15px !important;
+  }
+}
\ No newline at end of file

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

@@ -2,7 +2,6 @@ import React, { useEffect, useState } from 'react';
 import { Modal, Checkbox, Row, Col, Divider, Input, Typography, Form } from 'antd';
 
 import { dispatch } from '../../../../model';
-import './UpdateTaskModal.less';
 
 const UpdateTaskModal = (props) => {
   const { visible, onCancel, action, id, datasourceId } = props;

src/view/Manage/DatasourceManage/Component/UpdateTaskModal.less

-.update-task-modal {
-  .yy-typography, .yy-typography p {
-    margin-bottom: 0 !important;
-  }
-}
\ No newline at end of file

src/view/Manage/DatasourceManage/index.jsx

 import React, { useEffect, useState } from 'react';
-import { Space, Select, Collapse, Tooltip, Button, Typography, Row, Col, Modal } from 'antd';
-import { EditOutlined, DiffOutlined, DeleteOutlined, DatabaseOutlined } from '@ant-design/icons';
+import { Space, Select, Button, Modal } from 'antd';
 
-import { dispatch } from '../../../model';
+import DatasourceList from './Component/DatasourceList';
 import UpdateDatasourceModal from './Component/UpdateDatasourceModal';
 import UpdateTaskModal from './Component/UpdateTaskModal';
+import { dispatch } from '../../../model';
 import { showMessage } from '../../../util';
 
+import './index.less';
+
 const { Option } = Select;
-const { Panel } = Collapse;
 
 const DatasourceManage = () => {
 
@@ -17,13 +18,13 @@ const DatasourceManage = () => {
   const [ datasources, setDatasources ] = useState([]);
   const [ selectedDatabaseKey, setSelectedDatabaseKey ] = useState('');
   const [ loadingDatabases, setLoadingDatabases ] = useState(false);
+  const [ loadingDatasources, setLoadingDatasources ] = useState(false);
   const [ updateDatasourceModalVisible, setUpdateDatasourceModalVisible ] = useState(false);
   const [ updateDatasourceModalAction, setUpdateDatasourceModalAction ] = useState('');
   const [ updateTaskModalVisible, setUpdateTaskModalVisible ] = useState(false);
   const [ updateTaskModalAction, setUpdateTaskModalAction ] = useState('');
   const [ currentDatasourceId, setCurrentDatasourceId ] = useState('');
   const [ currentTaskId, setCurrentTaskId ] = useState('');
-  const [ tasksBindDatasourceId, setTasksBindDatasourceId ] = useState([]);
 
   const [modal, contextHolder] = Modal.useModal();
 
@@ -51,38 +52,18 @@ const DatasourceManage = () => {
   }
 
   const getAllDatasources = () => {
+    setLoadingDatasources(true);
     dispatch({
       type: 'datasource.getAllDatasources',
       payload: {
 
       },
       callback: data => {
+        setLoadingDatasources(false);
         setDatasources(data);
       },
       error: () => {
-
-      }
-    })
-  }
-
-  const getTasksByDatasourceId = (datasourceId) => {
-    dispatch({
-      type: 'datasource.getTasksByDatasourceId',
-      payload: {
-        datasourceId
-      },
-      callback: data => {
-        const index = (tasksBindDatasourceId||[]).findIndex(item => item.datasourceId === datasourceId);
-        if (index === -1) {
-          tasksBindDatasourceId.push({ datasourceId, tasks: data||[] });
-        } else {
-          tasksBindDatasourceId.splice(index, 1, { datasourceId, tasks: data||[] })
-        }
-        setTasksBindDatasourceId([...tasksBindDatasourceId]);
-        setDatasources([...datasources]);
-      },
-      error: () => {
-
+        setLoadingDatasources(false);
       }
     })
   }
@@ -120,18 +101,6 @@ const DatasourceManage = () => {
     });
   }
 
-  const onCollapseChange = (keys) => {
-    let key = '';
-    if ((keys||[]).length>0) {
-      key = Number(keys[keys.length-1]);
-    }
-
-    const index = (tasksBindDatasourceId||[]).findIndex(item => item.datasourceId === key);
-    if (index === -1) {
-      getTasksByDatasourceId(key);
-    }
-  }
-
   const onUpdateDatasourceModalCancel = () => {
     setUpdateDatasourceModalVisible(false);
   }
@@ -220,91 +189,19 @@ const DatasourceManage = () => {
           <Button type='primary' onClick={addDatasource}>新增数据源</Button>
         </Space>
       </div>
-      <Collapse onChange={onCollapseChange}>
-      {
-        (datasources||[]).map((datasource, index) => {
-
-          let _currentTasks = [];
-
-          (tasksBindDatasourceId||[]).forEach(item => {
-            if (item.datasourceId === datasource.id) {
-              _currentTasks = item.tasks||[];
-            }
-          })
       
-          return (
-            <Panel 
-              key={datasource.id||''}
-              header={
-                <Row>
-                {
-                  (datasource.targetParameters||[]).map((param, _index) => {
-                    return (
-                      <Col className='mt-3' key={_index} md={8}>
-                        <Typography.Paragraph title={ `${param.cnName||''}: ${param.value||''}` } ellipsis>
-                        { `${param.cnName||''}: ${param.value||''}` }
-                        </Typography.Paragraph>
-                      </Col>
-                    );
-                  })
-                }
-                </Row>
-              }
-              extra={
-                <Space>
-                  <Tooltip placement='bottom' title={'修改'}>
-                    <Button icon={<EditOutlined />} size='small' onClick={() => { editDatasource(datasource); }} />
-                  </Tooltip>
-                  <Tooltip placement='bottom' title={'新增任务'}>
-                    <Button icon={<DiffOutlined />} size='small' onClick={() => { addTask(datasource); }} />
-                  </Tooltip>
-                  <Tooltip placement='bottom' title={'删除'}>
-                    <Button icon={<DeleteOutlined />} size='small' onClick={() => { deleteDatasource(datasource); }} />
-                  </Tooltip>
-                </Space>
-              }
-            >
-            <>
-            {
-              (_currentTasks||[]).map((task, index) => {
-                return (
-                  <div className='d-flex' key={index} style={{ justifyContent: 'space-between' }}>
-                    <Row style={{ flex: 1 }}>
-                    {
-                      task && (task.targetConfParameters||[]).filter(param => param.name!=='schema').map((_param, _index) => {
-                        return (
-                          <Col key={_index} className='mt-3' md={8}>
-                            <Typography.Paragraph title={ `${_param.cnName||''}: ${_param.value||''}` } ellipsis>
-                            { `${_param.cnName||''}: ${_param.value||''}` }
-                            </Typography.Paragraph>
-                          </Col>
-                        )
-                      })
-                    }
-                    </Row>
-                    <div>
-                      <Space>
-                        <Tooltip placement='bottom' title='抽取'>
-                          <Button icon={<DatabaseOutlined />} size='small' onClick={() => { startTask(task); }} />
-                        </Tooltip>
-                        <Tooltip placement='bottom' title='修改'>
-                          <Button icon={<EditOutlined />} size='small' onClick={() => { editTask(task); }} />
-                        </Tooltip>
-                        <Tooltip placement='bottom' title='删除'>
-                          <Button icon={<DeleteOutlined />} size='small' onClick={() => { deleteTask(task); }} />
-                        </Tooltip>
-                      </Space>
-                    </div>
+      <div className='list-container p-3'>
+        <DatasourceList 
+          loading={loadingDatasources}
+          data={datasources||[]}
+          onEdit={editDatasource}
+          onAddTask={addTask}
+          onDelete={deleteDatasource}
+          onStartTask={startTask}
+          onEditTask={editTask}
+          onDeleteTask={deleteTask}
+        />
       </div>
-                );
-              })
-            }
-            </>
-            </Panel>
-          );
-        })
-      }
-      </Collapse>
 
       <UpdateDatasourceModal 
         visible={updateDatasourceModalVisible}

src/view/Manage/DatasourceManage/index.less

+.datasource-manage {
+  .list-container {
+    height: calc(100vh - 64px - 30px - 53px) !important;
+    overflow: auto !important;
+  }
+}
\ No newline at end of file