@titaui/pc 1.7.49 → 1.7.53

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

@@ -0,0 +1,298 @@
+import React, { useState, useContext } from "react";
+import classNames from "classnames";
+import Toast from "../../../../../toast";
+import EStatusDropdown from "./e-status-dropdown";
+import Avatar from "../../../../../avatar";
+import preCls from "../../precls";
+import {escapeHtml} from '../../../../../../utils/helpers'
+import {
+  updateTaskPrincipal,
+  updateTaskDate,
+  updateTaskStatus,
+  cancelRel,
+  setTaskPriority,
+} from "../../../../request-apis";
+import DialogConfirm, {
+  CancelButton,
+  SureButton,
+} from "../../../../../dialog-confirm";
+import StatusTime from "../../../../../status-time";
+import { EStatusClass2StatusType, EStatusStatus2ClassType } from "./constant";
+import {
+  CommonContext,
+  EListContext,
+  OkrListContext,
+} from "../../../../context";
+import Progress from "../../../../../progress";
+import getProcessColor from "../get-process-color";
+import { EAuth, KRAuth, OAuth } from "../../../../../../utils/auth";
+import Tooltip from "../../../../../tooltip";
+import EPriorityDropdown from "../../../../../e-priority";
+import TooltipText from "../../../../../tooltip/tooltip-text";
+import { isPlatform } from "../../../../../../utils/platform";
+import DrawerManager from "../../../../../drawer-manager";
+import "./index.scss";
+
+// status=3 已过期 status=2 已完成
+export default (props) => {
+  const { index, title, data, level, isLeaf, createUserId, krUser } = props;
+  const [unConnectVisible, setUnConnectVisible] = useState(false);
+  const [progress, setProgress] = useState(data.progress);
+  const [user, setUser] = useState(data.principalUser || {});
+  const [isGray, setIsGray] = useState(data.status === 2);
+  const [isCancel, setIsCancel] = useState(data.status === 4);
+  const [priority, setPriority] = useState(data.priority + "");
+  const [dateInfo, setDateInfo] = useState({
+    deadLine: data.deadLine,
+    isLongTerm: data.isLongTerm,
+    status: data.status,
+    riskLevel: data.riskLevel,
+  });
+
+  const { okrInfo } = useContext(CommonContext);
+  const { refreshEList } = useContext(EListContext);
+
+  const hasEditAuth =
+    (new EAuth({
+      principalUser: data.principalUser,
+      user: data.user,
+    }).hasAuth() ||
+      new KRAuth({ user: krUser, createUserId: createUserId }).hasAuth() ||
+      new OAuth({
+        principalUser: okrInfo.principalUser,
+        createUserId: okrInfo.createUserId,
+      }).hasAuth()) &&
+    data.status !== 5;
+  const isParticipant =
+    okrInfo.authority.roleRelation &&
+    okrInfo.authority.roleRelation.roleType === 2;
+  const hasRelativeAuth =
+    new KRAuth({ user: krUser, createUserId: createUserId }).hasAuth() ||
+    new OAuth({
+      principalUser: okrInfo.principalUser,
+      createUserId: okrInfo.createUserId,
+    }).hasAuth();
+
+  const onEditUserHandler = ([user]) => {
+    updateTaskPrincipal({ task_id: data.taskId, to_user_id: Number(user.id) })
+      .then((data) => {
+        if (data.Code === 1) {
+          setUser(user.data);
+          Toast.Success("操作成功", { canClose: false });
+        } else {
+          Toast.Error(data.Message, { canClose: false });
+        }
+      })
+      .catch(() => {
+        Toast.Error("网络异常", { canClose: false });
+      });
+  };
+
+  const onEStatusChangeHandler = (statusType) => {
+    updateTaskStatus({
+      task_id: data.taskId,
+      status: EStatusClass2StatusType[statusType],
+    })
+      .then((resp) => {
+        if (resp.Code === 1) {
+          Toast.Success("操作成功", { canClose: false });
+          setDateInfo({
+            ...dateInfo,
+            status: EStatusClass2StatusType[statusType],
+          });
+          setIsGray(EStatusClass2StatusType[statusType] === 2);
+          setIsCancel(EStatusClass2StatusType[statusType] === 4);
+        } else {
+          Toast.Error(resp.Message, { canClose: false });
+        }
+      })
+      .catch(() => {
+        Toast.Error("网络异常", { canClose: false });
+      });
+  };
+
+  const onSureUnConnectHandler = () => {
+    cancelRel({
+      krId: data.mileStoneId,
+      objType: data.objType,
+      okrId: okrInfo.workId,
+      taskId: data.taskId,
+    })
+      .then((resp) => {
+        if (resp.Code === 1) {
+          Toast.Success("操作成功", { canClose: false });
+          refreshEList();
+        } else {
+          Toast.Error(resp.Message, { canClose: false });
+        }
+      })
+      .catch(() => {
+        Toast.Error("网络异常", { canClose: false });
+      })
+      .finally(setUnConnectVisible(false));
+  };
+
+  const updateDateHandler = async (e) => {
+    if (!hasEditAuth) return;
+    const res = await window.openDatePicker(e.target, {
+      isShowCycleView: false,
+      rangepickerOptions: {
+        startDate: dateInfo.startDate,
+        endDate: dateInfo.deadLine,
+      },
+    });
+    await updateTaskDate({
+      task_id: data.taskId,
+      startDate: res.startDate,
+      endDate: res.endDate,
+      isLongTerm: res.isLongTerm,
+    })
+      .then((resp) => {
+        if (resp.Code === 1) {
+          setDateInfo({
+            ...dateInfo,
+            deadLine: resp.Data.deadLine,
+            isLongTerm: resp.Data.isLongTerm,
+            status: resp.Data.status,
+          });
+
+          Toast.Success("操作成功", { canClose: false });
+        } else {
+          Toast.Error(resp.Message, { canClose: false });
+        }
+      })
+      .catch(() => {
+        Toast.Error("网络异常", { canClose: false });
+      });
+  };
+
+  const onEPriorityChangeHandler = (selectPriority) => {
+    setTaskPriority({ task_id: data.taskId, priority: selectPriority }).then(
+      (resp) => {
+        if (resp.Code === 1) {
+          Toast.Success(resp.Message);
+          setPriority(selectPriority);
+        } else {
+          Toast.Error(resp.Message);
+        }
+      }
+    );
+  };
+
+  const handleShowTaskDetail = () => {
+    if (isPlatform('dd')) {
+      DrawerManager.close();
+    }
+    window.open('//' + location.host + location.pathname + '#more/taskinfo?id=' + data.taskId);
+  };
+
+  return (
+    <div key={index} className={classNames(`${preCls}__e-task-node`)}>
+      <span className={classNames(`${preCls}__e-task-node-prefix`)}>
+        <EStatusDropdown
+          onChange={onEStatusChangeHandler}
+          checked={EStatusStatus2ClassType[dateInfo.status]}
+          hasAuth={hasEditAuth}
+        />
+      </span>
+
+      <span className={classNames(`${preCls}__e-task-node-priority`)}>
+        <EPriorityDropdown
+          onChange={onEPriorityChangeHandler}
+          checked={priority}
+          hasAuth={hasEditAuth}
+          status={data.status}
+        />
+      </span>
+
+      <span
+        className={classNames(
+          `${preCls}__e-task-node-title ${
+            isCancel ? `${preCls}__e-project-node-gray` : ""
+          }`
+        )}
+        onClick={handleShowTaskDetail}
+      >
+        <TooltipText text={escapeHtml(title)} isPercent />
+      </span>
+
+      <span className={classNames(`${preCls}__e-task-node-actions`)}>
+        <span className={classNames(`${preCls}__e-task-node-actions-user`)}>
+          <Avatar.Text
+            name={user?.name}
+            id={user?.userId}
+            width={64}
+            editable={hasEditAuth}
+            onEditUser={onEditUserHandler}
+            isGetRoot={true}
+            extraCls={(isCancel || isGray) && `${preCls}__e-project-node-gray`}
+          />
+        </span>
+
+        <span
+          className={classNames(`${preCls}__e-task-node-actions-date`)}
+          onClick={updateDateHandler}
+        >
+          <StatusTime
+            deadLine={dateInfo.deadLine}
+            isLongTerm={dateInfo.isLongTerm}
+            isCancel={dateInfo.status === 4}
+            isComplete={dateInfo.status === 2}
+          />
+        </span>
+
+        <span
+          className={classNames(
+            `${preCls}__e-task-node-actions-progress ${(isGray || isCancel) &&
+              `${preCls}__e-project-node-gray`}`
+          )}
+        >
+          <Progress.Circle
+            size={22}
+            width={3}
+            percent={progress}
+            linear={true}
+            linearId={data.taskId}
+            linearStartColor={getProcessColor(
+              dateInfo.riskLevel,
+              "linearStartColor",
+              dateInfo.status
+            )}
+            linearEndColor={getProcessColor(
+              dateInfo.riskLevel,
+              "linearEndColor",
+              dateInfo.status
+            )}
+            backgroundColor={getProcessColor(
+              dateInfo.riskLevel,
+              "backgroundColor",
+              dateInfo.status
+            )}
+          />
+        </span>
+
+        {okrInfo.status === 1 && (hasRelativeAuth || isParticipant) ? (
+          <Tooltip overlay={"取消关联"} placement="top">
+            <span
+              className={classNames(`${preCls}__e-task-node-actions-connect`)}
+              onClick={() => setUnConnectVisible(true)}
+            >
+              <span className="tu-icon-quxiaoguanlian e-node-status-icon" />
+            </span>
+          </Tooltip>
+        ) : null}
+      </span>
+
+      <DialogConfirm visible={unConnectVisible} type="warning">
+        <span type="title">确定取消关联吗？</span>
+        <span type="content">取消关联后该任务将不在此目标下显示</span>
+        <CancelButton type="button" onClick={() => setUnConnectVisible(false)}>
+          取消
+        </CancelButton>
+        <SureButton type="button" onClick={onSureUnConnectHandler}>
+          确定
+        </SureButton>
+      </DialogConfirm>
+    </div>
+  );
+};

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

@@ -0,0 +1,214 @@
+$font-family: -apple-system, Arial, Verdana, Helvetica Neue, Helvetica, sans-serif, PingFang SC, Microsoft YaHei;
+
+@mixin tree-node-date {
+  font-size: 12px;
+  font-family: $font-family;
+  color: #89919f;
+  line-height: 18px;
+}
+
+@mixin tree-node-gray {
+  &-gray{
+    color: #BFC7D5 !important;
+  }
+}
+
+@mixin tree-node-priority {
+  &-priority {
+    display: inline-block;
+    margin-right: 4px;
+    vertical-align: top;
+    & > span {
+      position: relative;
+      top: 1px;
+      display: inline-block;
+      vertical-align: text-bottom;;
+      height: 16px;
+      width: 16px;
+    }
+    &-p1 {
+      background: url(../../../../images/P1.svg) transparent no-repeat 50% 50%;
+    }
+    &-p2 {
+      background: url(../../../../images/P2.svg) transparent no-repeat 50% 50%;
+    }
+    &-p3 {
+      background: url(../../../../images/P3.svg) transparent no-repeat 50% 50%;
+    }
+    &-p4 {
+      background: url(../../../../images/P4.svg) transparent no-repeat 50% 50%;
+    }
+    &-p5 {
+      background: url(../../../../images/P5.svg) transparent no-repeat 50% 50%;
+    }
+  }
+}
+
+@mixin tree-node-actions {
+  &-actions {
+    display: flex;
+    align-items: center;
+    float: right;
+
+    &-user {
+      display: inline-block;
+      width: 64px;
+      margin-left: 16px;
+    }
+    &-date {
+      @include tree-node-date;
+      display: inline-flex;
+      align-items: center;
+      box-sizing: border-box;
+      width: 78px;
+      height: 26px;
+      padding: 4px;
+      text-align: left;
+      line-height: 26px;
+      margin-left: 16px;
+      & > span {
+        vertical-align: text-bottom;
+      }
+    }
+    &-progress{
+      position: relative;
+      top: 3px;
+      color: #89919f;
+      cursor: auto;
+      width: 64px;
+      margin-left: 4px;
+      margin-right: 4px;
+      .tooltip-text-wrapper{
+        margin-left: 4px;
+      }
+    }
+    &-connect {
+      display: inline-block;
+      color: #cccccc;
+      margin-left: 27px;
+      margin-right: 10px;
+      &:hover {
+        color: #2879ff;
+      }
+    }
+  }
+}
+
+.tita-okrdt-tree {
+  &__e-task-node {
+    display: flex;
+    align-items: center;
+    padding: 2px 0;
+    width: 100%;
+
+    &-prefix {
+      position: relative;
+      top: 2px;
+      display: inline-block;
+      width: 21px;
+      vertical-align: top;
+      .tu-icon-jiantou-right:before {
+        color: #89919f;
+      }
+    }
+
+    &-title {
+      height: 22px;
+      font-size: 14px;
+      font-family: $font-family;
+      color: #3f4755;
+      line-height: 22px;
+      overflow: hidden;
+      white-space: nowrap;
+      word-break: keep-all;
+      padding-top: 1px;
+      flex: 1;
+    }
+
+    @include tree-node-priority;
+    @include tree-node-actions;
+  }
+
+  &__e-task-node-select-priority {
+    display: inline-block;
+    width: 16px;
+    height: 16px;
+    margin-right: 10px;
+    vertical-align: text-bottom;
+  }
+
+  &__e-project-node {
+    position: relative;
+    display: flex;
+    align-items: center;
+    width: 100%;
+    padding: 2px 0;
+    &-prefix {
+      display: inline-block;
+      font-size: 14px;
+      width: 21px;
+      color: #89919f;
+      line-height: 1;
+    }
+
+    &-title {
+      display: inline-block;
+      font-size: 14px;
+      font-family: $font-family;
+      color: #3f4755;
+      line-height: 22px;
+      overflow: hidden;
+      white-space: nowrap;
+      word-break: keep-all;
+      flex: 1;
+    }
+    @include tree-node-gray;
+    @include tree-node-priority;
+    @include tree-node-actions;
+  }
+
+  &__e-task-level2-node {
+    padding: 4px 0;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    &-prefix {
+      position: relative;
+      top: 2px;
+      display: inline-block;
+      width: 21px;
+      .tu-icon-jiantou-right:before {
+        color: #89919f;
+      }
+    }
+
+    &-title {
+      height: 22px;
+      font-size: 14px;
+      font-family: $font-family;
+      color: #3f4755;
+      line-height: 22px;
+      overflow: hidden;
+      white-space: nowrap;
+      word-break: keep-all;
+      flex: 1;
+    }
+
+    @include tree-node-priority;
+    @include tree-node-actions;
+  }
+  &__e-empty-node {
+    font-size: 12px;
+    font-family: $font-family;
+    color: #F6BD16;
+    line-height: 18px;
+    padding-left: 12px;
+    &:hover {
+      cursor: text;
+    }
+  }
+}
+
+.e-node-status-icon {
+  color: #89919F;
+}

package/src/components/okr-detail/components/okr-tree/tree-node/get-process-color.js

@@ -0,0 +1,53 @@
+const getProcessColor = (level, type, status) => {
+  const cancelColor = {
+    'linearStartColor': '#e1e5ec',
+    'linearEndColor': '#bfc7d5',
+    'backgroundColor': 'rgba(40, 121, 255, 0.11)'
+  }
+
+  if ( status == 2 ) {
+    return cancelColor[type];
+  }
+  if ( status == 4 ) {
+    return cancelColor[type]
+  }
+  
+  const processColor = {
+    '1': {
+      'riskLevel': 1,
+      'linearStartColor': '#9fbfff',
+      'linearEndColor': '#2879ff',
+      'backgroundColor': 'rgba(40, 121, 255, 0.11)'
+    },
+    '2':{
+      'riskLevel': 2,
+      'linearStartColor': '#9fbfff',
+      'linearEndColor': '#2879ff',
+      'backgroundColor': 'rgba(40, 121, 255, 0.11)'
+    },
+    '3': {
+      'riskLevel': 3,
+      'linearStartColor': '#FFA5A5',
+      'linearEndColor': '#F05E5E',
+      'backgroundColor': 'rgba(222, 89, 89, 0.1)'
+    },
+    '4': {
+      'riskLevel': 4,
+      'linearStartColor': '#93eed2',
+      'linearEndColor': '#5ad8a6',
+      'backgroundColor': 'rgba(40, 121, 255, 0.11)'
+    },
+    '5': {
+      'riskLevel': 5,
+      'linearStartColor': '#93eed2',
+      'linearEndColor': '#5ad8a6',
+      'backgroundColor': 'rgba(40, 121, 255, 0.11)'
+    },
+  }
+  let color = processColor[level + ''];
+  if (level == 0) color = processColor['1'];
+  if (!color) return {}
+  return color[type]
+}
+
+export default getProcessColor;

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

@@ -0,0 +1,40 @@
+import React from 'react';
+
+import EKRNode from './e-kr-node';
+import KrNode from './kr-node'
+import KrParentNode from './kr-parent-node';
+import ETaskNode from './e-node/e-task';
+import ETaskLevel2Node from './e-node/e-task-level2';
+import EProjectNode from './e-node/e-project';
+import OChildNode from './o-child-node';
+import OParentNode from './o-parent-node';
+import DefaultNode from './default-node';
+import EEmpty from './e-node/e-empty';
+
+import './index.scss';
+
+export default (node, level) => {
+  switch (node.nodeType) {
+    case 'e-kr':
+      return <EKRNode {...node} level={level} />
+    case 'kr':
+      return <KrNode {...node} level={level} />
+    case 'kr-parent':
+      return <KrParentNode {...node} level={level} />
+    case 'e-task':
+      return <ETaskNode {...node} level={level} />
+    case 'e-task-level2':
+      return <ETaskLevel2Node {...node} level={level} />
+    case 'e-project':
+      return <EProjectNode {...node} level={level} />
+    case 'o-parent':
+      return <OParentNode {...node} level={level} />
+    case 'o-child':
+      return <OChildNode {...node} level={level} />
+    case 'e-empty':
+      return <EEmpty {...node} level={level} />
+    case 'default':
+      return <DefaultNode {...node} level={level} />
+    default: return;
+  }
+}

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

@@ -0,0 +1,18 @@
+.tita-okrdt-tree {
+  &__drop-layer {
+    color: rgb(63, 71, 85);
+    &:hover {
+      color: #2879ff;
+    }
+  }
+
+  &__default-node {
+    display: inline-block;
+    height: 22px;
+    font-size: 14px;
+    font-family: -apple-system, Arial, Verdana, Helvetica Neue, Helvetica, sans-serif, PingFang SC, Microsoft YaHei;
+    font-weight: 500;
+    color: #a4acb9;
+    line-height: 22px;
+  }
+}

package/src/components/okr-detail/components/okr-tree/tree-node/kr-node/get-process-color.js

@@ -0,0 +1,35 @@
+const getProcessColor = (level, type, status) => {
+  const stopColor = {
+    'linearStartColor': '#e1e5ec',
+    'linearEndColor': '#bfc7d5',
+    'backgroundColor': '#f0f2f5'
+  }
+  if (status === 2) {
+    return stopColor[type];
+  }
+  const processColor = {
+    '1': {
+      'riskLevel': 1,
+      'linearStartColor': '#4E90FF',
+      'linearEndColor': '#2879ff',
+      'backgroundColor': 'rgba(40,121,255,0.11)'
+    },
+    '3': {
+      'riskLevel': 3,
+      'linearStartColor': '#FFA5A5',
+      'linearEndColor': '#F05E5E',
+      'backgroundColor': 'rgba(222,89,89,0.1)'
+    },
+    '2': {
+      'riskLevel': 2,
+      'linearStartColor': '#FDCD41',
+      'linearEndColor': '#FFE18B',
+      'backgroundColor': '#FEF5DC'
+    }
+  }
+  let color = processColor[level + ''];
+  if (level == 0) color = processColor['1'];
+  if (!color) return {}
+  return color[type]
+}
+export default getProcessColor