Skip to content

S
szse
Commit 3c4bc51d by zhaochengxiang
Options

资产浏览调整

parent bf66e0c5
Showing with 116 additions and 47 deletions
src/util/constant.js
......@@ -13,4 +13,10 @@ export const PermitCheckOut = 'permitCheckOut';
export const StateId = 'sid';
export const VersionId = 'vid';
export const TemplateId = 'tid';
export const Holder = 'holder';
\ No newline at end of file
export const Holder = 'holder';
//资产
export const AssetManageReference = 'asset-manage';
export const AssetBrowseReference = 'asset-browse';
export const ResourceBrowseReference = 'resource-browse';
export const AssetRecycleReference = 'asset-recycle';
\ No newline at end of file
src/view/Manage/AssetBrowse/index.jsx
......@@ -4,8 +4,9 @@ import { CaretLeftOutlined, CaretRightOutlined } from '@ant-design/icons';
import AssetTable from "../AssetManage/Component/AssetTable";
import AssetTree from '../AssetManage/Component/AssetTree';
import { AssetBrowseReference } from '../../../util/constant';
import '../AssetManage/index.less';
import './index.less';
const AssetBrowse = (props) => {
......@@ -22,14 +23,14 @@ const AssetBrowse = (props) => {
setExpandTree(!expandTree);
}
const classes = classNames('asset-manage', {
'asset-manage-collapse': !expandTree
const classes = classNames('asset-browse', {
'asset-browse-collapse': !expandTree
});
return (
<div className={classes}>
<div className='left'>
<AssetTree onSelect={onTreeSelect} readOnly {...props} />
<AssetTree onSelect={onTreeSelect} reference={AssetBrowseReference} {...props} />
</div>
<div className='tree-toggle-wrap'>
<div className='tree-toggle' onClick={treeToggleClick}>
......@@ -37,7 +38,7 @@ const AssetBrowse = (props) => {
</div>
</div>
<div className='right'>
<AssetTable nodeId={nodeId} nodeType={nodeType} readOnly {...props} />
<AssetTable nodeId={nodeId} reference={AssetBrowseReference} reference='asset-browse' {...props} />
</div>
</div>
)
......
src/view/Manage/AssetBrowse/index.less 0 → 100644
.asset-browse {
display: flex;
position: relative;
background-color: #fff;
height: 100%;
.left {
width: 230px;
border-right: 1px solid #EFEFEF;
overflow: hidden;
}
.tree-toggle-wrap {
position: relative;
width: 20px;
height: calc(100vh - 94px);
.tree-toggle {
display: flex;
justify-content: center;
align-items: center;
left: 0;
right: 0;
background: #f2f5fc;
position: absolute;
top: calc(50% - 40px);
width: 12px;
height: 80px;
border-radius: 0 12px 12px 0;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
cursor: pointer;
}
}
.right {
width: calc(100% - 250px);
}
}
.asset-browse-collapse {
.left {
width: 0;
}
.right {
width: calc(100% - 20px);
}
}
\ No newline at end of file
src/view/Manage/AssetManage/Component/AssetTable.jsx
......@@ -9,14 +9,13 @@ import ImportAsset from './ImportAsset';
import AssetEdit from './AssetEdit';
import { dispatch, dispatchLatestHomepage } from '../../../../model';
import { showMessage, showNotifaction, getQueryParam, inputWidth, isSzseEnv } from '../../../../util';
import { AnchorId, AnchorTimestamp } from '../../../../util/constant';
import { AnchorId, AnchorTimestamp, AssetBrowseReference, AssetManageReference, AssetRecycleReference, ResourceBrowseReference } from '../../../../util/constant';
import "./AssetTable.less";
import { select } from "redux-saga/effects";
const AssetTable = (props) => {
const { readOnly = false, className, nodeId, nodeType, elementsChanged, assetActionChanged, onSelect, onCountChange } = props;
const { className, nodeId, nodeType, elementsChanged, assetActionChanged, onSelect, onCountChange, reference = AssetManageReference } = props;
const [ loading, setLoading ] = useState(false);
const [ columns, setColumns ] = useState([]);
const [ assets, setAssets ] = useState([]);
......@@ -71,7 +70,7 @@ const AssetTable = (props) => {
}, [timestamp])
useEffect(() => {
if ((nodeId||'') !== '' || nodeType==='RecycleBin' ) {
if ((nodeId||'') !== '' || reference===AssetRecycleReference) {
getFilterElementsGroupThenGetDataAssets();
}
//eslint-disable-next-line react-hooks/exhaustive-deps
......@@ -194,7 +193,6 @@ const AssetTable = (props) => {
metadataIndexRef.current = _metadataIndex;
getDataAssets(_metadataIndex);
},
error: () => {
setLoading(false)
......@@ -205,7 +203,7 @@ const AssetTable = (props) => {
const getDataAssets = (projectIndex = metadataIndexRef.current) => {
setLoading(true);
dispatchLatestHomepage({
type: (nodeType==='RecycleBin')?'assetmanage.listRecycleBinDataAssetsByPage':'assetmanage.listDataAssetsByPage',
type: (reference===AssetRecycleReference)?'assetmanage.listRecycleBinDataAssetsByPage':'assetmanage.listDataAssetsByPage',
payload: {
dirId: nodeId,
pageNum,
......@@ -314,20 +312,20 @@ const AssetTable = (props) => {
if ((checkedKeys||[]).length > 0) {
modal.confirm({
title: '提示',
content: (nodeType!=='RecycleBin')?'这些资产在所有目录上唯一存在，移除后，你可以前往“未挂载资产”重新挂载。': '您确定要永久删除这些资产吗?',
content: (reference!==AssetRecycleReference)?'这些资产在所有目录上唯一存在，移除后，你可以前往“未挂载资产”重新挂载。': '您确定要永久删除这些资产吗?',
onOk: () => {
let payload = {
data: checkedKeys
}
if (nodeType !== 'RecycleBin') {
if (reference !== AssetRecycleReference) {
payload.params = {
dirId: nodeId
}
}
dispatch({
type: (nodeType!=='RecycleBin')?'assetmanage.unloadDataAssets':'assetmanage.deleteDataAssets',
type: (reference!==AssetRecycleReference)?'assetmanage.unloadDataAssets':'assetmanage.deleteDataAssets',
payload,
callback: () => {
showMessage("success","删除成功");
......@@ -376,10 +374,22 @@ const AssetTable = (props) => {
};
const classes = classNames('asset-list', className, {
'asset-list-read-only': readOnly,
'asset-list-fullscreen': fullScreen,
});
let scrollY = null;
if ((assets||[]).length>0) {
if (fullScreen) {
scrollY = 'calc(100vh - 182px - 52px - 12px)';
} else if (reference===AssetManageReference) {
scrollY = 'calc(100vh - 182px - 52px - 52px - 84px - 12px)';
} else if (reference===AssetBrowseReference||reference===ResourceBrowseReference) {
scrollY = 'calc(100vh - 182px - 52px - 12px)';
} else if (reference===AssetRecycleReference) {
scrollY = 'calc(100vh - 182px - 52px - 12px)';
}
}
return(
<div className={classes}>
<div
......@@ -394,26 +404,25 @@ const AssetTable = (props) => {
>
<Space>
{
(!readOnly&&(nodeType!=='RecycleBin')) && <Button onClick={addAsset}>新增</Button>
(reference===AssetManageReference) && <Button onClick={addAsset}>新增</Button>
}
{
(!readOnly&&(nodeType!=='RecycleBin')) && <Button onClick={importAsset}>导入</Button>
(reference===AssetManageReference) && <Button onClick={importAsset}>导入</Button>
}
<Tooltip title={(checkedKeys||[]).length===0?'请先选择资产':''}>
<Button onClick={exportAsset} disabled={(checkedKeys||[]).length===0} >导出</Button>
</Tooltip>
<Tooltip title={(checkedKeys||[]).length===0?'请先选择资产':''}>
<Button onClick={onBatchCatalogChangeBtnClick} disabled={(checkedKeys||[]).length===0} >变更目录</Button>
</Tooltip>
<Tooltip title={(checkedKeys||[]).length===0?'请先选择资产':''}>
<Button onClick={deleteAssets} disabled={(checkedKeys||[]).length===0} >删除</Button>
</Tooltip>
<Button onClick={onFilterElementClick}>要素设置</Button>
{
(nodeType==='RecycleBin') && <Tooltip title={(checkedKeys||[]).length===0?'请先选择资产':''}>
<Button onClick={onBatchCatalogChangeBtnClick} disabled={(checkedKeys||[]).length===0}>挂载</Button>
</Tooltip>
(reference===AssetManageReference || reference===AssetRecycleReference) && <React.Fragment>
<Tooltip title={(checkedKeys||[]).length===0?'请先选择资产':''}>
<Button onClick={exportAsset} disabled={(checkedKeys||[]).length===0} >导出</Button>
</Tooltip>
<Tooltip title={(checkedKeys||[]).length===0?'请先选择资产':''}>
<Button onClick={onBatchCatalogChangeBtnClick} disabled={(checkedKeys||[]).length===0} >{(reference===AssetRecycleReference)?'挂载':'变更目录'}</Button>
</Tooltip>
<Tooltip title={(checkedKeys||[]).length===0?'请先选择资产':''}>
<Button onClick={deleteAssets} disabled={(checkedKeys||[]).length===0} >删除</Button>
</Tooltip>
</React.Fragment>
}
<Button onClick={onFilterElementClick}>要素设置</Button>
</Space>
<Space>
<Input
......@@ -455,7 +464,7 @@ const AssetTable = (props) => {
dataSource={assets}
pagination={false}
size='default'
scroll={{ x: 1000, y: (assets||[]).length>0?(fullScreen?'calc(100vh - 182px - 12px - 50px)':'calc(100vh - 182px - 52px - 52px - 84px - 12px)'):null }}
scroll={{ x: 1000, y: scrollY }}
/>
</div>
<Pagination
......@@ -486,7 +495,7 @@ const AssetTable = (props) => {
/>
<AssetMount
visible={ assetMountVisible }
nodeType={nodeType}
reference={reference}
ids={ batchCatalogChange?checkedKeys:[currentAssetId] }
onCancel={ onAssetMountCancel }
{...props}
......
src/view/Manage/AssetManage/Component/AssetTree.jsx
......@@ -8,12 +8,12 @@ import ImportDirectory from './ImportDirectory';
import UpdateDirectoryModal from './UpdateDirectoryModal';
import CustomDirectoryModal from './CustomDirectoryModal';
import { showMessage, getQueryParam } from '../../../../util';
import { AnchorTimestamp, AnchorId } from '../../../../util/constant';
import { AnchorTimestamp, AnchorId, AssetManageReference, AssetBrowseReference, ResourceBrowseReference } from '../../../../util/constant';
import './AssetTree.less';
const AssetTree = (props) => {
const { readOnly = false, checkable = false, onSelect, className, onCheck, tableId, reference='', showCustom=true, onDirectoryChange } = props;
const { checkable = false, onSelect, className, onCheck, tableId, reference=AssetManageReference, showCustom=true, onDirectoryChange } = props;
const [ keyword, setKeyword ] = useState('');
const [ loading, setLoading ] = useState(false);
const [ treeData, setTreeData ] = useState([]);
......@@ -448,7 +448,7 @@ const AssetTree = (props) => {
});
const classes = classNames('asset-tree', className, {
'asset-tree-read-only': readOnly,
'asset-tree-read-only': (reference===AssetBrowseReference||reference===ResourceBrowseReference),
'asset-tree-metadata-reference': reference==='metadata',
'asset-tree-asset-mount-reference': reference==='mount',
});
......@@ -456,7 +456,7 @@ const AssetTree = (props) => {
return (
<Card
className={classes}
title={ readOnly ? null : (
title={ (reference===AssetBrowseReference||reference===ResourceBrowseReference) ? null : (
<div
className='p-3'
style={{
......
src/view/Manage/AssetManage/index.jsx
......@@ -8,6 +8,8 @@ import AssetDirectory from './Component/AssetDirectory';
import AssetTable from './Component/AssetTable';
import AssetAction from './Component/AssetAction';
import { AssetManageReference } from '../../../util/constant';
import './index.less';
const AssetManage = (props) => {
......@@ -69,7 +71,7 @@ const AssetManage = (props) => {
<div className='middle'>
<ElementManage onChange={onElementsChange} />
<AssetDirectory id={nodeId} assetCount={assetCount} directoryChanged={directoryChanged} />
<AssetTable nodeId={nodeId} nodeType={nodeType} elementsChanged={elementsChanged} assetActionChanged={assetActionChanged} onSelect={onTableSelect} onCountChange={onAssetCountChange} {...props} />
<AssetTable nodeId={nodeId} reference={AssetManageReference} elementsChanged={elementsChanged} assetActionChanged={assetActionChanged} onSelect={onTableSelect} onCountChange={onAssetCountChange} {...props} />
</div>
<div className='right'>
<AssetAction id={assetId} dirId={nodeId} action='detail' onChange={onAssetActionChange} />
......
src/view/Manage/AssetManage/util/index.js
export const requireElements = ['中文名称', '资产项', '使用方', '信息安全等级'];
export const unfoldedElements = ['编号', '中文名称', '英文名称', '描述', '表现形式', '数据类型', '来源系统', '资产项', '使用方', '标签', '共享级别', '信息安全等级', '来源单位', '状态', '所属部门', '维护方', '所属层次', '更新频度', '数据规模', '数据大小', '质量情况'];
\ No newline at end of file
export const unfoldedElements = ['编号', '中文名称', '英文名称', '描述', '表现形式', '数据类型', '来源系统', '资产项', '使用方', '标签', '共享级别', '信息安全等级', '来源单位', '状态', '所属部门', '维护方', '所属层次', '更新频度', '数据规模', '数据大小', '质量情况'];
src/view/Manage/AssetRecycle/Component/AssetMount.jsx
......@@ -5,9 +5,11 @@ import { dispatch } from '../../../../model';
import AssetTree from '../../AssetManage/Component/AssetTree';
import { showMessage } from '../../../../util';
import { AssetManageReference, AssetRecycleReference } from "../../../../util/constant";
const AssetMount = (props) => {
const { onCancel, visible, ids, refrence = 'asset-manage', nodeType } = props;
const { onCancel, visible, ids, reference = AssetManageReference } = props;
const [ dirIds, setDirIds ] = useState([]);
const [ confirmLoading, setConfirmLoading ] = useState(false);
......@@ -48,7 +50,7 @@ const AssetMount = (props) => {
return(
<Modal
title={(nodeType==='RecycleBin')?'挂载目录详情':'变更目录详情'}
title={(reference===AssetRecycleReference)?'挂载目录详情':'变更目录详情'}
visible={ visible }
width={ 400 }
confirmLoading={ confirmLoading }
......@@ -63,7 +65,7 @@ const AssetMount = (props) => {
checkable={true}
showCustom={false}
onCheck={onCheck}
tableId={(refrence==='asset-manage'&&(ids||[].length>0))?ids[0]:''}
tableId={(reference===AssetManageReference&&(ids||[].length>0))?ids[0]:''}
reference='mount'
{...props}
/>
......
src/view/Manage/AssetRecycle/index.jsx
import React from 'react';
import AssetTable from '../AssetManage/Component/AssetTable';
import { AssetRecycleReference } from '../../../util/constant';
const AssetRecycle = (props) => {
return (
<div className='asset-recycle' style={{ backgroundColor: '#fff' }}>
<AssetTable nodeType='RecycleBin' {...props} />
<div style={{ backgroundColor: '#fff', height: '100%' }}>
<AssetTable reference={AssetRecycleReference} {...props} />
</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