@titaui/pc 1.7.12 → 1.7.13

package/src/components/create-okr-modal/index.tsx

@@ -1,728 +0,0 @@
-import React, {
-  useEffect,
-  useRef,
-  useState,
-  useImperativeHandle,
-  forwardRef,
-  Ref,
-  useMemo,
-  useCallback,
-  Fragment,
-} from "react";
-import uuid from "uuid";
-import { Modal } from "tita-ui";
-import { getBSGlobal, getUserInfo } from "../../utils/bs-global";
-import { RoundWeight } from "../../utils/roundWeight";
-import Toast from "../toast";
-import KrDatas from "./kr-items/krDatas";
-import { KrData } from "./kr-items/krItem";
-import { Wrapper, Line, Space, BlueBar } from "./style";
-import { CreateCycleData } from "./createCycle";
-import { OkrCase } from "./interface";
-import FieldONewName from "./fields/o-new-name";
-import FieldDateCycle from "./fields/date-cycle";
-import FieldVisibility from "./fields/okr-visibility";
-import FieldOkrType from "./fields/okr-type";
-import FieldOkrClassify from "./fields/okr-classify";
-import FieldOkrParent from "./fields/okr-parent";
-import OKRCASE from "./fields/okr-case";
-import drawerManager from "../drawer-manager";
-import OkrCreateSuggest, {
-  EOkrCreateSuggestResultType,
-} from "./fields/okr-create-suggest";
-import {
-  ODesc,
-  OExample,
-  OCheckTarget,
-  KrDesc,
-  KrExample,
-  KrCheckTarget,
-} from "./constant";
-import getCreateOkrSurpassPercent from "./utils/getCreateOkrSurpassPercent";
-import CreateSuccessCmpWrapper from "./createSuccessCmpWrapper";
-import CreateSuccessCmp from "./createSuccessCmp";
-import { isDingDing } from "../../utils/helpers";
-import { getImageBase64ByUrl, createWidthKr } from "./request-api";
-import TeachOkr from "./img/teach-okr.svg";
-import HandSvg from "./img/hand.svg";
-import "./index.scss";
-
-interface UserAvatarObj {
-  Big: string;
-  Color: string;
-  HasAvatar: boolean;
-  Large: string;
-  Medium: string;
-  Normal: string;
-  Original: string;
-  Small: string;
-}
-interface UserInfoObj {
-  Name: string;
-  Id: number;
-  UserAvatar: UserAvatarObj;
-}
-interface Props {
-  initCycle?: CreateCycleData;
-  userInfo?: UserInfoObj;
-  onSuccess?: Function;
-  onClose?: Function;
-  isPerformance?: boolean;
-  handleCreatedClose?:Function;
-  visible?: boolean;
-}
-
-const initOCheckResult = OCheckTarget.map((item) => {
-  return{
-    text: item,
-    result: EOkrCreateSuggestResultType.normal,
-  };
-});
-
-function CreateOkrModal(
-  { initCycle, userInfo, onSuccess, isPerformance = false, handleCreatedClose = () => {}, visible = false,onClose = () => {}}: Props,
-  ref: Ref<CreateOkrRefObject>
-) {
-  const [isVisible, setVisible] = useState(visible);
-  // @ts-ignore
-  const userId = BSGlobal.loginUserInfo.Id;
-  const setting = getBSGlobal("OkrAdvancedSetting").KRSetting;
-  const openOkrType = setting.OkrTypeSetting;
-  const openClassify = setting.OkrClassify;
-  const openKrWeight = setting.KrWeight;
-  const { Name, Id, UserAvatar } = userInfo || getUserInfo();
-
-  const [okrName, setOkrName] = useState(""); // 目标名称
-  const [user, setUser] = useState({ name: Name, id: Id, avatar: UserAvatar }); // 负责人
-  const [isCustomWeight, setIsCustomWeight] = useState(false); // 是否自定义权重
-  const [dept, setDept] = useState({ departmentId: 0, departmentName: "" }); // 部门信息 用于目标类型为部门时
-  const [team, setTeam] = useState({ groupId: 0, groupName: "" }); // 团队信息 用于目标类型为团队时
-  const [type, setType] = useState({ typeName: "个人", typeId: 1 }); // 目标类型
-  const [cycle, setCycle] = useState<CreateCycleData>(
-    initCycle as CreateCycleData
-  ); // 目标周期信息
-  const [okrClassify, setOkrClassify] = useState(); // 目标类别
-  const [visibility, setVisibility] = useState(1); // 可见性
-  const [visiableLimit, setVisiableLimit] = useState<any>({}); // 可见性指定范围
-  const [krDatas, setKrDatas] = useState<KrData[]>([
-    {
-      // kr信息
-      uuid: uuid.v1(),
-      principalId: Id,
-      principalName: Name,
-      userAvatar: UserAvatar,
-      krWeight: 100,
-      mileStoneName: "",
-      confidenceIndex: 5,
-    },
-  ]);
-  const [parent, setParent] = useState({
-    // 对其目标
-    parentWorkId: 0,
-    parentWorkName: "",
-    parentType: 0,
-    parentKrId: 0,
-  });
-  const [oNameIsInput, setONameIsInput] = useState(false);
-  const [krIsInput, setKrIsInput] = useState(false);
-  const [oNameCheckResult, setONameCheckResult] = useState(initOCheckResult);
-  const [krsCheckResult, setKrsCheckResult] = useState<{
-    finalResult: EOkrCreateSuggestResultType;
-    friendlyResult: any[];
-  }>({ finalResult: EOkrCreateSuggestResultType.normal, friendlyResult: [] });
-  const [customCloseOSuggest, setCustomCloseOSuggest] = useState(false); // 用户点击收起后不再自动弹出
-  const [customCloseKrSuggest, setCustomCloseKrSuggest] = useState(false);
-  const [createdSuccessInfo, setCreatedSuccessInfo] = useState<any>();
-  const [showCreatedSuccessInfo, setShowCreatedSuccessInfo] = useState(false);
-  const [tipIndex, setTipIndex] = useState(Math.floor(Math.random() * 6));
-  const [userAvatarBase64Url, setUserAvatarBase64Url] = useState("");
-  const [krIsValidate, setKrIsValidate] = useState(false);
-  const [isApplyTpl, setIsApplyTpl] = useState(false);
-  const [isInputContent, setIsInputContent] = useState(false);
-
-  const wrapperRef = useRef<HTMLDivElement>();
-  const modalRef = useRef<any>();
-  const oInputFoucsRef = useRef(false);
-  const krInputFoucsRef = useRef(false);
-  const downloadDomRef = useRef(document.createElement("div"));
-  const newOkrDataRef = useRef<any>();
-
-  //kr权重总计
-  let total = 0;
-  krDatas.forEach((kr) => (total += Number(kr.krWeight)));
-
-  //权重未自定义过或总计为100为合法权重
-  const krWeightValid =
-    !isCustomWeight || total == 100 || krDatas.length == 0 || !openKrWeight;
-  const allKrHasName =
-    krDatas.filter((kr) => !kr.mileStoneName.trim().length).length == 0;
-
-  const showCreateOkrModal = useCallback(() => {
-    setVisible(true);
-  }, []);
-
-  const hideCreateOkrModal = useCallback(() => {
-    onClose && onClose()
-    setVisible(false);
-  }, []);
-
-  useEffect(()=>{
-    setVisible(visible)
-  },[visible])
-
-  useImperativeHandle(ref, () => ({
-    setCase: (data: OkrCase) => {
-      const { name, subelements } = data;
-      setOkrName(name);
-      setKrDatas(
-        subelements.map((s) => ({
-          uuid: uuid.v1(),
-          principalId: Id,
-          principalName: Name,
-          userAvatar: UserAvatar,
-          krWeight: RoundWeight(100 / subelements.length),
-          mileStoneName: s.name,
-          confidenceIndex: 5,
-        }))
-      );
-      setIsCustomWeight(false);
-    },
-    setData: (data) => {
-      setOkrName(data.okrName);
-      setUser(data.user);
-    },
-  }));
-
-  const handleOnSuccess = useCallback(() => {
-    const data = newOkrDataRef.current;
-    data.userAvatarBase64Url = userAvatarBase64Url;
-    setCreatedSuccessInfo(data);
-    if (
-      !localStorage.getItem(`dontShowValue${userId}`) &&
-      !isPerformance &&
-      !isApplyTpl
-    ) {
-      setShowCreatedSuccessInfo(true);
-      setTipIndex(Math.floor(Math.random() * 6));
-    } else {
-      Toast.Success("创建成功", { duration: 3000 });
-      onSuccess && onSuccess(data);
-    }
-  }, [userAvatarBase64Url, isApplyTpl]);
-
-  const formatVisiableLimit = () => {
-    const { users = [], departments = [], groups = [] } = visiableLimit;
-    let areaUserIds = (users || []).reduce(
-      (res, cur) => [...res, cur.userId],
-      []
-    );
-    let areaOrgIds = (departments || []).reduce(
-      (res, cur) => [...res, cur.id],
-      []
-    );
-    let areaGroupIds = (groups || []).reduce(
-      (res, cur) => [...res, cur.id],
-      []
-    );
-    return { areaUserIds, areaOrgIds, areaGroupIds };
-  };
-  // 表单保存功能
-  const onModalOkHandler = async () => {
-    if (!okrName) {
-      Toast.Error("目标名称不能为空", { canClose: false });
-      return;
-    }
-    if (okrName.length > 500) {
-      Toast.Error("目标名称不能超过500字", { canClose: false });
-      return;
-    }
-    if (!allKrHasName) {
-      Toast.Error("关键成果不能为空", { canClose: false });
-      setKrIsValidate(true);
-      return;
-    }
-    const orkNameLengthValidate =
-      krDatas.filter((kr) => kr.mileStoneName.trim().length > 500).length == 0;
-    if (!orkNameLengthValidate) {
-      Toast.Error("关键成果不能超过500字", { canClose: false });
-      return;
-    }
-    setKrIsValidate(false);
-    if (!krWeightValid) {
-      Toast.Error("关键成果总权重不等于100%", { canClose: false });
-      return;
-    }
-    if (!cycle) return;
-    handleCreatedClose();
-    const visibilityArea = formatVisiableLimit();
-    const data = await createWidthKr({
-      krInfos: krDatas.map((kr) => ({
-        ...kr,
-        startDate: cycle.startDate,
-        endDate: cycle.endDate,
-      })),
-      ...cycle,
-      workName: okrName,
-      ...parent,
-      workType: 6,
-      visibility,
-      okrClassify: openClassify ? okrClassify : "",
-      okrType: openOkrType ? type.typeId : "",
-      ...dept,
-      ...team,
-      workRoles: [{ roleType: 1, models: [user] }],
-      ...visibilityArea,
-    });
-    if (data.Code === 0) {
-      Toast.Error("创建失败，请重试", { canClose: false });
-      return;
-    }
-    hideCreateOkrModal();
-    if (onSuccess || !isPerformance) {
-      // 带上超过创建okr人数的计算值
-      const krNum = krDatas.length;
-      let krTotalLength = 0;
-      krDatas &&
-        krDatas.forEach((kr) => {
-          // 计算平均长度要去掉百分号和数字
-          krTotalLength += kr.mileStoneName.replace(/(%|\d)/g, "").length;
-        });
-      const krAvarageLength =
-        krDatas.length > 0 ? krTotalLength / krDatas.length : 0;
-      const krMeasurableLength = krsCheckResult.friendlyResult.filter((kr) => {
-        return kr.hasNumWords === true;
-      }).length;
-      const oHasVtWords =
-        oNameCheckResult[0].result === EOkrCreateSuggestResultType.correct
-          ? true
-          : false;
-      const callData = data;
-      callData.countSurpassPercentage = getCreateOkrSurpassPercent(
-        okrName.replace(/(%|\d)/g, "").length,
-        oHasVtWords,
-        krNum,
-        krMeasurableLength,
-        Number.parseInt(krAvarageLength.toString())
-      );
-      newOkrDataRef.current = callData;
-      handleOnSuccess();
-    } else {
-      let workId = data.workId;
-      drawerManager.open("okrDetail", { okrId: workId });
-    }
-    setIsApplyTpl(false);
-  };
-
-  // 从OKR案例库中应用模板
-  const OnOkRApplyTplHandler = (data) => {
-    const { name, subelements } = data;
-    setOkrName(name);
-    setKrDatas(
-      subelements.map((s) => ({
-        uuid: uuid.v1(),
-        principalId: Id,
-        principalName: Name,
-        userAvatar: UserAvatar,
-        krWeight: RoundWeight(100 / subelements.length),
-        mileStoneName: s.name,
-        confidenceIndex: 5,
-      }))
-    );
-    setIsCustomWeight(false);
-    setIsApplyTpl(true);
-  };
-
-  useEffect(() => {
-    if (!isVisible) {
-      setKrDatas([
-        {
-          uuid: uuid.v1(),
-          principalId: Id,
-          principalName: Name,
-          userAvatar: UserAvatar,
-          krWeight: 100,
-          mileStoneName: "",
-          confidenceIndex: 5,
-        },
-      ]);
-      setOkrName("");
-      setUser({ name: Name, id: Id, avatar: UserAvatar });
-      setIsCustomWeight(false);
-      setDept({ departmentId: 0, departmentName: "" });
-      setType({ typeName: "个人", typeId: 1 });
-      setCycle(cycle);
-      setOkrClassify(undefined);
-      setVisibility(1);
-      setParent({
-        parentWorkId: 0,
-        parentWorkName: "",
-        parentType: 0,
-        parentKrId: 0,
-      });
-    }
-  }, [isVisible]);
-
-  const handleONameSuggestClose = useCallback(() => {
-    setONameIsInput(false);
-    setCustomCloseOSuggest(true);
-  }, []);
-
-  const handleKrSuggestClose = useCallback(() => {
-    setKrIsInput(false);
-    setCustomCloseKrSuggest(true);
-  }, []);
-
-  const handleOInputFocusStateChange = useCallback((state) => {
-    if (state) {
-      setKrIsInput(false);
-      oInputFoucsRef.current = true;
-      setONameIsInput(state);
-    } else {
-      // 为了解决输入框聚焦之后，点击小手检查窗口还在引入了这个 ref，但是这个 ref 会在正常失焦也被赋值，所以需要一定时间后赋为默认值，krInputFoucsRef 也是
-      setTimeout(() => {
-        oInputFoucsRef.current = false;
-      }, 500);
-      // 为了解决输入框聚焦之后，点击收起时组件先销毁然后无法触发关闭事件
-      setTimeout(() => {
-        setONameIsInput(false);
-      }, 100);
-    }
-  }, []);
-
-  const handleKrInputStateChange = useCallback((state) => {
-    if (state) {
-      setONameIsInput(false);
-      krInputFoucsRef.current = true;
-      // 防止从上一个kr输入框聚焦情况直接tab切到下一个不展示输入框
-      setTimeout(() => {
-        setKrIsInput(state);
-      }, 100);
-    } else {
-      setTimeout(() => {
-        krInputFoucsRef.current = false;
-      }, 500);
-      setTimeout(() => {
-        setKrIsInput(false);
-      }, 100);
-    }
-  }, []);
-
-  const handleShowOSuggest = useCallback(() => {
-    setCustomCloseOSuggest(false);
-    if (oInputFoucsRef.current) {
-      oInputFoucsRef.current = false;
-      let result = oNameIsInput;
-      if (customCloseOSuggest) {
-        result = true;
-      } else {
-        result = !oNameIsInput;
-      }
-      setTimeout(() => {
-        setONameIsInput(result);
-        if (!result) {
-          setCustomCloseOSuggest(true);
-        }
-      }, 100);
-      return;
-    }
-    setTimeout(() => {
-      setONameIsInput(!oNameIsInput);
-      if (oNameIsInput) {
-        setCustomCloseOSuggest(true);
-      }
-    }, 100);
-    setKrIsInput(false);
-  }, [oNameIsInput, customCloseOSuggest]);
-
-  const handleShowKrSuggest = useCallback(() => {
-    setCustomCloseKrSuggest(false);
-    if (krInputFoucsRef.current) {
-      krInputFoucsRef.current = false;
-      let result = krIsInput;
-      if (customCloseKrSuggest) {
-        result = true;
-      } else {
-        result = !krIsInput;
-      }
-      setTimeout(() => {
-        setKrIsInput(result);
-        if (!result) {
-          setCustomCloseKrSuggest(true);
-        }
-      }, 100);
-      return;
-    }
-    setTimeout(() => {
-      setKrIsInput(!krIsInput);
-      if (krIsInput) {
-        setCustomCloseKrSuggest(true);
-      }
-    }, 100);
-    setONameIsInput(false);
-  }, [krIsInput, krIsInput]);
-
-  const ModalTitle = useMemo(() => {
-    return (
-      <Line>
-        <span className="create-modal__title">创建目标</span>
-        <OKRCASE okrTemplateEnabled={true} onOkrApply={OnOkRApplyTplHandler} />
-      </Line>
-    );
-  }, []);
-
-  const krCheckFinalResult = useMemo(() => {
-    return KrCheckTarget.map((item, index) => {
-      if (index === 0) {
-        return {
-          text: item,
-          result:
-            krDatas.length > 0
-              ? EOkrCreateSuggestResultType.correct
-              : EOkrCreateSuggestResultType.wrong,
-        };
-      } else if (index === 1) {
-        return {
-          text: item,
-          result:
-            krDatas.length <= 5
-              ? EOkrCreateSuggestResultType.correct
-              : EOkrCreateSuggestResultType.wrong,
-        };
-      } else {
-        return {
-          text: item,
-          result: krsCheckResult.finalResult,
-        };
-      }
-    });
-  }, [krDatas, krsCheckResult.finalResult]);
-
-  const handleCloseShowSuccessInfo = useCallback((dontShowValue) => {
-    if (dontShowValue) {
-      localStorage.setItem(`dontShowValue${userId}`, userId);
-    }
-    setShowCreatedSuccessInfo(false);
-    onSuccess && onSuccess(newOkrDataRef.current);
-  }, []);
-
-  const handleCloseAndShowDetail = useCallback((dontShowValue, workId) => {
-    if (dontShowValue) {
-      localStorage.setItem(`dontShowValue${userId}`, userId);
-    }
-    setShowCreatedSuccessInfo(false);
-    drawerManager.open("okrDetail", { okrId: workId });
-    onSuccess && onSuccess(newOkrDataRef.current);
-  }, []);
-
-  useEffect(() => {
-    if(!isVisible) return;
-    // @ts-ignore
-    getImageBase64ByUrl(user.id)
-      .then((data) => {
-        console.log(data)
-        setUserAvatarBase64Url(data.Data.obj);
-      })
-      .catch((err) => {
-        Toast.Error(err);
-      });
-  }, [user,isVisible]);
-  
-  const trackAction = () => {
-    // @ts-ignore
-    window.titaTracker && window.titaTracker('action').record({
-        actionName: '点击【教你写OKR】',
-        actionGroup: '创建OKR',
-        productName: 'OKR'
-      })
-  }
-
-  const renderFooterTeachWriteOKr = useMemo(() => {
-    {
-      /*钉钉用  https://wiki.tita.com/pages/viewpage.action?pageId=15696093 */
-    }
-    return (
-      <a
-        className="teact-write-okr"
-        href={
-          isDingDing()
-            ? "https://wiki.tita.com/pages/viewpage.action?pageId=15696093"
-            : "https://docs.tita.com/question/okr-write/"
-        }
-        target="_blank"
-        onClick={trackAction}
-      >
-        <img className="teact-write-okr__icon" src={TeachOkr} />
-        <span className="teact-write-okr__text">教你写 OKR</span>
-      </a>
-    );
-  }, []);
-
-  useEffect(() => {
-    // @ts-ignore
-    window.showCreateOkrModal = showCreateOkrModal;
-    // @ts-ignore
-    window.hideCreateOkrModal = hideCreateOkrModal;
-  }, []);
-
-  return (
-    <Fragment>
-      <div>
-        <Modal
-          ref={modalRef}
-          width={600}
-          mask
-          centered
-          onOk={onModalOkHandler}
-          okText="立即创建"
-          title={ModalTitle}
-          visible={isVisible}
-          onCancel={hideCreateOkrModal}
-          maskClosable={false}
-          footerLeftContent={renderFooterTeachWriteOKr}
-        >
-          <Wrapper ref={wrapperRef}>
-            <FieldONewName
-              container={modalRef}
-              user={user}
-              setUser={setUser}
-              okrName={okrName}
-              setOkrName={setOkrName}
-              onOInputFocusStateChange={handleOInputFocusStateChange}
-              setONameCheckResult={setONameCheckResult}
-              setIsInputContent={setIsInputContent}
-            />
-            <KrDatas
-              krs={krDatas}
-              isCustomWeight={isCustomWeight}
-              wrapperRef={wrapperRef}
-              krDatas={krDatas}
-              setKrDatas={setKrDatas}
-              container={modalRef}
-              setIsCustomWeight={setIsCustomWeight}
-              handleKrInputStateChange={handleKrInputStateChange}
-              setKrsCheckResult={setKrsCheckResult}
-              krIsValidate={krIsValidate}
-              setKrIsValidate={setKrIsValidate}
-              setIsInputContent={setIsInputContent}
-            />
-            <div className="create-modal__title-line">
-              <BlueBar />
-              更多设置
-            </div>
-            <div className={`space-between-row`}>
-              <FieldOkrParent
-                parent={parent}
-                modalRef={modalRef}
-                setParent={setParent}
-                isCreateModal={true}
-              />
-              <FieldDateCycle
-                cycle={cycle}
-                modalRef={modalRef}
-                setCycle={setCycle}
-                user={user}
-                setUser={setUser}
-                isCreateModal
-              />
-            </div>
-
-            <div
-              className={`space-between-row space-between-row--margin-bottom-4`}
-            >
-              <FieldVisibility
-                visibility={visibility}
-                setVisibility={setVisibility}
-                visiableLimit={visiableLimit}
-                setVisiableLimit={setVisiableLimit}
-                isCreateModal
-              />
-              {openOkrType && <Space />}
-              <div className={`space-between-row okr-type-classify`}>
-                {openOkrType && (
-                  <FieldOkrType
-                    dept={dept}
-                    type={type}
-                    setDept={setDept}
-                    setType={setType}
-                    team={team}
-                    setTeam={setTeam}
-                    isCreateModal
-                  />
-                )}
-                {openClassify && <Space />}
-                {openClassify && (
-                  <FieldOkrClassify
-                    okrClassify={okrClassify}
-                    setOkrClassify={setOkrClassify}
-                    isCreateModal
-                  />
-                )}
-              </div>
-            </div>
-            {!customCloseOSuggest && oNameIsInput ? (
-              <OkrCreateSuggest
-                isInput={isInputContent}
-                isOSuggest
-                descs={ODesc}
-                example={OExample}
-                results={oNameCheckResult}
-                handleClose={handleONameSuggestClose}
-              />
-            ) : null}
-            <img
-              className="teach-suggest teach-suggest__o"
-              src={HandSvg}
-              onClick={handleShowOSuggest}
-            />
-            {!customCloseKrSuggest && krIsInput ? (
-              <OkrCreateSuggest
-                isInput={isInputContent}
-                isOSuggest={false}
-                descs={KrDesc}
-                example={KrExample}
-                results={krCheckFinalResult}
-                handleClose={handleKrSuggestClose}
-              />
-            ) : null}
-            <img
-              className="teach-suggest teach-suggest__kr"
-              src={HandSvg}
-              onClick={handleShowKrSuggest}
-            />
-          </Wrapper>
-        </Modal>
-      </div>
-      {!isApplyTpl && !isPerformance && showCreatedSuccessInfo ? (
-        <CreateSuccessCmpWrapper>
-          <CreateSuccessCmp
-            tipIndex={tipIndex}
-            createdSuccessInfo={createdSuccessInfo}
-            isDownload={false}
-            onCloseModel={handleCloseShowSuccessInfo}
-            onShowDetail={handleCloseAndShowDetail}
-            downLoadRef={downloadDomRef}
-          />
-        </CreateSuccessCmpWrapper>
-      ) : null}
-      {/* 如果 isVisible 是 hidden，则因为无法获取到样式截取不到图片导致下载下来白图*/}
-      {!isApplyTpl && !isPerformance && showCreatedSuccessInfo ? (
-        <div className="download-dom--hidden">
-          <CreateSuccessCmp
-            tipIndex={tipIndex}
-            createdSuccessInfo={createdSuccessInfo}
-            isDownload={true}
-            onCloseModel={handleCloseShowSuccessInfo}
-            onShowDetail={handleCloseAndShowDetail}
-            downLoadRef={downloadDomRef}
-          />
-        </div>
-      ) : null}
-    </Fragment>
-  );
-}
-
-interface CreateOkrRefObject {
-  setCase: (data: OkrCase) => any;
-}
-
-export default forwardRef(CreateOkrModal);