@titaui/pc 1.9.48 → 1.9.49

package/src/pages/okr-map/export-modules/okr-map/okr-map.js

@@ -1,63 +1,63 @@
-import React, { useState, useEffect, useRef } from 'react';
-import classNames from 'classnames';
+import React, { useState, useEffect, useRef } from "react";
+import classNames from "classnames";
 
-import Header from './header';
-import NoOkr from '../../no-okr';
-import preCls from '../../precls';
-import ShareDialog from '../../share-dialog';
-import Level2Search from '../../level2-search';
-import { onUpdateKr, checkTenantOkrExist } from '../../request-apis';
-import useStorage from '../../hooks/useStorage';
-import drawerManager from '../../../../components/drawer-manager';
+import dayjs from "dayjs";
+import quarterOfYear from "dayjs/plugin/quarterOfYear";
+import Header from "./header";
+import NoOkr from "../../no-okr";
+import preCls from "../../precls";
+import ShareDialog from "../../share-dialog";
+import Level2Search from "../../level2-search";
+import { onUpdateKr, checkTenantOkrExist } from "../../request-apis";
+import useStorage from "../../hooks/useStorage";
+import drawerManager from "../../../../components/drawer-manager";
 
 import {
   closeFullscreen,
   openFullscreen,
   tenantName,
   okrTypeMap,
-} from '../../utils';
+} from "../../utils";
 
-import dayjs from 'dayjs';
-import quarterOfYear from 'dayjs/plugin/quarterOfYear';
-import UnSupportIe from '../../unsupport-ie';
+import UnSupportIe from "../../unsupport-ie";
 
-import './index.scss';
+import "./index.scss";
 
 dayjs.extend(quarterOfYear);
 
-export default props => {
+export default function (props) {
   const { } = props;
 
   // 使用存储的State
-  const [period, setPeriod] = useStorage('period', {
-    'annualNum': new Date().getFullYear() + '',
-    'cycleType': '2',
-    'yqmNum': `${dayjs().quarter()}`,
+  const [period, setPeriod] = useStorage("period", {
+    annualNum: `${new Date().getFullYear()}`,
+    cycleType: "2",
+    yqmNum: `${dayjs().quarter()}`,
   });
-  const [showkr, setShowKr] = useStorage('showkr', false);
-  const [searchType, setSearchType] = useStorage('searchType', 'company');
-  const [level2Selected, setLevel2Selected] = useStorage('level2Selected', {});
+  const [showkr, setShowKr] = useStorage("showkr", false);
+  const [searchType, setSearchType] = useStorage("searchType", "company");
+  const [level2Selected, setLevel2Selected] = useStorage("level2Selected", {});
   const [rootNode, setRootNode] = useStorage(
-    'rootNode',
-    { 'rootId': 0, 'rootName': '' },
-    { 'noLocal': true },
+    "rootNode",
+    { rootId: 0, rootName: "" },
+    { noLocal: true },
   );
 
   const [exist, setExist] = useState(true); // 租户是否有okr
-  const [hasSubSearch, setHasSubSearch] = useState(level2Selected.name ? true : false);
+  const [hasSubSearch, setHasSubSearch] = useState(!!level2Selected.name);
   const [darkTheme, setDarkTheme] = useState(false);
-  const [direction, setDirection] = useState('horizontal'); // 默认水平
+  const [direction, setDirection] = useState("horizontal"); // 默认水平
   const [fullScreen, setFullScreen] = useState(false); // 全屏模式状态
   const [selectOkr, setSelectOkr] = useState({});
   const [shareDialogVisible, setShareDialogVisible] = useState(false);
   const [showMask, setShowMask] = useState(false);
-  const [openLevel, setOpenLevel] = useStorage('openLevel', 2);
+  const [openLevel, setOpenLevel] = useStorage("openLevel", 2);
   const [forceRender, setForceRender] = useState(false);
   const okrMapRef = useRef();
   const okrPage = useRef();
 
   useEffect(() => {
-    checkTenantOkrExist().then(res => setExist(res && res.obj || false));
+    checkTenantOkrExist().then((res) => setExist(res && res.obj || false));
   }, []);
 
   useEffect(() => {
@@ -69,7 +69,7 @@ export default props => {
   }, [fullScreen]);
 
   useEffect(() => {
-    if (searchType == 'company') {
+    if (searchType == "company") {
       setRootNode({
         rootId: 0,
         rootName: tenantName,
@@ -83,26 +83,26 @@ export default props => {
     }
   }, [searchType, level2Selected]);
 
-  const onMapActionsHandler = iconType => {
+  const onMapActionsHandler = (iconType) => {
     switch (iconType) {
-      case 'export':
+      case "export":
         exportCurrentFlow();
         break;
-      case 'share':
+      case "share":
         setShareDialogVisible(true);
         break;
-      case 'fullscreen': // 全屏
+      case "fullscreen": // 全屏
         setFullScreen(true);
         break;
-      case 'quit-fullscreen': // 退出全屏
+      case "quit-fullscreen": // 退出全屏
         setFullScreen(false);
         break;
-      case 'horizontal':
+      case "horizontal":
         setDirection(iconType);
         setForceRender(true);
         setTimeout(() => setForceRender(false), 100);
         break;
-      case 'vertical':
+      case "vertical":
         setDirection(iconType);
         setForceRender(true);
         setTimeout(() => setForceRender(false), 100);
@@ -113,47 +113,49 @@ export default props => {
   };
 
   // 二级搜索，触发搜索更新值
-  const setLevel2SelectedHandler = node => {
-    let restAttrs = {};
+  const setLevel2SelectedHandler = (node) => {
+    const restAttrs = {};
     // 把用户头像带过去
     if (node.nodeType == "person") {
-      restAttrs['avatar'] = node.data.avatar;
+      restAttrs.avatar = node.data.avatar;
     }
     setLevel2Selected({
       name: node.title,
       id: node.id,
-      ...restAttrs
+      ...restAttrs,
     });
   };
   // 部门、群组、成员，选项切换后执行
   // 初始化二级搜索值
-  const onSearchChangeHandler = iconType => {
-    let { Id, Name, Department, DepartmentId, UserAvatar } = window.BSGlobal.loginUserInfo;
+  const onSearchChangeHandler = (iconType) => {
+    const {
+      Id, Name, Department, DepartmentId, UserAvatar,
+    } = window.BSGlobal.loginUserInfo;
     setSearchType(iconType);
     switch (iconType) {
-      case 'company':
+      case "company":
         return setHasSubSearch(false);
-      case 'depart':
+      case "depart":
         setLevel2Selected({
-          'id': DepartmentId,
-          'name': Department,
+          id: DepartmentId,
+          name: Department,
         });
         break;
-      case 'group':
+      case "group":
         // 群组的默认显示项为数据列表的第一个节点
         // 清空其他选项值，等待异步回调选中第一个数据
         setLevel2Selected({});
         break;
-      case 'user':
+      case "user":
         const userAvatar = {
-          'color': UserAvatar.Color,
-          'small': UserAvatar.Small,
-          'hasAvatar': UserAvatar.HasAvatar
-        }
+          color: UserAvatar.Color,
+          small: UserAvatar.Small,
+          hasAvatar: UserAvatar.HasAvatar,
+        };
         setLevel2Selected({
-          'id': Id,
-          'name': Name,
-          'avatar': userAvatar // 把用户头像带过去
+          id: Id,
+          name: Name,
+          avatar: userAvatar, // 把用户头像带过去
         });
         break;
       default:
@@ -165,23 +167,23 @@ export default props => {
   // 导出图片
   const exportCurrentFlow = () => {
     okrMapRef.current.exportCurrentFlow();
-  }
+  };
 
-  const onKrPushUpdateKr = async data => {
-    let workMileStoneId = selectOkr && selectOkr.workId;
-    let workId = selectOkr && selectOkr.parentId;
+  const onKrPushUpdateKr = async (data) => {
+    const workMileStoneId = selectOkr && selectOkr.workId;
+    const workId = selectOkr && selectOkr.parentId;
     onUpdateKr({
       workId,
       workMileStoneId,
       mileStoneName: data,
-    }).then(res => { });
+    }).then((res) => { });
   };
 
   const onKrPushChange = (name, value, id) => {
     let data = {};
-    if (name == 'user') {
-      let avatar = {};
-      for (let key in value.UserAvatar) {
+    if (name == "user") {
+      const avatar = {};
+      for (const key in value.UserAvatar) {
         avatar[key[0].toLocaleLowerCase() + key.substring(1)] = value.UserAvatar[key];
       }
       data = {
@@ -191,16 +193,16 @@ export default props => {
           userId: value.Id,
         },
       };
-    } else if (name == 'date') {
+    } else if (name == "date") {
       data = {
         startDate: value.startDate,
         endDate: value.endDate,
       };
-    } else if (name == 'progress') {
+    } else if (name == "progress") {
       data = {
         progress: value,
       };
-    } else if (name == 'mileStoneName') {
+    } else if (name == "mileStoneName") {
       data = {
         mileStoneName: value,
       };
@@ -212,11 +214,11 @@ export default props => {
   };
 
   // 点击OKR地图节点后，打开推屏
-  const onNodeClickHandler = node => {
+  const onNodeClickHandler = (node) => {
     const { modelType, data } = node;
-    if (modelType == 'work') {
-      drawerManager.open('okrDetail', { okrId: data.workId });
-    } else if (modelType == 'kr') {
+    if (modelType == "work") {
+      drawerManager.open("okrDetail", { okrId: data.workId });
+    } else if (modelType == "kr") {
       if (!data.mapkrVisible) return;
       setSelectOkr({
         ...data,
@@ -234,7 +236,7 @@ export default props => {
         krTotal: 0,
         principalUser: data.user,
       });
-      drawerManager.open('krDetail', { 'krId': data.mileStoneId });
+      drawerManager.open("krDetail", { krId: data.mileStoneId });
     }
   };
 
@@ -245,14 +247,14 @@ export default props => {
 
   const onHideHandler = () => {
     setShowMask(false);
-  }
+  };
   const onShowHandler = () => {
     setShowMask(true);
-  }
+  };
   return (
     <UnSupportIe>
-      {(OkrSearchPanel) => {
-        return <div
+      {(OkrSearchPanel) => (
+        <div
           className={classNames({
             [`${preCls}__dark`]: darkTheme,
             [`${preCls}__fullscreen`]: fullScreen,
@@ -261,9 +263,9 @@ export default props => {
           <div className={classNames(preCls)} ref={okrPage}>
             <Header
               onBtnClick={onMapActionsHandler}
-              onShowKrClick={val => setShowKr(val)}
+              onShowKrClick={(val) => setShowKr(val)}
               onSearchChange={onSearchChangeHandler}
-              onPeriodChange={period => setPeriod(period)}
+              onPeriodChange={(period) => setPeriod(period)}
               onThemeChange={() => setDarkTheme(!darkTheme)}
               onLevelChange={(level) => setOpenLevel(level)}
               openLevel={openLevel}
@@ -279,7 +281,7 @@ export default props => {
               {(() => {
                 // 根据选择的搜索类型不同，show出不同的组件
                 if (!hasSubSearch) return undefined;
-                if (searchType == 'company') return undefined;
+                if (searchType == "company") return undefined;
                 return (
                   <Level2Search
                     key={searchType}
@@ -293,28 +295,29 @@ export default props => {
 
               {(() => {
                 if (forceRender) {
-                  return <span />
+                  return <span />;
                 }
                 if (exist) {
-                  return <OkrSearchPanel
-                    ref={okrMapRef}
-                    showkr={showkr}
-                    direction={direction}
-                    darkTheme={darkTheme}
-                    openLevel={openLevel}
-                    searchType={searchType}
-                    onNodeClick={onNodeClickHandler}
-                    {...period}
-                    {...rootNode}
-                    okrType={okrTypeMap[searchType]}
-                  />;
-                } else {
-                  return <NoOkr />
+                  return (
+                    <OkrSearchPanel
+                      ref={okrMapRef}
+                      showkr={showkr}
+                      direction={direction}
+                      darkTheme={darkTheme}
+                      openLevel={openLevel}
+                      searchType={searchType}
+                      onNodeClick={onNodeClickHandler}
+                      {...period}
+                      {...rootNode}
+                      okrType={okrTypeMap[searchType]}
+                    />
+                  );
                 }
+                return <NoOkr />;
               })()}
 
-              {showMask &&
-                <div className={classNames(`${preCls}__content-mask`)}></div>}
+              {showMask
+                && <div className={classNames(`${preCls}__content-mask`)} />}
             </div>
 
             <ShareDialog
@@ -330,7 +333,7 @@ export default props => {
             />
           </div>
         </div>
-      }}
+      )}
     </UnSupportIe>
   );
-};
+}

package/src/pages/okr-map/export-modules/share-okr-page/header/index.js

@@ -1,13 +1,13 @@
-import React, { useEffect } from 'react';
-import classNames from 'classnames';
-import IconButtonList from '../../../../../components/icon-button-list';
-import Switch from '../../../../../components/switch';
-import { getLocale } from '../../../../../utils/getLocale';
-import preCls from '../../../precls';
+import React, { useEffect } from "react";
+import classNames from "classnames";
+import IconButtonList from "../../../../../components/icon-button-list";
+import Switch from "../../../../../components/switch";
+import { getLocale } from "../../../../../utils/getLocale";
+import preCls from "../../../precls";
 
-import './index.scss';
+import "./index.scss";
 
-export default props => {
+export default function (props) {
   const {
     setDarkTheme,
     darkTheme,
@@ -17,28 +17,32 @@ export default props => {
     onBtnClick,
     direction,
   } = props;
-  
-  const period = {}
-  
+
+  const period = {};
+
   const iconButtons = [
-    { 'icon': 'export', 'overlay': getLocale('Mod_Export')},
-    { 'icon': direction == 'horizontal' ? 'vertical' : 'horizontal', 'overlay': direction == 'horizontal' ? `${getLocale('OKR_Ali_Butt_Toggleportrait')}` : `${getLocale('OKR_Ali_Butt_Togglelandscape')}` },
-  ]
+    { icon: "export", overlay: getLocale("Mod_Export") },
+    { icon: direction == "horizontal" ? "vertical" : "horizontal", overlay: direction == "horizontal" ? `${getLocale("OKR_Ali_Butt_Toggleportrait")}` : `${getLocale("OKR_Ali_Butt_Togglelandscape")}` },
+  ];
   // 获取地图数据
   useEffect(() => {
     // ...
-  }, [])
+  }, []);
 
-  return <div className={classNames(`${preCls}-share-okr__header`)}>
-    <span className={classNames(`${preCls}-share-okr__header-title`)}>{getLocale('OKR_Menu_Title_Alignment')}</span>
-    <span className={classNames(`${preCls}-share-okr__header-showkr`)}>
-      <Switch label={getLocale('OKR_Ali_Butt_ExhibitionKRs')} checked={showkr} onChange={checked => setShowKr(checked)} />
-    </span>
-    <span className={classNames(`${preCls}-share-okr__header-dark`)} onClick={() => setDarkTheme(!darkTheme)}>
-      切换{darkTheme ? '浅色' : '深色'}模式
-        </span>
-    <span className={classNames(`${preCls}-share-okr__header-direction`)}>
-      <IconButtonList items={iconButtons} onClick={(e, iconType) => onBtnClick(iconType)} />
-    </span>
-  </div>
-}
+  return (
+    <div className={classNames(`${preCls}-share-okr__header`)}>
+      <span className={classNames(`${preCls}-share-okr__header-title`)}>{getLocale("OKR_Menu_Title_Alignment")}</span>
+      <span className={classNames(`${preCls}-share-okr__header-showkr`)}>
+        <Switch label={getLocale("OKR_Ali_Butt_ExhibitionKRs")} checked={showkr} onChange={(checked) => setShowKr(checked)} />
+      </span>
+      <span className={classNames(`${preCls}-share-okr__header-dark`)} onClick={() => setDarkTheme(!darkTheme)}>
+        切换
+        {darkTheme ? "浅色" : "深色"}
+        模式
+      </span>
+      <span className={classNames(`${preCls}-share-okr__header-direction`)}>
+        <IconButtonList items={iconButtons} onClick={(e, iconType) => onBtnClick(iconType)} />
+      </span>
+    </div>
+  );
+}

package/src/pages/okr-map/export-modules/share-okr-page/index.tsx

@@ -2,10 +2,10 @@ import React from "react";
 import ErrorBoundary from "../../../../components/error-boundary";
 import ShareOkrMap from "./share-okr-map";
 
-export default (props) => {
+export default function (props) {
   return (
     <ErrorBoundary>
       <ShareOkrMap {...props} />
     </ErrorBoundary>
   );
-};
+}

package/src/pages/okr-map/export-modules/share-okr-page/share-okr-map.js

@@ -1,28 +1,28 @@
-import React, { useState, useEffect, useRef } from 'react';
-import classNames from 'classnames';
-import ShareDialog from '../../share-dialog';
-import Header from './header';
-import Level2Search from '../../level2-search';
-import preCls from '../../precls';
-import NoOkr from '../../no-okr';
-import { checkTenantOkrExist } from '../../request-apis';
-import { closeFullscreen, okrTypeMap, OkrTypeSetting, openFullscreen } from '../../utils';
+import React, { useState, useEffect, useRef } from "react";
+import classNames from "classnames";
+import ShareDialog from "../../share-dialog";
+import Header from "./header";
+import Level2Search from "../../level2-search";
+import preCls from "../../precls";
+import NoOkr from "../../no-okr";
+import { checkTenantOkrExist } from "../../request-apis";
+import {
+  closeFullscreen, okrTypeMap, OkrTypeSetting, openFullscreen,
+} from "../../utils";
 
-import UnSupportIe from '../../unsupport-ie';
+import UnSupportIe from "../../unsupport-ie";
 
-import './index.scss';
+import "./index.scss";
 
-export default () => {
+export default function () {
   const [hashQuery] = useState(() => {
     const hashQuery = {};
     const urlHash = decodeURIComponent(window.location.hash);
-    const hashQueryStr = urlHash.split('?')[1];
-    hashQueryStr.split('&').forEach(it => {
-      const [key, value] = it.split('=');
-      if (key == 'level2Selected' || key == 'period' || key == 'rootNode')
-        hashQuery[key] = JSON.parse(value);
-      else if (key == 'showkr' || key == 'darkTheme')
-        hashQuery[key] = value == 'true' ? true : false;
+    const hashQueryStr = urlHash.split("?")[1];
+    hashQueryStr.split("&").forEach((it) => {
+      const [key, value] = it.split("=");
+      if (key == "level2Selected" || key == "period" || key == "rootNode") hashQuery[key] = JSON.parse(value);
+      else if (key == "showkr" || key == "darkTheme") hashQuery[key] = value == "true";
       else hashQuery[key] = value;
     });
     return hashQuery;
@@ -36,18 +36,17 @@ export default () => {
   const [forceRender, setForceRender] = useState(false);
   const okrMapRef = useRef();
 
-
-  const onMapActionsHandler = iconType => {
+  const onMapActionsHandler = (iconType) => {
     switch (iconType) {
-      case 'export':
+      case "export":
         exportCurrentFlow();
         break;
-      case 'horizontal':
+      case "horizontal":
         setDirection(iconType);
         setForceRender(true);
         setTimeout(() => setForceRender(false), 100);
         break;
-      case 'vertical':
+      case "vertical":
         setDirection(iconType);
         setForceRender(true);
         setTimeout(() => setForceRender(false), 100);
@@ -56,13 +55,13 @@ export default () => {
         break;
     }
   };
- // 导出图片
- const exportCurrentFlow = () => {
-  okrMapRef.current.exportCurrentFlow();
-}
+  // 导出图片
+  const exportCurrentFlow = () => {
+    okrMapRef.current.exportCurrentFlow();
+  };
   return (
     <UnSupportIe>
-      {OkrSearchPanel =>
+      {(OkrSearchPanel) => (
         <div className={classNames({ [`${preCls}__dark`]: darkTheme })}>
           <div className={classNames(preCls, `${preCls}-share`)}>
             <Header
@@ -76,9 +75,10 @@ export default () => {
             />
             <div className={classNames(`${preCls}__content`)}>
               {(() => {
-                if (forceRender) return <span />
-                else {
-                  return <OkrSearchPanel
+                if (forceRender) return <span />;
+
+                return (
+                  <OkrSearchPanel
                     ref={okrMapRef}
                     searchType={searchType}
                     showkr={showkr}
@@ -86,14 +86,14 @@ export default () => {
                     darkTheme={darkTheme}
                     {...period}
                     {...rootNode}
-                    okrType={OkrTypeSetting ? okrTypeMap[searchType] : ''}
+                    okrType={OkrTypeSetting ? okrTypeMap[searchType] : ""}
                   />
-                }
+                );
               })()}
             </div>
           </div>
         </div>
-      }
+      )}
     </UnSupportIe>
   );
-};
+}

package/src/pages/okr-map/hooks/useStorage.js

@@ -2,27 +2,24 @@ import { useState } from "react";
 
 const tenantId = window.BSGlobal && window.BSGlobal.tenantInfo.Id || 0;
 
-export const getHashQuery = queryKey => {
+export const getHashQuery = (queryKey) => {
   let queryValue;
   const urlHash = decodeURIComponent(window.location.hash);
-  const hashQueryStr = urlHash.split('?')[1];
-  hashQueryStr && hashQueryStr.split('&').forEach(it => {
-    const [key, value] = it.split('=');
+  const hashQueryStr = urlHash.split("?")[1];
+  hashQueryStr && hashQueryStr.split("&").forEach((it) => {
+    const [key, value] = it.split("=");
     if (key == queryKey) queryValue = value;
   });
   return queryValue;
-}
+};
 
-const getDataFromLocalStorage = key => {
-  return window.localStorage.getItem(`Tanent${tenantId}_${key}`);
-}
+const getDataFromLocalStorage = (key) => window.localStorage.getItem(`Tanent${tenantId}_${key}`);
 
 const setDataFromToLocalStorage = (key, value) => {
   window.localStorage.setItem(`Tanent${tenantId}_${key}`, value);
-}
+};
 
 export default (key, defaultValue, opts = {}) => {
-
   // 分别在URL和Storage中取需要的值
   const [dValue, setDValue] = useState(() => {
     if (opts.useDefault) return defaultValue;
@@ -40,10 +37,10 @@ export default (key, defaultValue, opts = {}) => {
     return (val === undefined || val === null) ? defaultValue : val;
   });
 
-  const setData = value => {
+  const setData = (value) => {
     // 转换数据类型
     let tranValue = value;
-    if (typeof value !== 'string') {
+    if (typeof value !== "string") {
       tranValue = JSON.stringify(value);
     }
     if (opts.noLocal === true) {
@@ -52,7 +49,7 @@ export default (key, defaultValue, opts = {}) => {
       setDataFromToLocalStorage(key, tranValue);
     }
     setDValue(value);
-  }
+  };
 
   return [dValue, setData];
-}
+};

package/src/pages/okr-map/index.js

@@ -3,5 +3,5 @@ import OkrMapSharePage from "./export-modules/share-okr-page";
 
 export default {
   MapPage: OkrMapPage,
-  SharePage: OkrMapSharePage
-}
+  SharePage: OkrMapSharePage,
+};