diff --git a/web/client/src/sections/metadataManagement/containers/businessMetadata.js b/web/client/src/sections/metadataManagement/containers/businessMetadata.js index c1bba2c..23e115d 100644 --- a/web/client/src/sections/metadataManagement/containers/businessMetadata.js +++ b/web/client/src/sections/metadataManagement/containers/businessMetadata.js @@ -1,13 +1,12 @@ import React, { useEffect, useState } from 'react'; import { connect } from 'react-redux'; -import { Spin, Row, Col, Tree, Tooltip } from 'antd'; -import theStyle from './style.css'; +import { Spin, Row, Col, Tree, Tooltip, Input } from 'antd'; import BusinessTab from './businessTab'; let expandedKeysData = []; let allTreeNodeKeys = []; const BusinessMetadata = (props) => { - const { user, dispatch, actions, clientHeight, isRequesting } = props; + const { user, dispatch, actions, clientHeight, isRequesting, resourceCatalog } = props; const { metadataManagement } = actions; const [resourceCatalogData, setResourceCatalogData] = useState([]); const [selectedKeys, setSelectedKeys] = useState([]); @@ -25,7 +24,7 @@ const BusinessMetadata = (props) => { const { data } = res.payload; if (res.success) { allTreeNodeKeys = [] - const resourceCatalogData = getTreeNodeData(data, null, 'rc'); + const resourceCatalogData = getTreeNodeData(data, null, 'rc', [], null); setResourceCatalogData(resourceCatalogData); if (data.length) { if (jumpBusinessSelectedKey || selectedKeys.length) @@ -51,45 +50,96 @@ const BusinessMetadata = (props) => { setResourceCatalogPath(resourceCatalogPath); return allExpandedKeys.map(a => a.key); } - const getTreeNodeData = (dataSource, parent, key) => { + const getTreeNodeData = (dataSource, parent, key, searchKeys, searchvalue) => { let treeData = []; let data = []; if (!parent) { data = dataSource.filter(ds => !ds.parent); if (!expandedKeysData.length && data.length) { - expandedKeysData.push(`rc-${data[0].id}`); + if (searchKeys && searchKeys.includes(`rc-${data[0].id}`) || !searchvalue) + expandedKeysData.push(`rc-${data[0].id}`); } } else { data = dataSource.filter(ds => ds.parent == parent); } - treeData = data.map(ds => { - allTreeNodeKeys.push({ name: ds.name, key: `${key}-${ds.id}`, id: ds.id }) - return { title: renderTreeNode(ds), key: `${key}-${ds.id}`, id: ds.id } + data.map(ds => { + if (!searchvalue) + allTreeNodeKeys.push({ name: ds.name, 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) { - d.children = getTreeNodeData(dataSource, d.id, d.key); + d.children = getTreeNodeData(dataSource, d.id, d.key, searchKeys, searchvalue); } return treeData } const setTreeNodeTitle = (name) => { let content = {name} - if (name.length > 6) { + if (name.length > 10) { content = - {name.substring(0, 6) + '...'} + {name.substring(0, 10) + '...'} } return content; } const renderTreeNode = (ds) => { - return
+ return
{setTreeNodeTitle(ds.name)}
}; + 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 + { const { data } = res.payload; if (res.success) { allTreeNodeKeys = [] - const resourceCatalogData = getTreeNodeData(data, null, 'rc'); + const resourceCatalogData = getTreeNodeData(data, null, 'rc', [], null); setResourceCatalogData(resourceCatalogData); if (data.length) { if (configRefresh) { @@ -58,23 +58,27 @@ const LatestMetadata = (props) => { setResourceCatalogPath(resourceCatalogPath); return allExpandedKeys.map(a => a.key); } - const getTreeNodeData = (dataSource, parent, key) => { + const getTreeNodeData = (dataSource, parent, key, searchKeys, searchvalue) => { let treeData = []; let data = []; if (!parent) { data = dataSource.filter(ds => !ds.parent); if (!expandedKeysData.length && data.length) { - expandedKeysData.push(`rc-${data[0].id}`); + if (searchKeys && searchKeys.includes(`rc-${data[0].id}`) || !searchvalue) + expandedKeysData.push(`rc-${data[0].id}`); } } else { data = dataSource.filter(ds => ds.parent == parent); } - treeData = data.map(ds => { - allTreeNodeKeys.push({ name: ds.name, key: `${key}-${ds.id}`, id: ds.id }) - return { title: renderTreeNode(ds, dataSource), key: `${key}-${ds.id}`, id: ds.id } + data.map(ds => { + if (!searchvalue) + allTreeNodeKeys.push({ name: ds.name, 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) { - d.children = getTreeNodeData(dataSource, d.id, d.key); + d.children = getTreeNodeData(dataSource, d.id, d.key, searchKeys, searchvalue); } 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 +