feat:处理员工列表的搜索

82c574b0 · zhangleyuan · 3db3e5a0 · 82c574b0 · 82c574b0 · 82c574b0
Commit 82c574b0 authored Aug 01, 2021 by zhangleyuan
Showing with 188 additions and 31 deletions

src/modules/college-manage/components/DepartMentTabCon.jsx
+9 -2

src/modules/college-manage/components/LeftStructureTree.jsx
+62 -22

src/modules/college-manage/modal/NewChooseMembersModal.jsx
+117 -7

No files found.
--- a/src/modules/college-manage/components/DepartMentTabCon.jsx
+++ b/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;

--- a/src/modules/college-manage/components/LeftStructureTree.jsx
+++ b/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;
+      const { result = {}} = res;
-      if(departmentUserVOList.records.length>0){
+      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);
+      if(Object.keys(postobj).length !==0){
-      const options = [
+        _completeOptions.push(postobj);
-        {
-          label: renderTitle('Libraries'),
-          options: [renderItem({name:'张乐园'}, 'department')],
      }
-      ];
      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">

--- a/src/modules/college-manage/modal/NewChooseMembersModal.jsx
+++ b/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>