@titaui/pc 1.7.49 → 1.7.53

package/src/components/okr-detail/detail-header/actions.tsx

@@ -0,0 +1,164 @@
+import { getBSGlobal } from '../../../utils/bs-global';
+import { OAuth } from '../../../utils/auth';
+import { OkrRole, OkrStatus } from './enums';
+import dayjs from 'dayjs';
+
+interface IOkrHeadActionData {
+  roleType: number;
+  detailInfo: any;
+  openShareModal: Function
+  changeVisiblilty: any
+  onDeleteOkr: (e:any) => void
+  onCopyOkr:Function
+  onChangeOkrFollow: (follow:boolean) => void
+  onFinishOrReOpen: (isFinish:boolean) => void
+  onQuit: Function
+  principalUser: any
+  visibility: number
+}
+
+interface IDealActionData extends IOkrHeadActionData {
+  auth: any
+}
+
+type ActionDealFunction = (data: IDealActionData, actions: any[]) => any;
+export function getOkrHeadActions(data: IOkrHeadActionData) {
+  let actions: any[] = [];
+  const auth = new OAuth({
+    principalUser: data.principalUser,
+    createUserId: data.detailInfo.createUserId,
+  });
+  const dataWithAuth = {...data,auth}
+  addShareButton(dataWithAuth, actions);
+  addVisibilityButton(dataWithAuth, actions);
+  addFollowButton(dataWithAuth, actions);
+  addExitButton(dataWithAuth, actions);
+  addFinishOrReopenButton(dataWithAuth,actions)
+  addCopyButton(dataWithAuth,actions)
+  addDeleteButton(dataWithAuth,actions)
+  // addDetailButton(dataWithAuth,actions)
+  return actions;
+}
+
+const addShareButton: ActionDealFunction = ({ openShareModal }, actions) => {
+  actions.push({
+    icon: 'tu-icon-fenxiang',
+    title: '分享',
+    onClick: openShareModal
+  });
+};
+
+const addVisibilityButton: ActionDealFunction = ({auth,visibility, detailInfo,changeVisiblilty }, actions) => {
+  
+  let children = [
+    {
+      title: '全公司',
+      onClick:() => changeVisiblilty(1)
+    },
+    {
+      title: '仅相关成员',
+      onClick:() => changeVisiblilty(2)
+    },
+    {
+      title: '仅直接下属',
+      onClick:() => changeVisiblilty(3)
+    },
+    {
+      title: '指定范围',
+      onClick:() => changeVisiblilty(4)
+    },
+  ]
+  const editable = auth.hasAuth() && detailInfo.status == OkrStatus.inProgress;
+  actions.push({
+    icon: visibility != 1 ? 'tu-icon-simi-icon' : 'tu-icon-gongkai',
+    title: children[visibility - 1].title + '可见',
+    children: editable ? children : null,
+  });
+};
+
+const addFollowButton: ActionDealFunction = ({ roleType,detailInfo,onChangeOkrFollow }, actions) => {
+  // 未开启关注目标功能
+  if(!getBSGlobal('OkrAdvancedSetting').KRSetting.TargetFollowers){
+    return;
+  }
+  //是负责人或是内部成员不能关注目标
+  if (roleType == OkrRole.principal || roleType == OkrRole.member) {
+    return;
+  }
+  //已关注目标
+  if (roleType == OkrRole.follower) {
+    actions.push({
+      icon: 'okr-drawer-header-followed',
+      title: '取消关注',
+      onClick: () => onChangeOkrFollow(false)
+    });
+    return;
+  }
+  //未关注
+  actions.push({
+    icon: 'tu-icon-APP-shoucang',
+    title: '关注目标',
+    onClick: () => onChangeOkrFollow(true)
+  });
+};
+
+const addExitButton: ActionDealFunction = ({roleType,onQuit},actions) => {
+  if(roleType == OkrRole.member){
+    actions.push({
+      icon:'tu-icon-tuichu',
+      title: '退出参与',
+      onClick: onQuit
+    })
+  }
+}
+
+const addFinishOrReopenButton: ActionDealFunction = ({ detailInfo,auth,onFinishOrReOpen }, actions) => {
+  
+  if (!auth.hasAuth()) return;
+
+  if(detailInfo.status == OkrStatus.inProgress){
+    actions.push({
+      icon:'tu-icon-liebiao-jieshu',
+      title: '结束目标',
+      onClick: ()=>onFinishOrReOpen(true)
+    })
+  }else {
+    actions.push({
+      icon:'tu-icon-gengxin1',
+      title: '重启目标',
+      onClick: ()=>onFinishOrReOpen(false)
+    })
+  }
+
+}
+
+const addCopyButton: ActionDealFunction = ({onCopyOkr}, actions) => {
+  actions.push({
+    icon:'tu-icon-liebiao-fuzhi',
+    title: '复制目标',
+    onClick: () => onCopyOkr()
+  })
+}
+
+const addDeleteButton: ActionDealFunction = ({auth,onDeleteOkr},actions) => {
+  if(!auth.hasAuth()) return;
+  actions.push({
+    icon:'tu-icon-del',
+    title: '删除目标',
+    onClick:onDeleteOkr
+  })
+}
+
+const addDetailButton: ActionDealFunction = ({detailInfo},actions) => {
+  const registerDate = window.BSGlobal.tenantAuthentication.StartDate;
+  dayjs(registerDate).year() < 2021 &&
+    actions.push({
+      icon: "tu-icon-xiangqing1",
+      title: "目标详情",
+      onClick: () => {
+        window.open(
+          `${location.pathname}#okr/manage?work_id=${detailInfo.workId}`
+        );
+      },
+    });
+}

package/src/components/okr-detail/detail-header/confirm.tsx

@@ -0,0 +1,58 @@
+import React, { ReactElement } from 'react';
+import ReactDom from 'react-dom';
+import Confirm, { CancelButton, SureButton } from '../../../components/dialog-confirm';
+import { useState } from 'react';
+import { useCallback } from 'react';
+
+interface Props {
+  title: string;
+  content: string;
+  onConfirm: (res: boolean) => void;
+}
+
+function OkrDetailHeaderConfirm({ onConfirm, title='', content='' }: Props): ReactElement {
+  const [visible, setVisible] = useState(true);
+
+  const handleConfirm = useCallback(res => {
+    onConfirm(res);
+    setVisible(false);
+  }, []);
+
+  return (
+    <Confirm visible={visible} type='warning'>
+      {
+        //@ts-ignore
+        <span type='title'>{title}</span>
+      }
+      {
+        //@ts-ignore
+        <span type='content'>{content}</span>
+      }
+
+      <CancelButton type='button' onClick={() => handleConfirm(false)}>
+        取消
+      </CancelButton>
+      {/* <WarningButton type="button">删除</WarningButton> */}
+      <SureButton type='button' onClick={() => handleConfirm(true)}>
+        确定
+      </SureButton>
+    </Confirm>
+  );
+}
+
+export default function openOkrHeaderConfirm(title, content?:string): Promise<boolean> {
+  const container = document.createElement('div');
+  document.body.appendChild(container);
+  return new Promise(resolve => {
+    ReactDom.render(
+      React.createElement(OkrDetailHeaderConfirm, { title, content, onConfirm: resolve }),
+      container,
+    );
+  }).then((res: boolean) => {
+    setTimeout(() => {
+      ReactDom.unmountComponentAtNode(container);
+      container.remove();
+    }, 200);
+    return res;
+  });
+}

package/src/components/okr-detail/detail-header/delete-confirm/delete-confirm.tsx

@@ -0,0 +1,75 @@
+import React, { ReactElement, useState } from 'react'
+import { DeleteWrapper, DeleteTitle, Options, ButtonGroup, Icon } from './style';
+import { Button } from 'tita-ui';
+import  Tooltip  from '../../../tooltip'
+
+interface Props {
+  onConfirm: any
+  onCancel: Function
+}
+interface DeleteOptionsObj {
+  id: number;
+  text: string;
+  tips: string;
+}
+const deleteOptions: DeleteOptionsObj[] = [
+  {
+    id: 0,
+    text: '不删除目标下的任务',
+    tips: '',
+  },
+  {
+    id: 1,
+    text: '同时删除目标下所有任务',
+    tips: '审批中的任务将不会被删除',
+  },
+  {
+    id: 2,
+    text: '同时删除我负责的，我参与的，我派发的任务',
+    tips: '审批中的任务将不会被删除',
+  },
+];
+function OkrDeleteConfirm({ onConfirm, onCancel }: Props): ReactElement {
+  const [selected, setSelected] = useState<number>(0);
+  return (
+    <DeleteWrapper onClick={e => e.stopPropagation()}>
+      <DeleteTitle>目标删除操作不可恢复！请谨慎操作</DeleteTitle>
+      <div>
+        {deleteOptions.map((option: DeleteOptionsObj) => (
+          <Options key={option.id} onClick={() => setSelected(option.id)}>
+            <Icon
+              className={
+                selected == option.id ? 'tu-icon-singlebox-avtive' : 'tu-icon-singlebox-have'
+              }
+            />
+            <p>{option.text}</p>
+            {option.tips && (
+              <Tooltip overlay={option.tips} placement="top" zIndex={15000}>
+                <Icon className='tu-icon-warning' />
+              </Tooltip>
+            )}
+          </Options>
+        ))}
+      </div>
+      <ButtonGroup>
+        <Button
+          onClick={() => {
+            onCancel()
+          }}
+        >
+          取消
+        </Button>
+        <Button
+          type='primary'
+          onClick={() =>
+            onConfirm(selected)
+          }
+        >
+          提交
+        </Button>
+      </ButtonGroup>
+    </DeleteWrapper>
+  )
+}
+
+export default OkrDeleteConfirm

package/src/components/okr-detail/detail-header/delete-confirm/style.ts

@@ -0,0 +1,100 @@
+import styled from 'styled-components';
+
+export const DeleteWrapper = styled.div`
+    width: 300px;
+
+    .tu-icon-warning {
+        transition: all .3s ease-in;
+
+        &:hover {
+            color: #2879ff;
+        }
+    }
+`
+export const DeleteTitle = styled.h2`
+    font-size: 14px;
+    color: #1F2329;
+`
+export const Options = styled.div`
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+
+    p {
+        margin: 6px;
+        font-size: 12px;
+        transition: all .3s ease-in;
+        color: #3e4e59;
+
+        &:hover {
+            color: #2879ff;
+        }
+    }
+`
+export const ButtonGroup = styled.div`
+    margin-top: 5px;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+
+    button {
+        min-width: 58px !important;
+        height: 30px !important;
+        margin-left: 10px;
+        white-space: nowrap;
+    }
+`
+export const Icon = styled.span`
+  font-size: 12px;
+  color: ${(p: any) => p.color || '#89919F'};
+
+  &.tu-icon-diot {
+    color: #a4acb9;
+  }
+
+  // &.okr-type {
+  //   font-size: 16px;
+  //   color: #7f91b4;
+  //   position: relative;
+  //   top: ${(p: any) => p.top};
+  // }
+
+  // &.tu-icon-bianji2 {
+  //   margin-left: 6px;
+  //   font-size: 14px;
+  //   color: #2879ff;
+  //   cursor: pointer;
+  // }
+
+  // &.tu-icon-heart-solid {
+  //   margin-right: 6px;
+  //   color: #ff8c00;
+  // }
+
+  &.execute-icon {
+    font-size: 14px;
+    cursor: pointer;
+    position: relative;
+    top: 2px;
+  }
+
+  &.tu-icon-singlebox-have,
+  &.tu-icon-singlebox-avtive {
+    font-size: 14px;
+    color: #2879ff;
+  }
+
+  &.tu-icon-warning {
+    font-size: 14px;
+    color: #acb7bf;
+  }
+
+  &.tu-icon-more-diji {
+      position: relative;
+
+      &::after {
+          content: '';
+          
+      }
+  }
+`;

package/src/components/okr-detail/detail-header/enums.ts

@@ -0,0 +1,25 @@
+export enum OkrStatus {
+  /**
+   * 进行中
+   */
+  inProgress = 1,
+  /**
+   * 已结束
+   */
+  end = 2
+}
+
+export enum OkrRole {
+  /**
+   * 负责人
+   */
+  principal = 1,
+  /**
+   * 内部成员 参与人
+   */
+  member = 2,
+  /**
+   * 关注者
+   */
+  follower = 3
+}

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

@@ -0,0 +1,24 @@
+.okr-drawer-header-followed {
+  background-image: url('../images/followed.svg');
+  
+}
+.okr-detail-head-parent {
+  display: flex;
+  align-items: center;
+  color: #89919F;
+  .tu-icon-liebiao-duiqinubiao {
+    font-size: 12px;
+    margin-right: 4px;
+  }
+  & > span {
+    max-width: 400px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: 12px;
+    cursor: pointer;
+    &:hover {
+      color: #2879FF;
+    }
+  }
+}

package/src/components/okr-detail/detail-header/index.tsx

@@ -0,0 +1,255 @@
+import React, {
+  ReactElement,
+  useMemo,
+  useState,
+  useRef,
+  useCallback,
+  useContext,
+} from "react";
+import UserSelector from "../../user-selector";
+import Drawer from "../../drawer";
+import { getOkrHeadActions } from "./actions";
+import openOkrHeaderConfirm from "./confirm";
+import Toast from "../../toast";
+import {
+  updateOkrVisibility,
+  addUser,
+  deleteUser,
+  workDelete,
+  start,
+  close,
+  getKrs,
+} from '../request-apis';
+import OkrShare from "../../okr-share";
+import { PopConfirm } from "tita-ui";
+import { GeneralDataContext, CommonContext } from "../context";
+import OkrDeleteConfirm from "./delete-confirm/delete-confirm";
+import drawerManager from "../../drawer-manager";
+import "./index.scss";
+
+interface Props {
+  detailInfo: any;
+}
+
+function OkrDetailHeader({ detailInfo }: Props): ReactElement {
+  const [shareVisible, setShareVisible] = useState(false);
+  const userSelectRef = useRef<any>();
+  const popRef = useRef<any>();
+  const [krs, setKrs] = useState<any>([]);
+  //@ts-ignore
+  const loginUserId = window.BSGlobal.loginUserInfo.Id;
+  const context = useContext(GeneralDataContext);
+  const commonContext = useContext(CommonContext);
+
+  const changVisiblity = useCallback(
+    async (workId, visibility, visibilityScope: any = {}) => {
+      await updateOkrVisibility({
+        workId,
+        visibility,
+        ...{
+          areaGroupIds: (visibilityScope.groups || []).map((g) => g.id),
+          areaOrgIds: (visibilityScope.departments || []).map((g) => g.id),
+          areaUserIds: (visibilityScope.users || []).map((g) => g.userId),
+        },
+      });
+      Toast.Success("操作成功");
+      context.setGeneralVisibility({ visibility, visibilityScope });
+    },
+    [detailInfo]
+  );
+
+  const closeShareModal = useCallback(() => {
+    setShareVisible(false);
+  }, []);
+
+  const actions = useMemo(() => {
+    if (!detailInfo) return [];
+    return getOkrHeadActions({
+      roleType: context.generalRoleType,
+      principalUser: context.generalPrincipalUser,
+      visibility: context.generalVisibility.visibility,
+      detailInfo,
+      openShareModal: async () => {
+        const krs = await getKrs({ okrId: detailInfo.workId });
+        setKrs(krs);
+        setShareVisible(true);
+      },
+      changeVisiblilty: (visibility) => {
+        if (visibility == 4) {
+          userSelectRef.current && userSelectRef.current.open();
+          return;
+        }
+        changVisiblity(detailInfo.workId, visibility);
+      },
+      onDeleteOkr: (e) => {
+        popRef.current.getRef().show(e.target);
+      },
+      onCopyOkr: () => {
+        //@ts-ignore
+        window.openCopyOkrModal({
+          'okrId': detailInfo.workId,
+          'okrType': detailInfo.okrType,
+        });
+      },
+      onChangeOkrFollow: async (follow: boolean) => {
+        const res = await openOkrHeaderConfirm(
+          follow ? "确定关注该目标吗？" : "确定取消关注该目标吗？",
+          follow
+            ? "关注后进展信息将推送到 “动态” 下"
+            : "取消后进展信息将不在推送到 “动态” 下"
+        );
+        if (res) {
+          follow
+            // @ts-ignore
+            ? await addUser(loginUserId, detailInfo.workId, 3)
+            : await deleteUser(loginUserId, detailInfo.workId, 3);
+          context.setGeneralRoleType(follow ? 3 : 0);
+          //关注
+          Toast.Success("操作成功");
+          if (!follow) {
+            commonContext.refreshAll();
+          }
+        }
+      },
+      onFinishOrReOpen: async (isFinish: boolean) => {
+        const res = await openOkrHeaderConfirm(
+          isFinish ? "确定结束该目标吗？" : "确定重启该目标吗？"
+        );
+        if (res) {
+          isFinish
+            ? await close(detailInfo.workId)
+            : await start(detailInfo.workId);
+          commonContext.refreshAll();
+          //刷新
+          Toast.Success("操作成功");
+        }
+      },
+      onQuit: async () => {
+        const res = await openOkrHeaderConfirm(
+          "确定退出吗？",
+          "再次加入需要联系负责人"
+        );
+        if (res) {
+          await deleteUser(loginUserId, detailInfo.workId, 2);
+          // context.setGeneralRoleType(0)
+          commonContext.refreshAll();
+          //刷新
+          Toast.Success("操作成功");
+        }
+      },
+    });
+  }, [
+    detailInfo,
+    context.generalRoleType,
+    context.generalPrincipalUser,
+    context.generalVisibility.visibility,
+  ]);
+
+  let parent: any = null;
+  if (context.generalParent) {
+    if (context.generalParent.parentKr) {
+      parent = {
+        'type': 'kr',
+        'id': context.generalParent.parentKr.mileStoneId,
+        'name': context.generalParent.parentKr.mileStoneName
+      }
+    } else if (context.generalParent.parentOkr) {
+      parent = {
+        'type': 'okr',
+        'id': context.generalParent.parentOkr.workId,
+        'name': context.generalParent.parentOkr.workName
+      }
+    }
+  }
+  
+  return (
+    <div>
+      <Drawer.Header
+        actions={actions}
+        content={
+          parent ? (
+            <span className="okr-detail-head-parent">
+              <i className="tu-icon-liebiao-duiqinubiao" />
+              <span
+                onClick={() =>
+                  parent.type == 'okr'
+                    ? drawerManager.open("okrDetail", {
+                      okrId: parent.id,
+                    })
+                    : drawerManager.open("krDetail", {
+                      krId: parent.id,
+                    })
+                }
+              >
+                <span>{parent.type == 'okr' ? 'O ' : 'KR '}</span>
+                {parent.name}
+              </span>
+            </span>
+          ) : null
+        }
+      />
+      <OkrShare
+        visible={shareVisible}
+        onClose={closeShareModal}
+        data={{
+          okrName: detailInfo.workName,
+          okrId: detailInfo.workId,
+          krs: krs.map((kr) => kr.mileStoneName),
+          user: {
+            ...detailInfo.principalUser,
+            avatar: {
+              color: detailInfo.principalUser.avatar.color,
+              src: detailInfo.principalUser.avatar.medium,
+            },
+          },
+        }}
+      />
+      <PopConfirm
+        ref={popRef}
+        showArrow={false}
+        align="top"
+        className="document-mouse-event-ignore"
+        content={
+          <OkrDeleteConfirm
+            onConfirm={async (selected) => {
+              await workDelete({
+                'deleteType': selected,
+                'workId': detailInfo.workId,
+              });
+              Toast.Success("删除成功");
+              commonContext.refreshAll();
+            }}
+            onCancel={() => popRef.current && popRef.current.getRef().hide()}
+          />
+        }
+      >
+        <span />
+      </PopConfirm>
+      <div style={{ textAlign: "right",height: 0 }}>
+        <UserSelector           ref={userSelectRef}
+          // @ts-ignore
+          multiple={true}
+          onOk={(data) => {
+            changVisiblity(detailInfo.workId, 4, data);
+          }}
+          position="bottomRight"
+          selectNodes={context.generalVisibility.visibilityScope || {}}
+          trigger={
+            <div
+              style={{
+                visibility: "hidden",
+                zIndex: -1,
+                display: "inline-block",
+                height: 0,
+              }}
+            >
+              empty select
+            </div>
+          }
+        />
+      </div>
+    </div>
+  );
+}
+
+export default OkrDetailHeader;