Skip to content

X
xiaomai-cloud-class-web
Commit 82c574b0 by zhangleyuan
Options

feat:处理员工列表的搜索

parent 3db3e5a0
Showing with 188 additions and 31 deletions
src/modules/college-manage/components/DepartMentTabCon.jsx
......@@ -26,7 +26,7 @@ function DepartMentTabCon(props) {
const [total, setTotal] = useState(0);
const [userListdata, setUserListData] = useState([]);
const [selectUser,setSelectUser] = useState([]); // 设置选中的用户
const [selectDep,setSelectDep] = useState({})
const [selectDep,setSelectDep] = useState({});
const columns = [
{
title: "学员",
......@@ -122,8 +122,15 @@ function DepartMentTabCon(props) {
storeId: User.getStoreId(),
userId: User.getUserId(),
};
if(record){
if(record.id){
params.departmentId = record.id;
}else{
params.departmentId = null;
}
if(record.queryName){
params.queryName = record.queryName;
}else{
params.queryName = null;
}
if (current) {
params.current = current;
......
src/modules/college-manage/components/LeftStructureTree.jsx
......@@ -10,6 +10,7 @@ import "./LeftStructureTree.less";
const { Search } = Input;
const { DirectoryTree } = Tree;
const { Option } = AutoComplete;
function LeftStructureTree(props) {
const {treeType} = props;
const [treeData,setTreeData]=useState([]);
......@@ -20,10 +21,11 @@ function LeftStructureTree(props) {
const [postGroupModalLable,setPostGroupModalLable] = useState("");
const [postGroupName, setPostGroupName] = useState("");
const [currentGroupData,setCurrentGroupData] = useState({});
const [selectDepParams,setSelectDepParams] = useState({}); // 设置选择的部门、岗位组、自定分组的参数
const [completeOptions,setCompleteOption] = useState([]);
const [selectedKeys,setSelectedKeys]= useState([]); // 设置选中的部门key值
const [queryName,setQueryName] = useState('');
const [open,setOpen]=useState(false);
const renderTitle = (title) => (
<span>
{title}
......@@ -48,13 +50,15 @@ function LeftStructureTree(props) {
return <span>{item}</span>
})
}
{type === 'post' &&
<span>{item.parentName}</span>
}
</div>
),
});
const notFoundContentNode = ()=>{
return <span>暂无数据</span>
}
const Complete = () => (
......@@ -62,21 +66,31 @@ function LeftStructureTree(props) {
dropdownClassName="certain-category-search-dropdown"
dropdownMatchSelectWidth={250}
allowClear
value={queryName}
onChange={getCompleteOptionData}
notFoundContent={notFoundContentNode()}
value={queryName}
open={open}
onFocus={()=>{setOpen(true)}}
onBlur={()=>{setOpen(false)}}
style={{
width: 250,
}}
options={completeOptions}
onSelect={confirmSearchSelect}
placeholder='搜索员工、部门'
>
<Input.Search size="large" placeholder="input here" enterButton />
</AutoComplete>
);
function confirmSearchSelect(value){
setOpen(false);
setQueryName(value);
props.searchUserList({queryName:value},treeType,1);
}
// 获取关键词的搜索结果
function getCompleteOptionData(value){
setQueryName(value)
setQueryName(value);
const params = {
depType:DepType[props.treeType],
queryName:value,
......@@ -91,10 +105,11 @@ function LeftStructureTree(props) {
const userObj = {};
const departmentGroupObj = {};
const postobj = {};
const {departmentUserVOList=[],departmentVOList=[]} = res.result;
if(departmentUserVOList.records.length>0){
const { result = {}} = res;
const {departmentUserVOList=[],departmentVOList=[],subLevelDepartmentVOList=[]} = result;
if(departmentUserVOList.length>0){
userObj.label=renderTitle('员工');
userObj.options=departmentUserVOList.records.map((item,index)=>{
userObj.options=departmentUserVOList.map((item,index)=>{
return renderItem(item,'user');
})
}
......@@ -107,7 +122,7 @@ function LeftStructureTree(props) {
departmentGroupObj.label=renderTitle('岗位组');
break;
case 'customGroupTab':
departmentGroupObj.label=renderTitle('自定义分组集合');
departmentGroupObj.label=renderTitle('分组集合');
break;
default:
break;
......@@ -116,33 +131,45 @@ function LeftStructureTree(props) {
return renderItem(item,'group');
})
}
if(subLevelDepartmentVOList.length>0){
switch (props.treeType){
case 'postGrouptab':
postobj.label=renderTitle('岗位');
break;
case 'customGroupTab':
postobj.label=renderTitle('分组');
break;
default:
break;
}
postobj.options=subLevelDepartmentVOList.map((item,index)=>{
return renderItem(item,'post');
})
}
if(Object.keys(userObj).length !==0){
_completeOptions.push(userObj);
}
if(Object.keys(departmentGroupObj).length !==0){
_completeOptions.push(departmentGroupObj);
}
console.log('_completeOptions',_completeOptions);
const options = [
{
label: renderTitle('Libraries'),
options: [renderItem({name:'张乐园'}, 'department')],
if(Object.keys(postobj).length !==0){
_completeOptions.push(postobj);
}
];
setCompleteOption(_completeOptions);
});
}
useEffect(()=>{
setQueryName(''); //切换tab时搜索置空
setCompleteOption([]);
setOpen(false); //切换tab时搜索的下拉框置为空
getTreeData().then((res)=>{
const _defaultSelectedKeys = [];
if(res.length > 0){
_defaultSelectedKeys.push(res[0].id);
setSelectedKeys(_defaultSelectedKeys);
setSelectDepParams(res[0]);
props.onChangeSelectDep(res[0])
props.searchUserList(res[0]);
props.searchUserList(res[0],treeType,1);
}
});
},[props.treeType]);
......@@ -152,9 +179,8 @@ function LeftStructureTree(props) {
},[]);
async function addCustomer(treeType,query){
console.log('quer +++ ',query);
await getTreeData(treeType);
props.searchUserList(query,treeType);
props.searchUserList(query,treeType,1);
}
function getTreeData(treeType){
return new Promise((resolve,reject)=>{
......@@ -356,9 +382,8 @@ function LeftStructureTree(props) {
const _selectKeys = [];
_selectKeys.push(e.selectedNodes[0].id)
setSelectedKeys(_selectKeys);
setSelectDepParams(e.selectedNodes[0]);
props.onChangeSelectDep(e.selectedNodes[0]);
props.searchUserList(e.selectedNodes[0]);
props.searchUserList(e.selectedNodes[0],treeType,1);
}
return (
......@@ -366,6 +391,21 @@ function LeftStructureTree(props) {
<div className="organization">
<div className="search-con">
<Complete/>
{/* <AutoComplete
allowClear
style={{
width: 250,
}}
onSearch={getCompleteOptionData}
placeholder="搜索员工、部门"
>
<Option><span>部门</span></Option>
{departmentUserResult.map((item) => (
<Option key={item.userName} value={item.userName}>
{email}
</Option>
))}
</AutoComplete> */}
</div>
{ (props.treeType==='postGrouptab' || props.treeType=== 'customGroupTab') && (
<div className="operate">
......
src/modules/college-manage/modal/NewChooseMembersModal.jsx
......@@ -5,7 +5,7 @@
*/
import React from 'react';
import { Modal, Input, message, Tooltip } from 'antd';
import { Modal, Input, message, Tooltip,AutoComplete} from 'antd';
import { XMTable } from '@/components';
import college from '@/common/lottie/college.json';
import Service from '@/common/js/service';
......@@ -13,6 +13,8 @@ import User from '@/common/js/user'
import SetEmployeeModal from "./SetEmployeeModal";
import search from '../../lottie/search/data.json';
import MemberTree from '../components/MemberTree'
import { DepType } from "@/domains/store-domain/constants";
import StoreService from "@/domains/store-domain/storeService";
import './ChooseMembersModal.less';
import _ from 'underscore';
......@@ -25,14 +27,15 @@ class NewChooseMembersModal extends React.Component {
selectUserList:[],
selectObject: {},
openSetModal: false,
visible:this.props.visible
visible:this.props.visible,
completeOptions:[],
queryName:'',
open:false
}
}
componentDidMount() {
}
handleClose = ()=>{
this.props.close()
}
......@@ -114,7 +117,6 @@ class NewChooseMembersModal extends React.Component {
_item.departmentId = this.props.selectDep.id;
_item.enterpriseVisibleUserId = item.enterpriseUserId;
}
return _item
})
const _params = {
......@@ -150,6 +152,113 @@ class NewChooseMembersModal extends React.Component {
}
})
}
renderTitle = (title) => {
return <span>{title}</span>
}
renderItem = (record,type) => ({
value: record.userName || record.name,
label: (
<div
style={{
display: 'flex',
justifyContent: 'space-between',
}}
>
{type === 'user'?
<div>{record.userName}</div>
:
<div>{record.name}</div>
}
{type === 'user' &&
record.postDepNamesList.map((item,index)=>{
return <span>{item}</span>
})
}
{type === 'post' &&
<span>{item.parentName}</span>
}
</div>
),
});
notFoundContentNode = ()=>{
return <span>暂无数据</span>
}
Complete = () =>{
const {open,completeOptions,queryName} = this.state;
return <AutoComplete
dropdownClassName="certain-category-search-dropdown"
dropdownMatchSelectWidth={250}
allowClear
onChange={(value)=>{this.getCompleteOptionData(value)}}
notFoundContent={()=>{this.notFoundContentNode()}}
value={queryName}
open={open}
onFocus={()=>{this.setState({open:true})}}
onBlur={()=>{this.setState({open:false})}}
style={{
width: 250,
}}
options={completeOptions}
onSelect={()=>this.confirmSearchSelect()}
placeholder='搜索员工、部门'
>
</AutoComplete>
}
getCompleteOptionData=(value)=>{
console.log('treeDepType',this.props.treeDepType);
this.setState({
queryName:value
})
const params = {
depType:this.props.treeDepType,
queryName:value,
enterpriseId:User.getEnterpriseId(),
source:0,//0代表来自企培
storeId:User.getStoreId(),
userId:User.getUserId(),
whetherCount:false
}
StoreService.getDepartmentUser(params).then((res) => {
const _completeOptions = [];
const userObj = {};
const departmentGroupObj = {};
const postobj = {};
const { result = {}} = res;
const {departmentUserVOList=[],departmentVOList=[]} = result;
if(departmentUserVOList.length>0){
userObj.label=this.renderTitle('员工');
userObj.options=departmentUserVOList.map((item,index)=>{
return this.renderItem(item,'user');
})
}
if(departmentVOList.length>0){
departmentGroupObj.label=this.renderTitle('部门');
departmentGroupObj.options=departmentVOList.map((item,index)=>{
return this.renderItem(item,'group');
})
}
if(Object.keys(userObj).length !==0){
_completeOptions.push(userObj);
}
if(Object.keys(departmentGroupObj).length !==0){
_completeOptions.push(departmentGroupObj);
}
this.setState({
completeOptions:_completeOptions
})
});
}
confirmSearchSelect=(value,option)=>{
this.setState({
open:false,
queryName:value
});
console.log()
// props.searchUserList({queryName:value},treeType,1);
}
render() {
const {type,treeDepType} = this.props;
......@@ -182,11 +291,12 @@ class NewChooseMembersModal extends React.Component {
<div className='member-container'>
<div className='container-left'>
<div className='container-left-body'>
<Search
{/* <Search
placeholder='搜索成员'
className='search search-input'
enterButton={<span className="icon iconfont">&#xe832;</span>}
/>
/> */}
{this.Complete()}
<div className='container-left-body-table'>
<MemberTree treeDepType={treeDepType} onSelect={(record)=>{this.treeSelect(record)}} selectUserList={selectUserList}/>
</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