Skip to content

S
szse
Commit 96dc5d96 by zhaochengxiang
Options

资产管理页面调整

parent 899e1356
Showing with 227 additions and 155 deletions
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 0 → 100644
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,115 +477,82 @@ 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' }}>
<Space>
{
(!readOnly&&(nodeType!=='RecycleBin')) && <Button onClick={addAsset} disabled={nodeType==='RecycleBin'}>新增</Button>
}
{
(!readOnly&&(nodeType!=='RecycleBin')) && <Button onClick={importAsset} disabled={nodeType==='RecycleBin'}>导入</Button>
}
<Tooltip title={(selectedKeys||[]).length===0?'请先选择资产':''}>
<Button onClick={exportAsset} disabled={(selectedKeys||[]).length===0} >导出</Button>
<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}>新增</Button>
}
{
(!readOnly&&(nodeType!=='RecycleBin')) && <Button onClick={importAsset}>导入</Button>
}
<Tooltip title={(selectedKeys||[]).length===0?'请先选择资产':''}>
<Button onClick={exportAsset} disabled={(selectedKeys||[]).length===0} >导出</Button>
</Tooltip>
<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>
<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
placeholder="请输入资产要素值"
allowClear
value={keyword}
onChange={onSearchInputChange}
style={{ width: inputWidth, marginLeft: 'auto' }}
/>
</Space>
</div>
}
>
<Table
rowSelection={rowSelection}
onRow={(record) => {
return {
id: `data-asset-${record?.id}`,
}
</Space>
<Space>
<Input
placeholder="请输入资产要素值"
allowClear
value={keyword}
onChange={onSearchInputChange}
style={{ width: inputWidth, marginLeft: 'auto' }}
/>
</Space>
</div>
<div
style={{
padding: '12px 0 0',
}}
rowClassName={(record, index) => {
if (record?.id===anchorId) {
return 'highlight-row';
}
>
<Table
rowSelection={rowSelection}
onRow={(record) => {
return {
id: `data-asset-${record?.id}`,
}
}}
rowClassName={(record, index) => {
if (record?.id===anchorId) {
return 'highlight-row';
}
return '';
}}
loading={loading}
columns={columns}
rowKey='id'
dataSource={assets}
pagination={false}
size='default'
scroll={{ x: 1000, y: 'calc(100vh - 64px - 30px - 57px - 39px - 10px - 42px)' }}
/>
return '';
}}
loading={loading}
columns={columns}
rowKey='id'
dataSource={assets}
pagination={false}
size='default'
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 0 → 100644
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>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment