Merge remote-tracking branch 'origin/bug_fix'

张志伟
2 parents 18552cea 06df4562
Showing 4 changed files with 134 additions and 104 deletions
src/components/GlobalHeader/AvatarDropdown.tsx
src/components/GlobalHeader/RightContent.tsx
src/components/GlobalHeader/index.less
src/layouts/BasicLayout.tsx
 import { Avatar, Menu, Spin, message } from "antd";
-import { LogoutOutlined } from '@ant-design/icons';
-import React, { useState, useEffect } from "react";
+import { LogoutOutlined } from "@ant-design/icons";
+import React from "react";
 import HeaderDropdown from "../HeaderDropdown";
 import styles from "./index.less";
 import { logoutApi } from "@/components/GlobalHeader/api";
-import { history, FormattedMessage } from 'umi';
+import { history, FormattedMessage } from "umi";
 import cookie from "js-cookie";
-import { getUserInfo, UserInfo } from '@/pages/Login/api';
-import { IMGURL } from '@/utils'
+import { UserInfo } from "@/pages/Login/api";
+import { IMGURL } from "@/utils";
  
 export interface GlobalHeaderRightProps {
   menu?: boolean;
+  user?: UserInfo;
 }
  
-function AvatarDropdown({ menu }: GlobalHeaderRightProps) {
-  const [currentUser, setCurrentUser] = useState<UserInfo>({});
-  const [loading, setLoading] = useState(true);
-
-  useEffect(() => {
-    getUserInfo().then(infoRes => { 
-      setCurrentUser(infoRes.data!);
-      setLoading(false);
-    }).catch(e => {
-      // history.push('/user/login');
-      message.error(e.message);
-      setLoading(false);
-    });
-  }, []);
-
+function AvatarDropdown({ menu, user = {} }: GlobalHeaderRightProps) {
   function onMenuClick(event: any) {
-    const token = cookie.get('fw-erp');
+    const token = cookie.get("fw-erp");
     if (!token) {
       history.replace("/user/login");
       return;
     }
     const key = event.key;
-    if (key == 'logout') {
-      logoutApi().then(() => {
-        history.push('/user/login');
-        message.success('退出登录成功!');
-      }).catch(e => {
-        message.error(e.message);
-      })
+    if (key == "logout") {
+      logoutApi()
+        .then(() => {
+          history.push("/user/login");
+          message.success("退出登录成功!");
+        })
+        .catch((e) => {
+          message.error(e.message);
+        });
     }
   }
  
-  if (loading) {
-    return <Spin size="small" style={{ marginLeft: 8, marginRight: 8 }} />;
-  }
-
   if (!menu) {
     return (
       <span className={`${styles.action} ${styles.account}`}>
-        <Avatar
-          size="small"
-          className={styles.avatar}
-          src={IMGURL.getBAvatar(currentUser.id)}
-          alt="avatar"
-        />
-        <span className={styles.name}>{currentUser.name}</span>
+        <Avatar size="small" className={styles.avatar} src={IMGURL.getBAvatar(user?.id ?? -1)} alt="avatar" />
+        <span className={styles.name}>{user?.name ?? ""}</span>
       </span>
     );
   }
  
   const menuHeaderDropdown = (
-    <Menu className={styles.menu} selectedKeys={[]} onClick={onMenuClick}>
-      <Menu.Item key="logout">
-        <LogoutOutlined translate="yes" />
-        <FormattedMessage id="menu.account.logout" defaultMessage="退出登录" />
-      </Menu.Item>
-    </Menu>
+    <Menu
+      className={styles.menu}
+      selectedKeys={[]}
+      onClick={onMenuClick}
+      items={[
+        {
+          label: <FormattedMessage id="menu.account.logout" defaultMessage="退出登录" />,
+          key: "logout",
+          icon: <LogoutOutlined translate="yes" />,
+        },
+      ]}
+    />
   );
  
-  return currentUser && currentUser.name ? (
-    <>
-      <HeaderDropdown overlay={menuHeaderDropdown}>
-        <span className={`${styles.action} ${styles.account}`}>
-          <Avatar
-            size="small"
-            className={styles.avatar}
-            src={IMGURL.getBAvatar(currentUser.id)}
-            alt="avatar"
-          />
-          <span className={styles.name}>{currentUser.name}</span>
-        </span>
-      </HeaderDropdown>
-    </>
-    ) : (
-      <Spin size="small" style={{ marginLeft: 8, marginRight: 8 }} />
-    );
+  return (
+    <HeaderDropdown overlay={menuHeaderDropdown}>
+      <span className={`${styles.action} ${styles.account}`}>
+        <Avatar size="small" className={styles.avatar} src={IMGURL.getBAvatar(user?.id ?? -1)} alt="avatar" />
+        <span className={styles.name}>{user?.name ?? " "}</span>
+      </span>
+    </HeaderDropdown>
+  );
 }
  
 export default AvatarDropdown;
-import React from 'react';
+import React, { useCallback, useMemo } from "react";
+import { UserInfo } from "@/pages/Login/api";
+import { Button, Spin } from "antd";
+import Avatar from "./AvatarDropdown";
+import styles from "./index.less";
+import { history } from "umi";
  
-import SelectLang from '../SelectLang';
-import Avatar from './AvatarDropdown';
-import styles from './index.less';
-
-export type SiderTheme = 'light' | 'dark';
+export type SiderTheme = "light" | "dark";
 export interface GlobalHeaderRightProps {
   theme?: SiderTheme | "realDark" | undefined;
   layout?: "side" | "top" | "mix";
+  user?: UserInfo;
+  loading?: boolean;
 }
  
-const GlobalHeaderRight: React.SFC<GlobalHeaderRightProps> = props => {
-  const { theme, layout = "side" } = props;
+const GlobalHeaderRight: React.FC<GlobalHeaderRightProps> = (props) => {
+  const { theme, layout = "side", user, loading } = props;
   let className = styles.right;
  
   if (theme === "dark" && layout === "top") {
     className = `${styles.right}  ${styles.dark}`;
   }
+  const report_path = useMemo(() => {
+    const protocol = window.location.protocol ?? "http:";
+    let report_url = "report.feewee.cn";
+    if (!PROD_APP_ENV) {
+      report_url = "test" + report_url;
+    }
+    report_url = protocol + "//" + report_url;
+    return report_url;
+  }, []);
  
   return (
-    <div className={className}>
-      <Avatar menu />
-      {/* <SelectLang className={styles.action} /> */}
+    <div className={styles["right-ava-wrapper"]}>
+      <Button type="link" href={report_path} target="_blank">
+        智能报表
+      </Button>
+      <Spin spinning={loading}>
+        <div className={className}>
+          <Avatar menu user={user} />
+        </div>
+      </Spin>
     </div>
   );
 };
-@import '~antd/es/style/themes/default.less';
+@import "~antd/es/style/themes/default.less";
  
 @pro-header-hover-bg: rgba(0, 0, 0, 0.025);
  
@@ -27,7 +27,7 @@
  
 .trigger {
   height: @layout-header-height;
-  padding: ~'calc((@{layout-header-height} - 20px) / 2)' 24px;
+  padding: ~"calc((@{layout-header-height} - 20px) / 2)" 24px;
   font-size: 20px;
   cursor: pointer;
   transition: all 0.3s, padding 0s;
@@ -42,11 +42,11 @@
   overflow: hidden;
   .action {
     display: inline-flex;
+    align-items: center;
     height: 100%;
     padding: 0 12px;
     cursor: pointer;
     transition: all 0.3s;
-    align-items: center;
  
     > i {
       color: @text-color;
@@ -67,7 +67,7 @@
   }
   .account {
     .avatar {
-      margin: ~'calc((@{layout-header-height} - 24px) / 2)' 0;
+      margin: ~"calc((@{layout-header-height} - 24px) / 2)" 0;
       margin-right: 8px;
       color: @primary-color;
       vertical-align: top;
@@ -122,39 +122,41 @@
 }
  
 .card {
-   height: 90px;
-   border-radius: 4px;
-   cursor: pointer;
-   display: flex;
-   justify-content: space-between;
-   align-items: center;
-   padding: 0 30px;
-   background-color: #fafafa;
-   cursor: pointer;
-   transition: all 0.4s;
-
-   &.checked, &:hover {
-     background-color: #4190f7;
-     color: #fff;
-
-    .title, .subText {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 90px;
+  padding: 0 30px;
+  background-color: #fafafa;
+  border-radius: 4px;
+  cursor: pointer;
+  cursor: pointer;
+  transition: all 0.4s;
+
+  &.checked,
+  &:hover {
+    color: #fff;
+    background-color: #4190f7;
+
+    .title,
+    .subText {
       color: #fff;
     }
-    
+
     .check {
       visibility: visible;
     }
-   }
+  }
  
-   & + & {
-     margin-top: 15px;
-   }
+  & + & {
+    margin-top: 15px;
+  }
 }
  
 .title {
   color: #666;
-  font-size: 18px;
   font-weight: bold;
+  font-size: 18px;
   transition: all 0.4s;
 }
  
@@ -165,7 +167,13 @@
 }
  
 .check {
+  color: #fff;
   font-size: 20px;
   visibility: hidden;
-  color: #fff;
-}
 \ No newline at end of file
+}
+
+.right-ava-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+}
@@ -8,6 +8,7 @@ import settings from &quot;../../config/defaultSettings&quot;;
 import logo from "./images/logo.png";
 import GlobalFooter from "@/components/GlobalFooter";
 import { userMenuApi, MenuItem } from "./api";
+import { getUserInfo, UserInfo } from "@/pages/Login/api";
 import { formatMenus } from "./entity";
 import zhCN from "antd/lib/locale-provider/zh_CN";
 import { ConfigProvider } from "antd";
@@ -28,6 +29,8 @@ export type BasicLayoutContext = { [K in &quot;location&quot;]: BasicLayoutProps[K] } &amp; {
  
 const BasicLayout: React.FC<BasicLayoutProps> = ({ dispatch, children, ...other }) => {
   const { formatMessage } = useIntl();
+  const [currentUser, setCurrentUser] = useState<UserInfo>({});
+  const [avatarLoading, setAvatarLoading] = useState<boolean>(true);
   const [collapsed, setCollapsed] = useState(false);
   const [menuData, setMenuData] = useState<MenuItem[]>([]);
  
@@ -47,6 +50,19 @@ const BasicLayout: React.FC&lt;BasicLayoutProps&gt; = ({ dispatch, children, ...other 
       });
   }, []);
  
+  useEffect(() => {
+    setAvatarLoading(true);
+    getUserInfo()
+      .then((infoRes) => {
+        setCurrentUser(infoRes.data!);
+        setAvatarLoading(false);
+      })
+      .catch((e) => {
+        console.debug(e);
+        setAvatarLoading(false);
+      });
+  }, []);
+
   return (
     <ConfigProvider locale={zhCN}>
       <ProLayout
@@ -56,7 +72,11 @@ const BasicLayout: React.FC&lt;BasicLayoutProps&gt; = ({ dispatch, children, ...other 
           if (menuItemProps.isUrl) {
             return defaultDom;
           }
-          return <Link to={menuItemProps.path ? `${menuItemProps.path}?fp_code=${menuItemProps.code}` : ""}>{defaultDom}</Link>;
+          return (
+            <Link to={menuItemProps.path ? `${menuItemProps.path}?fp_code=${menuItemProps.code}` : ""}>
+              {defaultDom}
+            </Link>
+          );
         }}
         breadcrumbRender={(routers = []) => [
           {
@@ -75,13 +95,20 @@ const BasicLayout: React.FC&lt;BasicLayoutProps&gt; = ({ dispatch, children, ...other 
         footerRender={() => <GlobalFooter />}
         menuDataRender={() => menuData as MenuDataItem[]}
         formatMessage={formatMessage}
-        rightContentRender={(rightProps) => <RightContent theme={rightProps.navTheme} layout={rightProps.layout} />}
+        rightContentRender={(rightProps) => (
+          <RightContent
+            user={currentUser}
+            loading={avatarLoading}
+            theme={rightProps.navTheme}
+            layout={rightProps.layout}
+          />
+        )}
         collapsed={collapsed}
         {...other}
         {...settings}
         navTheme={PROD_APP_ENV ? "dark" : "light"}
       >
-        <WaterMark content="霏微科技" fontSize={18}>
+        <WaterMark content={currentUser?.name ? `${currentUser.name} ${currentUser?.mobile ?? ""}` : ""} fontSize={18}>
           {children}
         </WaterMark>
       </ProLayout>