feat:优化搜索

e4ddfff2 · zhangleyuan · c104cc9a · a1e2dd52 · e4ddfff2 · e4ddfff2
Commit e4ddfff2 authored Aug 12, 2021 by zhangleyuan
5 changed files
--- a/src/modules/college-manage/components/LeftStructureTree.jsx
+++ b/src/modules/college-manage/components/LeftStructureTree.jsx
@@ -503,7 +503,9 @@ function LeftStructureTree(props) {
  function selectUserList(record, e) {
    const _selectKeys = [];
-    _selectKeys.push(e.selectedNodes[0].id)
+    if(e.selectedNodes){
+      _selectKeys.push(e.selectedNodes[0].id)
+    }
    setSelectedKeys(_selectKeys);
    props.onChangeSelectDep(e.selectedNodes[0]);
    props.searchUserList(e.selectedNodes[0], treeType, 1);

--- a/src/modules/college-manage/components/MemberTree.jsx
+++ b/src/modules/college-manage/components/MemberTree.jsx
@@ -40,7 +40,7 @@ function MemberTree(props) {
    const _dataArray = dataArray.map((item,index)=>{
      item.title = "";
      item.key=item.id;
-      item.children = []
+      item.children = [];
      if(item.departmentUserVOList){
        item.children = item.departmentUserVOList;
      }
@@ -60,9 +60,9 @@ function MemberTree(props) {
    const _checkedNodes = e.checkedNodes;
    const _selectNodes = [];
    _checkedNodes.map((item,index)=>{
-      if(item.userId){
+      // if(item.userId){
        _selectNodes.push(item);
-      }
+      // }
    })
    props.onSelect(_selectNodes);
  }
@@ -74,7 +74,7 @@ function MemberTree(props) {
          checkable
          showIcon={false}
          treeData={treeData}
-          checkedKeys={_.pluck(props.selectUserList, 'id')}
+          checkedKeys={_.pluck(props.selectList, 'id')}
          onCheck={(selectedKeys,e)=>treeSelected(selectedKeys,e)}
          titleRender={(nodeData) => {
            return (

--- a/src/modules/college-manage/components/SearchUser.jsx
+++ b/src/modules/college-manage/components/SearchUser.jsx
@@ -22,13 +22,13 @@ function SearchUser(props) {
  }
  function selectuser(e,item){
    if(e.target.checked){
-      let _record = props.selectUserList
+      let _record = props.selectList
      _record.push(item)
      props.onSelect(_record,'user')
    }else{
-      let _record = props.selectUserList
+      let _record = props.selectList
      _record.map((_item,index)=>{
-        if(item.userId === item.userId){
+        if(_item.userId === item.userId){
          _record.splice(index,1)
        }
      })
@@ -77,7 +77,7 @@ function SearchUser(props) {
                      <div>
                        {props.data.departmentUserVOList.map((item,index)=>{
                          return  <div>
-                            <Checkbox onChange={(e)=>{selectuser(e,item)}} checked={_.pluck(props.selectUserList, 'userId').indexOf(item.userId)=== -1?false:true}>
+                            <Checkbox onChange={(e)=>{selectuser(e,item)}} checked={_.pluck(props.selectList, 'userId').indexOf(item.userId)=== -1?false:true}>
                                <div className="drop-down__item__con__item">
                                  <div className="drop-down__item__con__item__left">
                                    <span className="icon iconfont title-icon">&#xe603;</span>

--- a/src/modules/college-manage/components/SearchUser.less
+++ b/src/modules/college-manage/components/SearchUser.less
@@ -10,10 +10,11 @@
        box-shadow: 0px 2px 15px 6px rgba(0, 0, 0, 0.05);
        border-radius:2px;
        width:270px;
+        max-height:280px;
+        overflow-y: scroll;
        // .drop-down__item-user{
        //     margin-bottom:30px;
        // }
        .drop-down__item__title{
            font-size:14px;
            color:#666;

--- a/src/modules/college-manage/modal/NewChooseMembersModal.jsx
+++ b/src/modules/college-manage/modal/NewChooseMembersModal.jsx
@@ -26,7 +26,8 @@ class NewChooseMembersModal extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
-      selectUserList:[],
+      selectList:[], //所有的选中项
+      selectUserList:[], // 所有的选中的用户
      selectObject: {},
      openSetModal: false,
      visible:this.props.visible,
@@ -84,26 +85,41 @@ class NewChooseMembersModal extends React.Component {
  }
  treeSelect = (record)=>{
-    // console.log('record',record)
    this.setState({
-      selectUserList:record
+      selectList:record,
+      selectUserList:this.handleSelectUserList(record)
    })
  }
-  clearOneUser = (record) =>{
+  // 将所有的选中项里的人员挑出来
-    console.log("record",record);
+  handleSelectUserList =(list)=>{
-    const {selectUserList} = this.state;
+    const _list  = [];
-    const _selectUserList = selectUserList.filter((item,index)=>{
+    list.map((item,index)=>{
-      return item.userId !== record.userId
+      if(item.userId){
+        _list.push(item);
+      }
    })
-    console.log('selectUserList',selectUserList);
+    return _list
+  }
+  clearOneUser = (record) =>{
+    const {selectUserList,selectList} = this.state;
+    const _selectList = [];
+    selectList.map((item,index)=>{
+      if(item.userId !== record.userId && item.id !==record.departmentId){
+        _selectList.push(item);
+      }
+    });
+    console.log('_selectList',_selectList);
    this.setState({
-      selectUserList:_selectUserList
+      selectList:_selectList,
+      selectUserList:this.handleSelectUserList(_selectList)
    })
  }
   // 清空所有成员
  clearAllUser = () => {
    this.setState({
+      selectList:[],
      selectUserList : [],
    })
  }
@@ -254,25 +270,22 @@ class NewChooseMembersModal extends React.Component {
  }
  confirmSearchSelect=(record,type)=>{
-    const { selectUserList } = this.state;
+    const { selectUserList,selectList} = this.state;
    if(type==='user'){
-      this.setState({selectUserList:[...record]});
+      this.setState({selectList:[...record],selectUserList:this.handleSelectUserList(record)});
    }else{
      let _list =  [];
      if(record.departmentUserVOList){
        _list = record.departmentUserVOList;
      }
-      console.log('_list',_list);
+      this.setState({selectList:[...selectList,..._list],selectUserList:[...selectUserList,..._list]});
-      this.setState({selectUserList:[...selectUserList,..._list]},()=>{
-        console.log('selectUserList',this.state.selectUserList);
-      });
    }  
  }
  render() {
    const {type,treeDepType,selectDep={},addDepType=''} = this.props;
    const { id=''} = selectDep;
-    const {selectUserList,selectObject,visible,openSetModal,searchUserResultList} = this.state;
+    const {selectUserList,selectObject,visible,openSetModal,searchUserResultList,selectList} = this.state;
    const title = type === 'USER' ? '添加员工' : '添加学员';
    return (    
      <div>
@@ -301,15 +314,9 @@ class NewChooseMembersModal extends React.Component {
          <div className='member-container'>
            <div className='container-left'>
              <div className='container-left-body'>
-                {/* <Search 
+                <SearchUser onChange={(value)=>{this.getCompleteOptionData(value)}} data={searchUserResultList} onSelect={(record,type)=>{this.confirmSearchSelect(record,type)}} selectUserList={selectUserList} selectList={selectList}/>
-                  placeholder='搜索成员'
-                  className='search search-input'
-                  enterButton={<span className="icon iconfont">&#xe832;</span>}
-                /> */}
-                {/* {this.Complete()} */}
-                <SearchUser onChange={(value)=>{this.getCompleteOptionData(value)}} data={searchUserResultList} onSelect={(record,type)=>{this.confirmSearchSelect(record,type)}} selectUserList={selectUserList}/>
                <div className='container-left-body-table'>
-                  <MemberTree departmentId={id} treeDepType={treeDepType} nowTreeDepType={addDepType} onSelect={(record)=>{this.treeSelect(record)}} selectUserList={selectUserList} type={type}/>
+                  <MemberTree departmentId={id} treeDepType={treeDepType} nowTreeDepType={addDepType} onSelect={(record)=>{this.treeSelect(record)}} selectUserList={selectUserList} type={type} selectList={selectList}/>
                </div>
              </div>
            </div>