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

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 { Spin, Row, Col, Tree, Tooltip, Input } from 'antd';
-import theStyle from './style.css';
 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 => {
+        data.map(ds => {
-            allTreeNodeKeys.push({ name: ds.name, key: `${key}-${ds.id}`, id: ds.id })
+            if (!searchvalue)
-            return { title: renderTreeNode(ds), key: `${key}-${ds.id}`, id: ds.id }
+                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 = <span>{name}</span>
-        if (name.length > 6) {
+        if (name.length > 10) {
             content = <Tooltip title={name}>
-                {name.substring(0, 6) + '...'}
+                {name.substring(0, 10) + '...'}
             </Tooltip>
         }
         return content;
     }
 
     const renderTreeNode = (ds) => {
-        return <div className={theStyle.icon} style={{ width: 180 }}>
+        return <div style={{ width: 180 }}>
             {setTreeNodeTitle(ds.name)}
         </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}>
         <Row>
             <Col style={{ width: 240 }}>
+                <Input style={{ width: 220, marginBottom: 16 }} placeholder="输入资源目录关键字搜索"
+                    allowClear onChange={onChangeSearch}
+                    onKeyPress={onChangeSearch} />
                 <Tree
                     // showLine
                     height={clientHeight - 180}

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

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 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 theStyle from './style.css';
 import ResourceCatalogModal from '../components/resourceCatalogModal';
@@ -30,7 +30,7 @@ const LatestMetadata = (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 (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 => {
+        data.map(ds => {
-            allTreeNodeKeys.push({ name: ds.name, key: `${key}-${ds.id}`, id: ds.id })
+            if (!searchvalue)
-            return { title: renderTreeNode(ds, dataSource), key: `${key}-${ds.id}`, id: ds.id }
+                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 <Spin spinning={isRequesting}>
         <Row>
             <Col style={{ width: 240 }}>
+                <Input style={{ width: 220, marginBottom: 8 }} placeholder="输入资源目录关键字搜索"
+                    allowClear onChange={onChangeSearch}
+                    onKeyPress={onChangeSearch} />
                 <Button type='primary' style={{ marginBottom: 16 }} onClick={() => {
                     setEditData({ title: '新建资源目录', add: true });
                     setModalVisible(true);