@titaui/pc 1.7.13 → 1.7.17

package/src/components/okr-detail/components/o-classify.tsx

@@ -0,0 +1,83 @@
+import React, { useState } from "react";
+import classNames from "classnames";
+import Toast from "../../toast";
+
+import Tooltip from "../../tooltip";
+import Popup from "../../popup";
+import { updateClassify } from "../request-apis";
+
+interface IOclassifyProps {
+  editable: boolean;
+  okrId: number;
+  okrClassify: number;
+  onOkrClassifyChange?: Function;
+}
+const OClassify = (props: IOclassifyProps) => {
+  const { editable, okrId, okrClassify, onOkrClassifyChange } = props;
+
+  const [OkrClassifySetting] = useState(() => {
+    return window.BSGlobal.OkrAdvancedSetting.KRSetting.OkrClassify;
+  });
+  const [visible, setVisible] = useState(false);
+
+  
+  const updateClassifyHandler = async (select) => {
+    if (select == okrClassify) {
+      setVisible(false);
+      return;
+    }
+    const res = await updateClassify({
+      okrId,
+      'okrClassify': select,
+    });
+    onOkrClassifyChange(select);
+    setVisible(false);
+    Toast.Success("修改成功", { style: { top: 60 } });
+  };
+
+  const popContent = (
+    <div className="okr-drawer-header__classify-popup">
+      <div
+        className="okr-drawer-header__classify-popup-item"
+        onClick={() => updateClassifyHandler(1)}
+      >
+        承诺型
+      </div>
+      <div
+        className="okr-drawer-header__classify-popup-item"
+        onClick={() => updateClassifyHandler(2)}
+      >
+        愿景型
+      </div>
+    </div>
+  );
+  
+  if (!OkrClassifySetting || okrClassify == 0) return null;
+  if (editable) {
+    return (
+      <Popup popup={popContent} popupVisible={visible} placement="bottomLeft">
+        <Tooltip overlay={okrClassify == 1 ? "承诺型" : "愿景型"} placement="top">
+          <span
+            className={classNames("okr-drawer-header__classify", {
+              "okr-drawer-header__classify--promise": okrClassify == 1,
+              "okr-drawer-header__classify--vision": okrClassify == 2,
+            })}
+            onClick={() => setVisible(true)}
+          />
+        </Tooltip>
+      </Popup>
+    );
+  } else {
+    return (
+      <Tooltip overlay={okrClassify == 1 ? "承诺型" : "愿景型"} palcement="top">
+        <span
+          className={classNames("okr-drawer-header__classify", {
+            "okr-drawer-header__classify--promise": okrClassify == 1,
+            "okr-drawer-header__classify--vision": okrClassify == 2,
+          })}
+        />
+      </Tooltip>
+    );
+  }
+};
+export default OClassify;

package/src/components/okr-detail/components/o-progress-update/index.tsx

@@ -0,0 +1,49 @@
+import React, { useState, useContext } from "react";
+import { CommonContext } from "../../context";
+import Toast from "../../../toast";
+import ProgressModal from '../../../okr-progress-modal'
+import { updateProgress } from "../../request-apis";
+interface IProps {
+  okrInfo: any;
+  renderContent: Function;
+  setProgress?: Function;
+  title?: string;
+  setUpdateData?: Function;
+}
+const OProgressUpdate = (props: IProps) => {
+  const { okrInfo, renderContent, setProgress, setUpdateData, title = "更新目标完成度" } = props;
+  const [visible, setVisible] = useState(false);
+  const commonContext = useContext(CommonContext);
+  const { refreshAll } = commonContext;
+
+  const cancelHandler = () => setVisible(false);
+  const confirmHandler = async (params) => {
+    setUpdateData && setUpdateData(params);
+    const data = await updateProgress({
+      workId: okrInfo.workId,
+      ...params,
+    });
+    if (data.Code == 1) {
+      Toast.Success("更新成功");
+      refreshAll && refreshAll();
+      setVisible(false)
+    } else {
+      Toast.Error(data.Message);
+    }
+  };
+  const openModal = () => setVisible(true);
+
+  return (
+    <span className={`okr-drawer__action-progress`}>
+      {renderContent({onOpenModal: openModal})}
+      <ProgressModal
+        title={title}
+        okrInfo={okrInfo}
+        visible={visible}
+        onClose={cancelHandler}
+        onOk={confirmHandler}
+      />
+    </span>
+  );
+};
+export default OProgressUpdate;

package/src/components/okr-detail/components/okr-tree/images/O.svg

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="10px" height="10px" viewBox="0 0 10 10" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>O</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="对齐我的目标" transform="translate(-589.000000, -741.000000)" fill="#2879FF" fill-rule="nonzero">
+            <g id="居中弹窗" transform="translate(0.000000, -1.000000)">
+                <g id="编组-10" transform="translate(578.000000, 702.000000)">
+                    <g id="编组-12" transform="translate(0.000000, 34.000000)">
+                        <g id="编组-18" transform="translate(0.000000, 3.000000)">
+                            <g id="编组-30" transform="translate(11.000000, 3.000000)">
+                                <path d="M5,10 C5.81740371,10 6.57917261,9.80114261 7.2853067,9.40342782 C7.9914408,9.00571303 8.53708987,8.42012744 8.92225392,7.64667106 C9.30741797,6.87321468 9.5,5.99648429 9.5,5.01647989 C9.5,4.04965942 9.31704708,3.18501428 8.95114123,2.4225445 C8.58523538,1.66007471 8.05349501,1.06569985 7.35592011,0.639419908 C6.65834522,0.213139969 5.87517832,0 5.0064194,0 C3.67974322,0 2.59700428,0.453746429 1.75820257,1.36123929 C0.919400856,2.26873215 0.5,3.52450011 0.5,5.12854318 C0.5,5.97670842 0.679743224,6.78092727 1.03922967,7.54119974 C1.39871612,8.3014722 1.92724679,8.90134036 2.62482168,9.34080422 C3.32239658,9.78026807 4.11412268,10 5,10 Z M4.9935806,8.905735 C4.07346648,8.905735 3.30848787,8.57064381 2.69864479,7.90046144 C2.08880171,7.23027906 1.78388017,6.31289826 1.78388017,5.14831905 C1.78388017,3.69369369 2.10164051,2.65546034 2.7371612,2.03361898 C3.37268188,1.41177763 4.13124108,1.10085695 5.0128388,1.10085695 C5.63338088,1.10085695 6.19293866,1.26235992 6.69151213,1.58536585 C7.19008559,1.90837179 7.56883024,2.36321688 7.82774608,2.94990112 C8.08666191,3.53658537 8.21611983,4.22324764 8.21611983,5.00988794 C8.21611983,6.25357064 7.91333809,7.21379917 7.30777461,7.8905735 C6.70221113,8.56734784 5.93081312,8.905735 4.9935806,8.905735 Z" id="O"></path>
+                            </g>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/components/okr-detail/components/okr-tree/images/arrow.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="6px" height="6px" viewBox="0 0 6 6" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>下</title>
+    <g id="4、表单\选择框\搜索" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="选人-交互说明" transform="translate(-1009.000000, -1108.000000)" fill="#6F7886" fill-rule="nonzero">
+            <path d="M1012.46263,1113.47956 L1014.8652,1109.85528 C1015.0031,1109.64723 1015.02653,1109.36711 1014.92563,1109.13259 C1014.82473,1108.89806 1014.61698,1108.74977 1014.38966,1108.75 L1009.58528,1108.75 C1009.35805,1108.75 1009.15048,1108.89837 1009.0497,1109.13284 C1008.94892,1109.36732 1008.97239,1109.64731 1009.11024,1109.85528 L1011.51281,1113.47956 C1011.62585,1113.65 1011.80146,1113.75 1011.98772,1113.75 C1012.17398,1113.75 1012.34959,1113.65 1012.46263,1113.47956 L1012.46263,1113.47956 Z" id="下"></path>
+        </g>
+    </g>
+</svg>

package/src/components/okr-detail/components/okr-tree/images/kr-parent-arrow.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="15px" height="17px" viewBox="0 0 15 17" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>箭头</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="对齐我的目标" transform="translate(-595.000000, -607.000000)" fill="#DFE3EA">
+            <g id="居中弹窗" transform="translate(0.000000, -1.000000)">
+                <g id="编组-19" transform="translate(578.000000, 569.000000)">
+                    <path d="M31.5013304,39.9704303 L31.5013304,40.9723463 L31.5013304,40.9723463 C24.026391,40.9723463 17.9667554,47.2523698 17.9667554,54.9991712 C17.9667554,55.3352197 17.978158,55.6685081 18.0005842,55.9986435 L17.0316321,55.9997968 C17.0106543,55.6690624 17,55.3354063 17,54.9991712 C17,46.6990268 23.4924668,39.9704303 31.5013304,39.9704303 L31.5013304,39.9704303 Z" id="箭头"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/components/okr-detail/components/okr-tree/index.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import classNames from 'classnames';
+import Tree from '../../../tree';
+import titleRenderHandler from './tree-node';
+import preCls from './precls';
+
+import './index.scss';
+
+export default props => {
+  const {
+    data,
+    defaultExpandedKeys,
+    draggable,
+    ...restProps
+  } = props;
+
+  return <div className={classNames(preCls)}>
+
+    <Tree
+      draggable={draggable}
+      defaultExpandedKeys={defaultExpandedKeys}
+      treeData={data}
+      titleRender={titleRenderHandler}
+      allowDrop={() => true}
+      className="okr-list-tree"
+      {...restProps}
+    />
+  </div>
+}

package/src/components/okr-detail/components/okr-tree/index.scss

@@ -0,0 +1,12 @@
+
+.tita-okrdt-tree {
+  position: relative;
+  overflow: hidden;
+}
+.okr-list-tree{
+  .rc-tree-treenode-switcher-close{
+    &:hover {
+      background: #F7F8FA;
+    }
+  }
+}

package/src/components/okr-detail/components/okr-tree/precls.js

@@ -0,0 +1 @@
+export default 'tita-okrdt-tree';

package/src/components/okr-detail/components/okr-tree/tree-node/default-node.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import classNames from 'classnames';
+import preCls from '../precls';
+
+import './index.scss';
+
+export default props => {
+  return <div className={classNames(`${preCls}__default-node`)}>
+    {props.title}
+  </div>
+}

package/src/components/okr-detail/components/okr-tree/tree-node/e-kr-node/index.js

@@ -0,0 +1,188 @@
+import React, { useContext, useRef, useCallback } from "react";
+import classNames from "classnames";
+import Toast from "../../../../../toast";
+import { CommonContext, EListContext } from "../../../../context";
+import DropSelector, { IconItem } from "../../../../../drop-selector";
+import preCls from "../../precls";
+import drawerManager from "../../../../../drawer-manager";
+import { KRAuth, OAuth } from "../../../../../../utils/auth";
+import TooltipText from "../../../../../tooltip/tooltip-text";
+
+import "./index.scss";
+
+export default (props) => {
+  const { index, title, data, isOTask } = props;
+  const btnRef = useRef();
+
+  const { okrInfo } = useContext(CommonContext);
+  const { refreshEList } = useContext(EListContext);
+
+  const isParticipant =
+    okrInfo.authority.roleRelation &&
+    okrInfo.authority.roleRelation.roleType === 2;
+  let hasRelativeAuth;
+  if (isOTask) {
+    hasRelativeAuth = new OAuth({
+      principalUser: okrInfo.principalUser,
+      createUserId: okrInfo.createUserId,
+    }).hasAuth();
+  } else {
+    hasRelativeAuth =
+      new KRAuth({
+        user: data.user,
+        createUserId: data.createUserId,
+      }).hasAuth() ||
+      new OAuth({
+        principalUser: okrInfo.principalUser,
+        createUserId: okrInfo.createUserId,
+      }).hasAuth();
+  }
+
+  const openCreate = useCallback(async (name) => {
+    if (name == "addTask") {
+      const params = {
+        'objId': data.workId,
+        'objType': 4,
+        'AppId': 1,
+        'AppType': 1,
+        'TaskType': 0,
+        'WorkMileStoneId': data.mileStoneId,
+      }
+      if (data.mileStoneId > 0) {
+        params.WorkMileStoneName = data.mileStoneName;
+      }
+      window
+        .openCreateTaskPop(btnRef.current, {
+          "createParams": params,
+          "createTaskOption": {
+            "allowObjectOptions": false,
+          },
+        })
+        .then(() => {
+          Toast.Success("操作成功", { canClose: false });
+          setTimeout(refreshEList, 2000);
+        });
+    } else {
+      window
+        .openCreateProjectFromOkrModal({
+          "okrId": data.workId,
+          "krId": data.mileStoneId,
+        })
+        .then(() => {
+          Toast.Success("操作成功", { canClose: false });
+          setTimeout(refreshEList, 2000);
+        });
+    }
+  }, []);
+
+  const openRelatePop = useCallback((name) => {
+    if (name == "relateTask") {
+      window
+        .openRelateTaskPop(btnRef.current, {
+          "okrId": data.workId,
+          "krId": data.mileStoneId,
+        })
+        .then(() => {
+          Toast.Success("操作成功", { canClose: false });
+          setTimeout(refreshEList, 2000);
+        })
+        .catch((e) => {
+          Toast.Error(e.errorMsg, { canClose: false });
+        });
+    } else {
+      window
+        .openRelateProjectPop(btnRef.current, {
+          "okrId": data.workId,
+          "krId": data.mileStoneId,
+        })
+        .then(() => {
+          Toast.Success("操作成功", { canClose: false });
+          setTimeout(refreshEList, 2000);
+        })
+        .catch((e) => {
+          Toast.Error(e.errorMsg, { canClose: false });
+        });
+    }
+  });
+
+  return (
+    <div key={index} className={classNames(`${preCls}__e-kr-node`)}>
+      {isOTask ? null : (
+        <span className={classNames(`${preCls}__e-kr-node-prefix`)}>
+          KR{index + 1}
+        </span>
+      )}
+      <span
+        className={classNames(`${preCls}__e-kr-node-title`)}
+        onClick={() => {
+          data.mileStoneId &&
+            drawerManager.open("krDetail", { krId: data.mileStoneId });
+        }}
+      >
+        <TooltipText text={title} minusWidth={150} isPercent />
+      </span>
+
+      {/* 1是目标进行中，进行中的目标才能关联和新建 */}
+      {okrInfo.status === 1 && (isParticipant || hasRelativeAuth) ? (
+        <div className={classNames(`${preCls}__e-kr-node-actions`)}>
+          <DropSelector
+            popupPlacement={"bottomRight"}
+            onChange={openCreate}
+            trigger={
+              <span
+                className={classNames(`${preCls}__e-kr-node-actions-create`)}
+                ref={btnRef}
+              >
+                <span className="tu-icon-add1" />
+                新建
+              </span>
+            }
+          >
+            <IconItem
+              icon="tu-icon-Add-renwu"
+              exIconClass="e-kr-node-layer-icon"
+              name="addTask"
+            >
+              <span>添加任务</span>
+            </IconItem>
+            <IconItem
+              icon="tu-icon-Add-xiangmu"
+              exIconClass="e-kr-node-layer-icon"
+              name="addProject"
+            >
+              <span>添加项目</span>
+            </IconItem>
+          </DropSelector>
+
+          <DropSelector
+            popupPlacement={"bottomRight"}
+            onChange={openRelatePop}
+            trigger={
+              <span
+                className={classNames(`${preCls}__e-kr-node-actions-connect`)}
+              >
+                <span className="tu-icon-guanlian e-kr-node__guanlian-icon" />
+                关联
+              </span>
+            }
+          >
+            <IconItem
+              icon="tu-icon-GL-renwu"
+              exIconClass="e-kr-node-layer-icon"
+              name="relateTask"
+            >
+              <span>关联任务</span>
+            </IconItem>
+            <IconItem
+              icon="tu-icon-GL-xiangmu"
+              exIconClass="e-kr-node-layer-icon"
+              name="relateProject"
+            >
+              <span>关联项目</span>
+            </IconItem>
+          </DropSelector>
+        </div>
+      ) : null}
+    </div>
+  );
+};

package/src/components/okr-detail/components/okr-tree/tree-node/e-kr-node/index.scss

@@ -0,0 +1,72 @@
+$font-family: -apple-system, Arial, Verdana, Helvetica Neue, Helvetica, sans-serif, PingFang SC, Microsoft YaHei;
+
+@mixin btn-style {
+  height: 18px;
+  font-size: 13px;
+  font-family: $font-family;
+  color: #2879ff;
+  line-height: 18px;
+  cursor: pointer;
+  &:hover {
+    color: #5C8EFF;
+  }
+}
+
+.tita-okrdt-tree {
+
+  &__e-kr-node {
+    padding: 6px 0;
+    position: relative;
+    width: 100%;
+    display: flex;
+
+    &-prefix {
+      display: inline-block;
+      height: 22px;
+      font-size: 14px;
+      font-family: $font-family;
+      color: #2879ff;
+      line-height: 22px;
+    }
+
+    &-title {
+      display: inline-block;
+      margin-left: 4px;
+      height: 22px;
+      font-size: 14px;
+      font-family: $font-family;
+      color: #89919f;
+      line-height: 22px;
+      width: 100%;
+    }
+
+    &-actions {
+      display: inline-block;
+      position: absolute;
+      right: 0;
+
+      &-create {
+        @include btn-style;
+        margin-right: 20px;
+        display: inline-flex;
+        align-items: center;
+        .tu-icon-add1 {
+          margin-right: 4px;
+        }
+      }
+      &-connect {
+        @include btn-style;
+        display: inline-flex;
+        align-items: center;
+      }
+    }
+  }
+}
+
+.e-kr-node-layer-icon {
+  color: #89919F;
+}
+
+.e-kr-node__guanlian-icon {
+  padding-right: 4px;
+}

package/src/components/okr-detail/components/okr-tree/tree-node/e-node/constant.ts

@@ -0,0 +1,28 @@
+export const EStatusClass2StatusType = {
+  'tu-icon-finished': 2,
+  'tu-icon-running': 1,
+  'tu-icon-canceled': 4,
+  'tu-icon-deferred': 3,
+  'tu-icon-paused': 6,
+  'tu-icon-notstart': 0,
+  'tu-icon-jiantou-right': 5
+}
+
+export const EStatusStatus2ClassType = {
+  2: 'tu-icon-finished',
+  1: 'tu-icon-running',
+  4: 'tu-icon-canceled',
+  3: 'tu-icon-deferred',
+  6: 'tu-icon-paused',
+  0: 'tu-icon-notstart',
+  5: 'tu-icon-jiantou-right'
+}
+
+export const EStatusClass2StatusTypeText = {
+  'tu-icon-finished': '已完成',
+  'tu-icon-running': '进行中',
+  'tu-icon-canceled': '已取消',
+  'tu-icon-deferred': '已延迟',
+  'tu-icon-paused': '暂停中',
+  'tu-icon-notstart': '未开始'
+}

package/src/components/okr-detail/components/okr-tree/tree-node/e-node/e-empty.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import classNames from 'classnames';
+import preCls from '../../precls';
+import './index.scss';
+
+export default props => {
+  const { index} = props;
+
+  return <div
+    key={index}
+    className={classNames(`${preCls}__e-empty-node`)}
+  >
+    用「任务/项目」来支撑，OKR 落地更有保障 💪
+  </div>
+}

package/src/components/okr-detail/components/okr-tree/tree-node/e-node/e-priority-dropdown.js

@@ -0,0 +1,39 @@
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+import DropSelector, { Item } from '../../../../../drop-selector';
+import preCls from '../../precls';
+
+import './index.scss';
+
+export default props => {
+  const { onChange, checked, hasAuth, status } = props;
+
+  const [level, setLevel] = useState('1');
+
+  const onMenuClickHandler = name => {
+    setLevel(name);
+    onChange && onChange(name);
+  }
+
+  useEffect(() => {
+    setLevel(checked);
+  }, [checked])
+
+  return <React.Fragment>
+    <DropSelector
+      onChange={onMenuClickHandler}
+      checked={level}
+      canEdit={hasAuth && status !== '5'}
+      limitHeight={false}
+      trigger={
+        <span className={classNames(`${preCls}__e-task-node-priority-p${level}`)} />
+      }
+    >
+      <Item name="1"><span className={classNames(`${preCls}__e-task-node-priority-p1 ${preCls}__e-task-node-select-priority`)} />最高</Item>
+      <Item name="2"><span className={classNames(`${preCls}__e-task-node-priority-p2 ${preCls}__e-task-node-select-priority`)} />高</Item>
+      <Item name="3"><span className={classNames(`${preCls}__e-task-node-priority-p3 ${preCls}__e-task-node-select-priority`)} />中</Item>
+      <Item name="4"><span className={classNames(`${preCls}__e-task-node-priority-p4 ${preCls}__e-task-node-select-priority`)} />低</Item>
+      <Item name="5"><span className={classNames(`${preCls}__e-task-node-priority-p5 ${preCls}__e-task-node-select-priority`)} />非常低</Item>
+    </DropSelector>
+  </React.Fragment>
+}