@titaui/pc 1.7.49 → 1.7.53

package/src/components/okr-detail/images/nice.svg

@@ -0,0 +1,108 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="30px" height="30px" viewBox="0 0 30 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>有见地</title>
+    <defs>
+        <path d="M11.6404987,21.4833041 C17.9523244,21.4833041 23.0690701,17.9665583 23.0690701,11.6547326 C23.0690701,5.34290692 17.9523244,0.226161206 11.6404987,0.226161206 C5.328673,0.226161206 0.21192728,5.34290692 0.21192728,11.6547326 C0.21192728,17.9665583 5.328673,21.4833041 11.6404987,21.4833041 Z" id="path-1"></path>
+        <filter x="-13.1%" y="-14.1%" width="126.2%" height="128.2%" filterUnits="objectBoundingBox" id="filter-2">
+            <feGaussianBlur stdDeviation="2" in="SourceAlpha" result="shadowBlurInner1"></feGaussianBlur>
+            <feOffset dx="0" dy="-1" in="shadowBlurInner1" result="shadowOffsetInner1"></feOffset>
+            <feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
+            <feColorMatrix values="0 0 0 0 1   0 0 0 0 0.764705882   0 0 0 0 0.0784313725  0 0 0 1 0" type="matrix" in="shadowInnerInner1" result="shadowMatrixInner1"></feColorMatrix>
+            <feGaussianBlur stdDeviation="2" in="SourceAlpha" result="shadowBlurInner2"></feGaussianBlur>
+            <feOffset dx="0" dy="2" in="shadowBlurInner2" result="shadowOffsetInner2"></feOffset>
+            <feComposite in="shadowOffsetInner2" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner2"></feComposite>
+            <feColorMatrix values="0 0 0 0 1   0 0 0 0 0.949019608   0 0 0 0 0.929411765  0 0 0 1 0" type="matrix" in="shadowInnerInner2" result="shadowMatrixInner2"></feColorMatrix>
+            <feMerge>
+                <feMergeNode in="shadowMatrixInner1"></feMergeNode>
+                <feMergeNode in="shadowMatrixInner2"></feMergeNode>
+            </feMerge>
+        </filter>
+        <linearGradient x1="105.685464%" y1="44.9653507%" x2="0%" y2="56.3969685%" id="linearGradient-3">
+            <stop stop-color="#5B0B01" offset="0%"></stop>
+            <stop stop-color="#920808" offset="100%"></stop>
+        </linearGradient>
+        <filter x="-166.7%" y="-83.3%" width="433.3%" height="266.7%" filterUnits="objectBoundingBox" id="filter-4">
+            <feGaussianBlur stdDeviation="2.66666667" in="SourceGraphic"></feGaussianBlur>
+        </filter>
+        <path d="M5.21136772,6.60932114 C6.53685112,6.60932114 7.61136772,4.96703425 7.61136772,2.94117071 C7.61136772,0.915307168 7.44641538,0.742654475 6.12093198,0.742654475 C4.79544858,0.742654475 0.674308038,0.801107122 0.674308038,2.82697066 C0.674308038,4.85283421 3.88588432,6.60932114 5.21136772,6.60932114 Z" id="path-5"></path>
+        <filter x="-14.4%" y="-17.0%" width="128.8%" height="134.1%" filterUnits="objectBoundingBox" id="filter-7">
+            <feGaussianBlur stdDeviation="0.5" in="SourceAlpha" result="shadowBlurInner1"></feGaussianBlur>
+            <feOffset dx="0" dy="1" in="shadowBlurInner1" result="shadowOffsetInner1"></feOffset>
+            <feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
+            <feColorMatrix values="0 0 0 0 1   0 0 0 0 0.858154076   0 0 0 0 0.808508003  0 0 0 1 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
+        </filter>
+        <path d="M14.2780344,4.47598781 C15.6035178,4.47598781 16.6780344,2.83370092 16.6780344,0.807837377 C16.6780344,-1.21802617 16.513082,-1.39067886 15.1875986,-1.39067886 C13.8621152,-1.39067886 9.7409747,-1.33222621 9.7409747,0.693637331 C9.7409747,2.71950087 12.952551,4.47598781 14.2780344,4.47598781 Z" id="path-8"></path>
+        <filter x="-14.4%" y="-17.0%" width="128.8%" height="134.1%" filterUnits="objectBoundingBox" id="filter-10">
+            <feGaussianBlur stdDeviation="0.5" in="SourceAlpha" result="shadowBlurInner1"></feGaussianBlur>
+            <feOffset dx="0" dy="1" in="shadowBlurInner1" result="shadowOffsetInner1"></feOffset>
+            <feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
+            <feColorMatrix values="0 0 0 0 1   0 0 0 0 0.858154076   0 0 0 0 0.808508003  0 0 0 1 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
+        </filter>
+        <path d="M11,24.6062686 C11,22.7850906 13.8818859,21.107928 18.5486531,20.2895204 C23.2154202,19.4711127 24.5716051,19 25.4086791,19 C26.2457531,19 26.2994396,20.3738879 23.9248923,21.5737406 C24.4909466,23.0761802 24.3367871,24.6289666 22.5764417,25.1863203 C21.4028781,25.5578894 20.3592668,25.1839062 19.4456077,24.0643706 C16.3161645,25.6659013 14.3470322,26.4666667 13.5382109,26.4666667 C12.3249789,26.4666667 11,26.4274465 11,24.6062686 Z" id="path-11"></path>
+        <filter x="-10.0%" y="-20.1%" width="120.1%" height="140.2%" filterUnits="objectBoundingBox" id="filter-12">
+            <feGaussianBlur stdDeviation="1" in="SourceAlpha" result="shadowBlurInner1"></feGaussianBlur>
+            <feOffset dx="0" dy="1" in="shadowBlurInner1" result="shadowOffsetInner1"></feOffset>
+            <feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
+            <feColorMatrix values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 1 0" type="matrix" in="shadowInnerInner1" result="shadowMatrixInner1"></feColorMatrix>
+            <feGaussianBlur stdDeviation="1" in="SourceAlpha" result="shadowBlurInner2"></feGaussianBlur>
+            <feOffset dx="0" dy="-1" in="shadowBlurInner2" result="shadowOffsetInner2"></feOffset>
+            <feComposite in="shadowOffsetInner2" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner2"></feComposite>
+            <feColorMatrix values="0 0 0 0 1   0 0 0 0 0.744680851   0 0 0 0 0  0 0 0 1 0" type="matrix" in="shadowInnerInner2" result="shadowMatrixInner2"></feColorMatrix>
+            <feMerge>
+                <feMergeNode in="shadowMatrixInner1"></feMergeNode>
+                <feMergeNode in="shadowMatrixInner2"></feMergeNode>
+            </feMerge>
+        </filter>
+        <path d="M23.7738013,4.8064969 L23.3345465,6.47672005 C23.2505988,6.79592322 23.0236106,7.0582842 22.7197992,7.18726682 L21.6081145,7.65923065 C21.5538886,7.68225215 21.5285925,7.74487349 21.551614,7.79909934 C21.5636472,7.827443 21.5873421,7.84920372 21.6166054,7.85878582 L22.6306809,8.19083827 C22.9850426,8.30687172 23.2530902,8.59952539 23.3376355,8.96268938 L23.6461953,10.2881073 C23.6595526,10.3454834 23.7168933,10.3811677 23.7742694,10.3678104 C23.8132522,10.3587351 23.8438737,10.3286 23.853572,10.2897675 L24.1893653,8.9452242 C24.2776493,8.59172824 24.5402605,8.30774821 24.8857853,8.19213634 L25.8825998,7.85860422 C25.9384659,7.83991155 25.9686009,7.77946976 25.9499082,7.7236037 C25.9403062,7.69490644 25.9189669,7.67163821 25.8912057,7.65959471 L24.8668278,7.21519459 C24.5330457,7.07039178 24.2960937,6.76544184 24.2382477,6.40623134 L23.98227,4.81666808 C23.972904,4.75850701 23.9181625,4.71895084 23.8600014,4.72831689 C23.818331,4.73502735 23.7845364,4.76567767 23.7738013,4.8064969 Z" id="path-13"></path>
+        <filter x="-6.3%" y="-1.4%" width="112.8%" height="103.8%" filterUnits="objectBoundingBox" id="filter-14">
+            <feGaussianBlur stdDeviation="0.5" in="SourceAlpha" result="shadowBlurInner1"></feGaussianBlur>
+            <feOffset dx="0" dy="0" in="shadowBlurInner1" result="shadowOffsetInner1"></feOffset>
+            <feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
+            <feColorMatrix values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 1 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
+        </filter>
+    </defs>
+    <g id="OKR列表" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="任务/项目-交互说明" transform="translate(-306.000000, -373.000000)">
+            <g id="编组" transform="translate(55.000000, 359.000000)">
+                <g id="有见地" transform="translate(251.000000, 14.000000)">
+                    <g id="点赞" transform="translate(3.000000, 3.000000)">
+                        <g id="椭圆形">
+                            <use fill="#FFD048" fill-rule="evenodd" xlink:href="#path-1"></use>
+                            <use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
+                        </g>
+                        <path d="M6.35248602,17.1294291 C9.6820623,17.7272505 11.6663668,17.1752966 12.3053996,15.4735674" id="路径-43" stroke="url(#linearGradient-3)" stroke-width="0.533333333" stroke-linecap="round" transform="translate(9.328943, 16.418061) scale(-1, 1) translate(-9.328943, -16.418061) "></path>
+                        <ellipse id="眼睛" fill="#FFFFFF" filter="url(#filter-4)" transform="translate(10.933333, 8.533333) rotate(-90.000000) translate(-10.933333, -8.533333) " cx="10.9333333" cy="8.53333333" rx="2.4" ry="4.8"></ellipse>
+                    </g>
+                    <g id="眼睛" transform="translate(4.550910, 10.861968)">
+                        <mask id="mask-6" fill="white">
+                            <use xlink:href="#path-5"></use>
+                        </mask>
+                        <g id="蒙版" transform="translate(4.142838, 3.675988) rotate(-4.000000) translate(-4.142838, -3.675988) ">
+                            <use fill="#FFFFFF" fill-rule="evenodd" xlink:href="#path-5"></use>
+                            <use fill="black" fill-opacity="1" filter="url(#filter-7)" xlink:href="#path-5"></use>
+                        </g>
+                        <path d="M2.43983287,4.89761234 C3.15317132,4.89761234 4.25684865,3.66746822 4.25684865,2.19411291 C4.25684865,0.72075761 4.16807587,0.595192015 3.45473743,0.595192015 C2.74139898,0.595192015 -0.00188695128,0.673456689 -0.00188695128,2.14681199 C-0.00188695128,3.6201673 1.72649443,4.89761234 2.43983287,4.89761234 Z" fill="#5B1A01" mask="url(#mask-6)" transform="translate(2.127481, 2.746402) rotate(-4.000000) translate(-2.127481, -2.746402) "></path>
+                        <mask id="mask-9" fill="white">
+                            <use xlink:href="#path-8"></use>
+                        </mask>
+                        <g id="蒙版" transform="translate(13.209505, 1.542654) rotate(-4.000000) translate(-13.209505, -1.542654) ">
+                            <use fill="#FFFFFF" fill-rule="evenodd" xlink:href="#path-8"></use>
+                            <use fill="black" fill-opacity="1" filter="url(#filter-10)" xlink:href="#path-8"></use>
+                        </g>
+                        <path d="M11.5064995,2.76427901 C12.219838,2.76427901 13.3235153,1.53413488 13.3235153,0.0607795809 C13.3235153,-1.41257572 13.2347425,-1.53814132 12.5214041,-1.53814132 C11.8080656,-1.53814132 9.06477972,-1.45987664 9.06477972,0.0134786591 C9.06477972,1.48683396 10.7931611,2.76427901 11.5064995,2.76427901 Z" fill="#5B1A01" mask="url(#mask-9)" transform="translate(11.194148, 0.613069) rotate(-4.000000) translate(-11.194148, -0.613069) "></path>
+                    </g>
+                    <path d="M7.31902059,9.29333333 C7.04541287,7.92691732 6.5899743,7.16752998 5.95270487,7.01517131 C4.99680074,6.7866333 3.59007874,8.58218587 3.59007874,10.1821859 C4.78623589,7.31337056 6.02921651,7.01708638 7.31902059,9.29333333 Z" id="路径-25" fill="#5B1A01" transform="translate(5.454550, 8.588793) scale(-1, 1) translate(-5.454550, -8.588793) "></path>
+                    <path d="M13.6842556,9.3145553 C13.9727725,8.05250432 14.6748667,7.29487619 15.7905383,7.04167093 C16.9062099,6.78846567 18.3284321,7.49957678 20.057205,9.17500426 C18.4794466,8.09377847 17.1524214,7.61935275 16.0761293,7.75172711 C14.9998372,7.88410147 14.202546,8.4050442 13.6842556,9.3145553 Z" id="路径-37" fill="#5B1A01" transform="translate(16.870730, 8.153181) rotate(-8.000000) translate(-16.870730, -8.153181) "></path>
+                    <g id="路径-44">
+                        <use fill="#FFD048" fill-rule="evenodd" xlink:href="#path-11"></use>
+                        <use fill="black" fill-opacity="1" filter="url(#filter-12)" xlink:href="#path-11"></use>
+                    </g>
+                    <g id="路径-10" transform="translate(23.746443, 7.518721) rotate(-345.000000) translate(-23.746443, -7.518721) ">
+                        <use fill="#2879FF" fill-rule="evenodd" xlink:href="#path-13"></use>
+                        <use fill="black" fill-opacity="1" filter="url(#filter-14)" xlink:href="#path-13"></use>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/components/okr-detail/images/xialat-s.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>形状结合</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="目标推屏--OKRs" transform="translate(-689.000000, -673.000000)" fill="#A4ACB9" fill-rule="nonzero" stroke="#A4ACB9" stroke-width="0.3">
+            <g id="编组-10" transform="translate(546.000000, 74.000000)">
+                <g id="编组-4" transform="translate(151.000000, 607.000000) scale(1, -1) rotate(-360.000000) translate(-151.000000, -607.000000) translate(143.000000, 599.000000)">
+                    <path d="M7.58497473,10.8522926 L2.16051899,5.8607686 C1.94649367,5.66382542 1.94649367,5.34465057 2.16051899,5.14770739 C2.37454431,4.9507642 2.72140321,4.9507642 2.93542853,5.14770739 L7.999,9.808 L13.0645715,5.14770739 C13.2785968,4.9507642 13.6254557,4.9507642 13.839481,5.14770739 C14.0535063,5.34465058 14.0535063,5.66382542 13.839481,5.8607686 L8.41501045,10.8522926 C8.31988809,10.9398229 8.19852699,10.9884509 8.07425048,10.9981765 L7.9257347,10.9981765 C7.80145819,10.9884509 7.68009709,10.9398229 7.58497473,10.8522926 Z" id="形状结合" transform="translate(8.000000, 8.000000) rotate(-180.000000) translate(-8.000000, -8.000000) "></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/components/okr-detail/index.js

@@ -0,0 +1,286 @@
+import React, { useEffect, useState, useRef, useCallback, useContext } from "react";
+import { CommonContext, GeneralDataContext, defaultConfig } from './context';
+import classNames from "classnames";
+import OkrHeader from "./components/header";
+import Tabs, { TabPane } from "../tabs";
+import TabPanelContent from './components/tab-panel-content';
+import BaseInfo from './base-info';
+import Schedule from './schedule';
+import { getOkrDetail } from './request-apis';
+import Review from '../okr-review';
+import EReportList from '../eReport/eReportLists/reportList';
+import OkrDetailCooperation from './cooperation';
+import OkrDetailBottomComment from './detail-footer';
+import EList from "./e-list";
+import OkrList from "./okr-list";
+import OkrDetailHeader from "./detail-header";
+import DrawerManagerContext from "../drawer-manager/context";
+import OkrDetailErrorPage from './error-page'
+import Loading from './loading';
+import AoNice from './components/ao-nice';
+
+import "./index.scss";
+const preCls = "okr-detail";
+//E周报和复盘开关
+const EWorkReport = BSGlobal.OkrAdvancedSetting ? BSGlobal.OkrAdvancedSetting.KRSetting.EWorkReport :false
+const OkrAnalyse = BSGlobal.OkrAdvancedSetting ?  BSGlobal.OkrAdvancedSetting.KRSetting.OkrAnalyse :false
+const source = window.BSGlobal.tenantInfo.Source
+
+const OkrDetail = props => {
+  const {
+    okrId  
+  } = props;
+
+  const [loading, setLoading] = useState(true);
+  const [okrInfo, setOkrInfo] = useState({});
+  const [activeTabKey, setActiveTabKey] = useState(props.activeTabKey || 'okr');
+  const drawerManagerContext = useContext(DrawerManagerContext);
+  const [errorMsg, setErrorMsg] = useState('')
+
+  const changeTabActive = key => {
+    if (!`okr,exec,progress,cooperation,eReport,review,baseInfo`.match(key)) {
+      return console.log('未找到对应的tab页签: ' + key);
+    }
+    drawerManagerContext && drawerManagerContext.saveProps({ activeTabKey: key })
+    setActiveTabKey(key);
+    if (key == 'cooperation') {
+      bottomReply.current.show(undefined, false);
+    } else {
+      bottomReply.current.hide();
+    }
+  }
+
+  useEffect(() => {
+    setActiveTabKey(props.activeTabKey);
+  }, [props.activeTabKey]);
+
+  const [generalPrincipalUser, setGeneralPrincipalUser] = useState({}); // 负责人
+  const [generalOkrClassify, setGeneralOkrClassify] = useState(); // 类别
+  const [generalVisibility, setGeneralVisibility] = useState(); // 可见范围
+  const [generalOkrType, setGeneralOkrType] = useState(); //目标类型
+  const [showOkrEvalute, setShowOkrEvalute] = useState(false);
+  const [generalCycle, setGeneralCycle] = useState(); // 目标周期
+  const [generalParent, setGeneralParent] = useState(); // 对齐目标
+  const [generalRoleType, setGeneralRoleType] = useState();
+
+  // 计算元素的ref，用于实现 tabs 吸顶，点赞吸底
+  const tabRef = useRef();
+  const tabsContnetRef = useRef();
+  const bodyRef = useRef();
+
+  const bottomReply = useRef();
+  const communicationRef = useRef();
+
+  const okrListRef = useRef();
+
+  const onAfterReply = useCallback(() => {
+    communicationRef && communicationRef.current && communicationRef.current.refresh();
+    setActiveTabKey('cooperation');
+  }, []);
+
+  const getData = () => {
+    getOkrDetail({ okrId }).then(detailInfo => {
+      setOkrInfo(detailInfo);
+      setLoading(false);
+    }).catch(e => {
+      setErrorMsg(e)
+      console.error(e)
+    });
+  }
+
+  const refreshAll = () => {
+    getData();
+  }
+
+  useEffect(() => {
+    setLoading(true);
+    getData();
+  }, [])
+
+  useEffect(() => {
+    if (!okrInfo || !okrInfo.workId) return;
+    setGeneralPrincipalUser(okrInfo.principalUser); // 负责人
+    setGeneralOkrClassify(okrInfo.okrClassify); // 类别：承诺｜愿景
+    setGeneralVisibility({
+      'visibility': okrInfo.visibility,
+      'visibilityScope': okrInfo.visibilityScope
+    })
+    let roleType = 0;
+    if (okrInfo.principalUser.userId == window.BSGlobal.loginUserInfo.Id) {
+      roleType = 1
+    } else if (okrInfo.authority.roleRelation) {
+      roleType = okrInfo.authority.roleRelation.roleType
+    }
+    setGeneralRoleType(roleType)
+    setGeneralOkrType({
+      'okrType': okrInfo.okrType,
+      'departmentId': okrInfo.departmentId,
+      'departmentName': okrInfo.departmentName,
+      'groupId': okrInfo.groupId,
+      'groupName': okrInfo.groupName
+    })
+    setGeneralCycle({
+      'cycleType': okrInfo.cycleType,
+      'annualNum': okrInfo.annualNum,
+      'yqmNum': okrInfo.yqmnum, // 默认当前季度
+      'startDate': okrInfo.startDate,
+      'endDate': okrInfo.endDate,
+    })
+    // setGeneralParent({
+    //   'parentId': okrInfo.parentKrId || okrInfo.parentId,
+    //   'parentType': okrInfo.parentKrId ? 2 : 1, // 1:目标， 2: kr
+    //   'parentOkr': okrInfo.parentOkr,
+    //   'parentKr': okrInfo.parentKr
+    // })
+  }, [okrInfo]);
+
+  const onScrollHandler = () => {
+    // tabs 粘顶
+    let tabsNav = tabsContnetRef.current.querySelector('.rc-tabs-nav');
+    if (bodyRef.current.scrollTop > 98) tabsNav.classList.add('okr-tabs-fixed-top');
+    else tabsNav.classList.remove('okr-tabs-fixed-top');
+  }
+
+  const handleContainerMouseDown = useCallback(() => {
+    if (activeTabKey == 'cooperation') return;
+    bottomReply && bottomReply.current && bottomReply.current.hide();
+  }, [activeTabKey])
+
+  const refreshKrs = () => {
+    const active = activeTabKey || 'okr';
+    if (active == 'okr') {
+      okrListRef.current && okrListRef.current.updateKrs()
+    }
+  }
+  if (errorMsg) return <OkrDetailErrorPage message={errorMsg} />;
+
+  return (
+    <CommonContext.Provider
+      value={{
+        ...defaultConfig,
+        okrInfo,
+        changeTabActive,
+        refreshAll,
+        setOkrInfo,
+        refreshKrs,
+      }}
+    >
+      <GeneralDataContext.Provider
+        value={{
+          generalPrincipalUser,
+          setGeneralPrincipalUser,
+          generalOkrClassify,
+          setGeneralOkrClassify,
+          generalVisibility,
+          setGeneralVisibility,
+          generalOkrType,
+          setGeneralOkrType,
+          generalRoleType,
+          setGeneralRoleType,
+          generalCycle,
+          setGeneralCycle,
+          generalParent,
+          setGeneralParent,
+          showOkrEvalute,
+          setShowOkrEvalute
+        }}>
+        <div className={classNames(preCls)} onMouseDown={handleContainerMouseDown}>
+          {!loading ? (
+            <React.Fragment>
+              <OkrDetailHeader detailInfo={okrInfo} />
+              <div className={classNames(`${preCls}__body`)} onScroll={onScrollHandler} ref={bodyRef}>
+                <OkrHeader okrInfo={okrInfo} />
+                <div className={classNames(`${preCls}__tabs-content`)} ref={tabsContnetRef}>
+                  <div ref={tabRef}>
+                    <Tabs
+                      size={"big"}
+                      destroyInactiveTabPane
+                      activeKey={activeTabKey}
+                      onChange={changeTabActive}
+                      tabBarStyle={{
+                        'boxShadow': "0px 0px 24px 0px rgba(127, 145, 180, 0.2)",
+                      }}
+                    >
+                      <TabPane tab="OKRs" key="okr">
+                        <TabPanelContent style={{ 'paddingTop': 5 }}>
+                          <OkrList okrId={okrId} okrInfo={okrInfo} ref={okrListRef} />
+                        </TabPanelContent>
+                      </TabPane>
+
+                      <TabPane tab="E-执行" key="exec" >
+                        <TabPanelContent style={{ 'paddingTop': 10 }}>
+                          <EList okrId={okrId} okrInfo={okrInfo} />
+                        </TabPanelContent>
+                      </TabPane>
+
+                      <TabPane tab="进展" key="progress">
+                        <TabPanelContent style={{ 'paddingTop': 0 }}>
+                          <Schedule okrInfo={okrInfo} />
+                        </TabPanelContent>
+                      </TabPane>
+
+                      <TabPane tab="互动" key="cooperation">
+                        <TabPanelContent style={{ 'marginRight': 32, 'marginLeft': 32 }}>
+                          <OkrDetailCooperation
+                            feedId={okrInfo.feedId}
+                            defaultOperationRecordNum={4}
+                            onComment={(...args) => bottomReply.current.show(...args)}
+                            communicationRef={communicationRef}
+                          />
+                        </TabPanelContent>
+                      </TabPane>
+
+                      {EWorkReport && source != 861 &&
+                      <TabPane tab="E周报" key="eReport">
+                        <TabPanelContent style={{ 'marginRight': 32, 'marginLeft': 32 }}>
+                          <EReportList
+                            okrId={okrInfo.workId}
+                            okrName={okrInfo.workName}
+                            isVisible={okrInfo.visibility}
+                          />
+                        </TabPanelContent>
+                      </TabPane>}
+
+                      {OkrAnalyse&&
+                      <TabPane tab="复盘" key="review">
+                        <TabPanelContent style={{ 'marginRight': 32, 'marginLeft': 32 }}>
+                          <Review
+                            editAble
+                            feedId={okrInfo.feedId}
+                            ObjData={{
+                              'ObjId': okrInfo.workId,
+                              'ObjName': okrInfo.workName,
+                              'ObjType': 62,
+                              'ObjIndex': 0
+                            }}
+                            defaultRange={{
+                              'startDate': okrInfo.startDate,
+                              'endDate': okrInfo.endDate
+                            }}
+                          />
+                        </TabPanelContent>
+                      </TabPane>}
+
+                      <TabPane tab="基本信息" key="baseInfo">
+                        <TabPanelContent style={{ 'paddingTop': 8 }}>
+                          <BaseInfo okrId={okrId} detailInfo={okrInfo} />
+                        </TabPanelContent>
+                      </TabPane>
+                    </Tabs>
+                  </div>
+                  <AoNice
+                    activeTab={activeTabKey}
+                    okrInfo={okrInfo}
+                  />
+                </div>
+              </div>
+              <OkrDetailBottomComment feedId={okrInfo.feedId} ref={bottomReply} onAfterSubmit={onAfterReply} isFocusReply={props.activeTabKey==="cooperation"} />
+            </React.Fragment>
+          ) : <Loading type="zone" />}
+        </div>
+      </GeneralDataContext.Provider>
+    </CommonContext.Provider>
+  );
+};
+
+export default OkrDetail

package/src/components/okr-detail/index.scss

@@ -0,0 +1,66 @@
+.okr-detail {
+  width: 100%;
+  overflow: hidden;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  background-color: #FFF;
+  .scheule__wrapper {
+    padding-top: 20px;
+  }
+
+  .rc-tabs-nav {
+    z-index: 99;
+  }
+
+  // 用于tabs页签吸顶，position会使高度降低，导致抖动
+  .rc-tabs {
+    padding-top: 30px;
+    position: relative;
+    box-sizing: border-box;
+    .rc-tabs-nav {
+      position: absolute;
+      top: 0;
+      width: 100%;
+    }
+  }
+  // tabs页签吸顶
+  .rc-tabs-nav.okr-tabs-fixed-top {
+    background-color: white;
+    z-index: 11;
+    top: 55px;
+    width: 100%;
+    position: fixed;
+    &::before {
+      content: "";
+      display: inline-block;
+      position: absolute;
+      top: -16px;
+      height: 20px;
+      z-index: 99;
+      width: 100%;
+      height: 20px;
+      background-color: white;
+    }
+  }
+
+  .rc-tabs-nav-wrap {
+    padding: 0 20px;
+  }
+  &__body {
+    flex: 1;
+    height: 0;
+    display: flex;
+    flex-direction: column;
+    overflow-y: auto;
+  }
+  &__tabs-content {
+    box-sizing: border-box;
+    flex: 1;
+    height: 0;
+
+    .titaui-tabs {
+      width: 100%;
+    }
+  }
+}

package/src/components/okr-detail/interface.ts

@@ -0,0 +1,5 @@
+export interface WorkDeliverParams {
+  email: string;
+  to_user_id: number;
+  work_id: number;
+}

package/src/components/okr-detail/loading/index.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import classNames from 'classnames';
+import './index.scss';
+
+const preCls = "okr-detail__loading";
+
+export default props => {
+  const { type = 'zone' } = props;
+  return <div className={classNames(preCls)}>
+    {type == 'zone' && <div className={classNames(`${preCls}-zone`)}></div>}
+    {type == 'panel' && <div className={classNames(`${preCls}-panel`)}></div>}
+  </div>
+}

package/src/components/okr-detail/loading/index.scss

@@ -0,0 +1,15 @@
+.okr-detail__loading {
+  width: 100%;
+  height: 100%;
+
+  &-zone {
+    width: 100%;
+    height: 100%;
+    background: url(../images/struc12.png) transparent no-repeat left top;
+  }
+  &-panel {
+    width: 100%;
+    height: 500px;
+    background: url(../images/struc2.png) transparent no-repeat left top;
+  }
+}

package/src/components/okr-detail/okr-list/add-parent-okr.js

@@ -0,0 +1,15 @@
+import React, { useEffect, useState, useRef } from 'react';
+import classNames from 'classnames';
+import './index.scss';
+
+const preCls = 'okr-detail-okrs-list'
+
+export default props => {
+  const { onClick = () => {} } = props;
+  return <React.Fragment>
+    <div className={classNames(`${preCls}__align-to-add`)} onClick={onClick}>
+      <span className={classNames(`${preCls}__align-to-add-prefix`, 'tu-icon-add1')} />
+      <span className={classNames(`${preCls}__align-to-add-text`)}>添加</span>
+    </div>
+  </React.Fragment>
+}

package/src/components/okr-detail/okr-list/create-kr-item/dom.ts

@@ -0,0 +1,18 @@
+export function hasAncestorElement(node, className) {
+  if (!node) return false
+  if (is(node, className)) return true;
+  return hasAncestorElement(node.parentNode, className);
+}
+
+export function is(node, className) {
+  if (!className || !node) return false;
+  const classNameMap = {};
+  className.split(',').forEach(clss => classNameMap[clss] = true);
+  if (!node.className || typeof node.className != 'string') return false;
+  for (let clss of node.className.split(/\s+/)) {
+    if (classNameMap[clss]) {
+      return true
+    }
+  }
+  return false
+}

package/src/components/okr-detail/okr-list/create-kr-item/heart-icon.svg

@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="15px" viewBox="0 0 16 15" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>信心指数</title>
+    <defs>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
+            <stop stop-color="#FFBC00" offset="0%"></stop>
+            <stop stop-color="#FFCE22" offset="100%"></stop>
+        </linearGradient>
+        <path d="M9.05954286,1.14796154 C8.6024,1.36603846 8.1784,1.66603846 7.81725714,2.02488462 C7.45725714,1.66603846 7.03325714,1.36603846 6.57497143,1.14796154 C5.98411429,0.865269231 5.3304,0.716423077 4.68582857,0.716423077 C3.54525714,0.716423077 2.48811429,1.15142308 1.70754286,1.94180769 C0.925828571,2.73219231 0.497257143,3.80180769 0.497257143,4.95565385 C0.497257143,7.75719231 2.85382857,9.93334615 6.42068571,13.2287308 L6.56468571,13.3614231 L7.81725714,14.4979615 L8.06297143,14.2752692 L9.06868571,13.3637308 L9.21382857,13.2287308 C12.7818286,9.93334615 15.1395429,7.75719231 15.1395429,4.95565385 C15.1395429,3.80180769 14.7086857,2.73219231 13.9281143,1.94180769 C13.1475429,1.15142308 12.0904,0.716423077 10.9498286,0.716423077 C10.3052571,0.716423077 9.65154286,0.865269231 9.05954286,1.14796154 Z" id="path-2"></path>
+        <filter x="-6.8%" y="-7.3%" width="113.7%" height="114.5%" filterUnits="objectBoundingBox" id="filter-3">
+            <feGaussianBlur stdDeviation="1" in="SourceAlpha" result="shadowBlurInner1"></feGaussianBlur>
+            <feOffset dx="0" dy="0" in="shadowBlurInner1" result="shadowOffsetInner1"></feOffset>
+            <feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
+            <feColorMatrix values="0 0 0 0 1   0 0 0 0 0.550043706   0 0 0 0 0  0 0 0 1 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
+        </filter>
+        <linearGradient x1="89.6060735%" y1="21.3707973%" x2="22.6890015%" y2="67.4962687%" id="linearGradient-4">
+            <stop stop-color="#FBF4CC" stop-opacity="0.3" offset="0%"></stop>
+            <stop stop-color="#FFEFDD" stop-opacity="0" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="OKR列表" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="任务展示" transform="translate(-1129.000000, -614.000000)">
+            <g id="编组-5" transform="translate(361.000000, 276.000000)">
+                <g id="编组-12" transform="translate(48.000000, 331.000000)">
+                    <g id="信心值" transform="translate(716.000000, 0.000000)">
+                        <g id="信心指数" transform="translate(4.000000, 7.000000)">
+                            <g id="Fill-5">
+                                <use fill="url(#linearGradient-1)" fill-rule="evenodd" xlink:href="#path-2"></use>
+                                <use fill="black" fill-opacity="1" filter="url(#filter-3)" xlink:href="#path-2"></use>
+                            </g>
+                            <path d="M3.81257143,4.55769231 C4.38057143,4.72961538 5.008,4.82538462 5.66742857,4.82538462 C7.48685714,4.82538462 9.064,4.09846154 9.83428571,3.03692308 C9.97371429,2.84653846 10.1908571,2.73 10.4251429,2.73 C11.24,2.73 12.0034286,3.04846154 12.5771429,3.62769231 C13.1234286,4.18038462 13.4388571,4.91423077 13.4651429,5.69307692 C13.4902857,6.46961538 13.2285714,7.21846154 12.7268571,7.80230769 C12.7268571,7.80230769 12.7177143,7.81269231 12.7165714,7.81384615 L8.28114286,12.2930769 C8.02628571,12.5492308 7.616,12.5492308 7.36228571,12.2930769 L2.912,7.8 L2.89485714,7.78038462 C2.42742857,7.23 2.168,6.525 2.168,5.79692308 C2.168,5.78769231 2.168,5.77961538 2.16914286,5.77153846 C2.176,4.91307692 2.99885714,4.31076923 3.81257143,4.55769231 Z" id="Fill-9" fill="url(#linearGradient-4)"></path>
+                            <path d="M5.29908571,1.94907692 C4.44194286,1.94907692 3.63622857,2.286 3.03051429,2.89753846 C2.46137143,3.47215385 2.1288,4.23484615 2.09337143,5.04484615 C2.08422857,5.24446154 2.23737143,5.41176923 2.43508571,5.421 L2.44994286,5.421 C2.6408,5.421 2.79851429,5.26984615 2.80651429,5.07715385 C2.83394286,4.44715385 3.09222857,3.85407692 3.53565714,3.40753846 C4.01108571,2.92753846 4.64422857,2.66561538 5.31851429,2.67023077 L5.32194286,2.67023077 C5.51737143,2.67023077 5.67737143,2.511 5.67966327,2.31253846 C5.6808,2.11407692 5.52194286,1.95138462 5.32422857,1.94907692 C5.31622857,1.94907692 5.30708571,1.94907692 5.29908571,1.94907692" id="Fill-11" fill="#FFD675"></path>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/components/okr-detail/okr-list/create-kr-item/heart.js

@@ -0,0 +1,17 @@
+import React, { useState, useRef, useContext } from 'react';
+import ImageHeart from './heart-icon.svg';
+import { Image } from './style';
+
+export default ({ heartOnActive, setHeartOnActive, confidenceIndex, editAble }) => {
+  return (
+    <div
+      className={`kr-heart-wrapper ${editAble ? 'hover' : ''} ${
+        heartOnActive && editAble ? 'active' : ''
+      }`}
+      onClick={() => setHeartOnActive(true)}
+    >
+      <Image className='kr-heart-icon' src={ImageHeart} />
+      <span className='kr-heart-middle'>{confidenceIndex} 分</span>
+    </div>
+  );
+};