Skip to content

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

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

parent 254df036
Showing with 94 additions and 88 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/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