资产管理页面调整

src/layout/index.js

@@ -78,7 +78,7 @@ export const ManageLayout = function ({ content, location }) {
   const subMenus = GetSubMenu(routes), route = routeMap[location.pathname], openKey = (route && route.parent) ? route.parent.path : '';
 
   const [collapsed, toggle] = useState(false); 
-  return <Layout style={{ minHeight: '100vh' }}>
+  return <Layout style={{ height: '100vh' }}>
       <Header className={'bg-primary d-flex manage-header'} >
 
         {/* <Link to={`${ContextPath}/home`} className="manage-sider-logo">
@@ -110,7 +110,7 @@ export const ManageLayout = function ({ content, location }) {
           </Menu>
         </Sider>
 
-        <Content className="m-4" style={{ backgroundColor: '#F0F2F5', height: '100%' }}>
+        <Content className="m-4" style={{ backgroundColor: '#F0F2F5' }}>
           {content}
         </Content>
 
@@ -121,7 +121,7 @@ export const ManageLayout = function ({ content, location }) {
 
 export const HomeLayout = function ({ content, location }) {
   const subMenus = GetSubMenu(routes);
-  return <Layout style={{ minHeight: '100vh' }}>
+  return <Layout style={{ height: '100vh' }}>
 
     <Header style={{}} className={'bg-white d-flex home-header'}>
       <div className="mr-3">

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

+import React, { useEffect, useState } from 'react';
+
+import { Space, Spin, Tooltip } from 'antd';
+import { dispatch } from '../../../../model';
+
+import record from '../../../../assets/record.png'; 
+import DescriptionsItem from 'antd/lib/descriptions/Item';
+
+const AssetDirectory = (props) => {
+  const { id } = props;
+  const [ dir, setDir ] = useState(null);
+  const [ loading, setLoading ] = useState(false);
+
+  useEffect(() => {
+    if ((id||'')!=='') {
+      getDirectory();
+    }
+    //eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [ id ])
+
+  const getDirectory = () => {
+    setLoading(true);
+    dispatch({
+      type: 'assetmanage.getDirectoryById',
+      payload: { 
+        dirId: id
+      },
+      callback: data => {
+        setLoading(false);
+        setDir(data);
+      },
+      error: () => {
+        setLoading(false);
+      }
+    })
+  }
+
+  return (
+    <Spin spinning={loading}>
+      <div
+        className='flex'
+        style={{
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          color: 'rgba(0, 0, 0, 0.85)',
+          padding: '10px 0',
+          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.remark||''):''}`}</div>
+          </Tooltip>
+          <div>{`备注: `}</div>
+        </div>
+        <div 
+          className='flex' 
+          style={{
+            width: 100,
+            alignItems: 'center',
+            justifyContent: 'center'
+          }}
+        >
+          <img src={record} style={{ width: 30, height: 30 }} alt="" />
+          <div>
+            <div>记录数</div>
+            <div>0</div>
+          </div>
+        </div>
+      </div>
+    </Spin>
+  );
+}
+
+export default AssetDirectory;
\ No newline at end of file

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

 import React,{ useState, useEffect, useRef } from "react";
-import { Card, Button, Pagination, Space, Modal, Input, Table, Divider, Dropdown, Menu, Tooltip } from "antd";
-import { DownOutlined } from '@ant-design/icons';
+import { Card, Button, Pagination, Space, Modal, Input, Table, Divider, Tooltip } from "antd";
 import classNames from 'classnames';
 import SmoothScroll from 'smooth-scroll';
 
-import ImportElement from './ImportElement';
 import FilterElementModal from './FilterElementModal';
 import AssetMount from '../../AssetRecycle/Component/AssetMount';
-import AttributeRelationModal from "./AttributeRelationModal";
 import ImportAsset from './ImportAsset';
 import AssetEdit from './AssetEdit';
 import { dispatch, dispatchLatestHomepage } from '../../../../model';
@@ -26,9 +23,7 @@ const AssetTable = (props) => {
   const [ total, setTotal ] = useState(0);
   const [ selectedKeys, setSelectedKeys ] = useState([]);
   const [ importAssetVisible, setImportAssetVisible ] = useState(false);
-  const [ importElementVisible, setImportElementVisible ] = useState(false);
   const [ filterElementVisible, setFilterElementVisible ] = useState(false);
-  const [ attributeRelationModalVisible, setAttributeRelationModalVisible ] = useState(false);
   const [ assetEditVisible, setAssetEditVisible ] = useState(false);
   const [ assetMountVisible, setAssetMountVisible ] = useState(false);
   const [ currentAssetId, setCurrentAssetId ] = useState('');
@@ -463,40 +458,16 @@ const AssetTable = (props) => {
     }
   }
 
-  const onImportElementCancel = (visible = false, tip = '') => {
-    setImportElementVisible(visible);
-
-    if (tip && tip!== '') {
-      showNotifaction('导入提示', tip, 5);
-    }
-  }
-
   const onFilterElementModalCancel = (refresh = false) => {
     setFilterElementVisible(false);
     refresh && getFilterElementsGroupThenGetDataAssets();
   }
 
-  const onImportElementBtnClick = () => {
-    setImportElementVisible(true);
-  }
-
-  const onExportElementBtnClick = () => {
-    window.open('/api/dataassetmanager/elementApi/export');
-  }
-
-  const onAttributeRelationBtnClick = () => {
-    setAttributeRelationModalVisible(true);
-  }
-
   const onBatchCatalogChangeBtnClick = () => {
     setBatchCatalogChange(true);
     setAssetMountVisible(true);
   }
 
-  const onAttributeRelationModalCancel = () => {
-    setAttributeRelationModalVisible(false);
-  }
-
   const onSelectChange = keys => {
     setSelectedKeys(keys);
   };
@@ -506,79 +477,43 @@ const AssetTable = (props) => {
     onChange: onSelectChange,
   };
 
-  const onMoreMenuClick = (e) => {
-    const { key } = e;
-    if (key === 'element-import') {
-      onImportElementBtnClick();
-    } else if (key === 'element-export') {
-      onExportElementBtnClick();
-    } else if (key === 'attribute-relation') {
-      onAttributeRelationBtnClick();
-    } else if (key === 'catalog-change') {
-      onBatchCatalogChangeBtnClick();
-    } else if (key === 'delete') {
-      deleteAssets();
-    }
-  }
-
-  const moreMenu = () => {
-
-    return <Menu onClick={onMoreMenuClick}>
-      <Menu.Item key='element-import'>
-        导入要素
-      </Menu.Item>
-      <Menu.Item key='element-export'>
-        导出要素
-      </Menu.Item>
-      <Menu.Item key='attribute-relation'>
-        元数据属性关联
-      </Menu.Item>
-      <Menu.Item key='catalog-change' disabled={(selectedKeys||[]).length===0}>
-        <Tooltip title={(selectedKeys||[]).length===0?'请先选择资产':''}>
-        变更目录
-        </Tooltip>
-      </Menu.Item>
-      <Menu.Item key='delete' disabled={(selectedKeys||[]).length===0}>
-        <Tooltip title={(selectedKeys||[]).length===0?'请先选择资产':''}>
-        删除
-        </Tooltip>
-      </Menu.Item>
-    </Menu>
-  }
-
   const classes = classNames('asset-list', className, {
     'asset-list-read-only': readOnly
   });  
 
   return(
-    <Card
-      bordered={false} 
-      className={classes}
-      bodyStyle={{ padding: '10px 10px 0' }}
-      headStyle={{ padding: 10 }}
-      title={
-        <div className='d-flex' style={{ justifyContent: 'space-between' }}>
+    <div className={classes}>
+      <div
+        className='flex'
+        style={{
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          borderBottom: '1px solid #EFEFEF',
+          height: 52
+        }}
+      > 
         <Space>
           { 
-              (!readOnly&&(nodeType!=='RecycleBin')) && <Button onClick={addAsset} disabled={nodeType==='RecycleBin'}>新增</Button>
+            (!readOnly&&(nodeType!=='RecycleBin')) && <Button onClick={addAsset}>新增</Button>
           }
           { 
-              (!readOnly&&(nodeType!=='RecycleBin')) && <Button onClick={importAsset} disabled={nodeType==='RecycleBin'}>导入</Button>
+            (!readOnly&&(nodeType!=='RecycleBin')) && <Button onClick={importAsset}>导入</Button>
           }
           <Tooltip title={(selectedKeys||[]).length===0?'请先选择资产':''}>
             <Button onClick={exportAsset} disabled={(selectedKeys||[]).length===0} >导出</Button>
           </Tooltip>
-            <Button onClick={onFilterElementClick}>要素过滤</Button>
+          <Tooltip title={(selectedKeys||[]).length===0?'请先选择资产':''}>
+            <Button onClick={onBatchCatalogChangeBtnClick} disabled={(selectedKeys||[]).length===0} >变更目录</Button>
+          </Tooltip>
+          <Tooltip title={(selectedKeys||[]).length===0?'请先选择资产':''}>
+            <Button onClick={deleteAssets} disabled={(selectedKeys||[]).length===0} >删除</Button>
+          </Tooltip>
+          <Button onClick={onFilterElementClick}>要素设置</Button>
           {
             (nodeType==='RecycleBin') && <Tooltip title={(selectedKeys||[]).length===0?'请先选择资产':''}>
               <Button onClick={onBatchCatalogChangeBtnClick} disabled={(selectedKeys||[]).length===0}>挂载</Button>
             </Tooltip>
           }
-            {
-              (!readOnly&&(nodeType!=='RecycleBin')) && <Dropdown overlay={moreMenu} trigger={['click']} placement="bottomLeft">
-                <Button>更多<DownOutlined /></Button>
-              </Dropdown>
-            }
         </Space>
         <Space>
           <Input 
@@ -590,7 +525,10 @@ const AssetTable = (props) => {
           />
         </Space>
       </div>
-      }
+      <div
+        style={{
+          padding: '12px 0 0',
+        }}
       >
         <Table
           rowSelection={rowSelection}
@@ -612,9 +550,9 @@ const AssetTable = (props) => {
           dataSource={assets}
           pagination={false}
           size='default'
-        scroll={{ x: 1000, y: 'calc(100vh - 64px - 30px - 57px - 39px - 10px - 42px)' }}
+          scroll={{ x: 1000, y: (assets||[]).length>0?'calc(100vh - 182px - 52px - 52px - 84px - 12px)':null }}
         />
-      
+      </div> 
       <Pagination
         size="small"
         className="text-center m-3"
@@ -636,10 +574,6 @@ const AssetTable = (props) => {
         nodeId={nodeId}
         onCancel={onAssetEditCancel}
       />
-      <ImportElement 
-        visible={importElementVisible}
-        onCancel={onImportElementCancel}
-      />
       <ImportAsset 
         visible={importAssetVisible}
         nodeId={nodeId}
@@ -652,17 +586,12 @@ const AssetTable = (props) => {
         onCancel={ onAssetMountCancel }
         {...props}
       />
-      <AttributeRelationModal
-        visible={ attributeRelationModalVisible }
-        readOnly={ readOnly }
-        onCancel={ onAttributeRelationModalCancel }
-      />
       <FilterElementModal
         visible={ filterElementVisible }
         onCancel={ onFilterElementModalCancel}
       />
       {contextHolder}
-    </Card>
+    </div>
   )
 }
 

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

 @import '../../../../variables.less';
 
 .asset-list {
-    .yy-card-head-title {
-        font-weight: normal;
-        font-size: 14px;
-        padding: 0;
-    }
-
     .highlight-row {
         .yy-table-cell {
             background-color: #e7f7ff !important;
         }
     }  
-
 }
\ No newline at end of file

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

@@ -4,7 +4,7 @@ import { Modal, Form, TreeSelect, Select, Space, Button } from 'antd';
 import { dispatchLatest } from '../../../../model';
 
 const AttributeRelationModal = (props) => {
-  const { visible, onCancel, readOnly } = props;
+  const { visible, onCancel } = props;
   const [ confirmLoading, setConfirmLoading ] = useState(false);
 
   const [ metadataModelTreeData, setMetadataModelTreeData ] = useState([]);
@@ -187,9 +187,7 @@ const AttributeRelationModal = (props) => {
             reset();
             onCancel && onCancel();
           }}>返回</Button>
-          {
-            !readOnly && <Button type="primary" onClick={ onOk } loading={ confirmLoading }>确定</Button>
-          }
+          <Button type="primary" onClick={ onOk } loading={ confirmLoading }>确定</Button>
         </Space>
       }
     >

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

src/view/Manage/AssetManage/index.jsx

@@ -3,6 +3,8 @@ import classNames from 'classnames';
 import { CaretLeftOutlined, CaretRightOutlined } from '@ant-design/icons';
 
 import AssetTable from './Component/AssetTable';
+import ElementManage from './Component/ElementManage';
+import AssetDirectory from './Component/AssetDirectory';
 import AssetTree from './Component/AssetTree';
 
 import './index.less';
@@ -38,6 +40,8 @@ const AssetManage = (props) => {
         </div>
       </div>
       <div className='right'>
+        <ElementManage />
+        <AssetDirectory id={nodeId} />
         <AssetTable nodeId={nodeId} nodeType={nodeType} {...props} />
       </div>
     </div>