@titaui/pc 1.9.55 → 1.9.59

package/src/pages/new-okr-list/index.tsx

@@ -4,6 +4,7 @@ import React, {
   useMemo,
   useRef,
   useCallback,
+  FC,
 } from "react";
 import moment from "moment";
 import Toast from "../../components/toast";
@@ -17,7 +18,7 @@ import Loading from "./loading";
 import InitCycleSetting from "./init-cycle-setting";
 import { getBSGlobal, getUserInfo } from "../../utils/bs-global";
 import { getQueryString } from "../../utils/tools";
-import { localStorage } from "../../utils/local-storage";
+import { LocalStorage } from "../../utils/local-storage";
 import ERROR_LEVEL from "../../utils/error-level";
 import { okrSearch, okrList, visitOkrCyclePag } from "./request-api";
 import { Context } from "./context";
@@ -26,29 +27,32 @@ import { getLocale } from "../../utils/getLocale";
 import "./index.scss";
 import "./theme.scss";
 
-const NewOkrList = (props) => {
-  const { OkrListCmp, OkrCommunicationPush, Empty, SetCycleModal } = props;
-  const useLocalStorage = new localStorage();
+const NewOkrList: FC<any> = (props: {
+  OkrListCmp: any; OkrCommunicationPush: any; Empty: any; SetCycleModal: any;
+}) => {
+  const {
+    OkrListCmp, OkrCommunicationPush, Empty, SetCycleModal,
+  } = props;
+  const useLocalStorage = new LocalStorage();
   const formFieldValues: any = useLocalStorage.getItem("okr-filter-values") || {
     targetType: "",
     targetCategory: "",
     targetSort: "",
   };
-  const filterCycle: any = (() =>{
-    const routerData = getQueryString()
-    const {annualNum,cycleType,yqmNum} = routerData
-    if(!!annualNum&&!!cycleType&&!!yqmNum){
-      return { annualNum,cycleType,yqmNum }
+  const filterCycle: any = (() => {
+    const routerData = getQueryString();
+    const { annualNum, cycleType, yqmNum } = routerData;
+    if (!!annualNum && !!cycleType && !!yqmNum) {
+      return { annualNum, cycleType, yqmNum };
     }
     return useLocalStorage.getItem("okr-filter-cycle") || {
-      annualNum: new Date().getFullYear() + "",
+      annualNum: `${new Date().getFullYear()}`,
       cycleType: "2",
       yqmNum: `${moment().quarter()}`,
     };
-  })()
+  })();
 
-  const showWorkExecution =
-    getBSGlobal("OkrAdvancedSetting").KRSetting.ShowWorkExecution;
+  const showWorkExecution = getBSGlobal("OkrAdvancedSetting").KRSetting.ShowWorkExecution;
   const [loading, setLoading] = useState(true);
   const [okrs, setOkrs] = useState([]);
   const [total, setTotal] = useState(0);
@@ -66,7 +70,7 @@ const NewOkrList = (props) => {
   });
   const okrsRef = useRef(okrs);
 
-  const headerRef = useRef();
+  const headerRef = useRef<any>();
   const [casesVisible, setCasesVisible] = useState(false);
   const routerData = getQueryString();
   const {
@@ -78,9 +82,9 @@ const NewOkrList = (props) => {
 
   let relation;
   if (
-    departmentId == undefined &&
-    toUserId == undefined &&
-    locationRelation == undefined
+    departmentId === undefined
+    && toUserId === undefined
+    && locationRelation === undefined
   ) {
     relation = 1;
   } else {
@@ -91,13 +95,11 @@ const NewOkrList = (props) => {
     setPageNum(1);
   }, [relation, toUserId, departmentId, query]);
 
-  useEffect(() => {
-    getOkrs();
-  }, [pageNum, pageSize, query, relation, toUserId, departmentId]);
-
   // 记录访问者数据
   const recordVisitUser = () => {
-    toUserId && visitOkrCyclePag(toUserId);
+    if (toUserId) {
+      visitOkrCyclePag(toUserId);
+    }
   };
 
   const getOkrs = () => {
@@ -137,9 +139,9 @@ const NewOkrList = (props) => {
     okrsRef.current = okrs;
   }, [okrs]);
 
-  const handlePageChange = (page, pageSize) => {
-    setPageNum(page);
-    setPageSize(pageSize);
+  const handlePageChange = (nowPage, nowPageSize) => {
+    setPageNum(nowPage);
+    setPageSize(nowPageSize);
   };
 
   const handleOnSearch = (params) => {
@@ -150,47 +152,56 @@ const NewOkrList = (props) => {
     setOkrs([data, ...(okrsRef.current || [])]);
   };
 
-  const isShowPrincple = useMemo(() => {
-    return !toUserId && relation != 1;
-  }, [toUserId, relation]);
+  const isShowPrincple = useMemo(() => !toUserId && relation !== 1, [toUserId, relation]);
 
-  const isShowPeriod = useMemo(() => {
-    return Number(query.cycleType) == -1;
-  }, [query]);
+  const isShowPeriod = useMemo(() => Number(query.cycleType) === -1, [query]);
 
   const replaceOkr = useCallback(
     (data) => {
       const index = okrsRef.current.findIndex(
-        (item) => item.workId == data.workId
+        (item) => item.workId === data.workId,
       );
       okrsRef.current.splice(index, 1, data);
       setOkrs([...okrsRef.current]);
     },
-    [okrs]
+    [okrs],
   );
 
   const openCreateModal = () => {
-    headerRef && headerRef.current.openCreateModal();
+    if (headerRef.current) {
+      headerRef.current.openCreateModal();
+    }
   };
 
   const handleCaseChoosed = (data) => {
-    headerRef && headerRef.current.openCreateModal();
-    headerRef.current && headerRef.current.setCase(data);
+    if (headerRef.current) {
+      headerRef.current.openCreateModal();
+      headerRef.current.setCase(data);
+    }
     setCasesVisible(false);
     Toast.Success("成功套用");
   };
   const triggerAnimation = () => {
-    //@ts-ignore
-    document.querySelector('.tita-okr-list-v2').scrollTop = 0;
-    const twinkleEles = document.getElementsByClassName('okr-list__twinkle');
-    for (let i = 0; i < twinkleEles.length; i++) {
-      twinkleEles[i].classList.add('okr-list__twinkle--animation');
+    // @ts-ignore
+    document.querySelector(".tita-okr-list-v2").scrollTop = 0;
+    const twinkleEles = document.getElementsByClassName("okr-list__twinkle");
+    for (let i = 0; i < twinkleEles.length; i += 1) {
+      if (twinkleEles[i]) {
+        twinkleEles[i].classList.add("okr-list__twinkle--animation");
+      }
       setTimeout(() => {
-        twinkleEles[i].classList.remove('okr-list__twinkle--animation');
+        if (twinkleEles[i]) {
+          twinkleEles[i].classList.remove("okr-list__twinkle--animation");
+        }
       }, 3000);
     }
   };
   const onCasesCloseHandler = () => setCasesVisible(false);
+
+  useEffect(() => {
+    getOkrs();
+  }, [pageNum, pageSize, query, relation, toUserId, departmentId]);
+
   return (
     <Context.Provider
       value={{
@@ -199,7 +210,6 @@ const NewOkrList = (props) => {
         departmentName,
         departmentId,
         toUserId,
-
         ...query,
       }}
     >
@@ -212,52 +222,52 @@ const NewOkrList = (props) => {
 
         <Loading loading={loading}>
           {okrs.length > 0 && (
-            <>
-              <List
-                OkrListCmp={OkrListCmp}
-                okrs={okrs}
-                setOkrs={setOkrs}
-                refreshList={() => setTimeout(getOkrs, 500)}
-                replaceOkr={replaceOkr}
-                isShowPrincple={isShowPrincple}
-                isShowPeriod={isShowPeriod}
-                isShowEasyCreate={relation != 2 && relation != 3}
-                openCreateModal={openCreateModal}
+          <>
+            <List
+              OkrListCmp={OkrListCmp}
+              okrs={okrs}
+              setOkrs={setOkrs}
+              refreshList={() => setTimeout(getOkrs, 500)}
+              replaceOkr={replaceOkr}
+              isShowPrincple={isShowPrincple}
+              isShowPeriod={isShowPeriod}
+              isShowEasyCreate={relation !== 2 && relation !== 3}
+              openCreateModal={openCreateModal}
+            />
+            <div className={`${precls}__pagination`}>
+              <Pagination
+                total={total}
+                onChange={handlePageChange}
+                pageSize={pageSize}
+                current={pageNum}
+                size="sm"
               />
-              <div className={`${precls}__pagination`}>
-                <Pagination
-                  total={total}
-                  onChange={handlePageChange}
-                  pageSize={pageSize}
-                  current={pageNum}
-                  size="sm"
-                />
-              </div>
-            </>
+            </div>
+          </>
           )}
-          {okrs.length == 0 && (
-            <Empty
-              openCreate={() => openCreateModal()}
-              toUserId={toUserId || getUserInfo().Id}
-              openCases={() => setCasesVisible(true)}
-              relation={relation}
-              cycle={{
-                annualNum: query.annualNum,
-                cycleType: query.cycleType,
-                yqmNum: query.yqmNum,
-              }}
-            />
+          {okrs.length = 0 && (
+          <Empty
+            openCreate={() => openCreateModal()}
+            toUserId={toUserId || getUserInfo().Id}
+            openCases={() => setCasesVisible(true)}
+            relation={relation}
+            cycle={{
+              annualNum: query.annualNum,
+              cycleType: query.cycleType,
+              yqmNum: query.yqmNum,
+            }}
+          />
           )}
         </Loading>
         <InitCycleSetting SetCycleModal={SetCycleModal} />
         {!loading && (
-          <div className='okr-list__check-filter-tips'>
-            {getLocale('OKR_MyO_Text_CanfindOKR')}
-            <span className='okr-list__check-filter-btn'   onClick={triggerAnimation}>
-              {getLocale('OKR_MyO_Text_Check')}
-            </span>
-            {getLocale('OKR_MyO_Text_Topfiltercriteria')}
-          </div>
+        <div className="okr-list__check-filter-tips">
+          {getLocale("OKR_MyO_Text_CanfindOKR")}
+          <span className="okr-list__check-filter-btn" onClick={triggerAnimation}>
+            {getLocale("OKR_MyO_Text_Check")}
+          </span>
+          {getLocale("OKR_MyO_Text_Topfiltercriteria")}
+        </div>
         )}
         <Dialog
           zIndex={99999}
@@ -273,7 +283,6 @@ const NewOkrList = (props) => {
         >
           <OkrCasesLibrary
             onClose={() => setCasesVisible(false)}
-            closeable
             onApplyTpl={handleCaseChoosed}
           />
         </Dialog>
@@ -282,8 +291,12 @@ const NewOkrList = (props) => {
   );
 };
 
-export default (props) => (
-  <ErrorBoundary errorLevel={ERROR_LEVEL.P0}>
-    <NewOkrList {...props}/>
-  </ErrorBoundary>
-);
+function ErrorBoundaryFun(props) {
+  return (
+    <ErrorBoundary errorLevel={ERROR_LEVEL.P0}>
+      <NewOkrList {...props} />
+    </ErrorBoundary>
+  );
+}
+
+export default ErrorBoundaryFun;

package/src/pages/new-okr-list/init-cycle-setting.tsx

@@ -1,17 +1,16 @@
-import { getUserInfo } from "../../utils/bs-global";
 import React, { useEffect, useState } from "react";
+import { getUserInfo } from "../../utils/bs-global";
 import { getCycleSetting } from "./request-api";
 
-const InitCycleSetting = (props) => {
+function InitCycleSetting(props) {
   const { SetCycleModal } = props;
   const [visible, setVisible] = useState(false);
 
   useEffect(() => {
     if (
-      localStorage.getItem("cycle_setting_stop_show" + getUserInfo().Id) ==
-      "true"
-    )
-      return;
+      localStorage.getItem(`cycle_setting_stop_show${getUserInfo().Id}`)
+      == "true"
+    ) return;
     getCycleSetting().then((res) => {
       const { hasSetting } = res.Data;
       if (!hasSetting) setVisible(true);
@@ -25,5 +24,5 @@ const InitCycleSetting = (props) => {
       onRefresh={() => location.reload()}
     />
   );
-};
+}
 export default InitCycleSetting;

package/src/pages/new-okr-list/interface.tsx

@@ -7,7 +7,7 @@ export interface ContextInterface {
   setType: Function;
   classify: string | number;
   setClassify: Function;
-  relationType?: 'my' | 'sub' | 'follow';
+  relationType?: "my" | "sub" | "follow";
   toUserId?: number;
   departmentId?: number;
   departmentName?: string;
@@ -31,4 +31,4 @@ export interface ContextInterface {
   setShowMore: Function;
   orderType: number;
   setOrderType: Function;
-}
+}

package/src/pages/new-okr-list/keyword-search/index.tsx

@@ -1,60 +1,58 @@
+import React, { useState, useRef } from "react";
+import classnames from "classnames";
+import { getLocale } from "../../../utils/getLocale";
+import "./index.scss";
 
-import React, { useState, useRef }  from 'react';
-import classnames from 'classnames';
-import { getLocale } from '../../../utils/getLocale';
-import './index.scss';
-
-const precls = 'titaui-keyword-search';
+const precls = "titaui-keyword-search";
 
 interface IProps {
   onSearch?: Function;
 }
 
-const KeywordSearch = (props: IProps) => {;
+function KeywordSearch(props: IProps) {
   const { onSearch } = props;
   const inputRef = useRef();
   const [active, setActive] = useState(false);
-  const [keyword, setKeyword] = useState('');
+  const [keyword, setKeyword] = useState("");
   const handleSearchClick = () => {
-    if(!active) {
+    if (!active) {
       setActive(true);
-      //@ts-ignore
+      // @ts-ignore
       inputRef?.current?.focus();
     } else {
-      handleSearch()
+      handleSearch();
     }
-  }
+  };
   const handleSearch = () => {
-    onSearch && onSearch({keyWords:keyword});
-  }
+    onSearch && onSearch({ keyWords: keyword });
+  };
 
   const handleOnBlur = (e) => {
-    if(!keyword.length) setActive(false);
-  }
-  const changeValue = (e) =>{
-    setKeyword(e.target.value)
-  }
+    if (!keyword.length) setActive(false);
+  };
+  const changeValue = (e) => {
+    setKeyword(e.target.value);
+  };
   const handleOnKeyDown = (e) => {
-    if(e.keyCode == 13) {
+    if (e.keyCode == 13) {
       handleSearch();
     }
-  }
-  const clearKeyword = (e) =>{
-    setKeyword('')
+  };
+  const clearKeyword = (e) => {
+    setKeyword("");
   };
 
-  return <div className={classnames(precls, {[`${precls}--active`]: active})}>
-    <span className={`${precls}__input` }>
-      <input value={keyword} onKeyUp={handleOnKeyDown} onChange={changeValue} ref={inputRef} onBlur={handleOnBlur} placeholder={getLocale('Mod_Enterkeywords')} />
-    </span>
-    {
-      keyword.length > 0 && 
-      <span className={classnames('tu-icon-cross', `${precls}__del-icon` )} onClick={clearKeyword} />
+  return (
+    <div className={classnames(precls, { [`${precls}--active`]: active })}>
+      <span className={`${precls}__input`}>
+        <input value={keyword} onKeyUp={handleOnKeyDown} onChange={changeValue} ref={inputRef} onBlur={handleOnBlur} placeholder={getLocale("Mod_Enterkeywords")} />
+      </span>
+      {
+      keyword.length > 0
+      && <span className={classnames("tu-icon-cross", `${precls}__del-icon`)} onClick={clearKeyword} />
     }
-    <span className={classnames('tu-icon-search', `${precls}__search-icon`)} onClick={handleSearchClick}/>
-  </div>
-
-
+      <span className={classnames("tu-icon-search", `${precls}__search-icon`)} onClick={handleSearchClick} />
+    </div>
+  );
 }
 export default KeywordSearch;
- 

package/src/pages/new-okr-list/list/index.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-const List = (props) => {
+function List(props) {
   const {
     okrs,
     setOkrs,
@@ -8,7 +8,7 @@ const List = (props) => {
     isShowPeriod,
     openCreateModal,
     isShowEasyCreate,
-    refreshList,replaceOkr
+    refreshList, replaceOkr,
   } = props;
   const { OkrListCmp } = props;
 
@@ -32,5 +32,5 @@ const List = (props) => {
       />
     </div>
   );
-};
+}
 export default List;

package/src/pages/new-okr-list/loading.tsx

@@ -1,9 +1,9 @@
-import React from 'react';
+import React from "react";
 import { precls } from "./precls";
-import './index.scss';
+import "./index.scss";
 
-const Loading = ({ children, loading }) => {
-  if(!loading) return children;
-  return <div className={`${precls}__loading`} />
+function Loading({ children, loading }) {
+  if (!loading) return children;
+  return <div className={`${precls}__loading`} />;
 }
-export default Loading;
+export default Loading;

package/src/pages/new-okr-list/precls.ts

@@ -1 +1 @@
-export const precls = 'tita-okr-list-v2';
+export const precls = "tita-okr-list-v2";

package/src/pages/new-okr-list/request-api.ts

@@ -30,7 +30,7 @@ export const okrSearch = async (param: ListParam) => {
 };
 
 export const okrCrowd = async (param: ListParam) => {
-  const res = await rpost("v1")(`okr/crowd`, {
+  const res = await rpost("v1")("okr/crowd", {
     orderType: 2, // 默认创建时间正序
     ...param,
   });
@@ -39,11 +39,11 @@ export const okrCrowd = async (param: ListParam) => {
   }
 };
 
-export const getOkrInfoWithListData = async function(okrId) {
+export const getOkrInfoWithListData = async function (okrId) {
   return rget("v1")(`okr/list/specificOkr?okrId=${okrId}`);
 };
-export const getOkrSetting = async function() {
-  return rget("v1")(`okr/cycleSetting`).then((res) => res.Data);
+export const getOkrSetting = async function () {
+  return rget("v1")("okr/cycleSetting").then((res) => res.Data);
 };
 
 export const okrList = async (param: ListParam) => {
@@ -58,11 +58,9 @@ export const okrList = async (param: ListParam) => {
   }
 };
 
-export const getUserInfoById = async (toUserId: string) => {
-  return rget("v2")(`user/GetById?toUserid=${toUserId}`);
-};
+export const getUserInfoById = async (toUserId: string) => rget("v2")(`user/GetById?toUserid=${toUserId}`);
 
-export const visitOkrCyclePag = async function(toUserId) {
+export const visitOkrCyclePag = async function (toUserId) {
   return rpost("v1")(`okr/visitOkrCyclePag?toUserId=${toUserId}`);
 };
 
@@ -75,6 +73,4 @@ export const getCycleSetting = async (): Promise<{
   isOpenBimonthly: boolean;
   isOpenHalfYear: boolean;
   yearStartMonth: number;
-}> => {
-  return rget("v1")("okr/cycleSetting");
-};
+}> => rget("v1")("okr/cycleSetting");