资产要素管理调整

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

 import React, { useEffect, useState } from 'react';
+import { SettingOutlined } from '@ant-design/icons';
+import { Spin, Tooltip, Typography, Dropdown, Menu } from 'antd';
 
-import { Space, Spin, Tooltip } from 'antd';
 import { dispatch } from '../../../../model';
 import { AssetManageReference } from '../../../../util/constant';
+import ImportElement from './ImportElement';
+import AttributeRelationModal from "./AttributeRelationModal";
+import FilterElementModal from './FilterElementModal';
+import { showNotifaction } from '../../../../util';
 
 import record from '../../../../assets/record.png'; 
 
+const { Paragraph, Text } = Typography;
+
 const AssetDirectory = (props) => {
-  const { id, directoryChanged, assetCount, reference = AssetManageReference } = props;
+  const { id, directoryChanged, assetCount, reference = AssetManageReference, onElementsChange } = props;
   const [ dir, setDir ] = useState(null);
   const [ loading, setLoading ] = useState(false);
+  const [ importElementVisible, setImportElementVisible ] = useState(false);
+  const [ attributeRelationModalVisible, setAttributeRelationModalVisible ] = useState(false);
+  const [ filterElementVisible, setFilterElementVisible ] = useState(false);
 
   useEffect(() => {
     if ((id||'')!=='') {
@@ -35,6 +45,67 @@ const AssetDirectory = (props) => {
     })
   }
 
+  const onImportElementBtnClick = () => {
+    setImportElementVisible(true);
+  }
+
+  const onExportElementBtnClick = () => {
+    window.open('/api/dataassetmanager/elementApi/export');
+  }
+
+  const onFilterElementClick = () => {
+    setFilterElementVisible(true);
+  }
+
+  const onAttributeRelationBtnClick = () => {
+    setAttributeRelationModalVisible(true);
+  }
+
+  const onImportElementCancel = (visible = false, change = false, tip = '') => {
+    setImportElementVisible(visible);
+
+    if (change) {
+      onElementsChange && onElementsChange();
+    }
+
+    if (tip && tip!== '') {
+      showNotifaction('导入提示', tip, 5);
+    }
+  }
+
+  const onFilterElementModalCancel = () => {
+    setFilterElementVisible(false);
+  }
+
+  const onAttributeRelationModalCancel = () => {
+    setAttributeRelationModalVisible(false);
+  }
+
+  const elementManageMenu = (
+    <Menu>
+      <Menu.Item>
+        <div onClick={onImportElementBtnClick}>
+          导入要素
+        </div>
+      </Menu.Item>
+      <Menu.Item>
+        <div onClick={onExportElementBtnClick}>
+          导出要素
+        </div>
+      </Menu.Item>
+      <Menu.Item>
+        <div onClick={onFilterElementClick}>
+          要素管理
+        </div>
+      </Menu.Item>
+      <Menu.Item>
+        <div onClick={onAttributeRelationBtnClick}>
+          元数据属性关联
+        </div>
+      </Menu.Item>
+    </Menu>
+  );
+
   return (
     <Spin spinning={loading}>
       <div
@@ -47,20 +118,35 @@ const AssetDirectory = (props) => {
           borderBottom: '1px solid #f0f0f0',
         }}
       >
-        <div style={{ flex: 1, overflow: 'hidden' }}>
-          <Space>
-            <div className='flex'>
-            <span>名称: </span>
-            <div style={{ minWidth: 150 }}>{`${dir?(dir.name||''):''}`}</div>
-            </div>
-            <span>{`编号: ${dir?(dir.code||''):''}`}</span>
-          </Space>
-          <Tooltip title={`${dir?(dir.remark||''):''}`}>
-            <div className='textOverflow'>{`描述: ${dir?(dir.desc||''):''}`}</div>
-          </Tooltip>
-          {
-            (reference === AssetManageReference) && <div>{`备注: ${dir?(dir.remarks||''):''}`}</div>
-          }
+        <div style={{ flex: 1, overflow: 'hidden'}}>
+          <Typography>
+            <Paragraph>
+              <Tooltip title={dir?.name||''}>
+                <Text>名称:&nbsp;{dir?.name||''}</Text>
+              </Tooltip>
+              &nbsp;&nbsp;
+              <Tooltip title={dir?.code||''}>
+                <Text>编号:&nbsp;{dir?.code||''}</Text>
+              </Tooltip>
+            </Paragraph>
+            <Paragraph >
+              <Tooltip title={dir?.desc||''}>
+                <Text ellipsis={true}>
+                  描述:&nbsp;{dir?.desc||''}
+                </Text>
+              </Tooltip>
+            </Paragraph>
+            {
+              (reference === AssetManageReference) && 
+                <Paragraph >
+                  <Tooltip title={dir?.remarks||''}>
+                    <Text ellipsis={true}>
+                    备注:&nbsp;{dir?.remarks||''}
+                    </Text>
+                  </Tooltip>
+                </Paragraph>
+            }
+          </Typography>
         </div>
         <div 
           className='flex' 
@@ -76,7 +162,27 @@ const AssetDirectory = (props) => {
             <div>{assetCount}</div>
           </div>
         </div>
+        
+        <Dropdown overlay={elementManageMenu} placement="bottomCenter">
+          <SettingOutlined style={{ fontSize:16,cursor:'pointer', marginBottom: 50 }} />
+        </Dropdown>
+      
       </div>
+      
+      <ImportElement 
+        visible={importElementVisible}
+        onCancel={onImportElementCancel}
+      />
+
+      <FilterElementModal
+        visible={ filterElementVisible }
+        onCancel={ onFilterElementModalCancel}
+      />
+
+      <AttributeRelationModal
+        visible={ attributeRelationModalVisible }
+        onCancel={ onAttributeRelationModalCancel }
+      />
     </Spin>
   );
 }

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

@@ -455,7 +455,7 @@ const AssetTable = (props) => {
     if (fullScreen) {
       scrollY = 'calc(100vh - 182px - 52px - 12px)';
     } else if (reference===AssetManageReference) {
-      scrollY = 'calc(100vh - 182px - 52px - 52px - 84px - 12px)';
+      scrollY = 'calc(100vh - 182px - 84px - 52px - 12px)';
     } else if (reference===AssetBrowseReference||reference===ResourceBrowseReference) {
       scrollY = 'calc(100vh - 182px - 84px - 52px - 12px)';
     } else if (reference===AssetRecycleReference) {

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

-import React, { useState } from 'react';
-import { Space, Button } from 'antd';
-
-import ImportElement from './ImportElement';
-import AttributeRelationModal from "./AttributeRelationModal";
-import FilterElementModal from './FilterElementModal';
-
-import { showNotifaction } from '../../../../util';
-
-const ElementManage = (props) => {
-  const { onChange } = props;
-
-  const [ importElementVisible, setImportElementVisible ] = useState(false);
-  const [ attributeRelationModalVisible, setAttributeRelationModalVisible ] = useState(false);
-  const [ filterElementVisible, setFilterElementVisible ] = useState(false);
-
-  const onImportElementBtnClick = () => {
-    setImportElementVisible(true);
-  }
-
-  const onExportElementBtnClick = () => {
-    window.open('/api/dataassetmanager/elementApi/export');
-  }
-
-  const onFilterElementClick = () => {
-    setFilterElementVisible(true);
-  }
-
-  const onAttributeRelationBtnClick = () => {
-    setAttributeRelationModalVisible(true);
-  }
-
-  const onImportElementCancel = (visible = false, change = false, tip = '') => {
-    setImportElementVisible(visible);
-
-    if (change) {
-      onChange && onChange();
-    }
-
-    if (tip && tip!== '') {
-      showNotifaction('导入提示', tip, 5);
-    }
-  }
-
-  const onFilterElementModalCancel = () => {
-    setFilterElementVisible(false);
-  }
-
-  const onAttributeRelationModalCancel = () => {
-    setAttributeRelationModalVisible(false);
-  }
-
-  return (
-    <div
-      className='flex'
-      style={{
-        height: 52,
-        alignItems: 'center',
-        padding: '0 12px',
-        borderBottom: '1px solid #f0f0f0',
-      }}
-    >
-      <Space>
-        <Button onClick={onImportElementBtnClick}>导入要素</Button>
-        <Button onClick={onExportElementBtnClick}>导出要素</Button>
-        <Button onClick={onFilterElementClick}>要素管理</Button>
-        <Button onClick={onAttributeRelationBtnClick}>元数据属性关联</Button>
-      </Space>
-
-      <ImportElement 
-        visible={importElementVisible}
-        onCancel={onImportElementCancel}
-      />
-
-      <FilterElementModal
-        visible={ filterElementVisible }
-        onCancel={ onFilterElementModalCancel}
-      />
-
-      <AttributeRelationModal
-        visible={ attributeRelationModalVisible }
-        onCancel={ onAttributeRelationModalCancel }
-      />
-    </div>
-  );
-}
-
-export default ElementManage;
\ No newline at end of file

src/view/Manage/AssetManage/index.jsx

@@ -4,7 +4,6 @@ import { Form } from 'antd';
 import { CaretLeftOutlined, CaretRightOutlined } from '@ant-design/icons';
 
 import AssetTree from './Component/AssetTree';
-import ElementManage from './Component/ElementManage';
 import AssetDirectory from './Component/AssetDirectory';
 import AssetTable from './Component/AssetTable';
 import AssetAction from './Component/AssetAction';
@@ -71,8 +70,7 @@ const AssetManage = (props) => {
         </div>
       </div>
       <div className='middle'>
-        <ElementManage onChange={onElementsChange} />
-        <AssetDirectory id={nodeId} assetCount={assetCount} directoryChanged={directoryChanged} />
+        <AssetDirectory id={nodeId} assetCount={assetCount} directoryChanged={directoryChanged} onElementsChange={onElementsChange} />
         <AssetTable nodeId={nodeId} reference={AssetManageReference} elementsChanged={elementsChanged} assetActionChanged={assetActionChanged} onSelect={onTableSelect} onCountChange={onAssetCountChange} {...props} />
       </div>
       <div className='right'>