@bit-sun/business-component 2.4.19 → 2.4.21

package/src/components/Business/BsLayouts/Components/CustomerMenu/globalMenu/DrawContent.tsx

@@ -1,286 +1,286 @@
-// @ts-nocheck
-import React, { useEffect, useState, useLayoutEffect, useImperativeHandle } from 'react';
-import { List, Tooltip, Input, Button } from 'antd';
-import { Link, formatMessage, history } from 'umi';
-import classNames from 'classnames';
-import { debounce } from 'lodash';
-import {
-  setMenuTreeData,
-  searchMenuData,
-} from '../../../utils';
-import { memoizeOneFormatter } from '@/utils/utils';
-import { SearchOutlined, CaretDownOutlined  } from '@ant-design/icons';
-import './drawContent.less';
-import right from '../../../../../../assets/right.png';
-import closeicon from '../../../../../../assets/closeicon.png';
-
-
-const DrawContent = ({onClose, originRoutes=[], itemPath}: any) => {
-  const [homepageData, sethomepageData]: any[] = useState([]);
-  const [routesData, setroutesData]: any[] = useState([]);
-  const [authorityMenu, setAuthorityMenu]: any[] = useState([]);
-
-  const [currentOneLevel, setCurrentOneLevel] = useState<string>('');
-  const [SearhData, setSearchMenuData] = useState<any[]>([]);
-  const [rightMenuHeight, setHeight] = useState<number>(600);
-  const [drawHeight, setDrawHeight] = useState<number>(900);
-
-  const [moreBtnShow, setMoreBtnShow] = useState(false);
-  const [showScroll, setShowScroll] = useState(false);
-
-  useEffect(() => {
-    getMenuContentHeight();
-    const homepageDataList: any[] = []; //不含子集的菜单
-    const routesDataList: any[] = []; //含子集的菜单
-    const authorityMenuList: any[] = []; //当前权限可以看到的所有菜单
-
-    const showMenu = originRoutes.find(item => item.path === '/')?.routes || [];
-    let routesData = JSON.parse(JSON.stringify(memoizeOneFormatter(showMenu, '')));
-    setMenuTreeData(routesData);
-
-    routesData.forEach(item => {
-      if (item.children) {
-        routesDataList.push(item);
-        authorityMenuList.push(item)
-      } else {
-        homepageDataList.push(item);
-        authorityMenuList.push(item)
-      }
-    })
-    sethomepageData(homepageDataList)
-    setroutesData(routesDataList)
-    setAuthorityMenu(authorityMenuList)
-
-    window.onresize = () => {
-      getMenuContentHeight();
-    };
-  }, []);
-
-  useLayoutEffect(() => {
-    setTimeout(() => {
-      let drawContentHeight=document.getElementById("drawContent").scrollHeight;
-      if (drawContentHeight > rightMenuHeight) {
-        setMoreBtnShow(true);
-      }
-    }, 0)
-  }, [])
-
-  const getMenuContentHeight = () => {
-    let clientHeight = document.body.clientHeight;
-    setHeight(clientHeight - 190);
-    setDrawHeight(clientHeight - 70)
-  }
-
-
-  const renderChildItem = (child) => {
-    if (!child.hideInMenu && child.children) {
-      return (
-        <>
-          <List.Item style={{ color: '#000', fontWeight: 'bold' }}>
-            {formatMessage({ id: `${child.locale}` })}
-          </List.Item>
-          {child.children.map((menuItem: any) => {
-            return renderChildItem(menuItem)
-          })}
-        </>
-      );
-    } else if (!child.hideInMenu && child.path) {
-      return (
-        <List.Item style={{fontSize: '12px'}} className="allFuncOnMouserover">
-          <Link to={child.path} onClick={(e) => {onMenuClick(e, child);}}>
-            <Tooltip
-              title={formatMessage({ id: `${child.locale}` })}
-            >
-              {formatMessage({ id: `${child.locale}` }).length > 10
-                ? `${formatMessage({
-                  id: `${child.name}`,
-                }).slice(0, 10)}...`
-                : formatMessage({ id: `${child.locale}` })}
-            </Tooltip>
-            <img className="allFuncOnMouseroverImg" src={right}></img>
-          </Link>
-        </List.Item>
-      );
-    }
-  }
-
-  const onMenuClick = (e, item) => {
-    e.stopPropagation();
-    e.preventDefault();
-    let searchHistory = JSON.parse(localStorage.getItem(`${itemPath}_search_history`) || '[]');
-    if (searchHistory.every(hisItem => item.path !== hisItem.padth)) {
-      if (searchHistory.length < 10 ) {
-        searchHistory.push({
-          name: item.name,
-          path: item.path
-        })
-      } else {
-        searchHistory.pop();
-        searchHistory.unshift({
-          name: item.name,
-          path: item.path
-        })
-      }
-    }
-    localStorage.setItem(`${itemPath}_search_history`, JSON.stringify(searchHistory))
-    history.push({
-      pathname: item.path
-    })
-    onClose();
-  };
-
-
-  let searchHistoryList = JSON.parse(localStorage.getItem(`${itemPath}_search_history`) || '[]');
-  return (
-    <div style={{height: `${drawHeight}px`}} className={'global_menu_draw_content'}>
-      <div className={'drawerWarp_left'}>
-        <div className={'left_item_title'} >一级菜单</div>
-        {
-          authorityMenu.map(item => (
-            <div
-              className={'left_item'}
-              style={{
-                borderLeft: currentOneLevel === item.path ? '2px solid #1890ff' : 'none',
-                color: currentOneLevel === item.path ? '#1890ff' : '#000000'
-              }}
-              onClick={(e) => {
-                e.stopPropagation();
-                e.preventDefault()
-                if (item.component) {
-                  history.push({
-                    pathname: item.path
-                  })
-                  onClose();
-                } else {
-                  setCurrentOneLevel(item.path);
-                  let currentDom = document.getElementById(item.path);
-                  currentDom && currentDom.scrollIntoView();
-                }
-              }}
-            >
-              {item.name}
-            </div>))
-        }
-      </div>
-      <div style={{flexGrow: 1, position: 'relative'}}>
-        <img
-          onClick={() => {onClose()}} 
-          style={{position: 'absolute', right: '15px', top: '17px', cursor: 'pointer'}} width={24} src={closeicon} />
-        
-        <div style={{ padding: '10px', marginBottom: '10px', width: '100%', }}>
-          <Input
-            style={{ height: '36px', borderRadius: '4px', width: '830px' }}
-            placeholder="请输入关键词"
-            allowClear
-            prefix={<SearchOutlined />}
-            onChange={debounce((e: any) => {
-              searchMenuData(authorityMenu, e.target.value, setSearchMenuData);
-            }, 600)}
-          />
-          <div style={{marginTop: '10px'}}>
-            <span style={{ color: '#8c8c8c', opacity: '0.6' }}>最近访问:&nbsp;&nbsp;&nbsp;</span>
-            {
-              searchHistoryList.map(item => {
-                return ( 
-                  <Link style={{color: '#000000', marginRight: '10px'}} to={item.path} onClick={(e) => {onMenuClick(e, item);}}>
-                  {item.name}
-                </Link>)
-              })
-            }
-          </div>
-        </div>
-        {
-          !!SearhData.length ?
-            (<div className={'search_menu_content'}>
-              {
-                SearhData.map((item: any) => (
-                  <div onClick={(e) => {
-                    onMenuClick(e, item);
-                  }} key={item.path}>{item.name}</div>
-                ))
-              }
-            </div>) : (
-              <div>
-                <div 
-                style={{
-                  height: `${rightMenuHeight}px`, 
-                  overflowY: 'scroll',
-                  position: 'relative',
-                  width: '100%'
-                }}
-                >
-                <div id='drawContent'  className={'drawerWarp_right'}>
-                  {homepageData && homepageData.filter((d) => !d.hideInMenu).length > 0 && (
-                    <List
-                      className={classNames('allFunsList', 'allFunsListWarp')}
-                      dataSource={homepageData}
-                      renderItem={(child: any) => {
-                        if (!child.hideInMenu && child.path) {
-                          return (
-                            <div className={classNames('allFunsListWarp')}>
-                              <List.Item
-                                className={classNames('allFuncOnMouserover')}
-                                style={{ padding: '12px 24px' }}
-                              >
-                                <Link to={child.path} onClick={(e) => {onMenuClick(e, child);}}>
-                                  {formatMessage({ id: `${child.name}` })}
-                                  <img className="allFuncOnMouseroverImg" src={right}></img>
-                                </Link>
-                              </List.Item>
-                            </div>
-                          );
-                        }
-                      }}
-                    />
-                  )}
-                  {routesData.map((item, index) => {
-                    return (
-                      <List
-                        // className={classNames('allFunsList', 'allFunsListWarp', )}
-                        className={`allFunsList allFunsListWarp ${currentOneLevel === item.path ? 'choosedStyle' : ''}`}
-                        id={item.path}
-                        style={{
-                          color: currentOneLevel === item.path ? '#fff' : '#005CFF',
-                        }}
-                        header={<b>{formatMessage({ id: `${item.name}` })}</b>}
-                        bordered
-                        dataSource={item.children}
-                        renderItem={(child: any) => {
-                          return renderChildItem(child)
-                        }}
-                      />
-                    );
-                  })}
-                </div>
-                <div style={{
-                    display: moreBtnShow ? 'block' : 'none',
-                    // position: 'absolute', 
-                    textAlign: 'center', 
-                    bottom: 0, 
-                    background: '#ffffff', 
-                    width: '100%', 
-                    height: '30px'
-                    }}>
-                  <span
-                    onClick={() => {
-                      setShowScroll(true);
-                      setMoreBtnShow(false);
-                    }}
-                    style={{color: '#8c8c8c'}}
-                    >
-                    <CaretDownOutlined />
-                      下滑加载更多
-                  </span>
-                </div>
-              </div>
-              </div>
-            )
-
-        }
-      </div>
-    </div>
-  )
-
-}
-
+// @ts-nocheck
+import React, { useEffect, useState, useLayoutEffect, useImperativeHandle } from 'react';
+import { List, Tooltip, Input, Button } from 'antd';
+import { Link, formatMessage, history } from 'umi';
+import classNames from 'classnames';
+import { debounce } from 'lodash';
+import {
+  setMenuTreeData,
+  searchMenuData,
+} from '../../../utils';
+import { memoizeOneFormatter } from '@/utils/utils';
+import { SearchOutlined, CaretDownOutlined  } from '@ant-design/icons';
+import './drawContent.less';
+import right from '../../../../../../assets/right.png';
+import closeicon from '../../../../../../assets/closeicon.png';
+
+
+const DrawContent = ({onClose, originRoutes=[], itemPath}: any) => {
+  const [homepageData, sethomepageData]: any[] = useState([]);
+  const [routesData, setroutesData]: any[] = useState([]);
+  const [authorityMenu, setAuthorityMenu]: any[] = useState([]);
+
+  const [currentOneLevel, setCurrentOneLevel] = useState<string>('');
+  const [SearhData, setSearchMenuData] = useState<any[]>([]);
+  const [rightMenuHeight, setHeight] = useState<number>(600);
+  const [drawHeight, setDrawHeight] = useState<number>(900);
+
+  const [moreBtnShow, setMoreBtnShow] = useState(false);
+  const [showScroll, setShowScroll] = useState(false);
+
+  useEffect(() => {
+    getMenuContentHeight();
+    const homepageDataList: any[] = []; //不含子集的菜单
+    const routesDataList: any[] = []; //含子集的菜单
+    const authorityMenuList: any[] = []; //当前权限可以看到的所有菜单
+
+    const showMenu = originRoutes.find(item => item.path === '/')?.routes || [];
+    let routesData = JSON.parse(JSON.stringify(memoizeOneFormatter(showMenu, '')));
+    setMenuTreeData(routesData);
+
+    routesData.forEach(item => {
+      if (item.children) {
+        routesDataList.push(item);
+        authorityMenuList.push(item)
+      } else {
+        homepageDataList.push(item);
+        authorityMenuList.push(item)
+      }
+    })
+    sethomepageData(homepageDataList)
+    setroutesData(routesDataList)
+    setAuthorityMenu(authorityMenuList)
+
+    window.onresize = () => {
+      getMenuContentHeight();
+    };
+  }, []);
+
+  useLayoutEffect(() => {
+    setTimeout(() => {
+      let drawContentHeight=document.getElementById("drawContent").scrollHeight;
+      if (drawContentHeight > rightMenuHeight) {
+        setMoreBtnShow(true);
+      }
+    }, 0)
+  }, [])
+
+  const getMenuContentHeight = () => {
+    let clientHeight = document.body.clientHeight;
+    setHeight(clientHeight - 190);
+    setDrawHeight(clientHeight - 70)
+  }
+
+
+  const renderChildItem = (child) => {
+    if (!child.hideInMenu && child.children) {
+      return (
+        <>
+          <List.Item style={{ color: '#000', fontWeight: 'bold' }}>
+            {formatMessage({ id: `${child.locale}` })}
+          </List.Item>
+          {child.children.map((menuItem: any) => {
+            return renderChildItem(menuItem)
+          })}
+        </>
+      );
+    } else if (!child.hideInMenu && child.path) {
+      return (
+        <List.Item style={{fontSize: '12px'}} className="allFuncOnMouserover">
+          <Link to={child.path} onClick={(e) => {onMenuClick(e, child);}}>
+            <Tooltip
+              title={formatMessage({ id: `${child.locale}` })}
+            >
+              {formatMessage({ id: `${child.locale}` }).length > 10
+                ? `${formatMessage({
+                  id: `${child.name}`,
+                }).slice(0, 10)}...`
+                : formatMessage({ id: `${child.locale}` })}
+            </Tooltip>
+            <img className="allFuncOnMouseroverImg" src={right}></img>
+          </Link>
+        </List.Item>
+      );
+    }
+  }
+
+  const onMenuClick = (e, item) => {
+    e.stopPropagation();
+    e.preventDefault();
+    let searchHistory = JSON.parse(localStorage.getItem(`${itemPath}_search_history`) || '[]');
+    if (searchHistory.every(hisItem => item.path !== hisItem.padth)) {
+      if (searchHistory.length < 10 ) {
+        searchHistory.push({
+          name: item.name,
+          path: item.path
+        })
+      } else {
+        searchHistory.pop();
+        searchHistory.unshift({
+          name: item.name,
+          path: item.path
+        })
+      }
+    }
+    localStorage.setItem(`${itemPath}_search_history`, JSON.stringify(searchHistory))
+    history.push({
+      pathname: item.path
+    })
+    onClose();
+  };
+
+
+  let searchHistoryList = JSON.parse(localStorage.getItem(`${itemPath}_search_history`) || '[]');
+  return (
+    <div style={{height: `${drawHeight}px`}} className={'global_menu_draw_content'}>
+      <div className={'drawerWarp_left'}>
+        <div className={'left_item_title'} >一级菜单</div>
+        {
+          authorityMenu.map(item => (
+            <div
+              className={'left_item'}
+              style={{
+                borderLeft: currentOneLevel === item.path ? '2px solid #1890ff' : 'none',
+                color: currentOneLevel === item.path ? '#1890ff' : '#000000'
+              }}
+              onClick={(e) => {
+                e.stopPropagation();
+                e.preventDefault()
+                if (item.component) {
+                  history.push({
+                    pathname: item.path
+                  })
+                  onClose();
+                } else {
+                  setCurrentOneLevel(item.path);
+                  let currentDom = document.getElementById(item.path);
+                  currentDom && currentDom.scrollIntoView();
+                }
+              }}
+            >
+              {item.name}
+            </div>))
+        }
+      </div>
+      <div style={{flexGrow: 1, position: 'relative'}}>
+        <img
+          onClick={() => {onClose()}} 
+          style={{position: 'absolute', right: '15px', top: '17px', cursor: 'pointer'}} width={24} src={closeicon} />
+        
+        <div style={{ padding: '10px', marginBottom: '10px', width: '100%', }}>
+          <Input
+            style={{ height: '36px', borderRadius: '4px', width: '830px' }}
+            placeholder="请输入关键词"
+            allowClear
+            prefix={<SearchOutlined />}
+            onChange={debounce((e: any) => {
+              searchMenuData(authorityMenu, e.target.value, setSearchMenuData);
+            }, 600)}
+          />
+          <div style={{marginTop: '10px'}}>
+            <span style={{ color: '#8c8c8c', opacity: '0.6' }}>最近访问:&nbsp;&nbsp;&nbsp;</span>
+            {
+              searchHistoryList.map(item => {
+                return ( 
+                  <Link style={{color: '#000000', marginRight: '10px'}} to={item.path} onClick={(e) => {onMenuClick(e, item);}}>
+                  {item.name}
+                </Link>)
+              })
+            }
+          </div>
+        </div>
+        {
+          !!SearhData.length ?
+            (<div className={'search_menu_content'}>
+              {
+                SearhData.map((item: any) => (
+                  <div onClick={(e) => {
+                    onMenuClick(e, item);
+                  }} key={item.path}>{item.name}</div>
+                ))
+              }
+            </div>) : (
+              <div>
+                <div 
+                style={{
+                  height: `${rightMenuHeight}px`, 
+                  overflowY: 'scroll',
+                  position: 'relative',
+                  width: '100%'
+                }}
+                >
+                <div id='drawContent'  className={'drawerWarp_right'}>
+                  {homepageData && homepageData.filter((d) => !d.hideInMenu).length > 0 && (
+                    <List
+                      className={classNames('allFunsList', 'allFunsListWarp')}
+                      dataSource={homepageData}
+                      renderItem={(child: any) => {
+                        if (!child.hideInMenu && child.path) {
+                          return (
+                            <div className={classNames('allFunsListWarp')}>
+                              <List.Item
+                                className={classNames('allFuncOnMouserover')}
+                                style={{ padding: '12px 24px' }}
+                              >
+                                <Link to={child.path} onClick={(e) => {onMenuClick(e, child);}}>
+                                  {formatMessage({ id: `${child.name}` })}
+                                  <img className="allFuncOnMouseroverImg" src={right}></img>
+                                </Link>
+                              </List.Item>
+                            </div>
+                          );
+                        }
+                      }}
+                    />
+                  )}
+                  {routesData.map((item, index) => {
+                    return (
+                      <List
+                        // className={classNames('allFunsList', 'allFunsListWarp', )}
+                        className={`allFunsList allFunsListWarp ${currentOneLevel === item.path ? 'choosedStyle' : ''}`}
+                        id={item.path}
+                        style={{
+                          color: currentOneLevel === item.path ? '#fff' : '#005CFF',
+                        }}
+                        header={<b>{formatMessage({ id: `${item.name}` })}</b>}
+                        bordered
+                        dataSource={item.children}
+                        renderItem={(child: any) => {
+                          return renderChildItem(child)
+                        }}
+                      />
+                    );
+                  })}
+                </div>
+                <div style={{
+                    display: moreBtnShow ? 'block' : 'none',
+                    // position: 'absolute', 
+                    textAlign: 'center', 
+                    bottom: 0, 
+                    background: '#ffffff', 
+                    width: '100%', 
+                    height: '30px'
+                    }}>
+                  <span
+                    onClick={() => {
+                      setShowScroll(true);
+                      setMoreBtnShow(false);
+                    }}
+                    style={{color: '#8c8c8c'}}
+                    >
+                    <CaretDownOutlined />
+                      下滑加载更多
+                  </span>
+                </div>
+              </div>
+              </div>
+            )
+
+        }
+      </div>
+    </div>
+  )
+
+}
+
 export default DrawContent;