@titaui/pc 1.9.45 → 1.9.49

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

@@ -26,7 +26,7 @@ import {
   AvatarWrapper,
 } from "./style";
 
-import { getLocale } from '../../../../../utils/getLocale';
+import { getLocale } from "../../../../../utils/getLocale";
 
 import UserSelectorPop from "../../../../../components-v1/userSelector/UserSelectorPop";
 import { getApiUrl, taker } from "../../../../../utils/request-v1";
@@ -122,9 +122,10 @@ export default class ReviewBody extends PureComponent<Props, State> {
       popContainer: document.body,
     };
   }
+
   localStorageKey: string;
 
-  //创建任务
+  // 创建任务
   renderCreateTaskView = async (e: any, data, workId: number) => {
     e.stopPropagation();
     const param = {
@@ -135,7 +136,7 @@ export default class ReviewBody extends PureComponent<Props, State> {
       // @ts-ignore
       param.WorkMileStoneId = data.ObjId;
     }
-    //@ts-ignore
+    // @ts-ignore
     const res = await window.openCreateTaskPop(e.target, {
       createParams: param,
       dialogOption: {
@@ -154,26 +155,23 @@ export default class ReviewBody extends PureComponent<Props, State> {
   }
 
   componentDidUpdate(prevProps: Props, prevState: State) {
-    const isMissDrawBack = this.props.isMissDrawBack;
-    let drawbackList = this.state.data.drawbackList;
-    let isStandardMode = this.state.data.isStandardMode;
+    const { isMissDrawBack } = this.props;
+    const { drawbackList } = this.state.data;
+    const { isStandardMode } = this.state.data;
     if (isMissDrawBack && !isStandardMode) {
       drawbackList.forEach((item: DrawbackObject, index: number) => {
-        let textareaRefName = `textareaView${index + 1}`;
+        const textareaRefName = `textareaView${index + 1}`;
         if (
-          (item.cause.trim().length > 0 || item.measures.trim().length > 0) &&
-          item.drawback.trim().length <= 0
+          (item.cause.trim().length > 0 || item.measures.trim().length > 0)
+          && item.drawback.trim().length <= 0
         ) {
           // @ts-ignore
-          this.refs[textareaRefName].refs.textarea.style.borderColor =
-            "#CC2929";
+          this.refs[textareaRefName].refs.textarea.style.borderColor = "#CC2929";
           // @ts-ignore
-          this.refs[textareaRefName].refs.textarea.style.background =
-            "rgba(204,41,41,.05) !important";
+          this.refs[textareaRefName].refs.textarea.style.background = "rgba(204,41,41,.05) !important";
         } else {
           // @ts-ignore
-          this.refs[textareaRefName].refs.textarea.style.borderColor =
-            "#E4EBF0";
+          this.refs[textareaRefName].refs.textarea.style.borderColor = "#E4EBF0";
           // @ts-ignore
           this.refs[textareaRefName].refs.textarea.style.background = "#FFFFFF";
         }
@@ -186,27 +184,27 @@ export default class ReviewBody extends PureComponent<Props, State> {
   // 编辑 EditType === 1 this.getReviewDataById()
   getReviewData = () => {
     const { ObjData, EditType } = this.props;
-    let initData = this.state.data;
+    const initData = this.state.data;
     this.localStorageKey = `ReviewData_${ObjData.ObjId}`;
-    let localData = localStorage.getItem(this.localStorageKey);
+    const localData = localStorage.getItem(this.localStorageKey);
     // 编辑类型：0-新建，1-编辑
     // 新增时：初始化数据或从本地缓存获取数据
     // 编辑时：从接口获取数据
     // let data = EditType === 0 ? (localData ? JSON.parse(localData) : initData) : this.getReviewDataById()
-    if (Boolean(EditType)) {
+    if (EditType) {
       // 编辑
       this.getReviewDataById();
     } else {
-      let data = localData ? JSON.parse(localData) : initData;
+      const data = localData ? JSON.parse(localData) : initData;
       this._initReviewData(data);
     }
   };
 
   // 编辑时：从接口获取数据
   getReviewDataById = () => {
-    let self = this;
+    const self = this;
     const replayId = this.props.ReplayId;
-    let url = getApiUrl(`replay/getById?replayId=${replayId}`);
+    const url = getApiUrl(`replay/getById?replayId=${replayId}`);
     taker(url, "GET").then((res) => {
       if (res.Code == 1) {
         self._formatReviewData(res.Data);
@@ -215,24 +213,22 @@ export default class ReviewBody extends PureComponent<Props, State> {
   };
 
   _formatReviewData = (reviewData: any) => {
-    let data = { ...this.state.data };
+    const data = { ...this.state.data };
     data.replayId = reviewData.replayId;
     data.objId = reviewData.objId;
     data.objType = reviewData.objType;
     data.gains = reviewData.gains;
     data.drawbackList = reviewData.drawbackList;
     data.taskList = reviewData.tasks || [];
-    data.taskIds =
-      reviewData.taskList &&
-      reviewData.taskList.map((item: TaskListObject) => item.taskId).join(",");
-    data.participantIds =
-      reviewData.participants &&
-      reviewData.participants.map((item) => item.userId).join(",");
+    data.taskIds = reviewData.taskList
+      && reviewData.taskList.map((item: TaskListObject) => item.taskId).join(",");
+    data.participantIds = reviewData.participants
+      && reviewData.participants.map((item) => item.userId).join(",");
     data.isStandardMode = reviewData.isStandardMode;
     data.Drawback = reviewData.isStandardMode
       ? reviewData.drawbackList[0].drawback
       : "";
-    let reviewMebers = reviewData.participants || [];
+    const reviewMebers = reviewData.participants || [];
     reviewMebers.forEach((item: any, index: number) => {
       data.reviewMebers.push({
         Id: item.userId,
@@ -271,13 +267,13 @@ export default class ReviewBody extends PureComponent<Props, State> {
 
   // 价值与收获
   _handlerReviewWorthChange = (value: string) => {
-    let data = { ...this.state.data };
+    const data = { ...this.state.data };
     this._updateReviewData(data, "gains", value);
   };
 
   // 添加问题与不足
   _addReviewProblem = () => {
-    let data = { ...this.state.data };
+    const data = { ...this.state.data };
     data.drawbackList.push({
       drawbackId: 0,
       drawback: "",
@@ -289,7 +285,7 @@ export default class ReviewBody extends PureComponent<Props, State> {
 
   // 删除问题与不足
   _handlerDeleteReviewProblem = (index: number) => {
-    let data = { ...this.state.data };
+    const data = { ...this.state.data };
     data.drawbackList.splice(index, 1);
     this._updateReviewData(data);
   };
@@ -298,130 +294,117 @@ export default class ReviewBody extends PureComponent<Props, State> {
   _handlerAdvancedModeProblemChange = (
     type: string,
     value: string,
-    index: number
+    index: number,
   ) => {
-    let data = { ...this.state.data };
+    const data = { ...this.state.data };
     data.drawbackList[index][type] = value;
     this._updateReviewData(data);
   };
 
   // 标准模式-编辑问题与不足
   _handlerStandardModeProblemChange = (value: string) => {
-    let data = { ...this.state.data };
+    const data = { ...this.state.data };
     this._updateReviewData(data, "Drawback", value);
   };
 
   // 问题与不足
   _renderReviewProblemView = () => {
-    let { data } = this.state;
+    const { data } = this.state;
     if (data.isStandardMode) {
       return (
         <ReviewProblem>
-          <ReviewCatalog>{getLocale('OKR_MyO_KRP_Pop_Problems')}</ReviewCatalog>
+          <ReviewCatalog>{getLocale("OKR_MyO_KRP_Pop_Problems")}</ReviewCatalog>
           <TextareaView
             maxLength={5000}
             value={htmlDecodeByRegExp(data.Drawback)}
             initialHeight={56}
             style={{ marginLeft: "8px" }}
-            onChange={(value: string) =>
-              this._handlerStandardModeProblemChange(value)
-            }
-            placeholder={"<p>" + getLocale('OKR_MyO_KRP_Pop_Pldescribe') + "</p>"}
+            onChange={(value: string) => this._handlerStandardModeProblemChange(value)}
+            placeholder={`<p>${getLocale("OKR_MyO_KRP_Pop_Pldescribe")}</p>`}
           />
         </ReviewProblem>
       );
-    } else {
-      return data.drawbackList.map((item: DrawbackObject, index: number) => {
-        return (
-          <ReviewProblem key={index}>
-            <div>
-              <ReviewCatalog className="drawback">
-                <span>{`${getLocale('OKR_MyO_KRP_Pop_Problems')}${index + 1}`}</span>
-                <ConfirmPop
-                  className="review-delete-tips"
-                  onSubmit={() => this._handlerDeleteReviewProblem(index)}
-                  confirmTipText={`确定删除整个问题与不足${index + 1}吗？`}
-                  align="bottom right"
-                >
-                  <span className="delete-replay">{getLocale('Mod_Delete')}</span>
-                </ConfirmPop>
-              </ReviewCatalog>
-              <TextareaView
-                ref={`textareaView${index + 1}`}
-                maxLength={5000}
-                value={htmlDecodeByRegExp(item.drawback)}
-                initialHeight={56}
-                style={{ marginLeft: "8px" }}
-                onChange={(value: string) =>
-                  this._handlerAdvancedModeProblemChange(
-                    "drawback",
-                    value,
-                    index
-                  )
-                }
-                placeholder={"<p>" + getLocale('OKR_MyO_KRP_Pop_Pldescribe') + "</p>"}
-              />
-            </div>
-            <div>
-              <ReviewCatalogSecond>{getLocale('OKR_MyO_KRP_Pop_Rootcause')}</ReviewCatalogSecond>
-              <TextareaView
-                maxLength={5000}
-                value={htmlDecodeByRegExp(item.cause)}
-                autoResizing
-                style={{ marginLeft: "8px" }}
-                onChange={(value: string) =>
-                  this._handlerAdvancedModeProblemChange("cause", value, index)
-                }
-                placeholder={"<p>"+getLocale('OKR_MyO_KRP_Pop_Pleasefillproblem')+"</p>"}
-              />
-            </div>
-            <div>
-              <ReviewCatalogSecond>{getLocale('OKR_MyO_KRP_Pop_Correspond')}</ReviewCatalogSecond>
-              <TextareaView
-                maxLength={5000}
-                value={htmlDecodeByRegExp(item.measures)}
-                autoResizing
-                style={{ marginLeft: "8px" }}
-                onChange={(value: string) =>
-                  this._handlerAdvancedModeProblemChange(
-                    "measures",
-                    value,
-                    index
-                  )
-                }
-                placeholder={"<p>" + getLocale('OKR_MyO_KRP_Pop_Pleabovereasons') + "</p>"}
-              />
-            </div>
-          </ReviewProblem>
-        );
-      });
     }
+    return data.drawbackList.map((item: DrawbackObject, index: number) => (
+      <ReviewProblem key={index}>
+        <div>
+          <ReviewCatalog className="drawback">
+            <span>{`${getLocale("OKR_MyO_KRP_Pop_Problems")}${index + 1}`}</span>
+            <ConfirmPop
+              className="review-delete-tips"
+              onSubmit={() => this._handlerDeleteReviewProblem(index)}
+              confirmTipText={`确定删除整个问题与不足${index + 1}吗？`}
+              align="bottom right"
+            >
+              <span className="delete-replay">{getLocale("Mod_Delete")}</span>
+            </ConfirmPop>
+          </ReviewCatalog>
+          <TextareaView
+            ref={`textareaView${index + 1}`}
+            maxLength={5000}
+            value={htmlDecodeByRegExp(item.drawback)}
+            initialHeight={56}
+            style={{ marginLeft: "8px" }}
+            onChange={(value: string) => this._handlerAdvancedModeProblemChange(
+              "drawback",
+              value,
+              index,
+            )}
+            placeholder={`<p>${getLocale("OKR_MyO_KRP_Pop_Pldescribe")}</p>`}
+          />
+        </div>
+        <div>
+          <ReviewCatalogSecond>{getLocale("OKR_MyO_KRP_Pop_Rootcause")}</ReviewCatalogSecond>
+          <TextareaView
+            maxLength={5000}
+            value={htmlDecodeByRegExp(item.cause)}
+            autoResizing
+            style={{ marginLeft: "8px" }}
+            onChange={(value: string) => this._handlerAdvancedModeProblemChange("cause", value, index)}
+            placeholder={`<p>${getLocale("OKR_MyO_KRP_Pop_Pleasefillproblem")}</p>`}
+          />
+        </div>
+        <div>
+          <ReviewCatalogSecond>{getLocale("OKR_MyO_KRP_Pop_Correspond")}</ReviewCatalogSecond>
+          <TextareaView
+            maxLength={5000}
+            value={htmlDecodeByRegExp(item.measures)}
+            autoResizing
+            style={{ marginLeft: "8px" }}
+            onChange={(value: string) => this._handlerAdvancedModeProblemChange(
+              "measures",
+              value,
+              index,
+            )}
+            placeholder={`<p>${getLocale("OKR_MyO_KRP_Pop_Pleabovereasons")}</p>`}
+          />
+        </div>
+      </ReviewProblem>
+    ));
   };
 
   // 添加参与人员
   _handlerUserSelect = (users, depts) => {
-    let data = { ...this.state.data };
+    const data = { ...this.state.data };
     const { EditType } = this.props;
-    let participantsConcatArr = [...data.reviewParticipantsList, ...users]; // 人员
-    let departmentConcatArr = [...data.reviewDepartmentsList, ...depts]; // 部门
-    let usersConcatArr = [...data.reviewMebers, ...users, ...depts];
+    const participantsConcatArr = [...data.reviewParticipantsList, ...users]; // 人员
+    const departmentConcatArr = [...data.reviewDepartmentsList, ...depts]; // 部门
+    const usersConcatArr = [...data.reviewMebers, ...users, ...depts];
 
     data.reviewParticipantsList = this.deduplicationFunc(participantsConcatArr);
-    let prevParticipantIds = data.reviewMebers.map((item) => item.Id).join(",");
-    let participantIds =
-      EditType === 0
-        ? data.reviewParticipantsList.map((item) => item.Id).join(",")
-        : prevParticipantIds
+    const prevParticipantIds = data.reviewMebers.map((item) => item.Id).join(",");
+    let participantIds = EditType === 0
+      ? data.reviewParticipantsList.map((item) => item.Id).join(",")
+      : prevParticipantIds
         ? `${prevParticipantIds},${data.reviewParticipantsList
-            .map((item) => item.Id)
-            .join(",")}`
+          .map((item) => item.Id)
+          .join(",")}`
         : data.reviewParticipantsList.map((item) => item.Id).join(",");
-    participantIds =
-      participantIds.charAt(participantIds.length - 1) == ","
-        ? participantIds.slice(0, participantIds.length - 1)
-        : participantIds;
+    participantIds = participantIds.charAt(participantIds.length - 1) == ","
+      ? participantIds.slice(0, participantIds.length - 1)
+      : participantIds;
     data.reviewDepartmentsList = this.deduplicationFunc(departmentConcatArr);
-    let departmentIds = data.reviewDepartmentsList
+    const departmentIds = data.reviewDepartmentsList
       .map((item) => item.Id)
       .join(",");
 
@@ -432,9 +415,9 @@ export default class ReviewBody extends PureComponent<Props, State> {
 
   // 数组去重
   deduplicationFunc = (targetArr: any[]) => {
-    let resultArr: any[] = [];
+    const resultArr: any[] = [];
     targetArr.forEach((item) => {
-      let res = resultArr.filter((element) => item.Id === element.Id);
+      const res = resultArr.filter((element) => item.Id === element.Id);
       resultArr.forEach((element) => {
         if (item.Id === element.Id) {
           element = item;
@@ -449,59 +432,54 @@ export default class ReviewBody extends PureComponent<Props, State> {
 
   // 删除参与人员
   _handlerDeleteMember = (index: number) => {
-    let data = { ...this.state.data };
-    let reviewMebers = [...data.reviewMebers];
+    const data = { ...this.state.data };
+    const reviewMebers = [...data.reviewMebers];
     reviewMebers.splice(index, 1);
-    let participantIds = reviewMebers.map((item) => item.Id).join(",");
+    const participantIds = reviewMebers.map((item) => item.Id).join(",");
     this._updateReviewData(data, "participantIds", participantIds);
     this._updateReviewData(data, "reviewMebers", reviewMebers);
   };
 
-  _renderReviewMembers = (reviewMebers: any[], EditType: number) =>
-    reviewMebers.map((item: any, index: number) => {
-      return (
-        <AvatarWrapper key={item.Id}>
-          {
-            <ToolTip
-              title={
-                <OpenUserName
-                  name={item.Name || item.DepartmentName}
-                  id={item.Id}
-                />
-              }
-            >
-              <div className={item.UserAvatar ? "" : "depts"}>
-                {item.UserAvatar ? (
-                  <Avatar
-                    size={Avatar.size(6)}
-                    name={item.Name}
-                    userId={item.Id}
-                    color={item.UserAvatar.Color}
-                    src={item.UserAvatar.Small}
-                  />
-                ) : (
-                  <div className="depts-name">
-                    <OpenDepartmentName
-                      name={item.DepartmentName}
-                      id={item.Id}
-                    />
-                  </div>
-                )}
-              </div>
-            </ToolTip>
-          }
-          <IconCloseContainer onClick={() => this._handlerDeleteMember(index)}>
-            <IconClose>&times;</IconClose>
-          </IconCloseContainer>
-        </AvatarWrapper>
-      );
-    });
+  _renderReviewMembers = (reviewMebers: any[], EditType: number) => reviewMebers.map((item: any, index: number) => (
+    <AvatarWrapper key={item.Id}>
+      <ToolTip
+        title={(
+          <OpenUserName
+            name={item.Name || item.DepartmentName}
+            id={item.Id}
+          />
+              )}
+      >
+        <div className={item.UserAvatar ? "" : "depts"}>
+          {item.UserAvatar ? (
+            <Avatar
+              size={Avatar.size(6)}
+              name={item.Name}
+              userId={item.Id}
+              color={item.UserAvatar.Color}
+              src={item.UserAvatar.Small}
+            />
+          ) : (
+            <div className="depts-name">
+              <OpenDepartmentName
+                name={item.DepartmentName}
+                id={item.Id}
+              />
+            </div>
+          )}
+        </div>
+      </ToolTip>
+      <IconCloseContainer onClick={() => this._handlerDeleteMember(index)}>
+        <IconClose>&times;</IconClose>
+      </IconCloseContainer>
+    </AvatarWrapper>
+  ));
 
   // 获取改进计划数据
   _getTaskListData = (taskData: any) => {
-    let data = { ...this.state.data };
-    let taskIds = data.taskIds;
-    let taskList = data.taskList;
+    const data = { ...this.state.data };
+    let { taskIds } = data;
+    const { taskList } = data;
     taskIds = taskIds ? `${taskIds},${taskData.taskId}` : taskData.taskId;
     taskList.push({
       taskId: taskData.taskId,
@@ -513,46 +491,38 @@ export default class ReviewBody extends PureComponent<Props, State> {
   };
 
   // 改进计划
-  _renderActionPlans = (taskList: TaskListObject[]) =>
-    taskList.map((item: TaskListObject, index: number) => {
-      return (
-        // <ToolTip title={item.taskName}>
-        <ReviewContent
-          className="action-plan"
-          key={item.taskId}
-          onClick={() =>
-            window.open(`${location.pathname}#more/taskinfo?id=${item.taskId}`)
-          }
-        >
-          <IconRunning className={taskStatusIcon[item.status]}></IconRunning>
-          <span
-            dangerouslySetInnerHTML={{
-              __html: htmlEncodeByRegExp(item.taskName),
-            }}
-          ></span>
-        </ReviewContent>
-        // </ToolTip>
-      );
-    });
+  _renderActionPlans = (taskList: TaskListObject[]) => taskList.map((item: TaskListObject, index: number) => (
+    // <ToolTip title={item.taskName}>
+    <ReviewContent
+      className="action-plan"
+      key={item.taskId}
+      onClick={() => window.open(`${location.pathname}#more/taskinfo?id=${item.taskId}`)}
+    >
+      <IconRunning className={taskStatusIcon[item.status]} />
+      <span
+        dangerouslySetInnerHTML={{
+          __html: htmlEncodeByRegExp(item.taskName),
+        }}
+      />
+    </ReviewContent>
+    // </ToolTip>
+  ));
 
   // 模式切换
   _switchMode = () => {
-    let data = { ...this.state.data };
+    const data = { ...this.state.data };
     data.isStandardMode = !data.isStandardMode;
     if (data.isStandardMode) {
-      data.Drawback =
-        data.drawbackList.length > 0 ? data.drawbackList[0].drawback : "";
+      data.Drawback = data.drawbackList.length > 0 ? data.drawbackList[0].drawback : "";
+    } else if (data.drawbackList.length > 0) {
+      data.drawbackList[0].drawback = data.Drawback;
     } else {
-      if (data.drawbackList.length > 0) {
-        data.drawbackList[0].drawback = data.Drawback;
-      } else {
-        data.drawbackList.push({
-          drawbackId: 0,
-          drawback: data.Drawback,
-          cause: "",
-          measures: "",
-        });
-      }
+      data.drawbackList.push({
+        drawbackId: 0,
+        drawback: data.Drawback,
+        cause: "",
+        measures: "",
+      });
     }
     this._updateReviewData(data);
   };
@@ -577,14 +547,14 @@ export default class ReviewBody extends PureComponent<Props, State> {
     const screenHeight = window.screen.height;
     const { ObjData, EditType } = this.props;
     console.log(ObjData);
-    let { data, popContainer } = this.state;
+    const { data, popContainer } = this.state;
     let maxHeight = 595;
     screenHeight <= 768 ? (maxHeight = 300) : (maxHeight = 595);
     return (
       <ReviewBodyContainer>
         <ReviewBodyScroll maxHeight={maxHeight}>
           <ReviewTarget>
-            <ReviewCatalog>{getLocale('OKR_MyO_KRP_Pop_Reviewobject')}</ReviewCatalog>
+            <ReviewCatalog>{getLocale("OKR_MyO_KRP_Pop_Reviewobject")}</ReviewCatalog>
             <ReviewContent className="target-name">
               <IconTarget
                 className={ObjData.ObjType == 65 ? "review-kr" : "tu-icon-OKR"}
@@ -597,16 +567,14 @@ export default class ReviewBody extends PureComponent<Props, State> {
             </ReviewContent>
           </ReviewTarget>
           <ReviewWorth>
-            <ReviewCatalog>{getLocale('OKR_MyO_KRP_Pop_Value')}</ReviewCatalog>
+            <ReviewCatalog>{getLocale("OKR_MyO_KRP_Pop_Value")}</ReviewCatalog>
             <TextareaView
               maxLength={5000}
               value={htmlDecodeByRegExp(data.gains)}
               initialHeight={56}
               style={{ marginLeft: "8px" }}
-              onChange={(value: string) =>
-                this._handlerReviewWorthChange(value)
-              }
-              placeholder={"<p>我们从过程中学到了什么新东西？</p><p>" + getLocale('OKR_MyO_KRP_Pop_Ifsomeone') + "</p>"}
+              onChange={(value: string) => this._handlerReviewWorthChange(value)}
+              placeholder={`<p>我们从过程中学到了什么新东西？</p><p>${getLocale("OKR_MyO_KRP_Pop_Ifsomeone")}</p>`}
             />
           </ReviewWorth>
           {this._renderReviewProblemView()}
@@ -615,26 +583,24 @@ export default class ReviewBody extends PureComponent<Props, State> {
               onClick={this._addReviewProblem}
               className={data.drawbackList.length == 0 ? "none-drawback" : ""}
             >
-              <IconAdd className="tu-icon-add"></IconAdd>
-              <span>{getLocale('OKR_MyO_KRP_Pop_Addproandd')}</span>
+              <IconAdd className="tu-icon-add" />
+              <span>{getLocale("OKR_MyO_KRP_Pop_Addproandd")}</span>
             </AddReviewProblem>
           )}
           <ReviewAction ref="creatActionPlan">
-            <ReviewCatalog>{getLocale('OKR_MyO_KRP_Pop_Lmproveplan')}</ReviewCatalog>
+            <ReviewCatalog>{getLocale("OKR_MyO_KRP_Pop_Lmproveplan")}</ReviewCatalog>
             <ReviewContent>
               {this._renderActionPlans(data.taskList)}
               <BtnCreateTask
-                onClick={(e: any) =>
-                  this.renderCreateTaskView(e, ObjData, ObjData.workId)
-                }
+                onClick={(e: any) => this.renderCreateTaskView(e, ObjData, ObjData.workId)}
               >
-                <IconAdd className="tu-icon-add"></IconAdd>
-                {getLocale('OKR_MyO_KRP_Pop_Createplan')}
+                <IconAdd className="tu-icon-add" />
+                {getLocale("OKR_MyO_KRP_Pop_Createplan")}
               </BtnCreateTask>
             </ReviewContent>
           </ReviewAction>
           <ReviewMember>
-            <ReviewCatalog>{getLocale('OKR_MyO_KRP_Pop_Participants')}</ReviewCatalog>
+            <ReviewCatalog>{getLocale("OKR_MyO_KRP_Pop_Participants")}</ReviewCatalog>
             <ReviewContent className="review-meber">
               {this._renderReviewMembers(data.reviewMebers, EditType)}
               <UserSelectorPop
@@ -646,15 +612,15 @@ export default class ReviewBody extends PureComponent<Props, State> {
                 }}
               >
                 <div className="add-meber">
-                  <IconAdd className="tu-icon-add"></IconAdd>
+                  <IconAdd className="tu-icon-add" />
                 </div>
               </UserSelectorPop>
             </ReviewContent>
           </ReviewMember>
           <ReviewMode>
             <span onClick={this._switchMode}>
-              <IconSwitch className="tu-icon-change"></IconSwitch>
-              <span>{data.isStandardMode ? getLocale('OKR_MyO_Pop_Advancedmode') : getLocale('OKR_MyO_KRP_Pop_Butt_Standard')}</span>
+              <IconSwitch className="tu-icon-change" />
+              <span>{data.isStandardMode ? getLocale("OKR_MyO_Pop_Advancedmode") : getLocale("OKR_MyO_KRP_Pop_Butt_Standard")}</span>
             </span>
           </ReviewMode>
         </ReviewBodyScroll>

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

@@ -1,11 +1,11 @@
-import styled from 'styled-components';
+import styled from "styled-components";
 
 export const ReviewBodyContainer = styled.div`
   background: #ffffff;
 `;
 export const ReviewBodyScroll = styled.div`
   min-height: 465px;
-  max-height: ${(p: any) => p.maxHeight + 'px'};
+  max-height: ${(p: any) => `${p.maxHeight}px`};
   margin-right: 4px;
   padding: 20px 46px 15px 42px;
   overflow-y: scroll;