@bit-sun/business-component 3.0.0-alpha.21 → 3.0.0-alpha.23

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

@@ -1,326 +1,326 @@
-// @ts-nocheck
-import { ArrowLeftOutlined } from '@ant-design/icons';
-import { Anchor, Tooltip, Button, Menu, Dropdown, Breadcrumb } from 'antd';
-import React, { useEffect, useState, useMemo, useRef } from 'react';
-import { history } from 'umi';
-import { getMainCrumbNameMap, doDetailPageAction, judgeIsEmpty, getDetailMatchRoute } from './utils';
-import { memoizeOneFormatter, go2BackAndClose } from '@/utils/utils';
-import './index.less';
-import quanping from '../../../assets/icon-quanping.svg';
-import scanning from '../../../assets/scanning.svg';
-import editIcon from '../../../assets/btn-edit.svg';
-import submitIcon from '../../../assets/btn-submit.svg';
-import deleteIcon from '../../../assets/btn-delete.svg';
-import moreIcon from '../../../assets/btn-more.svg';
-import { useLocation, formatMessage } from 'umi';
-import CommonAlert from '../CommonAlert';
-import ENUM from '@/utils/enumConfig';
-import { debounce } from 'lodash';
-import { useSize } from 'ahooks';
-
-interface actionItem {
-  type?: string;
-  name: string;
-  icon?: string;
-  visible?: boolean | string;
-  disabled?: boolean;
-  code?: string; //权限过滤todo
-  action: object;
-}
-
-export const iconMap = {
-  edit: <img src={editIcon} />,
-  delete: <img src={deleteIcon} />,
-  submit: <img src={submitIcon} />,
-  more: <img src={moreIcon} />,
-};
-
-export default (props: any) => {
-  const { pathname } = useLocation();
-  const [id]: any = useState(pathname + 'id');
-  const { children, ...restProps } = props;
-
-  return (
-    <div id={id} className={'detail_page_wrapper'}>
-      <DetailWrapper pathname={pathname} {...restProps} />
-      {children}
-    </div>
-  );
-};
-
-const DetailWrapper = React.memo(
-  ({
-    pathname,
-    actionList = [],
-    routes = [],
-    itemPath,
-    alertProps,
-    donotNeedShowScreenIcon = false,
-    title,
-    pathToRegexp,
-    backHistoryPath,
-    onBack,
-  }: any) => {
-    const [isFullScreen, setIsFnllScreen]: any = useState(false);
-    const [breadcrumbArr, setBreadCrumbArr]: any = useState([]);
-    const wrapperContainerRef = useRef<HTMLDivElement>(null)
-
-    const asideWidth =
-      (
-        document.querySelector('.ant-layout-sider') ||
-        window.parent?.document?.querySelector?.('.ant-layout-sider')
-      )?.clientWidth ?? 0;
-    const wrapperSize = useSize(wrapperContainerRef);
-
-    const basePath = window.top == window ? '' : `/${itemPath}`;
-
-    const menuRoutes =
-      window.top == window
-        ? routes.find((item) => item.path === '/')?.routes || []
-        : JSON.parse(
-            localStorage.getItem(ENUM.BROWSER_CACHE.LIMIT_MENU_DATA) || '[]',
-          );
-
-    const breadcrumbNameMap = getMainCrumbNameMap(
-      memoizeOneFormatter(menuRoutes, ''),
-    );
-    const matchParamsPath = (pathname: string, breadcrumbNameMap: object) => {
-      const pathKey: any = Object.keys(breadcrumbNameMap).find((key) =>
-        pathToRegexp ? pathToRegexp(key).test(pathname) : false,
-      );
-      return pathKey ? breadcrumbNameMap[pathKey] : undefined;
-    };
-
-    const getPageTitle = (pathname: string) => {
-      const currRouterData = matchParamsPath(
-        `${basePath}${pathname}`,
-        breadcrumbNameMap,
-      ) || getDetailMatchRoute(`${basePath}${pathname}`,breadcrumbNameMap,[]);
-
-      if (!currRouterData) {
-        return '';
-      }
-
-      let breadcrumbArrs = currRouterData.nameMap || [];
-      if (title && breadcrumbArrs.length) {
-        breadcrumbArrs.pop();
-        breadcrumbArrs.push(title);
-      }
-      setBreadCrumbArr([...breadcrumbArrs]);
-
-      const pageName = formatMessage({
-        id: currRouterData.locale || currRouterData.name,
-        defaultMessage: currRouterData.name,
-      });
-
-      return title
-        ? title
-        : window.top === window
-        ? pageName
-        : `${currRouterData.name}`;
-    };
-
-    const pageTitle = useMemo(() => getPageTitle(pathname), [pathname, title]);
-
-    useEffect(() => {}, []);
-
-    const ShowFullScreen = () => {
-      const isFullScreen: any =
-        window.top.document.fullScreen ||
-        window.top.document.webkitIsFullScreen ||
-        window.top.document.mozFullScreen;
-      let contentEle: any = window.top.document.querySelector(`body`);
-      // addTabsNavStyle(isFullScreen);
-      if (contentEle && !isFullScreen) {
-        let fullScreenEle =
-          contentEle.requestFullscreen ||
-          contentEle.mozRequestFullScreen ||
-          contentEle.webkitRequestFullScreen ||
-          contentEle.msRequestFullscreen;
-        if (fullScreenEle) {
-          fullScreenEle.call(contentEle);
-          setIsFnllScreen(true);
-          return;
-        }
-      }
-      if (window.top.document && isFullScreen) {
-        let exitFullScreen =
-          window.top.document.exitFullscreen ||
-          window.top.document.mozCancelFullScreen ||
-          window.top.document.webkitCancelFullScreen ||
-          window.top.document.msExitFullscreen;
-        if (exitFullScreen) {
-          exitFullScreen.call(window.top.document);
-          setIsFnllScreen(false);
-          return;
-        }
-      }
-    };
-
-    const renderPageActionList = (actionLists: Array<actionItem>) => {
-      const authButton = localStorage.getItem(ENUM.BROWSER_CACHE.MAIN_AUTH_CODES)
-      ? JSON.parse(localStorage.getItem(ENUM.BROWSER_CACHE.MAIN_AUTH_CODES) as string)
-      : [];
-      let visibleActions = actionLists.filter(
-        (action) =>
-          ((action.visible && action.visible !== 'false') || judgeIsEmpty(action.visible)) && 
-          (judgeIsEmpty(action.code) || authButton.filter(item => item === action.code)),
-      );
-
-      const renderButton = (item: actionItem, type?: any) => {
-        return (
-          <Button
-            type={type || 'primary'}
-            icon={item.icon ? iconMap[item.icon] : ''}
-            danger={item.name === '删除' ? true : false}
-            disabled={item.disabled}
-            onClick={() => {
-              if (typeof item.action === 'function') {
-                item.action();
-              } else {
-                doDetailPageAction(item.action);
-              }
-            }}
-          >
-            {item.name}
-          </Button>
-        );
-      };
-
-      if (visibleActions.length <= 3) {
-        return visibleActions.map((item) => {
-          return renderButton(item);
-        });
-      }
-
-      let moreOperate = visibleActions.splice(3);
-      const menu = (
-        <Menu>
-          {moreOperate.map((item: any, index: number) => (
-            <Menu.Item className="more-btn-action" key={index}>
-              {renderButton(item, 'link')}
-            </Menu.Item>
-          ))}
-        </Menu>
-      );
-      //按钮操作3个显示更多
-      return (
-        <div className="detail_btn_wrapper">
-          {visibleActions.map((item: any, index: number) => {
-            return renderButton(item);
-          })}
-          <Dropdown style={{ padding: '0px' }} overlay={menu}>
-            <Button type="primary">
-              <span style={{ margin: '0px' }}>更多</span>
-              <img src={moreIcon} />
-            </Button>
-          </Dropdown>
-        </div>
-      );
-    };
-
-    return (
-      <div style={{ height: '54px' }} ref={wrapperContainerRef}>
-        <div
-          className={'detail_page_head'}
-          style={{
-            width: wrapperSize?.width ?? `calc( 100vh - ${asideWidth}px )`,
-            left: asideWidth,
-          }}
-        >
-          <div
-            className={'back_home_img_content'}
-            onClick={() => {
-              go2BackAndClose(backHistoryPath);
-              // history.goBack();
-            }}
-          >
-            <ArrowLeftOutlined />
-          </div>
-          <div className={'detail_page_title_box'}>
-            <div className={'detail_page_title'}>{pageTitle}</div>
-            <Breadcrumb>
-              {breadcrumbArr.map((item) => (
-                <Breadcrumb.Item
-                  key={item}
-                  onClick={() => {
-                    // if (
-                    //   item.path &&
-                    //   !item.children &&
-                    //   !pathToRegexp(item.path).test(`${basePath}${pathname}`)
-                    // ) {
-                    //   history.push({
-                    //     pathname: item.path.replace(basePath, ''),
-                    //   });
-                    // }
-                  }}
-                >
-                  <span
-                    style={{
-                      // color:
-                      //   item.path &&
-                      //   pathToRegexp(item.path).test(`${basePath}${pathname}`)
-                      //     ? '#000000d9'
-                      //     : '',
-                    }}
-                    className="bread_name"
-                  >
-                    {item}
-                  </span>
-                </Breadcrumb.Item>
-              ))}
-            </Breadcrumb>
-          </div>
-          <div
-            className={'detail_page_btns'}
-            style={{ marginRight: '20px', display: 'flex', gap: '8px' }}
-          >
-            {renderPageActionList(actionList)}
-            {
-              !donotNeedShowScreenIcon ? ( <a>
-                {isFullScreen ? (
-                  <Tooltip title="取消全屏">
-                    <img
-                      onClick={() => {
-                        ShowFullScreen();
-                      }}
-                      width={32}
-                      src={scanning}
-                    />
-                  </Tooltip>
-                ) : (
-                  <Tooltip title="全屏">
-                    <img
-                      onClick={() => {
-                        ShowFullScreen();
-                      }}
-                      width={32}
-                      src={quanping}
-                    />
-                  </Tooltip>
-                )}
-              </a>) : null
-            }
-          </div>
-        </div>
-        {
-          alertProps && (
-            <CommonAlert
-              {
-                ...alertProps
-              }
-            />
-          )
-        }
-      </div>
-    );
-  },
-  (prevProps, nextProps) => {
-    if (
-      (JSON.stringify(prevProps.actionList) != JSON.stringify(nextProps.actionList)) || prevProps.title !== nextProps.title
-    ) {
-      return false;
-    }
-    return true;
-  },
-);
+// @ts-nocheck
+import { ArrowLeftOutlined } from '@ant-design/icons';
+import { Anchor, Tooltip, Button, Menu, Dropdown, Breadcrumb } from 'antd';
+import React, { useEffect, useState, useMemo, useRef } from 'react';
+import { history } from 'umi';
+import { getMainCrumbNameMap, doDetailPageAction, judgeIsEmpty, getDetailMatchRoute } from './utils';
+import { memoizeOneFormatter, go2BackAndClose } from '@/utils/utils';
+import './index.less';
+import quanping from '../../../assets/icon-quanping.svg';
+import scanning from '../../../assets/scanning.svg';
+import editIcon from '../../../assets/btn-edit.svg';
+import submitIcon from '../../../assets/btn-submit.svg';
+import deleteIcon from '../../../assets/btn-delete.svg';
+import moreIcon from '../../../assets/btn-more.svg';
+import { useLocation, formatMessage } from 'umi';
+import CommonAlert from '../CommonAlert';
+import ENUM from '@/utils/enumConfig';
+import { debounce } from 'lodash';
+import { useSize } from 'ahooks';
+
+interface actionItem {
+  type?: string;
+  name: string;
+  icon?: string;
+  visible?: boolean | string;
+  disabled?: boolean;
+  code?: string; //权限过滤todo
+  action: object;
+}
+
+export const iconMap = {
+  edit: <img src={editIcon} />,
+  delete: <img src={deleteIcon} />,
+  submit: <img src={submitIcon} />,
+  more: <img src={moreIcon} />,
+};
+
+export default (props: any) => {
+  const { pathname } = useLocation();
+  const [id]: any = useState(pathname + 'id');
+  const { children, ...restProps } = props;
+
+  return (
+    <div id={id} className={'detail_page_wrapper'}>
+      <DetailWrapper pathname={pathname} {...restProps} />
+      {children}
+    </div>
+  );
+};
+
+const DetailWrapper = React.memo(
+  ({
+    pathname,
+    actionList = [],
+    routes = [],
+    itemPath,
+    alertProps,
+    donotNeedShowScreenIcon = false,
+    title,
+    pathToRegexp,
+    backHistoryPath,
+    onBack,
+  }: any) => {
+    const [isFullScreen, setIsFnllScreen]: any = useState(false);
+    const [breadcrumbArr, setBreadCrumbArr]: any = useState([]);
+    const wrapperContainerRef = useRef<HTMLDivElement>(null)
+
+    const asideWidth =
+      (
+        document.querySelector('.ant-layout-sider') ||
+        window.parent?.document?.querySelector?.('.ant-layout-sider')
+      )?.clientWidth ?? 0;
+    const wrapperSize = useSize(wrapperContainerRef);
+
+    const basePath = window.top == window ? '' : `/${itemPath}`;
+
+    const menuRoutes =
+      window.top == window
+        ? routes.find((item) => item.path === '/')?.routes || []
+        : JSON.parse(
+            localStorage.getItem(ENUM.BROWSER_CACHE.LIMIT_MENU_DATA) || '[]',
+          );
+
+    const breadcrumbNameMap = getMainCrumbNameMap(
+      memoizeOneFormatter(menuRoutes, ''),
+    );
+    const matchParamsPath = (pathname: string, breadcrumbNameMap: object) => {
+      const pathKey: any = Object.keys(breadcrumbNameMap).find((key) =>
+        pathToRegexp ? pathToRegexp(key).test(pathname) : false,
+      );
+      return pathKey ? breadcrumbNameMap[pathKey] : undefined;
+    };
+
+    const getPageTitle = (pathname: string) => {
+      const currRouterData = matchParamsPath(
+        `${basePath}${pathname}`,
+        breadcrumbNameMap,
+      ) || getDetailMatchRoute(`${basePath}${pathname}`,breadcrumbNameMap,[]);
+
+      if (!currRouterData) {
+        return '';
+      }
+
+      let breadcrumbArrs = currRouterData.nameMap || [];
+      if (title && breadcrumbArrs.length) {
+        breadcrumbArrs.pop();
+        breadcrumbArrs.push(title);
+      }
+      setBreadCrumbArr([...breadcrumbArrs]);
+
+      const pageName = formatMessage({
+        id: currRouterData.locale || currRouterData.name,
+        defaultMessage: currRouterData.name,
+      });
+
+      return title
+        ? title
+        : window.top === window
+        ? pageName
+        : `${currRouterData.name}`;
+    };
+
+    const pageTitle = useMemo(() => getPageTitle(pathname), [pathname, title]);
+
+    useEffect(() => {}, []);
+
+    const ShowFullScreen = () => {
+      const isFullScreen: any =
+        window.top.document.fullScreen ||
+        window.top.document.webkitIsFullScreen ||
+        window.top.document.mozFullScreen;
+      let contentEle: any = window.top.document.querySelector(`body`);
+      // addTabsNavStyle(isFullScreen);
+      if (contentEle && !isFullScreen) {
+        let fullScreenEle =
+          contentEle.requestFullscreen ||
+          contentEle.mozRequestFullScreen ||
+          contentEle.webkitRequestFullScreen ||
+          contentEle.msRequestFullscreen;
+        if (fullScreenEle) {
+          fullScreenEle.call(contentEle);
+          setIsFnllScreen(true);
+          return;
+        }
+      }
+      if (window.top.document && isFullScreen) {
+        let exitFullScreen =
+          window.top.document.exitFullscreen ||
+          window.top.document.mozCancelFullScreen ||
+          window.top.document.webkitCancelFullScreen ||
+          window.top.document.msExitFullscreen;
+        if (exitFullScreen) {
+          exitFullScreen.call(window.top.document);
+          setIsFnllScreen(false);
+          return;
+        }
+      }
+    };
+
+    const renderPageActionList = (actionLists: Array<actionItem>) => {
+      const authButton = localStorage.getItem(ENUM.BROWSER_CACHE.MAIN_AUTH_CODES)
+      ? JSON.parse(localStorage.getItem(ENUM.BROWSER_CACHE.MAIN_AUTH_CODES) as string)
+      : [];
+      let visibleActions = actionLists.filter(
+        (action) =>
+          ((action.visible && action.visible !== 'false') || judgeIsEmpty(action.visible)) && 
+          (judgeIsEmpty(action.code) || authButton.filter(item => item === action.code)),
+      );
+
+      const renderButton = (item: actionItem, type?: any) => {
+        return (
+          <Button
+            type={type || 'primary'}
+            icon={item.icon ? iconMap[item.icon] : ''}
+            danger={item.name === '删除' ? true : false}
+            disabled={item.disabled}
+            onClick={() => {
+              if (typeof item.action === 'function') {
+                item.action();
+              } else {
+                doDetailPageAction(item.action);
+              }
+            }}
+          >
+            {item.name}
+          </Button>
+        );
+      };
+
+      if (visibleActions.length <= 3) {
+        return visibleActions.map((item) => {
+          return renderButton(item);
+        });
+      }
+
+      let moreOperate = visibleActions.splice(3);
+      const menu = (
+        <Menu>
+          {moreOperate.map((item: any, index: number) => (
+            <Menu.Item className="more-btn-action" key={index}>
+              {renderButton(item, 'link')}
+            </Menu.Item>
+          ))}
+        </Menu>
+      );
+      //按钮操作3个显示更多
+      return (
+        <div className="detail_btn_wrapper">
+          {visibleActions.map((item: any, index: number) => {
+            return renderButton(item);
+          })}
+          <Dropdown style={{ padding: '0px' }} overlay={menu}>
+            <Button type="primary">
+              <span style={{ margin: '0px' }}>更多</span>
+              <img src={moreIcon} />
+            </Button>
+          </Dropdown>
+        </div>
+      );
+    };
+
+    return (
+      <div style={{ height: '54px' }} ref={wrapperContainerRef}>
+        <div
+          className={'detail_page_head'}
+          style={{
+            width: wrapperSize?.width ?? `calc( 100vh - ${asideWidth}px )`,
+            left: asideWidth,
+          }}
+        >
+          <div
+            className={'back_home_img_content'}
+            onClick={() => {
+              go2BackAndClose(backHistoryPath);
+              // history.goBack();
+            }}
+          >
+            <ArrowLeftOutlined />
+          </div>
+          <div className={'detail_page_title_box'}>
+            <div className={'detail_page_title'}>{pageTitle}</div>
+            <Breadcrumb>
+              {breadcrumbArr.map((item) => (
+                <Breadcrumb.Item
+                  key={item}
+                  onClick={() => {
+                    // if (
+                    //   item.path &&
+                    //   !item.children &&
+                    //   !pathToRegexp(item.path).test(`${basePath}${pathname}`)
+                    // ) {
+                    //   history.push({
+                    //     pathname: item.path.replace(basePath, ''),
+                    //   });
+                    // }
+                  }}
+                >
+                  <span
+                    style={{
+                      // color:
+                      //   item.path &&
+                      //   pathToRegexp(item.path).test(`${basePath}${pathname}`)
+                      //     ? '#000000d9'
+                      //     : '',
+                    }}
+                    className="bread_name"
+                  >
+                    {item}
+                  </span>
+                </Breadcrumb.Item>
+              ))}
+            </Breadcrumb>
+          </div>
+          <div
+            className={'detail_page_btns'}
+            style={{ marginRight: '20px', display: 'flex', gap: '8px' }}
+          >
+            {renderPageActionList(actionList)}
+            {
+              !donotNeedShowScreenIcon ? ( <a>
+                {isFullScreen ? (
+                  <Tooltip title="取消全屏">
+                    <img
+                      onClick={() => {
+                        ShowFullScreen();
+                      }}
+                      width={32}
+                      src={scanning}
+                    />
+                  </Tooltip>
+                ) : (
+                  <Tooltip title="全屏">
+                    <img
+                      onClick={() => {
+                        ShowFullScreen();
+                      }}
+                      width={32}
+                      src={quanping}
+                    />
+                  </Tooltip>
+                )}
+              </a>) : null
+            }
+          </div>
+        </div>
+        {
+          alertProps && (
+            <CommonAlert
+              {
+                ...alertProps
+              }
+            />
+          )
+        }
+      </div>
+    );
+  },
+  (prevProps, nextProps) => {
+    if (
+      (JSON.stringify(prevProps.actionList) != JSON.stringify(nextProps.actionList)) || prevProps.title !== nextProps.title
+    ) {
+      return false;
+    }
+    return true;
+  },
+);