Skip to content

X
xiaomai-cloud-class-web
Commit 090763d8 by yuananting
Options

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

parent 254df036
Showing with 321 additions and 130 deletions
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) => {
item.nickName = item.storeUserName;
item.userId = item.storeUserId;
const _assignList = assignList.map((item) => {
item.checkedId = item.assignId;
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 = [
{
assignId: '1379762403510968321',
assignType: 'CUSTOM',
},
];
// const _assignList = assignList((item) => {
// if (item.depType === 'DEP_CUSTOM') {
// // item.
// }
// });
// console.log(assignList);
const _assignList = assignList.map((item) => {
return {
assignId: item.checkedId,
assignType: item.assignType,
};
});
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) {
// return message.warning('请选择指派对象');
// }
if (assignList.length === 0) {
return message.warning('请选择指派对象');
}
if (stageList.length === 0) {
return message.warning('请添加阶段');
}
......
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 && (
<Space size={'12'} direction={'vertical'} className='select-obj'>
{assignList.length > 0 && (
<Space size={'12'} direction={'vertical'} className='select-obj'>
{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.name}
<Tag key={tag.checkedId} onClose={() => removeCheckedAssignor(tag)} closable>
<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.name}
<Tag key={tag.checkedId} onClose={() => removeCheckedAssignor(tag)} closable>
<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>
);
})}
......
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 { XMTable } from '@/components';
// import college from '@/common/lottie/college.json';
// import Service from '@/common/js/service';
import { Modal, Tree, Tooltip, AutoComplete, Tabs } from 'antd';
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;
if (item.depLevel === 0) {
item.title = '';
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;
handleStructureData(item.sonDepartmentVOList);
item.children = [...item.children, ...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 _checkedAssignorKeys = _checkedAssignorList.map((item) => item.id);
const _checkedAssignorList = checkedAssignorList.filter((innerItem) => innerItem.checkedId !== item.checkedId);
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
placeholder='搜索学员、部门'
// value={searchKey}
// onChange={(e) => setSearchKey(e.target.value.trim())}
className='search search-input'
enterButton={<span className='icon iconfont'>&#xe832;</span>}
/>
{/* <AutoComplete
dropdownClassName='certain-category-search-dropdown'
dropdownMatchSelectWidth={272}
allowClear
onChange={(value) => setSearchKey(value)}
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) ? (
<div>
<span className='icon iconfont title-icon'>&#xe604;</span>
</div>
<div className='item-title'>
{activeKey === 'departMentTab' ? (
<span>
<WWOpenDataCom type='departmentName' openid={nodeData.name} />
</span>
</div>
) : (
<span>{nodeData.name}</span>
)}
<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>
<Tooltip title={item.name}>
<span className='name-text'>{item.name}</span>
{[0, 1].indexOf(item.depLevel) === -1 ? (
<div>
<span className='icon iconfont title-icon'>&#xe603;</span>
<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;
......
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;
seletedCollaboratorList.map((childItem) => {
if (item.id === childItem.id) {
item.checked = true;
}
return childItem;
});
item.checkedName = item.nickName;
item.checkedId = item.userId;
item.checked = checkedCollaboratorKeys.includes(item.checkedId);
return item;
});
if (props.currentCollaboratorList.length === records.length) {
setAllChecked(true);
}
const checkedEmployeeList = records.filter((item) => item.checked);
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);
_seletedCollaboratorList = seletedCollaboratorList.filter((item) => {
return removeIds.indexOf(item.id) < 0;
const removeIds = _employeeList.map((item) => item.checkedId);
_checkedCollaboratorList = checkedCollaboratorList.filter((item) => {
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>
......
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