@titaui/pc 1.7.13 → 1.7.17

package/src/components/nav-top/components/user-message/index.tsx

@@ -0,0 +1,138 @@
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+import Popup from '../../../popup';
+import ConditionRender from '../../../condition-render';
+import Message from './msg';
+import { getBSGlobal, getUserInfo } from '../../../../utils/bs-global';
+import { popupAlign } from './constant';
+import RedPack from './components/red-pack';
+import { getMessages } from '../../request.apis';
+import Bell from './images/bell@3x.png';
+import './index.scss';
+
+const prefixCls = 'titaui-user-message';
+
+const UserMessage = () => {
+	const [ infosNum, setInfosNum ] = useState(0);
+	const [ allData, setAllData ] = useState([]);
+	const [ redPackNum, setRedPackNum ] = useState(0);
+	const [ popupVisible, setPopupVisible ] = useState(false);
+	const [ preData, setPreData ] = useState(0);
+	const [ firstTab, setFirstTab ] = useState('todos');
+
+	const handleShowInfos = () => {
+		setPopupVisible(true);
+	};
+
+	const handleIntervalRequestMessageInfo = () => {
+		getMessages().then((res) => {
+			if (res.Code === 1) {
+				setAllData(res.Data.indicators);
+				const indicators = res.Data.indicators;
+				const todos = indicators.find((item) => item.type === 'todoIndicator');
+				const informs = indicators.find((item) => item.type === 'messageIndicator');
+				const replys = indicators.find((item) => item.type === 'mLeaveandComment');
+				const reminds = indicators.find((item) => item.type === 'Tx');
+				let total = 0;
+				// @与回复的数量在通知里面包含了
+				if (reminds && reminds.value) {
+					total += reminds.value;
+				}
+				if (informs) {
+					total += informs.value;
+				}
+				if (todos) {
+					total += todos.value;
+				}
+				setPreData(infosNum);
+				setInfosNum(total);
+				if (todos && todos.value) {
+					setFirstTab('todos');
+				} else if (informs && !replys && informs.value) {
+					setFirstTab('informs');
+				} else if (replys && informs.value - replys.value === 0) {
+					setFirstTab('replys');
+				} else if (replys && informs.value - replys.value > 0) {
+					setFirstTab('informs');
+				} else if (reminds && reminds.value){
+					setFirstTab('reminds');
+        } else {
+          setFirstTab("todos")
+        }
+				// 判断是企业勋章
+				const enterpriseMedalMsg = indicators.filter((item) => {
+					return item.messageType === 1 && item.indicatorType === 1969002;
+				});
+				// @ts-ignore
+				enterpriseMedalMsg.length > 0 && window.util.upaasEnterpriseMedal();
+
+				// upaas 勋章
+				const medalDetail = getBSGlobal('medalDetail');
+				// @ts-ignore
+				medalDetail && window.util.upaasMedal()(medalDetail);
+
+				// 红包
+				const mRedPackIndicator = indicators.filter((item) => {
+					return item.type === 'mRedPackIndicator';
+				});
+				mRedPackIndicator.length > 0 && setRedPackNum(mRedPackIndicator[0].value);
+
+				// 祝福，拆礼物
+				const blessIndicator = indicators.filter((item) => {
+					return item.type === 'mZhufu';
+				});
+
+				if (blessIndicator.length === 1) {
+					const userInfo = getUserInfo();
+					const options = {
+						needMask: true,
+						toUserId: userInfo.Id,
+						blessingTime: blessIndicator[0]['latestUpdateDate']
+					};
+					// @ts-ignore
+					window.util.openGift(options);
+				}
+			}
+		});
+	};
+
+	useEffect(() => {
+		setPreData(infosNum);
+		handleIntervalRequestMessageInfo();
+		setInterval(handleIntervalRequestMessageInfo, 15000);
+	}, []);
+
+	return (
+		<div>
+			<Popup
+				popup={
+					<Message
+						onItemClick={setPopupVisible}
+						allData={allData}
+						handleIntervalRequestMessageInfo={handleIntervalRequestMessageInfo}
+						firstTab={firstTab}
+					/>
+				}
+				popupVisible={popupVisible}
+				popupTransitionName={classNames(`${prefixCls}__popup-right-top`)}
+				popupAlign={popupAlign}
+				mask={false}
+				destroyPopupOnHide={true}
+			>
+				<div className={classNames(`${prefixCls}__msg`)} onClick={handleShowInfos}>
+					<ConditionRender condition={infosNum !== 0}>
+						<div className={classNames(`${prefixCls}__msg-total`)}>{infosNum > 100 ? '99+' : infosNum}</div>
+					</ConditionRender>
+					<img
+						src={Bell}
+						className={classNames({
+							[`${prefixCls}__msg-dot`]: infosNum !== preData
+						})}
+					/>
+				</div>
+			</Popup>
+			<RedPack redPackNum={redPackNum} />
+		</div>
+	);
+};
+export default UserMessage;

package/src/components/nav-top/components/user-message/msg/index.scss

@@ -0,0 +1,65 @@
+.titaui-user-message-msg {
+  box-sizing: border-box;
+  position: relative;
+  width: 372px;
+  height: 420px;
+  background: #ffffff;
+  box-shadow: 0px 4px 24px 0px rgba(127, 145, 180, 0.2);
+  border-radius: 16px;
+  align-items: center;
+  &__tabs {
+    .rc-tabs-nav {
+      margin-left: 20px;
+      box-sizing: border-box;
+      width: 334px;
+      height: 58px;
+      background: #ffffff;
+      border-radius: 24px 24px 0px 0px;
+      .rc-tabs-nav-list {
+        margin-left: 5px;
+        .rc-tabs-tab {
+          margin: 20px 36px 15px 0;
+        }
+        font-size: 14px;
+        font-weight: 400;
+        color: #3f4755;
+        line-height: 22px;
+      }
+      .rc-tabs-tab-active {
+        font-size: 14px;
+        font-weight: 600;
+        color: #2879ff;
+        line-height: 22px;
+      }
+    }
+    &-todos {
+      position: relative;
+    }
+    &-informs {
+      position: relative;
+    }
+    &-replys {
+      position: relative;
+    }
+    &-reminds {
+      position: relative;
+    }
+  }
+}
+.titaui-user-message-msg
+  .titaui-user-message-msg__tabs
+  .titaui-tabs
+  .rc-tabs-tab::after {
+  width: 20px;
+  height: 3px;
+  background: linear-gradient(270deg, #4e90ff 0%, #2879ff 100%);
+  border-radius: 2px;
+  bottom: -15px;
+}
+
+.titaui-user-message-msg
+  .titaui-user-message-msg__tabs
+  .titaui-tabs
+  .rc-tabs-tab-active::after {
+  left: calc(50% - 10px);
+}

package/src/components/nav-top/components/user-message/msg/index.tsx

@@ -0,0 +1,106 @@
+import React, {useState,useEffect} from "react";
+import classNames from "classnames";
+import Tabs, { TabPane } from "../../../../tabs";
+import Reply from "../components/reply";
+import Todos from "../components/todos";
+import Inform from "../components/inform";
+import Remind from "../components/remind";
+import TabTitle from "../components/tab-title";
+import { getMessages } from "../../../request.apis";
+import "./index.scss";
+
+const prefixCls = "titaui-user-message-msg";
+
+
+const UserMessage = (props) => {
+  const { onItemClick, allData,handleIntervalRequestMessageInfo,firstTab} = props;
+
+  const [remindTotal, setRemindTotal] = useState(0);
+
+  const getData = (type) => {
+    const total = allData.filter((item) => {
+      return item.type === type;
+    });
+    if (total.length !== 0) {
+      return total[0].value;
+    } else {
+      return 0;
+    }
+  };
+
+  const handleIgnoreTask = (allIgnore) => {
+    if (allIgnore) {
+      setRemindTotal(0);
+    } else {
+      setRemindTotal(remindTotal - 1);
+    }
+  }
+
+  useEffect(() => { 
+    getMessages().then(res => {
+      if (res.Code === 1) {
+        res.Data.indicators.forEach((item) => {
+          if (item.type === "Tx") {
+            setRemindTotal(item.value)
+          }
+        })
+      }
+    });
+  }, [])  
+
+  return (
+    <div className={classNames(`${prefixCls}`)}>
+      <div className={classNames(`${prefixCls}__tabs`)}>
+        <Tabs
+          destroyInactiveTabPane={true}
+          defaultActiveKey={firstTab}
+          animated={{ inkBar: true, tabPane: false }}
+        >
+          <TabPane
+            tab={
+              <TabTitle
+                data={getData("todoIndicator")}
+                title="待办"
+                tab={"todos"}
+              />
+            }
+            key="todos"
+          >
+            <Todos onItemClick={onItemClick} />
+          </TabPane>
+          <TabPane
+            tab={
+              <TabTitle
+                data={(getData("messageIndicator"))-(getData("mLeaveandComment"))}
+                title="通知"
+                tab={"informs"}
+              />
+            }
+            key="informs"
+          >
+            <Inform onItemClick={onItemClick} handleIntervalRequestMessageInfo={handleIntervalRequestMessageInfo}/>
+          </TabPane>
+          <TabPane
+            tab={
+              <TabTitle
+                data={getData("mLeaveandComment")}
+                title="@与回复"
+                tab={"replys"}
+              />
+            }
+            key="replys"
+          >
+            <Reply onItemClick={onItemClick} handleIntervalRequestMessageInfo={handleIntervalRequestMessageInfo}/>
+          </TabPane>
+          <TabPane
+            tab={<TabTitle data={remindTotal} title="提醒" tab={"reminds"} />}
+            key="reminds"
+          >
+            <Remind onItemClick={onItemClick} handleIntervalRequestMessageInfo={handleIntervalRequestMessageInfo} handleIgnoreTask={handleIgnoreTask}/>
+          </TabPane>
+        </Tabs>
+      </div>
+    </div>
+  );
+};
+export default UserMessage;

package/src/components/nav-top/components/user-message/utils.ts

@@ -0,0 +1,27 @@
+export const htmlToText = (text) => {
+	let div = document.createElement('div');
+	div.innerHTML = text;
+	text = div.innerText || div.textContent;
+	return text;
+};
+export const deleteText = (text) => {
+	const last = text.trim().slice(-4);
+  if (last === '查看任务') {
+    text = text.trim().slice(0, -4);
+  } else if (last === '查看详情') {
+    text = text.trim().slice(0, -4);
+  } else if (last === '进入日报') {
+    text = text.trim().slice(0, -4);
+  } else if (last === '进入周报') {
+    text = text.trim().slice(0, -4);
+  } else if (last === '进入月报') {
+    text = text.trim().slice(0, -4);
+  } else if (last === '进入项目') {
+    text = text.trim().slice(0, -4);
+  } else if (text.trim().slice(-6) === '进入今日工作') {
+    text = text.trim().slice(0, -6);
+  } else {
+    text = text;
+  }
+	return text;
+};

package/src/components/nav-top/components/user-own-menu/components/own-menu/index.scss

@@ -0,0 +1,62 @@
+.titaui-nav-top-user-own-menu {
+  display: flex;
+  box-sizing: border-box;
+  background: #ffffff;
+  box-shadow: 0px 4px 24px 0px rgba(127, 145, 180, 0.2);
+  border-radius: 16px;
+  padding: 16px 26px 16px 12px;
+  &__card {
+    &-items {
+      margin-bottom: 5px;
+      position: relative;
+      &:last-of-type {
+        &::after {
+          display: none;
+        }
+      }
+      &::after {
+        position: absolute;
+        bottom: -2.5px;
+        left: 8px;
+        display: inline-block;
+        content: "";
+        width: 100px;
+        height: 1px;
+        background: linear-gradient(
+          297deg,
+          #ffffff 0%,
+          #e9ecf0 46%,
+          #ffffff 100%
+        );
+      }
+      &:last-of-type {
+        margin-bottom: 0;
+      }
+    }
+    &-item {
+      display: flex;
+      border-radius: 8px;
+      padding: 6px 8px;
+      align-items: center;
+      cursor:pointer;
+      &:hover {
+        color: #2879ff;
+        background: #f7f8fa;
+      }
+      &-img {
+        margin-right: 8px;
+        color: currentColor;
+        font-size: 16px;
+      }
+      &-title {
+        font-size: 14px;
+        font-weight: 400;
+        color: #3f4755;
+        line-height: 22px;
+        &:hover {
+          color: #2879ff;
+        }
+      }
+    }
+  }
+}

package/src/components/nav-top/components/user-own-menu/components/own-menu/index.tsx

@@ -0,0 +1,31 @@
+import React, { useState } from "react";
+import classNames from "classnames";
+import { getOwnSet } from "../../utils";
+import "./index.scss";
+
+const preCls = "titaui-nav-top-user-own-menu";
+
+const User = () => {
+  const [ownSet] = useState(getOwnSet());
+  return (
+    <div className={classNames(`${preCls}`)}>
+      <ul className={classNames(`${preCls}__card`)}>
+        {ownSet.map((items, index) => (
+          <div className={classNames(`${preCls}__card-items`)} key={index}>
+            {items.map((item) => (
+              <li className={classNames(`${preCls}__card-item`)} key={item.id}>
+                <i
+                  className={classNames(`${preCls}__card-item-img`,item.url)}
+                />
+                <a href={item.objUrl} className={classNames(`${preCls}__card-item-title`)}>
+                    {item.title}
+                </a>
+              </li>
+            ))}
+          </div>
+        ))}
+      </ul>
+    </div>
+  );
+};
+export default User;

package/src/components/nav-top/components/user-own-menu/index.scss

@@ -0,0 +1,63 @@
+.tita-ui-nav-top-user-own-menu {
+  &__popup-right-top {
+    &-enter {
+      opacity: 0;
+      animation-duration: 0.2s;
+      animation-fill-mode: both;
+      animation-timing-function: linear;
+      animation-play-state: paused;
+      &-active {
+        animation-name: titaPopupInRT;
+        animation-play-state: running;
+      }
+    }
+    &-appear {
+      opacity: 0;
+      animation-duration: 0.2s;
+      animation-fill-mode: both;
+      animation-timing-function: linear;
+      animation-play-state: paused;
+      &-active {
+        animation-name: titaPopupInRT;
+        animation-play-state: running;
+      }
+    }
+    &-leave {
+      animation-duration: 0.1s;
+      animation-fill-mode: both;
+      animation-timing-function: linear;
+      animation-play-state: paused;
+      &-active {
+        animation-name: titaPopupOutRT;
+        animation-play-state: running;
+      }
+    }
+  }
+}
+@keyframes titaPopupInRT {
+  0% {
+    opacity: 0;
+    transform-origin: 100% 0%;
+    transform: scale(0, 0);
+  }
+
+  100% {
+    opacity: 1;
+    transform-origin: 100% 0%;
+    transform: scale(1, 1);
+  }
+}
+
+@keyframes titaPopupOutRT {
+  0% {
+    opacity: 1;
+    transform-origin: 100% 0%;
+    transform: scale(1, 1);
+  }
+
+  100% {
+    opacity: 0;
+    transform-origin: 100% 0%;
+    transform: scale(0, 0);
+  }
+}

package/src/components/nav-top/components/user-own-menu/index.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import classNames from 'classnames';
+import Popup from '../../../popup';
+import Avatar from '../../../../components/avatar';
+import { getUserInfo } from '../../../../utils/bs-global';
+import OwnMenu from './components/own-menu';
+import { popupAlignPhoto } from '../../constant';
+import './index.scss';
+
+const { Id, Name, UserAvatar } = getUserInfo();
+
+const preCls = 'tita-ui-nav-top-user-own-menu';
+
+const UserOwnMenu = () => {
+  return (
+    <Popup
+      popup={<OwnMenu />}
+      popupAlign={popupAlignPhoto}
+      popupTransitionName={classNames(`${preCls}__popup-right-top`)}
+      destroyPopupOnHide={false}
+    >
+      <Avatar
+        userId={Id}
+        name={Name}
+        color={UserAvatar.Color}
+        src={UserAvatar.Medium}
+      />
+    </Popup>
+  );
+};
+export default UserOwnMenu;

package/src/components/nav-top/components/user-own-menu/utils.ts

@@ -0,0 +1,63 @@
+import { getUserInfo, getBSGlobal } from "../../../../utils/bs-global";
+import { IOwnSetType } from "../../interface";
+
+const userId = getUserInfo().Id;
+const apiServer = getBSGlobal("apiPath");
+const tm = getBSGlobal("tm");
+
+const isTestCompanyManageRule = /gift/g.test(apiServer);
+
+export const getOwnSet = () => {
+  const ownhandle = [
+    {
+      id: "ownHome",
+      url: "tu-icon-myhome",
+      title: "个人信息",
+      objUrl: `${apiServer}/u/${userId}/Home/#user-info`,
+    },
+    {
+      id: "ownSet",
+      url: "tu-icon-APP-shezhi",
+      title: "个人设置",
+      objUrl: `${apiServer}/u/${userId}/Home/#setting`,
+    },
+  ];
+
+  const limit = [
+    {
+      id: "manage",
+      url: "tu-icon-myqyht",
+      title: "企业管理后台",
+      objUrl: `${tm}`,
+    },
+    {
+      id: "open",
+      url: "tu-icon-my-gjgn",
+      title: "开启高级设置",
+      objUrl: `${tm}${tm.indexOf(`${userId}/TmHome`) != -1 ?'':`/${userId}/TmHome`}#?iTalentFrameType=iframe&iTalentFrame=${tm.indexOf(`${userId}/TmHome`) != -1 ?`${tm.replace(`/TmHome`,'')}`:`${tm}/${userId}`}/indexV2#/advancedSettings`,
+    },
+    {
+      id: "role",
+      url: "tu-icon-gongsi",
+      title: "企业管理规定",
+      objUrl: `${apiServer}/u/${userId}/Home#/enterprise/manage`,
+    },
+  ];
+
+  const exit = [
+    {
+      id: "Logout",
+      url: "tu-icon-tuichu",
+      title: "退出登录",
+      objUrl: `${apiServer}/Account/Logout`,
+    },
+  ];
+  let newOwnSet: IOwnSetType[] = [];
+  newOwnSet.push(ownhandle);
+  const role = getUserInfo().Role;
+  if (role === 2 || role === 4) {
+    newOwnSet.push(limit);
+  }
+  newOwnSet.push(exit);
+  return newOwnSet;
+};

package/src/components/nav-top/components/version/index.scss

@@ -0,0 +1,22 @@
+.titaui-nav-top-version {
+  &__version-info {
+    width: 120px;
+    height: 24px;
+    background: url("../../images/version.png") no-repeat;
+    background-size: 120px 24px;
+    margin-right: 20px;
+    font-size: 12px;
+    font-weight: 600;
+    color: #875502;
+    line-height: 18px;
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    &-name {
+      margin-left: 8px;
+    }
+    &-countdown {
+      margin-left: 16px;
+    }
+  }
+}

package/src/components/nav-top/components/version/index.tsx

@@ -0,0 +1,35 @@
+import React, { FC, useRef } from "react";
+import { getBSGlobal } from "../../../../utils/bs-global";
+import VersionChangeModal from "../../../version-change-modal";
+import { Versions } from "../../../version-change-modal/constant";
+import { versionTextMap } from "../../constant";
+import "./index.scss";
+
+const prefix = "titaui-nav-top-version";
+
+const Version: FC = () => {
+  const versionInfo = getBSGlobal("tenantAuthentication");
+
+  const versionChangeModalRef = useRef<any>();
+
+  const handleShowVersionSelector = () => {
+    versionChangeModalRef.current && versionChangeModalRef.current.onShow();
+  };
+
+  return (
+    <div className={prefix}>
+      <div
+        className={`${prefix}__version-info`}
+        onClick={handleShowVersionSelector}
+      >
+        <span className={`${prefix}__version-info-name`}>{versionTextMap[versionInfo.MenuVersion || Versions.Flagship]}</span>
+        <span className={`${prefix}__version-info-countdown`}>剩余{versionInfo.Day}天</span>
+      </div>
+      <VersionChangeModal
+        ref={versionChangeModalRef}
+      />
+    </div>
+  );
+};
+
+export default Version;

package/src/components/nav-top/constant.ts

@@ -0,0 +1,20 @@
+import { getUserInfo, getBSGlobal } from "../../utils/bs-global";
+
+import { Versions } from "../version-change-modal/constant";
+
+export const userId = getUserInfo().Id;
+export const apiServer = getBSGlobal("apiPath");
+export const tm = getBSGlobal("tm");
+
+export const popupAlignPhoto = {
+  offset: [4, 3],
+  overflow: { adjustX: true, adjustY: true },
+  targetOffset: [0, 0],
+};
+
+export const versionTextMap = {
+  [Versions.Standard]: "项目版",
+  [Versions.WeixinAssess]: "绩效版",
+  [Versions.Professional]: "OKR版",
+  [Versions.Flagship]: "旗舰版",
+};