@bit-sun/business-component 2.2.0-alpha.4 → 2.2.0-alpha.5

package/src/components/Business/BsLayouts/Components/CustomerMenu/MenuSetting/leftTree.tsx

@@ -1,243 +1,243 @@
-// @ts-nocheck
-import { Tree, Input, Tooltip, message } from 'antd';
-import React from 'react';
-import './index.less';
-import {
-  SearchOutlined,
-  FolderOutlined,
-} from '@ant-design/icons';
-import arrowRight from '../../../../../../assets/arrowRight.svg';
-import {
-  setMenuTreeData,
-} from '../../../utils';
-import { memoizeOneFormatter } from '@/utils/utils';
-
-
-const { TreeNode } = Tree;
-const { Search } = Input;
-
-const dataList: any[] = [];
-const generateList = data => {
-  for (let i = 0; i < data.length; i++) {
-    const node = data[i];
-    const { path, name } = node;
-    dataList.push({ path, name });
-    if (node.children) {
-      generateList(node.children);
-    }
-  }
-};
-
-
-const getParentKey = (path, tree) => {
-  let parentKey;
-  for (let i = 0; i < tree.length; i++) {
-    const node = tree[i];
-    if (node.children) {
-      if (node.children.some(item => item.path === path)) {
-        parentKey = node.path;
-      } else if (getParentKey(path, node.children)) {
-        parentKey = getParentKey(path, node.children);
-      }
-    }
-  }
-  return parentKey;
-};
-
-class LeftTree extends React.Component<any> {
-  state = {
-    treeData: [],
-    expandedKeys: [],
-    searchValue: '',
-    autoExpandParent: true,
-  };
-
-
-  componentDidMount() {
-    const {originRoutes = [] } = this.props;
-    const showMenu = originRoutes.find(item => item.path === '/')?.routes || [];
-    let routesData = JSON.parse(JSON.stringify(memoizeOneFormatter(showMenu, '')));
-    setMenuTreeData(routesData);
-    generateList(routesData);
-
-    this.setState({
-      treeData: routesData
-    })
-
-  }
-
-  onExpand = expandedKeys => {
-    this.setState({
-      expandedKeys,
-      autoExpandParent: false,
-    });
-  };
-
-  onChange = e => {
-    const { value } = e.target;
-    const { treeData } = this.state;
-    const expandedKeys = dataList
-      .map(item => {
-        if (item.name.indexOf(value) > -1) {
-          return getParentKey(item.path, treeData);
-        }
-        return null;
-      })
-      .filter((item, i, self) => item && self.indexOf(item) === i);
-    this.setState({
-      expandedKeys,
-      searchValue: value,
-      autoExpandParent: true,
-    });
-  };
-
-  getPathList = (originData: any): Array<any> => {
-    let pathList: Array<any> = [];
-    const getList = (data) => {
-      if (Array.isArray(data)) {
-        data.forEach(item => {
-          pathList.push(item.path);
-          if (item.children) {
-            getList(item.children)
-          }
-        })
-      } else {
-        pathList.push(data.path);
-        if (data.children) {
-          getList(data.children);
-        }
-      }
-    }
-    getList(originData);
-    return pathList;
-  }
-
-
-  handleAdd2Menu = (path: string) => {
-    const { treeData } = this.state;
-    const { customerMenuData, setCustomerMenuData } = this.props;
-    let filterItem;
-    const filterMenuItem = (menuData: Array<any>) => {
-      menuData.forEach(item => {
-        if (item.path === path) {
-          filterItem = { ...item };
-          return;
-        }
-        if (item.children) {
-          filterMenuItem(item.children);
-        }
-      })
-    }
-    filterMenuItem(treeData);
-    let addPathList = this.getPathList(filterItem);
-    let oldPathList = this.getPathList(customerMenuData);
-    let isRepet = false;
-    oldPathList.forEach(oldPath => {
-      if (addPathList.find(newPath => newPath === oldPath)) {
-        isRepet = true;
-      }
-    })
-    if (isRepet) {
-      message.warning('存在已经添加的菜单，请检查!');
-      return;
-    }
-    setCustomerMenuData([
-      ...customerMenuData,
-      filterItem
-    ])
-  }
-
-
-  render() {
-    const { searchValue, expandedKeys, autoExpandParent, treeData } = this.state;
-    const loop = data =>
-      data.map(item => {
-        const index = item.name.indexOf(searchValue);
-        const beforeStr = item.name.substr(0, index);
-        const afterStr = item.name.substr(index + searchValue.length);
-        const name =
-          index > -1 ? (
-            <span>
-              {beforeStr}
-              <span style={{ color: '#f50' }}>{searchValue}</span>
-              {afterStr}
-            </span>
-          ) : (
-            <span>{item.name}</span>
-          );
-        if (item.children && item.children.length) {
-          return (
-            <TreeNode
-              path={item.path}
-              icon={<FolderOutlined />}
-              name={<div className={'node_title_content'}>
-                <span>{name}</span>
-                <div
-                  className={'right_arrow'}
-                  onClick={() => {
-                    this.handleAdd2Menu(item.path);
-                  }}
-                >
-                  <Tooltip placement="topRight" title={'单击加入自定义菜单'}>
-                    <img style={{ marginTop: '-3px' }} width={18} src={arrowRight} />
-                  </Tooltip>
-                </div>
-              </div>}
-            >
-              {loop(item.children)}
-            </TreeNode>
-          );
-        }
-        return <TreeNode
-          path={item.path}
-          // icon={<FileOutlined />}
-          name={<div className={'node_title_content'}>
-            <span>{name}</span>
-            <div
-              className={'right_arrow'}
-              onClick={() => {
-                this.handleAdd2Menu(item.path);
-              }}
-            >
-              <Tooltip placement="topRight" title={'单击加入自定义菜单'}>
-                <img style={{ marginTop: '-3px' }} width={18} src={arrowRight} />
-              </Tooltip>
-            </div>
-          </div>}
-        />;
-      });
-    return (
-      <div className={'left_tree_content'}>
-        <div className={'tree_title'}>
-          <div>菜单列表(选中菜单，可快速设置)</div>
-          <Input
-            style={{ marginBottom: 8 }}
-            placeholder="请搜索"
-            allowClear
-
-            prefix={<SearchOutlined />}
-            onChange={this.onChange}
-          />
-        </div>
-        <div className={'tree_content'}>
-          <Tree
-            showIcon
-            showLine={true}
-            fieldNames={{
-              title: 'name',
-              key: 'path',
-              children: 'children'
-            }}
-            onExpand={this.onExpand}
-            expandedKeys={expandedKeys}
-            autoExpandParent={autoExpandParent}
-          >
-            {loop(treeData)}
-          </Tree>
-        </div>
-      </div>
-    );
-  }
-}
-
+// @ts-nocheck
+import { Tree, Input, Tooltip, message } from 'antd';
+import React from 'react';
+import './index.less';
+import {
+  SearchOutlined,
+  FolderOutlined,
+} from '@ant-design/icons';
+import arrowRight from '../../../../../../assets/arrowRight.svg';
+import {
+  setMenuTreeData,
+} from '../../../utils';
+import { memoizeOneFormatter } from '@/utils/utils';
+
+
+const { TreeNode } = Tree;
+const { Search } = Input;
+
+const dataList: any[] = [];
+const generateList = data => {
+  for (let i = 0; i < data.length; i++) {
+    const node = data[i];
+    const { path, name } = node;
+    dataList.push({ path, name });
+    if (node.children) {
+      generateList(node.children);
+    }
+  }
+};
+
+
+const getParentKey = (path, tree) => {
+  let parentKey;
+  for (let i = 0; i < tree.length; i++) {
+    const node = tree[i];
+    if (node.children) {
+      if (node.children.some(item => item.path === path)) {
+        parentKey = node.path;
+      } else if (getParentKey(path, node.children)) {
+        parentKey = getParentKey(path, node.children);
+      }
+    }
+  }
+  return parentKey;
+};
+
+class LeftTree extends React.Component<any> {
+  state = {
+    treeData: [],
+    expandedKeys: [],
+    searchValue: '',
+    autoExpandParent: true,
+  };
+
+
+  componentDidMount() {
+    const {originRoutes = [] } = this.props;
+    const showMenu = originRoutes.find(item => item.path === '/')?.routes || [];
+    let routesData = JSON.parse(JSON.stringify(memoizeOneFormatter(showMenu, '')));
+    setMenuTreeData(routesData);
+    generateList(routesData);
+
+    this.setState({
+      treeData: routesData
+    })
+
+  }
+
+  onExpand = expandedKeys => {
+    this.setState({
+      expandedKeys,
+      autoExpandParent: false,
+    });
+  };
+
+  onChange = e => {
+    const { value } = e.target;
+    const { treeData } = this.state;
+    const expandedKeys = dataList
+      .map(item => {
+        if (item.name.indexOf(value) > -1) {
+          return getParentKey(item.path, treeData);
+        }
+        return null;
+      })
+      .filter((item, i, self) => item && self.indexOf(item) === i);
+    this.setState({
+      expandedKeys,
+      searchValue: value,
+      autoExpandParent: true,
+    });
+  };
+
+  getPathList = (originData: any): Array<any> => {
+    let pathList: Array<any> = [];
+    const getList = (data) => {
+      if (Array.isArray(data)) {
+        data.forEach(item => {
+          pathList.push(item.path);
+          if (item.children) {
+            getList(item.children)
+          }
+        })
+      } else {
+        pathList.push(data.path);
+        if (data.children) {
+          getList(data.children);
+        }
+      }
+    }
+    getList(originData);
+    return pathList;
+  }
+
+
+  handleAdd2Menu = (path: string) => {
+    const { treeData } = this.state;
+    const { customerMenuData, setCustomerMenuData } = this.props;
+    let filterItem;
+    const filterMenuItem = (menuData: Array<any>) => {
+      menuData.forEach(item => {
+        if (item.path === path) {
+          filterItem = { ...item };
+          return;
+        }
+        if (item.children) {
+          filterMenuItem(item.children);
+        }
+      })
+    }
+    filterMenuItem(treeData);
+    let addPathList = this.getPathList(filterItem);
+    let oldPathList = this.getPathList(customerMenuData);
+    let isRepet = false;
+    oldPathList.forEach(oldPath => {
+      if (addPathList.find(newPath => newPath === oldPath)) {
+        isRepet = true;
+      }
+    })
+    if (isRepet) {
+      message.warning('存在已经添加的菜单，请检查!');
+      return;
+    }
+    setCustomerMenuData([
+      ...customerMenuData,
+      filterItem
+    ])
+  }
+
+
+  render() {
+    const { searchValue, expandedKeys, autoExpandParent, treeData } = this.state;
+    const loop = data =>
+      data.map(item => {
+        const index = item.name.indexOf(searchValue);
+        const beforeStr = item.name.substr(0, index);
+        const afterStr = item.name.substr(index + searchValue.length);
+        const name =
+          index > -1 ? (
+            <span>
+              {beforeStr}
+              <span style={{ color: '#f50' }}>{searchValue}</span>
+              {afterStr}
+            </span>
+          ) : (
+            <span>{item.name}</span>
+          );
+        if (item.children && item.children.length) {
+          return (
+            <TreeNode
+              path={item.path}
+              icon={<FolderOutlined />}
+              name={<div className={'node_title_content'}>
+                <span>{name}</span>
+                <div
+                  className={'right_arrow'}
+                  onClick={() => {
+                    this.handleAdd2Menu(item.path);
+                  }}
+                >
+                  <Tooltip placement="topRight" title={'单击加入自定义菜单'}>
+                    <img style={{ marginTop: '-3px' }} width={18} src={arrowRight} />
+                  </Tooltip>
+                </div>
+              </div>}
+            >
+              {loop(item.children)}
+            </TreeNode>
+          );
+        }
+        return <TreeNode
+          path={item.path}
+          // icon={<FileOutlined />}
+          name={<div className={'node_title_content'}>
+            <span>{name}</span>
+            <div
+              className={'right_arrow'}
+              onClick={() => {
+                this.handleAdd2Menu(item.path);
+              }}
+            >
+              <Tooltip placement="topRight" title={'单击加入自定义菜单'}>
+                <img style={{ marginTop: '-3px' }} width={18} src={arrowRight} />
+              </Tooltip>
+            </div>
+          </div>}
+        />;
+      });
+    return (
+      <div className={'left_tree_content'}>
+        <div className={'tree_title'}>
+          <div>菜单列表(选中菜单，可快速设置)</div>
+          <Input
+            style={{ marginBottom: 8 }}
+            placeholder="请搜索"
+            allowClear
+
+            prefix={<SearchOutlined />}
+            onChange={this.onChange}
+          />
+        </div>
+        <div className={'tree_content'}>
+          <Tree
+            showIcon
+            showLine={true}
+            fieldNames={{
+              title: 'name',
+              key: 'path',
+              children: 'children'
+            }}
+            onExpand={this.onExpand}
+            expandedKeys={expandedKeys}
+            autoExpandParent={autoExpandParent}
+          >
+            {loop(treeData)}
+          </Tree>
+        </div>
+      </div>
+    );
+  }
+}
+
 export default LeftTree;