资产管理列表优化

src/model/assetmanage.js

@@ -25,6 +25,10 @@ export function* listFilterElements() {
   return yield call(service.listFilterElements);
 }
 
+export function* listFilterElementsGroupByType() {
+  return yield call(service.listFilterElementsGroupByType);
+}
+
 export function* setupFilterElementIds(payload) {
   return yield call(service.setupFilterElementIds, payload);
 }

src/service/dataassetmanager.js

@@ -24,6 +24,10 @@ export function listFilterElements() {
   return GetJSON("/dataassetmanager/elementApi/listFilterElements");
 }
 
+export function listFilterElementsGroupByType() {
+  return GetJSON("/dataassetmanager/elementApi/listFilterElementsGroupByType");
+}
+
 export function setupFilterElementIds(payload) {
   return PostJSON("/dataassetmanager/elementApi/setupFilterElementIds", payload);
 }

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

-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import { Avatar, Row, Col, Typography, Divider } from 'antd';
 
 import './AssetItem.less';
@@ -18,37 +18,12 @@ const colors = [
 const AssetItem = (props) => {
 
   const { data } = props;
-  const [ typesOfElements, setTypesOfElements ] = useState([]);
-
-  useEffect(() => {
-
-    if (data) {
-      convertData();
-    }
-    //eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [ data ]);
-
-  const convertData = () => {
-    const _typesOfElements = [];
-
-    const _types = [];
-
-    data && (data.elements||[]).forEach(element => {
-      if (_types.indexOf(element.type||'') === -1) {
-        _types.push(element.type||'');
-        const _elements =  (data.elements||[]).filter(_element => (_element.type||'') === (element.type||''));
-        _typesOfElements.push({ type: element.type||'', elements: _elements||[] });
-      }
-    })
-
-    setTypesOfElements(_typesOfElements);
-  }
 
   return (
     <div className='asset-item'>
     {
-      (typesOfElements||[]).map((typeOfElements, index) => {
-        const _type = typeOfElements.type||'';
+      (data.elementsGroup||[]).map((elementGroup, index) => {
+        const _type = elementGroup.type||'';
 
         return (
           <div key={index} className='d-flex' style={{ alignItems: 'center' }}>
@@ -64,7 +39,7 @@ const AssetItem = (props) => {
             <div className='textOverflow' style={{ flex: 1 }}>
               <Row className='mb-3'>
               {
-                typeOfElements && typeOfElements.elements && typeOfElements.elements.map((element, _index) => {
+                elementGroup && elementGroup.elements && elementGroup.elements.map((element, _index) => {
                   return (
                     <Col className='mt-3' key={_index} md={8}>
                       <Typography.Paragraph title={ `${element.name||''}: ${element.value||''}` } ellipsis>
@@ -75,7 +50,7 @@ const AssetItem = (props) => {
                 })
               }
               </Row>
-              { index !== ((typesOfElements||[]).length-1) && <Divider /> }
+              { index !== ((data.elementsGroup||[]).length-1) && <Divider /> }
             </div>
           </div>
         )

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

 import React,{ useState, useEffect, useRef } from "react";
-import { Card, Checkbox, Button, List, Skeleton, Pagination, Space, Modal, Switch, Divider, Tooltip, Popover, Input } from "antd";
+import { Card, Checkbox, Button, List, Pagination, Space, Modal, Switch, Divider, Tooltip, Popover, Input, Spin } from "antd";
 import { EditOutlined, ReconciliationOutlined, DeleteOutlined  } from '@ant-design/icons';
 import classNames from 'classnames';
 import SmoothScroll from 'smooth-scroll';
@@ -20,7 +20,7 @@ const AssetTable = (props) => {
 
   const { readOnly = false, className, nodeId } = props;
   const [ loading, setLoading ] = useState(false);
-  const [filterElements, setFilterElements] = useState([]);
+  const [filterElementsGroup, setFilterElementsGroup] = useState([]);
   const [ assetNames, setAssetNames ] = useState([]);
   const [ assets, setAssets ] = useState([]);
   const [ total, setTotal ] = useState(0);
@@ -77,8 +77,8 @@ const AssetTable = (props) => {
 
   useEffect(() => {
     if ((nodeId||'') !== '' ) {
-      if (filterElements.length === 0) {
-        getFilterElementsThenGetDataAssets();
+      if (filterElementsGroup.length === 0) {
+        getFilterElementsGroupThenGetDataAssets();
       } else {
         getDataAssets();
       }
@@ -111,12 +111,12 @@ const AssetTable = (props) => {
     setPagination({ pageNum: page, pageSize: size });
   }
 
-  const getFilterElementsThenGetDataAssets = () => {
+  const getFilterElementsGroupThenGetDataAssets = () => {
     setLoading(true);
     dispatch({
-      type: 'assetmanage.listFilterElements',
+      type: 'assetmanage.listFilterElementsGroupByType',
       callback: data => {
-        setFilterElements(data||[]);
+        setFilterElementsGroup(data||[]);
         getDataAssets(data||[]);
       },
       error: () => {
@@ -125,7 +125,7 @@ const AssetTable = (props) => {
     })
   }
 
-  const getDataAssets = (elments = filterElements) => {
+  const getDataAssets = (elmentsGroup = filterElementsGroup) => {
     setLoading(true);
     dispatch({
       type: 'assetmanage.listDataAssetsByPage',
@@ -141,14 +141,21 @@ const AssetTable = (props) => {
 
         (data.data||[]).forEach((asset, index) => {
 
-          asset.elements = [];
-          (elments||[]).forEach((element, _index) => {
-            asset.elements.push({...element, value: asset.elementValues[_index]});
+          asset.elementsGroup = [];
+          (elmentsGroup||[]).forEach((elementGroup, _index) => {
+            let _processElementGroup = { type: elementGroup.type, elements: [] };
 
-            if (element.name === '中文名称') {
-              _assetNames.push(`${index+1}. ${asset.elementValues[_index]||''}`);
-            }
+            ((elementGroup||[]).names||[]).forEach((name, __index) => {
+              _processElementGroup.elements.push({ name, value: asset?.elementValues[_index].values[__index] });
+
+              if (name === '中文名称') {
+                _assetNames.push(`${index+1}. ${asset?.elementValues[_index].values[__index]||''}`);
+              }
+            });
+
+            asset.elementsGroup.push(_processElementGroup);
           })
+
         })
         
         setAssetNames(_assetNames);
@@ -304,7 +311,7 @@ const AssetTable = (props) => {
 
   const onFilterElementVisibleChange = (visible = false, refresh = false) => {
     setFilterElementVisible(visible);
-    refresh && getFilterElementsThenGetDataAssets();
+    refresh && getFilterElementsGroupThenGetDataAssets();
   }
 
   const onImportElementBtnClick = () => {
@@ -387,18 +394,18 @@ const AssetTable = (props) => {
           </Space>
         </div>
       </div>
-      <Checkbox.Group 
-        style={{ width: '100%' }}
-        onChange={ onAssetCheckboxChange } 
-        value={ selectedKeys }
-      >
-        <List
-          itemLayout="vertical"
-          dataSource={ assets||[] }
-          footer={null}
-          renderItem={(item, index) => (
-            <List.Item id={`data-asset-${item.id||''}`} style={{ backgroundColor: (item.id===anchorId)?'#e7f7ff':'transparent' }}>
-              <Skeleton title={false} loading={loading} active>
+      <Spin spinning={loading} >
+        <Checkbox.Group 
+          style={{ width: '100%' }}
+          onChange={ onAssetCheckboxChange } 
+          value={ selectedKeys }
+        >
+          <List
+            itemLayout="vertical"
+            dataSource={ assets||[] }
+            footer={null}
+            renderItem={(item, index) => (
+              <List.Item id={`data-asset-${item.id||''}`} style={{ backgroundColor: (item.id===anchorId)?'#e7f7ff':'transparent' }}>
                 <List.Item.Meta
                   title={
                     <>
@@ -428,24 +435,24 @@ const AssetTable = (props) => {
                   }
                   description={ <AssetItem data={item} /> }
                 />
-              </Skeleton>
-            </List.Item>
-          )}
-        />
-        <Pagination
-          size="small"
-          className="text-center m-3"
-          showSizeChanger
-          showQuickJumper
-          onChange={changeCurrent}
-          onShowSizeChange={changeCurrent}
-          current={pageNum}
-          pageSize={pageSize}
-          defaultCurrent={1}
-          total={total}
-          showTotal={total => `共 ${total} 条`}
-        />
-      </Checkbox.Group>
+              </List.Item>
+            )}
+          />
+          <Pagination
+            size="small"
+            className="text-center m-3"
+            showSizeChanger
+            showQuickJumper
+            onChange={changeCurrent}
+            onShowSizeChange={changeCurrent}
+            current={pageNum}
+            pageSize={pageSize}
+            defaultCurrent={1}
+            total={total}
+            showTotal={total => `共 ${total} 条`}
+          />
+        </Checkbox.Group>
+      </Spin>
       <AssetEdit 
         visible={assetEditVisible}
         action={assetEditAction}

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

@@ -16,7 +16,7 @@ const CustomDirectoryModal = (props) => {
   const [ keyword, setKeyword ] = useState('');
   const [ data, setData ] = useState([]);
   const [ filterData, setFilterData ] = useState([]);
-  const [ previewTreeData, setPreviewTreeData ] = useState({});
+  const [ previewTreeData, setPreviewTreeData ] = useState(null);
   const [ checkedValues, setCheckedValues ] = useState([]);
   const [ checkedData, setCheckedData ] = useState([]);
   const [ confirmLoading, setConfirmLoading ] = useState(false);
@@ -103,7 +103,7 @@ const CustomDirectoryModal = (props) => {
     setKeyword('');
     setCheckedValues([]);
     setCheckedData([]);
-    setPreviewTreeData({});
+    setPreviewTreeData(null);
     form.resetFields();
   }
 

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

@@ -14,11 +14,11 @@ const ImportDirectory = (props) => {
 
   useEffect(() => {
 
-    if ((dirId||'')!=='') {
+    if (visible && (dirId||'')!=='') {
       getDirectory();
     }
     //eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [ dirId ])
+  }, [ visible, dirId ])
 
   const getDirectory = () => {
     setDir(null);

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

@@ -83,8 +83,12 @@ class PreviewTree extends React.Component {
       plugins: [tooltip],
       modes: {
         default: [
+          {
+            type: 'zoom-canvas',
+            enableOptimize: true,
+          },
           'drag-canvas',
-          'zoom-canvas',
+          'drag-node',
         ],
       },
       defaultNode: {
@@ -95,7 +99,7 @@ class PreviewTree extends React.Component {
         ],
       },
       defaultEdge: {
-        type: 'cubic-horizontal',
+        type: 'line',
         size: 2,
         color: '#e2e2e2',
         style: {

src/view/Manage/Model/Component/ExportDDLModal.jsx

@@ -120,7 +120,7 @@ class ExportDDLModal extends React.Component {
           onCancel && onCancel();
         }}
       >
-      导出到文本
+      导出到文件
       </Button>
     ]) : ([
       <Button

src/view/Manage/Model/Component/ModelTree.jsx

@@ -5,7 +5,7 @@ import { PlusOutlined, EditOutlined, SyncOutlined, DeleteOutlined  } from '@ant-
 import UpdateTreeItemModal from './UpdateTreeItemModal';
 import { dispatch } from '../../../../model'; 
 import { showMessage, getQueryParam } from '../../../../util';
-import { AnchorDid, AnchorId, AnchorTimestamp } from '../../../../util/constant';
+import { AnchorId, AnchorTimestamp } from '../../../../util/constant';
 
 import './ModelTree.less';