@titaui/pc 1.9.49 → 1.9.50

package/src/components/okr-review/ReviewPop/components/Toast/index.tsx

@@ -1,5 +1,5 @@
-import React, { PureComponent } from "react";
-import { ToastContainer } from "./style";
+import React, { PureComponent } from 'react'
+import {ToastContainer} from './style'
 
 interface Props {
   className?: string
@@ -7,11 +7,11 @@ interface Props {
 
 export default class Toast extends PureComponent<Props> {
   render() {
-    const { className, children } = this.props;
+    const {className, children} = this.props
     return (
       <ToastContainer className={className}>
         {children}
       </ToastContainer>
-    );
+    )
   }
 }

package/src/components/okr-review/ReviewPop/components/Toast/style.ts

@@ -1,4 +1,4 @@
-import styled from "styled-components";
+import styled from 'styled-components'
 
 export const ToastContainer = styled.div`
   /* min-width: 145px; */
@@ -39,4 +39,4 @@ export const ToastContainer = styled.div`
     width: max-content;
     text-align: center;
   }
-`;
+`

package/src/components/okr-review/ReviewPop/index.tsx

@@ -1,13 +1,12 @@
-import React, { PureComponent } from "react";
-import ReviewBody, { ReviewDataObject, DrawbackObject } from "./components/ReviewBody";
-import Toast from "./components/Toast";
-import { ObjDataObject } from "../index";
-import { getApiUrl, taker } from "../../../utils/request-v1";
-import { htmlEncodeByRegExp, htmlDecodeByRegExp } from "../../../utils/mblog";
-import { getLocale } from "../../../utils/getLocale";
-import {
-  ReviewPopWrapper, ReviewContainer, ReviewHead, ReviewFoot, IconClose, BtnGroup, BtnCancle, BtnConfirm,
-} from "./style";
+import React, { PureComponent } from 'react';
+import ReviewBody from './components/ReviewBody';
+import Toast from './components/Toast';
+import { ReviewDataObject, DrawbackObject } from './components/ReviewBody';
+import { ObjDataObject } from '../index';
+import { getApiUrl, taker } from '../../../utils/request-v1';
+import { htmlEncodeByRegExp, htmlDecodeByRegExp } from '../../../utils/mblog';
+import { getLocale } from '../../../utils/getLocale';
+import { ReviewPopWrapper, ReviewContainer, ReviewHead, ReviewFoot, IconClose, BtnGroup, BtnCancle, BtnConfirm } from './style';
 
 interface Props {
   className?: string;
@@ -35,23 +34,19 @@ export default class ReviewPop extends PureComponent<Props, State> {
       isAllowSubmit: false,
       isShowToast: false,
       isMissDrawBack: false,
-      toastIcon: "",
-      toastInfo: "",
-      submitType: "",
+      toastIcon: '',
+      toastInfo: '',
+      submitType: '',
       submitStatus: 0,
     };
   }
-
   timer: any;
-
   reviewData: ReviewDataObject;
-
   localStorageKey: string;
 
   componentDidMount() {
     this.localStorageKey = `ReviewData_${this.props.ObjData.ObjId}`;
   }
-
   /**
    *可提交的条件：
    * 1.“价值与收获”与“问题与不足”必须至少填一项，否则确定按钮置灰；
@@ -61,8 +56,8 @@ export default class ReviewPop extends PureComponent<Props, State> {
    * @memberof ReviewPop
    */
   _handlerEditChange = (data: ReviewDataObject) => {
-    let { isAllowSubmit } = this.state;
-    const { isStandardMode } = data;
+    let isAllowSubmit = this.state.isAllowSubmit;
+    let isStandardMode = data.isStandardMode;
     // 允许提交的条件
     if (isStandardMode) {
       // 标准模式
@@ -70,9 +65,9 @@ export default class ReviewPop extends PureComponent<Props, State> {
     } else {
       // 高级模式
       // 是否填写问题与不足
-      const isHasDrawBack = data.drawbackList.some((item: DrawbackObject) => this.characterCheck(item.drawback, 5000));
+      let isHasDrawBack = data.drawbackList.some((item: DrawbackObject) => this.characterCheck(item.drawback, 5000));
       // 问题与不足字数是否超出限制
-      const isDrawbackBeyondLimit = data.drawbackList.some((item: DrawbackObject) => item.cause.length > 5000 || item.measures.length > 5000 || item.drawback.length > 5000);
+      let isDrawbackBeyondLimit = data.drawbackList.some((item: DrawbackObject) => item.cause.length > 5000 || item.measures.length > 5000 || item.drawback.length > 5000);
       isAllowSubmit = (this.characterCheck(data.gains, 5000) || isHasDrawBack) && data.gains.length <= 5000 && !isDrawbackBeyondLimit;
     }
     this.setState({ isAllowSubmit });
@@ -85,8 +80,8 @@ export default class ReviewPop extends PureComponent<Props, State> {
   // 提交数据
   _handlerSubmit = () => {
     const { EditType } = this.props;
-    const data = { ...this.reviewData };
-    const drawbackId = data.drawbackList.length > 0 ? data.drawbackList[0].drawbackId : 0;
+    let data = { ...this.reviewData };
+    let drawbackId = data.drawbackList.length > 0 ? data.drawbackList[0].drawbackId : 0;
     data.objId = String(data.objId);
     data.gains = htmlEncodeByRegExp(htmlDecodeByRegExp(data.gains));
     if (data.isStandardMode) {
@@ -95,27 +90,25 @@ export default class ReviewPop extends PureComponent<Props, State> {
         {
           drawbackId,
           drawback: htmlEncodeByRegExp(htmlDecodeByRegExp(data.Drawback)),
-          cause: "",
-          measures: "",
+          cause: '',
+          measures: '',
         },
       ];
     } else {
       // 高级模式
       // 问题与不足中只填写了除了问题之外的属性
-      const missDrawbackList = data.drawbackList.map((item: DrawbackObject, index: number) => ((item.cause.trim().length > 0 || item.measures.trim().length > 0) && item.drawback.trim().length <= 0 ? `“问题总结${index + 1}”` : ""));
-      const toastInfo = missDrawbackList.filter((item: string) => item).join(" ");
-      const toastTips = `请完善${toastInfo}`;
+      let missDrawbackList = data.drawbackList.map((item: DrawbackObject, index: number) => ((item.cause.trim().length > 0 || item.measures.trim().length > 0) && item.drawback.trim().length <= 0 ? `“问题总结${index + 1}”` : ''));
+      let toastInfo = missDrawbackList.filter((item: string) => item).join(' ');
+      let toastTips = `请完善${toastInfo}`;
       if (toastInfo) {
         this.setState({ isMissDrawBack: true });
-        this.showToast("Submit", 2, toastTips, 3000);
+        this.showToast('Submit', 2, toastTips, 3000);
         return;
       }
       this.setState({ isMissDrawBack: false });
       // 提交时过滤掉未填写的问题
-      const drawbackList = data.drawbackList.filter((item: DrawbackObject) => item.drawback || item.cause || item.measures);
-      data.drawbackList = drawbackList.length === 0 ? [{
-        drawbackId, drawback: "", cause: "", measures: "",
-      }] : drawbackList;
+      let drawbackList = data.drawbackList.filter((item: DrawbackObject) => item.drawback || item.cause || item.measures);
+      data.drawbackList = drawbackList.length === 0 ? [{ drawbackId: drawbackId, drawback: '', cause: '', measures: '' }] : drawbackList;
       data.drawbackList.forEach((item: DrawbackObject) => {
         item.drawback = htmlEncodeByRegExp(htmlDecodeByRegExp(item.drawback));
         item.cause = htmlEncodeByRegExp(htmlDecodeByRegExp(item.cause));
@@ -127,13 +120,13 @@ export default class ReviewPop extends PureComponent<Props, State> {
     delete data.reviewParticipantsList;
     delete data.reviewDepartmentsList;
     delete data.taskList;
-    const url = getApiUrl(`replay/${EditType === 0 ? "add" : "update"}`);
-    taker(url, "POST", data).then((res) => {
+    let url = getApiUrl(`replay/${EditType === 0 ? 'add' : 'update'}`);
+    taker(url, 'POST', data).then(res => {
       if (res.Code == 1) {
         localStorage.removeItem(this.localStorageKey);
-        this.showToast("Submit", 1, `${EditType === 0 ? getLocale("Pro_detail_Submission") : getLocale("OKR_MyO_Butt_Update")}成功`, 1500);
+        this.showToast('Submit', 1, `${EditType === 0 ? getLocale('Pro_detail_Submission') : getLocale('OKR_MyO_Butt_Update')}成功`, 1500);
       } else {
-        this.showToast("Submit", 0, res.Message, 3000);
+        this.showToast('Submit', 0, res.Message, 3000);
       }
     });
   };
@@ -147,10 +140,10 @@ export default class ReviewPop extends PureComponent<Props, State> {
    * @memberof ReviewPop
    */
   showToast = (submitType: string, callbackStatus: number, toastInfo: string, duration = 2000) => {
-    const toastIcon = {
-      0: "tu-icon-cross",
-      1: "tu-icon-check",
-      2: "tu-icon-warning",
+    let toastIcon = {
+      0: 'tu-icon-cross',
+      1: 'tu-icon-check',
+      2: 'tu-icon-warning',
     };
     this.setState({ submitType, submitStatus: 2 }, () => {
       this.setState(
@@ -163,7 +156,7 @@ export default class ReviewPop extends PureComponent<Props, State> {
           this.timer = setTimeout(() => {
             this.setState({ isShowToast: false, submitStatus: callbackStatus === 2 ? 0 : callbackStatus });
             if (callbackStatus === 1) {
-              this.props.onSubmit("Submit");
+              this.props.onSubmit('Submit');
             }
           }, duration);
         },
@@ -176,18 +169,14 @@ export default class ReviewPop extends PureComponent<Props, State> {
   }
 
   render() {
-    const {
-      onSubmit, ObjData, EditType, className, ReplayId, createTask, isOkrPanel,
-    } = this.props;
-    const {
-      isAllowSubmit, isShowToast, isMissDrawBack, toastIcon, toastInfo, submitType, submitStatus,
-    } = this.state;
+    const { onSubmit, ObjData, EditType, className, ReplayId, createTask, isOkrPanel } = this.props;
+    const { isAllowSubmit, isShowToast, isMissDrawBack, toastIcon, toastInfo, submitType, submitStatus } = this.state;
     return (
       <ReviewPopWrapper className={className}>
         <ReviewContainer>
           <ReviewHead>
-            <p>{`${getLocale("OKR_MyO_KRP_Review")}${ObjData.ObjType == 65 ? "KR" : getLocale("Mod_Objective")}`}</p>
-            <IconClose className="tu-icon-close" onClick={() => onSubmit()} />
+            <p>{`${getLocale('OKR_MyO_KRP_Review')}${ObjData.ObjType == 65 ? 'KR' : getLocale('Mod_Objective')}`}</p>
+            <IconClose className='tu-icon-close' onClick={() => onSubmit()}></IconClose>
           </ReviewHead>
           <ReviewBody
             ObjData={ObjData}
@@ -199,8 +188,8 @@ export default class ReviewPop extends PureComponent<Props, State> {
             onChange={(data: ReviewDataObject) => this._handlerEditChange(data)}
           />
           <ReviewFoot>
-            <BtnConfirm style={{ visibility: EditType === 0 ? "visible" : "hidden" }} onClick={() => this.showToast("SaveDraft", 1, getLocale("Pro_page_Plan_Saved"))} disabled={submitType === "SaveDraft" && submitStatus === 2}>
-              {getLocale("OKR_MyO_KRP_Pop_SaveDraft")}
+            <BtnConfirm style={{ visibility: EditType === 0 ? 'visible' : 'hidden' }} onClick={() => this.showToast('SaveDraft', 1, getLocale('Pro_page_Plan_Saved'))} disabled={submitType === 'SaveDraft' && submitStatus === 2}>
+              {getLocale('OKR_MyO_KRP_Pop_SaveDraft')}
             </BtnConfirm>
             <BtnGroup>
               <BtnCancle
@@ -209,15 +198,15 @@ export default class ReviewPop extends PureComponent<Props, State> {
                   onSubmit();
                 }}
               >
-                {getLocale("Mod_Cancel")}
+                {getLocale('Mod_Cancel')}
               </BtnCancle>
-              <BtnConfirm disabled={!isAllowSubmit || (submitType == "Submit" && submitStatus === 2)} onClick={() => this._handlerSubmit()}>
-                {getLocale("OKR_MyO_Butt_Determine")}
+              <BtnConfirm disabled={!isAllowSubmit || (submitType == 'Submit' && submitStatus === 2)} onClick={() => this._handlerSubmit()}>
+                {getLocale('OKR_MyO_Butt_Determine')}
               </BtnConfirm>
             </BtnGroup>
           </ReviewFoot>
-          <Toast className={isShowToast ? "slideIn" : ""}>
-            <span className={toastIcon} />
+          <Toast className={isShowToast ? 'slideIn' : ''}>
+            <span className={toastIcon}></span>
             <p>{toastInfo}</p>
           </Toast>
         </ReviewContainer>

package/src/components/okr-review/ReviewPop/style.ts

@@ -1,4 +1,4 @@
-import styled from "styled-components";
+import styled from 'styled-components'
 
 export const ReviewPopWrapper = styled.div`
   position: fixed;
@@ -11,7 +11,7 @@ export const ReviewPopWrapper = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
-`;
+`
 export const ReviewContainer = styled.div`
   width: 663px;
   min-height: 595px;
@@ -20,7 +20,7 @@ export const ReviewContainer = styled.div`
   box-shadow: 0 5px 20px 0 rgba(3,16,26,0.30);
   position: relative;
   /* background: #FFFFFF; */
-`;
+`
 export const ReviewHead = styled.div`
   width: calc(100% - 40px);
   height: 40px;
@@ -32,11 +32,11 @@ export const ReviewHead = styled.div`
   display: flex;
   align-items: center;
   justify-content: space-between;
-`;
+`
 export const IconClose = styled.span`
   font-size: 14px;
   cursor: pointer;
-`;
+`
 export const ReviewFoot = styled.div`
   width: calc(100% - 40px);
   height: 54px;
@@ -57,16 +57,16 @@ export const ReviewFoot = styled.div`
     box-shadow: 0 1px 2px 0 rgba(0,0,0,0.30);
     border: none;
   }
-`;
+`
 export const BtnGroup = styled.div`
   button {
     margin-left: 10px;
   }
-`;
+`
 export const BtnCancle = styled.button`
   color: #36434D;
   background: #F5F8FA;
-`;
+`
 export const BtnConfirm = styled.button`
   color: #FFFFFF;
   background: #2879FF;
@@ -76,4 +76,4 @@ export const BtnConfirm = styled.button`
     background: #F5F8FA;
     cursor: no-drop;
   }
-`;
+`

package/src/components/okr-review/common.ts

@@ -1,13 +1,13 @@
-import { getBSGlobal } from "../../utils/bs-global";
+import { getBSGlobal } from '../../utils/bs-global';
 
-const userInfo = getBSGlobal("loginUserInfo");
-export const isHavePermission = (userInfo.IsRoot && userInfo.Role != 4) || userInfo.IsBoss || userInfo.IsOkrManager;
+const userInfo = getBSGlobal('loginUserInfo');
+export const isHavePermission = (userInfo.IsRoot && userInfo.Role != 4) || userInfo.IsBoss || userInfo.IsOkrManager
 
 export const taskStatusIcon = {
-  0: "tu-icon-notstart", // 未开始
-  1: "tu-icon-running", // 进行中
-  2: "tu-icon-finished", // 已结束
-  3: "tu-icon-deferred", // 已延迟
-  4: "tu-icon-canceled", // 已取消
-  6: "tu-icon-paused", // 暂停中
-};
+  0: 'tu-icon-notstart', // 未开始
+  1: 'tu-icon-running', // 进行中
+  2: 'tu-icon-finished', // 已结束
+  3: 'tu-icon-deferred', // 已延迟
+  4: 'tu-icon-canceled', // 已取消
+  6: 'tu-icon-paused' // 暂停中
+}

package/src/components/okr-review/components/ReviewItem/index.tsx

@@ -1,10 +1,7 @@
-import React, { PureComponent } from "react";
-import {
-  ReviewItemContainer, ItemName, ItemOptions, ItemEdit, IconEdit, ItemDetail, IconDetail,
-} from "./style";
-import { isHavePermission } from "../../common";
-import { getLocale } from "../../../../utils/getLocale";
-
+import React, { PureComponent } from 'react'
+import { ReviewItemContainer, ItemName, ItemOptions, ItemEdit, IconEdit, ItemDetail, IconDetail } from './style'
+import { isHavePermission } from '../../common'
+import { getLocale } from '../../../../utils/getLocale';
 interface Props {
   className?: string
   editAble: boolean
@@ -21,37 +18,28 @@ interface ReviewListObject {
   editable: boolean;
 }
 export default class ReviewItem extends PureComponent<Props> {
+
   _handlerLinkToReviewDetail = () => {
-    const {
-      feedId, reviewItemData, krIndex, editAble,
-    } = this.props;
-    window.open(`${location.pathname}#okr/reviewDetail?okrId=8077&back=${location.hash}&replayId=${reviewItemData.replayId}&feedId=${feedId}&krIndex=${krIndex}&editAble=${editAble}`);
-  };
+    const { feedId, reviewItemData, krIndex, editAble } = this.props
+    window.open(`${location.pathname}#okr/reviewDetail?okrId=8077&back=${location.hash}&replayId=${reviewItemData.replayId}&feedId=${feedId}&krIndex=${krIndex}&editAble=${editAble}`)
+  }
 
   render() {
-    const {
-      className, isCompactMode, editReview, reviewItemData, editAble,
-    } = this.props;
+    const { className, isCompactMode, editReview, reviewItemData, editAble } = this.props
     return (
       <ReviewItemContainer className={className} mode={isCompactMode ? 0 : 1}>
-        <ItemName mode={isCompactMode ? 0 : 1}>
-          {getLocale("OKR_MyO_KRP_Review")}
-          {" "}
-          (
-          {reviewItemData.creatDate}
-          )
-        </ItemName>
+        <ItemName mode={isCompactMode ? 0 : 1}>{getLocale('OKR_MyO_KRP_Review')} ({reviewItemData.creatDate})</ItemName>
         <ItemOptions>
-          <ItemEdit onMouseDown={editReview} style={{ visibility: reviewItemData.editable || isHavePermission || editAble ? "visible" : "hidden" }}>
-            <IconEdit className="tu-icon-bianji" />
-            <span>{getLocale("Mod_Editor")}</span>
+          <ItemEdit onMouseDown={editReview} style={{ visibility: reviewItemData.editable || isHavePermission || editAble ? 'visible' : 'hidden' }}>
+            <IconEdit className="tu-icon-bianji"></IconEdit>
+            <span>{getLocale('Mod_Editor')}</span>
           </ItemEdit>
           <ItemDetail onMouseDown={() => this._handlerLinkToReviewDetail()}>
-            <span>{getLocale("Mod_Checkdetails")}</span>
-            <IconDetail className="tu-icon-xiangqing" />
+            <span>{getLocale('Mod_Checkdetails')}</span>
+            <IconDetail className="tu-icon-xiangqing"></IconDetail>
           </ItemDetail>
         </ItemOptions>
       </ReviewItemContainer>
-    );
+    )
   }
 }

package/src/components/okr-review/components/ReviewItem/style.ts

@@ -1,8 +1,8 @@
-import styled from "styled-components";
+import styled from 'styled-components'
 
 export const ReviewItemContainer = styled.div`
-  height: ${(p: any) => (p.mode === 0 ? "40px" : "36px")};
-  margin-top: ${(p: any) => (p.mode === 0 ? "10px" : 0)};
+  height: ${(p: any) => p.mode === 0 ? '40px' : '36px'};
+  margin-top: ${(p: any) => p.mode === 0 ? '10px' : 0};
   border-radius: 2px;
   background: #ffffff;
   display: flex;
@@ -10,14 +10,14 @@ export const ReviewItemContainer = styled.div`
   justify-content: space-between;
 
   &:hover {
-    background: ${(p: any) => (p.mode === 0 ? "rgba(194, 224, 255, 0.1)" : "#ffffff")};
+    background: ${(p: any) => p.mode === 0 ? 'rgba(194, 224, 255, 0.1)' : '#ffffff'};
   }
-`;
+`
 export const ItemName = styled.div`
-  font-size: ${(p: any) => (p.mode === 0 ? "14px" : "16px")};
+  font-size: ${(p: any) => p.mode === 0 ? '14px' : '16px'};
   font-weight: 600;
   color: #3B4247;
-`;
+`
 export const ItemOptions = styled.div`
   font-size: 13px;
   color: #2879ff;
@@ -28,25 +28,25 @@ export const ItemOptions = styled.div`
   div {
     cursor: pointer;
   }
-`;
+`
 export const ItemEdit = styled.div`
    &:hover {
     color: #5C8EFF;
   }
-`;
+`
 export const ItemDetail = styled.div`
   margin-left: 20px;
   &:hover {
     color: #5C8EFF;
   }
-`;
+`
 export const IconEdit = styled.span`
   margin-right: 5px;
   position: relative;
   top: 1px;
-`;
+`
 export const IconDetail = styled.span`
   margin-left: 5px;
   position: relative;
   top: 1px;
-`;
+`

package/src/components/okr-review/components/confirm-pop/ConfirmPop.tsx

@@ -1,9 +1,7 @@
-import React, { PureComponent } from "react";
-import Pop from "../../../../components-v1/pop";
-import {
-  ConfirmWrapper, ConfirmText, ConfirmBtnGroup, ButtonCancel, ButtonConfirm,
-} from "./style";
-import { getLocale } from "../../../../utils/getLocale";
+import React, { PureComponent } from 'react'
+import Pop from '../../../../components-v1/pop';
+import { ConfirmWrapper, ConfirmText, ConfirmBtnGroup, ButtonCancel, ButtonConfirm } from './style';
+import { getLocale } from '../../../../utils/getLocale';
 
 interface Props {
   className?: string
@@ -23,25 +21,24 @@ interface Props {
   onSubmit: (event: any) => void;
 }
 
-const popContainer = document.body;
+const popContainer = document.body
 
 export default class ConfirmPop extends PureComponent<Props> {
   static defaultProps = {
     isShowConfirmTitle: false,
-    confirmTitle: "提示",
+    confirmTitle: '提示',
     isShowCancelBtn: true,
     isShowConfirmBtn: true,
-  };
+  }
 
   handleShowPop = () => {
-    // @ts-ignore
-    this.refs.pop.show(this.refs.trigger);
-  };
-
+    //@ts-ignore
+    this.refs.pop.show(this.refs.trigger)
+  }
   handleHide = () => {
-    // @ts-ignore
-    this.refs.pop.hide();
-  };
+    //@ts-ignore
+    this.refs.pop.hide()
+  }
 
   render() {
     const {
@@ -52,31 +49,31 @@ export default class ConfirmPop extends PureComponent<Props> {
       isShowConfirmTitle,
       isShowCancelBtn,
       confirmTitle,
-      confirmTipText = getLocale("Mod_cannotberecovered"),
-      btnCancelText = getLocale("Mod_Cancel"),
-      btnConfirmText = getLocale("OKR_MyO_Butt_Determine"),
-    } = this.props;
+      confirmTipText = getLocale('Mod_cannotberecovered'),
+      btnCancelText = getLocale('Mod_Cancel'),
+      btnConfirmText = getLocale('OKR_MyO_Butt_Determine')
+    } = this.props
 
     return (
-      <div style={{ display: "inline-block" }}>
-        <div ref="trigger" onMouseDown={() => this.handleShowPop()}>{children}</div>
-        <Pop ref="pop" align={align} container={popContainer} className="tita-common-pop-no-shadow">
+      <div style={{ 'display': 'inline-block' }}>
+        <div ref='trigger' onMouseDown={() => this.handleShowPop()}>{children}</div>
+        <Pop ref='pop' align={align} container={popContainer} className='tita-common-pop-no-shadow'>
           <ConfirmWrapper className={`pull-screen-ignore ${className}`}>
             {
               isShowConfirmTitle && (
                 <div className="confirm__title">{confirmTitle}</div>
               )
             }
-            <ConfirmText className="confirm__content" dangerouslySetInnerHTML={{ __html: confirmTipText }} />
+            <ConfirmText className="confirm__content" dangerouslySetInnerHTML={{ __html: confirmTipText }}></ConfirmText>
             <ConfirmBtnGroup className="confirm__btngroup">
               {
                 isShowCancelBtn && (<ButtonCancel onMouseDown={() => this.handleHide()}>{btnCancelText}</ButtonCancel>)
               }
-              <ButtonConfirm onMouseDown={(event: any) => { onSubmit(event); this.handleHide(); event.stopPropagation(); event.nativeEvent.stopImmediatePropagation(); }}>{btnConfirmText}</ButtonConfirm>
+              <ButtonConfirm onMouseDown={(event: any) => { onSubmit(event); this.handleHide(); event.stopPropagation(); event.nativeEvent.stopImmediatePropagation() }}>{btnConfirmText}</ButtonConfirm>
             </ConfirmBtnGroup>
           </ConfirmWrapper>
         </Pop>
       </div>
-    );
+    )
   }
 }

package/src/components/okr-review/components/confirm-pop/style.ts

@@ -1,4 +1,4 @@
-import styled from "styled-components";
+import styled from 'styled-components'
 
 export const ConfirmWrapper = styled.div`
   min-width: 300px;
@@ -7,10 +7,10 @@ export const ConfirmWrapper = styled.div`
   background-color: #ffffff;
   
   &.bg {
-    background: url(${require("./praise-bg.png")}) no-repeat 0 0 / 101% 105%;
+    background: url(${require('./praise-bg.png')}) no-repeat 0 0 / 101% 105%;
     box-shadow: 0 6px 15px 0 rgba(0,0,0,0.15);
   }
-`;
+`
 
 export const ConfirmText = styled.div`
   padding: 12px 20px;
@@ -20,7 +20,7 @@ export const ConfirmText = styled.div`
   word-break: break-all;
   word-wrap: break-word;
   word-break: break-all;
-`;
+`
 
 export const ConfirmBtnGroup = styled.div`
   padding: 0 15px 15px 10px;
@@ -35,12 +35,12 @@ export const ConfirmBtnGroup = styled.div`
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.18);
     border: none;
   }
-`;
+`
 export const ButtonCancel = styled.button`
   background-color: #f5f8fa;
   color: #34434e;
-`;
+`
 export const ButtonConfirm = styled.button`
   background-color: #2879FF;
   color: #fff;
-`;
+`