@titaui/pc 1.7.71 → 1.7.75

package/src/components-v1/userSelector/UserSelectorPop.tsx

@@ -1,87 +0,0 @@
-import React, { PureComponent } from 'react';
-import Pop from '../pop';
-import UserSelector from './index';
-import { User, Dept } from './types';
-interface Props {
-  className?: string;
-  align?: string;
-  container?: any;
-  onSubmit: (users: User[], depts: Dept[]) => void;
-  multi?: boolean; // 是否多选(高级模式)
-  deptSelectable?: boolean;
-  onCancel?: Function;
-  stopPropagation?: boolean;
-  rootSelectable?: boolean;
-  style?:React.CSSProperties
-  selectedUser?: User[];
-  selectedDept?: Dept[];
-  mode?:'single' | 'multi';
-  popExtraClassName?:string
-}
-
-export default class UserSelectorPop extends PureComponent<Props> {
-  handleShowPop = (e) => {
-    if(this.props.stopPropagation){
-      e.stopPropagation();
-      e.nativeEvent.stopImmediatePropagation();
-    }
-    //@ts-ignore
-    this.refs.pop.show(this.refs.trigger);
-  };
-  handleHide = () => {
-    //@ts-ignore
-    this.refs.pop.hide();
-  };
-  /**手动显示 */
-  show = (el: any) => {
-    //@ts-ignore
-    this.refs.pop.show(el);
-  };
-  render() {
-    const { children,popExtraClassName, className, container, align, onSubmit, multi, deptSelectable, onCancel, rootSelectable,style,stopPropagation,selectedUser,selectedDept,mode } = this.props;
-    return (
-      <div style={{ display: 'inline-block',...(style||{}) }} className={className}>
-        <div ref='trigger' onMouseDown={this.handleShowPop}>
-          {children}
-        </div>
-        <Pop ref='pop' align={align} container={container} className={'tita-common-pop-no-shadow tita-user-pop '+popExtraClassName||''} cover>
-          <div onClick={e=>{
-            if(!stopPropagation)return;
-            e.stopPropagation();
-            e.nativeEvent.stopImmediatePropagation();
-          }}>
-          <UserSelector
-            multi={multi}
-            onSubmit={(users, depts) => {
-              onSubmit(users, depts);
-              this.handleHide();
-            }}
-            mode={mode}
-            deptSelectable={deptSelectable}
-            selectedDept={selectedDept}
-            selectedUser={selectedUser}
-            onCancel={() => {
-              this.handleHide();
-              onCancel && onCancel();
-            }}
-            onOpenMultiMode={() => (this.refs.pop as any).resetPosition()}
-            rootSelectable={rootSelectable}
-          />
-          </div>
-        </Pop>
-      </div>
-    );
-  }
-}
-export const Test = () => {
-  return (
-    <UserSelectorPop
-      onSubmit={(users, depts) => {
-        alert(`选择了${users.length}个人,${depts.length}个部门,详细信息看控制台`);
-        console.log(users, depts);
-      }}
-    >
-      <button>打开选人控件</button>
-    </UserSelectorPop>
-  );
-};

package/src/components-v1/userSelector/components/MultiMode/CommonList.tsx

@@ -1,119 +0,0 @@
-import React, { PureComponent } from 'react'
-import { User,WXUser } from '../../types'
-import { getApiUrl, taker, getApiUrl3 } from '../../../../utils/request-v1'
-import { ListHeader, ListWrapper, List, EmptyWrapper, ListEmptyText } from '../../style'
-import UserItem from '../UserItem'
-import PerfectScrollbar from 'react-perfect-scrollbar'
-import 'react-perfect-scrollbar/dist/css/styles.css';
-import { isPlatform } from '../../../../utils/open-data'
-
-interface Props {
-  onSelect:Function
-  searchTxt?:string
-}
-interface State {
-  users: User[]
-  pending: boolean
-}
-export default class CommonList extends PureComponent<Props,State> {
-  constructor(p:Props){
-    super(p);
-    this.state = {
-      users:[],
-    pending: true
-    }
-  }
-  componentDidMount(){
-    if(this.props.searchTxt){
-      this.getSearchUsers()
-    }else {
-      this.getFrequentContacts()
-    }
-  }
-  getFrequentContacts = () => {
-    const url = getApiUrl(`Contact?v=${new Date().getTime()}`)
-    taker(url).then(res => {
-      if(res.Code == 1){
-        let users:any[] = [];
-        for(let key in res.Data){
-          users.push(res.Data[key]);
-        }
-        this.setState({users,pending:false})
-      }
-    })
-  }
-  getSearchUsers = () => {
-    const url = isPlatform('wx')? getApiUrl3(`staff/workwx/serarch?filter=${(this.props.searchTxt||'').replace(/[+ =%&#\?]/g,(s)=>encodeURIComponent(s))}`) : getApiUrl(`user?v=${new Date().getTime()}&filters=${(this.props.searchTxt||'').replace(/[+ =%&#\?]/g,(s)=>encodeURIComponent(s))}`)
-    taker(url).then(res => {
-      if(res.Code == 1){
-        let users:User[] = [];
-        if(isPlatform('wx')){
-          users = ((res.Data||[]) as WXUser[]).map(u => ({
-            Id: u.userId,
-            Name: u.name,
-            Email: u.email,
-            DepartmentId: u.departmentId,
-            Department: u.departmentName,
-            UserAvatar: {
-              Original: u.avatar.original,
-              Small: u.avatar.small,
-              Medium: u.avatar.medium,
-              Normal: u.avatar.normal,
-              Big: u.avatar.big,
-              Large: u.avatar.large,
-              HasAvatar: u.avatar.hasAvatar,
-              Color: u.avatar.color
-            }
-          }))
-        }else {
-          for(let key in (res.Data.SimpleUserModel|| {})){
-            users.push(res.Data.SimpleUserModel[key]);
-          }
-        }
-        
-        this.setState({users})
-      }
-    })
-  }
-  componentDidUpdate(prevProps:Props){
-    if(prevProps.searchTxt!=this.props.searchTxt){
-      if(this.props.searchTxt){
-        this.getSearchUsers()
-      }else {
-        this.getFrequentContacts()
-      }
-    }
-  }
-  render() {
-    const {users,pending} = this.state;
-    const {searchTxt} = this.props;
-    const hasUser = !!users.length
-    return (
-      <ListWrapper>
-        
-        {
-          hasUser && 
-          <ListHeader>
-            <span>{searchTxt?'搜索结果':'常用联系人'}&nbsp;{users.length}人</span>
-            <i className="tu-icon-add2" onMouseDown={()=>this.props.onSelect(users)}/>
-          </ListHeader>
-        }
-        {
-          hasUser &&
-          <List>
-            <PerfectScrollbar>
-            {users.map(u => <UserItem user={u} key={u.Id} keyword={searchTxt} onClick={(u:User) => this.props.onSelect([u])}/>)}
-            </PerfectScrollbar>
-          </List>
-        }
-        {
-          !hasUser && !pending &&
-          <EmptyWrapper>
-            <img src={require('../../assets/emptyImg.png')} width="100px"/>
-            <ListEmptyText>这里什么都没有...</ListEmptyText>
-          </EmptyWrapper>
-        }
-      </ListWrapper>
-    )
-  }
-}

package/src/components-v1/userSelector/components/MultiMode/DepartmentList.tsx

@@ -1,80 +0,0 @@
-import React, { PureComponent } from 'react';
-import { getApiUrl, taker } from '../../../../utils/request-v1';
-import { Deparentment, Dept } from '../../types';
-import DepartmentTree from './DepartmentTree';
-import { DepartmentListWrapper, EmptyWrapper, ListEmptyText } from '../../style';
-import PerfectScrollbar from 'react-perfect-scrollbar';
-import 'react-perfect-scrollbar/dist/css/styles.css';
-interface Props {
-  onSelectUser: Function;
-  onSelectDept?: Function;
-  rootSelectable?: boolean;
-}
-interface State {
-  trees: Dept[];
-}
-export default class DepartmentList extends PureComponent<Props, State> {
-  constructor(p: Props) {
-    super(p);
-    this.state = {
-      trees: [],
-    };
-  }
-  componentDidMount() {
-    this.getDeparents();
-  }
-  getDeparents = () => {
-    const url = getApiUrl(`department/All`);
-    taker(url).then(res => {
-      if (res.Code == 1) {
-        this.setState({
-          trees: this.parseDeparentTree(res.Data || []),
-        });
-      }
-    });
-  };
-  parseDeparentTree = (data: Deparentment[]) => {
-    let map = {};
-    data.forEach(dept => {
-      if (map[dept.Id]) {
-        map[dept.Id] = { ...dept, children: map[dept.Id].children };
-      } else {
-        map[dept.Id] = { ...dept, children: [] };
-      }
-      if (map[dept.PId]) {
-        map[dept.PId].children.push(map[dept.Id]);
-      } else {
-        map[dept.PId] = {
-          root: true,
-          children: [map[dept.Id]],
-        };
-      }
-    });
-    let trees: any[] = [];
-    for (let key in map) {
-      if (map[key].root) {
-        trees.push(...map[key].children);
-      }
-    }
-    return trees;
-  };
-  render() {
-    const { rootSelectable, onSelectUser, onSelectDept } = this.props;
-    const { trees } = this.state;
-    return (
-      <DepartmentListWrapper>
-        <PerfectScrollbar>
-          {trees.map(tree => (
-            <DepartmentTree opened rootSelectable={rootSelectable} tree={tree} key={tree.Id} level={0} onSelectUser={onSelectUser} onSelectDept={onSelectDept} />
-          ))}
-          {!trees.length && (
-            <EmptyWrapper>
-              <img src={require('../../assets/emptyImg.png')} width='100px' />
-              <ListEmptyText>这里什么都没有...</ListEmptyText>
-            </EmptyWrapper>
-          )}
-        </PerfectScrollbar>
-      </DepartmentListWrapper>
-    );
-  }
-}

package/src/components-v1/userSelector/components/MultiMode/DepartmentTree.tsx

@@ -1,101 +0,0 @@
-import React, { PureComponent } from 'react';
-import { Dept, User } from '../../types';
-import { Collapse } from 'tita-ui';
-import UserItem from '../UserItem';
-import { TreeHeader, TreeList } from '../../style';
-import { getApiUrl, taker } from '../../../../utils/request-v1';
-import { OpenDepartmentName } from '../../../../utils/open-data';
-interface Props {
-  tree: Dept;
-  level: number;
-  onSelectUser?: Function;
-  onSelectDept?: Function;
-  onDeleteDept?: Function;
-  opened?: boolean;
-  rootSelectable?: boolean;
-}
-interface State {
-  users: User[];
-  opened: boolean;
-}
-export default class DepartmentTree extends PureComponent<Props, State> {
-  constructor(p: Props) {
-    super(p);
-    this.state = {
-      users: [],
-      opened: this.props.opened || false,
-    };
-  }
-  componentDidMount() {
-    if (this.state.opened && !this.state.users.length) {
-      this.getDepartmentUsers();
-    }
-  }
-  toggleOpened = () => {
-    const { opened, users } = this.state;
-    if (!opened && !users.length) {
-      return this.getDepartmentUsers();
-    }
-    this.setState({
-      opened: !opened,
-    });
-  };
-  getDepartmentUsers = () => {
-    const { tree } = this.props;
-    const url = getApiUrl(`department/DepartmentOfUser?department_id=${tree.Id}`);
-    taker(url).then(res => {
-      if (res.Code == 1) {
-        this.setState({
-          users: res.Data,
-          opened: true,
-        });
-      }
-    });
-  };
-  handleSelectDept = (e: React.MouseEvent<HTMLElement, MouseEvent>) => {
-    e.stopPropagation();
-    e.nativeEvent.stopImmediatePropagation();
-    const { tree, onSelectDept } = this.props;
-    onSelectDept && onSelectDept(tree);
-  };
-  handleDeleteDept = (e: React.MouseEvent<HTMLElement, MouseEvent>) => {
-    e.stopPropagation();
-    e.nativeEvent.stopImmediatePropagation();
-    const { tree, onDeleteDept } = this.props;
-    onDeleteDept && onDeleteDept(tree);
-  };
-  handleSelectUser = (user: User) => {
-    const { onSelectUser } = this.props;
-    onSelectUser && onSelectUser([user]);
-  };
-  //@ts-ignore
-  render() {
-    const { tree, level, onSelectDept, onSelectUser, onDeleteDept, rootSelectable } = this.props;
-    const { users, opened } = this.state;
-    const isRootSelect = rootSelectable ? rootSelectable : tree.PId != -1;
-    return (
-      <div>
-        <TreeHeader onMouseDown={this.toggleOpened}>
-          <div>
-            <i className='tu-icon-angle-right' style={{ transform: `rotate(${opened ? 90 : 0}deg)` }} />
-            <span style={{ maxWidth: 110 - level * 10 + 'px' }}>
-              <OpenDepartmentName name={tree.DepartmentName} id={tree.Id} />
-              {/* {tree.DepartmentName} */}
-            </span>
-            <span>{tree.TotalUserCount}人</span>
-          </div>
-          {isRootSelect && onSelectDept && <i className='tu-icon-add2' onMouseDown={this.handleSelectDept} />}
-          {onDeleteDept && <i className='tu-icon-cross' onMouseDown={this.handleDeleteDept} />}
-        </TreeHeader>
-        <Collapse isOpened={opened}>
-          <TreeList>
-            {users.map(u => (
-              <UserItem key={u.Id} user={u} onClick={this.handleSelectUser} />
-            ))}
-            {tree.children && tree.children.map(d => <DepartmentTree tree={d} level={level + 1} onSelectDept={onSelectDept} onSelectUser={onSelectUser} />)}
-          </TreeList>
-        </Collapse>
-      </div>
-    );
-  }
-}

package/src/components-v1/userSelector/components/MultiMode/SubsList.tsx

@@ -1,63 +0,0 @@
-import React, { PureComponent } from 'react'
-import { User } from '../../types'
-import { getApiUrl, taker } from '../../../../utils/request-v1'
-import { getUserInfo } from '../../../../utils/bs-global'
-import { ListHeader, ListWrapper, List, EmptyWrapper, ListEmptyText } from '../../style'
-import UserItem from '../UserItem'
-import PerfectScrollbar from 'react-perfect-scrollbar'
-import 'react-perfect-scrollbar/dist/css/styles.css';
-interface Props {
-  onSelect:Function
-}
-interface State {
-  users: User[]
-}
-export default class CommonList extends PureComponent<Props,State> {
-  constructor(p:Props){
-    super(p);
-    this.state = {
-      users:[]
-    }
-  }
-  componentDidMount(){
-    this.getMySubordinates()
-  }
-  getMySubordinates = () => {
-    const url = getApiUrl(`org/GetMySubordinates?lv=2&type=0`)
-    taker(url).then(res => {
-      if(res.Code == 1){
-        this.setState({users:(res.Data || []).filter((d:any) => d.User.Id != getUserInfo().Id).map((d:any) => d.User)})
-      }
-    })
-  }
-  render() {
-    const {users} = this.state;
-    const hasUser = !!users.length
-    return (
-      <ListWrapper>
-        {
-          hasUser && 
-          <ListHeader>
-            <span>下属&nbsp;{users.length}人</span>
-            <i className="tu-icon-add2" onMouseDown={()=>this.props.onSelect(users)}/>
-          </ListHeader>
-        }
-        {
-          hasUser &&
-          <List>
-            <PerfectScrollbar>
-              {users.map(u => <UserItem user={u} key={u.Id} onClick={(u:User) => this.props.onSelect([u])}/>)}
-            </PerfectScrollbar>
-          </List>
-        }
-        {
-          !hasUser && 
-          <EmptyWrapper>
-            <img src={require('../../assets/emptyImg.png')} width="100px"/>
-            <ListEmptyText>这里什么都没有...</ListEmptyText>
-          </EmptyWrapper>
-        }
-      </ListWrapper>
-    )
-  }
-}

package/src/components-v1/userSelector/components/MultiMode/index.tsx

@@ -1,100 +0,0 @@
-import React, { PureComponent } from 'react';
-import { MutiModeWrapper, MutiModeLeft, MutiModeRight, SelectedHeader, SelectedList, ClearBtn, EmptyText } from '../../style';
-import Tab from '../../../tabs';
-import CommonList from './CommonList';
-import SubsList from './SubsList';
-import { User, Dept } from '../../types';
-import DepartmentList from './DepartmentList';
-import UserItem from '../UserItem';
-import DepartmentTree from './DepartmentTree';
-import PerfectScrollbar from 'react-perfect-scrollbar';
-import 'react-perfect-scrollbar/dist/css/styles.css';
-interface Props {
-  selectedUser: User[];
-  selectedDept: Dept[];
-  searchTxt?: string;
-  onSelectUser: Function;
-  onSelectDept: Function;
-  onDeleteUser: Function;
-  onDeleteDept: Function;
-  onClear: Function;
-  deptSelectable?: boolean;
-  rootSelectable?: boolean;
-}
-
-export default class MutiMode extends PureComponent<Props> {
-  tab: any;
-  handleSelectUser = (users: User[]) => {
-    const { selectedUser, onSelectUser } = this.props;
-    let m = {};
-    selectedUser.forEach(user => (m[user.Id] = true));
-    const filterdUsers = users.filter(user => !m[user.Id]);
-    if (!filterdUsers.length) return;
-    onSelectUser(filterdUsers);
-  };
-  handleDepartment = (d: Dept) => {
-    const { selectedDept, onSelectDept } = this.props;
-    if (selectedDept.findIndex(sd => sd.Id == d.Id) != -1) return;
-    onSelectDept(d);
-  };
-  componentDidUpdate(prevProps: Props) {
-    if (prevProps.searchTxt != this.props.searchTxt) {
-      if (this.props.searchTxt) {
-        this.tab.changeTab('common');
-      }
-    }
-  }
-  render() {
-    const { selectedUser, selectedDept, onDeleteUser, onDeleteDept, onClear, deptSelectable, rootSelectable } = this.props;
-    const deptIsSelected = selectedDept.length > 0;
-    const userIsSelected = selectedUser.length > 0;
-    const tabOptions = [
-      {
-        title: '常用',
-        name: 'common',
-        component: <CommonList searchTxt={this.props.searchTxt} onSelect={(u: User[]) => this.handleSelectUser(u)} />,
-      },
-      {
-        title: '下属',
-        name: 'sub',
-        component: <SubsList onSelect={(u: User[]) => this.handleSelectUser(u)} />,
-      },
-    ];
-    // if (!isPlatform('feishu')) {
-      tabOptions.push({
-        title: '部门',
-        name: 'department',
-        component: <DepartmentList rootSelectable={rootSelectable} onSelectUser={(u: User[]) => this.handleSelectUser(u)} onSelectDept={deptSelectable ? (d: Dept) => this.handleDepartment(d) : undefined} />,
-      });
-    // }
-    return (
-      <MutiModeWrapper>
-        <MutiModeLeft>
-          <Tab options={tabOptions} ref={r => (this.tab = r)} />
-        </MutiModeLeft>
-        <MutiModeRight>
-          <SelectedHeader>
-            <span>
-              已选人员{selectedUser.length + '人'}
-              {deptIsSelected && `,组${selectedDept.length}个`}
-            </span>
-            <ClearBtn active={deptIsSelected || userIsSelected} onMouseDown={() => onClear()}>
-              清空所选
-            </ClearBtn>
-          </SelectedHeader>
-          <SelectedList>
-            <PerfectScrollbar>
-              {selectedUser.map(u => (
-                <UserItem user={u} key={u.Id} onDeleteUser={onDeleteUser} />
-              ))}
-              {selectedDept.map(d => (
-                <DepartmentTree tree={d} key={d.Id} level={0} onDeleteDept={onDeleteDept} />
-              ))}
-              {!deptIsSelected && !userIsSelected && <EmptyText>请在左侧选择人员</EmptyText>}
-            </PerfectScrollbar>
-          </SelectedList>
-        </MutiModeRight>
-      </MutiModeWrapper>
-    );
-  }
-}

package/src/components-v1/userSelector/components/SearchBar.tsx

@@ -1,68 +0,0 @@
-import React, { PureComponent } from 'react'
-import {InputWrapper,Input,SearchIcon, CleanBtn} from '../style'
-import { findDOMNode } from 'react-dom';
-interface Props {
-  onSearch:Function
-}
-interface State {
-  focus: boolean,
-  searchTxt: string
-}
-export default class SearchBar extends PureComponent<Props,State> {
-  constructor(props:Props){
-    super(props);
-    this.state = {
-      focus: false,
-      searchTxt: ''
-    }
-  }
-  timer:any;
-  input: any;
-  componentDidMount(){
-      this.focus()
-    
-    
-  }
-  toggleFocus = (focus:boolean) => {
-    this.setState({
-      focus
-    },() => focus && this.focus())
-  }
-  focus = () => {
-    setTimeout(() => {
-      //@ts-ignore
-    findDOMNode(this.input).focus()
-    }, 0)
-    
-      
-    
-    
-  }
-  clear = (doSearch?:boolean) => {
-    this.setState({
-      searchTxt: ''
-    },this.focus)
-    doSearch && this.props.onSearch('')
-  }
-  handleTxtChange = (e:React.ChangeEvent<HTMLInputElement>) => {
-    const text = e.target.value;
-    this.setState({
-      searchTxt: text
-    })
-    clearTimeout(this.timer);
-    this.timer = setTimeout(() => {
-      this.props.onSearch(text)
-    }, 500);
-  }
-  render() {
-    const {focus,searchTxt} = this.state;
-    const hasTxt = !!searchTxt && searchTxt.length > 0
-    return (
-      <InputWrapper focus={focus}>
-          <SearchIcon className="tu-icon-search" active={focus}/>
-          <Input onFocus={()=>this.toggleFocus(true)} value={searchTxt} onChange={this.handleTxtChange} placeholder="搜索" onBlur={()=>this.toggleFocus(false)} ref={(r:any) => this.input = r}/>
-          {hasTxt && <CleanBtn className="tu-icon-cross" onMouseDown={(e: any) => {this.clear(true);e.stopPropagation();e.nativeEvent.stopImmediatePropagation()}}/>}
-      </InputWrapper>
-    )
-  }
-}