@titaui/pc 1.7.13 → 1.7.17

package/src/components/create-okr-modal/utils/getCreateOkrSurpassPercent.js

@@ -0,0 +1,107 @@
+const getRandomNum = (baseNum) => {
+  return Math.floor(Math.random() * baseNum);
+};
+
+const getKrNumberAndMeasurableScore = (krNum, krMeasurableNums) => {
+  if (krNum === 0) {
+    return 0;
+  }
+  if (krNum === 1) {
+    if (krMeasurableNums === 1) {
+      return 25;
+    }
+    return 20;
+  }
+  if (krNum === 2) {
+    if (krMeasurableNums === 1) {
+      return 40;
+    } else if (krMeasurableNums === 2) {
+      return 50;
+    }
+    return 35;
+  }
+  if (krNum === 3) {
+    if (krMeasurableNums === 1) {
+      return 50;
+    } else if (krMeasurableNums === 2) {
+      return 60;
+    } else if (krMeasurableNums === 3) {
+      return 60;
+    }
+    return 45;
+  }
+  if (krNum === 4) {
+    if (krMeasurableNums === 1) {
+      return 50;
+    } else if (krMeasurableNums === 2) {
+      return 55;
+    } else if (krMeasurableNums === 3) {
+      return 60;
+    } else if (krMeasurableNums === 4) {
+      return 70;
+    }
+    return 45;
+  }
+  if (krNum === 5) {
+    if (krMeasurableNums === 1) {
+      return 50;
+    } else if (krMeasurableNums === 2) {
+      return 55;
+    } else if (krMeasurableNums === 3) {
+      return 60;
+    } else if (krMeasurableNums === 4) {
+      return 65;
+    } else if (krMeasurableNums === 5) {
+      return 70;
+    }
+    return 45;
+  }
+  if (krNum > 5) {
+    if (krMeasurableNums === 0) {
+      return 40;
+    } else if (krMeasurableNums === 1) {
+      return 45;
+    } else if (krMeasurableNums === 2) {
+      return 50;
+    } else if (krMeasurableNums === 3) {
+      return 55;
+    }
+    return 60;
+  }
+};
+
+// 参考 https://doc.weixin.qq.com/txdoc/excel?scode=AOEAFQeYAA0Nbxe0lHABkAGgaGACY&docid=e2_AJcATAaKACYmPDc9BjaSnWjBmFCGo&type=1&tab=BB08J2
+export default (
+  oNameLength,
+  okrHasWtWords,
+  krNum,
+  krMeasurableNums,
+  krAvarageLength
+) => {
+  let totalScore = 0;
+  if (okrHasWtWords) {
+    totalScore += 5;
+  }
+  // 计算目标名称长度
+  if (oNameLength < 5) {
+    totalScore += 2;
+  } else if (oNameLength < 9) {
+    totalScore += 15;
+  } else if (oNameLength < 31) {
+    totalScore += 20;
+  } else {
+    totalScore += 15;
+  }
+
+  totalScore += getKrNumberAndMeasurableScore(krNum, krMeasurableNums);
+
+  if (krAvarageLength < 5) {
+    return Number(((totalScore * (getRandomNum(5) + 3)) / 100).toFixed(1));
+  } else if (krAvarageLength < 9) {
+    return Number(((totalScore * (getRandomNum(15) + 70)) / 100).toFixed(1));
+  } else if (krAvarageLength < 31) {
+    return Number(((totalScore * (getRandomNum(15) + 90)) / 100).toFixed(1));
+  } else {
+    return Number(((totalScore * (getRandomNum(10) + 80)) / 100).toFixed(1));
+  }
+};

package/src/components/create-okr-modal/utils/helper.ts

@@ -0,0 +1,47 @@
+import {
+  getBSGlobal,
+  getTenantInfo,
+  getUserInfo,
+} from "../../../utils/bs-global";
+
+export async function taker(url, method, body, header = {}) {
+  const settings: any = {};
+  if (method) {
+    settings.headers = {
+      ...{
+        Accept: "application/json, application/xml, text/play, text/html, *.*",
+        "Content-Type": "application/json; charset=utf-8",
+      },
+      ...header,
+    };
+    settings.method = method;
+  }
+  if (body) settings.body = JSON.stringify(body);
+  if (settings.headers) {
+    if (
+      settings.headers["Content-Type"] == "application/x-www-form-urlencoded"
+    ) {
+      let bodyStr = "";
+      for (let key in body) {
+        bodyStr += `${key}=${body[key]}&`;
+      }
+      bodyStr.substring(0, bodyStr.length - 1);
+      settings.body = bodyStr;
+    }
+  }
+  settings.credentials = "same-origin";
+  try {
+    let response = await fetch(url, settings);
+    const data = await response.json();
+    return data;
+  } catch (e) {
+    await Promise.reject(e);
+  }
+}
+
+export function getApiUrl(url) {
+  const uid = getUserInfo().Id;
+  const tid = getTenantInfo().Id;
+  const apiServer = getBSGlobal("apiPath");
+  return apiServer + "/api/v1/" + tid + "/" + uid + "/" + url;
+}

package/src/components/create-okr-modal/utils/index.tsx

@@ -0,0 +1,11 @@
+export function KrWeightValidator(value: string): boolean {
+  // 首先得是数字
+  let _value = Number(value); //
+  if (`${value}`.trim() == "") return false; // required
+  if (isNaN(_value)) return false; // 不是数字
+  if (!Number.isInteger(_value) && `${_value}`.split(".")[1].length > 1)
+    return false; // 小数点超出一位
+  if (_value > 100) return false; // 允许输入超过 100 的数字
+  if (_value < 0) return false;
+  return true;
+}

package/src/components/date-picker/BodyItem.js

@@ -0,0 +1,52 @@
+/*
+ * @Author: lianghaosen 
+ * @Date: 2018-12-05 15:29:35 
+ * @Last Modified by: lianghaosen
+ * @Last Modified time: 2021-02-03 23:20:26
+ */
+import React, { Component } from 'react'
+import moment from 'moment'
+
+export default class BodyItem extends Component {
+  //为了适应推屏中的MouseDown事件
+  static defaultProps = {
+    triggerMethod: 'onClick'
+  }
+  getClass = () => {
+    const {isAllowSelect,date,selected,highlight} = this.props;
+    if(isAllowSelect && !isAllowSelect(date)){
+      this.disabled = true;
+      return {
+        outer: 'tita-calendar-item-disabled',
+        inner: ''
+      }
+    }
+    let className = {
+      outer:'tita-calendar-item-outter'
+    };
+    className.inner = this.isInCurrentMonth() ?'tita-calendar-item-current' : 'tita-calendar-item-other';
+    moment().isSame(date,'day') && (className.inner += ' tita-calendar-item-today')
+    selected && (className.inner += ' tita-calendar-item-selected');
+    highlight && (className.outer += ' tita-calendar-item-hightlight')
+    return  className
+  }
+  isInCurrentMonth = () => {
+    const month = this.props.date.format('YYYYM');
+    return month === this.props.currentMonth;
+  }
+  handleClick = (date) => {
+    if(this.disabled) return;
+    this.props.onSelectDate(moment(date.format('YYYY/MM/DD')))
+  }
+  render() {
+    const {date} = this.props;
+    const className = this.getClass();
+    const {triggerMethod} = this.props;
+    const obj = {[triggerMethod]:() => this.handleClick(date)}
+    return (
+      <td className={className.outer}>
+        <div title={date.format('YYYY-M-D')} {...obj} className={`tita-calendar-item-inner ${className.inner}`}>{date.date()}</div>
+      </td>
+    )
+  }
+}

package/src/components/date-picker/CalendarBody.js

@@ -0,0 +1,95 @@
+/*
+ * @Author: lianghaosen 
+ * @Date: 2018-12-04 21:38:21 
+ * @Last Modified by: lianghaosen
+ * @Last Modified time: 2021-02-03 23:20:34
+ */
+import React, { Component } from 'react'
+import BodyItem from './BodyItem'
+import moment from 'moment'
+
+export default class CalendarBody extends Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      selected: props.selectedDate
+    }
+  }
+  // componentDidMount() {
+  //   this.setState({
+  //     selected: this.props.selectedDate
+  //   })
+  // }
+  componentWillReceiveProps(nextProps) {
+    if (nextProps.selectedDate != this.props.selectedDate) {
+      this.setState({
+        selected: nextProps.selectedDate
+      })
+    }
+  }
+  getTableBody = () => {
+    let firstDay = moment(this.props.date).date(1);
+    const currentMonth = firstDay.format('YYYYM');
+    let currentSunday = firstDay.subtract(firstDay.day(), 'days');
+    let body = [];
+    for(let row = 0; row < 6; row ++){
+      body.push(this.getRow(currentSunday,row,currentMonth))
+      currentSunday = currentSunday.add(1,'w')
+    }
+    return body;
+  }
+  getRow = (sunday,rowIndex,currentMonth) => {
+    const {isAllowSelect,selectedDate,highlightRange} = this.props;
+    let row = [];
+    for(let day = 0; day < 7; day++){
+      let date = moment(sunday).clone().add(day,'d');
+      let props = {
+        currentMonth,
+        date,
+        onSelectDate: this.handleSelectDate,
+        key: date.format('YYYYMD'),
+        isAllowSelect
+      }
+      
+      if(date.isSame(this.state.selected,'day')) {
+        props.selected = true;
+      }
+      if(highlightRange && !date.isBefore(highlightRange[0],'day') && !date.isAfter(highlightRange[1],'day')){
+        props.highlight = true;
+      }
+      row.push(
+        <BodyItem {...props} triggerMethod={this.props.triggerMethod}/>
+      )
+    }
+    return <tr key={rowIndex}>{row}</tr>
+  }
+  handleSelectDate = (value) => {
+    const {onSelect} = this.props;
+    this.setState({
+      selected: value
+    })
+    onSelect(value)
+  }
+  render() {
+    return (
+      <div className="tita-common-calendar-body">
+        <table className="calendar-body-table">
+          <thead>
+            <tr>
+              <th>日</th>
+              <th>一</th>
+              <th>二</th>
+              <th>三</th>
+              <th>四</th>
+              <th>五</th>
+              <th>六</th>
+            </tr>
+          </thead>
+          <tbody>
+            {this.getTableBody()}
+          </tbody>
+        </table>
+      </div>
+    )
+  }
+}

package/src/components/date-picker/CalendarHeader.js

@@ -0,0 +1,59 @@
+/*
+ * @Author: lianghaosen 
+ * @Date: 2018-12-04 21:39:33 
+ * @Last Modified by: mikey.zhaopeng
+ * @Last Modified time: 2021-01-07 19:42:38
+ */
+import React, { Component } from 'react'
+import moment from 'moment';
+import Select from '../select'
+const months = [
+  { text: 1, value: 0 },
+  { text: 2, value: 1 },
+  { text: 3, value: 2 },
+  { text: 4, value: 3 },
+  { text: 5, value: 4 },
+  { text: 6, value: 5 },
+  { text: 7, value: 6 },
+  { text: 8, value: 7 },
+  { text: 9, value: 8 },
+  { text: 10, value: 9 },
+  { text: 11, value: 10 },
+  { text: 12, value: 11 }
+]
+export default class CalendarHeader extends Component {
+  setDate = (func, ...rest) => {
+    let date = moment(this.props.date);
+    date[func].apply(date, rest);
+    this.props.onChangeDate(date)
+  }
+  //为了适应推屏中的MouseDown事件
+  static defaultProps = {
+    triggerMethod: 'onClick'
+  }
+  getYears = () => {
+    let years = [];
+    for (let i = 0; i < 11; i++) {
+      years.push(this.props.date.year() - 5 + i);
+    }
+    return years;
+  }
+  render() {
+    const { triggerMethod, container } = this.props;
+    const subtracty = { [triggerMethod]: this.setDate.bind(this, 'subtract', 1, 'y') },
+      subtractm = { [triggerMethod]: this.setDate.bind(this, 'subtract', 1, 'M') },
+      addy = { [triggerMethod]: this.setDate.bind(this, 'add', 1, 'y') },
+      addm = { [triggerMethod]: this.setDate.bind(this, 'add', 1, 'M') };
+    const trigger = { 'onClick': 'click', 'onMouseDown': 'mousedonwn', 'onMouseUp': 'mouseup' }
+    return (
+      <div className="tita-common-calendar-header">
+        <a className="header-prev-year tu-icon-angles-left" {...subtracty}></a>
+        <a className="header-prev-month tu-icon-angle-left"{...subtractm}></a>
+        <Select className="tita-common-calendar-header-select-wrapper" wrapperHeight={160} adjustHeight={84} style={{ width: '70px', height: '20px' }} data={this.getYears()} value={this.props.date.year()} onSelect={this.setDate.bind(this, 'year')} toggle={trigger[triggerMethod]} container={container} />
+        <Select className="tita-common-calendar-header-select-wrapper" wrapperHeight={160} adjustHeight={84} style={{ width: '50px', height: '20px' }} textField="text" valueField="value" data={months} value={this.props.date.month()} onSelect={this.setDate.bind(this, 'month')} toggle={trigger[triggerMethod]} container={container} />
+        <a className="header-next-year tu-icon-angles-right" {...addy}></a>
+        <a className="header-next-month tu-icon-angle-right" {...addm}></a>
+      </div>
+    )
+  }
+}

package/src/components/date-picker/index.js

@@ -0,0 +1,86 @@
+/*
+ * @Author: lianghaosen 
+ * @Date: 2018-12-04 20:59:20 
+ * @Last Modified by: lianghaosen
+ * @Last Modified time: 2019-11-20 16:54:16
+ */
+import React, { Component } from 'react'
+import CalendarHeader from './CalendarHeader'
+import CalendarBody from './CalendarBody'
+import moment from 'moment'
+import './index.scss'
+
+export default class DatePicker extends Component {
+
+  constructor(p) {
+    super(p)
+    if (p.selected) {
+      this.controlled = true;
+    }
+    this.state = {
+      date: p.selected || p.defaultSelected || moment(),
+      selected: p.isAllowSelect ? null : p.selected || p.defaultSelected || moment()
+    }
+
+  }
+  handleChangeDate = (date) => {
+    this.setState({
+      date
+    });
+  }
+  handleSelect = (date) => {
+    const { onSelect } = this.props;
+    if (!this.controlled) {
+      this.setState({
+        date
+      })
+    } else {
+      this.setState({
+        date,
+        selected: moment(date)
+      })
+    }
+    onSelect && onSelect(date)
+  }
+  getSelectDate = () => {
+    return this.controlled ? moment(this.props.selected) : moment(this.state.selected).format(this.props.format)
+  }
+  goTo = (date) => {
+    this.state({
+      date: moment(date)
+    })
+  }
+  componentWillReceiveProps = (nextProps) => {
+    // if(this.controlled) {
+    //   if(!nextProps.selected.isSame(this.state.date,'month')){
+    //     this.setState({
+    //       date: moment(nextProps.selected)
+    //     })
+    //   }
+    // }
+  }
+  setSelectDate = (date) => {
+    if (this.controlled) return;
+    const { isAllowSelect } = this.props;
+    let selected = moment(date);
+    if (isAllowSelect && !isAllowSelect(selected)) {
+      this.setState({
+        date: moment(date)
+      })
+      return;
+    }
+    this.setState({
+      date: moment(date),
+      selected
+    })
+  }
+  render() {
+    const { container } = this.props;
+    return (
+      <div ref="datePopRef" className={`tita-common-calendar ${this.props.className}`}>
+        <CalendarHeader date={this.state.date} onChangeDate={this.handleChangeDate} triggerMethod={this.props.triggerMethod} container={document.body}></CalendarHeader>
+        <CalendarBody date={this.state.date} highlightRange={this.props.highlightRange} selectedDate={this.getSelectDate()} onSelect={this.handleSelect} isAllowSelect={this.props.isAllowSelect} triggerMethod={this.props.triggerMethod}></CalendarBody>
+      </div>
+    )
+  }
+}

package/src/components/date-picker/index.scss

@@ -0,0 +1,96 @@
+.tita-common-calendar {
+  width: 220px;
+  background-color: #fff;
+  user-select: none;
+  &-header {
+    height: 30px;
+    line-height: 30px;
+    border-top: 1px solid #e8e8e8;
+    font-size: 14px;
+    text-align: center;
+    .calendar-header-year,
+    .calendar-header-month {
+      font-weight: 600;
+      padding: 0 2px;
+      color: rgba(0, 0, 0, 0.85);
+    }
+    .header-next-month,
+    .header-next-year,
+    .header-prev-year,
+    .header-prev-month {
+      height: 30px;
+      line-height: 30px;
+      font-size: 20px;
+      color: #2879ff;
+    }
+    .header-prev-year,
+    .header-prev-month {
+      float: left;
+    }
+    .header-next-month,
+    .header-next-year {
+      float: right;
+    }
+
+    &-select-wrapper {
+      max-height: 160px;
+      overflow-y: auto;
+    }
+  }
+  &-body {
+    border-top: 1px solid #e8e8e8;
+    font-size: 14px;
+    padding: 0 5px;
+    .calendar-body-table {
+      border-collapse: separate;
+      border-spacing: 0 10px;
+      th,
+      td {
+        width: 30px;
+        height: 20px;
+        text-align: center;
+      }
+      .tita-calendar-item-inner {
+        width: 20px;
+        height: 20px;
+        line-height: 20px;
+        margin: 0 auto;
+        border-radius: 3px;
+        text-align: center;
+      }
+      .tita-calendar-item-outter {
+        .tita-calendar-item-inner {
+          transition: background-color 0.3s ease;
+          cursor: pointer;
+          &:hover {
+            background-color: #ecf6fd;
+          }
+        }
+      }
+      .tita-calendar-item-current {
+        color: rgba(0, 0, 0, 0.65);
+      }
+      .tita-calendar-item-today {
+        border: 1px solid #2879ff;
+        font-weight: 700;
+        color: #2879ff;
+      }
+      .tita-calendar-item-disabled {
+        cursor: not-allowed;
+        color: #bcbcbc;
+        background: #f3f3f3;
+      }
+
+      .tita-calendar-item-other {
+        color: rgba(0, 0, 0, 0.25);
+      }
+      .tita-calendar-item-selected {
+        background: #2879ff !important;
+        color: #fff;
+      }
+      .tita-calendar-item-hightlight {
+        background-color: #ecf6fd;
+      }
+    }
+  }
+}

package/src/components/date-range-picker/index.js

@@ -0,0 +1,106 @@
+/*
+ * @Author: lianghaosen 
+ * @Date: 2018-12-05 17:45:03 
+ * @Last Modified by: lianghaosen
+ * @Last Modified time: 2021-02-03 23:23:48
+ */
+import React, { Component } from 'react'
+import DatePicker from '../date-picker'
+import moment from 'moment';
+import './index.scss'
+
+export default class DateRangePicker extends Component {
+  constructor(p){
+    super(p)
+    let[defaultStartDate,defaultEndDate] = this.props.defaultRange;
+    defaultStartDate = defaultStartDate != null ? defaultStartDate || moment() : null;
+    defaultEndDate = defaultEndDate != null ? defaultEndDate || moment() : null;
+    if(defaultStartDate && defaultEndDate && defaultStartDate.isAfter(defaultEndDate)) {
+      [defaultStartDate,defaultEndDate] = [defaultEndDate,defaultStartDate]
+    }
+    
+    this.state = {
+      startDate: defaultStartDate != null ? moment(defaultStartDate) : null,
+      endDate: defaultEndDate != null ? moment(defaultEndDate) : null
+    }
+  }
+  static defaultProps = {
+    format: 'YYYY-MM-DD',
+    defaultRange: [],
+    requireRangeCorrect: true
+  }
+  getHighLightRange = (start,end) =>{
+    if(start && end && !start.isSame(end,'day')) {
+      this.startHighlightRange = [moment(start).add(1,'d'),end]
+      this.endHighlightRange = [start,moment(end).subtract(1,'d')]
+    }else {
+      this.startHighlightRange = null;
+    this.endHighlightRange = null;
+    }
+  }
+  clearRange = () => {
+    this.startHighlightRange = null;
+    this.endHighlightRange = null;
+  }
+  handleSelectStart = (date) => {
+    const {onSelect, requireRangeCorrect} = this.props;
+    this.getHighLightRange(date,this.state.endDate)
+    let state;
+    if(!date.isAfter(this.state.endDate)) {
+      state = {startDate: date}
+    }else {
+      if (requireRangeCorrect) {
+        state = {
+          startDate: moment(date),
+          endDate: date
+        }
+      } else {
+        state = {startDate: moment(date)}
+      }
+    }
+    this.setState(state,() =>{
+      onSelect && onSelect({
+        startDate:moment(this.state.startDate),
+        endDate:moment(this.state.endDate)
+      })
+    })
+    
+  }
+  handleSelectEnd = (date) => {
+    const {onSelect, requireRangeCorrect} = this.props;
+    this.getHighLightRange(this.state.startDate,date)
+    let state;
+    if(!date.isBefore(this.state.startDate)) {
+      state = {endDate: date}
+    }else {
+      if (requireRangeCorrect) {
+        state = {
+          endDate: moment(date),
+          startDate: date
+        }
+      } else {
+        state = {endDate: moment(date)}
+      }
+    }
+    this.setState(state,() =>{
+      onSelect && onSelect({
+        startDate:moment(this.state.startDate),
+        endDate:moment(this.state.endDate)
+      })
+    })
+  }
+  render() {
+    const {triggerMethod,container, ownStyle = {}} =this.props;
+    return (
+      <div className="tita-range-picker-wrapper" style={ownStyle}>
+        <div className="range-picker-header">
+          <div className="range-display-start">{this.state.startDate ? this.state.startDate.format(this.props.format) : ''}</div>
+          <span>~</span>
+          <div className="range-display-end">{this.state.endDate ? this.state.endDate.format(this.props.format) : ''}</div>
+        </div>
+        <DatePicker onSelect={this.handleSelectStart} highlightRange={this.startHighlightRange} selected={this.state.startDate || ''} className="tita-range-picker-item" triggerMethod={triggerMethod} container={container}/>
+        <DatePicker onSelect={this.handleSelectEnd} highlightRange={this.endHighlightRange} selected={this.state.endDate || ''} className="tita-range-picker-item" triggerMethod={triggerMethod} container={container}/>
+      </div>
+    )
+  }
+}

package/src/components/date-range-picker/index.scss

@@ -0,0 +1,28 @@
+.tita-range-picker-wrapper {
+  white-space: nowrap;
+  .range-picker-header {
+    position: relative;
+    text-align: center;
+    height: 30px;
+    line-height: 30px;
+    .range-display-start,
+    .range-display-end {
+      position: absolute;
+      width: 50%;
+      height: 100%;
+      line-height: 30px;
+      top: 0;
+      text-align: center;
+      font-size: 14px;
+    }
+    .range-display-start {
+      left: 0;
+    }
+    .range-display-end {
+      right: 0;
+    }
+  }
+}
+.tita-range-picker-item {
+  display: inline-block;
+}