feat:新建培训任务选择指派学员和协同人员

090763d8 · yuananting · 254df036 · 090763d8 · 090763d8 · 090763d8
Commit 090763d8 authored Aug 12, 2021 by yuananting
4 changed files
--- a/src/modules/task-center/train-task/AddTrainTask.jsx
+++ b/src/modules/task-center/train-task/AddTrainTask.jsx
@@ -2,13 +2,13 @@
 * @Author: yuananting
 * @Date: 2021-07-29 13:57:03
 * @LastEditors: yuananting
- * @LastEditTime: 2021-08-11 12:46:17
+ * @LastEditTime: 2021-08-12 11:58:16
 * @Description: 任务中心-培训任务-新建页面
 * @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
 * @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
 */
 import React, { useEffect, useState, useRef } from 'react';
-import { Button, message, Modal, Space } from 'antd';
+import { Button, message } from 'antd';
 import ShowTips from '@/components/ShowTips';
 import Breadcrumbs from '@/components/Breadcrumbs';
 import BasicInfo from './components/BasicInfo';
@@ -53,7 +53,6 @@ const DEFAULT_FINISH_STANDARD = {
 function AddTrainTask() {
  const type = getParameterByName('type');
  const taskId = getParameterByName('taskId');
-  const taskState = getParameterByName('taskState');
  const [activeStep, setActiveStep] = useState('BASIC_INFO');
  const [basicInfo, setBasicInfo] = useState(DEFAULT_BASIC_INFO);
@@ -88,9 +87,8 @@ function AddTrainTask() {
          },
        } = res;
-        const _helpStoreUserIds = helpStoreUsers.map((item) => {
+        const _assignList = assignList.map((item) => {
-          item.nickName = item.storeUserName;
+          item.checkedId = item.assignId;
-          item.userId = item.storeUserId;
          return item;
        });
@@ -98,7 +96,14 @@ function AddTrainTask() {
        const coverUrl = coverInfo ? coverInfo.mediaUrl : defaultCover;
        const coverId = coverInfo ? coverInfo.mediaContent : null;
+        const _helpStoreUserIds = helpStoreUsers.map((item) => {
+          item.checkedName = item.storeUserName;
+          item.checkedId = item.storeUserId;
+          return item;
+        });
        const ITEM_BASIC_INFO = {
+          assignList: _assignList,
          taskName,
          coverUrl,
          coverId,
@@ -107,7 +112,6 @@ function AddTrainTask() {
          startTime,
          endTime,
          learnType,
-          assignList,
          // introduce: null, // 培训目的
        };
@@ -161,7 +165,7 @@ function AddTrainTask() {
  // 确认保存新建
  function submitRemote(introduceId, issue) {
-    const { endTime, helpStoreUserIds, learnType, startTime, taskName, timeType, coverId, coverUrl } = basicInfo;
+    const { assignList, endTime, helpStoreUserIds, learnType, startTime, taskName, timeType, coverId, coverUrl } = basicInfo;
    const { percentCompleteLive, percentCompletePicture, percentCompleteVideo } = finishStandard;
@@ -178,21 +182,15 @@ function AddTrainTask() {
      return item.userId;
    });
-    const assignList = [
+    const _assignList = assignList.map((item) => {
-      {
+      return {
-        assignId: '1379762403510968321',
+        assignId: item.checkedId,
-        assignType: 'CUSTOM',
+        assignType: item.assignType,
-      },
+      };
-    ];
+    });
-    // const _assignList = assignList((item) => {
-    //   if (item.depType === 'DEP_CUSTOM') {
-    //     // item.
-    //   }
-    // });
-    // console.log(assignList);
    const commonParams = {
-      assignList,
+      assignList: _assignList,
      createId: User.getStoreUserId(),
      endTime,
      helpStoreUserIds: _helpStoreUserIds, // 协同者集合
@@ -219,11 +217,6 @@ function AddTrainTask() {
      trainingStageList: _stageList,
    };
-    // if (type === 'edit' && timeType === 'FOREVER') {
-    //   delete commonParams.startTime;
-    //   delete commonParams.endTime;
-    // }
    if (type === 'edit') {
      TaskCenterService.updateTrainingTask({ ...commonParams, id: taskId }).then((res) => {
        message.success('保存成功');
@@ -244,14 +237,13 @@ function AddTrainTask() {
    setStartCheck(true);
    const { taskName, assignList } = basicInfo;
    const { percentCompleteLive, percentCompleteVideo, percentCompletePicture } = finishStandard;
-    console.log(percentCompleteLive, percentCompleteVideo, percentCompletePicture);
    if (!taskName) {
      return message.warning('请输入培训任务名称');
    }
-    // if (assignList.length === 0) {
+    if (assignList.length === 0) {
-    //   return message.warning('请选择指派对象');
+      return message.warning('请选择指派对象');
-    // }
+    }
    if (stageList.length === 0) {
      return message.warning('请添加阶段');
    }

--- a/src/modules/task-center/train-task/components/BasicInfo.jsx
+++ b/src/modules/task-center/train-task/components/BasicInfo.jsx
@@ -2,7 +2,7 @@
 * @Author: yuananting
 * @Date: 2021-07-29 14:32:24
 * @LastEditors: yuananting
- * @LastEditTime: 2021-08-11 10:20:33
+ * @LastEditTime: 2021-08-12 10:43:27
 * @Description: 任务中心-培训任务-新建-基本信息
 * @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
 * @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
@@ -29,6 +29,9 @@ function BasicInfo(props) {
  const { basicInfo, startCheck } = props;
  const { taskName, coverUrl, helpStoreUserIds, timeType, startTime, endTime, learnType, assignList, introduce } = basicInfo;
+  console.log(assignList);
+  const depAssignList = assignList.filter((item) => [0, 1].includes(item.depLevel));
+  const userAssignList = assignList.filter((item) => ![0, 1].includes(item.depLevel));
  const [imageFile, setImageFile] = useState(null); // 需要被截取的图片
  const [showSelectFileModal, setShowSelectFileModal] = useState(false);
  const [imgClipVisible, setImgClipVisible] = useState(false);
@@ -105,12 +108,12 @@ function BasicInfo(props) {
  }
  function removeSelectedCollaborator(tag) {
-    const _helpStoreUserIds = helpStoreUserIds.filter((item) => item.userId !== tag);
+    const _helpStoreUserIds = helpStoreUserIds.filter((item) => item.checkedId !== tag.checkedId);
    props.onChange('helpStoreUserIds', _helpStoreUserIds);
  }
  function removeCheckedAssignor(tag) {
-    const _assignList = assignList.filter((item) => item.id !== tag.id);
+    const _assignList = assignList.filter((item) => item.checkedId !== tag.checkedId);
    props.onChange('assignList', _assignList);
  }
@@ -249,30 +252,30 @@ function BasicInfo(props) {
            }}>
            添加指派对象
          </Button>
-          {/* {assignList.length > 0 && (
+          {assignList.length > 0 && (
            <Space size={'12'} direction={'vertical'} className='select-obj'>
-              {assignList.length > 0 && (
+              {depAssignList.length > 0 && (
                <div className='obj-type-container'>
                  <div className='type-title'>已选组织：</div>
                  <div className='tag-box'>
-                    {_.map(assignList, (tag) => {
+                    {_.map(depAssignList, (tag) => {
                      return (
-                        <Tag key={tag.id} onClose={() => removeCheckedAssignor(tag)} closable>
+                        <Tag key={tag.checkedId} onClose={() => removeCheckedAssignor(tag)} closable>
-                          {tag.name}
+                          <WWOpenDataCom type='departmentName' openid={tag.name} />
                        </Tag>
                      );
                    })}
                  </div>
                </div>
              )}
-              {assignList.length > 0 && (
+              {userAssignList.length > 0 && (
                <div className='obj-type-container'>
                  <div className='type-title'>已选学员：</div>
                  <div className='tag-box'>
-                    {_.map(assignList, (tag) => {
+                    {_.map(userAssignList, (tag) => {
                      return (
-                        <Tag key={tag.id} onClose={() => removeCheckedAssignor(tag)} closable>
+                        <Tag key={tag.checkedId} onClose={() => removeCheckedAssignor(tag)} closable>
-                          {tag.name}
+                          <WWOpenDataCom type='userName' openid={tag.userName} />
                        </Tag>
                      );
                    })}
@@ -280,7 +283,7 @@ function BasicInfo(props) {
                </div>
              )}
            </Space>
-          )} */}
+          )}
        </FormItem>
        <FormItem
          label={
@@ -313,7 +316,7 @@ function BasicInfo(props) {
              {_.map(helpStoreUserIds, (tag) => {
                return (
                  <Tag key={tag.userId} onClose={() => removeSelectedCollaborator(tag)} closable>
-                    <WWOpenDataCom type='userName' openid={tag.nickName} />
+                    <WWOpenDataCom type='userName' openid={tag.checkedName} />
                  </Tag>
                );
              })}

--- a/src/modules/task-center/train-task/modal/ChooseAssignorModal.jsx
+++ b/src/modules/task-center/train-task/modal/ChooseAssignorModal.jsx
@@ -2,29 +2,19 @@
 * @Author: yuananting
 * @Date: 2021-08-05 17:09:36
 * @LastEditors: yuananting
- * @LastEditTime: 2021-08-10 20:21:36
+ * @LastEditTime: 2021-08-12 11:53:59
 * @Description: 新建培训任务-选择指派对象
 * @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
 * @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
 */
 import React, { useState, useEffect } from 'react';
-import { Modal, Input, Tree, Dropdown, Tooltip, AutoComplete, Tabs } from 'antd';
+import { Modal, Tree, Tooltip, AutoComplete, Tabs } from 'antd';
-import { XMTable } from '@/components';
-// import college from '@/common/lottie/college.json';
-// import Service from '@/common/js/service';
 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 SearchUser from '../components/SearchUser';
 import WWOpenDataCom from '@/components/WWOpenDataCom';
 import './ChooseAssignorModal.less';
-import Item from 'antd/lib/list/Item';
-// import _ from 'underscore';
-const { Search } = Input;
 const { TabPane } = Tabs;
 const { DirectoryTree } = Tree;
@@ -32,58 +22,90 @@ function ChooseAssignorModal(props) {
  const [structureData, setStructureData] = useState([]);
  const [activeKey, setActiveKey] = useState('departMentTab');
  const [checkedAssignorList, setCheckedAssignorList] = useState(props.currentAssignorList || []); // 勾选的指派对象
-  const [checkedAssignorKeys, setCheckedAssignorKeys] = useState(props.currentAssignorList.map((item) => item.id) || []);
+  const [checkedAssignorKeys, setCheckedAssignorKeys] = useState(props.currentAssignorList.map((item) => item.checkedId) || []);
+  const [completeOptions, setCompleteOption] = useState([]);
+  const [searchKey, setSearchKey] = useState('');
+  const [open, setOpen] = useState(false);
+  const AssignTypeEnum = {
+    departMentTab: 'SECTION',
+    postGrouptab: 'POST',
+    customGroupTab: 'CUSTOM',
+  };
  useEffect(() => {
    getStructureData();
  }, [activeKey]);
  function getStructureData() {
    const params = {
-      departmentTypeEnum: DepType[activeKey],
+      depType: DepType[activeKey],
      enterpriseId: User.getEnterpriseId(),
-      source: 0, // 0代表来自企培
+      source: 0, //0代表来自企培
      storeId: User.getStoreId(),
      userId: User.getUserId(),
      whetherCount: false,
+      distinct: false,
+      queryType: 'CUSTOMER',
    };
-    StoreService.queryDepartmentTree(params).then((res) => {
+    StoreService.getDepartmentUserNotPage(params).then((res) => {
      const { result = [] } = res;
-      setStructureData(handleStructureData(result));
+      const structureData = handleStructureData(result.departmentVOList);
+      const checkedKeys = checkedAssignorList.map((item) => item.checkedId);
+      setStructureData(structureData);
+      setCheckedAssignorKeys(checkedKeys);
    });
  }
  function handleStructureData(dataArray) {
    const _dataArray = dataArray.map((item, index) => {
-      item.key = item.id;
+      item.title = '';
-      if (item.depLevel === 0) {
+      item.checkedId = [0, 1].includes(item.depLevel) ? item.id : item.userId;
+      item.key = item.checkedId;
+      item.children = [];
+      if (activeKey !== 'departMentTab' && item.depLevel === 0) {
        item.disableCheckbox = true;
      }
+      item.assignType = [0, 1].includes(item.depLevel) ? AssignTypeEnum[activeKey] : 'CUSTOMER';
+      if (item.departmentUserVOList) {
+        item.children = item.departmentUserVOList;
+      }
      if (item.sonDepartmentVOList) {
-        item.children = item.sonDepartmentVOList;
+        item.children = [...item.children, ...item.sonDepartmentVOList];
-        handleStructureData(item.sonDepartmentVOList);
+      }
+      if (item.children.length > 0) {
+        handleStructureData(item.children);
+      } else {
+        delete item.children;
      }
      return item;
    });
    return _dataArray;
  }
  function onCheckAssignor(key, e) {
    const { node, checked } = e;
    let _checkedAssignorList = [...checkedAssignorList];
    if (checked) {
      _checkedAssignorList.push(node);
    } else {
-      _checkedAssignorList = checkedAssignorList.filter((item) => item.id !== node.id);
+      _checkedAssignorList = _checkedAssignorList.filter((item) => {
+        return item.checkedId !== node.checkedId;
+      });
    }
-    const _checkedAssignorKeys = _checkedAssignorList.map((item) => item.id);
+    const _checkedAssignorKeys = _checkedAssignorList.map((item) => item.checkedId);
    setCheckedAssignorKeys(_checkedAssignorKeys);
    setCheckedAssignorList(_checkedAssignorList);
  }
  function removeCheckedAssignor(item) {
-    const _checkedAssignorList = checkedAssignorList.filter((innerItem) => innerItem.id !== item.id);
+    const _checkedAssignorList = checkedAssignorList.filter((innerItem) => innerItem.checkedId !== item.checkedId);
-    const _checkedAssignorKeys = _checkedAssignorList.map((item) => item.id);
+    const _checkedAssignorKeys = _checkedAssignorList.map((item) => item.checkedId);
    setCheckedAssignorKeys(_checkedAssignorKeys);
    setCheckedAssignorList(_checkedAssignorList);
  }
@@ -93,10 +115,142 @@ function ChooseAssignorModal(props) {
    setCheckedAssignorList([]);
  }
+  function renderTitle(title) {
+    return <span>{title}</span>;
+  }
+  function renderItem(record, type) {
+    return {
+      value: record.userName || record.name,
+      label: (
+        <div
+          style={{
+            display: 'flex',
+            justifyContent: 'space-between',
+          }}
+          depId={record.id}
+          type={type}>
+          {type === 'user' ? (
+            <div>
+              <WWOpenDataCom type='userName' openid={record.userName} />
+            </div>
+          ) : (
+            <div>
+              <WWOpenDataCom type='departmentName' openid={record.name} />
+            </div>
+          )}
+          {type === 'user' &&
+            record.postDepNamesList.map((item, index) => {
+              return (
+                <span>
+                  <WWOpenDataCom type='departmentName' openid={item} />
+                </span>
+              );
+            })}
+          {type === 'post' && (
+            <span type='post' openid={record.parentName}>
+              {record.parentName}
+            </span>
+          )}
+        </div>
+      ),
+    };
+  }
+  function getCompleteOptionData(value) {
+    setCompleteOption([]);
+    const params = {
+      depType: DepType[props.treeType],
+      queryName: value,
+      enterpriseId: User.getEnterpriseId(),
+      source: 0, //0代表来自企培
+      storeId: User.getStoreId(),
+      userId: User.getUserId(),
+      whetherCount: false,
+      distinct: false,
+      queryType: 'CUSTOMER',
+    };
+    StoreService.getDepartmentUser(params).then((res) => {
+      const _completeOptions = [];
+      const userObj = {};
+      const departmentGroupObj = {};
+      const postobj = {};
+      const { result = {} } = res;
+      const { departmentUserVOList = [], departmentVOList = [], subLevelDepartmentVOList = [] } = result;
+      if (departmentUserVOList.length > 0) {
+        userObj.label = renderTitle('学员');
+        userObj.options = departmentUserVOList.map((item, index) => {
+          return renderItem(item, 'user');
+        });
+      }
+      if (departmentVOList.length > 0) {
+        switch (props.treeType) {
+          case 'departMentTab':
+            departmentGroupObj.label = renderTitle('部门');
+            break;
+          case 'postGrouptab':
+            departmentGroupObj.label = renderTitle('岗位组');
+            break;
+          case 'customGroupTab':
+            departmentGroupObj.label = renderTitle('分组集合');
+            break;
+          default:
+            break;
+        }
+        departmentGroupObj.options = departmentVOList.map((item, index) => {
+          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);
+      }
+      if (Object.keys(postobj).length !== 0) {
+        _completeOptions.push(postobj);
+      }
+      setCompleteOption(_completeOptions);
+    });
+  }
+  function handlePlaceHolder() {
+    let placeholder = '';
+    switch (props.treeType) {
+      case 'departMentTab':
+        placeholder = '搜索学员姓名、部门';
+        break;
+      case 'postGrouptab':
+        placeholder = '搜索学员姓名/岗位/岗位组';
+        break;
+      case 'customGroupTab':
+        placeholder = '搜索学员姓名/自定义分组集合/自定义分组';
+        break;
+      default:
+        break;
+    }
+    return placeholder;
+  }
  return (
    <Modal
      className='choose-assignor-modal'
-      title='添加指派对象'
+      title='添加指派学员'
      visible={true}
      onCancel={props.onClose}
      onOk={() => {
@@ -107,13 +261,29 @@ function ChooseAssignorModal(props) {
      maskClosable={false}>
      <div className='assignor-container'>
        <div className='left-list'>
-          <Search
+          {/* <AutoComplete
-            placeholder='搜索学员、部门'
+            dropdownClassName='certain-category-search-dropdown'
-            // value={searchKey}
+            dropdownMatchSelectWidth={272}
-            // onChange={(e) => setSearchKey(e.target.value.trim())}
+            allowClear
-            className='search search-input'
+            onChange={(value) => setSearchKey(value)}
-            enterButton={<span className='icon iconfont'>&#xe832;</span>}
+            onSearch={(value) => {
-          />
+              getCompleteOptionData(value);
+            }}
+            // notFoundContent={notFoundContentNode()}
+            value={searchKey}
+            open={open}
+            onFocus={() => {
+              setOpen(true);
+            }}
+            onBlur={() => {
+              setOpen(false);
+            }}
+            style={{
+              width: 272,
+            }}
+            options={completeOptions}
+            // onSelect={confirmSearchSelect}
+            placeholder={handlePlaceHolder()}></AutoComplete> */}
          <div className='data-body'>
            <Tabs size={'small'} onChange={(key) => setActiveKey(key)}>
              <TabPane key='departMentTab' tab='部门'></TabPane>
@@ -124,6 +294,7 @@ function ChooseAssignorModal(props) {
              <DirectoryTree
                defaultExpandAll
                checkable
+                checkStrictly
                showIcon={false}
                treeData={structureData}
                checkedKeys={checkedAssignorKeys}
@@ -131,18 +302,21 @@ function ChooseAssignorModal(props) {
                titleRender={(nodeData) => {
                  return (
                    <div className='node-title-div'>
-                      <div className='item-icon'>
+                      {[0, 1].includes(nodeData.depLevel) ? (
-                        <span className='icon iconfont title-icon'>&#xe604;</span>
+                        <div>
-                      </div>
+                          <span className='icon iconfont title-icon'>&#xe604;</span>
-                      <div className='item-title'>
-                        {activeKey === 'departMentTab' ? (
                          <span>
                            <WWOpenDataCom type='departmentName' openid={nodeData.name} />
                          </span>
-                        ) : (
+                        </div>
-                          <span>{nodeData.name}</span>
+                      ) : (
-                        )}
+                        <div>
-                      </div>
+                          <span className='icon iconfont title-icon'>&#xe603;</span>
+                          <span>
+                            <WWOpenDataCom type='userName' openid={nodeData.userName} />
+                          </span>
+                        </div>
+                      )}
                    </div>
                  );
                }}
@@ -162,10 +336,21 @@ function ChooseAssignorModal(props) {
              return (
                <div className='selected-item'>
                  <span className='item-name'>
-                    <span className='icon iconfont avatar-icon'>&#xe84a;</span>
+                    {[0, 1].indexOf(item.depLevel) === -1 ? (
-                    <Tooltip title={item.name}>
+                      <div>
-                      <span className='name-text'>{item.name}</span>
+                        <span className='icon iconfont title-icon'>&#xe603;</span>
-                    </Tooltip>
+                        <Tooltip title={<WWOpenDataCom type='userName' openid={item.userName} />}>
+                          <WWOpenDataCom type='userName' openid={item.userName} />
+                        </Tooltip>
+                      </div>
+                    ) : (
+                      <div>
+                        <span className='icon iconfont title-icon'>&#xe604;</span>
+                        <Tooltip title={<WWOpenDataCom type='departmentName' openid={item.userName} />}>
+                          <WWOpenDataCom type='departmentName' openid={item.name} />
+                        </Tooltip>
+                      </div>
+                    )}
                  </span>
                  <span className='icon iconfont clear-icon' onClick={() => removeCheckedAssignor(item)}>
                    &#xe717;

--- a/src/modules/task-center/train-task/modal/ChooseCollaboratorModal.jsx
+++ b/src/modules/task-center/train-task/modal/ChooseCollaboratorModal.jsx
@@ -22,7 +22,8 @@ const { Search } = Input;
 function ChooseCollaboratorModal(props) {
  const [searchKey, setSearchKey] = useState(''); // 搜索内容
  const [employeeList, setEmployeeList] = useState([]); // 员工列表
-  const [seletedCollaboratorList, setSeletedCollaboratorList] = useState(props.currentCollaboratorList || []); // 勾选的协同人员
+  const [checkedCollaboratorList, setCheckedCollaboratorList] = useState(props.currentCollaboratorList || []); // 勾选的协同人员
+  const [checkedCollaboratorKeys, setCheckedCollaboratorKeys] = useState(props.currentCollaboratorList.map((item) => item.checkedId) || []);
  const [allChecked, setAllChecked] = useState(false);
  useEffect(() => {
@@ -40,19 +41,15 @@ function ChooseCollaboratorModal(props) {
    StoreService.getEmployeeList(params).then((res) => {
      const { records } = res.result;
      records.map((item) => {
-        item.checked = false;
+        item.checkedName = item.nickName;
-        seletedCollaboratorList.map((childItem) => {
+        item.checkedId = item.userId;
-          if (item.id === childItem.id) {
+        item.checked = checkedCollaboratorKeys.includes(item.checkedId);
-            item.checked = true;
-          }
-          return childItem;
-        });
        return item;
      });
-      if (props.currentCollaboratorList.length === records.length) {
+      const checkedEmployeeList = records.filter((item) => item.checked);
-        setAllChecked(true);
+      const _checkedAll = records.length === checkedEmployeeList.length;
-      }
      setEmployeeList(records);
+      setAllChecked(_checkedAll);
    });
  }
@@ -70,79 +67,93 @@ function ChooseCollaboratorModal(props) {
    });
  }
-  function handleSeletedCollaborator(e) {
+  function handleCheckedCollaborator(e) {
    const { value, checked } = e.target;
-    let _seletedCollaboratorList = [...seletedCollaboratorList];
+    let _checkedCollaboratorList = [...checkedCollaboratorList];
    let _employeeList = [];
    if (checked) {
      _employeeList = employeeList.map((item) => {
-        if (item.id === value.id) {
+        if (item.checkedId === value.checkedId) {
          item.checked = true;
        }
        return item;
      });
-      _seletedCollaboratorList.push({ ...value, checked: true });
+      _checkedCollaboratorList.push({ ...value, checked: true });
    } else {
      _employeeList = employeeList.map((item) => {
-        if (item.id === value.id) {
+        if (item.checkedId === value.checkedId) {
          item.checked = false;
        }
        return item;
      });
-      _seletedCollaboratorList = seletedCollaboratorList.filter((item) => item.id !== value.id);
+      _checkedCollaboratorList = checkedCollaboratorList.filter((item) => item.checkedId !== value.checkedId);
    }
+    const _checkedCollaboratorKeys = _checkedCollaboratorList.map((item) => item.checkedId);
+    const checkedEmployeeList = _employeeList.filter((item) => item.checked);
+    const _checkedAll = employeeList.length === checkedEmployeeList.length;
    setEmployeeList(_employeeList);
-    setSeletedCollaboratorList(_seletedCollaboratorList);
+    setCheckedCollaboratorList(_checkedCollaboratorList);
+    setCheckedCollaboratorKeys(_checkedCollaboratorKeys);
+    setAllChecked(_checkedAll);
  }
-  function removeSelectedCollaborator(record) {
+  function removeCheckedCollaborator(record) {
    const _employeeList = employeeList.map((item) => {
-      if (item.id === record.id) {
+      if (item.checkedId === record.checkedId) {
        item.checked = false;
      }
      return item;
    });
-    const _seletedCollaboratorList = seletedCollaboratorList.filter((item) => item.id !== record.id);
+    const _checkedCollaboratorList = checkedCollaboratorList.filter((item) => item.checkedId !== record.checkedId);
+    const _checkedCollaboratorKeys = _checkedCollaboratorList.map((item) => item.checkedId);
+    const checkedEmployeeList = _employeeList.filter((item) => item.checked);
+    const _checkedAll = employeeList.length === checkedEmployeeList.length;
+    setAllChecked(_checkedAll);
+    setCheckedCollaboratorList(_checkedCollaboratorList);
+    setCheckedCollaboratorKeys(_checkedCollaboratorKeys);
    setEmployeeList(_employeeList);
-    setSeletedCollaboratorList(_seletedCollaboratorList);
  }
-  function clearSelectedCollaborator() {
+  function clearCheckedCollaborator() {
    const _employeeList = employeeList.map((item) => {
      item.checked = false;
      return item;
    });
    setEmployeeList(_employeeList);
-    setSeletedCollaboratorList([]);
+    setCheckedCollaboratorList([]);
+    setCheckedCollaboratorKeys([]);
    setAllChecked(false);
-    props.onConfirm([]);
  }
-  function handleSeletedAll(e) {
+  function handleCheckedAll(e) {
    let _employeeList = [];
-    let _seletedCollaboratorList = [];
+    let _checkedCollaboratorList = [];
    if (e.target.checked) {
      _employeeList = employeeList.map((item) => {
        item.checked = true;
        return item;
      });
-      _seletedCollaboratorList = seletedCollaboratorList.concat([..._employeeList]);
+      const filterList = employeeList.filter((item) => {
+        return !checkedCollaboratorKeys.includes(item.checkedId);
+      });
+      _checkedCollaboratorList = checkedCollaboratorList.concat([...filterList]);
    } else {
      _employeeList = employeeList.map((item) => {
        item.checked = false;
        return item;
      });
-      const removeIds = _employeeList.map((item) => item.id);
+      const removeIds = _employeeList.map((item) => item.checkedId);
-      _seletedCollaboratorList = seletedCollaboratorList.filter((item) => {
+      _checkedCollaboratorList = checkedCollaboratorList.filter((item) => {
-        return removeIds.indexOf(item.id) < 0;
+        return !removeIds.includes(item.checkedId);
      });
    }
+    const _checkedCollaboratorKeys = _checkedCollaboratorList.map((item) => item.checkedId);
    setEmployeeList(_employeeList);
-    setSeletedCollaboratorList(_seletedCollaboratorList);
+    setCheckedCollaboratorList(_checkedCollaboratorList);
+    setCheckedCollaboratorKeys(_checkedCollaboratorKeys);
    setAllChecked(e.target.checked);
  }
@@ -153,7 +164,7 @@ function ChooseCollaboratorModal(props) {
      visible={true}
      onCancel={props.onClose}
      onOk={() => {
-        props.onConfirm(seletedCollaboratorList);
+        props.onConfirm(checkedCollaboratorList);
        props.onClose();
      }}
      width={680}
@@ -171,20 +182,20 @@ function ChooseCollaboratorModal(props) {
          <div className='data-body'>
            <List
              header={
-                <Checkbox checked={allChecked} onChange={handleSeletedAll}>
+                <Checkbox checked={allChecked} onChange={handleCheckedAll}>
                  全部
                </Checkbox>
              }
              dataSource={employeeList}
              renderItem={(item, index) => (
                <List.Item>
-                  <Checkbox checked={item.checked} value={item} key={item.id} onChange={handleSeletedCollaborator}>
+                  <Checkbox checked={item.checked} value={item} key={item.checkedId} onChange={handleCheckedCollaborator}>
                    <div className='employee-item'>
                      <span className='user-name'>
                        <span className='icon iconfont avatar-icon'>&#xe84a;</span>
-                        <Tooltip title={<WWOpenDataCom type='userName' openid={item.nickName} />}>
+                        <Tooltip title={<WWOpenDataCom type='userName' openid={item.checkedName} />}>
                          <span className='user-name'>
-                            <WWOpenDataCom type='userName' openid={item.nickName} />
+                            <WWOpenDataCom type='userName' openid={item.checkedName} />
                          </span>
                        </Tooltip>
                      </span>
@@ -199,23 +210,23 @@ function ChooseCollaboratorModal(props) {
        <div className='right-list'>
          <div className='header-line'>
            <span className='tip-text'>已选择</span>
-            <span className='clear-btn' onClick={clearSelectedCollaborator}>
+            <span className='clear-btn' onClick={clearCheckedCollaborator}>
              清空
            </span>
          </div>
          <div className='data-body'>
-            {seletedCollaboratorList.map((item, index) => {
+            {checkedCollaboratorList.map((item, index) => {
              return (
                <div className='selected-item'>
                  <span className='item-name'>
                    <span className='icon iconfont avatar-icon'>&#xe84a;</span>
-                    <Tooltip title={<WWOpenDataCom type='userName' openid={item.nickName} />}>
+                    <Tooltip title={<WWOpenDataCom type='userName' openid={item.checkedName} />}>
                      <span className='name-text'>
-                        <WWOpenDataCom type='userName' openid={item.nickName} />
+                        <WWOpenDataCom type='userName' openid={item.checkedName} />
                      </span>
                    </Tooltip>
                  </span>
-                  <span className='icon iconfont clear-icon' onClick={() => removeSelectedCollaborator(item)}>
+                  <span className='icon iconfont clear-icon' onClick={() => removeCheckedCollaborator(item)}>
                    &#xe717;
                  </span>
                </div>