@titaui/pc 1.7.12 → 1.7.13

package/src/components/create-okr-modal/fields/okr-parent.tsx

@@ -1,131 +0,0 @@
-import React, { RefObject, useEffect, useRef, useState, Fragment } from "react";
-import { getApiUrl, taker } from "../utils/helper";
-import { SelectBtn, Space, TitleLine } from "../style";
-import { getUserInfo } from "../../../utils/bs-global";
-import ChangeOkr from "../../change-okr-modal";
-import "./index.scss";
-
-interface Props {
-  parent: any;
-  setParent: Function;
-  modalRef: any;
-  isCreateModal: boolean;
-  setParentOkr?: Function;
-}
-
-export default ({
-  parent,
-  setParent,
-  modalRef,
-  isCreateModal,
-  setParentOkr = () => {},
-}: Props) => {
-  const { Name, Id, UserAvatar } = getUserInfo();
-
-  //上级信息 对齐目标弹层用 【临时解决方案，做对齐目标弹层后在弹层中获取】
-  const [toUser, setToUser] = useState<any>();
-
-  const parentRef = useRef() as RefObject<ChangeOkr>;
-
-  const onSelectClickHandler = (e) => {
-    parentRef.current &&
-      parentRef.current.show(e.target, 0);
-  };
-
-  const iconCrossClickHandler = (e) => {
-    e.stopPropagation();
-    setParent({
-      parentWorkId: 0,
-      parentWorkName: "",
-      parentType: 0,
-      parentKrId: 0,
-    });
-    setParentOkr(null);
-  };
-
-  const onChangeOkrConfirmHandler = (confirm) => {
-    const { workId, _okrInfo } = confirm;
-    if (workId === 0) {
-      // 说明对齐目标是KR
-      const { mileStoneId, mileStoneName, workIdCopy } = confirm;
-      setParent({
-        parentWorkId: workIdCopy,
-        parentWorkName: mileStoneName,
-        parentType: 2,
-        parentKrId: mileStoneId,
-      });
-    } else {
-      // 我就是对齐目标
-      const { workId, workName } = confirm;
-      setParent({
-        parentWorkId: workId,
-        parentWorkName: workName,
-        parentType: 1,
-        parentKrId: 0,
-      });
-    }
-    setParentOkr(_okrInfo);
-  };
-
-  useEffect(() => {
-    // @ts-ignore
-    taker(getApiUrl("org/Get"), "get").then((res) => {
-      if (res.Code == 1) {
-        const { SuperiorUser } = res.Data;
-        if (SuperiorUser) {
-          setToUser({
-            name: SuperiorUser.Name,
-            userId: SuperiorUser.Id,
-            avatar: SuperiorUser.UserAvatar,
-          });
-        } else {
-          setToUser({
-            name: Name,
-            userId: Id,
-            avatar: UserAvatar,
-          });
-        }
-      }
-    });
-  }, []);
-
-  return (
-    <Fragment>
-      <div className="create-modal__sub-block">
-        {isCreateModal ? (
-          <div className="create-modal__sub-title">对齐目标</div>
-        ) : (
-          <TitleLine>对齐目标</TitleLine>
-        )}
-        <SelectBtn onClick={onSelectClickHandler}>
-          <span style={{ color: !parent.parentWorkName ? "#BFC7D5" : "" }}>
-            {!parent.parentWorkName
-              ? "选择对齐上级目标"
-              : parent.parentWorkName}
-          </span>
-          {!!parent.parentWorkName && (
-            <a className="tu-icon-cross" onClick={iconCrossClickHandler} />
-          )}
-          <i className="tu-icon-sort-down" />
-        </SelectBtn>
-      </div>
-
-      {toUser && (
-        <ChangeOkr
-          className="parent-target-pop-index"
-          alilgn="top"
-          container={modalRef.current && modalRef.current.getRef()}
-          eventBridge={""}
-          okrPopType={1}
-          toUser={toUser} // 这里异步数据
-          ref={parentRef}
-          parentId={
-            parent.parentType == 1 ? parent.parentWorkId : parent.parentKrId
-          }
-          onConfirm={onChangeOkrConfirmHandler}
-        />
-      )}
-      <Space />
-    </Fragment>
-  );
-};

package/src/components/create-okr-modal/fields/okr-type-detail.tsx

@@ -1,138 +0,0 @@
-import React, { RefObject, useRef, useState, useEffect, Fragment } from "react";
-import { Tooltip } from "tita-ui";
-import Confirm from "../../../components-v1/confirm";
-import ObjectType from "../objectType";
-import { updateOCommitType } from "../request-api";
-import "./index.scss";
-
-interface Props {
-  canEdit: boolean;
-  workId: number;
-  typeProp: any;
-  departIdProp?: any;
-  departNameProp?: any;
-  groupIdProp?: any;
-  groupNameProp?: any;
-}
-
-export default (props: Props) => {
-  const {
-    canEdit = false,
-    workId,
-    typeProp,
-    departIdProp,
-    departNameProp,
-    groupIdProp,
-    groupNameProp,
-  } = props;
-
-  const getType = (okrType, departName, groupName) => {
-    let typeId = 1,
-      typeName = "个人";
-    switch (okrType) {
-      case 1:
-        typeId = okrType;
-        typeName = "个人";
-        break;
-      case 2:
-        typeName = departName;
-        typeId = 2;
-        break;
-      case 3:
-        typeName = "公司";
-        typeId = 3;
-        break;
-      case 4:
-        typeName = groupName || "团队";
-        typeId = 4;
-        break;
-    }
-    return { typeId, typeName };
-  };
-  const [type, setType] = useState(
-    getType(typeProp, departNameProp, groupNameProp)
-  );
-  const [depart, setDepart] = useState({
-    departId: departIdProp,
-    departName: departNameProp,
-  });
-  const [group, setGroup] = useState({
-    groupId: groupIdProp,
-    groupName: groupNameProp,
-  });
-  const typeRef = useRef() as RefObject<Confirm>;
-  const objTypeRef = useRef() as RefObject<ObjectType>;
-
-  const updateType = async () => {
-    await updateOCommitType({
-      okrId: workId,
-      okrType: type.typeId,
-      departmentId: depart.departId,
-      groupId: group.groupId,
-    });
-  };
-  useEffect(() => {
-    if (
-      type.typeId !== typeProp ||
-      depart.departId !== departIdProp ||
-      group.groupId !== groupIdProp
-    ) {
-      updateType();
-    }
-  }, [type, group, depart]);
-
-  function objTypeConfirm() {
-    // 把值拿出来 放到 project-time 上
-    if (!objTypeRef.current) return;
-
-    let data = objTypeRef.current.state;
-    const { okrType, departmentId, departmentName, groupName, groupId } = data;
-
-    const type = getType(okrType, departmentName, groupName);
-    setType(type);
-    setDepart({ departId: departmentId, departName: departmentName });
-    setGroup({ groupName, groupId });
-  }
-
-  const onCancelHanderl = () => {
-    typeRef.current && typeRef.current.hide();
-  };
-
-  const onOkHandler = () => {
-    objTypeConfirm();
-    typeRef.current && typeRef.current.hide();
-  };
-  return (
-    <Fragment>
-      {canEdit && (
-        <Confirm
-          ref={typeRef}
-          innerContent={
-            <div className="okr-type">
-              <span>{type.typeName}</span>
-              {canEdit && (
-                <Tooltip content="编辑">
-                  <span className="tu-icon-edit edit-icon tu-ml-10" />
-                </Tooltip>
-              )}
-            </div>
-          }
-          onCancel={onCancelHanderl}
-          onOk={onOkHandler}
-          blurToHide
-        >
-          <ObjectType
-            ref={objTypeRef}
-            okrType={type.typeId}
-            okrTypeName={type.typeName}
-            departmentId={depart.departId}
-            departmentName={depart.departName}
-            groupId={group.groupId}
-            groupName={group.groupName}
-          />
-        </Confirm>
-      )}
-      {!canEdit && type.typeName}
-    </Fragment>
-  );
-};

package/src/components/create-okr-modal/fields/okr-type.tsx

@@ -1,111 +0,0 @@
-import { getBSGlobal } from "../../../utils/bs-global";
-import React, { RefObject, useRef } from "react";
-import { SelectBtn, TitleLine } from "../style";
-import ObjectType from "../objectType";
-import Confirm from "../../../components-v1/confirm";
-import { OpenDepartmentName } from "../../../utils/open-data";
-import "./index.scss";
-
-interface Props {
-  dept: any;
-  setDept: Function;
-  setType: Function;
-  type: any;
-  team: any;
-  setTeam: Function;
-  isCreateModal: boolean;
-}
-
-export default ({
-  dept,
-  setDept,
-  type,
-  setType,
-  setTeam,
-  team,
-  isCreateModal,
-}: Props) => {
-  const setting = getBSGlobal("OkrAdvancedSetting").KRSetting;
-  const openClassify = setting.OkrClassify;
-
-  const typeRef = useRef() as RefObject<Confirm>;
-  const objTypeRef = useRef() as RefObject<ObjectType>;
-
-  function objTypeConfirm() {
-    // 把值拿出来 放到 project-time 上
-    if (!objTypeRef.current) return;
-
-    let data = objTypeRef.current.state;
-    const { okrType, departmentId, departmentName, groupName, groupId } = data;
-
-    switch (okrType) {
-      case 1:
-        setType({ typeId: okrType, typeName: "个人" });
-        break;
-      case 2:
-        setType({ typeName: departmentName, typeId: 2 });
-        break;
-      case 3:
-        setType({ typeName: "公司", typeId: 3 });
-        break;
-      case 4:
-        setType({ typeName: groupName || "团队", typeId: 4 });
-        break;
-    }
-    setDept({ departmentId, departmentName });
-    setTeam({ groupName, groupId });
-  }
-
-  const onCancelHanderl = () => {
-    typeRef.current && typeRef.current.hide();
-  };
-
-  const onOkHandler = () => {
-    objTypeConfirm();
-    typeRef.current && typeRef.current.hide();
-  };
-
-  return (
-    <div
-      className="create-modal__sub-block"
-      style={{ flex: openClassify ? 1 : 2 }}
-    >
-      {isCreateModal ? (
-        <div className="create-modal__sub-title">类型</div>
-      ) : (
-        <TitleLine>类型</TitleLine>
-      )}
-      <Confirm
-        ref={typeRef}
-        innerContent={
-          <SelectBtn>
-            <span>
-              {type.typeId == 2 ? (
-                <OpenDepartmentName
-                  id={dept.departmentId}
-                  name={dept.departmentName}
-                />
-              ) : (
-                type.typeName
-              )}
-            </span>
-            <i className="tu-icon-sort-down" />
-          </SelectBtn>
-        }
-        onCancel={onCancelHanderl}
-        onOk={onOkHandler}
-        blurToHide
-      >
-        <ObjectType
-          ref={objTypeRef}
-          okrType={type.typeId}
-          okrTypeName={type.typeName}
-          departmentId={dept.departmentId}
-          departmentName={dept.departmentName}
-          groupId={team.groupId}
-          groupName={team.groupName}
-        />
-      </Confirm>
-    </div>
-  );
-};

package/src/components/create-okr-modal/fields/okr-visibility-detail.tsx

@@ -1,153 +0,0 @@
-import React, { useRef, useState, useEffect, Fragment } from "react";
-import { Select, Tooltip } from "tita-ui";
-import UserSelector from "../../user-selector";
-import {
-  OpenUserName,
-  OpenDepartmentName,
-  isWechat,
-} from "../../../utils/open-data";
-import { updateOkrVisibility } from "../request-api";
-import "./index.scss";
-
-interface Props {
-  canEdit: boolean;
-  workId: number;
-  visibilityProp?: number;
-  visiableScopeProp?: any;
-  onSave?: () => {};
-}
-
-const visibilityList = [
-  { value: 1, lable: "全公司" },
-  { value: 2, lable: "仅相关成员" },
-  { value: 3, lable: "仅直接下属" },
-  { value: 4, lable: "指定范围" },
-];
-
-export default ({
-  canEdit = false,
-  workId,
-  visibilityProp = 1,
-  visiableScopeProp = {},
-  onSave,
-}: Props) => {
-  const selectorRef = useRef<any>();
-
-  const [visibilityArea, setVisibilityArea] = useState(visiableScopeProp);
-  const [visibility, setVisibility] = useState(visibilityProp);
-
-  const updateVisibility = async () => {
-    const { users = [], departments = [], groups = [] } = visibilityArea;
-    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],
-      []
-    );
-    await updateOkrVisibility({
-      workId,
-      visibility,
-      areaUserIds,
-      areaOrgIds,
-      areaGroupIds,
-    });
-    onSave && onSave();
-  };
-
-  useEffect(() => {
-    if (!visibility) return;
-    updateVisibility();
-  }, [visibility, visibilityArea]);
-
-  const onOptionChange = (v) => {
-    if (v === 4) {
-      selectorRef.current && selectorRef.current.open();
-    } else {
-      setVisibility(v);
-    }
-  };
-  const onOk = (selectNodes) => {
-    setVisibility(4);
-    setVisibilityArea(selectNodes);
-    selectorRef.current && selectorRef.current.close();
-  };
-  const renderLabel = () => {
-    if (visibility === 4) {
-      let { groups = [], departments = [], users = [] } = visibilityArea;
-      let text: any[] = [],
-        jsxDom: any[] = [];
-      (departments || []).forEach((item) => {
-        jsxDom.push(<OpenDepartmentName id={item.id} name={item.name} />);
-        jsxDom.push(<span>、</span>);
-        text.push(item.name);
-      });
-      (users || []).forEach((item) => {
-        jsxDom.push(<OpenUserName id={item.userId} name={item.name} />);
-        jsxDom.push(<span>、</span>);
-        text.push(item.name);
-      });
-      (groups || []).forEach((item) => {
-        jsxDom.push(<span>{item.name}、</span>);
-        text.push(item.name);
-      });
-      if (!text.length) return "仅相关成员可见";
-      return isWechat() ? jsxDom : text.join("、");
-    }
-    // @ts-ignore
-    return visibilityList.find((i) => i.value === visibility).lable;
-  };
-  const renderSelect = () => {
-    return (
-      <div className="visibility">
-        <span>{renderLabel()}</span>
-        {canEdit && (
-          <Tooltip content="编辑">
-            <span className="tu-icon-edit visibility-edit-icon tu-ml-10" />
-          </Tooltip>
-        )}
-      </div>
-    );
-  };
-  return (
-    <Fragment>
-      {canEdit && (
-        <Fragment>
-          <UserSelector             ref={selectorRef}
-            // @ts-ignore
-            multiple
-            onOk={onOk}
-            position="center"
-            selectNodes={visibilityArea}
-            trigger={
-              <div
-                style={{
-                  visibility: "hidden",
-                  position: "absolute",
-                  zIndex: -1,
-                  height: 36,
-                }}
-              >
-                empty select
-              </div>
-            }
-          />
-          <Select
-            value={visibility}
-            onChange={onOptionChange}
-            options={visibilityList}
-            // @ts-ignore
-            onClick={(e) => e.stopPropagation()}
-            renderSelect={renderSelect}
-          />
-        </Fragment>
-      )}
-      {!canEdit && renderSelect()}
-    </Fragment>
-  );
-};

package/src/components/create-okr-modal/fields/okr-visibility.tsx

@@ -1,147 +0,0 @@
-import React, { useRef } from "react";
-import { Select, Tooltip } from "tita-ui";
-import UserSelector from "../../user-selector";
-import {
-  OpenUserName,
-  OpenDepartmentName,
-  isWechat,
-} from "../../../utils/open-data";
-import "./index.scss";
-import { TitleLine } from "../style";
-import { useMemo } from "react";
-interface Props {
-  visibility: any;
-  setVisibility: Function;
-  visiableLimit: any;
-  setVisiableLimit: Function;
-  isCreateModal: boolean;
-}
-
-const visibilityList = [
-  { value: 1, lable: "全公司" },
-  { value: 2, lable: "仅相关成员" },
-  { value: 3, lable: "仅直接下属" },
-  { value: 4, lable: "指定范围" },
-];
-
-const visibilityMapText = {
-  1: "全公司",
-  2: "仅相关成员",
-  3: "仅直接下属",
-  4: "指定范围",
-};
-
-export default ({
-  visibility,
-  setVisibility,
-  visiableLimit,
-  setVisiableLimit,
-  isCreateModal,
-}: Props) => {
-  const selectorRef = useRef<any>();
-  const onOptionChange = (v) => {
-    if (v === 4) {
-      selectorRef.current && selectorRef.current.open();
-    } else {
-      setVisibility(v);
-    }
-  };
-  const onOk = (selectNodes) => {
-    const { departments, groups, users } = selectNodes;
-    if (departments.length === 0 && groups.length === 0 && users.length === 0) {
-      selectorRef.current && selectorRef.current.close();
-      return;
-    }
-    setVisibility(4);
-    setVisiableLimit(selectNodes);
-    selectorRef.current && selectorRef.current.close();
-  };
-  const renderLabel = ({ value, lable }) => {
-    if (value === 4) {
-      let { groups = [], departments = [], users = [] } = visiableLimit;
-      let text: any[] = [],
-        jsxDom: any[] = [];
-      (departments || []).forEach((item) => {
-        jsxDom.push(<OpenDepartmentName id={item.id} name={item.name} />);
-        jsxDom.push(<span>、</span>);
-        text.push(item.name);
-      });
-      (users || []).forEach((item) => {
-        jsxDom.push(<OpenUserName id={item.userId} name={item.name} />);
-        jsxDom.push(<span>、</span>);
-        text.push(item.name);
-      });
-      (groups || []).forEach((item) => {
-        jsxDom.push(<span>{item.name}、</span>);
-        text.push(item.name);
-      });
-      if (!text.length) {
-        return visibilityMapText[visibility];
-      }
-      return isWechat() ? jsxDom : text.join("、");
-    }
-    return lable;
-  };
-
-  const subTitleRender = useMemo(() => {
-    return (
-      <span className="okr-field-visible">
-        可见范围
-        <Tooltip
-          content={
-            "除所选范围外，超级管理员、目标管理员、目标负责人的部门负责人以及目标负责人、内部成员、关注者上级领导也可见"
-          }
-          container={document.body}
-        >
-          <span
-            className={"tu-icon-question-mark"}
-            style={{
-              display: "inline-block",
-              marginLeft: 8,
-              marginBottom: 3,
-              color: "#bfc7d5",
-              verticalAlign: "middle",
-            }}
-          />
-        </Tooltip>
-      </span>
-    );
-  }, []);
-
-  return (
-    <div className="create-modal__sub-block">
-      {isCreateModal ? (
-        <div className="create-modal__sub-title">{subTitleRender}</div>
-      ) : (
-        <TitleLine>{subTitleRender}</TitleLine>
-      )}
-      <UserSelector         ref={selectorRef}
-        // @ts-ignore
-        multiple={true}
-        onOk={onOk}
-        position="centerRight"
-        selectNodes={visiableLimit}
-        trigger={
-          <div
-            style={{
-              visibility: "hidden",
-              position: "absolute",
-              zIndex: -1,
-              height: 36,
-            }}
-          >
-            empty select
-          </div>
-        }
-      />
-      <Select
-        value={visibility}
-        onChange={onOptionChange}
-        options={visibilityList}
-        // @ts-ignore
-        onClick={(e) => e.stopPropagation()}
-        renderLabel={renderLabel}
-      />
-    </div>
-  );
-};

package/src/components/create-okr-modal/img/check-normal.svg

@@ -1,29 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>默认</title>
-    <defs>
-        <circle id="path-1" cx="8" cy="8" r="4"></circle>
-        <filter x="-78.1%" y="-78.1%" width="256.2%" height="256.2%" filterUnits="objectBoundingBox" id="filter-2">
-            <feMorphology radius="0.25" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"></feMorphology>
-            <feOffset dx="0" dy="0" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
-            <feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
-            <feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"></feComposite>
-            <feColorMatrix values="0 0 0 0 0.749019608   0 0 0 0 0.780392157   0 0 0 0 0.835294118  0 0 0 1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
-        </filter>
-    </defs>
-    <g id="创建OKR" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="激活-关键成果" transform="translate(-1011.000000, -444.000000)">
-            <g id="单行" transform="translate(976.000000, 129.000000)">
-                <g id="编组-12" transform="translate(23.000000, 267.000000)">
-                    <g id="默认" transform="translate(13.000000, 49.000000)">
-                        <circle id="椭圆形" fill="#BFC7D5" opacity="0.08" cx="8" cy="8" r="8"></circle>
-                        <g id="椭圆形">
-                            <use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
-                            <use stroke="#FFFFFF" stroke-width="0.5" fill="#BFC7D5" fill-rule="evenodd" xlink:href="#path-1"></use>
-                        </g>
-                    </g>
-                </g>
-            </g>
-        </g>
-    </g>
-</svg>