@bit-sun/business-component 1.2.4-alpha.1 → 1.2.4

package/src/components/Business/BsLayouts/index.tsx

@@ -1,1465 +0,0 @@
-// @ts-nocheck
-import type {
-  MenuDataItem,
-  BasicLayoutProps as ProLayoutProps,
-  Settings,
-} from '@ant-design/pro-layout';
-import ProLayout from '@ant-design/pro-layout';
-import React, { useState, createRef, useRef } from 'react';
-import {
-  Tabs,
-  Dropdown,
-  Menu,
-} from 'antd';
-import {
-  Link,
-  useIntl,
-  history,
-  useModel,
-} from 'umi';
-import {
-  DashOutlined,
-  MenuUnfoldOutlined,
-  CaretLeftOutlined,
-  HomeOutlined,
-  DoubleLeftOutlined,
-  DoubleRightOutlined,
-} from '@ant-design/icons';
-import SearchFunc from './Components/SearchFunc';
-import { debounce } from 'lodash';
-
-import AllFunc from './Components/AllFunc';
-import {
-  getBreadcrumbNameMap,
-  ergodicMenuRoutes,
-  matchPath,
-} from './utils';
-import moment from 'moment';
-import GlobalHeaderCom from './Components/GlobalHeader';
-import CustomerMenu from './Components/CustomerMenu';
-import CustomerMenuHeader from './Components/CustomerMenu/globalMenu/customMenuHeader';
-import './index.less';
-import { DndProvider, useDrag, useDrop } from 'react-dnd';
-import { HTML5Backend } from 'react-dnd-html5-backend';
-import ENUM from '@/utils/enumConfig';
-import { memoizeOneFormatter } from '@/utils/utils';
-
-const { TabPane } = Tabs;
-
-export const RouterContext = React.createContext({});
-
-export type BasicLayoutProps = {
-  breadcrumbNameMap: Record<string, MenuDataItem>;
-  route: ProLayoutProps['route'] & {
-    authority: string[];
-  };
-  settings: Settings;
-} & ProLayoutProps;
-
-export type BasicLayoutContext = { [K in 'location']: BasicLayoutProps[K] } & {
-  breadcrumbNameMap: Record<string, MenuDataItem>;
-};
-
-const menuDataRender = (menuList: MenuDataItem[]): MenuDataItem[] =>
-  menuList.map((item) => {
-    return {
-      ...item,
-      children: item.children ? menuDataRender(item.children) : undefined,
-    };
-  });
-
-let UN_LISTTEN_DRP;
-let routerArray = [];
-let lastTwoRouterArray = [1, 2];
-
-let draggerTabKeys = [];
-
-const type = 'DraggableTabNode';
-const DraggableTabNode = ({ index, children, moveNode }) => {
-  const ref = useRef(null);
-  const [{ isOver, dropClassName }, drop] = useDrop({
-    accept: type,
-    collect: (monitor) => {
-      const { index: dragIndex } = monitor.getItem() || {};
-
-      if (dragIndex === index) {
-        return {};
-      }
-
-      return {
-        isOver: monitor.isOver(),
-        dropClassName: 'dropping',
-      };
-    },
-    drop: (item) => {
-      moveNode(item.index, index);
-    },
-  });
-  const [, drag] = useDrag({
-    type,
-    item: {
-      index,
-    },
-    collect: (monitor) => ({
-      isDragging: monitor.isDragging(),
-    }),
-  });
-  drop(drag(ref));
-  return (
-    <div
-      ref={ref}
-      style={{
-        marginRight: 24,
-      }}
-      className={isOver ? dropClassName : ''}
-    >
-      {children}
-    </div>
-  );
-};
-
-const DraggableTabs = (props) => {
-  const { children, changeListenRouterState } = props;
-  const [order, setOrder] = useState([]);
-
-  const moveTabNode = (dragKey, hoverKey) => {
-    const newOrder = order.slice();
-    React.Children.forEach(children, (c) => {
-      if (c.key && newOrder.indexOf(c.key) === -1) {
-        newOrder.push(c.key);
-      }
-    });
-    const dragIndex = newOrder.indexOf(dragKey);
-    const hoverIndex = newOrder.indexOf(hoverKey);
-    newOrder.splice(dragIndex, 1);
-    newOrder.splice(hoverIndex, 0, dragKey);
-    changeListenRouterState(dragIndex, hoverIndex);
-    setOrder(newOrder);
-  };
-
-  const renderTabBar = (tabBarProps, DefaultTabBar) => (
-    <DefaultTabBar {...tabBarProps}>
-      {(node) => (
-        <DraggableTabNode
-          key={node.key}
-          index={node.key}
-          moveNode={moveTabNode}
-        >
-          {node}
-        </DraggableTabNode>
-      )}
-    </DefaultTabBar>
-  );
-
-  const tabs = [];
-  React.Children.forEach(children, (c) => {
-    tabs.push(c);
-  });
-  const orderTabs = tabs.slice().sort((a, b) => {
-    const orderA = order.indexOf(a.key);
-    const orderB = order.indexOf(b.key);
-
-    if (orderA !== -1 && orderB !== -1) {
-      return orderA - orderB;
-    }
-
-    if (orderA !== -1) {
-      return -1;
-    }
-
-    if (orderB !== -1) {
-      return 1;
-    }
-
-    const ia = tabs.indexOf(a);
-    const ib = tabs.indexOf(b);
-    return ia - ib;
-  });
-  return (
-    <DndProvider backend={HTML5Backend}>
-      <Tabs renderTabBar={renderTabBar} {...props}>
-        {orderTabs}
-      </Tabs>
-    </DndProvider>
-  );
-};
-
-const ItemMenu = (props) => {
-  const {
-    info: { key },
-    operateFun,
-    listenRouterState,
-  } = props;
-  let index = listenRouterState.findIndex((item) => item.key === key);
-
-  const menu = (
-    <Menu>
-      <Menu.Item key="0" style={{ fontSize: '12px', textAlign: 'center' }}>
-        <a
-          onClick={(e) => {
-            e.stopPropagation();
-            operateFun(key, 'self');
-          }}
-        >
-          关闭当前标签
-        </a>
-      </Menu.Item>
-      <Menu.Item
-        disabled={index === 0}
-        key="1"
-        style={{ fontSize: '12px', textAlign: 'center' }}
-      >
-        <a
-          onClick={(e) => {
-            e.stopPropagation();
-            operateFun(key, 'left');
-          }}
-        >
-          关闭其左侧标签
-        </a>
-      </Menu.Item>
-      <Menu.Item
-        disabled={index === listenRouterState.length - 1}
-        key="2"
-        style={{ fontSize: '12px', textAlign: 'center' }}
-      >
-        <a
-          onClick={(e) => {
-            e.stopPropagation();
-            operateFun(key, 'right');
-          }}
-        >
-          关闭其右侧标签
-        </a>
-      </Menu.Item>
-      <Menu.Item
-        disabled={index === listenRouterState.length - 1}
-        key="3"
-        style={{ fontSize: '12px', textAlign: 'center' }}
-      >
-        <a
-          onClick={(e) => {
-            e.stopPropagation();
-            operateFun(key, 'other');
-          }}
-        >
-          关闭其他标签
-        </a>
-      </Menu.Item>
-      <Menu.Item
-        disabled={index === listenRouterState.length - 1}
-        key="4"
-        style={{ fontSize: '12px', textAlign: 'center' }}
-      >
-        <a
-          onClick={(e) => {
-            e.stopPropagation();
-            operateFun(key, 'all');
-          }}
-        >
-          关闭全部标签
-        </a>
-      </Menu.Item>
-    </Menu>
-  );
-  return (
-    <Dropdown overlay={menu} trigger={['hover']}>
-      <a
-        className="ant-dropdown-link"
-        onClick={(e) => {
-          e.preventDefault();
-          e.stopPropagation();
-        }}
-      >
-        <img style={{ marginRight: '-12px' }} src="./biaoqian-icon.svg" />
-      </a>
-    </Dropdown>
-  );
-};
-
-class BasicLayout extends React.PureComponent {
-  allFunc: any = createRef('');
-  customerMenuRef: any = createRef('');
-  actionRef: any = createRef<{
-    reload: () => void;
-  }>();
-  constructor(props) {
-    super(props);
-    routerArray = this.updateTree(props.route.routes);
-    const homeRouter = routerArray.filter(
-      (itemroute) => itemroute.key === '/',
-    )[0];
-    const breadcrumbNameMap = getBreadcrumbNameMap(
-      memoizeOneFormatter(props.route.routes, ''),
-    );
-    const hideMenuArray = ergodicMenuRoutes(props.route.routes);
-
-    this.state = {
-      listenRouterState: [
-        { ...homeRouter, key: '/', tab: '欢迎', closable: false },
-      ],
-      listenRouterKey: ['/'],
-      activeKey: '/',
-      homeRouter,
-      customerMatchs: [],
-      breadcrumbNameMap,
-      hideMenuArray,
-      keyWord: '',
-      collapse: false,
-      drawerLeftParams: {
-        visible: false,
-        width: 690,
-        title: '搜索',
-        onClose: () => {
-          this.setState({
-            drawerLeftParams: {
-              ...this.state.drawerLeftParams,
-              visible: false,
-            },
-          });
-        },
-      },
-      currentSubMenuData: [],
-      showSubMenu: false,
-      isSlider: false,
-    };
-  }
-
-  componentDidMount() {
-    const {
-      history,
-      location,
-      itemPath,
-      pathToRegexp,
-    } = this.props;
-
-    let istParent = 0;
-
-    var self = this;
-
-    window.top != window &&
-      window.addEventListener('message', function (e) {
-        istParent = 1;
-        localStorage.setItem('isTabChange', true);
-
-        if (typeof e.data === 'string') {
-          history.push(e.data.replace(/^\/\w+\//, '/'));
-        } else {
-          const info = e.data;
-          if (info.type === 'remove') {
-            self.tabActions['remove'](info.key.replace(/^\/\w+\//, '/'));
-          }
-        }
-      });
-
-    UN_LISTTEN_DRP = history.listen((route) => {
-      if ((window as any).__POWERED_BY_QIANKUN__) {
-        if (window.location.href.indexOf(`/${itemPath}`) === -1) return;
-      }
-      const {
-        listenRouterState,
-        listenRouterKey,
-        customerMatchs,
-        hideMenuArray,
-      } = this.state;
-      let newListenRouterState = [...listenRouterState];
-      let newListenRouterKey = [...listenRouterKey];
-
-      let replaceRouter = routerArray.filter((itemRoute) =>
-        pathToRegexp(itemRoute.key || '').test(route.pathname),
-      )[0];
-
-      if (!istParent) {
-        if (route.pathname === '/') return;
-        window.parent.postMessage(`/parent/${itemPath}${route.pathname}`, '*');
-      }
-
-      let currentKey = '';
-
-      if (replaceRouter && replaceRouter.isOnlyOnePage) {
-        // 处理中英文和特殊字符
-        currentKey = decodeURIComponent(route.pathname);
-      } else {
-        currentKey = decodeURIComponent(
-          route.pathname + this.parseQueryString(route.search),
-        );
-      }
-
-      // 防止出错
-      if (listenRouterKey.length !== listenRouterState.length) {
-        listenRouterState.forEach((item, index) => {
-          listenRouterKey[index] = item.key;
-        });
-      }
-
-      if (!listenRouterKey.includes(currentKey)) {
-        if (!replaceRouter) {
-          replaceRouter = routerArray.filter(
-            (itemroute) => itemroute.key === '/404',
-          )?.[0];
-
-          this.setState(
-            {
-              listenRouterState: [
-                ...listenRouterState,
-                { ...replaceRouter, key: currentKey, tab: '404' },
-              ],
-              activeKey: currentKey,
-              listenRouterKey: [...listenRouterKey, currentKey],
-            },
-            () => {
-              this.checkisNavSlide();
-            },
-          );
-        } else {
-          const match = matchPath(route.pathname, { path: replaceRouter.key }, pathToRegexp);
-          newListenRouterState = [
-            ...newListenRouterState,
-            {
-              ...replaceRouter,
-              query: route.query,
-              match: match,
-              key: currentKey,
-              tab: this.getPageTitle(route.pathname) + '',
-            },
-          ];
-          newListenRouterKey = [...listenRouterKey, currentKey];
-        }
-      }
-
-      // 处理hideMenu页面自动关闭
-      lastTwoRouterArray.push(route.pathname);
-      lastTwoRouterArray.shift();
-      if (
-        !localStorage.getItem('isTabChange') &&
-        !localStorage.getItem('isMenuClick')
-      ) {
-        if (
-          lastTwoRouterArray[0] &&
-          typeof lastTwoRouterArray[0] === 'string'
-        ) {
-          let needRemoveKeyArray = hideMenuArray.filter((itemRoute) =>
-            pathToRegexp(itemRoute.path || '').test(lastTwoRouterArray[0]),
-          );
-          // lastTwoRouterArray[0] != lastTwoRouterArray[1] 该判断条件用于判断是否是tab删除操作，如果是tab页删除操作，删除的是不是最后一个打开的tab页，执行history.push会导致错误的将最后打开的那个tab页也删除掉
-          if (
-            needRemoveKeyArray.length &&
-            lastTwoRouterArray[0] != lastTwoRouterArray[1]
-          ) {
-            if (
-              (!(
-                lastTwoRouterArray[0].indexOf('/order/mainOrder/supplement') >=
-                0
-              ) ||
-                !pathToRegexp(
-                  '/order/mainOrder/:parmode/separateOrder/:id',
-                ).test(lastTwoRouterArray[1])) &&
-              (!pathToRegexp(
-                '/order/mainOrder/:parmode/separateOrder/:id',
-              ).test(lastTwoRouterArray[0]) ||
-                !(
-                  lastTwoRouterArray[1].indexOf(
-                    'order/mainOrder/separateOrder/',
-                  ) >= 0
-                ))
-            ) {
-              if (!route.state?.thisHideInMenuDoNotClose) {
-                newListenRouterState = newListenRouterState.filter((item) => {
-                  const [pathname] = item.key ? item.key.split('?') : [];
-                  return pathname && pathname !== lastTwoRouterArray[0];
-                });
-                newListenRouterKey = newListenRouterKey.filter((item) => {
-                  const [pathname] = item ? item.split('?') : [];
-                  return pathname && pathname !== lastTwoRouterArray[0];
-                });
-              }
-            }
-          }
-        }
-        // refs?.tableRef?.current?.refreshTable();
-      } else {
-        setTimeout(() => {
-          // 处理页面刷新两面
-          localStorage.removeItem('isTabChange');
-          localStorage.removeItem('isMenuClick');
-        }, 0);
-      }
-      this.setState(
-        {
-          //路由监听函数最后执行setState，避免处理hideMenu类型页面自动关闭的逻辑块内获取不到最新state的listenRouterState和listenRouterKey
-          activeKey: currentKey,
-          listenRouterState: newListenRouterState,
-          listenRouterKey: newListenRouterKey,
-        },
-        () => {
-          this.checkisNavSlide();
-        },
-      );
-
-      istParent = 0;
-    });
-
-    if (
-      localStorage.getItem('firstPage') &&
-      localStorage.getItem('firstPage')?.startsWith(`#/${itemPath}/`)
-    ) {
-      istParent = 1;
-      history.push(
-        localStorage
-          .getItem('firstPage')
-          ?.slice(1)
-          .replace(/^\/\w+\//, '/'),
-      );
-    } else {
-      history.push(location);
-    }
-  }
-
-  componentWillUnmount() {
-    // eslint-disable-next-line no-unused-expressions
-    UN_LISTTEN_DRP && UN_LISTTEN_DRP();
-  }
-
-  parseQueryString = (queryString) => {
-    if (!queryString) {
-      return '';
-    }
-
-    if (queryString.indexOf('?') < 0) {
-      return `?${queryString}`;
-    }
-
-    return queryString;
-  };
-
-  updateTree = (Tree) => {
-    const treeData = Tree;
-    const treeList = [];
-    // 递归获取树列表
-    const getTreeList = (data) => {
-      data.forEach((node) => {
-        if (node.routes && node.routes.length > 0) {
-          getTreeList(node.routes);
-        } else {
-          treeList.push({
-            tab: node.locale,
-            key: node.path,
-            locale: node.locale,
-            closable: true,
-            content: node.component,
-            name: node.name,
-            hideInMenu: node.hideInMenu,
-            isOnlyOnePage: node.isOnlyOnePage,
-          });
-        }
-      });
-    };
-    getTreeList(treeData);
-    return treeList;
-  };
-
-  getDictionarySource = (dicCode: string, needConvertInterger = false) => {
-    const { dictionaryData } = this.props;
-
-    let dicData = {};
-
-    if (!dictionaryData) {
-      let storageDic = localStorage.getItem(ENUM.BROWSER_CACHE.DICT_CODES)
-        ? JSON.parse(localStorage.getItem(ENUM.BROWSER_CACHE.DICT_CODES))
-        : {};
-      dicData = storageDic[dicCode];
-    } else {
-      dicData = dictionaryData[dicCode];
-    }
-    // if (!dicData || !dicData.length) {
-    //   throw new Error(`当前没有${dicCode}字典值`);
-    // }
-
-    try {
-      if (needConvertInterger) {
-        dicData = dicData.map((item: { text: string; value: string }) => ({
-          ...item,
-          value: parseFloat(item.value),
-        }));
-      }
-    } catch (e) { }
-
-    return dicData;
-  };
-
-  getDictionaryTextByValue = (dicCode: string, value: string) => {
-    let dicData = [];
-    let dictionaryData: any;
-    if (!dictionaryData) {
-      let storageDic = localStorage.getItem(ENUM.BROWSER_CACHE.DICT_CODES)
-        ? JSON.parse(localStorage.getItem(ENUM.BROWSER_CACHE.DICT_CODES))
-        : {};
-      dicData = storageDic[dicCode];
-    } else {
-      dicData = dictionaryData[dicCode];
-    }
-
-    if (!dicData || !dicData.length) {
-      // throw new Error(`当前没有${dicCode}字典值`);
-    }
-
-    if (value === undefined) return '- -';
-
-    const dicItemArray = dicData?.filter(
-      (item: { value: string }) => item.value === value.toString(),
-    );
-
-    if (!dicItemArray?.length) {
-      // throw new Error(`当前${dicCode}字典值合没有${value}的数据`)
-      return value;
-    }
-
-    return dicItemArray[0].text;
-  };
-
-  timeFormat = (timeStr, format, notNeedConvertTimeZone) => {
-    if (!timeStr) return '- -';
-
-    if (notNeedConvertTimeZone) {
-      return moment(timeStr).format(format);
-    }
-
-    return moment(timeStr).add(8, 'hours').format(format) || '- -';
-  };
-
-  onChange = (key) => {
-    // console.log('onChange');
-    if (key !== this.state.activeKey) {
-      this.setState({
-        activeKey: key,
-      });
-      localStorage.setItem('isTabChange', '1');
-      history.push(key);
-    }
-  };
-
-  getPageTitle = (pathname) => {
-    const { formatMessage } = this.props;
-    const { breadcrumbNameMap } = this.state;
-    const currRouterData = this.matchParamsPath(pathname, breadcrumbNameMap);
-
-    if (!currRouterData) {
-      return '';
-    }
-    const pageName = formatMessage({
-      id: currRouterData.locale || currRouterData.name,
-      defaultMessage: currRouterData.name,
-    });
-
-    return `${pageName}`;
-  };
-
-  matchParamsPath = (pathname, breadcrumbNameMap) => {
-    const { pathToRegexp } = this.props;
-    const pathKey = Object.keys(breadcrumbNameMap).find((key) =>
-      pathToRegexp(key).test(pathname),
-    );
-    return breadcrumbNameMap[pathKey];
-  };
-
-  onEdit = (
-    targetKey: React.MouseEvent | React.KeyboardEvent | string,
-    action: string,
-  ) => {
-    this.tabActions[action](targetKey);
-  };
-
-  tabActions: any = {
-    remove: (targetKey: string) => {
-      const { listenRouterState, activeKey, customerMatchs, listenRouterKey } =
-        this.state;
-
-      let lastIndex: number = 0;
-      let newActiveKey: string | undefined = activeKey;
-      let newListenRouterState = [];
-      let newListenRouterKey = [];
-
-      if (targetKey === activeKey) {
-        listenRouterState.forEach((pane, i) => {
-          if (pane.key === targetKey) {
-            lastIndex = i - 1;
-          }
-        });
-
-        newListenRouterState = listenRouterState.filter(
-          (item) => item.key !== targetKey,
-        );
-        newListenRouterKey = listenRouterKey.filter(
-          (item) => item !== targetKey,
-        );
-
-        if (lastIndex < 0) {
-          lastIndex = 0;
-        }
-
-        newActiveKey = newListenRouterState[lastIndex].key;
-      } else {
-        newListenRouterState = listenRouterState.filter(
-          (item) => item.key !== targetKey,
-        );
-        newListenRouterKey = listenRouterKey.filter(
-          (item) => item !== targetKey,
-        );
-      }
-
-      this.setState(
-        {
-          activeKey: newActiveKey,
-          listenRouterState: newListenRouterState,
-          listenRouterKey: newListenRouterKey,
-        },
-        () => {
-          history.push({
-            pathname: newActiveKey,
-          });
-          this.checkisNavSlide();
-        },
-      );
-    },
-  };
-
-  updateState = (newListenRouterState, newListenRouterKey, cb) => {
-    this.setState(
-      {
-        listenRouterState: newListenRouterState,
-        listenRouterKey: newListenRouterKey,
-      },
-      () => {
-        this.checkisNavSlide();
-        if (cb) cb();
-      },
-    );
-  };
-
-  handleClose = () => {
-    this.setState({
-      drawerLeftParams: {
-        ...this.state.drawerLeftParams,
-        visible: false,
-      },
-      isCollapse: true,
-    });
-    this.allFunc.current?.close?.();
-    this.customerMenuRef.current?.close?.();
-  };
-
-  handleMenuClick = (item: any) => {
-    if (item.children || !item.component) return;
-    history.push({
-      pathname: item.path,
-    });
-    this.setShowMenu(false);
-  };
-
-  getMenuDom = (menuData) => {
-    return menuData.map((item) => (
-      <div>
-        <div
-          onClick={() => {
-            this.handleMenuClick(item);
-          }}
-          className={`${'menu_item'} ${item.children || !item.component ? '' : 'link_style'
-            }`}
-          style={{
-            fontWeight: item.children || !item.component ? 'bolder' : '400',
-            paddingLeft: '10px',
-            marginTop: item.children || !item.component ? '5px' : '0px',
-            fontSize: item.children || !item.component ? '14px' : '12px',
-          }}
-        >
-          {item.name}
-        </div>
-        {!!item.children &&
-          !!item.children.length &&
-          this.getMenuDom(item.children)}
-      </div>
-    ));
-  };
-
-  setShowMenu = debounce((isShow) => {
-    this.setState({
-      showSubMenu: isShow,
-    });
-  }, 500);
-
-  //设置tabs标签左右滚动
-  setTabNavTransLate = (num) => {
-    let globalTabsNav = document
-      .getElementById('globalTabs')
-      ?.getElementsByClassName('ant-tabs-nav-list')?.[0];
-    let globalTabsNavWrap = document
-      .getElementById('globalTabs')
-      ?.getElementsByClassName('ant-tabs-nav-wrap')?.[0];
-    let wrapWidth = globalTabsNavWrap.offsetWidth; //tabsNav父节点宽度
-    let navListWidth = globalTabsNav.offsetWidth; //tabsNav总宽度
-    if (navListWidth - wrapWidth <= 0) return;
-    let maxTransX = navListWidth - wrapWidth; // 允许移动最大宽度
-    let transXStr = document.defaultView?.getComputedStyle(
-      globalTabsNav,
-      null,
-    ).transform;
-    let transx = transXStr?.split(',')[4]; //当前translateX的值
-
-    let targetTransX = Math.abs(Number(transx)) + num;
-    if (targetTransX <= 0) targetTransX = 0;
-    if (targetTransX >= Number(maxTransX)) targetTransX = Number(maxTransX);
-    globalTabsNav.style.transform = 'translateX(-' + targetTransX + 'px)';
-  };
-
-  checkisNavSlide = () => {
-    if (window.top != window) return;
-    //监听tabs页签总长度判断是否可点击滑动
-    let globalTabsNav = document
-      .getElementById('globalTabs')
-      ?.getElementsByClassName('ant-tabs-nav-list')?.[0];
-    let globalTabsNavWrap = document
-      .getElementById('globalTabs')
-      ?.getElementsByClassName('ant-tabs-nav-wrap')?.[0];
-    let wrapWidth = globalTabsNavWrap?.offsetWidth; //tabsNav父节点宽度
-    let navListWidth = globalTabsNav?.offsetWidth; //tabsNav总宽度
-    if (navListWidth - wrapWidth <= 0) {
-      this.setState({
-        isSlider: false,
-      });
-      return;
-    }
-    this.setState({
-      isSlider: true,
-    });
-  };
-
-  changeListenRouterState = (dragIndex: number, hoverIndex: number) => {
-    const { listenRouterState, listenRouterKey } = this.state;
-    let dragItem = listenRouterState[dragIndex];
-    let dragKeyItem = listenRouterKey[dragIndex];
-
-    listenRouterState.splice(dragIndex, 1);
-    listenRouterState.splice(hoverIndex, 0, dragItem);
-
-    listenRouterKey.splice(dragIndex, 1);
-    listenRouterKey.splice(hoverIndex, 0, dragKeyItem);
-  };
-
-  operateFun = (key, type) => {
-    const { listenRouterState, activeKey, listenRouterKey } = this.state;
-    let deleteKey = '';
-    let newlistenRouterState = [];
-    let newlistenRouterKey = [];
-    let newActiveKey = '';
-    let deleteIndex = 0;
-    if (type === 'self') {
-      deleteIndex = listenRouterState.findIndex((item) => item.key === key);
-      deleteKey = key;
-      if (deleteIndex > 0) {
-        newActiveKey = listenRouterState[deleteIndex - 1].key;
-      } else {
-        newActiveKey = listenRouterState[1].key;
-      }
-      newlistenRouterState = listenRouterState.filter((d) => d.key !== key);
-      newlistenRouterKey = listenRouterKey.filter((d) => d !== key);
-      this.updateState(newlistenRouterState, newlistenRouterKey, () => {
-        if (deleteKey === activeKey) {
-          history.push({
-            pathname: newActiveKey,
-          });
-        }
-      });
-    }
-    if (type === 'left') {
-      const index = listenRouterState.findIndex((item) => item.key === key);
-      newlistenRouterState = listenRouterState.filter(
-        (d: any, i: number) => i >= index || d.key === '/',
-      );
-      newlistenRouterKey = listenRouterKey.filter(
-        (d: any, i: number) => i >= index || d === '/',
-      );
-      this.updateState(newlistenRouterState, newlistenRouterKey, () => {
-        if (newlistenRouterKey.find((item) => item === activeKey)) {
-          return;
-        } else {
-          history.push({
-            pathname: key,
-          });
-        }
-      });
-    }
-    if (type === 'right') {
-      const index = listenRouterState.findIndex((item) => item.key === key);
-      newlistenRouterState = listenRouterState.filter(
-        (d: any, i: number) => i <= index || d.key === '/',
-      );
-      newlistenRouterKey = listenRouterKey.filter(
-        (d: any, i: number) => i <= index || d === '/',
-      );
-      this.updateState(
-        listenRouterState.filter(
-          (d: any, i: number) => i <= index || d.key === '/',
-        ),
-        listenRouterKey.filter((d: any, i: number) => i <= index || d === '/'),
-        () => {
-          if (newlistenRouterKey.find((item) => item === activeKey)) {
-            return;
-          } else {
-            history.push({
-              pathname: key,
-            });
-          }
-        },
-      );
-    }
-    if (type === 'all') {
-      this.updateState(
-        listenRouterState.filter((item) => item.key === '/'),
-        listenRouterKey.filter((item) => item === '/'),
-        () => {
-          history.push({
-            pathname: '/',
-          });
-        },
-      );
-    }
-    if (type === 'other') {
-      this.updateState(
-        listenRouterState.filter(
-          (item) => item.key === key || item.key === '/',
-        ),
-        listenRouterKey.filter((item) => item === key || item === '/'),
-        () => {
-          if (key !== activeKey) {
-            history.push({
-              pathname: key,
-            });
-          }
-        },
-      );
-    }
-  };
-
-  render() {
-    const {
-      listenRouterState,
-      activeKey,
-      listenRouterKey,
-      drawerLeftParams,
-      collapse,
-      currentSubMenuData,
-      showSubMenu,
-      currentSubPath,
-    } = this.state;
-    const { originRoutes, itemPath, defaultSettings, transparentProps={} } = this.props;
-    const TabTitle: React.FC<{}> = ({ item, index, updateState }) => {
-      return (
-        <div className="tab_title_content">
-          {item.tab}
-          {item.key !== '/' && (
-            <ItemMenu
-              info={item}
-              operateFun={this.operateFun}
-              listenRouterState={listenRouterState}
-            />
-          )}
-        </div>
-      );
-    };
-
-    // 左侧菜单 route
-    const dataShowRoute = this.props.routes.find(
-      (route) => route.path === '/homePage/data-show',
-    ); // 添加数据大屏
-    const { route, ...restPrpos } = this.props;
-    const exist = route.routes.find(
-      (route) => route.path === '/homePage/data-show',
-    );
-    if (dataShowRoute && !exist) {
-      route.routes.splice(1, 0, dataShowRoute);
-    }
-
-    const menu = (
-      <Menu>
-        <Menu.Item
-          key="0"
-          style={{
-            background: '#FFFFFF',
-            color: '#848484',
-            fontSize: '12px',
-            textAlign: 'center',
-          }}
-        >
-          <div>已打开的页签数: {listenRouterState.length}</div>
-        </Menu.Item>
-        <Menu.Item key="1" style={{ fontSize: '12px', textAlign: 'center' }}>
-          <a
-            onClick={() => {
-              // 关闭全部
-              this.updateState(
-                [
-                  {
-                    ...this.state.homeRouter,
-                    key: '/',
-                    tab: '欢迎',
-                    closable: false,
-                  },
-                ],
-                ['/'],
-                () => {
-                  history.push('/');
-                },
-              );
-            }}
-          >
-            关闭全部标签
-          </a>
-        </Menu.Item>
-        <Menu.Item key="2" style={{ fontSize: '12px', textAlign: 'center' }}>
-          <a
-            onClick={() => {
-              if (activeKey === '/') return;
-              const index = listenRouterState.findIndex(
-                (item) => item.key === activeKey,
-              );
-              let newActiveKey = '';
-              if (index > 0) {
-                newActiveKey = listenRouterState[index - 1].key;
-              } else {
-                newActiveKey = listenRouterState[1].key;
-              }
-              this.updateState(
-                listenRouterState.filter((d) => d.key !== activeKey),
-                listenRouterKey.filter((d) => d !== activeKey),
-                () => {
-                  history.push({
-                    pathname: newActiveKey,
-                  });
-                },
-              );
-            }}
-          >
-            关闭当前标签
-          </a>
-        </Menu.Item>
-        <Menu.Item key="3" style={{ fontSize: '12px', textAlign: 'center' }}>
-          <a
-            onClick={() => {
-              const index = listenRouterState.findIndex(
-                (item) => item.key === activeKey,
-              );
-              // let deleteKey = listenRouterState[index - 1]?.key;
-              // if (deleteKey === '/') {
-              //   message.warning('首页不可关闭。');
-              //   return;
-              // }
-
-              this.updateState(
-                listenRouterState.filter(
-                  (d: any, i: number) => i >= index || d.key === '/',
-                ),
-                listenRouterKey.filter(
-                  (d: any, i: number) => i >= index || d === '/',
-                ),
-              );
-            }}
-          >
-            关闭其左侧标签
-          </a>
-        </Menu.Item>
-        <Menu.Item key="4" style={{ fontSize: '12px', textAlign: 'center' }}>
-          <a
-            onClick={() => {
-              let index = listenRouterState.findIndex(
-                (item) => item.key === activeKey,
-              );
-              this.updateState(
-                listenRouterState.filter(
-                  (d: any, i: number) => i <= index || d.key === '/',
-                ),
-                listenRouterKey.filter(
-                  (d: any, i: number) => i <= index || d === '/',
-                ),
-              );
-            }}
-          >
-            关闭其右侧标签
-          </a>
-        </Menu.Item>
-      </Menu>
-    );
-
-    const filterByMenuDate = (
-      data: MenuDataItem[],
-      keyWord: string,
-    ): MenuDataItem[] =>
-      data
-        .map((item) => {
-          if (item.name && item.name.includes(keyWord)) {
-            return {
-              ...item,
-            };
-          }
-          return undefined;
-        })
-        .filter((item) => item) as MenuDataItem[];
-
-    let weiqianduanProps = {};
-    let isWeiqianduan = false;
-
-    if (window.top != window) {
-      isWeiqianduan = true;
-      weiqianduanProps = {
-        headerRender: false,
-        footerRender: false,
-        menuRender: false,
-        menuHeaderRender: false,
-        menuExtraRender: false,
-      };
-    }
-
-    const OperationsSlot: Record<PositionType, React.ReactNode> = {
-      left: (
-        <div className={'tab_left_operate'}>
-          <div
-            onClick={() => {
-              history.push({
-                pathname: '/',
-              });
-            }}
-          >
-            <HomeOutlined />
-          </div>
-          <div
-            style={{ opacity: this.state.isSlider ? 1 : 0.5 }}
-            onClick={() => {
-              this.setTabNavTransLate(-100);
-            }}
-          >
-            <DoubleLeftOutlined />
-          </div>
-        </div>
-      ),
-      right: (
-        <div
-          style={{ opacity: this.state.isSlider ? 1 : 0.5 }}
-          className={'tab_right_operate'}
-          onClick={() => {
-            this.setTabNavTransLate(100);
-          }}
-        >
-          <DoubleRightOutlined />
-        </div>
-      ),
-    };
-
-    return (
-      <ProLayout
-        actionRef={this.actionRef}
-        onMenuHeaderClick={() => history.push('/')}
-        menuHeaderRender={({ }) => (
-          <CustomerMenuHeader
-            originRoutes={originRoutes}
-            itemPath={itemPath}
-            handleClose={this.handleClose}
-            collapsed={collapse}
-          />
-        )}
-        menuExtraRender={() => {
-          if (!collapse) {
-            return (
-              <div>
-                <CustomerMenu
-                  originRoutes={originRoutes}
-                  itemPath={itemPath}
-                  ref={this.customerMenuRef}
-                  actionRef={this.actionRef}
-                  handleClose={this.handleClose}
-                  isCollapse={this.state.collapse}
-                />
-              </div>
-            );
-          }
-          return (
-            <div className="collapse_icon_close">
-              <span
-                className="collapse_icon"
-                onClick={() => {
-                  this.setState({
-                    collapse: !collapse,
-                  });
-                }}
-              >
-                <MenuUnfoldOutlined />
-              </span>
-            </div>
-          );
-        }}
-        menuProps={{
-          onClick: () => {
-            localStorage.setItem('isMenuClick', 'true');
-          },
-        }}
-        collapsed={collapse}
-        onCollapse={(boo: boolean) => {
-          this.setState({
-            collapse: boo,
-          });
-        }}
-        menuItemRender={(menuItemProps, defaultDom) => {
-          if (menuItemProps?.path === '/') {
-            return (
-              <>
-                <div className="one_menu_wrap">
-                  <Link
-                    onClick={() => {
-                      localStorage.setItem('isMenuClick', 'true');
-                    }}
-                    to={menuItemProps.path}
-                  >
-                    {defaultDom}
-                  </Link>
-                </div>
-              </>
-            );
-          }
-          return (
-            <Link
-              onClick={() => {
-                localStorage.setItem('isMenuClick', 'true');
-              }}
-              to={menuItemProps.path}
-            >
-              {defaultDom}
-            </Link>
-          );
-        }}
-        subMenuItemRender={(menuItemProps, defaultDom) => {
-          return (
-            <div
-              style={{
-                height: '40px',
-                lineHeight: '40px',
-                position: 'relative',
-                overflow: 'hidden',
-                textOverflow: 'ellipsis',
-                whiteSpace: 'nowrap',
-                boxSizing: 'border-box',
-                paddingRight: '10px',
-              }}
-              onMouseEnter={() => {
-                if (
-                  menuItemProps.pro_layout_parentKeys &&
-                  menuItemProps.pro_layout_parentKeys.length
-                )
-                  return;
-                this.setState({
-                  currentSubMenuData: menuItemProps.children,
-                  currentSubPath: menuItemProps.path,
-                });
-                this.setShowMenu(true);
-              }}
-              onMouseLeave={() => {
-                this.setShowMenu(false);
-              }}
-            >
-              {defaultDom}
-              {showSubMenu &&
-                currentSubPath === menuItemProps.path &&
-                !collapse && (
-                  <CaretLeftOutlined
-                    style={{ position: 'absolute', top: '14px', right: '-4px' }}
-                  />
-                )}
-            </div>
-          );
-        }}
-        collapsedButtonRender={() => {
-          return (
-            <div
-              onClick={(e) => {
-                e.stopPropagation();
-              }}
-              className="banquan"
-            >
-              {''}
-            </div>
-          );
-        }}
-        postMenuData={(menus) => {
-          return [...filterByMenuDate(menus || [], this.state.keyWord)];
-        }}
-        links={[
-          !this.state.collapse ? (
-            <AllFunc
-              ref={this.allFunc}
-              itemPath={itemPath}
-              handleClose={this.handleClose}
-              isCollapse={this.state.collapse}
-            />
-          ) : (
-            ''
-          ),
-        ]}
-        onPageChange={() => {
-          const { location } = history;
-          // 如果没有登录，重定向到 login
-          if (
-            !localStorage.getItem(ENUM.BROWSER_CACHE.USER_INFO) &&
-            location.pathname !== '/user/login'
-          ) {
-            history.push('/user/login');
-          }
-        }}
-        headerRender={(props) => <GlobalHeaderCom {...props} />}
-        menu={{
-          request: async () => {
-            return JSON.parse(
-              localStorage.getItem(`customerMenu_${itemPath}_front`) || '[]',
-            );
-          },
-          type: 'group',
-        }}
-        route={route}
-        {...restPrpos}
-        {...defaultSettings}
-        {...weiqianduanProps}
-      >
-        <div id="globalTabsContent" className="globalTabs">
-          <DraggableTabs
-            activeKey={activeKey}
-            id="globalTabs"
-            onChange={this.onChange}
-            // tabBarExtraContent={operations}
-            type="editable-card"
-            tabBarStyle={{
-              background: '#f3f3f3',
-              height: '28px',
-              marginRight: 0,
-              fontSize: '12px',
-              color: '#2C2F2E70',
-              marginBottom: '-2px',
-              position: 'fixed',
-              top: 50,
-              zIndex: 10,
-              width: collapse ? 'calc(100% - 75px)' : 'calc(100% - 167px)',
-              display: isWeiqianduan ? 'none' : 'flex',
-            }}
-            tabPosition="top"
-            tabBarGutter={8}
-            onEdit={this.onEdit}
-            tabBarExtraContent={OperationsSlot}
-            animated={false}
-            hideAdd
-          >
-            {listenRouterState.map((item, index) => (
-              <TabPane
-                tab={
-                  <TabTitle
-                    item={item}
-                    index={index}
-                    updateState={this.updateState}
-                  />
-                }
-                style={{ marginTop: isWeiqianduan ? 0 : 30 }}
-                key={item.key}
-                closable={item.key !== '/'}
-                closeIcon={<img src="./biaoqian-guanbi-icon.svg" />}
-              >
-                <WrapperComponent
-                  item={item}
-                  routerProps={this.props}
-                  getDictionarySource={this.getDictionarySource}
-                  getDictionaryTextByValue={this.getDictionaryTextByValue}
-                  timeFormat={this.timeFormat}
-                  transparentProps={transparentProps}
-                />
-              </TabPane>
-            ))}
-          </DraggableTabs>
-          <div
-            className="globalTabsOper"
-            style={{
-              position: 'fixed',
-              top: '50px',
-              zIndex: 10,
-              background: '#fff',
-              display: isWeiqianduan ? 'none' : 'block',
-              borderLeft: '1px solid #E4E4E4',
-            }}
-          >
-            <Dropdown overlay={menu} trigger={['click']}>
-              <a
-                className="ant-dropdown-link"
-                onClick={(e) => e.preventDefault()}
-              >
-                <DashOutlined />
-              </a>
-            </Dropdown>
-          </div>
-          <SearchFunc itemPath={itemPath} {...drawerLeftParams}></SearchFunc>
-          <div
-            onMouseEnter={() => {
-              this.setShowMenu(true);
-            }}
-            onMouseLeave={() => {
-              this.setShowMenu(false);
-            }}
-            className={'sub_menu_content'}
-            style={{ display: showSubMenu && !collapse ? 'block' : 'none' }}
-          >
-            {this.getMenuDom(currentSubMenuData)}
-          </div>
-        </div>
-      </ProLayout>
-    );
-  }
-}
-
-class WrapperComponent extends React.Component {
-  constructor(props) {
-    super(props);
-  }
-
-  shouldComponentUpdate() {
-    return false;
-  }
-
-  render() {
-    const {
-      item,
-      routerProps,
-      getDictionarySource,
-      getDictionaryTextByValue,
-      timeFormat,
-      transparentProps,
-    } = this.props;
-    return (
-      <>
-        {React.createElement(item.content, {
-          getDictionarySource: getDictionarySource,
-          getDictionaryTextByValue: getDictionaryTextByValue,
-          timeFormat: timeFormat,
-          ...routerProps,
-          ...transparentProps,
-          match: item.match,
-        })}
-      </>
-    );
-  }
-}
-
-export default (props) => {
-  const { initialState = {} } = useModel('@@initialState');
-
-  const { dictionaryData } = initialState;
-  const intl = useIntl();
-  const { formatMessage } = intl;
-  return (
-    <BasicLayout
-      {...props}
-      dictionaryData={dictionaryData}
-      formatMessage={formatMessage}
-    />
-  );
-};