@titaui/pc 1.7.49 → 1.7.53

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

@@ -0,0 +1,52 @@
+import styled from 'styled-components'
+
+export const ReviewItemContainer = styled.div`
+  height: ${(p: any) => p.mode === 0 ? '40px' : '36px'};
+  margin-top: ${(p: any) => p.mode === 0 ? '10px' : 0};
+  border-radius: 2px;
+  background: #ffffff;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  &:hover {
+    background: ${(p: any) => p.mode === 0 ? 'rgba(194, 224, 255, 0.1)' : '#ffffff'};
+  }
+`
+export const ItemName = styled.div`
+  font-size: ${(p: any) => p.mode === 0 ? '14px' : '16px'};
+  font-weight: 600;
+  color: #3B4247;
+`
+export const ItemOptions = styled.div`
+  font-size: 13px;
+  color: #2879ff;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+
+  div {
+    cursor: pointer;
+  }
+`
+export const ItemEdit = styled.div`
+   &:hover {
+    color: #5C8EFF;
+  }
+`
+export const ItemDetail = styled.div`
+  margin-left: 20px;
+  &:hover {
+    color: #5C8EFF;
+  }
+`
+export const IconEdit = styled.span`
+  margin-right: 5px;
+  position: relative;
+  top: 1px;
+`
+export const IconDetail = styled.span`
+  margin-left: 5px;
+  position: relative;
+  top: 1px;
+`

package/src/components/okr-review/components/confirm-pop/ConfirmPop.tsx

@@ -0,0 +1,81 @@
+import React, { PureComponent } from 'react'
+import Pop from '../../../../components-v1/pop';
+import { ConfirmWrapper, ConfirmText, ConfirmBtnGroup, ButtonCancel, ButtonConfirm } from './style';
+
+interface Props {
+  className?: string
+  align?: string
+  container?: string
+
+  isShowConfirmTitle?: boolean
+  confirmTitle?: string // 提示标题
+  confirmTipText?: string // 提示文字
+
+  isShowCancelBtn?: boolean
+  btnCancelText?: string // 取消按钮文字
+
+  isShowConfirmBtn?: boolean
+  btnConfirmText?: string // 确认按钮文字
+
+  onSubmit: (event: any) => void;
+}
+
+const popContainer = document.body
+
+export default class ConfirmPop extends PureComponent<Props> {
+  static defaultProps = {
+    isShowConfirmTitle: false,
+    confirmTitle: '提示',
+    confirmTipText: '此操作不可恢复，您确定删除吗？',
+    isShowCancelBtn: true,
+    btnCancelText: '取消',
+    isShowConfirmBtn: true,
+    btnConfirmText: '确定'
+  }
+
+  handleShowPop = () => {
+    //@ts-ignore
+    this.refs.pop.show(this.refs.trigger)
+  }
+  handleHide = () => {
+    //@ts-ignore
+    this.refs.pop.hide()
+  }
+
+  render() {
+    const {
+      children,
+      className,
+      align,
+      onSubmit,
+      isShowConfirmTitle,
+      isShowCancelBtn,
+      confirmTitle,
+      confirmTipText,
+      btnCancelText,
+      btnConfirmText
+    } = this.props
+
+    return (
+      <div style={{ 'display': 'inline-block' }}>
+        <div ref='trigger' onMouseDown={() => this.handleShowPop()}>{children}</div>
+        <Pop ref='pop' align={align} container={popContainer} className='tita-common-pop-no-shadow'>
+          <ConfirmWrapper className={`pull-screen-ignore ${className}`}>
+            {
+              isShowConfirmTitle && (
+                <div className="confirm__title">{confirmTitle}</div>
+              )
+            }
+            <ConfirmText className="confirm__content" dangerouslySetInnerHTML={{ __html: confirmTipText }}></ConfirmText>
+            <ConfirmBtnGroup className="confirm__btngroup">
+              {
+                isShowCancelBtn && (<ButtonCancel onMouseDown={() => this.handleHide()}>{btnCancelText}</ButtonCancel>)
+              }
+              <ButtonConfirm onMouseDown={(event: any) => { onSubmit(event); this.handleHide(); event.stopPropagation(); event.nativeEvent.stopImmediatePropagation() }}>{btnConfirmText}</ButtonConfirm>
+            </ConfirmBtnGroup>
+          </ConfirmWrapper>
+        </Pop>
+      </div>
+    )
+  }
+}

package/src/components/okr-review/components/confirm-pop/style.ts

@@ -0,0 +1,46 @@
+import styled from 'styled-components'
+
+export const ConfirmWrapper = styled.div`
+  min-width: 300px;
+  border-radius: 2px;
+  box-shadow: 0 0 4px 0 rgba(0,0,0,0.20);
+  background-color: #ffffff;
+  
+  &.bg {
+    background: url(${require('./praise-bg.png')}) no-repeat 0 0 / 101% 105%;
+    box-shadow: 0 6px 15px 0 rgba(0,0,0,0.15);
+  }
+`
+
+export const ConfirmText = styled.div`
+  padding: 12px 20px;
+  font-size: 14px;
+  line-height: 24px;
+  text-align: left;
+  word-break: break-all;
+  word-wrap: break-word;
+  word-break: break-all;
+`
+
+export const ConfirmBtnGroup = styled.div`
+  padding: 0 15px 15px 10px;
+  text-align: right;
+
+  button {
+    margin-left: 5px;
+    padding: 0px 15px;
+    font-size: 14px;
+    line-height: 30px;
+    border-radius: 2px;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.18);
+    border: none;
+  }
+`
+export const ButtonCancel = styled.button`
+  background-color: #f5f8fa;
+  color: #34434e;
+`
+export const ButtonConfirm = styled.button`
+  background-color: #2879FF;
+  color: #fff;
+`

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

@@ -0,0 +1,217 @@
+import React, { PureComponent } from 'react';
+import RangePickerPop from '../range-picker-pop';
+import ReviewItem from './components/ReviewItem';
+import { isFeishu } from '../../utils/platform';
+import Portals from '../../components-v1/portals/Portals';
+import ReviewPop from './ReviewPop';
+import Transition from '../../components-v1/transition';
+import { getApiUrl, taker } from '../../utils/request-v1';
+import { isHavePermission } from './common';
+import { ReviewContainer, ReviewHead, ReviewAdd, IconAdd, ReviewFilter, IconFilter, FilterTime, ReviewEmpty, IconWiki, ReviewList } from './style';
+import { isPlatform } from '../../utils/open-data';
+
+interface Props {
+  className?: string;
+  feedId: any;
+  editAble: boolean;
+  isCompactMode?: boolean; // 页面样式判断：0：推屏，1：宽页面
+  ObjData: ObjDataObject;
+  defaultRange: DefaultRangeObject; // 时间筛选范围
+  createTask?: (node: any, view: any, option: any, mileStoneId: number, parent: any) => void;
+  isOkrPanel?: boolean; // 用于设置复盘创建计划弹层位置
+  popContainer?: any;
+}
+
+interface State {
+  isShowReviewPop: boolean;
+  startDate: string;
+  endDate: string;
+  editType: number; // 编辑类型：0-新建，1-编辑
+  replayId: number;
+  reviewList: ReviewListObject[];
+}
+
+interface DefaultRangeObject {
+  startDate: string;
+  endDate: string;
+}
+interface ReviewListObject {
+  replayId: number;
+  creatDate: string;
+  editable: boolean;
+}
+export interface ObjDataObject {
+  ObjId: number;
+  ObjType: number;
+  ObjIndex: number;
+  ObjName: string;
+}
+export default class Review extends PureComponent<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = {
+      'isShowReviewPop': false,
+      'startDate': '',
+      'endDate': '',
+      'editType': 0,
+      'replayId': 0,
+      'reviewList': [{
+        'replayId': 0,
+        'creatDate': '',
+        'editable': true,
+      }],
+    };
+  }
+
+  static defaultProps = {
+    isCompactMode: false,
+  };
+
+  componentDidMount() {
+    this.getReviewList();
+  }
+
+  componentWillReceiveProps(newProps: Props) {
+    this.getReviewList();
+  }
+
+  // 获取复盘了列表
+  getReviewList = (startDate?: string, endDate?: string) => {
+    const { ObjData } = this.props;
+    let url = getApiUrl(`replay/getByObjId?objId=${ObjData.ObjId}&objType=${ObjData.ObjType}&startDate=${startDate || ''}&endDate=${endDate || ''}`);
+    taker(url, 'GET').then(res => {
+      if (res.Code == 1) {
+        this.setState({
+          reviewList: res.Data||[],
+        });
+      }
+    });
+  };
+
+  // 时间筛选
+  _handleTimePickConfirm = (date: any) => {
+    const { startDate, endDate } = date;
+    this.getReviewList(startDate, endDate);
+    this.setState({
+      startDate: this._enFormatDate(startDate),
+      endDate: this._enFormatDate(endDate),
+    });
+  };
+
+  // 处理弹层时间
+  _handlerReviewPopChange = (submitType: string) => {
+    if (submitType) {
+      this.setState(
+        {
+          startDate: '',
+          endDate: '',
+        },
+        () => this.getReviewList(),
+      );
+    }
+    this.setState({ isShowReviewPop: false });
+  };
+
+  // 将2019/12/3改为2019年12月3日
+  _enFormatDate = (date: string) => date && date.replace(/\//, '年').replace(/\//, '月') + '日';
+  // 将2019年12月3日改为2019/12/3
+  _deFormatDate = (date: string) =>
+    date &&
+    date
+      .replace(/年/, '/')
+      .replace(/月/, '/')
+      .replace(/日/, '');
+
+  stopPropagation = (e: any) => {
+    e.nativeEvent.stopImmediatePropagation();
+    e.stopPropagation();
+  };
+
+  render() {
+    let { isShowReviewPop, startDate, endDate, editType, reviewList, replayId } = this.state;
+    const { className, isCompactMode, defaultRange, ObjData, editAble, feedId, createTask, isOkrPanel } = this.props;
+    let isFiltered = startDate && endDate; // 判断是否筛选过
+
+    return (
+      <ReviewContainer className={className} mode={isCompactMode ? 0 : 1}>
+        <ReviewHead mode={isCompactMode ? 0 : 1}>
+          <ReviewAdd
+            style={{ 'visibility': isHavePermission || editAble ? 'visible' : 'hidden' }}
+            onClick={() => this.setState({ 'isShowReviewPop': true, 'editType': 0 })}
+          >
+            <IconAdd className='tu-icon-add' mode={isCompactMode ? 0 : 1}></IconAdd>
+            <span>添加复盘</span>
+          </ReviewAdd>
+          {(reviewList.length > 0 || isFiltered) && (
+            <ReviewFilter>
+              <RangePickerPop
+                align={'bottom right'}
+                format={'YYYY/MM/DD'}
+                defaultRange={defaultRange}
+                container={this.props.popContainer}
+                onConfirm={this._handleTimePickConfirm}
+                popupPlacement={'bottomRight'}
+              >
+                {!isFiltered && <span>时间筛选</span>}
+                <IconFilter className='tu-icon-calendar'></IconFilter>
+                {isFiltered && <FilterTime>{`${startDate} - ${endDate}`}</FilterTime>}
+              </RangePickerPop>
+            </ReviewFilter>
+          )}
+        </ReviewHead>
+        {reviewList.length === 0 ? (
+          <ReviewEmpty mode={isCompactMode ? 0 : 1}>
+            {isFiltered ? <p>没有找到你想要的</p> : <p>尚未复盘过</p>}
+            {!isPlatform('dd') && (
+              <p className='learnmore'>
+                <a href={
+                  isFeishu('https://wiki.tita.com/x/vIK3') || 'https://docs.tita.com/tita-how-to-write-review-summary/'
+                } target='_blank'>
+                  <IconWiki className='tu-icon-wiki' mode={isCompactMode ? 0 : 1}></IconWiki>
+                  <span>了解复盘的重要性</span>
+                </a>
+              </p>
+            )}
+          </ReviewEmpty>
+        ) : (
+          <ReviewList>
+            {reviewList.map((item: any, index: number) => {
+              return (
+                <React.Fragment key={index}>
+                  <ReviewItem
+                    isCompactMode={isCompactMode}
+                    feedId={feedId}
+                    editAble={editAble}
+                    reviewItemData={item}
+                    krIndex={ObjData.ObjIndex}
+                    editReview={() => this.setState({ 'isShowReviewPop': true, 'editType': 1, 'replayId': item.replayId })}
+                  />
+                </React.Fragment>
+              );
+            })}
+          </ReviewList>
+        )}
+        <Portals>
+          <Transition
+            visible={isShowReviewPop}
+            animate={true}
+            transitionName='modal'
+            enterActiveTimeout={300}
+            enterEndTimeout={100}
+            leaveActiveTimeout={100}
+            leaveEndTimeout={300}
+          >
+            <ReviewPop
+              ObjData={ObjData}
+              EditType={editType}
+              ReplayId={replayId}
+              createTask={createTask}
+              isOkrPanel={isOkrPanel}
+              onSubmit={(submitType: string) => this._handlerReviewPopChange(submitType)}
+            />
+          </Transition>
+        </Portals>
+      </ReviewContainer>
+    );
+  }
+}

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

@@ -0,0 +1,78 @@
+import styled from 'styled-components'
+
+export const ReviewContainer = styled.div`
+  height: 100%;
+  background: ${(p: any) => p.mode === 0 ? '#ffffff' : 'transparent'};
+`
+export const ReviewHead = styled.div`
+  padding: ${(p: any) => p.mode === 0 ? '0 15px 0 10px' : 0};
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+`
+export const ReviewAdd = styled.div`
+  font-size: 14px;
+  line-height: 24px;
+  color: #2879ff;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  &:hover {
+    color: #5C8EFF;
+  }
+  .tu-icon-add {
+    font-weight: bold;
+  }
+`
+export const IconAdd = styled.span`
+  margin-right: 5px;
+  font-weight: 900 !important;
+  font-size: ${(p: any) => p.mode === 0 ? '10px' : '12px'};
+`
+export const ReviewFilter = styled.div`
+  font-size: 13px;
+  line-height: 24px;
+  color: #83898F;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+`
+export const IconFilter = styled.span`
+  margin-left: 4px;
+  font-size: 15px;
+  position: relative;
+  top: 2px;
+`
+export const FilterTime = styled.span`
+  margin-left: 4px;
+  font-size: 14px;
+  color: #565E66;
+`
+export const ReviewEmpty = styled.div`
+  width: ${(p: any) => p.mode === 0 ? 'calc(100% - 20px)' : 'calc(100% - 10px)'};
+  height: ${(p: any) => p.mode === 0 ? '89px' : '136px'};
+  margin: ${(p: any) => p.mode === 0 ? '6px auto 0' : '20px auto 0'};
+  font-size: ${(p: any) => p.mode === 0 ? '16px' : '20px'};
+  border: 1px dashed #c5c5c5;
+  border-radius: 3px;
+  color: #BFC3C7;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+  .learnmore {
+    margin-top: ${(p: any) => p.mode === 0 ? '5px' : '10px'};
+    font-size: ${(p: any) => p.mode === 0 ? '12px' : '14px'};
+    a {
+      color: #2879ff;
+    }
+  }
+`
+export const IconWiki = styled.span`
+  margin-right: 5px;
+  position: relative;
+  top: 2px;
+`
+export const ReviewList = styled.div`
+`

package/src/components/okr-share/common-painter/darwAvatar.ts

@@ -0,0 +1,65 @@
+import openDataPainter from "./openDataPainter";
+import { drawImage } from "./utils";
+
+interface avatarParms {
+  url?: string;
+  color?: string;
+  name: string;
+  id: number;
+  width: number;
+  height: number;
+  x: number;
+  y: number;
+  maxNameWidth?: number;
+}
+export default async function(ctx: CanvasRenderingContext2D, params: avatarParms):Promise<number> {
+  ctx.save();
+  ctx.beginPath();
+  ctx.arc(
+    params.width / 2 + params.x,
+    params.height / 2 + params.y,
+    params.width / 2,
+    0,
+    Math.PI * 2,
+    false,
+  );
+  ctx.clip();
+  ctx.closePath();
+  params.url ? await drawImageAvatar(ctx, params) : await drawTextAvatar(ctx, params);
+  ctx.restore();
+  return params.y + params.height;
+  
+}
+function drawImageAvatar(ctx: CanvasRenderingContext2D, avatar: avatarParms) {
+  return  drawImage(ctx,avatar.url as string,avatar.x,avatar.y,avatar.width,avatar.height)
+}
+function drawTextAvatar(ctx: CanvasRenderingContext2D, avatar: avatarParms) {
+  const maxNameWidth = avatar.maxNameWidth || 28;
+  return new Promise<void>(async resolve => {
+    ctx.fillStyle = avatar.color as string;
+    ctx.fill();
+
+    ctx.closePath();
+    ctx.fillStyle = 'white';
+    ctx.font = '14px arial';
+    ctx.textBaseline = 'bottom';
+    let namePainter = await openDataPainter(ctx,{id:avatar.id,name:avatar.name,type:'userName'},22,maxNameWidth);
+    const { width, height } = namePainter;
+    // const textWidth = Math.min(maxNameWidth, width);
+    // ctx.beginPath();
+    // ctx.rect(
+    //   avatar.x + avatar.width / 2 - maxNameWidth / 2,
+    //   avatar.y + avatar.height / 2 - height / 2,
+    //   maxNameWidth,
+    //   height,
+    // );
+    // ctx.clip();
+    namePainter.draw(
+      ctx,
+      avatar.x + avatar.width / 2 - width / 2,
+      avatar.y + avatar.height / 2 - height / 2,
+    );
+    ctx.closePath();
+    resolve();
+  });
+}

package/src/components/okr-share/common-painter/openDataPainter.ts

@@ -0,0 +1,46 @@
+import { getOpenId } from "../../../utils/open-data";
+import { isWx } from "../../../utils/bs-global";
+
+interface openDataParam {
+  id: number; name: string; type: 'userName' | 'departmentName'
+}
+
+export default async function (
+  ctx: CanvasRenderingContext2D,
+  openDataParams: openDataParam,
+  lineHeight: number,
+  maxWidth: number = Infinity
+) {
+  let name = openDataParams.name
+  if (isWx()) {
+    name = await getOpenData(openDataParams)
+  }
+  const { width } = ctx.measureText(name);
+  let actualWidth = Math.min(width, maxWidth)
+  return {
+    width: actualWidth,
+    height: lineHeight,
+    draw: function (ctx: CanvasRenderingContext2D, x: number, y: number) {
+      ctx.save()
+      ctx.textBaseline = 'middle';
+      ctx.beginPath();
+      ctx.rect(x, y, actualWidth, lineHeight);
+      ctx.clip();
+      ctx.fillText(name, x, y + lineHeight / 2);
+      ctx.closePath()
+      ctx.restore()
+    }
+  }
+}
+const getOpenData = ({ id, name, type }: openDataParam) => {
+  const openId = getOpenId(id, type)
+  if (!window['WWOpenData'] || !openId) return Promise.resolve(name)
+  return new Promise<string>((resolve, reject) => {
+    window['WWOpenData'].prefetch({ items: [{ id: openId, type }] }, (err, data) => {
+      if (err) {
+        return reject(err)
+      }
+      resolve(data.items[0].data)
+    })
+  })
+}

package/src/components/okr-share/common-painter/setSize.ts

@@ -0,0 +1,12 @@
+export default function (canvas: HTMLCanvasElement, ctx: CanvasRenderingContext2D, width, height) {
+  const devicePixelRatio = window.devicePixelRatio || 1;
+  const data = ctx.getImageData(0, 0, canvas.width, canvas.height);
+  //要将 canvas 的宽高设置成容器宽高的 2 倍
+  canvas.width = width * devicePixelRatio;
+  canvas.height = height * devicePixelRatio;
+  canvas.style.width = width + 'px';
+  canvas.style.height = height + 'px';
+  //然后将画布缩放，将图像放大两倍画到画布上
+  ctx.scale(devicePixelRatio, devicePixelRatio);
+  ctx.putImageData(data, 0, 0);
+}

package/src/components/okr-share/common-painter/utils.ts

@@ -0,0 +1,83 @@
+export function drawImage(
+  ctx: CanvasRenderingContext2D,
+  url: string,
+  x: number,
+  y: number,
+  width: number,
+  height: number,
+) {
+  return new Promise<void>(res => {
+    const img = new Image();
+    img.src = url;
+    img.onload = function () {
+      ctx.drawImage(img, x, y, width, height);
+      res();
+    };
+  });
+}
+export function drawTextMiddle(
+  ctx: CanvasRenderingContext2D,
+  text: string,
+  x: number,
+  y: number,
+  lineHeight: number,
+  maxWidth?: number,
+  textAlign?: 'left' | 'center'
+) {
+  ctx.textBaseline = 'middle';
+  if (!maxWidth) {
+
+    ctx.fillText(text, x, y + lineHeight / 2);
+    return y + lineHeight;
+  }
+  const lines = breakLinesForCanvas(ctx, text, maxWidth);
+  lines.forEach((l) => {
+    const { width } = ctx.measureText(l)
+    let left = x;
+    if (textAlign == 'center' && maxWidth) {
+      console.log(maxWidth, width)
+      left = (maxWidth - width) / 2 + x
+    }
+    ctx.fillText(l, left, y + lineHeight / 2);
+
+    y = y + lineHeight;
+  })
+  return y
+}
+function findBreakPoint(text, width, context) {
+  var min = 0;
+  var max = text.length - 1;
+
+  while (min <= max) {
+    var middle = Math.floor((min + max) / 2);
+    var middleWidth = context.measureText(text.substr(0, middle)).width;
+    var oneCharWiderThanMiddleWidth = context.measureText(text.substr(0, middle + 1)).width;
+    if (middleWidth <= width && oneCharWiderThanMiddleWidth > width) {
+      return middle;
+    }
+    if (middleWidth < width) {
+      min = middle + 1;
+    } else {
+      max = middle - 1;
+    }
+  }
+
+  return -1;
+}
+
+export function breakLinesForCanvas(ctx: CanvasRenderingContext2D, text: string, width: number) {
+  var result: string[] = [];
+  var breakPoint = 0;
+
+
+  while ((breakPoint = findBreakPoint(text, width, ctx)) !== -1) {
+    result.push(text.substr(0, breakPoint));
+    text = text.substr(breakPoint);
+  }
+
+  if (text) {
+    result.push(text);
+  }
+
+  return result;
+}