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 && (
-            <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 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
--- 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>