@titaui/pc 1.7.45 → 1.7.49

package/src/components/change-okr-modal/Filter.tsx

@@ -1,357 +0,0 @@
-import React, { PureComponent } from 'react';
-import ToolTip from '@beisen-phoenix/tooltip';
-import { Filter, FilterBottom, FilterLeftWrapper, FilterOptionsWrapper, FilterTop, OptionItem, UserSelectorWrapper } from './styledComponents';
-import { OpenUserName } from '../../utils/open-data';
-import Search from '../../components-v1/search';
-import Select from '../../components-v1/select';
-import UserSelectorPop from '../../components-v1/userSelector/UserSelectorPop';
-import ConfirmPop from '../delete-confirm-pop/ConfirmPop';
-import FilterTab from './filterTab';
-import { getBSGlobal } from '../../utils/bs-global';
-import { rget } from '../../utils/request';
-
-interface Props {
-  year?: number | null;
-  cycle: string | null;
-  status: any | null;
-  okrPopType: number;
-  type: any;
-  users: any;
-  remembered: boolean;
-  departments: any;
-  onChange: Function;
-  onUserChange: (users, depts) => void;
-}
-interface State {
-  OptionsArray: FilterTabProps[];
-  cycles: any[]
-}
-
-const years: any = [
-  {
-    title: '全部年份',
-    value: -1,
-  },
-];
-for (let i = 2013; i < 2051; i++) {
-  years.push({ title: i + '年', value: i });
-}
-
-
-
-const statusType = [
-  {
-    title: '全部状态',
-    value: 0,
-  },
-  {
-    title: '进行中',
-    value: 1,
-  },
-  {
-    title: '已结束',
-    value: 2,
-  },
-];
-const okrTypes = [
-  {
-    title: '全部类型',
-    value: -1,
-  },
-  {
-    title: '公司',
-    value: 3,
-  },
-  {
-    title: '部门',
-    value: 2,
-  },
-  {
-    /**
-      新增的团队 --- start
-    */
-    title: '团队',
-    value: 4,
-    /**
-      新增的团队 --- end
-    */
-  },
-  {
-    title: '个人',
-    value: 1,
-  },
-];
-interface FilterTabProps {
-  index: number;
-  name: string;
-  visible?: boolean;
-  valuesArray: any[];
-  value?: number | string | null;
-  title: string;
-}
-export default class FilterComp extends PureComponent<Props, State> {
-  // customizequery/condition/save
-  // 500007/500000036/customizequery/condition/get?dataKey=62_500000036&pageId=40001
-  KRSetting = getBSGlobal('OkrAdvancedSetting').KRSetting;
-  constructor(p: Props) {
-    super(p);
-    this.state = {
-      OptionsArray: [
-        { index: 0, title: '年份', name: 'year', valuesArray: years, value: p.year },
-        { index: 1, title: '周期', name: 'cycle', valuesArray: [], value: p.cycle },
-        { index: 2, title: '状态', name: 'status', valuesArray: statusType, value: p.status },
-        { index: 3, title: '类型', name: 'type', valuesArray: okrTypes, value: p.type },
-      ],
-      cycles: []
-    };
-  }
-  componentWillReceiveProps(nextProps: Props) {
-    const { year, cycle, status, type } = nextProps;
-    
-    this.setState({
-      OptionsArray: [
-        { index: 0, title: '年份', name: 'year', valuesArray: years, value: year },
-        { index: 1, title: '周期', name: 'cycle', valuesArray: this.state.OptionsArray[1].valuesArray, value: cycle },
-        { index: 2, title: '状态', name: 'status', valuesArray: statusType, value: status },
-        { index: 3, title: '类型', name: 'type', valuesArray: okrTypes, value: type },
-      ],
-    });
-  }
-  componentDidMount(){
-    this.getCycleTypes()
-  }
-  // NOTE componentWillReceiveProps 会导致筛选条件无法出现 全部周期这种默认选项
-  handleDeleteUser = (id: number) => {
-    const { onChange, users } = this.props;
-    onChange(
-      'users',
-      users.filter(u => u.Id != id),
-    );
-  };
-  getCycleTypes = () => {
-    rget('v1')("okr/cycleSetting").then(res => {
-      const data = res.Data
-      let cycles = [{
-        title: '全部周期',
-        value: '-1',
-      }]
-      if(data.isOpenYear){
-        cycles.push({
-          title: '年度',
-          value: '1'
-        })
-      }
-      if(data.isOpenHalfYear){
-        cycles.push({
-          title: '上半年',
-          value: '5,1'
-        })
-        cycles.push({
-          title: '下半年',
-          value: '5,2'
-        })
-      }
-      if(data.isOpenQuarter){
-        const num = ['一','二','三','四']
-        for(let i = 0; i < 4; i++){
-          cycles.push({
-            title: `第${num[i]}季度`,
-            value: `2,${i+1}`
-          })
-        }
-      }
-      if(data.isOpenBimonthly){
-        const start = data.yearStartMonth % 2 == 1 ? 1 : 2;
-        let month = start;
-        while(1){
-          const next = (month + 1) % 12 || 12;
-          cycles.push({
-            title: `${month}-${next}月`,
-            value: `4,${month}`
-          })
-          month = (month + 2) % 12 || 12;
-          if(month == start) break
-        }
-      }
-      if(data.isOpenMonth){
-        for(let i = 1; i <=12; i++){
-          cycles.push({
-            title: `${i}月`,
-            value: `3,${i}`
-          })
-        }
-      }
-      if(data.isOpenCustom){
-        cycles.push({
-          title: `自定义`,
-          value: `0,0`
-        })
-      }
-      const newOptions = [...this.state.OptionsArray];
-      newOptions[1] = {...newOptions[1]}
-      newOptions[1].valuesArray = cycles
-      console.log(newOptions)
-      this.setState({
-        OptionsArray: newOptions,
-        cycles
-      })
-    });
-   
-  }
-  handleDeleteDepartment = (id: number) => {
-    const { onChange, departments } = this.props;
-    onChange(
-      'departments',
-      departments.filter(d => d.Id != id),
-    );
-  };
-
-  handleClear = () => {
-    this.props.onChange('clear');
-    let _optionArray = this.state.OptionsArray.map(option => ({ ...option, value: null }));
-    // @ts-ignore
-    this.setState({ OptionsArray: _optionArray });
-  };
-  handlerFilterOptions = (option: number) => {
-    const { onChange } = this.props;
-    option == 1 ? onChange('remembered', true) : onChange('remembered', false);
-  };
-  handleFilterDelete = (name: string) => {
-    let newArray = this.state.OptionsArray.map(option => {
-      if (option.name == name) {
-        return { ...option, value: null };
-      }
-      return option;
-    });
-    this.props.onChange(name, null);
-    this.setState({ OptionsArray: newArray });
-  };
-  handleSelected = (data: any[], value: any, filed: string) => {
-    this.props.onChange(filed, value);
-    let _optionsArray = this.state.OptionsArray.map(option => {
-      if (option.name == filed) {
-        return { ...option, valuesArray: data, value };
-      } else {
-        return option;
-      }
-    });
-    this.setState({ OptionsArray: _optionsArray });
-  };
-  render() {
-    const { year, cycle, status, type, users, onChange, departments, remembered, okrPopType } = this.props;
-    const mapper = { year, cycle, status, type };
-    const { OptionsArray,cycles } = this.state;
-    return (
-      <Filter>
-        <FilterTop>
-          <FilterLeftWrapper>
-            <Select
-              container={document.body}
-              data={years}
-              value={year}
-              title='年份  '
-              textField='title'
-              valueField='value'
-              maxHeight='280px'
-              type='old'
-              width='64px'
-              onSelect={(value: any) => this.handleSelected(years, value, 'year')}
-            />
-            <Select
-              container={document.body}
-              data={cycles}
-              value={cycle}
-              title='周期  '
-              textField='title'
-              valueField='value'
-              maxHeight='280px'
-              type='old'
-              width='64px'
-              onSelect={(value: any) => this.handleSelected(cycles, value, 'cycle')}
-            />
-            {okrPopType == 1 && (
-              <Select
-                container={document.body}
-                data={statusType}
-                value={status}
-                title='状态  '
-                textField='title'
-                valueField='value'
-                maxHeight='280px'
-                type='old'
-                width='64px'
-                onSelect={(value: any) => this.handleSelected(statusType, value, 'status')}
-              />
-            )}
-            {this.KRSetting.OkrTypeSetting && (
-              <Select
-                container={document.body}
-                data={okrTypes}
-                value={type}
-                title='类型  '
-                textField='title'
-                valueField='value'
-                maxHeight='280px'
-                type='old'
-                width='64px'
-                onSelect={(value: any) => this.handleSelected(okrTypes, value, 'type')}
-              />
-            )}
-            <UserSelectorPop onSubmit={this.props.onUserChange} container={document.body}>
-              <UserSelectorWrapper ref='user'>
-                <span>负责人</span>
-                <i className='tu-icon-sort-up' />
-              </UserSelectorWrapper>
-            </UserSelectorPop>
-          </FilterLeftWrapper>
-          <Search placeHolder='请输入关键字' onSearch={(keywords: string) => onChange('keywords', keywords)} />
-        </FilterTop>
-        {(OptionsArray.filter(option => option.value !== null).length > 0 || !!users.length || !!departments.length) && (
-          <FilterBottom>
-            <FilterOptionsWrapper>
-              {OptionsArray.sort((a, b) => a.index - b.index)
-                .filter(option => option.value !== null)
-                .map(option => (
-                  <FilterTab title={option.title} valuesArray={option.valuesArray} name={option.name} value={mapper[option.name]} onClick={this.handleFilterDelete}></FilterTab>
-                ))}
-              {(!!users.length || !!departments.length) && <span style={{ marginRight: 5 }}>负责人</span>}
-              {users.map(u => {
-                return (
-                  <OptionItem key={u.Id}>
-                    <OpenUserName name={u.Name} id={u.Id} />
-                    <i className='tu-icon-cross' onClick={() => this.handleDeleteUser(u.Id)} />
-                  </OptionItem>
-                );
-              })}
-              {departments.map(u => {
-                return (
-                  <OptionItem key={u.Id}>
-                    {u.DepartmentName}的人员
-                    <i className='tu-icon-cross' onClick={() => this.handleDeleteDepartment(u.Id)} />
-                  </OptionItem>
-                );
-              })}
-
-              <ToolTip title='清空本次选择' overlayStyle={{ zIndex: 999999 }}>
-                <a onClick={this.handleClear}>清空所选</a>
-              </ToolTip>
-              {!remembered ? (
-                <a onClick={() => this.handlerFilterOptions(1)}>
-                  <ToolTip title='下次进入显示以上条件' overlayStyle={{ zIndex: 999999 }}>
-                    <span>记住选择</span>
-                  </ToolTip>
-                </a>
-              ) : (
-                <ConfirmPop align='bottom left' confirmTipText='确定取消吗？取消后将不再记住以上条件' onSubmit={() => this.handlerFilterOptions(2)}>
-                  <ToolTip title='不再显示以上条件' overlayStyle={{ zIndex: 999999 }}>
-                    <a>取消记住</a>
-                  </ToolTip>
-                </ConfirmPop>
-              )}
-            </FilterOptionsWrapper>
-          </FilterBottom>
-        )}
-      </Filter>
-    );
-  }
-}

package/src/components/change-okr-modal/Item.tsx

@@ -1,172 +0,0 @@
-import React, { PureComponent } from 'react'
-import { ItemWrapper, Radio, Tag, ItemObjectiveContainer, ItemKrContainer, ItemTop, WorkNameWrapper, OkrName, ItemBottom, PricipleName, Separator } from './styledComponents'
-import { OkrData } from './types';
-import { OpenUserName } from '../../utils/open-data';
-import  drawerManager  from '../../components/drawer-manager'
-
-interface Props {
-  data: OkrData,
-  active: any,
-  onSelect: (data: any) => void,
-  isShowKr: boolean,
-  keywords: string
-}
-interface State {
-  isExpand: boolean
-}
-const colorMap = {
-  1: '132,117,255',
-  2: '79,115,255',
-  3: '46,156,255',
-  4: '12,192,201'
-}
-const typeMap = {
-  1: '个人',
-  2: '部门',
-  3: '公司',
-  4: '团队'
-}
-export default class Item extends PureComponent<Props, State> {
-  constructor(props: Props) {
-    super(props)
-    this.state = {
-      isExpand: false
-    }
-  }
-
-  // @ts-ignore
-  isObjectiveRelevanceKr: boolean = BSGlobal.OkrAdvancedSetting.KRSetting.ObjectiveRelevanceKr
-
-  componentDidMount() {
-    this.isExtend();
-  }
-
-  componentWillReceiveProps() {
-    this.isExtend();
-  }
-
-  onSelect = (e: any, data: any) => {
-    e.stopPropagation();
-    e.nativeEvent.stopImmediatePropagation();
-    const { keywords } = this.props
-    let unFormatData = { ...data }
-    if (keywords) {
-      if (unFormatData.workName) {
-        unFormatData.workName = this.unFormatKeywordsFunc(unFormatData.workName, keywords)
-      } else {
-        unFormatData.mileStoneName = this.unFormatKeywordsFunc(unFormatData.mileStoneName, keywords)
-      }
-    }
-    this.props.onSelect({ selectData: unFormatData, okrInfo: this.props.data })
-  }
-
-  // 判断是否展开KR
-  isExtend = () => {
-    const { data, active } = this.props
-    let { isExpand } = this.state
-    if (data.Krs.length > 0) {
-      let isRelatedKr = data.Krs.some(item => item.mileStoneId == (active.workId || active.mileStoneId))
-      this.setState({
-        isExpand: isRelatedKr ? true : isExpand ? isExpand : data.isOpen
-      })
-    }
-  }
-
-  getCycleText = () => {
-    const { data } = this.props;
-    const hzNum = ['一', '二', '三', '四']
-    switch (data.cycleType) {
-      case 1: return `${data.annualNum}年`;
-      case 2: return `第${hzNum[data.yqmnum - 1]}季度`;
-      case 3: return `${data.yqmnum}月`;
-      case 4: return `${data.yqmnum}-${(data.yqmnum + 1) % 12 || 12}月`
-      case 5: return data.yqmnum == 1 ? '上半年' : '下半年'
-      default: return '自定义'
-    }
-  }
-
-  formatKeywordsFunc = (str: string, key: string) => {
-    let reg = new RegExp("(" + key + ")", "g");
-    var newstr = str.replace(reg, `<span style="color: #2879ff;">${key}</span>`);
-    return newstr;
-  }
-
-  unFormatKeywordsFunc = (str: string, key: string) => {
-    let regExpKey = `<span style="color: #2879ff;">${key}</span>`
-    let reg = new RegExp("(" + regExpKey + ")", "g");
-    var newstr = str.replace(reg, key);
-    return newstr;
-  }
-
-  _dealOkrData = (data: OkrData, keyWords: string) => {
-    if (keyWords) {
-      data.workName = this.formatKeywordsFunc(data.workName, keyWords)
-      data.Krs.forEach(item => {
-        item.mileStoneName = this.formatKeywordsFunc(item.mileStoneName, keyWords)
-      })
-    }
-    return data
-  }
-  okrData: any = this._dealOkrData(this.props.data, this.props.keywords)
-
-  render() {
-    const { data, active, isShowKr } = this.props;
-    let { isExpand } = this.state
-    return (
-      <ItemWrapper>
-        <ItemObjectiveContainer onClick={() => this.setState({ isExpand: !isExpand })}>
-          <ItemTop>
-            <Radio onClick={(e: any) => this.onSelect(e, data)} active={active && data.workId == active.workId} />
-            <Tag color={colorMap[data.cycleType] || colorMap[4]}>{this.getCycleText()}</Tag>
-            <WorkNameWrapper isShowKr={isShowKr}>
-              <OkrName isKr={false} isShowKr={isShowKr} dangerouslySetInnerHTML={{ __html: this.okrData.workName }}></OkrName>
-            </WorkNameWrapper>
-            {this.isObjectiveRelevanceKr && isShowKr && data.Krs.length > 0 && <span className={`${this.state.isExpand ? "tu-icon-arrow-up" : 'tu-icon-arrow-down'}`}></span>}
-          </ItemTop>
-          <ItemBottom>
-            {
-              !isShowKr && [
-                <span>{typeMap[data.okrType]}</span>,
-                <Separator />
-              ]
-            }
-            <PricipleName><OpenUserName name={data.principalUser.name} id={data.principalUser.userId} /></PricipleName>
-            <Separator />
-            <span>{data.startDate}-{data.endDate}</span>
-            {
-              isShowKr && [
-                <Separator />,
-                <span>{data.statusName}</span>
-              ]
-            }
-          </ItemBottom>
-        </ItemObjectiveContainer>
-        {
-          isShowKr && (this.isObjectiveRelevanceKr || (!this.isObjectiveRelevanceKr && this.okrData.hasSub)) && (
-            <ItemKrContainer className={`${isExpand ? 'slideIn' : 'slideOut'}`}>
-              {
-                this.okrData.Krs.length > 0 && this.okrData.Krs.map((item: any, index: number) =>
-                  this.isObjectiveRelevanceKr ? (
-                    <ItemTop key={item.mileStoneId}>
-                      <Radio onClick={(e: any) => this.onSelect(e, data.Krs[index])} active={active && item.mileStoneId == (active.workId || active.mileStoneId)} />
-                      <WorkNameWrapper isShowKr={isShowKr}>
-                        <OkrName isKr={true} isShowKr={isShowKr} dangerouslySetInnerHTML={{ __html: `KR${index + 1}：${item.mileStoneName}` }}></OkrName>
-                      </WorkNameWrapper>
-                    </ItemTop>
-                  ) : active && item.mileStoneId == (active.workId || active.mileStoneId) ? (
-                    <ItemTop key={item.mileStoneId}>
-                      <Radio onClick={(e: any) => this.onSelect(e, data.Krs[index])} active={active && item.mileStoneId == (active.workId || active.mileStoneId)} />
-                      <WorkNameWrapper isShowKr={isShowKr}>
-                        <OkrName isKr={true} isShowKr={isShowKr} dangerouslySetInnerHTML={{ __html: `KR${index + 1}：${item.mileStoneName}` }}></OkrName>
-                      </WorkNameWrapper>
-                    </ItemTop>
-                  ) : ''
-                )
-              }
-            </ItemKrContainer>
-          )
-        }
-      </ItemWrapper>
-    )
-  }
-}

package/src/components/change-okr-modal/filterTab.tsx

@@ -1,45 +0,0 @@
-import React, { Component } from 'react';
-import { OptionItem } from './styledComponents';
-import uuid from 'uuid';
-
-interface Props {
-  valuesArray: any[];
-  value: number | string;
-  title: string;
-  name: string;
-  style?: React.CSSProperties;
-  onClick: (...arg: any[]) => any;
-}
-function keyValueMapper(array: { title: string; value: string | number }[], value: string | number): string {
-  console.log(array)
-  console.log(value)
-  let val = array.filter(key => key.value == value);
-  if (val[0]) {
-    return val[0].title;
-  }
-  return 'invalid';
-}
-
-export default class FilterTab extends Component<Props, { visible: boolean }> {
-  constructor(props: Props) {
-    super(props);
-    this.state = {
-      visible: true,
-    };
-  }
-  componentWillReceiveProps(nextProps: Props) {
-    this.setState({ visible: true });
-  }
-  render() {
-    const { title, value, valuesArray, onClick, name } = this.props;
-    return (
-      <span style={this.props.style}>
-        <span style={{ marginRight: 5 }}>{title}</span>
-        <OptionItem key={value + uuid.v1()}>
-          {keyValueMapper(valuesArray, value)}
-          <i className='tu-icon-cross' onClick={() => onClick(name)} />
-        </OptionItem>
-      </span>
-    );
-  }
-}

package/src/components/change-okr-modal/index.scss

@@ -1,40 +0,0 @@
-
-.okr-panel-changeOkrPop {
-  transform-origin: right top;
-  
-  &-enter {
-    opacity: 0.1;
-    // transform: translateY(-50px);
-    &-active {
-      opacity: 1;
-      transform: translate(0,0) scale(1)!important;
-      transition: opacity .3s ease,transform .5s ease;
-      
-    }
-  }
-  &-leave {
-    opacity: 1;
-    transition: opacity .3s ease,transform .5s ease;
-    transform: translate(0,0) scale(1);
-    &-active {
-      opacity: 0;
-      // transition: opacity .5s ease;
-      
-    }
-  }
-
-  // &.okr-panel-changeOkrPop-baseInfo,
-  &.okr-panel-changeOkrPop-createOkr {
-    position: fixed !important;
-    left: 50% !important;
-    transform: translate(-50%, -50%) scale(1.01) !important;
-  }
-
-  // &.okr-panel-changeOkrPop-baseInfo {
-  //   top: 50% !important;
-  // }
-
-  &.okr-panel-changeOkrPop-createOkr {
-    top: 44% !important;
-  }
-}