@titaui/pc 1.7.13 → 1.7.17

package/src/components/okr-detail/components/okr-tree/tree-node/kr-node/kr-score-editor/kr-push-score.tsx

@@ -0,0 +1,323 @@
+import React, { PureComponent, RefObject } from 'react'
+import EditPop from './edit-pop';
+
+import { taker, getApiUrl } from '../../../../../../../utils/request-v1';
+import { htmlEncodeByRegExp, htmlDecodeByRegExp } from '../../../../../../../utils/tools';
+import UserSelectorPop from '../../../../../../../components-v1/userSelector/UserSelectorPop';
+import Avatar from '../../../../../../../components-v1/avatar'
+import {
+  ExtraWrapper,
+  ScoreInfoWrapper,
+  ScoreInfoWrapperError,
+  ScoreInfoSpanText,
+  ScoreInfoSpanTextarea,
+  ScoreInfoSpanTextareaError,
+  CallSomeoneSpan,
+  Add,
+  AvatarWrapper,
+  IconEdit
+} from './style';
+
+interface Props {
+  setRefInParent: Function
+  textAreaValue: string
+  changeProp?: Function
+  handleRemark: Function
+  areaValue?: string
+  changeTextarea?: Function
+  changeScoreInfo?: Function
+  editable: boolean
+  isEvaluate: boolean
+  value: string
+  mileStoneId: number
+  onChangeScore: Function
+  showMessage?: boolean
+  hasText?: boolean
+  container?: HTMLDivElement | HTMLElement
+  align?: string
+  evaluateEditable: boolean
+  createTask: boolean
+  renderTag?: Function
+}
+
+interface State {
+  textareaValue: string
+  scoreInfoEle: null | HTMLTextAreaElement,
+  scoreInfoErrorEle: null | HTMLTextAreaElement,
+  showScoreInfoError: boolean,
+  areaLength: number,
+  atUsers: User[],
+  showUserSelector: boolean,
+  scoreInfoText: string,
+  scoreInfoRef: RefObject<HTMLTextAreaElement>,
+  scoreInfoErrorRef: RefObject<HTMLTextAreaElement>
+}
+
+interface User {
+  Id: number;
+  Name: string;
+  Email: string;
+  DepartmentId: number;
+  Department: string;
+  UserAvatar: UserAvatar;
+}
+
+interface UserAvatar {
+  Original?: any;
+  Small?: any;
+  Medium?: any;
+  Normal?: any;
+  Big?: any;
+  Large?: any;
+  HasAvatar: boolean;
+  Color: string;
+}
+
+export default class Score extends PureComponent<Props, State> {
+  score: any
+
+  constructor(p: Props) {
+    super(p);
+    this.state = {
+      atUsers: [],
+      showUserSelector: false,
+      //新增评分说明textarea字段值,
+      scoreInfoText: "",
+      showScoreInfoError: false,
+      areaLength: 0,
+      scoreInfoRef: React.createRef(),
+      scoreInfoErrorRef: React.createRef(),
+      scoreInfoEle: null,
+      scoreInfoErrorEle: null,
+      textareaValue: ''
+    }
+  }
+
+  componentDidMount(): void {
+    let { scoreInfoRef, scoreInfoErrorRef } = this.state;
+    let { textAreaValue, setRefInParent } = this.props;
+    this.setState({
+      scoreInfoEle: scoreInfoRef.current,
+      scoreInfoErrorEle: scoreInfoErrorRef.current,
+      scoreInfoText: textAreaValue,
+      showScoreInfoError: textAreaValue.length > 1000,
+      areaLength: textAreaValue.length
+    });
+    this.score && setRefInParent(this.score.refs);
+  }
+  
+  componentDidUpdate(prevProps: Readonly<Props>, prevState: Readonly<State>, snapshot?: any): void {
+    const { textareaValue } = this.state;
+    const { textAreaValue } = this.props;
+    if (textAreaValue !== textareaValue) {
+      this.setState({
+        textareaValue: textAreaValue,
+        scoreInfoText: textAreaValue
+      })
+    }
+  }
+
+  static defaultProps = {
+    hasText: false
+  }
+  
+  showScore = () => {
+  }
+
+  deleteUser = (index: number) => {
+    const { atUsers } = this.state;
+    const newU = [...atUsers];
+    newU.splice(index, 1);
+    this.setState({
+      atUsers: newU
+    })
+  }
+  handleAddAtUser = (user: User) => {
+    const { atUsers } = this.state;
+    if (atUsers.findIndex(u => u.Id == user.Id) != -1) return;
+    this.setState({
+      atUsers: [user]
+    })
+  }
+
+  handleUpdateScore = (value: string) => {
+    //@ts-ignore
+    const { changeProp, mileStoneId, onChangeScore } = this.props;
+    let url = getApiUrl('kr/evaluate?workMileStoneId=' + this.props.mileStoneId);
+    const reg = /^(0(\.\d{1,2})?|1(\.0{1,2})?)$/;
+    if (reg.test(value) || value == '1' || value == '0') {
+      if (this.state.scoreInfoText.length > 1000) {
+        this.setState({
+          showScoreInfoError: true
+        });
+        return;
+      }
+      let data = {
+        evaluateValue: parseFloat(value),
+        toUserId: this.state.atUsers.map(u => u.Id).join(','),
+        /**
+         * 新增评分说明字段
+         */
+        remark: htmlEncodeByRegExp(htmlDecodeByRegExp(this.state.scoreInfoText))
+      };
+      taker(url, 'POST', data).then(() => {
+        onChangeScore(data.evaluateValue);
+        changeProp && changeProp('remark', htmlEncodeByRegExp(htmlDecodeByRegExp(this.state.scoreInfoText)), mileStoneId)
+      });
+      return;
+    }
+    return '请输入0-1之间的数字，支持小数点后两位';
+  }
+
+
+  /**
+   * 新增评分说明 change事件回调 --start
+   */
+  handleScoreInfoTextChange = (e: any) => {
+    this.setState({
+      scoreInfoText: e.target.value,
+      areaLength: e.target.value.length
+    }, () => {
+      if (this.state.areaLength > 1000) {
+        this.setState({
+          showScoreInfoError: true
+        })
+      } else {
+        this.state.showScoreInfoError && this.setState({
+          showScoreInfoError: false
+        })
+      }
+    });
+
+  };
+
+  /**
+   * 新增评分说明 change事件回调 --end
+   */
+  getScoreEditPopOption = () => {
+    const { atUsers, showScoreInfoError } = this.state;
+    return {
+      title: '@ta查看，ta可以通过系统通知修改kr分数',
+      inputName: '评分',
+      onConfirm: this.handleUpdateScore,
+      value: this.props.value,
+      placeHolder: '请输入0-1间的数字，支持小数点后两位',
+      align: 'left',
+
+      type: 'line',
+      disable: true,
+      container: this.props.container,
+      scoreInfoText: this.state.scoreInfoText,
+      isValueValid: !showScoreInfoError,
+      onShow: () => {
+        this.setState({ atUsers: [], showUserSelector: false });
+      },
+      /**
+       * 新增评分弹层 --start
+       */
+      information: (this.state.showScoreInfoError ?
+
+        <ScoreInfoWrapperError data-length={`已输入 ${this.state.areaLength} 个字，最多可输入 1000 个字`}>
+          <ScoreInfoSpanText>说明</ScoreInfoSpanText>
+          <ScoreInfoSpanTextareaError
+            ref={this.state.scoreInfoErrorRef}
+            placeholder={'请输入评分说明'}
+            onChange={this.handleScoreInfoTextChange}
+            value={htmlDecodeByRegExp(this.state.scoreInfoText)} />
+        </ScoreInfoWrapperError> :
+        <ScoreInfoWrapper>
+          <ScoreInfoSpanText>说明</ScoreInfoSpanText>
+          <ScoreInfoSpanTextarea
+            ref={this.state.scoreInfoRef}
+            placeholder={'请输入评分说明'}
+            onChange={this.handleScoreInfoTextChange}
+            value={htmlDecodeByRegExp(this.state.scoreInfoText)} />
+        </ScoreInfoWrapper>
+      ),
+      /**
+       * 新增评分弹层 --end
+       */
+      extra: (
+        <ExtraWrapper>
+          <CallSomeoneSpan>@ta查看</CallSomeoneSpan>
+          {
+            atUsers.map((item: User, index) => {
+              return (
+                <AvatarWrapper key={index}>
+                  <Avatar size={Avatar.size(7)}
+                    name={item.Name}
+                    src={item.UserAvatar.Medium}
+                    color={item.UserAvatar.Color}
+                    userId={item.Id} />
+                  <span className='tu-icon-cross' onClick={() => this.deleteUser(index)}></span>
+                </AvatarWrapper>
+              )
+            })
+          }
+          <UserSelectorPop className="icon-add-wrapper" align="bottom left" multi={false} onSubmit={(users: any, depts: any) => {
+            this.handleAddAtUser(users[0]);
+          }}>
+            <Add className='tu-icon-add' />
+          </UserSelectorPop>
+
+        </ExtraWrapper>
+      )
+    }
+  }
+
+  getDefaultEvaluate = () => {
+    const { isEvaluate, value, hasText } = this.props;
+    return isEvaluate ?
+      <span><span style={{
+        'color': '#0CC991',
+        'fontSize': '12px',
+        'cursor': 'pointer'
+      }}>{value}</span>{hasText ? '分' : ''}</span> :
+      <p style={{ 'color': '#BFC3C7', 'fontSize': '12px' }}>--</p>
+  }
+
+  getCanEditableEvaluate = () => {
+    const { isEvaluate, value, hasText, renderTag } = this.props;
+    if (renderTag) return renderTag();
+    return isEvaluate ?
+      <span>
+        <span style={{ 'color': '#0CC991', 'cursor': 'pointer', 'fontSize': '12px' }}>
+          {value}
+        </span>
+        {hasText ? '分' : ''}
+      </span> :
+      <span style={{ 'color': '#106ECC', 'fontSize': '12px', 'cursor': 'pointer' }}>评分</span>
+  }
+
+  render() {
+    //@ts-ignore
+    const { value, editable, hasText, isEvaluate, align, evaluateEditable, createTask, noIconEdit } = this.props;
+    return (
+      <React.Fragment>
+        {
+          evaluateEditable ?
+            <React.Fragment>
+              <EditPop {...this.getScoreEditPopOption()}
+                //@ts-ignore
+                ref={(r: HTMLDivElement) => this.score = r}
+                align={align}
+                popClassName='krPush-score'
+              >
+                {this.getCanEditableEvaluate()}
+              </EditPop>
+              {!noIconEdit ?
+                <IconEdit
+                  className="tu-icon-edit"
+                  data-for="krPush"
+                  data-tip="编辑"
+                  onClick={(e: any) => {
+                    // @ts-ignore
+                    this.score.handleClick(e)
+                  }}
+                /> : null}
+            </React.Fragment> : this.getDefaultEvaluate()
+        }
+      </React.Fragment>
+    )
+  }
+}

package/src/components/okr-detail/components/okr-tree/tree-node/kr-node/kr-score-editor/style.js

@@ -0,0 +1,134 @@
+
+import styled from 'styled-components'
+
+export const ExtraWrapper = styled.div`
+  min-height: 34px;
+  line-height: 34px;
+  background: #FFF;
+  color: #BFC3C7;
+  font-size: 12px;
+  background:#FAFBFC;
+  box-shadow:12px 0 #FAFBFC, -18px 0px #fafbfc;
+  margin-bottom:12px;
+  display: flex;
+  align-items: center;
+`
+/*
+新增评分弹层的div --start
+*/
+export const ScoreInfoWrapper = styled.div`
+  width: 312px;
+  height: 75px;
+  display: flex;
+  margin-bottom: 20px;
+`;
+
+export const ScoreInfoWrapperError = styled.div`
+  width: 312px;
+  height: 75px;
+  display: flex;
+  margin-bottom: 20px;
+  position: relative;
+  &:after{
+    content: attr(data-length);
+    height: 20px;
+    color: rgb(208,2,27);
+    position: absolute;
+    bottom: -18px;
+    left: 31px;
+    font-size: 12px;
+  }
+`;
+
+export const ScoreInfoSpanText = styled.span`
+  width: 30px;
+  height: 20px;
+  font-family: PingFangSC-Regular;
+  font-size: 14px;
+  color: #83898F;
+  margin-right: 4px;
+`;
+
+export const ScoreInfoSpanTextarea = styled.textarea`
+  width: 297px;
+  box-sizing: border-box;
+  padding: 1px 7px;
+  border: 1px solid #F0F2F5;
+  border-radius: 2px;
+  resize: none;
+  position: relative;
+`;
+
+export const ScoreInfoSpanTextareaError = styled.textarea`
+  width: 297px;
+  box-sizing: border-box;
+  padding: 1px 7px;
+  border: 1px solid #F0F2F5;
+  border-radius: 2px;
+  resize: none;
+  position: relative;
+  border: 1px rgb(208, 2, 27) solid;
+`;
+
+/*
+新增评分弹层的div --end
+*/
+export const CallSomeoneSpan = styled.span`
+  font-family: PingFangSC-Regular;
+  font-size: 14px;
+  color: #83898F;
+  padding-right: 15px;
+`;
+
+export const Add = styled.span`
+  display: inline-block;
+  width: 24px;
+  height: 24px;
+  line-height: 24px;
+  background: #0CC991;
+  text-align: center;
+  border-radius: 24px;
+  color: #fff;
+  cursor: pointer;
+  &:hover {
+    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2), 0 3px 6px rgba(0, 0, 0, 0.26);
+    transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+`
+
+export const AvatarWrapper = styled.div`
+  position:relative;
+  display: inline-block;
+  display: flex;
+  align-items: center;
+  margin-right: 10px;
+
+  .tu-icon-cross {
+    color: #a9b8bf;
+    position: absolute;
+    top: -2px;
+    right: -5px;
+    display: none;
+    cursor: pointer;
+    :hover{
+      color: #CC2929;
+    }
+  }
+  &:hover .tu-icon-cross{
+    display: block;
+  }
+`
+
+export const IconEdit = styled.i`
+  padding: 4px;
+  opacity: 0;
+  margin-left: 5px;
+  cursor: pointer;
+  font-size: 12px;
+  color: #106ECC;
+  &:hover{
+      background: #FAFBFC;
+      box-shadow: 0 0 2px 0 rgba(0,0,0,0.17);
+      border-radius: 1px;
+  }
+`

package/src/components/okr-detail/components/okr-tree/tree-node/kr-node/range-picker-pop.js

@@ -0,0 +1,52 @@
+import React, { useState, useRef, useEffect } from 'react';
+import IconText from '../../../icon-text';
+import { updateKrDate } from '../../../../request-apis';
+import RangePickerPop from '../../../../../range-picker-pop'
+
+import './index.scss';
+
+export default props => {
+  const {  editable, data } = props;
+  const rangePicker = useRef();
+  const [startDate, setStartDate] = useState(data.startDate);
+  const [endDate, setEndDate] = useState(data.endDate);
+
+  useEffect(() => {
+    rangePicker.current && rangePicker.current.setRange({
+      startDate:data.startDate,
+      endDate: data.endDate
+    })
+    setStartDate(data.startDate);
+    setEndDate(data.endDate);
+  }, [data.startDate, data.endDate])
+
+  const updateDateHandler = ({ startDate, endDate }) => {
+    setStartDate(startDate);
+    setEndDate(endDate);
+    updateKrDate({ 'kr': data, startDate, endDate });
+    rangePicker.current.setRange({ startDate, endDate });
+  }
+
+  const icontext = <IconText
+    width={190}
+    editable={editable}
+    content={`${startDate} ~ ${endDate}`}
+    icon="tu-icon-deferred"
+  />;
+
+  return <React.Fragment>
+    {editable ?
+      <RangePickerPop
+        ref={rangePicker}
+        align={'bottom'}
+        controlled
+        format='YYYY/MM/DD'
+        triggerMethod='onMouseDown'
+        container={window.document.body}
+        onConfirm={updateDateHandler}
+      >
+        {icontext}
+      </RangePickerPop> : icontext
+    }
+  </React.Fragment>
+}

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

@@ -0,0 +1,176 @@
+import React, { useState, useEffect, useContext } from 'react';
+import classNames from 'classnames';
+import { getBSGlobal } from '../../../../../../utils/bs-global';
+import Avatar from '../../../../../avatar';
+import IconText from '../../../icon-text';
+import { OAuth } from '../../../../../../utils/auth';
+import Toast from '../../../../../toast';
+import EditableInput from '../../../../components/editable-input';
+import { updateKrName } from "../../../../request-apis";
+import RangePickerPop from '../kr-node/range-picker-pop';
+import drawerManager from '../../../../../drawer-manager';
+import DropSelector, { IconItem } from '../../../../../drop-selector';
+import Progress from '../../../../../progress';
+import { getProcessColor } from '../../../../../progress/utils';
+import { CommonContext, OkrListContext } from '../../../../context';
+import { cancelParentOkr } from '../../../../request-apis';
+import preCls from '../../precls';
+
+import './index.scss';
+
+const OkrRowColumn = ({ children, width }) => {
+  return <span style={{
+    'display': 'inline-block',
+    'width': width,
+    'textAlign': 'left'
+  }}>
+    {children}
+  </span>
+}
+
+export default props => {
+  const { data, index, title } = props;
+
+  const {
+    okrInfo,
+  } = useContext(CommonContext);
+  const { modifyOParent, removeParent } = useContext(OkrListContext);
+
+  const [user] = useState(data.user || {});
+  const [krName, setKrName] = useState(title);
+  const [showKrWeight] = useState(getBSGlobal('OkrAdvancedSetting').KRSetting.KrWeight); // 高级功能： 关见成果权重
+
+  const [canEditOkr] = useState(() => {
+    const { principalUser, createUserId } = okrInfo;
+    const hasAuth = new OAuth({ principalUser, createUserId }).hasAuth();
+    const livetime = okrInfo.status != 2;
+    return (livetime && hasAuth);
+  });
+
+  useEffect(() => {
+    setKrName(title);
+  }, [title]);
+
+  const onKrNameChangeHandler = val => {
+    updateKrName({
+      'mileStoneName': val,
+      'workId': data.workId,
+      'workMileStoneId': data.mileStoneId,
+    }).then(() => {
+      Toast.Success("修改成功");
+    })
+  }
+
+  const onSelectorChangeHandler = async name => {
+    if (name == 'modifyParent') {
+      modifyOParent && modifyOParent();
+    } else if (name == 'cancelParent') {
+      await cancelParentOkr(okrInfo.workId);
+      Toast.Success('操作成功');
+      removeParent();
+    }
+  }
+
+  const gotokKrPage = mileStoneId => {
+    drawerManager.open('krDetail', { 'krId': mileStoneId });
+  }
+
+  const gotoOkrPage = workId => {
+    drawerManager.open("okrDetail", { 'okrId': workId });
+  }
+
+  return <div className={classNames(`${preCls}__kr-parent-node`)}>
+
+    <div className={classNames(`${preCls}__kr-parent-node-target`)} onClick={() => gotoOkrPage(data.parentOkr.workId)}>
+      <span className={classNames(`${preCls}__kr-parent-node-target-arrow`)} />
+      <span className={classNames(`${preCls}__kr-parent-node-target-icon`)}>
+        <span className="tu-icon-okr" />
+      </span>
+      <span className={classNames(`${preCls}__kr-parent-node-target-title`)}>
+        {data.parentOkr.workName}
+      </span>
+    </div>
+    
+    <div>
+      <div className={classNames(`${preCls}__kr-parent-node-h1`)}>
+        <span className={classNames(`${preCls}__kr-parent-node-prefix`)}>KR</span>
+        <span className={classNames(`${preCls}__kr-parent-node-title`)} onClick={() => gotokKrPage(data.mileStoneId)}>
+          <EditableInput
+            editable={false}
+            defaultValue={krName}
+            emptyMessage={'KR名称不能为空'}
+            onKeyDown={onKrNameChangeHandler}
+            onBlur={onKrNameChangeHandler}
+          />
+        </span>
+      </div>
+
+      <div className={classNames(`${preCls}__kr-parent-node-h2`)}>
+        <OkrRowColumn width={80}>
+          <Avatar.Text
+            name={user.name}
+            id={user.userId}
+            width={76}
+            editable={false}
+            nameTips={(name) => <span>负责人：{name}</span>}
+          />
+        </OkrRowColumn>
+
+        {showKrWeight && <OkrRowColumn width={80}>
+          <IconText
+            width={55}
+            style={
+              {marginLeft:'5px'}
+            }
+            editable={false}
+            content={`${data.krWeight}%`}
+            icon="tu-icon-app-quanzhong"
+          />
+        </OkrRowColumn>}
+
+        <OkrRowColumn width={190}>
+          <RangePickerPop data={data} hasKrAuth={false} />
+        </OkrRowColumn>
+
+        <div className={classNames(`${preCls}__kr-parent-node-right`)}>
+          <div className={classNames(`${preCls}__kr-parent-node-progress`)}>
+            <Progress 
+              percent={data.progress}
+              width={40}
+              backgroundColor={getProcessColor(data.riskLevel, 'backgroundColor', okrInfo.status)}
+              textColor={
+                okrInfo.status === 2
+                  ? "#89919f"
+                  : getProcessColor(data.riskLevel, 'linearEndColor', okrInfo.status)
+              }
+              color={
+                okrInfo.status === 2
+                  ? "linear-gradient(270deg, #BFC7D5, #E1E5EC)"
+                  // : OkrRiskMapping[okrInfo.manualRiskLevel].line
+                  : `linear-gradient(270deg, ${getProcessColor(data.riskLevel, 'linearStartColor', okrInfo.status)}, ${getProcessColor(data.riskLevel, 'linearEndColor', okrInfo.status)})`
+
+              }/>
+                        {/* linearStartColor={getProcessColor(data.riskLevel, 'linearStartColor', okrInfo.status)}
+            linearEndColor={getProcessColor(data.riskLevel, 'linearEndColor', okrInfo.status)}
+            backgroundColor={getProcessColor(data.riskLevel, 'backgroundColor', okrInfo.status)} /> */}
+          </div>
+          {canEditOkr &&
+            <div className={classNames(`${preCls}__kr-parent-node-actions`)}>
+              <DropSelector
+                popupPlacement={'bottomLeft'}
+                onChange={onSelectorChangeHandler}
+                trigger={<span className="tu-icon-diot" />}
+              >
+                <IconItem icon="tu-icon-bianji3" name='modifyParent'>
+                  <span>修改对齐</span>
+                </IconItem>
+                <IconItem icon="tu-icon-liebiao-duiqinubiao" name='cancelParent'>
+                  <span>取消对齐</span>
+                </IconItem>
+              </DropSelector>
+            </div>}
+        </div>
+      </div>
+    </div>
+  </div>
+}