Skip to content

S
szse
Commit 326e8985 by zhaochengxiang
Options

资产详情调整

parent fe511bea
Showing with 117 additions and 147 deletions
src/App.js
......@@ -15,6 +15,7 @@ import AssetManage from './view/Manage/AssetManage';
import AssetBrowse from './view/Manage/AssetBrowse';
import AssetRecycle from './view/Manage/AssetRecycle';
import DatasourceManage from './view/Manage/DatasourceManage';
import AssetDetailPage from './view/Manage/AssetManage/Component/AssetDetailPage';
import AssetDetail from './view/Manage/AssetManage/Component/AssetDetail';
import ImportAction from './view/Manage/Model/Component/ImportAction';
import EditModel from './view/Manage/Model/Component/EditModel';
......@@ -50,10 +51,7 @@ export class App extends React.Component {
return (
<AssetDetail
id={id}
reference='search'
action='detail'
terms={terms}
visible={true}
/>
);
}
......@@ -86,6 +84,8 @@ export class App extends React.Component {
<Route path={`${ContextPath}/manage`} component={Manage} />
<Route path={`${ContextPath}/data-model-action`} component={EditModel} exact />
<Route path={`${ContextPath}/model-template-action`} component={EditTemplate} exact />
<Route path={`${ContextPath}/asset-detail`} component={AssetDetailPage} exact />
<Route path={'/center-home/view/datasource-manage'} component={DatasourceManage} exact />
<Route path={'/center-home/view/data-model'} component={Model} exact />
......@@ -103,6 +103,7 @@ export class App extends React.Component {
<Route path={'/center-home/menu/asset-browse'} component={AssetBrowse} exact />
<Route path={'/center-home/menu/asset-recycle'} component={AssetRecycle} exact />
<Route path={'/center-home/data-model-action'} component={EditModel} exact />
<Route path={'/center-home/asset-detail'} component={AssetDetailPage} exact />
</Switch>
</Router>
</AppContext.Provider>
......
src/view/Manage/AssetManage/Component/AssetDetail.jsx
import React, { useEffect, useState } from "react";
import { Modal, Typography, Spin } from "antd";
import { Modal, Typography, Spin, Tabs, Descriptions } from "antd";
import AssetDetailItem from './AssetDetailItem';
import MetadataInfo from './MetadataInfo';
import { highlightSearchContentByTerms } from '../../../../util';
import { dispatch } from '../../../../model';
const { TabPane } = Tabs;
const AssetDetail = (props)=>{
const { onCancel, visible, id, reference=null, terms } = props;
const { id, terms } = props;
const [ asset, setAsset ] = useState('');
const [ assetName, setAssetName ] = useState('');
const [ types, setTypes ] = useState([]);
const [ loading, setLoading ] = useState(false);
const [ tabKey, setTabKey ] = useState('0');
useEffect(() => {
if (visible && (id||'') !== '') {
if ((id||'') !== '') {
getAssetThenGetAssetName();
}
//eslint-disable-next-line react-hooks/exhaustive-deps
}, [ visible, id ])
}, [ id ])
const getAssetThenGetAssetName = () => {
setLoading(true);
......@@ -29,7 +33,15 @@ const AssetDetail = (props)=>{
callback: data => {
setLoading(false);
setAsset(data);
getAssetName(data);
const _types = [];
(data?.elements||[]).forEach(element => {
if (_types.indexOf(element.type) === -1) {
_types.push(element.type);
}
})
setTypes(_types);
},
error: () => {
setLoading(false);
......@@ -37,43 +49,39 @@ const AssetDetail = (props)=>{
})
}
const getAssetName = (data) => {
if (data) {
const index = (data.elements||[]).findIndex(element => element.name==='中文名称');
if (index !== -1) {
setAssetName(data.elements[index].value||'');
}
}
const onTabChange = (key) => {
setTabKey(key);
}
return(
<>
{
!reference && <Modal
title={
<Typography.Paragraph
className='mr-5'
title={`资产: ${assetName||''}`}
ellipsis
>
{`资产: ${assetName||''}`}
</Typography.Paragraph>}
visible={visible}
width={800}
onCancel={()=>{ onCancel && onCancel()}}
footer={null}
>
<Spin spinning={loading}>
<AssetDetailItem data={asset} />
</Spin>
</Modal>
}
<Tabs activeKey={tabKey} onChange={onTabChange}>
{
reference && <Spin spinning={loading}>
<AssetDetailItem data={asset} terms={terms} />
</Spin>
(types||[]).map((type, index) => {
const _currentValues = (asset.elements||[]).filter(element => element.type===type);
return (
<TabPane tab={type} key={index}>
<Descriptions column={2}>
{
(_currentValues||[]).map((item, index) => {
return (
<Descriptions.Item label={item.name||''} key={index}>
{
item.name==='资产项' ? <MetadataInfo config={false} value={item.value||''} /> : <span>{highlightSearchContentByTerms(item.value||'', terms)}</span>
}
</Descriptions.Item>
);
})
}
</>
</Descriptions>
</TabPane>
)
})
}
</Tabs>
</Spin>
)
}
......
src/view/Manage/AssetManage/Component/AssetDetailItem.jsx deleted 100644 → 0
import React, { useEffect, useState } from 'react';
import { Row, Col, Typography } from 'antd';
import { highlightSearchContentByTerms } from '../../../../util';
import MetadataInfo from './MetadataInfo';
import './AssetItem.less';
const AssetItem = (props) => {
const { data, terms } = 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((elementGroup, index) => {
const _type = elementGroup.type||'';
return (
<div>
<div className='flex' style={{ alignItems: 'center', padding: '15px 0' }}>
<div style={{ width: 3, height: 14, backgroundColor: '#0069AC', marginRight: 5 }} />
<span style={{ fontWeight: 'bold', color: '#464646' }}>{_type||''}</span>
</div>
<Row>
{
elementGroup && elementGroup.elements && elementGroup.elements.map((element, _index) => {
return (
<Col className='mb-3' key={_index} md={8}>
<Typography.Paragraph title={ `${element.name||''}: ${element.value||''}` } style={{ color: '#464646' }} ellipsis>
{ `${element.name||''}: `}
{
(element.name==='资产项')?<MetadataInfo config={false} value={element.value||''} />:highlightSearchContentByTerms(element.value||'', terms)
}
</Typography.Paragraph>
</Col>
);
})
}
</Row>
<div style={{ width: '100%', height: 2, backgroundColor: '#ededed' }} />
</div>
)
})
}
</div>
);
}
export default AssetItem;
src/view/Manage/AssetManage/Component/AssetDetailPage.jsx 0 → 100644
import React, { useEffect, useState } from "react";
import AssetDetail from './AssetDetail';
import { getQueryParam } from '../../../../util';
import './AssetDetailPage.less';
const AssetDetailPage = (props)=>{
const [ id, setId ] = useState('');
useEffect(() => {
const _id = getQueryParam('id', props.location.search);
setId(_id);
//eslint-disable-next-line react-hooks/exhaustive-deps
}, [])
return(
<div className='asset-detail position-relative'>
<div className='detail-header'>
<span style={{ fontSize: 16, fontWeight: 'bold', color: '#fff' }}>资产详情</span>
</div>
<div className='detail-container'>
<div className='detail-container-card'>
<AssetDetail id={id} />
</div>
</div>
</div>
)
}
export default AssetDetailPage;
\ No newline at end of file
src/view/Manage/AssetManage/Component/AssetDetailPage.less 0 → 100644
.asset-detail {
.detail-header {
display: flex;
width: 100%;
height: 44px;
padding: 0 15px;
background-color: #464d6e;
align-items: center;
position: fixed;
justify-content: space-between;
border-bottom: 1px solid #EFEFEF;
z-index: 100;
}
.detail-container {
top: 44px;
width: 100%;
height: calc(100vh - 44px);
overflow: auto;
background: #EDF0F5;
padding: 10px 20px;
position: absolute;
}
.detail-container-card {
padding: 20px 20px 0;
background: #fff;
}
}
\ No newline at end of file
src/view/Manage/AssetManage/Component/AssetTable.jsx
......@@ -10,7 +10,6 @@ import AssetMount from '../../AssetRecycle/Component/AssetMount';
import AttributeRelationModal from "./AttributeRelationModal";
import ImportAsset from './ImportAsset';
import AssetEdit from './AssetEdit';
import AssetDetail from "./AssetDetail";
import MetadataInfo from './MetadataInfo';
import { dispatch, dispatchLatestHomepage } from '../../../../model';
import { showMessage, showNotifaction, getQueryParam, inputWidth, isSzseEnv } from '../../../../util';
......@@ -31,7 +30,6 @@ const AssetTable = (props) => {
const [ filterElementVisible, setFilterElementVisible ] = useState(false);
const [ attributeRelationModalVisible, setAttributeRelationModalVisible ] = useState(false);
const [ assetEditVisible, setAssetEditVisible ] = useState(false);
const [ assetDetailVisible, setAssetDetailVisible ] = useState(false);
const [ assetMountVisible, setAssetMountVisible ] = useState(false);
const [ currentAssetId, setCurrentAssetId ] = useState('');
const [ assetEditAction, setAssetEditAction ] = useState('');
......@@ -345,11 +343,7 @@ const AssetTable = (props) => {
const detailAsset = (item)=>{
setCurrentAssetId(item.id);
setAssetDetailVisible(true);
}
const onAssetDetailCancel = () => {
setAssetDetailVisible(false);
window.open(`/center-home/asset-detail?id=${item.id}`);
}
const deleteAssets = () => {
......@@ -555,11 +549,6 @@ const AssetTable = (props) => {
nodeId={nodeId}
onCancel={onAssetEditCancel}
/>
<AssetDetail
visible={assetDetailVisible}
id={currentAssetId}
onCancel={onAssetDetailCancel}
/>
<ImportElement
visible={importElementVisible}
onCancel={onImportElementCancel}
......
src/view/Manage/AssetRecycle/index.jsx
......@@ -3,7 +3,6 @@ import { Table, Pagination, Space, Tooltip, Button, Modal } from 'antd';
import { ReconciliationOutlined, DeleteOutlined, UndoOutlined } from '@ant-design/icons';
import { dispatchLatest } from '../../../model';
import AssetDetail from '../AssetManage/Component/AssetDetail';
import AssetMount from './Component/AssetMount';
import { showMessage } from '../../../util';
......@@ -16,7 +15,6 @@ const AssetRecycle = (props) => {
const [ total, setTotal ] = useState(0);
const [ pagination, setPagination ] = useState( { pageNum: 1, pageSize: 20 } );
const [ currentAssetId, setCurrentAssetId ] = useState('');
const [ assetDetailVisible, setAssetDetailVisible ] = useState(false);
const [ assetMountVisible, setAssetMountVisible ] = useState(false);
const [ selectedRowKeys, setSelectedRowKeys ] = useState([]);
const [ batchMount, setBatchMount ] = useState(false);
......@@ -108,15 +106,7 @@ const AssetRecycle = (props) => {
const detailItem = (record) => {
setCurrentAssetId(record.id);
const index = selectedRowKeys.findIndex((rowKey) => rowKey === record.id);
if (index !== -1) {
const newSelectedRowKeys = [...selectedRowKeys];
newSelectedRowKeys.splice(index, 1);
setSelectedRowKeys(newSelectedRowKeys);
}
setAssetDetailVisible(true);
window.open(`/center-home/asset-detail?id=${record.id}`);
}
const mountItem = (record) => {
......@@ -179,10 +169,6 @@ const AssetRecycle = (props) => {
});
}
const onAssetDetailCancel = () => {
setAssetDetailVisible(false);
}
const onAssetMountCancel = (refresh = false) => {
setAssetMountVisible(false);
......@@ -240,11 +226,6 @@ const AssetRecycle = (props) => {
showTotal={total => `共 ${total} 条`}
/>
</div>
<AssetDetail
visible={ assetDetailVisible }
id={ currentAssetId }
onCancel={ onAssetDetailCancel }
/>
<AssetMount
refrence='asset-recycle'
visible={ assetMountVisible }
......
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