Skip to content

X
xiaomai-cloud-class-web
Commit a1e2dd52 by zhangleyuan
Options

feat:搜索优化

parent 16af0617
Showing with 44 additions and 34 deletions
src/modules/college-manage/components/LeftStructureTree.jsx
...@@ -503,7 +503,9 @@ function LeftStructureTree(props) { ...@@ -503,7 +503,9 @@ function LeftStructureTree(props) {
function selectUserList(record, e) { function selectUserList(record, e) {
const _selectKeys = []; const _selectKeys = [];
if(e.selectedNodes){
_selectKeys.push(e.selectedNodes[0].id) _selectKeys.push(e.selectedNodes[0].id)
}
setSelectedKeys(_selectKeys); setSelectedKeys(_selectKeys);
props.onChangeSelectDep(e.selectedNodes[0]); props.onChangeSelectDep(e.selectedNodes[0]);
props.searchUserList(e.selectedNodes[0], treeType, 1); props.searchUserList(e.selectedNodes[0], treeType, 1);
......
src/modules/college-manage/components/MemberTree.jsx
...@@ -40,7 +40,7 @@ function MemberTree(props) { ...@@ -40,7 +40,7 @@ function MemberTree(props) {
const _dataArray = dataArray.map((item,index)=>{ const _dataArray = dataArray.map((item,index)=>{
item.title = ""; item.title = "";
item.key=item.id; item.key=item.id;
item.children = [] item.children = [];
if(item.departmentUserVOList){ if(item.departmentUserVOList){
item.children = item.departmentUserVOList; item.children = item.departmentUserVOList;
} }
...@@ -60,9 +60,9 @@ function MemberTree(props) { ...@@ -60,9 +60,9 @@ function MemberTree(props) {
const _checkedNodes = e.checkedNodes; const _checkedNodes = e.checkedNodes;
const _selectNodes = []; const _selectNodes = [];
_checkedNodes.map((item,index)=>{ _checkedNodes.map((item,index)=>{
if(item.userId){ // if(item.userId){
_selectNodes.push(item); _selectNodes.push(item);
} // }
}) })
props.onSelect(_selectNodes); props.onSelect(_selectNodes);
} }
...@@ -74,7 +74,7 @@ function MemberTree(props) { ...@@ -74,7 +74,7 @@ function MemberTree(props) {
checkable checkable
showIcon={false} showIcon={false}
treeData={treeData} treeData={treeData}
checkedKeys={_.pluck(props.selectUserList, 'id')} checkedKeys={_.pluck(props.selectList, 'id')}
onCheck={(selectedKeys,e)=>treeSelected(selectedKeys,e)} onCheck={(selectedKeys,e)=>treeSelected(selectedKeys,e)}
titleRender={(nodeData) => { titleRender={(nodeData) => {
return ( return (
......
src/modules/college-manage/components/SearchUser.jsx
...@@ -22,13 +22,13 @@ function SearchUser(props) { ...@@ -22,13 +22,13 @@ function SearchUser(props) {
} }
function selectuser(e,item){ function selectuser(e,item){
if(e.target.checked){ if(e.target.checked){
let _record = props.selectUserList let _record = props.selectList
_record.push(item) _record.push(item)
props.onSelect(_record,'user') props.onSelect(_record,'user')
}else{ }else{
let _record = props.selectUserList let _record = props.selectList
_record.map((_item,index)=>{ _record.map((_item,index)=>{
if(item.userId === item.userId){ if(_item.userId === item.userId){
_record.splice(index,1) _record.splice(index,1)
} }
}) })
...@@ -77,7 +77,7 @@ function SearchUser(props) { ...@@ -77,7 +77,7 @@ function SearchUser(props) {
<div> <div>
{props.data.departmentUserVOList.map((item,index)=>{ {props.data.departmentUserVOList.map((item,index)=>{
return <div> 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">
<div className="drop-down__item__con__item__left"> <div className="drop-down__item__con__item__left">
<span className="icon iconfont title-icon">&#xe603;</span> <span className="icon iconfont title-icon">&#xe603;</span>
......
src/modules/college-manage/components/SearchUser.less
...@@ -10,10 +10,11 @@ ...@@ -10,10 +10,11 @@
box-shadow: 0px 2px 15px 6px rgba(0, 0, 0, 0.05); box-shadow: 0px 2px 15px 6px rgba(0, 0, 0, 0.05);
border-radius:2px; border-radius:2px;
width:270px; width:270px;
max-height:280px;
overflow-y: scroll;
// .drop-down__item-user{ // .drop-down__item-user{
// margin-bottom:30px; // margin-bottom:30px;
// } // }
.drop-down__item__title{ .drop-down__item__title{
font-size:14px; font-size:14px;
color:#666; color:#666;
......
src/modules/college-manage/modal/NewChooseMembersModal.jsx
...@@ -26,7 +26,8 @@ class NewChooseMembersModal extends React.Component { ...@@ -26,7 +26,8 @@ class NewChooseMembersModal extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
selectUserList:[], selectList:[], //所有的选中项
selectUserList:[], // 所有的选中的用户
selectObject: {}, selectObject: {},
openSetModal: false, openSetModal: false,
visible:this.props.visible, visible:this.props.visible,
...@@ -84,26 +85,41 @@ class NewChooseMembersModal extends React.Component { ...@@ -84,26 +85,41 @@ class NewChooseMembersModal extends React.Component {
} }
treeSelect = (record)=>{ treeSelect = (record)=>{
// console.log('record',record)
this.setState({ this.setState({
selectUserList:record selectList:record,
selectUserList:this.handleSelectUserList(record)
}) })
} }
clearOneUser = (record) =>{
console.log("record",record); // 将所有的选中项里的人员挑出来
const {selectUserList} = this.state; handleSelectUserList =(list)=>{
const _selectUserList = selectUserList.filter((item,index)=>{ const _list = [];
return item.userId !== record.userId 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({ this.setState({
selectUserList:_selectUserList selectList:_selectList,
selectUserList:this.handleSelectUserList(_selectList)
}) })
} }
// 清空所有成员 // 清空所有成员
clearAllUser = () => { clearAllUser = () => {
this.setState({ this.setState({
selectList:[],
selectUserList : [], selectUserList : [],
}) })
} }
...@@ -254,25 +270,22 @@ class NewChooseMembersModal extends React.Component { ...@@ -254,25 +270,22 @@ class NewChooseMembersModal extends React.Component {
} }
confirmSearchSelect=(record,type)=>{ confirmSearchSelect=(record,type)=>{
const { selectUserList } = this.state; const { selectUserList,selectList} = this.state;
if(type==='user'){ if(type==='user'){
this.setState({selectUserList:[...record]}); this.setState({selectList:[...record],selectUserList:this.handleSelectUserList(record)});
}else{ }else{
let _list = []; let _list = [];
if(record.departmentUserVOList){ if(record.departmentUserVOList){
_list = 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() { render() {
const {type,treeDepType,selectDep={},addDepType=''} = this.props; const {type,treeDepType,selectDep={},addDepType=''} = this.props;
const { id=''} = selectDep; const { id=''} = selectDep;
const {selectUserList,selectObject,visible,openSetModal,searchUserResultList} = this.state; const {selectUserList,selectObject,visible,openSetModal,searchUserResultList,selectList} = this.state;
const title = type === 'USER' ? '添加员工' : '添加学员'; const title = type === 'USER' ? '添加员工' : '添加学员';
return ( return (
<div> <div>
...@@ -301,15 +314,9 @@ class NewChooseMembersModal extends React.Component { ...@@ -301,15 +314,9 @@ class NewChooseMembersModal extends React.Component {
<div className='member-container'> <div className='member-container'>
<div className='container-left'> <div className='container-left'>
<div className='container-left-body'> <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'> <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> </div>
</div> </div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment