@titaui/pc 1.7.49 → 1.7.53

package/src/components/okr-review/ReviewPop/components/ReviewBody/style.ts

@@ -0,0 +1,281 @@
+import styled from 'styled-components';
+
+export const ReviewBodyContainer = styled.div`
+  background: #ffffff;
+`;
+export const ReviewBodyScroll = styled.div`
+  min-height: 465px;
+  max-height: ${(p: any) => p.maxHeight + 'px'};
+  margin-right: 4px;
+  padding: 20px 46px 15px 42px;
+  overflow-y: scroll;
+
+  & > div {
+    margin-bottom: 20px;
+  }
+`;
+export const ReviewCatalog = styled.div`
+  margin-right: 15px;
+  padding-left: 9px;
+  line-height: 20px;
+  font-size: 14px;
+  font-weight: 600;
+  color: #03101a;
+  position: relative;
+
+  &::before {
+    content: '';
+    width: 4px;
+    height: 13px;
+    border-radius: 2px;
+    background: #2879FF;
+    position: absolute;
+    left: 0;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+  &.drawback {
+    margin-right: 0;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    & > span {
+      flex: 1;
+    }
+
+    .delete-replay {
+      font-weight: normal;
+      color: #2879ff;
+      cursor: pointer;
+    }
+  }
+`;
+export const ReviewCatalogSecond = styled.div`
+  margin-top: 3px;
+  margin-left: 8px;
+  font-weight: 500;
+  color: #565e66;
+`;
+export const ReviewTarget = styled.div`
+  font-size: 14px;
+  line-height: 20px;
+  display: flex;
+  align-items: flex-start;
+  white-space: nowrap;
+
+  .target-name {
+    display: flex;
+    align-items: flex-start;
+
+    p {
+      white-space: normal;
+    }
+  }
+`;
+export const ReviewWorth = styled.div`
+  margin-bottom: 13px !important;
+`;
+export const ReviewProblem = styled.div`
+  margin-bottom: 13px !important;
+`;
+export const ReviewAction = styled.div``;
+export const BtnCreateTask = styled.button`
+  height: 26px;
+  margin: 12px 0 5px 8px;
+  padding: 0 10px;
+  font-size: 12px;
+  border-radius: 2px;
+  color: #ffffff;
+  background: #2879FF;
+  border: none;
+`;
+export const ReviewMember = styled.div`
+  .review-meber {
+    margin-top: 5px;
+    margin-left: 8px;
+    border: 1px solid #e4ebf0;
+    border-radius: 5px;
+    display: flex;
+    flex-wrap: wrap;
+
+    & > div {
+      margin: 8px;
+    }
+  }
+
+  .add-meber {
+    width: 28px;
+    height: 28px;
+    /* margin-left: 12px; */
+    border: 1px solid #a0a7ad;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+
+    .tu-icon-add {
+      margin: 0;
+      font-size: 16px;
+      font-weight: bold;
+      color: #a0a7ad;
+    }
+  }
+`;
+export const AvatarWrapper = styled.div`
+  height: 30px;
+  position: relative;
+
+  .depts {
+    width: 30px;
+    height: 30px;
+    line-height: 30px;
+    border-radius: 4px;
+    text-align: center;
+    color: #fff;
+    background-color: #7890bd;
+  }
+`;
+export const IconCloseContainer = styled.div`
+  width: 10px;
+  height: 10px;
+  line-height: 10px;
+  margin-left: -13px;
+  margin-bottom: 3px;
+  padding: 0 0 3px 3px;
+  border-radius: 50%;
+  display: inline-block;
+  cursor: pointer;
+  color: #fff;
+  background-color: #a0a7ad;
+  position: absolute;
+  top: -2px;
+  right: -4px;
+
+  &:hover {
+    background-color: #f04d4d;
+  }
+`;
+export const IconClose = styled.span`
+  line-height: 10px;
+  display: table;
+  /* width: 14px;
+  height: 14px;
+  line-height: 11px;
+  font-weight: bold;
+  border-radius: 50%;
+  color: #FFFFFF;
+  background-color: #a0a7ad;
+  text-align: center;
+  cursor: pointer;
+  display: inline-block;
+  position: absolute;
+  top: -2px;
+  right: -2px;
+
+  &:hover {
+    background-color: #f04d4d;
+  } */
+`;
+export const ReviewContent = styled.div`
+  .okr-name {
+    color: #03101a;
+  }
+
+  &.action-plan {
+    margin-top: 6px;
+    padding-left: 8px;
+    font-size: 14px;
+    color: #03101a;
+    /* display: -webkit-box;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 1; */
+    cursor: pointer;
+    word-break: break-all;
+  }
+`;
+export const IconTarget = styled.div`
+  margin-right: 5px;
+
+  &.review-kr {
+    margin-top: 2px;
+    padding: 2px 8px;
+    font-size: 12px;
+    line-height: 12px;
+    border-radius: 22px;
+    color: #2879ff;
+    background: #e3f4ff;
+  }
+
+  &.tu-icon-OKR {
+    font-size: 15px;
+    color: #83ba5a;
+    position: relative;
+    top: 2px;
+  }
+`;
+export const IconRunning = styled.span`
+  margin-right: 6px;
+  font-size: 12px;
+  color: #2879ff;
+`;
+export const ReviewMode = styled.div`
+  margin-bottom: 0 !important;
+  font-size: 14px;
+  color: #2879ff;
+  text-align: right;
+
+  & > span {
+    cursor: pointer;
+  }
+`;
+export const IconSwitch = styled.span`
+  margin-right: 5px;
+  font-size: 12px;
+  position: relative;
+  top: 1px;
+`;
+export const AddReviewProblem = styled.div`
+  height: 38px;
+  margin-bottom: 26px !important;
+  margin-left: 8px;
+  padding: 0 12px;
+  font-size: 14px;
+  font-weight: bold;
+  border-radius: 5px;
+  color: #2879ff;
+  background: #fafbfc;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  position: relative;
+  top: -5px;
+
+  .tu-icon-add {
+    font-weight: bold;
+  }
+
+  &.none-drawback {
+    &::before {
+      content: '';
+      width: 3px;
+      height: 13px;
+      margin-left: -8px;
+      border-radius: 4px;
+      background: #2879ff;
+      position: absolute;
+      left: 0;
+      top: 50%;
+      transform: translateY(-50%);
+    }
+  }
+`;
+export const IconAdd = styled.span`
+  margin-right: 5px;
+  font-size: 12px;
+  font-weight: 900 !important;
+`;

package/src/components/okr-review/ReviewPop/components/Toast/index.tsx

@@ -0,0 +1,17 @@
+import React, { PureComponent } from 'react'
+import {ToastContainer} from './style'
+
+interface Props {
+  className?: string
+}
+
+export default class Toast extends PureComponent<Props> {
+  render() {
+    const {className, children} = this.props
+    return (
+      <ToastContainer className={className}>
+        {children}
+      </ToastContainer>
+    )
+  }
+}

package/src/components/okr-review/ReviewPop/components/Toast/style.ts

@@ -0,0 +1,42 @@
+import styled from 'styled-components'
+
+export const ToastContainer = styled.div`
+  /* min-width: 145px; */
+  max-width: 525px;
+  margin-left: -4px;
+  padding: 6px 15px;
+  font-size: 12px;
+  box-shadow: 0 0 5px 0 rgba(0,0,0,0.20);
+  border-radius: 2px;
+  color: #33383D;
+  background: #FFFFFF;
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  transition: all .3s ease-in-out;
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  opacity: 0;
+  visibility: hidden;
+
+  &.slideIn {
+    top: 50px;
+    opacity: 1;
+    visibility: visible;
+  }
+
+  .tu-icon-warning,
+  .tu-icon-check,
+  .tu-icon-cross {
+    margin-right: 6px;
+    position: relative;
+    top: 6px;
+  }
+  
+  p {
+    width: max-content;
+    text-align: center;
+  }
+`

package/src/components/okr-review/ReviewPop/index.tsx

@@ -0,0 +1,216 @@
+import React, { PureComponent } from 'react';
+import ReviewBody from './components/ReviewBody';
+import Toast from './components/Toast';
+import { ReviewDataObject, DrawbackObject } from './components/ReviewBody';
+import { ObjDataObject } from '../index';
+import { getApiUrl, taker } from '../../../utils/request-v1';
+import { htmlEncodeByRegExp, htmlDecodeByRegExp } from '../../../utils/mblog';
+
+import { ReviewPopWrapper, ReviewContainer, ReviewHead, ReviewFoot, IconClose, BtnGroup, BtnCancle, BtnConfirm } from './style';
+
+interface Props {
+  className?: string;
+  ObjData: ObjDataObject;
+  EditType: number; // 编辑类型：0-新建，1-编辑
+  ReplayId: number;
+  onSubmit: (submitType?: string) => void;
+  createTask?: (node: any, view: any, option: any, mileStoneId: number, parent: any, createByReview?: boolean) => void;
+  isOkrPanel?: boolean;
+}
+
+interface State {
+  isAllowSubmit: boolean;
+  isShowToast: boolean;
+  isMissDrawBack: boolean;
+  toastIcon: string;
+  toastInfo: string;
+  submitType: string; // 提交类型：'saveDraft'-保存草稿，'submit'-提交
+  submitStatus: number; // 提交状态：0-失败，1-成功，2-提交中
+}
+export default class ReviewPop extends PureComponent<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = {
+      isAllowSubmit: false,
+      isShowToast: false,
+      isMissDrawBack: false,
+      toastIcon: '',
+      toastInfo: '',
+      submitType: '',
+      submitStatus: 0,
+    };
+  }
+  timer: any;
+  reviewData: ReviewDataObject;
+  localStorageKey: string;
+
+  componentDidMount() {
+    this.localStorageKey = `ReviewData_${this.props.ObjData.ObjId}`;
+  }
+  /**
+   *可提交的条件：
+   * 1.“价值与收获”与“问题与不足”必须至少填一项，否则确定按钮置灰；
+   * 2.不满足提交要求时（未填写“价值与收获”或“问题与不足”；或者填写字数超过限制时；或者问题与不足中只填写了除了问题之外的属性时），“确定”按钮置灰；
+   * 3.当用户填写了“根本原因”或“相应解决措施”时，而没有填写“问题与不足”时，点击“确定”按钮提交总结时，系统提示“请完善问题与不足x”；
+   *
+   * @memberof ReviewPop
+   */
+  _handlerEditChange = (data: ReviewDataObject) => {
+    let isAllowSubmit = this.state.isAllowSubmit;
+    let isStandardMode = data.isStandardMode;
+    // 允许提交的条件
+    if (isStandardMode) {
+      // 标准模式
+      isAllowSubmit = (this.characterCheck(data.gains, 5000) || this.characterCheck(data.Drawback, 5000)) && data.gains.length <= 5000 && data.Drawback.length <= 5000;
+    } else {
+      // 高级模式
+      // 是否填写问题与不足
+      let isHasDrawBack = data.drawbackList.some((item: DrawbackObject) => this.characterCheck(item.drawback, 5000));
+      // 问题与不足字数是否超出限制
+      let isDrawbackBeyondLimit = data.drawbackList.some((item: DrawbackObject) => item.cause.length > 5000 || item.measures.length > 5000 || item.drawback.length > 5000);
+      isAllowSubmit = (this.characterCheck(data.gains, 5000) || isHasDrawBack) && data.gains.length <= 5000 && !isDrawbackBeyondLimit;
+    }
+    this.setState({ isAllowSubmit });
+    this.reviewData = data;
+  };
+
+  // 字数校验
+  characterCheck = (str: string, strLimit: number) => str.length > 0 && str.length <= strLimit;
+
+  // 提交数据
+  _handlerSubmit = () => {
+    const { EditType } = this.props;
+    let data = { ...this.reviewData };
+    let drawbackId = data.drawbackList.length > 0 ? data.drawbackList[0].drawbackId : 0;
+    data.objId = String(data.objId);
+    data.gains = htmlEncodeByRegExp(htmlDecodeByRegExp(data.gains));
+    if (data.isStandardMode) {
+      // 标准模式
+      data.drawbackList = [
+        {
+          drawbackId,
+          drawback: htmlEncodeByRegExp(htmlDecodeByRegExp(data.Drawback)),
+          cause: '',
+          measures: '',
+        },
+      ];
+    } else {
+      // 高级模式
+      // 问题与不足中只填写了除了问题之外的属性
+      let missDrawbackList = data.drawbackList.map((item: DrawbackObject, index: number) => ((item.cause.trim().length > 0 || item.measures.trim().length > 0) && item.drawback.trim().length <= 0 ? `“问题总结${index + 1}”` : ''));
+      let toastInfo = missDrawbackList.filter((item: string) => item).join(' ');
+      let toastTips = `请完善${toastInfo}`;
+      if (toastInfo) {
+        this.setState({ isMissDrawBack: true });
+        this.showToast('Submit', 2, toastTips, 3000);
+        return;
+      }
+      this.setState({ isMissDrawBack: false });
+      // 提交时过滤掉未填写的问题
+      let drawbackList = data.drawbackList.filter((item: DrawbackObject) => item.drawback || item.cause || item.measures);
+      data.drawbackList = drawbackList.length === 0 ? [{ drawbackId: drawbackId, drawback: '', cause: '', measures: '' }] : drawbackList;
+      data.drawbackList.forEach((item: DrawbackObject) => {
+        item.drawback = htmlEncodeByRegExp(htmlDecodeByRegExp(item.drawback));
+        item.cause = htmlEncodeByRegExp(htmlDecodeByRegExp(item.cause));
+        item.measures = htmlEncodeByRegExp(htmlDecodeByRegExp(item.measures));
+      });
+    }
+    delete data.Drawback;
+    delete data.reviewMebers;
+    delete data.reviewParticipantsList;
+    delete data.reviewDepartmentsList;
+    delete data.taskList;
+    let url = getApiUrl(`replay/${EditType === 0 ? 'add' : 'update'}`);
+    taker(url, 'POST', data).then(res => {
+      if (res.Code == 1) {
+        localStorage.removeItem(this.localStorageKey);
+        this.showToast('Submit', 1, `${EditType === 0 ? '提交' : '更新'}成功`, 1500);
+      } else {
+        this.showToast('Submit', 0, res.Message, 3000);
+      }
+    });
+  };
+
+  /**
+   * @submitType 提交类型：SaveDraft: 保存草稿 || Submit提交
+   * @callbackStatus 提交返回结果：0-失败，1-成功，2-警告
+   * @toastInfo 提示信息
+   * @duration
+   *
+   * @memberof ReviewPop
+   */
+  showToast = (submitType: string, callbackStatus: number, toastInfo: string, duration = 2000) => {
+    let toastIcon = {
+      0: 'tu-icon-cross',
+      1: 'tu-icon-check',
+      2: 'tu-icon-warning',
+    };
+    this.setState({ submitType, submitStatus: 2 }, () => {
+      this.setState(
+        {
+          isShowToast: true,
+          toastIcon: toastIcon[callbackStatus],
+          toastInfo,
+        },
+        () => {
+          this.timer = setTimeout(() => {
+            this.setState({ isShowToast: false, submitStatus: callbackStatus === 2 ? 0 : callbackStatus });
+            if (callbackStatus === 1) {
+              this.props.onSubmit('Submit');
+            }
+          }, duration);
+        },
+      );
+    });
+  };
+
+  componentWillUnmount() {
+    clearTimeout(this.timer);
+  }
+
+  render() {
+    const { onSubmit, ObjData, EditType, className, ReplayId, createTask, isOkrPanel } = this.props;
+    const { isAllowSubmit, isShowToast, isMissDrawBack, toastIcon, toastInfo, submitType, submitStatus } = this.state;
+    return (
+      <ReviewPopWrapper className={className}>
+        <ReviewContainer>
+          <ReviewHead>
+            <p>{`复盘${ObjData.ObjType == 65 ? 'KR' : '目标'}`}</p>
+            <IconClose className='tu-icon-close' onClick={() => onSubmit()}></IconClose>
+          </ReviewHead>
+          <ReviewBody
+            ObjData={ObjData}
+            EditType={EditType}
+            ReplayId={ReplayId}
+            isMissDrawBack={isMissDrawBack}
+            createTask={createTask}
+            isOkrPanel={isOkrPanel}
+            onChange={(data: ReviewDataObject) => this._handlerEditChange(data)}
+          />
+          <ReviewFoot>
+            <BtnConfirm style={{ visibility: EditType === 0 ? 'visible' : 'hidden' }} onClick={() => this.showToast('SaveDraft', 1, '保存成功')} disabled={submitType === 'SaveDraft' && submitStatus === 2}>
+              保存草稿
+            </BtnConfirm>
+            <BtnGroup>
+              <BtnCancle
+                onClick={() => {
+                  localStorage.removeItem(this.localStorageKey);
+                  onSubmit();
+                }}
+              >
+                取消
+              </BtnCancle>
+              <BtnConfirm disabled={!isAllowSubmit || (submitType == 'Submit' && submitStatus === 2)} onClick={() => this._handlerSubmit()}>
+                确定
+              </BtnConfirm>
+            </BtnGroup>
+          </ReviewFoot>
+          <Toast className={isShowToast ? 'slideIn' : ''}>
+            <span className={toastIcon}></span>
+            <p>{toastInfo}</p>
+          </Toast>
+        </ReviewContainer>
+      </ReviewPopWrapper>
+    );
+  }
+}

package/src/components/okr-review/ReviewPop/style.ts

@@ -0,0 +1,79 @@
+import styled from 'styled-components'
+
+export const ReviewPopWrapper = styled.div`
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 1500;
+  background: rgba(0, 0, 0, 0.3);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`
+export const ReviewContainer = styled.div`
+  width: 663px;
+  min-height: 595px;
+  max-height: 725px;
+  border-radius: 8px;
+  box-shadow: 0 5px 20px 0 rgba(3,16,26,0.30);
+  position: relative;
+  /* background: #FFFFFF; */
+`
+export const ReviewHead = styled.div`
+  width: calc(100% - 40px);
+  height: 40px;
+  padding: 0 20px;
+  font-size: 16px;
+  border-radius: 8px 8px 0 0;
+  color: #FFFFFF;
+  background-image: linear-gradient(270deg, #85C2FF 0%, #2879ff 100%);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+`
+export const IconClose = styled.span`
+  font-size: 14px;
+  cursor: pointer;
+`
+export const ReviewFoot = styled.div`
+  width: calc(100% - 40px);
+  height: 54px;
+  padding: 0 20px;
+  border-top: 1px solid #E4EBF0;
+  border-radius: 0 0 8px 8px;
+  background: #FFFFFF;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  button {
+    min-width: 70px;
+    height: 34px;
+    padding: 0 15px;
+    font-size: 14px;
+    border-radius: 5px;
+    box-shadow: 0 1px 2px 0 rgba(0,0,0,0.30);
+    border: none;
+  }
+`
+export const BtnGroup = styled.div`
+  button {
+    margin-left: 10px;
+  }
+`
+export const BtnCancle = styled.button`
+  color: #36434D;
+  background: #F5F8FA;
+`
+export const BtnConfirm = styled.button`
+  color: #FFFFFF;
+  background: #2879FF;
+
+  &:disabled {
+    color: #ADB8C0;
+    background: #F5F8FA;
+    cursor: no-drop;
+  }
+`

package/src/components/okr-review/common.ts

@@ -0,0 +1,13 @@
+import { getBSGlobal } from '../../utils/bs-global';
+
+const userInfo = getBSGlobal('loginUserInfo');
+export const isHavePermission = (userInfo.IsRoot && userInfo.Role != 4) || userInfo.IsBoss || userInfo.IsOkrManager
+
+export const taskStatusIcon = {
+  0: 'tu-icon-notstart', // 未开始
+  1: 'tu-icon-running', // 进行中
+  2: 'tu-icon-finished', // 已结束
+  3: 'tu-icon-deferred', // 已延迟
+  4: 'tu-icon-canceled', // 已取消
+  6: 'tu-icon-paused' // 暂停中
+}

package/src/components/okr-review/components/ReviewItem/index.tsx

@@ -0,0 +1,44 @@
+import React, { PureComponent } from 'react'
+import { ReviewItemContainer, ItemName, ItemOptions, ItemEdit, IconEdit, ItemDetail, IconDetail } from './style'
+import { isHavePermission } from '../../common'
+interface Props {
+  className?: string
+  editAble: boolean
+  isCompactMode?: boolean // 页面样式判断：0：推屏，1：宽页面
+  feedId: any
+  krIndex: number
+  reviewItemData: ReviewListObject
+  toReviewDetail?: Function
+  editReview: Function
+}
+interface ReviewListObject {
+  replayId: number;
+  creatDate: string;
+  editable: boolean;
+}
+export default class ReviewItem extends PureComponent<Props> {
+
+  _handlerLinkToReviewDetail = () => {
+    const { feedId, reviewItemData, krIndex, editAble } = this.props
+    window.open(`${location.pathname}#okr/reviewDetail?okrId=8077&back=${location.hash}&replayId=${reviewItemData.replayId}&feedId=${feedId}&krIndex=${krIndex}&editAble=${editAble}`)
+  }
+
+  render() {
+    const { className, isCompactMode, editReview, reviewItemData, editAble } = this.props
+    return (
+      <ReviewItemContainer className={className} mode={isCompactMode ? 0 : 1}>
+        <ItemName mode={isCompactMode ? 0 : 1}>复盘 ({reviewItemData.creatDate})</ItemName>
+        <ItemOptions>
+          <ItemEdit onMouseDown={editReview} style={{ visibility: reviewItemData.editable || isHavePermission || editAble ? 'visible' : 'hidden' }}>
+            <IconEdit className="tu-icon-bianji"></IconEdit>
+            <span>编辑</span>
+          </ItemEdit>
+          <ItemDetail onMouseDown={() => this._handlerLinkToReviewDetail()}>
+            <span>查看详情</span>
+            <IconDetail className="tu-icon-xiangqing"></IconDetail>
+          </ItemDetail>
+        </ItemOptions>
+      </ReviewItemContainer>
+    )
+  }
+}