Skip to content

S
szse
Commit 5768dd4c by zhaochengxiang
Options

资产增加视角

parent 800eceaf
Showing with 190 additions and 35 deletions
src/model/assetmanage.js
......@@ -267,4 +267,12 @@ export function* getScore(payload) {
export function* getResourceTypes(payload) {
return yield call(service.getResourceTypes, payload);
}
export function* getDirectoryChild(payload) {
return yield call(service.getDirectoryChild, payload);
}
export function* queryCustomTypeRootDirectory() {
return yield call(service.queryCustomTypeRootDirectory);
}
\ No newline at end of file
src/service/dataassetmanager.js
......@@ -274,4 +274,12 @@ export function getScore(payload) {
export function getResourceTypes(payload) {
return GetJSON("/dataassetmanager/dataAssetApi/listSupportResourceTypes", payload);
}
export function getDirectoryChild(payload) {
return GetJSON("/dataassetmanager/directoryApi/getChildByParentId", payload);
}
export function queryCustomTypeRootDirectory() {
return GetJSON("/dataassetmanager/directoryApi/queryCustomTypeRootDirectory");
}
\ No newline at end of file
src/view/Manage/AssetManage/Component/AssetTree.jsx
import React, { useEffect, useState, useRef, useContext } from 'react';
import { useMount, useUnmount } from 'ahooks';
import {Card, Spin, Tooltip, Tree, Dropdown, Menu, Modal, AutoComplete} from 'antd';
import { PlusOutlined, ImportOutlined,ExportOutlined,ReloadOutlined, SettingOutlined, CalculatorOutlined } from '@ant-design/icons';
import { PlusOutlined, ImportOutlined,ExportOutlined,ReloadOutlined, SettingOutlined, CalculatorOutlined, UnorderedListOutlined } from '@ant-design/icons';
import classNames from 'classnames';
import { useContextMenu, Menu as RcMenu, Item as RcItem } from "react-contexify";
import LocalStorage from 'local-storage';
......@@ -21,6 +21,34 @@ import 'react-contexify/dist/ReactContexify.css';
const { Option } = AutoComplete;
const viewModes = [
{
key: 'dir',
name: '目录视角'
},
{
key: 'custom',
name: '自定义目录视角'
}
];
function updateTreeData(list, key, children) {
return list.map((node) => {
if (node.nodeId === key) {
return { ...node, children };
}
if (node.children) {
return {
...node,
children: updateTreeData(node.children, key, children),
};
}
return node;
});
}
const AssetTree = (props) => {
const MENU_ID = 'asset-tree';
......@@ -50,6 +78,8 @@ const AssetTree = (props) => {
const [ customDirectoryAction, setCustomDirectoryAction ] = useState('');
const [options, setOptions] = useState([]);
const [ computeScoreVisible, setComputeScoreVisible ] = useState(false);
const [ loadedKeys, setLoadedKeys ] = useState([]);
const [ viewSelectedKey, setViewSelectedKey ] = useState(viewModes[0].key);
const [modal, contextHolder] = Modal.useModal();
......@@ -59,6 +89,7 @@ const AssetTree = (props) => {
const treeDataRef = useRef([]);
const dataListRef = useRef([]);
const viewSelectedKeyRef = useRef(viewModes[0].key)
useMount(() => {
window?.addEventListener("storage", storageChange);
......@@ -70,8 +101,12 @@ const AssetTree = (props) => {
useEffect(() => {
if ((id||'') !== '') {
setViewSelectedKey(viewModes[0].key);
viewSelectedKeyRef.current = viewModes[0].key;
getDataAssetLocationThenGetTreeData();
} else if ((did||'') !== '') {
setViewSelectedKey(viewModes[0].key);
viewSelectedKeyRef.current = viewModes[0].key;
getAllDirectoryAsTree(true, did);
} else {
getAllDirectoryAsTree(true);
......@@ -148,13 +183,25 @@ const AssetTree = (props) => {
} else if (reference === ResourceBrowseReference) {
url = 'assetmanage.queryResourceDirectoryAsTree';
}
if (viewSelectedKeyRef.current === 'custom') {
url = 'assetmanage.queryCustomTypeRootDirectory';
}
dispatch({
type: url,
callback: data => {
setLoading(false);
let newData = [...data];
let newData = [];
if (viewSelectedKeyRef.current==='dir') {
newData = [...data];
} else {
newData = (data||[]).map((item) => {
console.log(item);
return {...item, text: item.name, nodeId: item.id, type: item.resourceType}
});
}
if (reference === Asset1104ManageReference) {
function recursion1104(subCatalogs) {
......@@ -178,6 +225,7 @@ const AssetTree = (props) => {
newData = newData.filter(item => item.type!=='custom');
}
setLoadedKeys([]);
setTreeData(newData);
const _dataList = [], _groupIds = [];
......@@ -211,6 +259,7 @@ const AssetTree = (props) => {
}
if (resetCurrentDirId) {
if (viewSelectedKeyRef.current==='custom') { defaultItem = newData[0]; }
if (defaultItem) {
const expandedKeys = _dataList
......@@ -467,6 +516,62 @@ const AssetTree = (props) => {
setCustomDirectoryModalVisible(true);
}
const onViewClick = ({ key }) => {
if (viewSelectedKey && viewSelectedKey===key ) return;
viewSelectedKeyRef.current = key;
setViewSelectedKey(key);
setExpandedKeys([]);
getAllDirectoryAsTree();
}
const viewMenus = (
<Menu selectedKeys={[viewSelectedKey]} onClick={onViewClick}>
{
viewModes && viewModes.map(item => {
return (
<Menu.Item key={item.key} value={item.key} >
<div style={{ textAlign: 'center' }}>
{item.name}
</div>
</Menu.Item>
)
})
}
</Menu>
);
const onLoadData = ({ key, children }) =>
new Promise((resolve) => {
if (children) {
resolve();
return;
}
setLoadedKeys([...loadedKeys, key]);
dispatch({
type: 'assetmanage.getDirectoryChild',
payload: {
parentId: key,
},
callback: (data) => {
if (data && data.length>0) {
let newTreeData = updateTreeData(treeData, key, data);
setTreeData(newTreeData);
treeDataRef.current = newTreeData;
}
resolve();
},
error: () => {
resolve();
}
});
});
// const onChange = (e) => {
// const { value } = e.target;
......@@ -607,24 +712,33 @@ const AssetTree = (props) => {
</Menu>
);
const loop = (data, isRootLeaf= true) =>
const loop = (data, rootResourceType = null) =>
data.map(item => {
if (item.level === 1) {
rootResourceType = item.resourceType;
}
const title = (
<span
className={isRootLeaf?'title-color': 'text-color'}
className={(item.level===1)?'title-color': 'text-color'}
>
{item.text}
{
reference === AssetManageReference && <span>{` (${item.dataAssetAndSubDirCount})`}</span>
//自定义类型栏目不统计资产数
(item.level!==1||(item.level===1&&item.resourceType!=='custom')) && <span>{` (${item.dataAssetAndSubDirCount})`}</span>
}
</span>
);
if (item.children) {
return { ...item, ...{title, key: item.nodeId, children: loop(item.children, false)} };
if (item.children && item.children.length>0) {
return { ...item, ...{title, key: item.nodeId, children: loop(item.children, rootResourceType), className: (item.level===1)?'root':''} };
}
return { ...item, ...{ title, key: item.nodeId }};
if (rootResourceType !== 'custom') {
return { ...item, ...{ title, key: item.nodeId, isLeaf: true, className: (item.level===1)?'root':'' }};
}
return { ...item, ...{ title, key: item.nodeId, children: null, className: (item.level===1)?'root':''}};
});
const classes = classNames('asset-tree', className, {
......@@ -644,26 +758,42 @@ const AssetTree = (props) => {
justifyContent: 'space-around',
}}
>
<Tooltip title="新增目录">
<PlusOutlined className={(currentDirType==='custom')?'disable': 'default'} onClick={addDir} style={{ fontSize:16,cursor: (currentDirType==='custom')?'not-allowed':'pointer' }}/>
</Tooltip>
<Tooltip title="刷新目录">
<ReloadOutlined className='default' onClick={refreshTree} style={{ fontSize:16,cursor:'pointer' }} />
</Tooltip>
<Tooltip title="导入目录">
<ImportOutlined className={(currentDirType==='custom')?'disable': 'default'} onClick={importDir} style={{ fontSize:16,cursor:(currentDirType==='custom')?'not-allowed':'pointer' }} />
</Tooltip>
<Dropdown overlay={exportMenu} placement="bottomCenter" >
<Tooltip title="导出目录">
<ExportOutlined className='default' style={{ fontSize:16,cursor:'pointer' }} />
<Dropdown overlay={viewMenus} placement="bottomLeft">
<Tooltip title="视角">
<UnorderedListOutlined className='default' style={{ fontSize:16,cursor:'pointer' }} />
</Tooltip>
</Dropdown>
<Tooltip title="自定义目录">
<SettingOutlined className='default' onClick={customDir} style={{ fontSize:16,cursor:'pointer' }} />
</Tooltip>
<Tooltip title="资产价值评分">
<CalculatorOutlined className='default' onClick={() => {setComputeScoreVisible(true)}} style={{ fontSize:16,cursor:'pointer' }} />
{
(viewSelectedKeyRef.current==='dir') ? <React.Fragment>
<Tooltip title="新增目录">
<PlusOutlined className={(currentDirType==='custom')?'disable': 'default'} onClick={addDir} style={{ fontSize:16,cursor: (currentDirType==='custom')?'not-allowed':'pointer' }}/>
</Tooltip>
<Tooltip title="刷新目录">
<ReloadOutlined className='default' onClick={refreshTree} style={{ fontSize:16,cursor:'pointer' }} />
</Tooltip>
<Tooltip title="导入目录">
<ImportOutlined className={(currentDirType==='custom')?'disable': 'default'} onClick={importDir} style={{ fontSize:16,cursor:(currentDirType==='custom')?'not-allowed':'pointer' }} />
</Tooltip>
<Dropdown overlay={exportMenu} placement="bottomCenter" >
<Tooltip title="导出目录">
<ExportOutlined className='default' style={{ fontSize:16,cursor:'pointer' }} />
</Tooltip>
</Dropdown>
<Tooltip title="资产价值评分">
<CalculatorOutlined className='default' onClick={() => {setComputeScoreVisible(true)}} style={{ fontSize:16,cursor:'pointer' }} />
</Tooltip>
</React.Fragment> : <React.Fragment>
<Tooltip title="刷新目录">
<ReloadOutlined className='default' onClick={refreshTree} style={{ fontSize:16,cursor:'pointer' }} />
</Tooltip>
<Tooltip title="自定义目录">
<SettingOutlined className='default' onClick={customDir} style={{ fontSize:16,cursor:'pointer' }} />
</Tooltip>
<div />
<div />
<div />
</React.Fragment>
}
</div>
)}
bordered={false}
......@@ -672,7 +802,7 @@ const AssetTree = (props) => {
style={{ width: '100%' }}
>
<Spin spinning={loading}>
<AutoComplete
{viewSelectedKeyRef.current==='dir' && <AutoComplete
allowClear
value={keyword}
style={{ marginBottom: 10, width: '100%' }}
......@@ -692,6 +822,7 @@ const AssetTree = (props) => {
})
}
</AutoComplete>
}
<Tree
checkable={checkable}
showLine={true}
......@@ -700,6 +831,8 @@ const AssetTree = (props) => {
expandedKeys={expandedKeys}
autoExpandParent={autoExpandParent}
treeData={loop(treeData)}
loadData={onLoadData}
loadedKeys={loadedKeys}
selectedKeys={[currentDirId||'']}
onSelect={onTreeSelect}
onCheck={onTreeCheck}
......@@ -737,15 +870,19 @@ const AssetTree = (props) => {
/>
{
(reference!==AssetMountReference) && <RcMenu id={MENU_ID}>
<RcItem id="edit" onClick={editDir}>
修改目录
</RcItem>
<RcItem id="up" onClick={() => { moveNode(1); }}>
上移目录
</RcItem>
<RcItem id="down" onClick={() => { moveNode(-1); }}>
下移目录
</RcItem>
{
viewSelectedKeyRef.current==='dir' && <React.Fragment>
<RcItem id="edit" onClick={editDir}>
修改目录
</RcItem>
<RcItem id="up" onClick={() => { moveNode(1); }}>
上移目录
</RcItem>
<RcItem id="down" onClick={() => { moveNode(-1); }}>
下移目录
</RcItem>
</React.Fragment>
}
<RcItem id="delete" onClick={deleteDir}>
删除目录
</RcItem>
......
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