Browse Source

(*)最新元数据、业务元数据管理新增优化资源目录检索

master
zmh 2 years ago
parent
commit
ebd2737fa3
  1. 72
      web/client/src/sections/metadataManagement/containers/businessMetadata.js
  2. 63
      web/client/src/sections/metadataManagement/containers/latestMetadata.js

72
web/client/src/sections/metadataManagement/containers/businessMetadata.js

@ -1,13 +1,12 @@
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { Spin, Row, Col, Tree, Tooltip } from 'antd'; import { Spin, Row, Col, Tree, Tooltip, Input } from 'antd';
import theStyle from './style.css';
import BusinessTab from './businessTab'; import BusinessTab from './businessTab';
let expandedKeysData = []; let expandedKeysData = [];
let allTreeNodeKeys = []; let allTreeNodeKeys = [];
const BusinessMetadata = (props) => { const BusinessMetadata = (props) => {
const { user, dispatch, actions, clientHeight, isRequesting } = props; const { user, dispatch, actions, clientHeight, isRequesting, resourceCatalog } = props;
const { metadataManagement } = actions; const { metadataManagement } = actions;
const [resourceCatalogData, setResourceCatalogData] = useState([]); const [resourceCatalogData, setResourceCatalogData] = useState([]);
const [selectedKeys, setSelectedKeys] = useState([]); const [selectedKeys, setSelectedKeys] = useState([]);
@ -25,7 +24,7 @@ const BusinessMetadata = (props) => {
const { data } = res.payload; const { data } = res.payload;
if (res.success) { if (res.success) {
allTreeNodeKeys = [] allTreeNodeKeys = []
const resourceCatalogData = getTreeNodeData(data, null, 'rc'); const resourceCatalogData = getTreeNodeData(data, null, 'rc', [], null);
setResourceCatalogData(resourceCatalogData); setResourceCatalogData(resourceCatalogData);
if (data.length) { if (data.length) {
if (jumpBusinessSelectedKey || selectedKeys.length) if (jumpBusinessSelectedKey || selectedKeys.length)
@ -51,45 +50,96 @@ const BusinessMetadata = (props) => {
setResourceCatalogPath(resourceCatalogPath); setResourceCatalogPath(resourceCatalogPath);
return allExpandedKeys.map(a => a.key); return allExpandedKeys.map(a => a.key);
} }
const getTreeNodeData = (dataSource, parent, key) => { const getTreeNodeData = (dataSource, parent, key, searchKeys, searchvalue) => {
let treeData = []; let treeData = [];
let data = []; let data = [];
if (!parent) { if (!parent) {
data = dataSource.filter(ds => !ds.parent); data = dataSource.filter(ds => !ds.parent);
if (!expandedKeysData.length && data.length) { if (!expandedKeysData.length && data.length) {
if (searchKeys && searchKeys.includes(`rc-${data[0].id}`) || !searchvalue)
expandedKeysData.push(`rc-${data[0].id}`); expandedKeysData.push(`rc-${data[0].id}`);
} }
} else { } else {
data = dataSource.filter(ds => ds.parent == parent); data = dataSource.filter(ds => ds.parent == parent);
} }
treeData = data.map(ds => { data.map(ds => {
if (!searchvalue)
allTreeNodeKeys.push({ name: ds.name, key: `${key}-${ds.id}`, id: ds.id }) allTreeNodeKeys.push({ name: ds.name, key: `${key}-${ds.id}`, id: ds.id })
return { title: renderTreeNode(ds), key: `${key}-${ds.id}`, id: ds.id } if (searchKeys && searchKeys.includes(`${key}-${ds.id}`) || !searchvalue) {
treeData.push({ title: renderTreeNode(ds, dataSource), key: `${key}-${ds.id}`, id: ds.id })
}
}); });
for (let d of treeData) { for (let d of treeData) {
d.children = getTreeNodeData(dataSource, d.id, d.key); d.children = getTreeNodeData(dataSource, d.id, d.key, searchKeys, searchvalue);
} }
return treeData return treeData
} }
const setTreeNodeTitle = (name) => { const setTreeNodeTitle = (name) => {
let content = <span>{name}</span> let content = <span>{name}</span>
if (name.length > 6) { if (name.length > 10) {
content = <Tooltip title={name}> content = <Tooltip title={name}>
{name.substring(0, 6) + '...'} {name.substring(0, 10) + '...'}
</Tooltip> </Tooltip>
} }
return content; return content;
} }
const renderTreeNode = (ds) => { const renderTreeNode = (ds) => {
return <div className={theStyle.icon} style={{ width: 180 }}> return <div style={{ width: 180 }}>
{setTreeNodeTitle(ds.name)} {setTreeNodeTitle(ds.name)}
</div > </div >
}; };
const onSearch = value => {
let searchKeys = [];
let selectedKeys = [];
//allTreeNodeKeys map遍历每个节点,找出所有相关节点及父节点
allTreeNodeKeys.map(item => {
if (item.name.indexOf(value) > -1) {
let arr = item.key.split('-')
if (arr.length) {
let str = '';
for (let i = 1; i < arr.length - 1; i++) {
if (str) {
str += '-' + arr[i];
}
else {
str += 'rc-' + arr[i];
}
if (!searchKeys.includes(str))
searchKeys.push(str);
}
}
if (!searchKeys.includes(item.key))
searchKeys.push(item.key);
if (!selectedKeys.length)
selectedKeys.push(item.key);
}
});
const resourceCatalogData = getTreeNodeData(resourceCatalog, null, 'rc', searchKeys, value);
setResourceCatalogData(resourceCatalogData);
if (selectedKeys.length) {
let expandedKeys = getExpandKeys(selectedKeys);
setSelectedKeys(selectedKeys);
setExpandedKeys(expandedKeys);
} else {
setSelectedKeys([]);
setExpandedKeys([]);
setResourceCatalogId('');
setResourceCatalogKey('');
setResourceCatalogPath([]);
}
};
const onChangeSearch = e => {
const { value } = e.target;
onSearch(value);
};
return <Spin spinning={isRequesting}> return <Spin spinning={isRequesting}>
<Row> <Row>
<Col style={{ width: 240 }}> <Col style={{ width: 240 }}>
<Input style={{ width: 220, marginBottom: 16 }} placeholder="输入资源目录关键字搜索"
allowClear onChange={onChangeSearch}
onKeyPress={onChangeSearch} />
<Tree <Tree
// showLine // showLine
height={clientHeight - 180} height={clientHeight - 180}

63
web/client/src/sections/metadataManagement/containers/latestMetadata.js

@ -1,6 +1,6 @@
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { Spin, Row, Col, Tree, Button, Tooltip, Popconfirm } from 'antd'; import { Spin, Row, Col, Tree, Button, Tooltip, Popconfirm, Input } from 'antd';
import { PlusCircleOutlined, EditOutlined, MinusCircleOutlined } from '@ant-design/icons'; import { PlusCircleOutlined, EditOutlined, MinusCircleOutlined } from '@ant-design/icons';
import theStyle from './style.css'; import theStyle from './style.css';
import ResourceCatalogModal from '../components/resourceCatalogModal'; import ResourceCatalogModal from '../components/resourceCatalogModal';
@ -30,7 +30,7 @@ const LatestMetadata = (props) => {
const { data } = res.payload; const { data } = res.payload;
if (res.success) { if (res.success) {
allTreeNodeKeys = [] allTreeNodeKeys = []
const resourceCatalogData = getTreeNodeData(data, null, 'rc'); const resourceCatalogData = getTreeNodeData(data, null, 'rc', [], null);
setResourceCatalogData(resourceCatalogData); setResourceCatalogData(resourceCatalogData);
if (data.length) { if (data.length) {
if (configRefresh) { if (configRefresh) {
@ -58,23 +58,27 @@ const LatestMetadata = (props) => {
setResourceCatalogPath(resourceCatalogPath); setResourceCatalogPath(resourceCatalogPath);
return allExpandedKeys.map(a => a.key); return allExpandedKeys.map(a => a.key);
} }
const getTreeNodeData = (dataSource, parent, key) => { const getTreeNodeData = (dataSource, parent, key, searchKeys, searchvalue) => {
let treeData = []; let treeData = [];
let data = []; let data = [];
if (!parent) { if (!parent) {
data = dataSource.filter(ds => !ds.parent); data = dataSource.filter(ds => !ds.parent);
if (!expandedKeysData.length && data.length) { if (!expandedKeysData.length && data.length) {
if (searchKeys && searchKeys.includes(`rc-${data[0].id}`) || !searchvalue)
expandedKeysData.push(`rc-${data[0].id}`); expandedKeysData.push(`rc-${data[0].id}`);
} }
} else { } else {
data = dataSource.filter(ds => ds.parent == parent); data = dataSource.filter(ds => ds.parent == parent);
} }
treeData = data.map(ds => { data.map(ds => {
if (!searchvalue)
allTreeNodeKeys.push({ name: ds.name, key: `${key}-${ds.id}`, id: ds.id }) allTreeNodeKeys.push({ name: ds.name, key: `${key}-${ds.id}`, id: ds.id })
return { title: renderTreeNode(ds, dataSource), key: `${key}-${ds.id}`, id: ds.id } if (searchKeys && searchKeys.includes(`${key}-${ds.id}`) || !searchvalue) {
treeData.push({ title: renderTreeNode(ds, dataSource), key: `${key}-${ds.id}`, id: ds.id })
}
}); });
for (let d of treeData) { for (let d of treeData) {
d.children = getTreeNodeData(dataSource, d.id, d.key); d.children = getTreeNodeData(dataSource, d.id, d.key, searchKeys, searchvalue);
} }
return treeData return treeData
} }
@ -129,9 +133,56 @@ const LatestMetadata = (props) => {
}); });
} }
} }
const onSearch = value => {
let searchKeys = [];
let selectedKeys = [];
//allTreeNodeKeys map遍历每个节点,找出所有相关节点及父节点
allTreeNodeKeys.map(item => {
if (item.name.indexOf(value) > -1) {
let arr = item.key.split('-')
if (arr.length) {
let str = '';
for (let i = 1; i < arr.length - 1; i++) {
if (str) {
str += '-' + arr[i];
}
else {
str += 'rc-' + arr[i];
}
if (!searchKeys.includes(str))
searchKeys.push(str);
}
}
if (!searchKeys.includes(item.key))
searchKeys.push(item.key);
if (!selectedKeys.length)
selectedKeys.push(item.key);
}
});
const resourceCatalogData = getTreeNodeData(resourceCatalog, null, 'rc', searchKeys, value);
setResourceCatalogData(resourceCatalogData);
if (selectedKeys.length) {
let expandedKeys = getExpandKeys(selectedKeys);
setSelectedKeys(selectedKeys);
setExpandedKeys(expandedKeys);
} else {
setSelectedKeys([]);
setExpandedKeys([]);
setResourceCatalogId('');
setResourceCatalogKey('');
setResourceCatalogPath([]);
}
};
const onChangeSearch = e => {
const { value } = e.target;
onSearch(value);
};
return <Spin spinning={isRequesting}> return <Spin spinning={isRequesting}>
<Row> <Row>
<Col style={{ width: 240 }}> <Col style={{ width: 240 }}>
<Input style={{ width: 220, marginBottom: 8 }} placeholder="输入资源目录关键字搜索"
allowClear onChange={onChangeSearch}
onKeyPress={onChangeSearch} />
<Button type='primary' style={{ marginBottom: 16 }} onClick={() => { <Button type='primary' style={{ marginBottom: 16 }} onClick={() => {
setEditData({ title: '新建资源目录', add: true }); setEditData({ title: '新建资源目录', add: true });
setModalVisible(true); setModalVisible(true);

Loading…
Cancel
Save