@titaui/pc 1.7.45 → 1.7.49

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

@@ -1,662 +0,0 @@
-import ToolTip from "@beisen-phoenix/tooltip";
-import React, { PureComponent } from "react";
-import { taskStatusIcon } from "../../../common";
-import { ObjDataObject } from "../../../index";
-
-import {
-  ReviewBodyContainer,
-  ReviewBodyScroll,
-  ReviewCatalog,
-  ReviewCatalogSecond,
-  ReviewTarget,
-  ReviewWorth,
-  ReviewProblem,
-  ReviewAction,
-  ReviewMember,
-  ReviewContent,
-  IconTarget,
-  ReviewMode,
-  IconSwitch,
-  AddReviewProblem,
-  IconAdd,
-  IconCloseContainer,
-  IconClose,
-  IconRunning,
-  BtnCreateTask,
-  AvatarWrapper,
-} from "./style";
-
-import UserSelectorPop from "../../../../../components-v1/userSelector/UserSelectorPop";
-import { getApiUrl, taker } from "../../../../../utils/request-v1";
-import {
-  OpenUserName,
-  OpenDepartmentName,
-} from "../../../../../utils/open-data";
-import {
-  htmlEncodeByRegExp,
-  htmlDecodeByRegExp,
-} from "../../../../../utils/mblog";
-import ConfirmPop from "../../../../delete-confirm-pop/ConfirmPop";
-import TextareaView from "../../../../../components-v1/textarea";
-import Avatar from "../../../../../components-v1/avatar";
-
-interface Props {
-  isMissDrawBack: boolean;
-  ObjData: ObjDataObject;
-  EditType: number; // 编辑类型：0-新建，1-编辑
-  ReplayId: number;
-  onChange: (data: ReviewDataObject) => void;
-  createTask?: (
-    node: any,
-    view: any,
-    option: any,
-    mileStoneId: number,
-    parent: any,
-    createByReview?: boolean,
-    workId?: number
-  ) => void;
-  isOkrPanel?: boolean;
-}
-
-interface State {
-  data: ReviewDataObject;
-  popContainer: any;
-}
-export interface ReviewDataObject {
-  replayId: number;
-  objId: string;
-  objType: number;
-  gains: string; // 价值与收获
-  Drawback: string; // 标准模式-问题
-  drawbackList: DrawbackObject[]; // 问题与不足
-  participantIds: string; // 参与人员ID
-  reviewParticipantsList: any;
-  departmentIds: string; // 参与部门ID
-  reviewDepartmentsList: any;
-  reviewMebers: any[];
-  taskIds: string; // 行动计划
-  taskList: TaskListObject[];
-  isStandardMode: boolean;
-}
-export interface DrawbackObject {
-  drawbackId: number;
-  drawback: string; // 问题
-  cause: string; // 根本原因
-  measures: string; // 改进措施
-}
-interface TaskListObject {
-  taskId: string;
-  taskName: string;
-  status: number;
-}
-
-export default class ReviewBody extends PureComponent<Props, State> {
-  constructor(props: Props) {
-    super(props);
-    this.state = {
-      data: {
-        replayId: 0,
-        objId: String(props.ObjData.ObjId),
-        objType: props.ObjData.ObjType,
-        gains: "", // 价值与收获
-        Drawback: "",
-        drawbackList: [
-          {
-            drawbackId: 0,
-            drawback: "",
-            cause: "",
-            measures: "",
-          },
-        ], // 问题与不足
-        participantIds: "", // 参与人员
-        reviewParticipantsList: [],
-        departmentIds: "",
-        reviewDepartmentsList: [],
-        reviewMebers: [],
-        taskIds: "", // 行动计划
-        taskList: [],
-        isStandardMode: true, // 模式判断
-      }, // 复盘数据
-      popContainer: document.body,
-    };
-  }
-  localStorageKey: string;
-
-  //创建任务
-  renderCreateTaskView = async (e: any, data, workId: number) => {
-    e.stopPropagation();
-    const param = {
-      objId: workId || data.ObjId,
-      objType: 4,
-    };
-    if (workId) {
-      // @ts-ignore
-      param.WorkMileStoneId = data.ObjId;
-    }
-    //@ts-ignore
-    const res = await window.openCreateTaskPop(e.target, {
-      createParams: param,
-      dialogOption: {
-        zIndex: 1501,
-      },
-      createTaskOption: {
-        allowObjectOptions: false,
-      },
-    });
-    this._getTaskListData(res);
-    // createTask && createTask(e, node, { leftBias: isOkrPanel ? -75 : 750, topBias: isOkrPanel ? 260 : -340, isSettingContainer: true }, data, parent, true, workId);
-  };
-
-  componentDidMount() {
-    this.getReviewData();
-  }
-
-  componentDidUpdate(prevProps: Props, prevState: State) {
-    const isMissDrawBack = this.props.isMissDrawBack;
-    let drawbackList = this.state.data.drawbackList;
-    let isStandardMode = this.state.data.isStandardMode;
-    if (isMissDrawBack && !isStandardMode) {
-      drawbackList.forEach((item: DrawbackObject, index: number) => {
-        let textareaRefName = `textareaView${index + 1}`;
-        if (
-          (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";
-          // @ts-ignore
-          this.refs[textareaRefName].refs.textarea.style.background =
-            "rgba(204,41,41,.05) !important";
-        } else {
-          // @ts-ignore
-          this.refs[textareaRefName].refs.textarea.style.borderColor =
-            "#E4EBF0";
-          // @ts-ignore
-          this.refs[textareaRefName].refs.textarea.style.background = "#FFFFFF";
-        }
-      });
-    }
-  }
-
-  // 获取复盘数据
-  // 新增 EditType === 0 (localData ? JSON.parse(localData) : initData)
-  // 编辑 EditType === 1 this.getReviewDataById()
-  getReviewData = () => {
-    const { ObjData, EditType } = this.props;
-    let initData = this.state.data;
-    this.localStorageKey = `ReviewData_${ObjData.ObjId}`;
-    let localData = localStorage.getItem(this.localStorageKey);
-    // 编辑类型：0-新建，1-编辑
-    // 新增时：初始化数据或从本地缓存获取数据
-    // 编辑时：从接口获取数据
-    // let data = EditType === 0 ? (localData ? JSON.parse(localData) : initData) : this.getReviewDataById()
-    if (Boolean(EditType)) {
-      // 编辑
-      this.getReviewDataById();
-    } else {
-      let data = localData ? JSON.parse(localData) : initData;
-      this._initReviewData(data);
-    }
-  };
-
-  // 编辑时：从接口获取数据
-  getReviewDataById = () => {
-    let self = this;
-    const replayId = this.props.ReplayId;
-    let url = getApiUrl(`replay/getById?replayId=${replayId}`);
-    taker(url, "GET").then((res) => {
-      if (res.Code == 1) {
-        self._formatReviewData(res.Data);
-      }
-    });
-  };
-
-  _formatReviewData = (reviewData: any) => {
-    let 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.isStandardMode = reviewData.isStandardMode;
-    data.Drawback = reviewData.isStandardMode
-      ? reviewData.drawbackList[0].drawback
-      : "";
-    let reviewMebers = reviewData.participants || [];
-    reviewMebers.forEach((item: any, index: number) => {
-      data.reviewMebers.push({
-        Id: item.userId,
-        Name: item.name,
-        DepartmentName: item.departmentName,
-        UserAvatar: {
-          Small: item.avatar.small || "",
-          Color: item.avatar.color || "",
-        },
-      });
-    });
-    this.setState({ data });
-    this.props.onChange(data);
-  };
-
-  // 初始化数据
-  _initReviewData = (data: ReviewDataObject) => {
-    const { onChange } = this.props;
-    if (data.isStandardMode) {
-      // 标准模式
-      data.drawbackList = [
-        {
-          drawbackId: 0,
-          drawback: "",
-          cause: "",
-          measures: "",
-        },
-      ];
-    } else {
-      // 高级模式
-      data.Drawback = "";
-    }
-    onChange(data);
-    this.setState({ data });
-  };
-
-  // 价值与收获
-  _handlerReviewWorthChange = (value: string) => {
-    let data = { ...this.state.data };
-    this._updateReviewData(data, "gains", value);
-  };
-
-  // 添加问题与不足
-  _addReviewProblem = () => {
-    let data = { ...this.state.data };
-    data.drawbackList.push({
-      drawbackId: 0,
-      drawback: "",
-      cause: "",
-      measures: "",
-    });
-    this._updateReviewData(data);
-  };
-
-  // 删除问题与不足
-  _handlerDeleteReviewProblem = (index: number) => {
-    let data = { ...this.state.data };
-    data.drawbackList.splice(index, 1);
-    this._updateReviewData(data);
-  };
-
-  // 高级模式-编辑问题与不足
-  _handlerAdvancedModeProblemChange = (
-    type: string,
-    value: string,
-    index: number
-  ) => {
-    let data = { ...this.state.data };
-    data.drawbackList[index][type] = value;
-    this._updateReviewData(data);
-  };
-
-  // 标准模式-编辑问题与不足
-  _handlerStandardModeProblemChange = (value: string) => {
-    let data = { ...this.state.data };
-    this._updateReviewData(data, "Drawback", value);
-  };
-
-  // 问题与不足
-  _renderReviewProblemView = () => {
-    let { data } = this.state;
-    if (data.isStandardMode) {
-      return (
-        <ReviewProblem>
-          <ReviewCatalog>问题与不足</ReviewCatalog>
-          <TextareaView
-            maxLength={5000}
-            value={htmlDecodeByRegExp(data.Drawback)}
-            initialHeight={56}
-            style={{ marginLeft: "8px" }}
-            onChange={(value: string) =>
-              this._handlerStandardModeProblemChange(value)
-            }
-            placeholder="<p>请描述出现的某个问题并针对该问题展开分析</p>"
-          />
-        </ReviewProblem>
-      );
-    } else {
-      return data.drawbackList.map((item: DrawbackObject, index: number) => {
-        return (
-          <ReviewProblem key={index}>
-            <div>
-              <ReviewCatalog className="drawback">
-                <span>{`问题与不足${index + 1}`}</span>
-                <ConfirmPop
-                  className="review-delete-tips"
-                  onSubmit={() => this._handlerDeleteReviewProblem(index)}
-                  confirmTipText={`确定删除整个问题与不足${index + 1}吗？`}
-                  align="bottom right"
-                >
-                  <span className="delete-replay">删除</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>请描述出现的某个问题并针对该问题展开分析</p>"
-              />
-            </div>
-            <div>
-              <ReviewCatalogSecond>根本原因</ReviewCatalogSecond>
-              <TextareaView
-                maxLength={5000}
-                value={htmlDecodeByRegExp(item.cause)}
-                autoResizing
-                style={{ marginLeft: "8px" }}
-                onChange={(value: string) =>
-                  this._handlerAdvancedModeProblemChange("cause", value, index)
-                }
-                placeholder="<p>请填写问题出现的根本原因</p>"
-              />
-            </div>
-            <div>
-              <ReviewCatalogSecond>相应解决措施</ReviewCatalogSecond>
-              <TextareaView
-                maxLength={5000}
-                value={htmlDecodeByRegExp(item.measures)}
-                autoResizing
-                style={{ marginLeft: "8px" }}
-                onChange={(value: string) =>
-                  this._handlerAdvancedModeProblemChange(
-                    "measures",
-                    value,
-                    index
-                  )
-                }
-                placeholder="<p>请根据上述原因给出可落地的解决措施</p>"
-              />
-            </div>
-          </ReviewProblem>
-        );
-      });
-    }
-  };
-
-  // 添加参与人员
-  _handlerUserSelect = (users, depts) => {
-    let data = { ...this.state.data };
-    const { EditType } = this.props;
-    let participantsConcatArr = [...data.reviewParticipantsList, ...users]; // 人员
-    let departmentConcatArr = [...data.reviewDepartmentsList, ...depts]; // 部门
-    let 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
-        ? `${prevParticipantIds},${data.reviewParticipantsList
-            .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;
-    data.reviewDepartmentsList = this.deduplicationFunc(departmentConcatArr);
-    let departmentIds = data.reviewDepartmentsList
-      .map((item) => item.Id)
-      .join(",");
-
-    data.reviewMebers = this.deduplicationFunc(usersConcatArr);
-    this._updateReviewData(data, "participantIds", participantIds);
-    this._updateReviewData(data, "departmentIds", departmentIds);
-  };
-
-  // 数组去重
-  deduplicationFunc = (targetArr: any[]) => {
-    let resultArr: any[] = [];
-    targetArr.forEach((item) => {
-      let res = resultArr.filter((element) => item.Id === element.Id);
-      resultArr.forEach((element) => {
-        if (item.Id === element.Id) {
-          element = item;
-        }
-      });
-      if (res.length === 0) {
-        resultArr.push(item);
-      }
-    });
-    return resultArr;
-  };
-
-  // 删除参与人员
-  _handlerDeleteMember = (index: number) => {
-    let data = { ...this.state.data };
-    let reviewMebers = [...data.reviewMebers];
-    reviewMebers.splice(index, 1);
-    let 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>
-      );
-    });
-
-  // 获取改进计划数据
-  _getTaskListData = (taskData: any) => {
-    let data = { ...this.state.data };
-    let taskIds = data.taskIds;
-    let taskList = data.taskList;
-    taskIds = taskIds ? `${taskIds},${taskData.taskId}` : taskData.taskId;
-    taskList.push({
-      taskId: taskData.taskId,
-      taskName: taskData.taskName,
-      status: taskData.status,
-    });
-    this._updateReviewData(data, "taskIds", taskIds);
-    this._updateReviewData(data, "taskList", taskList);
-  };
-
-  // 改进计划
-  _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>
-      );
-    });
-
-  // 模式切换
-  _switchMode = () => {
-    let data = { ...this.state.data };
-    data.isStandardMode = !data.isStandardMode;
-    if (data.isStandardMode) {
-      data.Drawback =
-        data.drawbackList.length > 0 ? data.drawbackList[0].drawback : "";
-    } else {
-      if (data.drawbackList.length > 0) {
-        data.drawbackList[0].drawback = data.Drawback;
-      } else {
-        data.drawbackList.push({
-          drawbackId: 0,
-          drawback: data.Drawback,
-          cause: "",
-          measures: "",
-        });
-      }
-    }
-    this._updateReviewData(data);
-  };
-
-  // 更新复盘数据
-  _updateReviewData = (data: ReviewDataObject, key?: string, value?: any) => {
-    const { onChange } = this.props;
-    if (key) {
-      data[key] = value;
-    }
-    localStorage.setItem(this.localStorageKey, JSON.stringify(data));
-    onChange(data);
-    this.setState({ data });
-  };
-
-  stopPropagation = (e: any) => {
-    e.nativeEvent.stopImmediatePropagation();
-    e.stopPropagation();
-  };
-
-  render() {
-    const screenHeight = window.screen.height;
-    const { ObjData, EditType } = this.props;
-    console.log(ObjData);
-    let { data, popContainer } = this.state;
-    let maxHeight = 595;
-    screenHeight <= 768 ? (maxHeight = 300) : (maxHeight = 595);
-    return (
-      <ReviewBodyContainer>
-        <ReviewBodyScroll maxHeight={maxHeight}>
-          <ReviewTarget>
-            <ReviewCatalog>复盘对象</ReviewCatalog>
-            <ReviewContent className="target-name">
-              <IconTarget
-                className={ObjData.ObjType == 65 ? "review-kr" : "tu-icon-OKR"}
-              >
-                {ObjData.ObjType == 65
-                  ? `KR${ObjData.ObjIndex == 0 ? "" : ObjData.ObjIndex}`
-                  : ""}
-              </IconTarget>
-              <p className="okr-name">{htmlDecodeByRegExp(ObjData.ObjName)}</p>
-            </ReviewContent>
-          </ReviewTarget>
-          <ReviewWorth>
-            <ReviewCatalog>价值与收获</ReviewCatalog>
-            <TextareaView
-              maxLength={5000}
-              value={htmlDecodeByRegExp(data.gains)}
-              initialHeight={56}
-              style={{ marginLeft: "8px" }}
-              onChange={(value: string) =>
-                this._handlerReviewWorthChange(value)
-              }
-              placeholder="<p>我们从过程中学到了什么新东西？</p><p>如果有人要进行同样的行动，我会给他什么建议？</p>"
-            />
-          </ReviewWorth>
-          {this._renderReviewProblemView()}
-          {!data.isStandardMode && (
-            <AddReviewProblem
-              onClick={this._addReviewProblem}
-              className={data.drawbackList.length == 0 ? "none-drawback" : ""}
-            >
-              <IconAdd className="tu-icon-add"></IconAdd>
-              <span>添加问题与不足</span>
-            </AddReviewProblem>
-          )}
-          <ReviewAction ref="creatActionPlan">
-            <ReviewCatalog>改进计划</ReviewCatalog>
-            <ReviewContent>
-              {this._renderActionPlans(data.taskList)}
-              <BtnCreateTask
-                onClick={(e: any) =>
-                  this.renderCreateTaskView(e, ObjData, ObjData.workId)
-                }
-              >
-                <IconAdd className="tu-icon-add"></IconAdd>
-                创建行动计划
-              </BtnCreateTask>
-            </ReviewContent>
-          </ReviewAction>
-          <ReviewMember>
-            <ReviewCatalog>参与人员</ReviewCatalog>
-            <ReviewContent className="review-meber">
-              {this._renderReviewMembers(data.reviewMebers, EditType)}
-              <UserSelectorPop
-                align="top left"
-                container={popContainer}
-                onSubmit={(users, depts) => {
-                  this.stopPropagation;
-                  this._handlerUserSelect(users, depts);
-                }}
-              >
-                <div className="add-meber">
-                  <IconAdd className="tu-icon-add"></IconAdd>
-                </div>
-              </UserSelectorPop>
-            </ReviewContent>
-          </ReviewMember>
-          <ReviewMode>
-            <span onClick={this._switchMode}>
-              <IconSwitch className="tu-icon-change"></IconSwitch>
-              <span>{data.isStandardMode ? "高级模式" : "标准模式"}</span>
-            </span>
-          </ReviewMode>
-        </ReviewBodyScroll>
-      </ReviewBodyContainer>
-    );
-  }
-}