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

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

@@ -0,0 +1,1465 @@
+// @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}
+    />
+  );
+};