@titaui/pc 1.9.57 → 1.9.61

package/src/components/grid-layout/personal-info/index.tsx

@@ -1,62 +1,62 @@
-import React, { useState, useEffect, useRef } from 'react';
-import { CardContainer } from '../commen-components';
-import { AvatarTips, ScrollMessage } from '../commen-components/scroll-tips';
-import postComponentForData from '../util/network';
-import Avatar from '../../avatar';
-import Tooltip from '../../tooltip';
-import { OpenUserName, OpenDepartmentName } from '../../../utils/open-data';
-import { getLocale } from '../../../utils/getLocale';
+import React, { useState, useEffect, useRef } from "react";
+import { CardContainer } from "../commen-components";
+import { AvatarTips, ScrollMessage } from "../commen-components/scroll-tips";
+import postComponentForData from "../util/network";
+import Avatar from "../../avatar";
+import Tooltip from "../../tooltip";
+import { OpenUserName, OpenDepartmentName } from "../../../utils/open-data";
+import { getLocale } from "../../../utils/getLocale";
 
-import './index.scss';
+import "./index.scss";
 
-const ComponentId = 'Personal-Information-Display';
+const ComponentId = "Personal-Information-Display";
 
 export default function PersonalInfoComponent() {
-  const [avatarUrl, setAvatarUrl] = useState('');
+  const [avatarUrl, setAvatarUrl] = useState("");
   const [userName, setUserName] = useState({
-    name: '',
+    name: "",
     userId: -1,
   });
   const [department, setDepartment] = useState({
-    name: '',
+    name: "",
     departmentId: -1,
   });
   const [fansNum, setFansNum] = useState(0);
   const [likeNum, setLikeNum] = useState(0);
   const [scrollMessage, setScrollMessage] = useState<ScrollMessage>({
-    name: '',
-    date: '',
+    name: "",
+    date: "",
     userId: -1,
   });
   const [userRoles, setUserRoles] = useState<string[]>([]);
-  const [avatarColor, setAvatarColor] = useState('');
+  const [avatarColor, setAvatarColor] = useState("");
   const toolTipRef = useRef<any>();
   useEffect(() => {
-    //获取个人标签
-    //@ts-ignore
+    // 获取个人标签
+    // @ts-ignore
     const loginUserInfo = BSGlobal && BSGlobal.loginUserInfo;
     const userRoleList: string[] = [];
-    for (let item in loginUserInfo) {
+    for (const item in loginUserInfo) {
       switch (item) {
-        case 'IsBoss':
-          loginUserInfo['IsBoss'] && userRoleList.push('boss');
+        case "IsBoss":
+          loginUserInfo.IsBoss && userRoleList.push("boss");
           break;
-        case 'Role':
-          loginUserInfo['Role'] === 2 && userRoleList.push('super');
-          loginUserInfo['Role'] === 4 && userRoleList.push('userManager');
+        case "Role":
+          loginUserInfo.Role === 2 && userRoleList.push("super");
+          loginUserInfo.Role === 4 && userRoleList.push("userManager");
           break;
-        case 'IsTitaFeedSystemManager':
-          loginUserInfo['IsTitaFeedSystemManager'] &&
-            userRoleList.push('assistant');
+        case "IsTitaFeedSystemManager":
+          loginUserInfo.IsTitaFeedSystemManager
+            && userRoleList.push("assistant");
           break;
       }
     }
     setUserRoles(userRoleList.slice(0, 2));
-    //请求获取信息
+    // 请求获取信息
     postComponentForData(ComponentId).then((res) => {
-      for (let item of res) {
+      for (const item of res) {
         switch (item.componentDataProp) {
-          case 'myInfo':
+          case "myInfo":
             setAvatarUrl(item?.componentData[0].simpleUserModelV2.avatar.large);
             setUserName({
               name: item?.componentData[0]?.simpleUserModelV2?.name,
@@ -68,18 +68,18 @@ export default function PersonalInfoComponent() {
                 item?.componentData[0]?.simpleUserModelV2?.departmentId,
             });
             setAvatarColor(
-              item?.componentData[0]?.simpleUserModelV2?.avatar?.color
+              item?.componentData[0]?.simpleUserModelV2?.avatar?.color,
             );
             break;
-          case 'myFollowInfo':
+          case "myFollowInfo":
             setFansNum(item?.componentData[0]?.total);
             break;
-          case 'myPraiseInfo':
+          case "myPraiseInfo":
             setLikeNum(item?.componentDataCount);
             break;
-          case 'latelyFPInfo':
-            item.componentData[0] &&
-              setScrollMessage({
+          case "latelyFPInfo":
+            item.componentData[0]
+              && setScrollMessage({
                 name: item?.componentData[0]?.simpleUserModelV2?.name,
                 date: item?.componentData[0]?.folowPariseDate,
                 userId: item?.componentData[0]?.simpleUserModelV2?.userId,
@@ -100,8 +100,8 @@ export default function PersonalInfoComponent() {
           <div className="PersonalInfoComponent-PersonalInfo__maskimg-mask" />
           <img
             className="PersonalInfoComponent-PersonalInfo__maskimg-img"
-            style={{ filter: avatarUrl ? 'blur(10px)' : 'blur(6px)' }}
-            src={avatarUrl || require('../image/default-background-img.png')}
+            style={{ filter: avatarUrl ? "blur(10px)" : "blur(6px)" }}
+            src={avatarUrl || require("../image/default-background-img.png")}
           />
         </div>
       </div>
@@ -123,11 +123,11 @@ export default function PersonalInfoComponent() {
           placement="top"
         >
           <p className="PersonalInfoComponent-PersonalInfo__personInfo__info">
-            <span style={{ textAlign: 'right' }}>
+            <span style={{ textAlign: "right" }}>
               <OpenUserName name={userName.name} id={userName.userId} />
             </span>
             <i />
-            <span style={{ textAlign: 'left' }}>
+            <span style={{ textAlign: "left" }}>
               <OpenDepartmentName
                 name={department.name}
                 id={department.departmentId}
@@ -145,24 +145,29 @@ export default function PersonalInfoComponent() {
 
       <div className="PersonalInfoComponent-PersonalInfo__fansinfo">
         <span className="PersonalInfoComponent-PersonalInfo__fansinfo__attention">
-          <img src={require('../image/visit-icon.png')} /> <b>{fansNum}</b>
-          {getLocale('HP_peoplefollow')}
+          <img src={require("../image/visit-icon.png")} />
+          {" "}
+          <b>{fansNum}</b>
+          {getLocale("HP_peoplefollow")}
         </span>
         <span className="PersonalInfoComponent-PersonalInfo__fansinfo__like">
-          <img src={require('../image/liking.png')} /> <b>{likeNum}</b>{getLocale('HP_Kudos')}
+          <img src={require("../image/liking.png")} />
+          {" "}
+          <b>{likeNum}</b>
+          {getLocale("HP_Kudos")}
         </span>
       </div>
       {scrollMessage.name && scrollMessage.name.length ? (
         <AvatarTips
           message={scrollMessage}
           content="关注了我"
-          styles={{ height: '28px', padding: '0 28px', lineHeight: '28px' }}
+          styles={{ height: "28px", padding: "0 28px", lineHeight: "28px" }}
         />
       ) : (
-        //@ts-ignore
+        // @ts-ignore
         <AvatarTips
-          content={"🥰 "+getLocale('HP_Smallwindow')}
-          styles={{ height: '28px', padding: '0 28px', lineHeight: '28px' }}
+          content={`🥰 ${getLocale("HP_Smallwindow")}`}
+          styles={{ height: "28px", padding: "0 28px", lineHeight: "28px" }}
         />
       )}
     </CardContainer>

package/src/components/grid-layout/sub-employee-okr/index.tsx

@@ -1,79 +1,89 @@
 import React, { useState, useEffect } from "react";
-import { CardTitle, Gap, CardContainer, EmptyBackGround } from "../commen-components";
-import PersonalOkr from './person-okr'
-import postComponentForData from "../util/network"
+import {
+  CardTitle, Gap, CardContainer, EmptyBackGround,
+} from "../commen-components";
+import PersonalOkr from "./person-okr";
+import postComponentForData from "../util/network";
 import { getLocale } from "../../../utils/getLocale";
 
 import "./index.scss";
 
-const ComponentId = 'Underling-OKR-Situation'
+const ComponentId = "Underling-OKR-Situation";
 
 export default function SubOKRComponents() {
-  const [isSubTab, setIsSubTab] = useState(false)
-
-  const [subEmployeeList, setSubEmployeeList] = useState([])
-  const [sameEmployeeList, setSameEmployeeList] = useState([])
-  const [isLeader, setIsLeader] = useState(false)
+  const [isSubTab, setIsSubTab] = useState(false);
 
+  const [subEmployeeList, setSubEmployeeList] = useState([]);
+  const [sameEmployeeList, setSameEmployeeList] = useState([]);
+  const [isLeader, setIsLeader] = useState(false);
 
   useEffect(() => {
-    //@ts-ignore
+    // @ts-ignore
     if (BSGlobal && BSGlobal.loginUserInfo.IsLeader) {
-      setIsLeader(true)
-      setIsSubTab(true)
+      setIsLeader(true);
+      setIsSubTab(true);
     }
 
-    postComponentForData(ComponentId).then(res => {
-      for (let item of res) {
+    postComponentForData(ComponentId).then((res) => {
+      for (const item of res) {
         switch (item.componentDataProp) {
-          case 'MySameLevelOkr':
-            setSameEmployeeList(item.componentData)
-            break
-          case 'MySubordinateOks':
-            setSubEmployeeList(item.componentData)
-            break
+          case "MySameLevelOkr":
+            setSameEmployeeList(item.componentData);
+            break;
+          case "MySubordinateOks":
+            setSubEmployeeList(item.componentData);
+            break;
         }
       }
-    })
-  }, [])
+    });
+  }, []);
 
   const changeTab = () => {
-    setIsSubTab(!isSubTab)
-  }
+    setIsSubTab(!isSubTab);
+  };
 
   const renderEmployeeList = (List) => {
     if (List && List.length > 0) {
-      return List.map(item =>
-        item.user &&
+      return List.map((item) => item.user
+        && (
         <PersonalOkr
           key={item.user.userId}
-          name={item.user.name} userId={item.user.userId}
+          name={item.user.name}
+          userId={item.user.userId}
           avatarColor={item.user.avatar.color}
           iconSrc={item.user.avatar.large}
-          updateTime={item.updateTime} num={item.avgRage}
+          updateTime={item.updateTime}
+          num={item.avgRage}
         />
-      )
-    } else {
-      return <EmptyBackGround
-        imgSrc={require('../image/sub-empty.png')} content={getLocale('HP_Noavailable')}
-        styles={{ display: 'flex', flexDirection: 'column', justifyContent: 'center' }}
-      />
+        ));
     }
-  }
+    return (
+      <EmptyBackGround
+        imgSrc={require("../image/sub-empty.png")}
+        content={getLocale("HP_Noavailable")}
+        styles={{ display: "flex", flexDirection: "column", justifyContent: "center" }}
+      />
+    );
+  };
 
   return (
-    <CardContainer styles={{ padding: '12px 16px' }}>
+    <CardContainer styles={{ padding: "12px 16px" }}>
       <CardTitle
-        content={`${isSubTab ? getLocale('OKR_MyO_Butt_Subordinate') : '同级'}OKR`}
-        iconUrl={require('../image/sub.png')}
-      >{
+        content={`${isSubTab ? getLocale("OKR_MyO_Butt_Subordinate") : "同级"}OKR`}
+        iconUrl={require("../image/sub.png")}
+      >
+        {
           isLeader
-          && <span className="grid-component-card-title__behave" style={{ marginRight: '4px' }}
+          && (
+          <span
+            className="grid-component-card-title__behave"
+            style={{ marginRight: "4px" }}
             onClick={changeTab}
           >
-            <img src={require('../image/change.png')} />
-            <span>{isSubTab ? '同级' : getLocale('OKR_MyO_Butt_Subordinate')}</span>
+            <img src={require("../image/change.png")} />
+            <span>{isSubTab ? "同级" : getLocale("OKR_MyO_Butt_Subordinate")}</span>
           </span>
+          )
         }
       </CardTitle>
       <Gap />
@@ -84,6 +94,6 @@ export default function SubOKRComponents() {
             : renderEmployeeList(sameEmployeeList)
         }
       </div>
-    </CardContainer >
-  )
-}
+    </CardContainer>
+  );
+}

package/src/components/grid-layout/sub-employee-okr/person-okr.tsx

@@ -1,11 +1,11 @@
-import React, { useState, useEffect, useRef } from 'react';
-import Progress from '../../progress/index'
-import Tooltip from '../../tooltip'
-import Avatar from '../../avatar';
-import { judgeTimeSpaceFromNow } from '../../../utils/date-test-change';
-import { OpenUserName } from '../../../utils/open-data';
+import React, { useState, useEffect, useRef } from "react";
+import Progress from "../../progress/index";
+import Tooltip from "../../tooltip";
+import Avatar from "../../avatar";
+import { judgeTimeSpaceFromNow } from "../../../utils/date-test-change";
+import { OpenUserName } from "../../../utils/open-data";
 
-import './index.scss';
+import "./index.scss";
 
 interface Props {
   iconSrc: string;
@@ -17,7 +17,9 @@ interface Props {
 }
 
 export default function PersonalOkr(props: Props) {
-  const { iconSrc, name, updateTime, num, avatarColor, userId } = props;
+  const {
+    iconSrc, name, updateTime, num, avatarColor, userId,
+  } = props;
 
   const [subUpdateTime, setSubUpdateTime] = useState(judgeTimeSpaceFromNow(updateTime));
   const toolTipRef = useRef<any>();
@@ -47,15 +49,17 @@ export default function PersonalOkr(props: Props) {
             </span>
           </Tooltip>
           <span className="subOKRComponents-PersonalOkr__left__updatetime">
-            {subUpdateTime}更新
+            {subUpdateTime}
+            更新
           </span>
         </div>
       </span>
       <span className="subOKRComponents-PersonalOkr__right">
         <div className="subOKRComponents-PersonalOkr__right__percentNum">
-          {num}%
+          {num}
+          %
         </div>
-        <div style={{ position: 'absolute', right: '-8px', bottom: '0' }}>
+        <div style={{ position: "absolute", right: "-8px", bottom: "0" }}>
           <Progress
             percent={num}
             isShowtext={false}

package/src/components/grid-layout/util/click-link.tsx

@@ -1,27 +1,26 @@
-import { queryParams } from './network'
-import drawerManager from '../../drawer-manager'
+import { queryParams } from "./network";
+import drawerManager from "../../drawer-manager";
 
 const onClickLinkChangeHash = (link) => {
-  window.location.hash = link
-}
-export default onClickLinkChangeHash
-
+  window.location.hash = link;
+};
+export default onClickLinkChangeHash;
 
 export const toDataList = (query = {}) => {
-  onClickLinkChangeHash('homepage/datalist' + queryParams({
-    ...query
-  }))
-}
+  onClickLinkChangeHash(`homepage/datalist${queryParams({
+    ...query,
+  })}`);
+};
 
 export const toOkrTarget = (query = {}) => {
-  onClickLinkChangeHash('okr%2Fmanage' + queryParams({
-    ...query
-  }))
-}
+  onClickLinkChangeHash(`okr%2Fmanage${queryParams({
+    ...query,
+  })}`);
+};
 
 export const toWeekPlan = (query = {}) => {
-  window.open(window.location.href.split('#')[0] + '#/plan')
+  window.open(`${window.location.href.split("#")[0]}#/plan`);
   // onClickLinkChangeHash('plan' + queryParams({
   //   ...query
   // }))
-}
+};

package/src/components/grid-layout/util/network.ts

@@ -1,36 +1,32 @@
-import axios from 'axios';
-import { getApiUrl } from '../../../utils/request-v1'
+import axios from "axios";
+import { getApiUrl } from "../../../utils/request-v1";
 
-//@ts-ignore
+// @ts-ignore
 const tenantId = BSGlobal && BSGlobal.tenantInfo.Id || 0;
-//@ts-ignore
+// @ts-ignore
 const userId = BSGlobal && BSGlobal.loginUserInfo.Id || 0;
 
 // 对象转 queryParams
 export const queryParams = (params = {}) => {
-  let queryStr = '?';
+  let queryStr = "?";
   for (const key in params) {
     if (params.hasOwnProperty(key)) {
-      queryStr = queryStr + `${key}=${params[key]}&`;
+      queryStr += `${key}=${params[key]}&`;
     }
   }
-  return queryStr.length === 1 ? '' : queryStr.slice(0, -1)
-}
-
+  return queryStr.length === 1 ? "" : queryStr.slice(0, -1);
+};
 
 export default async (ComponentId) => {
-  const componentUrl = getApiUrl('okr/home/component ')
+  const componentUrl = getApiUrl("okr/home/component ");
   const res = await axios.post(componentUrl, {
-    'ComponentId': ComponentId
-  })
+    ComponentId,
+  });
   if (res.data.Code === 1) {
-    return res.data.Data.componentsDataModels
-  } else {
-    return []
+    return res.data.Data.componentsDataModels;
   }
-
-}
-
+  return [];
+};
 
 // //获取词云的接口
 // export const getWordsApi = () => {
@@ -38,20 +34,19 @@ export default async (ComponentId) => {
 //   return `${WordsUrl}?num=250`
 // }
 
-
-//获取文章的接口
+// 获取文章的接口
 export const getEssay = async (typeId = 0) => {
-  const EssayUrl = getApiUrl('okrTemplate/article')
+  const EssayUrl = getApiUrl("okrTemplate/article");
   const res = await axios.get(EssayUrl + queryParams({
-    "labelId": typeId,
-    "pageNum": 0,
-    "pageSize": 0,
-  }))
-  return res.data.Data
-}
+    labelId: typeId,
+    pageNum: 0,
+    pageSize: 0,
+  }));
+  return res.data.Data;
+};
 
 export const getIsCompanyOKREmpty = async () => {
-  const OKREmptyUrl = getApiUrl('okr/map/exist')
-  const res = await axios.get(OKREmptyUrl)
-  return res.data.Data
-}
+  const OKREmptyUrl = getApiUrl("okr/map/exist");
+  const res = await axios.get(OKREmptyUrl);
+  return res.data.Data;
+};

package/src/components/grid-layout/week-task/index.tsx

@@ -1,71 +1,76 @@
 import React, { useState, useEffect } from "react";
-import { CardTitle, DataItem, CardContainer, CardFlexContent, EmptyBackGround } from '../commen-components'
+import {
+  CardTitle, DataItem, CardContainer, CardFlexContent, EmptyBackGround,
+} from "../commen-components";
 import { getLocale } from "../../../utils/getLocale";
-import { toOkrTarget, toWeekPlan } from '../util/click-link'
-import postComponentForData from "../util/network"
-
-const ComponentId = 'Mission-This-Week'
+import { toOkrTarget, toWeekPlan } from "../util/click-link";
+import postComponentForData from "../util/network";
 
+const ComponentId = "Mission-This-Week";
 
 export default function WeekTaskComponent() {
-  const [isMyOKREmpty, setIsMyOKREmpty] = useState(false)
+  const [isMyOKREmpty, setIsMyOKREmpty] = useState(false);
 
-  const [unFinishTaskOnWeek, setUnFinishTaskOnWeek] = useState(0)
-  const [finishTaskOnWeek, setFinishTaskOnWeek] = useState(0)
-  const [dueTaskOnWeek, setDueTaskOnWeek] = useState(0)
+  const [unFinishTaskOnWeek, setUnFinishTaskOnWeek] = useState(0);
+  const [finishTaskOnWeek, setFinishTaskOnWeek] = useState(0);
+  const [dueTaskOnWeek, setDueTaskOnWeek] = useState(0);
 
   useEffect(() => {
-    postComponentForData(ComponentId).then(res => {
-      for (let item of res) {
+    postComponentForData(ComponentId).then((res) => {
+      for (const item of res) {
         switch (item.componentDataProp) {
           case "unFinishTaskOnWeek":
-            setUnFinishTaskOnWeek(item.componentDataCount)
-            break
+            setUnFinishTaskOnWeek(item.componentDataCount);
+            break;
           case "finishTaskOnWeek":
-            setFinishTaskOnWeek(item.componentDataCount)
-            break
+            setFinishTaskOnWeek(item.componentDataCount);
+            break;
           case "dueTaskOnWeek":
-            setDueTaskOnWeek(item.componentDataCount)
-            break
+            setDueTaskOnWeek(item.componentDataCount);
+            break;
         }
       }
-    })
-  }, [])
+    });
+  }, []);
 
   useEffect(() => {
     if (unFinishTaskOnWeek + finishTaskOnWeek + dueTaskOnWeek === 0) {
-      !isMyOKREmpty && setIsMyOKREmpty(true)
+      !isMyOKREmpty && setIsMyOKREmpty(true);
     } else {
-      isMyOKREmpty && setIsMyOKREmpty(false)
+      isMyOKREmpty && setIsMyOKREmpty(false);
     }
-
-  }, [unFinishTaskOnWeek + finishTaskOnWeek + dueTaskOnWeek])
+  }, [unFinishTaskOnWeek + finishTaskOnWeek + dueTaskOnWeek]);
 
   return (
-    <CardContainer styles={{ padding: '20px 22px 0' }}>
+    <CardContainer styles={{ padding: "20px 22px 0" }}>
       <CardTitle
-        content={getLocale('OKR_OKRW_Tasksweek')}
-        iconUrl={require('../image/task.png')}
+        content={getLocale("OKR_OKRW_Tasksweek")}
+        iconUrl={require("../image/task.png")}
       >
-        {!isMyOKREmpty && <a onClick={toWeekPlan} className="grid-component-card-title__behave">{getLocale('Feed_Set_Pop_Butt_Newtask')}</a>}
+        {!isMyOKREmpty && <a onClick={toWeekPlan} className="grid-component-card-title__behave">{getLocale("Feed_Set_Pop_Butt_Newtask")}</a>}
       </CardTitle>
       {
         isMyOKREmpty
-          ? <EmptyBackGround
-            imgSrc={require('../image/weektask-empty.png')}
-            content={getLocale('HP_AligningOKR')}
-            behave={{
-              type: 'button',
-              text: getLocale('Pro_page_Mil_Butt_Createatask'),
-              onClick: e => toWeekPlan()
-            }} />
-          : <CardFlexContent>
-            <DataItem num={unFinishTaskOnWeek} numColor="#2879FF" label={getLocale('HP_Unfinishedweek')} Qtips={getLocale('HP_Thetasksweek')} handleDataClick={() => toWeekPlan()} />
-            <DataItem num={finishTaskOnWeek} numColor="#5AD8A6" label={getLocale('HP_Finishedweek')} handleDataClick={() => toWeekPlan()} />
-            <DataItem num={dueTaskOnWeek} numColor="#F05E5E" label={getLocale('OKR_MyO_E_Overdue')} handleDataClick={() => toWeekPlan()} />
-          </CardFlexContent>
+          ? (
+            <EmptyBackGround
+              imgSrc={require("../image/weektask-empty.png")}
+              content={getLocale("HP_AligningOKR")}
+              behave={{
+                type: "button",
+                text: getLocale("Pro_page_Mil_Butt_Createatask"),
+                onClick: (e) => toWeekPlan(),
+              }}
+            />
+          )
+          : (
+            <CardFlexContent>
+              <DataItem num={unFinishTaskOnWeek} numColor="#2879FF" label={getLocale("HP_Unfinishedweek")} Qtips={getLocale("HP_Thetasksweek")} handleDataClick={() => toWeekPlan()} />
+              <DataItem num={finishTaskOnWeek} numColor="#5AD8A6" label={getLocale("HP_Finishedweek")} handleDataClick={() => toWeekPlan()} />
+              <DataItem num={dueTaskOnWeek} numColor="#F05E5E" label={getLocale("OKR_MyO_E_Overdue")} handleDataClick={() => toWeekPlan()} />
+            </CardFlexContent>
+          )
       }
       {/* {!isCompanyOKREmpty && <ScrollTips content="已完成任务" message={{ name: '赵晓雅', date: '02/16' }} />} */}
-    </CardContainer >
-  )
-}
+    </CardContainer>
+  );
+}