feat:搜索优化

src/modules/college-manage/components/LeftStructureTree.jsx

@@ -503,7 +503,9 @@ function LeftStructureTree(props) {
 
   function selectUserList(record, e) {
     const _selectKeys = [];
+    if(e.selectedNodes){
       _selectKeys.push(e.selectedNodes[0].id)
+    }
     setSelectedKeys(_selectKeys);
     props.onChangeSelectDep(e.selectedNodes[0]);
     props.searchUserList(e.selectedNodes[0], treeType, 1);

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 (

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>

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;

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);
-    const {selectUserList} = this.state;
-    const _selectUserList = selectUserList.filter((item,index)=>{
-      return item.userId !== record.userId
+
+  // 将所有的选中项里的人员挑出来
+  handleSelectUserList =(list)=>{
+    const _list  = [];
+    list.map((item,index)=>{
+      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({selectUserList:[...selectUserList,..._list]},()=>{
-        console.log('selectUserList',this.state.selectUserList);
-      });
+      this.setState({selectList:[...selectList,..._list],selectUserList:[...selectUserList,..._list]});
     }  
   }
 
   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 
-                  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}/>
+                <SearchUser onChange={(value)=>{this.getCompleteOptionData(value)}} data={searchUserResultList} onSelect={(record,type)=>{this.confirmSearchSelect(record,type)}} selectUserList={selectUserList} selectList={selectList}/>
                 <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>