fix:合并任务中心代码

src/common/less/icon-font.less

 @font-face {
 @font-face {
   font-family: 'iconfont'; /* Project id 2223403 */
   font-family: 'iconfont'; /* Project id 2223403 */
-  src: url('//at.alicdn.com/t/font_2223403_7261tsts1dc.woff2?t=1628475376853') format('woff2'),
-       url('//at.alicdn.com/t/font_2223403_7261tsts1dc.woff?t=1628475376853') format('woff'),
-       url('//at.alicdn.com/t/font_2223403_7261tsts1dc.ttf?t=1628475376853') format('truetype');
+  src: url('//at.alicdn.com/t/font_2223403_2digpsfgq8l.woff2?t=1628853864698') format('woff2'),
+    url('//at.alicdn.com/t/font_2223403_2digpsfgq8l.woff?t=1628853864698') format('woff'),
+    url('//at.alicdn.com/t/font_2223403_2digpsfgq8l.ttf?t=1628853864698') format('truetype');
 }
 }
 .iconfont {
 .iconfont {
   font-family: 'iconfont' !important;
   font-family: 'iconfont' !important;

src/components/RichText.jsx

+import React, { useState, useEffect } from 'react';
+
+export default function RichText(props) {
+    const [text, setText] = useState('')
+
+    useEffect(() => {
+        console.log(props.url,'props.urlprops.url')
+        if (props.url) {
+            fetch(props.url, { method: 'GET' }).then((response) => {
+                return response.text();
+            }).then((res) => {
+                setText(res)
+            })
+        }
+
+    }, [props.url])
+
+    return   <div className="text" style={{ wordBreak: 'break-all' }} dangerouslySetInnerHTML={{ __html: text }}></div>
+
+}
\ No newline at end of file

src/components/XMTable.jsx

@@ -2,10 +2,14 @@ import React, { useEffect, useState } from 'react';
 import { Empty, ConfigProvider, Table } from 'antd';
 import { Empty, ConfigProvider, Table } from 'antd';
 import Lottie from 'react-lottie';
 import Lottie from 'react-lottie';
 import * as nodata from '../modules/lottie/nodata/data.json';
 import * as nodata from '../modules/lottie/nodata/data.json';
+import college from '@/common/lottie/college';
 
 
 function XMTable(props) {
 function XMTable(props) {
   const [empty, setEmpty] = useState(props.renderEmpty || {});
   const [empty, setEmpty] = useState(props.renderEmpty || {});
   const [data, setData] = useState({});
   const [data, setData] = useState({});
+  const imgType = {
+    college
+  }
 
 
   useEffect(() => {
   useEffect(() => {
     setEmpty(props.renderEmpty || {})
     setEmpty(props.renderEmpty || {})
@@ -17,7 +21,7 @@ function XMTable(props) {
     const defaultOptions = {
     const defaultOptions = {
       loop: true,
       loop: true,
       autoplay: true,
       autoplay: true,
-      animationData: empty.image || nodata,
+      animationData: empty.image || imgType[props?.renderEmpty?.type] || nodata,
       rendererSettings: {
       rendererSettings: {
         preserveAspectRatio: 'xMidYMid slice'
         preserveAspectRatio: 'xMidYMid slice'
       }
       }

src/core/global.less

@@ -1723,5 +1723,21 @@ input:focus {
     .ant-btn {
     .ant-btn {
       margin-left: 10px;
       margin-left: 10px;
     }
     }
+.xm_search_item {
+  padding-right: 24px;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  box-sizing: border-box;
+  .label{
+    margin-right: 8px;
+    flex-shrink: 0;
+    // height: 36px;
+    // line-height: 36px;
+  }
+  .search{
+    flex: 1;
+    
   }
   }
 }
 }
\ No newline at end of file

src/core/page.less

@@ -22,7 +22,7 @@
     z-index: 102;
     z-index: 102;
     overflow: auto;
     overflow: auto;
     margin: 0 16px;
     margin: 0 16px;
-    
+    min-height: auto;
     .box {
     .box {
       &:first-child {
       &:first-child {
         margin-bottom: 8px;
         margin-bottom: 8px;

src/data-source/taskCenter/request-apis.ts

+/*
+ * @Author: yuananting
+ * @Date: 2021-08-06 17:35:35
+ * @LastEditors: yuananting
+ * @LastEditTime: 2021-08-13 18:06:35
+ * @Description: 任务中心接口
+ * @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
+ * @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
+ */
+import Service from '@/common/js/service';
+
+export function getTrainingTaskPage(params: object) {
+  return Service.Hades('public/hades/getTrainingTaskPage', params);
+}
+
+export function getStoreTaskNum(params: object) {
+  return Service.Hades('public/hades/getStoreTaskNum', params);
+}
+
+export function createTrainingExam(params: object) {
+  return Service.Hades('public/hades/createTrainingExam', params);
+}
+
+export function createTrainingTask(params: object) {
+  return Service.Hades('public/hades/createTrainingTask', params);
+}
+
+export function updateIssueStateTraining(params: object) {
+  return Service.Hades('public/hades/updateIssueStateTraining', params);
+}
+
+export function deleteTrainingTask(params: object) {
+  return Service.Hades('public/hades/deleteTrainingTask', params);
+}
+
+export function getTrainingTaskDetail(params: object) {
+  return Service.Hades('public/hades/getTrainingTaskDetail', params);
+}
+
+export function updateTrainingTask(params: object) {
+  return Service.Hades('public/hades/updateTrainingTask', params);
+}
+
+export function getTaskCustomerDetail(params: object) {
+  return Service.Hades('public/hades/getTaskCustomerDetail', params);
+}
+
+export function updateTrainingTaskAssign(params: object) {
+  return Service.Hades('public/hades/updateTrainingTaskAssign', params);
+}

src/domains/basic-domain/constants.ts

 /*
 /*
  * @Author: 陈剑宇
  * @Author: 陈剑宇
  * @Date: 2020-05-07 14:43:01
  * @Date: 2020-05-07 14:43:01
- * @LastEditTime: 2021-08-11 22:52:04
- * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2021-08-09 15:52:49
+ * @LastEditors: wufan
  * @Description:
  * @Description:
  * @FilePath: /wheat-web-demo/src/domains/basic-domain/constants.ts
  * @FilePath: /wheat-web-demo/src/domains/basic-domain/constants.ts
  */
  */

src/domains/task-center-domain/TaskCenterService.ts

+/*
+ * @Author: yuananting
+ * @Date: 2021-08-06 17:32:41
+ * @LastEditors: yuananting
+ * @LastEditTime: 2021-08-13 18:07:06
+ * @Description: 任务中心-培训任务接口
+ * @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
+ * @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
+ */
+import {
+  getTrainingTaskPage,
+  getStoreTaskNum,
+  createTrainingExam,
+  createTrainingTask,
+  updateIssueStateTraining,
+  deleteTrainingTask,
+  getTrainingTaskDetail,
+  updateTrainingTask,
+  getTaskCustomerDetail,
+  updateTrainingTaskAssign,
+} from '@/data-source/taskCenter/request-apis';
+
+export default class TaskCenterService {
+  // 获取培训任务列表
+  static getTrainingTaskPage(params: any) {
+    return getTrainingTaskPage(params);
+  }
+
+  // 获取学院任务数量
+  static getStoreTaskNum(params: any) {
+    return getStoreTaskNum(params);
+  }
+
+  // 培训任务创建考试
+  static createTrainingExam(params: any) {
+    return createTrainingExam(params);
+  }
+
+  // 企培创建培训任务
+  static createTrainingTask(params: any) {
+    return createTrainingTask(params);
+  }
+
+  // 发布/取消发布培训任务
+  static updateIssueStateTraining(params: any) {
+    return updateIssueStateTraining(params);
+  }
+
+  // 删除培训任务
+  static deleteTrainingTask(params: any) {
+    return deleteTrainingTask(params);
+  }
+
+  // 获取培训任务详情
+  static getTrainingTaskDetail(params: any) {
+    return getTrainingTaskDetail(params);
+  }
+
+  // 修改培训任务
+  static updateTrainingTask(params: any) {
+    return updateTrainingTask(params);
+  }
+
+  // 获取单个任务单个学员的学习进度详情
+  static getTaskCustomerDetail(params: any) {
+    return getTaskCustomerDetail(params);
+  }
+
+  // 修改培训任务的指派信息
+  static updateTrainingTaskAssign(params: any) {
+    return updateTrainingTaskAssign(params);
+  }
+}

src/h5.html

 <!--
 <!--
  * @Author: 吴文洁
  * @Author: 吴文洁
  * @Date: 2020-08-24 12:20:57
  * @Date: 2020-08-24 12:20:57
- * @LastEditors: Please set LastEditors
- * @LastEditTime: 2021-05-26 16:26:17
+ * @LastEditors: wufan
+ * @LastEditTime: 2021-08-13 19:25:12
  * @Description: 
  * @Description: 
  * @Copyright: 杭州杰竞科技有限公司 版权所有
  * @Copyright: 杭州杰竞科技有限公司 版权所有
 -->
 -->
@@ -25,7 +25,7 @@
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <link rel="stylesheet" href="//at.alicdn.com/t/font_2223403_oqqm4z9s35j.css">
+    <link rel="stylesheet" href="//at.alicdn.com/t/font_2223403_2digpsfgq8l.css">
 
 
     <!--
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       Notice the use of %PUBLIC_URL% in the tags above.

src/index.d.ts

 declare module 'jquery'
 declare module 'jquery'
 declare module 'cropper'
 declare module 'cropper'
 declare module 'ExamShareModal'
 declare module 'ExamShareModal'
-
 declare module 'routeHooks'
 declare module 'routeHooks'
+declare module 'college'
+declare module '@/common/lottie/college'
 // declare var this: any
 // declare var this: any
\ No newline at end of file

src/index.html

 <!--
 <!--
  * @Author: 吴文洁
  * @Author: 吴文洁
  * @Date: 2020-08-24 12:20:57
  * @Date: 2020-08-24 12:20:57
- * @LastEditors: Please set LastEditors
- * @LastEditTime: 2021-08-12 15:58:30
+ * @LastEditors: wufan
+ * @LastEditTime: 2021-08-13 19:25:18
  * @Description: 
  * @Description: 
  * @Copyright: 杭州杰竞科技有限公司 版权所有
  * @Copyright: 杭州杰竞科技有限公司 版权所有
 -->
 -->
@@ -30,7 +30,7 @@
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <link rel="stylesheet" href="//at.alicdn.com/t/font_2223403_7261tsts1dc.css" />
+    <link rel="stylesheet" href="//at.alicdn.com/t/font_2223403_2digpsfgq8l.css" />
 
 
     <!--
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       Notice the use of %PUBLIC_URL% in the tags above.

src/modules/course-manage/components/GraphicsEditor.jsx

@@ -2,7 +2,7 @@
  * @Author: yuananting
  * @Author: yuananting
  * @Date: 2021-07-05 10:47:19
  * @Date: 2021-07-05 10:47:19
  * @LastEditors: yuananting
  * @LastEditors: yuananting
- * @LastEditTime: 2021-07-12 17:13:38
+ * @LastEditTime: 2021-08-02 17:54:13
  * @Description: 描述一下咯
  * @Description: 描述一下咯
  * @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
  * @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
  * @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
  * @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
@@ -49,7 +49,7 @@ class GraphicsEditor extends React.Component {
 
 
   renderEditor() {
   renderEditor() {
     const { editorId } = this.state;
     const { editorId } = this.state;
-    const { detail, onChange, isIntro, maxLimit, editorType } = this.props;
+    const { detail, onChange, isIntro, maxLimit, editorType, placeholder = '请输入正文' } = this.props;
     class ImageMenu extends BtnMenu {
     class ImageMenu extends BtnMenu {
       constructor(editor) {
       constructor(editor) {
         // data-title属性表示当鼠标悬停在该按钮上时提示该按钮的功能简述
         // data-title属性表示当鼠标悬停在该按钮上时提示该按钮的功能简述
@@ -89,6 +89,7 @@ class GraphicsEditor extends React.Component {
     this.editorInt = new E(`#editor${editorId}`);
     this.editorInt = new E(`#editor${editorId}`);
     this.editorInt.config.focus = false;
     this.editorInt.config.focus = false;
     this.editorInt.config.showFullScreen = !isIntro;
     this.editorInt.config.showFullScreen = !isIntro;
+    this.editorInt.config.placeholder = placeholder;
     this.editorInt.menus.extend('xmimage', ImageMenu);
     this.editorInt.menus.extend('xmimage', ImageMenu);
     !isIntro && this.editorInt.menus.extend('xmvideo', VideoMenu);
     !isIntro && this.editorInt.menus.extend('xmvideo', VideoMenu);
     this.editorInt.config.menus = isIntro
     this.editorInt.config.menus = isIntro

src/modules/course-manage/components/LiveCourseList.jsx

@@ -721,7 +721,7 @@ class LiveCourseList extends React.Component {
       <div className='live-course-more-menu'>
       <div className='live-course-more-menu'>
         {(User.getUserRole() === 'CloudManager' || User.getUserRole() === 'StoreManager') && (
         {(User.getUserRole() === 'CloudManager' || User.getUserRole() === 'StoreManager') && (
           <div className='operate__item' onClick={() => this.handleRelatedModalShow(item)}>
           <div className='operate__item' onClick={() => this.handleRelatedModalShow(item)}>
-            关联培训计划
+            关联培训任务
           </div>
           </div>
         )}
         )}
         <div className='operate__item' onClick={() => this.toEditCoursePage(item)}>
         <div className='operate__item' onClick={() => this.toEditCoursePage(item)}>

src/modules/course-manage/modal/RelatedPlanModal.jsx

@@ -3,7 +3,7 @@ import college from '@/common/lottie/college';
 import { PageControl, XMTable } from '@/components';
 import { PageControl, XMTable } from '@/components';
 import CourseService from '@/domains/course-domain/CourseService';
 import CourseService from '@/domains/course-domain/CourseService';
 import PlanService from '@/domains/plan-domain/planService';
 import PlanService from '@/domains/plan-domain/planService';
-import { Input, Modal } from 'antd';
+import { Input, Modal, Tooltip } from 'antd';
 import React from 'react';
 import React from 'react';
 import _ from 'underscore';
 import _ from 'underscore';
 import './RelatedPlanModal.less';
 import './RelatedPlanModal.less';
@@ -65,15 +65,33 @@ class RelatedPlanModal extends React.Component {
     );
     );
   };
   };
 
 
+  renderTitle = () => {
+    return <div className="tip-title">
+      <p>为了不影响学员学习，系统已对数据进行筛选</p>
+      <p>1、课程不能直接关联「已发布」的培训任务筛选；</p>
+      <p>2、一个课程不能重复出现在同一培训任务中</p>
+    </div>
+  }
+
+  renderTableTitle = ()=> {
+    return <div>
+      <Tooltip title={this.renderTitle()}  overlayClassName="table-title-tooltip">                
+        培训任务<span className='icon iconfont table-title'>&#xe6f2;</span>
+      </Tooltip> 
+    </div>
+  }
+
   // 请求表头
   // 请求表头
   parsePlanColumns = () => {
   parsePlanColumns = () => {
     const columns = [
     const columns = [
       {
       {
-        title: '培训计划',
+        title: this.renderTableTitle(),
         key: 'planName',
         key: 'planName',
         dataIndex: 'planName',
         dataIndex: 'planName',
         render: (val, record) => {
         render: (val, record) => {
-          return <span>{val}</span>;
+          return <span>{val}
+
+            </span>;
         },
         },
       },
       },
     ];
     ];
@@ -159,7 +177,7 @@ class RelatedPlanModal extends React.Component {
     const { visible, selectPlanList } = this.props;
     const { visible, selectPlanList } = this.props;
     return (
     return (
       <Modal
       <Modal
-        title='关联培训计划'
+        title='关联培训任务'
         onCancel={this.props.onClose}
         onCancel={this.props.onClose}
         maskClosable={false}
         maskClosable={false}
         visible={visible}
         visible={visible}
@@ -170,7 +188,7 @@ class RelatedPlanModal extends React.Component {
         closeIcon={<span className='icon iconfont modal-close-icon'>&#xe6ef;</span>}>
         closeIcon={<span className='icon iconfont modal-close-icon'>&#xe6ef;</span>}>
         <div className='search-container'>
         <div className='search-container'>
           <Search
           <Search
-            placeholder='搜索培训计划名称'
+            placeholder='搜索培训任务名称'
             style={{ width: 207 }}
             style={{ width: 207 }}
             onChange={(e) => {
             onChange={(e) => {
               this.handleChangePlanName(e.target.value);
               this.handleChangePlanName(e.target.value);
@@ -216,8 +234,6 @@ class RelatedPlanModal extends React.Component {
                   taskBaseVOList = selectPlan.taskBaseVOList;
                   taskBaseVOList = selectPlan.taskBaseVOList;
                 }
                 }
 
 
-                console.log('taskBaseVOList', taskBaseVOList);
-
                 return (
                 return (
                   <div>
                   <div>
                     <XMTable
                     <XMTable

src/modules/course-manage/modal/RelatedPlanModal.less

-.related-plan-modal{
-    .search-container{
-        margin-bottom:16px;
-    }
-    .select-container{
-        margin-bottom:12px;
-        .con{
-            background: #E9EFFF;
+.table-title-tooltip {
+    max-width: 600px!important;
+}
+.related-plan-modal {
+  .table-title {
+    margin-left: 8px;
+    margin-left: 5px;
+    cursor: pointer;
+    color: rgb(191, 191, 191);
+    font-size: 14px;
+    font-weight: normal;
+  }
+
+  .search-container {
+    margin-bottom: 16px;
+  }
+  .select-container {
+    margin-bottom: 12px;
+
+    .con {
+      background: #e9efff;
       border-radius: 4px;
       border-radius: 4px;
-            padding:6px 16px;
+      padding: 6px 16px;
       display: inline-flex;
       display: inline-flex;
       align-items: center;
       align-items: center;
       justify-content: space-between;
       justify-content: space-between;
-            .tip{
-                font-size:14px;
-                color:#2966FF;
-                margin-right:8px;
-            }
-            .text{
-                font-size:14px;
-                color:#666;
-                margin-right:30px;
-            }
-            .clear{
-                color:#2966FF;
-                font-size:14px;
-            
+      .tip {
+        font-size: 14px;
+        color: #2966ff;
+        margin-right: 8px;
+      }
+      .text {
+        font-size: 14px;
+        color: #666;
+        margin-right: 30px;
+      }
+      .clear {
+        color: #2966ff;
+        font-size: 14px;
       }
       }
     }
     }
-      
   }
   }
-    .plan-table{
-        .taskName{
-            color:#666666;
-            font-size:14px;
-        }
-        .task-learn-percentage{
-            color:#666666;
-            font-size:14px;
-        }
-        .course-info{
-            margin-left:57px;
-            .course-type{
-                font-size:11px;
-                color:#666666;
-                padding:0px 6px;
+  .plan-table {
+    .taskName {
+      color: #666666;
+      font-size: 14px;
+    }
+    .task-learn-percentage {
+      color: #666666;
+      font-size: 14px;
+    }
+    .course-info {
+      margin-left: 57px;
+      .course-type {
+        font-size: 11px;
+        color: #666666;
+        padding: 0px 6px;
         line-height: 16px;
         line-height: 16px;
         border: 1px solid #999999;
         border: 1px solid #999999;
-                margin-right:4px;
+        margin-right: 4px;
         border-radius: 2px;
         border-radius: 2px;
       }
       }
-            .course-name{
-                color:#666666;
-                font-size:14px;
-                margin-right:8px;
+      .course-name {
+        color: #666666;
+        font-size: 14px;
+        margin-right: 8px;
       }
       }
-            .tip{
-                font-size:14px;
-                color:#FF4F4F;
-                margin-right:2px;
+      .tip {
+        font-size: 14px;
+        color: #ff4f4f;
+        margin-right: 2px;
       }
       }
-            .course-state{
-                color:#999;
-                font-size:14px;
+      .course-state {
+        color: #999;
+        font-size: 14px;
       }
       }
     }
     }
-        .ant-table-content{
-            border:1px solid #e8e8e8;
-            tr{
-                td{
-                    border:none;
+    .ant-table-content {
+      border: 1px solid #e8e8e8;
+      tr {
+        td {
+          border: none;
         }
         }
-                .child-table{
-                    .ant-table-content{
-                        border:none;
-                        thead{
-                            display:none;
+        .child-table {
+          .ant-table-content {
+            border: none;
+            thead {
+              display: none;
             }
             }
-                        tbody tr td{
-                            border-bottom:none;
+            tbody tr td {
+              border-bottom: none;
             }
             }
           }
           }
-                  
         }
         }
       }
       }
-            .odd-row{
-                background:transparent;
-                td{
-                    background: #FFF;
+      .odd-row {
+        background: transparent;
+        td {
+          background: #fff;
         }
         }
-                & + .ant-table-expanded-row{
-                    background:transparent;
-                    td{
-                        background: #FFF;
+        & + .ant-table-expanded-row {
+          background: transparent;
+          td {
+            background: #fff;
           }
           }
         }
         }
-                &:hover{
-                    & + .ant-table-expanded-row{
-                        background:transparent;
-                        td{
-                            background: #F3f6fa !important;
+        &:hover {
+          & + .ant-table-expanded-row {
+            background: transparent;
+            td {
+              background: #f3f6fa !important;
             }
             }
           }
           }
         }
         }
       }
       }
-            .even-row{
-                background:transparent;
-                td{
-                    background: #FAFAFA;
+      .even-row {
+        background: transparent;
+        td {
+          background: #fafafa;
         }
         }
-                & + .ant-table-expanded-row{
-                    background:transparent;
-                    td{
-                        background: #FAFAFA;
+        & + .ant-table-expanded-row {
+          background: transparent;
+          td {
+            background: #fafafa;
           }
           }
         }
         }
-                &:hover{
-                    & + .ant-table-expanded-row{
-                        background:transparent;
-                        td{
-                            background: #F3f6fa !important;
+        &:hover {
+          & + .ant-table-expanded-row {
+            background: transparent;
+            td {
+              background: #f3f6fa !important;
             }
             }
           }
           }
         }
         }

src/modules/course-manage/video-course/components/VideoCourseList.jsx

@@ -269,7 +269,7 @@ class VideoCourseList extends React.Component {
         </If>
         </If>
         {(User.getUserRole() === 'CloudManager' || User.getUserRole() === 'StoreManager') && (
         {(User.getUserRole() === 'CloudManager' || User.getUserRole() === 'StoreManager') && (
           <div className='operate__item' onClick={() => this.handleRelatedModalShow(item)}>
           <div className='operate__item' onClick={() => this.handleRelatedModalShow(item)}>
-            关联培训计划
+            关联培训任务
           </div>
           </div>
         )}
         )}
         <If condition={type === 'internal'}>
         <If condition={type === 'internal'}>

src/modules/home/Home.less

@@ -278,18 +278,19 @@
         }
         }
         .circle-tip {
         .circle-tip {
           position: absolute;
           position: absolute;
-          left: 70%;
           padding-left: 16px;
           padding-left: 16px;
           &.unfinished {
           &.unfinished {
-            top: 152px;
+            bottom: 2%;
+            left: 37%;
             .spot {
             .spot {
               background: #2966ff;
               background: #2966ff;
             }
             }
           }
           }
           &.finished {
           &.finished {
-            top: 232px;
+            bottom: 2%;
+            left: 14%;
             .spot {
             .spot {
-              background: #ffbb54;
+              background: #14cca7;
             }
             }
           }
           }
           .spot {
           .spot {
@@ -297,7 +298,7 @@
             width: 8px;
             width: 8px;
             height: 8px;
             height: 8px;
             border-radius: 4px;
             border-radius: 4px;
-            top: 20px;
+            top: 8px;
             left: 0;
             left: 0;
           }
           }
           .number {
           .number {

src/modules/knowledge-base/modal/VideoList.jsx

@@ -3,7 +3,7 @@
  * @Author: zangsuyun
  * @Author: zangsuyun
  * @Date: 2021-03-13 11:48:24
  * @Date: 2021-03-13 11:48:24
  * @LastEditors: wufan
  * @LastEditors: wufan
- * @LastEditTime: 2021-05-30 10:08:09
+ * @LastEditTime: 2021-08-09 15:53:08
  * @Copyright: © 2020 杭州杰竞科技有限公司 版权所有
  * @Copyright: © 2020 杭州杰竞科技有限公司 版权所有
  */
  */
 
 

src/modules/plan-manage/modal/SharePlanModal.jsx

@@ -6,66 +6,66 @@
  * @Description: 大班直播分享弹窗
  * @Description: 大班直播分享弹窗
  */
  */
 
 
-import React from 'react'
-import { Modal, Button, message } from 'antd'
-import domtoimage from 'dom-to-image'
-import qrcode from '@/libs/qrcode/qrcode.js'
-import User from '@/common/js/user'
-import $ from 'jquery'
-import CourseService from '@/domains/course-domain/CourseService'
+import React from 'react';
+import { Modal, Button, message } from 'antd';
+import domtoimage from 'dom-to-image';
+import qrcode from '@/libs/qrcode/qrcode.js';
+import User from '@/common/js/user';
+import $ from 'jquery';
+import CourseService from '@/domains/course-domain/CourseService';
 
 
-import './SharePlanModal.less'
+import './SharePlanModal.less';
 
 
-const DEFAULT_COVER = 'https://image.xiaomaiketang.com/xm/rEAetaTEh3.png'
+const DEFAULT_COVER = 'https://image.xiaomaiketang.com/xm/rEAetaTEh3.png';
 
 
 class ShareLiveModal extends React.Component {
 class ShareLiveModal extends React.Component {
   constructor(props) {
   constructor(props) {
-    super(props)
+    super(props);
 
 
     this.state = {
     this.state = {
       shareUrl: '',
       shareUrl: '',
-    }
+    };
   }
   }
 
 
   componentDidMount() {
   componentDidMount() {
     // 获取短链接
     // 获取短链接
-    this.handleConvertShortUrl()
+    this.handleConvertShortUrl();
   }
   }
 
 
   handleConvertShortUrl = () => {
   handleConvertShortUrl = () => {
-    const { longUrl } = this.props.data
+    const { longUrl } = this.props.data;
     // 发请求
     // 发请求
     CourseService.getQrcode({
     CourseService.getQrcode({
       urls: [longUrl],
       urls: [longUrl],
     }).then((res) => {
     }).then((res) => {
-      const { result = [] } = res
+      const { result = [] } = res;
 
 
       this.setState(
       this.setState(
         {
         {
           shareUrl: result[0].shortUrl,
           shareUrl: result[0].shortUrl,
         },
         },
         () => {
         () => {
-          const qrcodeWrapDom = document.querySelector('#qrcodeWrap')
+          const qrcodeWrapDom = document.querySelector('#qrcodeWrap');
           const qrcodeNode = new qrcode({
           const qrcodeNode = new qrcode({
             text: this.state.shareUrl,
             text: this.state.shareUrl,
             size: 98,
             size: 98,
-          })
-          qrcodeWrapDom.appendChild(qrcodeNode)
+          });
+          qrcodeWrapDom.appendChild(qrcodeNode);
 
 
-          const qrcodeWrapDomDownload = document.querySelector('#qrcodeWrap-dowload')
+          const qrcodeWrapDomDownload = document.querySelector('#qrcodeWrap-dowload');
           const qrcodeNodeDownLoad = new qrcode({
           const qrcodeNodeDownLoad = new qrcode({
             text: this.state.shareUrl,
             text: this.state.shareUrl,
             size: 196,
             size: 196,
-          })
-          qrcodeWrapDomDownload.appendChild(qrcodeNodeDownLoad)
-        }
-      )
-    })
+          });
+          qrcodeWrapDomDownload.appendChild(qrcodeNodeDownLoad);
         }
         }
+      );
+    });
+  };
 
 
   componentWillUnmount() {
   componentWillUnmount() {
     // 页面销毁之前清空定时器
     // 页面销毁之前清空定时器
-    clearTimeout(this.timer)
+    clearTimeout(this.timer);
   }
   }
 
 
   // 下载海报
   // 下载海报
@@ -77,29 +77,29 @@ class ShareLiveModal extends React.Component {
       },
       },
       () => {
       () => {
         this.setState({ time: new Date().valueOf() }, () => {
         this.setState({ time: new Date().valueOf() }, () => {
-          let node = document.getElementById('poster-dowload')
+          let node = document.getElementById('poster-dowload');
           domtoimage.toPng(node).then((imgData) => {
           domtoimage.toPng(node).then((imgData) => {
-            const download = document.createElement('a')
-            const { planName } = this.props.data
-            $(download).attr('href', imgData).attr('download', `${planName}.png`).get(0).click()
-          })
-        })
-      }
-    )
+            const download = document.createElement('a');
+            const { planName } = this.props.data;
+            $(download).attr('href', imgData).attr('download', `${planName}.png`).get(0).click();
+          });
+        });
       }
       }
+    );
+  };
 
 
   // 复制分享链接
   // 复制分享链接
   handleCopy = () => {
   handleCopy = () => {
-    const textContent = document.getElementById('shareUrl').innerText
+    const textContent = document.getElementById('shareUrl').innerText;
 
 
-    window.copyText(textContent)
-    message.success('复制成功!')
-  }
+    window.copyText(textContent);
+    message.success('复制成功!');
+  };
 
 
   render() {
   render() {
-    const { data } = this.props
-    const { planName, coverUrl = DEFAULT_COVER } = data
-    const { shareUrl, showImg, time } = this.state
+    const { data } = this.props;
+    const { planName, coverUrl = DEFAULT_COVER } = data;
+    const { shareUrl, showImg, time } = this.state;
     return (
     return (
       <Modal
       <Modal
         title={'分享培训计划'}
         title={'分享培训计划'}
@@ -185,8 +185,8 @@ class ShareLiveModal extends React.Component {
           </div>
           </div>
         </div>
         </div>
       </Modal>
       </Modal>
-    )
+    );
   }
   }
 }
 }
 
 
-export default ShareLiveModal
+export default ShareLiveModal;

src/modules/resource-disk/components/FolderList.jsx

@@ -71,8 +71,10 @@ class FolderList extends React.Component {
   handleSelect = (folder) => {
   handleSelect = (folder) => {
     // 只有文件才有预览功能
     // 只有文件才有预览功能
     if (folder.folderType === 'FOLDER') {
     if (folder.folderType === 'FOLDER') {
+      console.log(1)
       this.handleSelectFolder(folder)
       this.handleSelectFolder(folder)
     } else {
     } else {
+      console.log(2)
       this.handleScanFile(folder)
       this.handleScanFile(folder)
     }
     }
   }
   }

src/modules/root/Header.jsx

@@ -137,7 +137,7 @@ function Header(props) {
             <Tooltip title={nickName}>
             <Tooltip title={nickName}>
               <div className='name'>
               <div className='name'>
                 {/* <span>{nickName}</span> */}
                 {/* <span>{nickName}</span> */}
-                <WWOpenDataCom type="userName" openid={nickName}/>
+                <WWOpenDataCom type='userName' openid={nickName} />
               </div>
               </div>
             </Tooltip>
             </Tooltip>
             <span className='phone'>{phone}</span>
             <span className='phone'>{phone}</span>
@@ -383,7 +383,7 @@ function Header(props) {
                 />
                 />
                 <span className='name'>
                 <span className='name'>
                   {/* {nickName} */}
                   {/* {nickName} */}
-                  <WWOpenDataCom type="userName" openid={nickName}/>
+                  <WWOpenDataCom type='userName' openid={nickName} />
                 </span>
                 </span>
               </div>
               </div>
             </Dropdown>
             </Dropdown>

src/modules/task-center/data-center/Index.tsx

+import React, { useEffect, useState } from 'react';
+import { withRouter } from "react-router-dom";
+import { Tabs } from 'antd';
+import Service from '@/common/js/service';
+import Breadcrumbs from "@/components/Breadcrumbs";
+import DataInfo from './components/DataInfo'
+import CourseTable from './components/CourseTable';
+import ExamTable from './components/ExamTable';
+import StudyTable from './components/StudyTable';
+import './index.less'
+const { TabPane } = Tabs;
+
+function DataCenter(props: any) {
+    const { match: { params: { taskId } } } = props;
+    const [info, setInfo] = useState<any>({})
+    const [tabKey, setTabKey] = useState<any>('')
+
+
+    const tabList = [
+        {
+            name: '课程目录',
+            key: 'course',
+            compoment: CourseTable,
+        },
+        {
+            name: '学习详情',
+            key: 'study',
+            compoment: StudyTable,
+        },
+        {
+            name: '考试详情',
+            key: 'exam',
+            compoment: ExamTable,
+        },
+
+    ]
+
+    useEffect(() => {
+        getInfo()
+    }, [])
+
+    function getInfo() {
+        Service.Hades('/public/hades/getTrainingTaskDetail', { taskId }).then((res: any) => {
+            res.result.trainingStageList.map((item: any) => {
+                item.open = true
+            })
+            res.result.cover =res.result.courseMediaVOS.filter((item:any) => item.contentType === 'COVER')[0] || {};
+            res.result.intro =res.result.courseMediaVOS.filter((item:any) => item.contentType === 'INTRO')[0] || {};
+            setInfo(res.result)
+        })
+    }
+
+    return <div className="page train-data-center">
+        <Breadcrumbs
+            navList="培训任务详情"
+            goBack={() => {
+                props.history.goBack();
+            }}
+        />
+        <div className="content">
+            <DataInfo info={info} />
+            <Tabs defaultActiveKey={'course'} onChange={() => { }}>
+                {
+                    tabList.map((item: any) => {
+                        return <TabPane tab={item.name} key={item.key}>
+                            {
+                                <item.compoment info={info} taskId={taskId} />
+                            }
+                        </TabPane>
+                    })
+                }
+
+            </Tabs>
+        </div>
+
+    </div>
+}
+
+export default withRouter(DataCenter)

src/modules/task-center/data-center/UserLearningData.jsx

+/*
+ * @Author: yuananting
+ * @Date: 2021-08-05 10:55:49
+ * @LastEditors: wufan
+ * @LastEditTime: 2021-08-13 17:10:58
+ * @Description: 个人学习详情
+ * @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
+ * @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
+ */
+import React, { useEffect, useState } from 'react';
+import { Tabs } from 'antd';
+import Breadcrumbs from '@/components/Breadcrumbs';
+import WholeData from './components/WholeData';
+import { withRouter } from 'react-router-dom';
+import TestLinkTaskData from './components/TestLinkTaskData';
+import CustomerLearnBasicInfo from './components/CustomerLearnBasicInfo';
+import User from '@/common/js/user';
+import TaskCenterService from '@/domains/task-center-domain/TaskCenterService';
+
+import './UserLearningData.less';
+
+const { TabPane } = Tabs;
+
+function UserLearningData(props) {
+  const taskId = props.taskId;
+  const storeCustomerId = props.match.params.storeCustomerId.replace(/\?.+/, '');
+  const tabList = [
+    {
+      name: '全部',
+      key: 'whole',
+      compoment: WholeData,
+    },
+    {
+      name: '考试',
+      key: 'exam',
+      compoment: TestLinkTaskData, // todo
+    },
+  ];
+  const [detail, setDetail] = useState({});
+
+  useEffect(() => {
+    getTaskCustomerDetail();
+  }, []);
+
+  function getTaskCustomerDetail() {
+    const params = {
+      storeCustomerId,
+      storeId: User.getStoreId(),
+      taskId,
+    };
+    TaskCenterService.getTaskCustomerDetail(params).then((res) => {
+      const { result = {} } = res;
+      setDetail(result);
+    });
+  }
+
+  return (
+    <div className='page user-learning-data'>
+      <Breadcrumbs
+        navList='学员学习数据'
+        goBack={() => {
+          props.history.goBack();
+        }}
+      />
+      <CustomerLearnBasicInfo detail={detail} />
+      <div className='gap-line'></div>
+      <div className='content'>
+        <Tabs defaultActiveKey={'whole'} onChange={() => {}}>
+          {tabList.map((item) => {
+            return (
+              <TabPane tab={item.name} key={item.key}>
+                {<item.compoment detail={detail} taskId={taskId}/>}
+              </TabPane>
+            );
+          })}
+        </Tabs>
+      </div>
+    </div>
+  );
+}
+
+export default withRouter(UserLearningData);

src/modules/task-center/data-center/UserLearningData.less

+.user-learning-data {
+  .header {
+    padding: 16px 28px;
+    .train-title {
+      font-size: 18px;
+      font-weight: 500;
+      color: #333333;
+      line-height: 25px;
+      position: relative;
+      &::before {
+        content: '';
+        position: absolute;
+        left: -8px;
+        top: 50%;
+        transform: translateY(-50%);
+        width: 4px;
+        height: 10px;
+        background: #2966ff;
+      }
+      &::after {
+        content: '';
+        position: absolute;
+        left: -8px;
+        top: 75%;
+        transform: translateY(-50%);
+        width: 4px;
+        height: 2px;
+        background: #0acca4;
+      }
+    }
+    .data-info {
+      display: flex;
+      color: #666666;
+      margin-top: 16px;
+      margin-bottom: 8px;
+      .user-name {
+        margin-right: 32px;
+      }
+      .complete-progress {
+        display: inline-flex;
+        margin-right: 24px;
+      }
+      img {
+        width: 20px;
+        height: 20px;
+        margin-right: 8px;
+      }
+    }
+  }
+
+  .gap-line {
+    height: 10px;
+    background-color: #f0f2f5;
+  }
+
+  .content {
+    .ant-tabs-tab {
+      padding: 20px 20px 14px !important;
+      // margin-left: 18px;
+    }
+  }
+}

src/modules/task-center/data-center/components/CourseTable.tsx

+import React, { useEffect, useState } from 'react';
+import { withRouter } from "react-router-dom";
+import RichText from '@/components/RichText'
+import ExpiredCourseList from '../../train-task/components/ExpiredCourseList';
+import ENUM from '../../enum';
+import './course.less'
+
+function CourseTable(props: any) {
+    const IndexText = ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十']
+    const [list, setList] = useState<any[]>([]);
+    useEffect(() => {
+        console.log(props.info, 'rtyuio')
+        setList(props.info.trainingStageList || [])
+    }, [props.info.trainingStageList])
+
+
+
+    return <div className="courseTabContent">
+        <div className="tips">
+            {`培训目的：`}
+        
+            <RichText url={props.info?.intro?.mediaUrl}   />
+
+        </div>
+
+        <div className="coursecontent">
+            {
+                list?.map((item: any, index: number) => {
+                    return <div className="task">
+                        <div className="title" onClick={() => {
+                            const _list = [...list];
+                            _list[index].open = !_list[index].open;
+                            setList(_list)
+                        }}>
+                            {
+                                item.open ? <span className="icon iconfont open">&#xe614;</span> : <span className="icon iconfont">&#xe614;</span>
+                            }
+                            {
+                                `${IndexText[index]}、 `
+                            }
+                            {item.stageName}
+                        </div>
+                        {
+                            item.open && <div className="taskItemList">
+                                {
+                                    item.contentVOList.map((_item: any, _index: number) => {
+                                        return <div className={_index == item.contentVOList.length - 1 ? "item noBorder" : "item"}>
+                                            <div className="name">
+                                                <img className='type-option-icon' src={ENUM.LearningContentIcon[_item.courseType || _item.contentType]} />
+                                                <span style={{ marginRight: 4 }}> {`${index + 1}.${_index + 1}`}</span>
+
+                                                {
+                                                    _item.contentName
+                                                }
+                                                {
+                                                    (_item.courseType == 'LIVE') && <span className='desc'>{ENUM.courseStateShow[_item.courseState].title}</span>
+                                                }
+                                                {
+                                                    _item.courseType == 'VOICE' && <span className='desc'>{`(共${_item.courseChapterNum}节)`}</span>
+                                                }
+                                            </div>
+
+                                        </div>
+                                    })
+                                }
+
+                            </div>
+                        }
+                    </div>
+
+                })
+            }
+
+        </div>
+        <div className="expired">
+            <div className="title">失效课程</div>
+
+            <div className="list">
+                <ExpiredCourseList expiredCourseList={list} />
+            </div>
+        </div>
+
+
+    </div>
+}
+
+export default withRouter(CourseTable)
\ No newline at end of file

src/modules/task-center/data-center/components/CustomerLearnBasicInfo.jsx

+/*
+ * @Author: yuananting
+ * @Date: 2021-08-12 18:08:59
+ * @LastEditors: yuananting
+ * @LastEditTime: 2021-08-12 18:17:19
+ * @Description: 描述一下咯
+ * @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
+ * @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
+ */
+import React from 'react';
+import { Progress, Space } from 'antd';
+import ENUM from '../../enum';
+
+function CustomerLearnBasicInfo(props) {
+  return (
+    <div className='header'>
+      <div className='train-title'>{props.detail.taskName}</div>
+      <div className='data-info'>
+        <div className='user-name'>学员：{props.detail.storeCustomerName}</div>
+        <div className='complete-progress'>
+          任务完成率：
+          <div style={{ width: 120 }}>
+            <Progress size={120} strokeColor='#2966FF' trailColor='#EAEAEA' percent={props.detail.learnFinishPercentage} size='small' />
+          </div>
+        </div>
+        <Space size={24}>
+          <div>
+            <img src={ENUM.LearningContentIcon['COURSE']} />
+            课程：{props.detail.courseFinishNum || 0}/{props.detail.courseAllNum || 0}
+          </div>
+          <div>
+            <img src={ENUM.LearningContentIcon['EXAM']} />
+            考试：{props.detail.examFinishNum || 0}/{props.detail.examAllNum || 0}
+          </div>
+        </Space>
+      </div>
+    </div>
+  );
+}
+
+export default CustomerLearnBasicInfo;

src/modules/task-center/data-center/components/DataInfo.tsx

+import React, { useEffect, useState } from 'react';
+import { withRouter } from "react-router-dom";
+import { Progress } from 'antd';
+import ENUM from '../../enum'
+import moment from 'moment'
+const defaultCover = 'https://image.xiaomaiketang.com/xm/rEAetaTEh3.png';
+
+function DataInfo(props: any) {
+
+    return <div className="infoBox">
+        <div className="left">
+            <div className="banner">
+                <img src={ props.info.cover?.mediaUrl|| defaultCover} alt="" />
+            </div>
+            <div className="textBox">
+                <div className="nameBox">
+                    <div className="name">{props.info.taskName}</div>
+                    <div className="status" style={{ color: ENUM.trainStatus[props.info.taskState || 'UN_START'].color, background: ENUM.trainStatus[props.info.taskState || 'UN_START'].background }}>{ENUM.trainStatus[props.info.taskState || 'UN_START'].text}</div>
+                </div>
+                <div className="info">
+                    <span>  {`创建人: ${props.info.createName} `}</span>
+                    <span style={{ marginLeft: 24 }}>  {`培训时间：${moment(props.info.startTime).format('YYYY-MM-DD HH:mm')} 至 ${moment(props.info.endTime).format('YYYY-MM-DD HH:mm')}`}</span>
+                </div>
+                <div className="info">
+                    <div className="item">{`任务数:${props.info.contentNum}`}</div>
+                    {
+                        !!props.info.courseNum && <div className="item"><span className="icon"><img src="https://image.xiaomaiketang.com/xm/6C2GjSpnDp.png" alt="" /></span>{`课程：${props.info.courseNum}`}</div>
+                    }
+
+                    {/* <div className="item"><span className="icon"><img src="https://image.xiaomaiketang.com/xm/6C2GjSpnDp.png" alt="" /></span>{`作业：4`}</div> */}
+                    {
+                        !!props.info.examNum && <div className="item"><span className="icon"><img src="https://image.xiaomaiketang.com/xm/fCDPp2Eenc.png" alt="" /></span>{`考试：${props.info.examNum}`}</div>
+                    }
+
+                </div>
+            </div>
+
+
+        </div>
+        <div className="right">
+            <div className="prog">
+                <Progress type="circle" width={85} percent={parseInt(props.info.finishCustomerNum /(props.info.cultureCustomerNum)*100 as any)} strokeWidth={10} format={percent => <div className='wcl'>{`${(parseInt(props.info.finishCustomerNum /(props.info.cultureCustomerNum)*100 as any))}% `}  <div>完成率</div></div>} />
+            </div>
+            <div className="num">
+                <div className="item"> {`指派人数：${props.info.cultureCustomerNum}`}</div>
+                <div className="item">{`学习人数：${props.info.cultureCustomerNum}`}</div>
+                <div className="item">{`完成人数：${props.info.finishCustomerNum}`}</div>
+            </div>
+        </div>
+    </div>
+}
+
+export default withRouter(DataInfo)
\ No newline at end of file

src/modules/task-center/data-center/components/ExamTable.tsx

+import React, { useEffect, useState } from 'react';
+import { withRouter } from "react-router-dom";
+import { PageControl, XMTable } from '@/components';
+import Service from '@/common/js/service';
+import User from '@/common/js/user';
+
+
+function ExamTable(props: any) {
+    const [query, setQuery] = useState<any>({
+        current: 1, size: 10,
+        taskId: props.taskId,
+        source: 0,
+        tenantId: User.getStoreId(),
+        userId: User.getStoreUserId(),
+    });
+    const [list, setList] = useState<any[]>([]);
+    const [total, setTotal] = useState<any>(0);
+
+    useEffect(() => {
+        getList()
+    }, [query])
+
+    function getList() {
+        Service.Hades('public/hades/queryTrainingExamUserData', query).then((res: any) => {
+            setList(res.result.records)
+            setTotal(res.result.tatal)
+        })
+    }
+
+
+    const columns = [
+        {
+            title: '考试名称',
+            key: 'examName',
+            dataIndex: 'examName',
+
+        },
+        {
+            title: '完成人数',
+            key: 'finishCnt',
+            dataIndex: 'finishCnt',
+
+        },
+        {
+            title: '平均分',
+            key: 'averageScore',
+            dataIndex: 'averageScore',
+            render: (val: any, record: any) => {
+
+                return <div>{val || 0}</div>;
+            },
+
+        },
+        {
+            title: '及格人数',
+            key: 'passCnt',
+            dataIndex: 'passCnt',
+            render: (val: any, record: any) => {
+
+                return <div>{val || 0}</div>;
+            },
+        },
+        {
+            title: '及格率',
+            key: 'passPercentage',
+            dataIndex: 'passPercentage',
+            render: (val: any, record: any) => {
+
+                return <div>{val}%</div>;
+            },
+        },
+
+
+
+        {
+            title: '操作',
+            key: 'operate',
+            dataIndex: 'operate',
+            render: (val: any, record: any) => {
+                return (
+                    <div className='operate-area'>
+                        <span className='operate-item' onClick={() => { }}>
+                            查看数据
+                        </span>
+
+                    </div>
+                );
+            },
+        },
+    ];
+
+
+    return <div className="study_Table">
+
+        <div style={{ marginTop: 12 }}>
+            <XMTable
+                renderEmpty={{
+                    type: 'college',
+                    description: '暂无数据',
+                }}
+                rowKey={(record: any) => record.storeCustomerId}
+                dataSource={list}
+                columns={columns}
+                pagination={false}
+                className='user-learning-table'
+                onChange={() => { }}
+                showSorterTooltip={false}
+                bordered
+            />
+            {list.length > 0 && (
+                <div className='box-footer'>
+                    <PageControl
+                        current={query.current - 1}
+                        pageSize={query.size}
+                        total={total}
+                        toPage={(page: any) => {
+                            setQuery({ ...query, current: page + 1 })
+                        }}
+
+                    />
+                </div>
+            )}
+        </div>
+
+    </div>
+}
+
+export default withRouter(ExamTable)
\ No newline at end of file

src/modules/task-center/data-center/components/LeftStageList.jsx

+import React, { useState, useEffect } from "react";
+import "./LeftStageList.less";
+import ENUM from "../../enum";
+
+function LeftStageList(props) {
+  const { stageExamList, activeExam, activeStage } = props;
+  const [stageList, setStageList] = useState(stageExamList || []);
+
+  // 展开和收起阶段下面的考试
+  function handleToggleExpand(stageIndex) {
+    let _taskList = [...stageList];
+    _taskList = _taskList.map((item, index) => {
+      if (stageIndex === index) {
+        item.isShowMoreCourse = !item.isShowMoreCourse;
+      }
+      return item;
+    });
+    setStageList(_taskList || []);
+  }
+
+  return (
+    <div className="left-stage-list">
+      {stageList.map((item, index) => {
+        return (
+          <div key={index} className="stage-list">
+            <div
+              className={`stage-item ${
+                item.stageId === activeStage.stageId ? "active" : ""
+              }`}
+              onClick={() => handleToggleExpand(index)}
+            >
+              <div className="icon">
+                {item.isShowMoreCourse ? (
+              <span className="icon iconfont edit-icon">&#xe6b2;</span>
+                ) : (
+                  <span className="icon iconfont edit-icon">&#xe600;</span>
+                )}
+              </div>
+              <div className="stage-name">
+                {ENUM.IndexToSort[index + 1]}、{item.stageName}
+              </div>
+            </div>
+            {!item.isShowMoreCourse && (
+              <div className="exam-list">
+                {item.contentVOList && item.contentVOList.map((examItem, examIdndex) => {
+                  return (
+                    <div
+                      key={examIdndex}
+                      className={`exam-item ${
+                        examItem.contentId === activeExam.contentId ? "active" : ""
+                      }`}
+                      onClick={()=>{
+                          props.changeActiveExam(examItem,item)
+                      }}
+                    >
+                      <div className="exam-name">
+                        {item.sequence}.{examItem.sequence}{' '}{examItem.contentName}
+                        
+                      </div>
+                    </div>
+                  );
+                })}
+              </div>
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+export default LeftStageList;

src/modules/task-center/data-center/components/LeftStageList.less

+.left-stage-list {
+  width: 229px;
+  .stage-list {
+    .stage-item {
+        display: flex;
+      width: 229px;
+      height: 44px;
+      background: rgba(255, 255, 255, 0.06);
+      color: #666;
+      font-size: 14px;
+      color: #666;
+      line-height: 44px;
+      margin-right: 8px;
+      cursor: pointer;
+      .iconfont {
+        line-height: 15px;
+        font-size: 10px;
+        margin: 0 8px;
+        display: inline-block;
+        color: #666;
+      }
+      &.active {
+        background: rgba(41, 102, 255, 0.06);
+        color: #2966ff;
+      }
+    }
+    .exam-list {
+      .exam-item {
+        width: 229px;
+        height: 44px;
+        background: rgba(255, 255, 255, 0.06);
+        width: 100%;
+        font-size: 14px;
+        color: #666666;
+        line-height: 44px;
+        padding-left: 48px;
+        cursor: pointer;
+        .exam-name {
+            text-overflow: ellipsis;
+            overflow: hidden;
+            white-space: nowrap;
+        }
+        &.active {
+          background-color: RGBA(243, 246, 250, 1);
+        }
+      }
+    }
+  }
+}

src/modules/task-center/data-center/components/TestLinkTaskData.jsx

+import React, { useState, useEffect } from "react";
+import "./TestLinkTaskData.less";
+import LeftStageList from "./LeftStageList";
+import TestDetailPage from "@/modules/teach-tool/examination-manager/TestDetailPage";
+import { Route, withRouter } from "react-router-dom";
+import Service from "@/common/js/service";
+import LottieIcon from "@/components/LottieIcon";
+import User from '@/common/js/user';
+
+function TestLinkTaskData(props) {
+  const [stageExamList, setStageExamList] = useState([]);
+  const [activeExam, setActiveExam] = useState({});
+  const [activeStage, setActiveStage] = useState({});
+  const [isShow, setIsShow] = useState(true);
+  const {taskId, detail: {storeCustomerId}} = props;
+
+  useEffect(() => {
+    getTrainingTaskDetail();
+  }, []);
+
+  function getTrainingTaskDetail() {
+    
+    Service.Hades("public/hades/getTaskCustomerDetail", {
+      taskId: taskId,
+      storeId:  User.getStoreId(),
+      storeCustomerId: storeCustomerId,
+    }).then((res) => {
+      const data = { ...res.result };
+      const { stageExamCustomerVOList = [] } = data;
+      if (!!stageExamCustomerVOList.length) {
+        setStageExamList(stageExamCustomerVOList);
+        setActiveStage(stageExamCustomerVOList[0]);
+        setActiveExam(stageExamCustomerVOList[0].contentVOList[0]);
+        const { contentId, paperId } = stageExamCustomerVOList[0].contentVOList[0];
+        const { match } = props;
+        const path = `${match.url}/test-detail/${contentId}?paperId=${paperId}1&userId=${storeCustomerId}&fromTrainingTask=true`;
+        window.RCHistory.replace(path);
+      }
+    });
+  }
+
+  function changeActiveExam(_activeExam, _activeStage) {
+    console.log("_activeExam", _activeExam);
+    setActiveExam(_activeExam);
+    setActiveStage(_activeStage);
+    const { contentId, paperId } = _activeExam;
+    const { match } = props;
+    const path = `${
+      match.url
+    }/test-detail/${contentId}?paperId=${paperId}&userId=${111}`;
+    window.RCHistory.replace(path);
+  }
+
+  function toggleShowBar(diretion) {
+    if (diretion === "left") {
+      setIsShow(false);
+    } else {
+      setIsShow(true);
+    }
+  }
+
+  return (
+    <div>
+      {stageExamList.length ? (
+        <div className={`test-link-task-data ${!isShow ? 'hidden':''}`}>
+          <div className={`left-stage-list-box ${!isShow ? 'hidden':''}`}>
+            {isShow ? (
+              <div
+                className="left-bar"
+                onClick={() => {
+                  toggleShowBar("left");
+                }}
+              ></div>
+            ) : (
+              <div
+                className="right-bar"
+                onClick={() => {
+                  toggleShowBar("right");
+                }}
+              ></div>
+            )}
+            <LeftStageList
+              stageExamList={stageExamList}
+              activeExam={activeExam}
+              changeActiveExam={changeActiveExam}
+              activeStage={activeStage}
+            />
+          </div>
+          <div className={`right-exam-data-box ${!isShow ? 'hidden':''}`}>
+            {/* 未考过的考试显示暂无考试数据，否则请求接口会报错 */}
+            {
+              activeExam.learnFinishPercentage === 0 ? 
+              <LottieIcon
+              title={<span className="desc">暂无考试数据</span>}
+              type="college"
+              size={150}
+            /> : 
+            <Route
+            path={`${props.match.url}/test-detail/:testId`}
+            component={TestDetailPage}
+          />
+            }
+          </div>
+        </div>
+      ) : (
+        <LottieIcon
+          title={<span className="desc">暂无考试数据</span>}
+          type="college"
+          size={150}
+        />
+      )}
+    </div>
+  );
+}
+
+export default withRouter(TestLinkTaskData);

src/modules/task-center/data-center/components/TestLinkTaskData.less

+.test-link-task-data {
+  position: relative;
+  height: calc(100vh - 300px);
+  border-right: 1px solid #cccccc;
+  display: flex;
+  .left-stage-list-box {
+    border-right: 1px solid #cccccc;
+    width: 245px;
+    height: 100%;
+    overflow-y: auto;
+    position: relative;
+    overflow-x: hidden;
+    &.hidden {
+      border-left: 1px solid #cccccc;
+      border-right: none;
+      width: 15px;
+      .left-stage-list {
+        display: none;
+      }
+    }
+    .left-bar {
+      width: 8px;
+      height: 68px;
+      background: #d6d6d6;
+      border-radius: 12px 0px 0px 12px;
+      position: absolute;
+      right: 0;
+      top: 50%;
+      &::before {
+        content: "";
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        position: absolute;
+        width: 0;
+        height: 0;
+        transform: rotate(45deg);
+        background-color: #fff;
+        box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.2);
+        border-left: 10px solid transparent;
+        border-right: 10px solid transparent;
+        border-top: 10px solid #fff;
+      }
+      &:hover {
+        width: 12px;
+        height: 68px;
+        background: #666666;
+        border-radius: 12px 0px 0px 12px;
+      }
+    }
+    .right-bar {
+      width: 8px;
+      height: 68px;
+      background: #d6d6d6;
+      border-radius: 0px 12px 12px 0px;
+      position: absolute;
+      left: 0;
+      top: 50%;
+      &::before {
+        content: "";
+        left: -190%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        position: absolute;
+        width: 0;
+        height: 0;
+        transform: rotate(315deg);
+        background-color: #fff;
+        box-shadow: 0 0 6px 0 rgb(0 0 0 / 20%);
+        border-left: 10px solid transparent;
+        border-right: 10px solid transparent;
+        border-top: 10px solid #fff;
+      }
+      &:hover {
+        width: 12px;
+        height: 68px;
+        background: #666666;
+        border-radius: 0px 12px 12px 0px;
+        &::before {
+            content: "";
+            left: -120%;
+            top: 50%;
+            transform: translate(-50%, -50%);
+            position: absolute;
+            width: 0;
+            height: 0;
+            transform: rotate(315deg);
+            background-color: #fff;
+            box-shadow: 0 0 6px 0 rgb(0 0 0 / 20%);
+            border-left: 10px solid transparent;
+            border-right: 10px solid transparent;
+            border-top: 10px solid #fff;
+          }
+      }
+    }
+  }
+  .right-exam-data-box {
+    width: calc(100vw - 450px);
+    height: 100%;
+    overflow-y: auto;
+    margin-top: -16px;
+    overflow-x: hidden;
+    @media screen and (max-width: 1400px) {
+      .lottie-icon {
+        text-align: center;
+        margin-top: 153px;
+        margin-bottom: 50px;
+      }
+  }
+
+    &.hidden {
+      width: calc(100vw - 200px);
+    }
+  }
+}

src/modules/task-center/data-center/components/WholeData.jsx

+/*
+ * @Author: yuananting
+ * @Date: 2021-08-05 11:26:25
+ * @LastEditors: yuananting
+ * @LastEditTime: 2021-08-13 19:17:49
+ * @Description: 个人学习详情-全部tab页
+ * @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
+ * @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
+ */
+import React, { useState, useEffect } from 'react';
+import { Collapse, Progress } from 'antd';
+import './WholeData.less';
+import ENUM from '../../enum';
+const { Panel } = Collapse;
+
+function WholeData(props) {
+  const SortConvert = ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十'];
+
+  const courseStateShow = {
+    UN_START: {
+      title: '待开播',
+    },
+    STARTING: {
+      title: '直播中',
+    },
+    FINISH: {
+      title: '回放',
+    },
+    EXPIRED: {
+      title: '未成功开课',
+    },
+  };
+
+  const [stageCustomerList, setStageCustomerList] = useState([]);
+
+  useEffect(() => {
+    setStageCustomerList(props.detail.stageCustomerVOList);
+  }, [props]);
+
+  // 渲染阶段信息
+  function renderStageInfo(item, index) {
+    return (
+      <div className='stage-info__item'>
+        <span className='stage-name'>
+          {SortConvert[index]}、{item.stageName}
+        </span>
+        <span className='extra-info'>
+          （{item.learnFinishNum}/{item.learnAllNum}）
+        </span>
+      </div>
+    );
+  }
+
+  // 渲染学习内容信息
+
+  function renderContentInfo(contentItem, contentIndex, index) {
+    const { contentName, contentType, courseChapterNum, courseState, learnFinishPercentage, courseType } = contentItem;
+    return (
+      <div className='content-info__item'>
+        <div className='basic-info'>
+          <img src={ENUM.LearningContentIcon[courseType || contentType]} />
+          <span className='content-name'>
+            {contentIndex + 1}.{index + 1} {contentName}
+          </span>
+          {courseType === 'LIVE' && <span className='extra-info'>{courseStateShow[courseState].title}</span>}
+          {courseType === 'VOICE' && <span className='extra-info'>（共{courseChapterNum || 1}小节）</span>}
+        </div>
+        <div className='percent-info'>
+          {learnFinishPercentage === 100 ? (
+            <span className='icon iconfont'>&#xe621;</span>
+          ) : (
+            <Progress
+              width={20}
+              strokeWidth={12}
+              type='circle'
+              trailColor='#EAEAEA'
+              strokeColor={{
+                '0%': '#38B7F3',
+                '100%': '#1A80E2',
+              }}
+              percent={learnFinishPercentage}
+            />
+          )}
+          <span className='text'>{learnFinishPercentage === 100 ? '已完成' : `${learnFinishPercentage}%`}</span>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className='whole-data-container'>
+      <Collapse ghost>
+        {stageCustomerList?.length > 0 &&
+          stageCustomerList.map((item, index) => {
+            return (
+              <Panel header={renderStageInfo(item, index)} key={index}>
+                {item.contentVOList.map((contentItem, contentIndex) => {
+                  return renderContentInfo(contentItem, contentIndex, index);
+                })}
+              </Panel>
+            );
+          })}
+      </Collapse>
+    </div>
+  );
+}
+
+export default WholeData;

src/modules/task-center/data-center/components/WholeData.less

+.whole-data-container {
+  .ant-collapse-header {
+    padding: 15px 16px !important;
+    background-color: #f7f8f9;
+  }
+  .stage-info {
+    &__item {
+      width: calc(100% - 24px);
+      display: inline-flex;
+      align-items: center;
+      line-height: 20px;
+      .stage-name {
+        color: #333333;
+      }
+      .extra-info {
+        margin-left: 8px;
+        color: #666666;
+      }
+    }
+  }
+  .content-info {
+    &__item {
+      padding: 14px 16px;
+      margin-left: 40px;
+      border-bottom: 1px dotted #e8e8e8;
+      vertical-align: middle;
+      display: flex;
+      justify-content: space-between;
+      * {
+        vertical-align: middle;
+      }
+      .basic-info {
+        .content-name {
+          margin-left: 12px;
+          color: #333333;
+        }
+        .extra-info {
+          margin-left: 8px;
+          color: #999999;
+        }
+        img {
+          width: 20px;
+          height: 20px;
+        }
+      }
+      .percent-info {
+        width: 70px;
+        .ant-progress-text {
+          display: none;
+        }
+        .icon {
+          color: #2966ff;
+          font-size: 20px;
+        }
+        .text {
+          margin-left: 6px;
+          color: #666666;
+        }
+      }
+    }
+  }
+}

src/modules/task-center/data-center/components/course.less

+.courseTabContent{
+    padding-bottom: 24px;
+    .tips{
+        // height: 48px;
+        background: #F7F8F9;
+        font-size: 14px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 400;
+        color: #666666;
+        line-height: 20px;
+        padding: 14px 16px;
+    }
+    .coursecontent{
+        margin-top: 16px;
+        margin-bottom: 16px;
+        .title{
+            padding: 14px 16px;
+            font-size: 14px;
+            font-family: PingFangSC-Regular, PingFang SC;
+            font-weight: 400;
+            color: #333333;
+            line-height: 20px;
+            background: #F7F8F9;
+            border-radius: 2px;
+            cursor: pointer;
+            .icon{
+               color: rgba(153, 153, 153, 1);
+               transform: scale(0.8);
+               display: inline-block;
+               transform-origin: 50% 50%;
+               margin-right: 4px;
+               &.open{
+                transform:rotate(180deg) scale(0.8);
+               }
+            }
+
+        }
+        .taskItemList{
+            margin-left: 64px;
+            .item{
+               padding: 16px 0px  16px 32px;
+               border-bottom: 1px dashed #E8E8E8;
+               font-size: 14px;
+                font-family: PingFangSC-Regular, PingFang SC;
+                font-weight: 400;
+                color: #333333;
+                line-height: 20px;
+                &.noBorder{
+                    border:none;
+                }
+                .desc{
+                    font-size: 14px;
+                    font-family: PingFangSC-Regular, PingFang SC;
+                    font-weight: 400;
+                    color: #999999;
+                    line-height: 20px;
+                    margin-left: 8px;
+                }
+            }
+        }
+       
+
+    }
+    .expired{
+        .title{
+            font-size: 16px;
+            font-family: PingFangSC-Medium, PingFang SC;
+            font-weight: 500;
+            color: #333333;
+            line-height: 22px;
+        }
+        .desc{
+            font-size: 14px;
+            font-family: PingFangSC-Regular, PingFang SC;
+            font-weight: 400;
+            color: #999999;
+            line-height: 20px;
+            margin: 12px 0;
+        }
+        .list{
+            .item{
+                display: flex;
+                justify-content: space-between;
+                background: #F7F8F9;
+                border-radius: 2px;
+                padding: 16px;
+                font-size: 14px;
+                font-family: PingFangSC-Regular, PingFang SC;
+                font-weight: 400;
+                color: #999999;
+                line-height: 20px;
+                span{
+                    margin-right: 12px;
+                }
+                .na{
+                    color: #333333;
+                }
+                .ope{
+                    color: rgba(41, 102, 255, 1);
+                    cursor: pointer;
+                }
+            }
+        }
+    }
+}

src/modules/task-center/data-center/components/study.less

+.study_Table{
+    
+}
\ No newline at end of file

src/modules/task-center/data-center/index.less

+.train-data-center{
+    .content{
+        margin: 0 16px;
+    }
+    .infoBox{
+        background: #FFFFFF;
+        box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.05);
+        border-radius: 2px;
+        display: flex;
+        height: 141px;
+        justify-content: space-between;
+        margin: 0 0px 16px;
+        .left{
+            display: flex;
+            .banner{
+                padding: 16px;
+                img{
+                    width: 194px;
+                    height: 109px;
+                }
+             }
+             .textBox{
+                 padding-top: 1px;
+                 .nameBox{
+                     margin-top: 12px;
+                     margin-bottom: 34px;
+                     display: flex;
+                    .name{
+                        font-size: 18px;
+                        font-family: PingFangSC-Medium, PingFang SC;
+                        font-weight: 500;
+                        color: #333333;
+                        line-height: 25px;
+                    }
+                    .status{
+                        width: 42px;
+                        height: 20px;
+                        font-size: 14px;
+                        font-family: PingFangSC-Medium, PingFang SC;
+                        font-weight: 500;
+                        color: #999999;
+                        line-height: 20px;
+                        text-align: center;
+                        margin-left: 24px;
+                   
+                    }
+                 }
+                 .info{
+                     margin-bottom: 12px;
+                     .icon{
+                         position: relative;
+                         top: -2px;
+                         margin-right: 8px;
+                         img{
+                            width: 20px;
+                         }
+                        
+                     }
+                     span,.item{
+                        font-size: 14px;
+                        font-family: PingFangSC-Regular, PingFang SC;
+                        font-weight: 400;
+                        color: #666666;
+                        line-height: 20px;
+                        display: inline-block;
+                     }
+                     .item{
+                         margin-right: 24px;
+                     }
+                  
+                 }
+                 
+             }
+        }
+        .right{
+            display: flex;
+            margin-right: 32px;
+            .prog{
+                width: 85px;
+                margin-top: 27px;
+                margin-right: 24px;
+                .wcl{
+                    font-size: 16px;
+                    font-family: PingFangSC-Medium, PingFang SC;
+                    font-weight: 500;
+                    color: #666666;
+                    line-height: 22px;
+                    text-align: center;
+                }
+            }
+            .num{
+                margin-top: 27px;
+                .item{
+                    font-size: 14px;
+                    font-family: PingFangSC-Regular, PingFang SC;
+                    font-weight: 400;
+                    color: #666666;
+                    line-height: 20px;
+                    margin-bottom: 12px;
+                }
+            }
+        }
+        
+    }
+  
+}
\ No newline at end of file

src/modules/task-center/enum.ts

+/*
+ * @Author: yuananting
+ * @Date: 2021-08-03 18:10:15
+ * @LastEditors: wufan
+ * @LastEditTime: 2021-08-09 18:24:21
+ * @Description: 描述一下咯
+ * @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
+ * @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
+ */
+const ENUM: any = {
+    trainStatus: {
+        UN_START: {
+            text: "未开始",
+            color: "rgba(255, 178, 0, 1)",
+            background: "rgba(255, 178, 0, 0.1)",
+        },
+        STARTING: {
+            text: "进行中",
+            color: "rgba(41, 102, 255, 1)",
+            background: "rgba(41, 102, 255, 0.1)",
+        },
+        FINISH: {
+            text: "已结束",
+            color: "rgba(153, 153, 153, 1)",
+            background: "rgba(153, 153, 153, 0.1)",
+        },
+    },
+
+    learnState: {
+        UN_FINISH: {
+            text: "未完成",
+        },
+        FINISH: {
+            text: "已完成",
+        },
+        OVERDUE: {
+            text: "已逾期",
+
+        },
+    },
+
+
+
+
+    courseStateShow: {
+        UN_START: {
+            title: '待开播',
+        },
+        STARTING: {
+            title: '直播中',
+        },
+        FINISH: {
+            title: '回放',
+        },
+        EXPIRED: {
+            title: '未成功开课',
+        },
+    },
+    LearnState: {
+        UN_PLAY: {
+            text: '未开始',
+        },
+        UNDER_WAY: {
+            text: '进行中',
+        },
+        FINISH: {
+            text: '已完成',
+        },
+    },
+    LearningContentIcon: {
+        COURSE: 'https://image.xiaomaiketang.com/xm/6C2GjSpnDp.png',
+        LIVE: 'https://image.xiaomaiketang.com/xm/jyFhCtaKfi.png',
+        VOICE: 'https://image.xiaomaiketang.com/xm/2T2k5Tbmpy.png',
+        PICTURE: 'https://image.xiaomaiketang.com/xm/yzjNwGX6TY.png',
+        EXAM: 'https://image.xiaomaiketang.com/xm/fCDPp2Eenc.png',
+        HOMEWORK: 'https://image.xiaomaiketang.com/xm/hShsAzzppZ.png',
+  },
+    // index to 中文序号
+    IndexToSort: {
+        1: '一',
+        2: '二',
+        3: '三',
+        4: '四',
+        5: '五',
+        6: '六',
+        7: '七',
+        8: '八',
+        9: '九',
+        10: '十',
+        11: '十一'
+      }
+}
+
+export default ENUM
\ No newline at end of file

src/modules/task-center/train-task/AddTrainTask.less

+.add-train-task {
+  .header-tab {
+    position: relative;
+    padding: 20px 0 12px 0;
+    text-align: center;
+    font-size: 16px;
+    color: #666666;
+    line-height: 22px;
+    border-bottom: 1px solid #e8e8e8;
+    margin-bottom: 20px;
+    .tab-title {
+      position: relative;
+      cursor: pointer;
+      &:first-child {
+        margin-right: 44px;
+      }
+      .step-icon {
+        display: inline-block;
+        width: 16px;
+        height: 16px;
+        border-radius: 50%;
+        font-size: 12px;
+        text-align: center;
+        line-height: 14px;
+        margin-right: 8px;
+        &.default-icon {
+          border: 1px solid #999999;
+          color: #999999;
+        }
+        &.active-icon {
+          background-color: #2966ff;
+          border: 1px solid #2966ff;
+          color: #ffffff;
+        }
+      }
+
+      .active-text {
+        color: #2966ff;
+      }
+
+      .active-line {
+        position: absolute;
+        width: 32px;
+        height: 2px;
+        background: #2966ff;
+        top: 34px;
+        left: 16px;
+        z-index: 999;
+      }
+    }
+
+    &::after {
+      content: ' ';
+      height: 10px;
+      width: 10px;
+      border-width: 2px 2px 0 0;
+      border-color: #999999;
+      border-style: solid;
+      transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
+      position: absolute;
+      top: 50%;
+      left: calc(50% - 5px);
+    }
+  }
+
+  .footer {
+    position: fixed;
+    left: 196px;
+    bottom: 0;
+    height: 58px;
+    width: ~'calc(100% - 218px)';
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    padding-right: 72px;
+    background: #fff;
+    border-top: 1px solid #e8e8e8;
+    z-index: 9999;
+    .ant-btn {
+      margin-left: 10px;
+    }
+  }
+}

src/modules/task-center/train-task/TrainTaskPage.jsx

+/*
+ * @Author: yuananting
+ * @Date: 2021-07-28 11:25:58
+ * @LastEditors: yuananting
+ * @LastEditTime: 2021-08-10 15:10:44
+ * @Description: 任务中心-培训任务
+ * @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
+ */
+import React, { useEffect, useState } from 'react';
+import TrainFilter from './components/TrainFilter';
+import { Route, withRouter } from 'react-router-dom';
+import TrainList from './components/TrainList';
+import TaskCenterService from '@/domains/task-center-domain/TaskCenterService';
+import DataCenter from '../data-center/Index';
+import User from '@/common/js/user';
+import Bus from '@/core/bus';
+
+function TrainTaskPage(props) {
+  const [trainListData, setTrainListData] = useState([]); // 培训任务列表
+  const [query, setQuery] = useState({
+    current: 1,
+    endTime: null,
+    issueState: 'ALL', // 发布状态
+    myAssist: false, // 是否由我协同
+    size: 10,
+    sortMap: {}, // 排序
+    startTime: null,
+    storeId: User.getStoreId(),
+    storeUserId: User.getStoreUserId(),
+    taskName: '',
+  });
+  const [totalCount, setTotalCount] = useState(0); // 总数
+  const [storeTaskNum, setStoreTaskNum] = useState({});
+  const { match } = props;
+
+  useEffect(() => {
+    getTrainingTaskPage();
+  }, [query]);
+
+  useEffect(() => {
+    getStoreTaskNum();
+    initPageData();
+    return () => {
+      removePageData();
+    };
+  }, []);
+
+  useEffect(() => {}, []);
+
+  const initPageData = () => {
+    Bus.bind('getTrainingTaskPage', getTrainingTaskPage);
+    Bus.bind('getStoreTaskNum', getStoreTaskNum);
+  };
+
+  const removePageData = () => {
+    Bus.unbind('getTrainingTaskPage', getTrainingTaskPage);
+    Bus.unbind('getStoreTaskNum', getStoreTaskNum);
+  };
+
+  // 获取计划列表
+  function getTrainingTaskPage() {
+    let _query = _.clone(query);
+    if (_query.issueState === 'ALL') {
+      delete _query.issueState;
+    }
+    TaskCenterService.getTrainingTaskPage(_query).then((res) => {
+      const {
+        result: { records = [], total },
+      } = res;
+      setTrainListData(records);
+      setTotalCount(total);
+    });
+  }
+
+  // 获取学院任务数量
+  function getStoreTaskNum() {
+    TaskCenterService.getStoreTaskNum({ storeId: User.getStoreId() }).then((res) => {
+      setStoreTaskNum(res.result);
+    });
+  }
+
+  // 搜索条件修改
+  function queryChange(_query) {
+    setQuery({ ...query, ..._query });
+  }
+
+  return (
+    <div className='page'>
+      <div className='content-header'>培训任务</div>
+      <div className='box'>
+        <TrainFilter onChange={queryChange} />
+        <TrainList trainListData={trainListData} storeTaskNum={storeTaskNum} query={query} totalCount={totalCount} onChange={queryChange} />
+      </div>
+      <Route path={`${match.url}/data/:taskId`} component={DataCenter} />
+    </div>
+  );
+}
+export default withRouter(TrainTaskPage);

src/modules/task-center/train-task/components/BasicInfo.less

+.basic-info__form {
+  margin-bottom: 138px;
+  .cover {
+    display: flex;
+    margin-top: 24px;
+    &__wrap {
+      position: relative;
+      .img-box {
+        position: relative;
+        margin-top: 8px;
+        width: 300px;
+        height: 170px;
+        .default-tag {
+          border-radius: 2px;
+          background: #d6d6d6;
+          font-size: 12px;
+          height: 18px;
+          width: 52px;
+          text-align: center;
+          color: #fff;
+          position: absolute;
+          top: 8px;
+          left: 8px;
+        }
+        img {
+          width: 100%;
+          height: 100%;
+          object-fit: contain;
+        }
+      }
+      .opt-box {
+        .default-btn {
+          margin-left: 12px;
+          color: #2966ff;
+          cursor: pointer;
+          &.disabled {
+            color: #ccc;
+            cursor: not-allowed;
+            pointer-events: none;
+          }
+        }
+        .tips {
+          margin-top: 8px;
+          font-size: 14px;
+          color: #999;
+        }
+      }
+    }
+  }
+
+  .duration {
+    &__wrap {
+      .tips {
+        color: #999999;
+        display: inline-block;
+        margin-left: 16px;
+      }
+      .picker-box {
+        display: inline-block;
+        margin-left: 16px;
+        .ant-form-item {
+          margin-bottom: 0 !important;
+        }
+      }
+    }
+  }
+
+  .select-obj {
+    width: 600px;
+    max-height: 90px;
+    overflow-y: scroll;
+    padding: 12px;
+    border-radius: 4px;
+    margin-top: 10px;
+    border: 1px solid #e8e8e8;
+    color: #666666;
+    .obj-type-container {
+      display: flex;
+      overflow-wrap: normal;
+      .type-title {
+        width: 70px;
+        flex-shrink: 0;
+      }
+    }
+    .close-icon {
+      font-size: 14px;
+      color: #cccccc;
+    }
+  }
+
+  .learning-model-tips {
+    margin-top: 8px;
+    color: #999999;
+    line-height: 20px;
+  }
+
+  .ant-form-item {
+    margin-bottom: 24px !important;
+    .ant-form-item-label > label {
+      width: 108px;
+      justify-content: flex-end;
+    }
+    &:not(:first-child) .ant-form-item-label > label {
+      height: 22px !important;
+    }
+    .ant-form-item-control-input {
+      min-height: 22px !important;
+    }
+    .ant-tag {
+      border: 1px solid #cccccc;
+      color: #666666;
+      margin-bottom: 12px;
+      font-size: 14px;
+    }
+  }
+}

src/modules/task-center/train-task/components/ExpiredCourseList.jsx

+/*
+ * @Author: yuananting
+ * @Date: 2021-08-03 10:47:59
+ * @LastEditors: yuananting
+ * @LastEditTime: 2021-08-03 18:31:56
+ * @Description: 编辑培训任务-失效课程
+ * @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
+ * @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
+ */
+import React from 'react';
+import { List } from 'antd';
+import './ExpiredCourseList.less';
+import ENUM from '../../enum';
+
+function ExpiredCourseList(props) {
+  const expiredCourseList = [1, 2, 3, 4];
+  return (
+    <div className='expired-list-page'>
+      <div className='tip'>为了不影响学员学习，「未成功开课」的课程已从任务中移出，具体课程如下所示：</div>
+      <List
+        dataSource={expiredCourseList}
+        renderItem={(item) => (
+          <List.Item>
+            <div className='item-detail'>
+              <span className='icon iconfont'>&#xe80b;</span>
+              <span className='content-status'>未成功开课</span>
+              <span className='stage-name'>阶段一、</span>
+              <span className='content-name'>
+                <img src={ENUM.LearningContentIcon['LIVE']} />
+                <span>2.1 入门培训任务</span>
+              </span>
+              <span className='teacher-name'>张老师</span>
+              <span className='split'>|</span>
+              <span className='course-time'>2020-12-12 09:00~10:00</span>
+              <span className='del-btn'>删除记录</span>
+            </div>
+          </List.Item>
+        )}
+      />
+    </div>
+  );
+}
+
+export default ExpiredCourseList;

src/modules/task-center/train-task/components/ExpiredCourseList.less

+.expired-list-page {
+  .tip {
+    color: #999999;
+    line-height: 20px;
+    margin-top: 8px;
+    margin-bottom: 16px;
+  }
+  .ant-list-item {
+    padding: 16px;
+    border: none !important;
+    &:nth-child(even) {
+      background: #ffffff;
+    }
+    &:nth-child(odd) {
+      background: #f7f8f9;
+    }
+
+    .item-detail {
+      display: inline-flex;
+      width: 100%;
+      height: 20px;
+      .icon {
+        font-size: 14px;
+        color: #ff4f4f;
+        margin-right: 4px;
+      }
+      .content-status {
+        color: #999999;
+        margin-right: 24px;
+      }
+      .stage-name {
+        color: #333333;
+        margin-right: 12px;
+      }
+      .content-name {
+        color: #333333;
+        margin-right: 12px;
+        vertical-align: middle;
+        > * {
+          vertical-align: middle;
+        }
+        img {
+          width: 20px;
+          height: 20px;
+          margin-right: 12px;
+        }
+      }
+      .teacher-name,
+      .course-time {
+        color: #999999;
+      }
+      .split {
+        margin-left: 12px;
+        margin-right: 12px;
+        color: #999999;
+      }
+      .del-btn {
+        margin-left: auto;
+        color: #2966ff;
+        cursor: pointer;
+      }
+    }
+  }
+}

src/modules/task-center/train-task/components/RelatedCourseDrawer.less

+.related-course-drawer {
+  .link-create-course {
+    color: #666666;
+    font-size: 14px;
+    width: 638px;
+    text-align: left;
+    display: inline-block;
+    span {
+      color: #2966ff;
+    }
+  }
+  .search-container {
+    margin-bottom: 16px;
+  }
+  .select-area {
+    margin-bottom: 12px;
+    display: flex;
+    justify-content: space-between;
+    .select-box {
+      display: inline-box;
+      width: 186px;
+      background: #e9efff;
+      border-radius: 4px;
+      padding: 6px 16px;
+      margin-right: 8px;
+      display: flex;
+      justify-content: space-between;
+      .tip-icon {
+        color: #2966ff;
+        font-size: 14px;
+        margin-right: 4px;
+      }
+      .select-num {
+        color: #666666;
+        font-size: 14px;
+      }
+      .clear-btn {
+        text-align: right;
+        color: #2966ff;
+        font-size: 14px;
+      }
+    }
+    .related-box {
+      padding: 6px 16px;
+      background: #e9efff;
+      border-radius: 4px;
+      flex: 1;
+      color: #666666;
+      font-size: 14px;
+    }
+  }
+  .search-container {
+    margin-bottom: 16px;
+  }
+  .select-area {
+    margin-bottom: 12px;
+    display: flex;
+    justify-content: space-between;
+    .select-box {
+      display: inline-box;
+      width: 186px;
+      background: #e9efff;
+      border-radius: 4px;
+      padding: 6px 16px;
+      margin-right: 8px;
+      display: flex;
+      justify-content: space-between;
+      .tip-icon {
+        color: #2966ff;
+        font-size: 14px;
+        margin-right: 4px;
+      }
+      .select-num {
+        color: #666666;
+        font-size: 14px;
+      }
+      .clear-btn {
+        text-align: right;
+        color: #5289fa;
+        font-size: 14px;
+      }
+    }
+    .related-box {
+      padding: 6px 16px;
+      background: #e9efff;
+      border-radius: 4px;
+      flex: 1;
+      color: #666666;
+      font-size: 14px;
+    }
+  }
+  .course-info {
+    display: flex;
+    align-items: center;
+    .course-cover {
+      width: 97px;
+      height: 55px;
+      display: inline-block;
+      border-radius: 4px;
+      margin-right: 8px;
+    }
+    .course-name {
+      font-size: 14px;
+      color: #666;
+      text-overflow: -o-ellipsis-lastline;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      line-clamp: 2;
+      -webkit-box-orient: vertical;
+      width: 180px;
+    }
+    .course-status {
+      font-size: 12px;
+      line-height: 18px;
+      display: inline-block;
+      border-radius: 2px;
+      padding: 0 8px;
+      margin-top: 8px;
+    }
+  }
+
+  .footer {
+    position: fixed;
+    right: 0;
+    bottom: 0;
+    width: 720px;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    padding: 16px 24px;
+    background: #fff;
+    border-top: 1px solid #e8e8e8;
+    z-index: 9999;
+    .ant-btn {
+      margin-left: 8px;
+    }
+  }
+}

src/modules/task-center/train-task/components/RelatedExamDrawer.less

+.related-exam-drawer {
+  .module-title {
+    font-size: 16px;
+    color: #333333;
+    line-height: 22px;
+    margin-bottom: 24px;
+  }
+  .paper-title {
+    color: #333333;
+    line-height: 20px;
+    padding: 10px 12px;
+    margin-top: 12px;
+    margin-bottom: 8px;
+    img {
+      width: 20px;
+      height: 20px;
+      margin-right: 4px;
+    }
+  }
+  .paper-table {
+    border: 1px solid #e8e8e8;
+    width: 550px;
+    .header {
+      font-weight: 500;
+      .item {
+        padding: 10px 16px;
+      }
+    }
+    .body-list {
+      .item {
+        padding: 14px 16px;
+      }
+    }
+    .header,
+    .body-list {
+      display: flex;
+      color: #333333;
+      .item {
+        box-sizing: border-box;
+        width: 86px;
+        &.long {
+          width: 120px;
+        }
+      }
+    }
+  }
+
+  .footer {
+    position: fixed;
+    right: 0;
+    bottom: 0;
+    height: 50px;
+    width: 720px;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    padding-right: 24px;
+    background: #fff;
+    border-top: 1px solid #e8e8e8;
+    z-index: 9999;
+    .ant-btn {
+      margin-left: 8px;
+    }
+  }
+
+  .ant-form-item {
+    margin-bottom: 24px !important;
+    .graphics-editor-container {
+      width: 550px;
+      height: 130px;
+      .editor-warning {
+        top: 130px !important;
+      }
+    }
+  }
+}

src/modules/task-center/train-task/components/TrainContent.less

+.train-content-page {
+  .train-content__warp {
+    .ant-collapse-header {
+      padding: 15px 16px !important;
+      background-color: #f7f8f9;
+    }
+    .add-stage-btn {
+      color: #2966ff;
+      height: 52px;
+      background: #f7f8f9;
+      padding: 16px;
+      cursor: pointer;
+    }
+  }
+  .expired-info__wrap {
+    margin-top: 24px;
+    .module-title {
+      height: 22px;
+      font-size: 16px;
+      color: #333333;
+      line-height: 22px;
+    }
+  }
+  .finish-standard__warp {
+    margin-top: 24px;
+
+    .module-title {
+      height: 22px;
+      font-size: 16px;
+      color: #333333;
+      line-height: 22px;
+      cursor: pointer;
+      .icon {
+        font-size: 12px;
+        margin-left: 8px;
+        color: #5e606a;
+        display: inline-block;
+        vertical-align: middle;
+      }
+      .rotate-arrow {
+        transform: (rotate(180deg));
+      }
+    }
+    .detail-container {
+      margin-top: 24px;
+      display: flex;
+      .title-text {
+        color: #333333;
+        line-height: 20px;
+      }
+      .detail-box {
+        margin-top: -4px;
+        .item-info {
+          color: #333333;
+          vertical-align: middle;
+          margin-bottom: 20px;
+          .ant-form-item {
+            display: inline-block;
+            margin-bottom: 0 !important;
+            vertical-align: baseline;
+          }
+          img {
+            width: 20px;
+            height: 20px;
+            margin-right: 8px;
+          }
+          .input-box {
+            width: 60px;
+            height: 32px;
+            border-radius: 2px;
+            border: 1px solid #e8e8e8;
+            margin: 0 4px;
+          }
+        }
+      }
+    }
+  }
+}
+
+.sort-stage-item {
+  width: calc(100% - 24px);
+  display: inline-flex;
+  align-items: center;
+  line-height: 20px;
+  .item-info {
+    color: #333333;
+  }
+
+  .item-operate {
+    display: none;
+    margin-left: 30px;
+    .operate__item {
+      cursor: pointer;
+      .icon {
+        color: #bfbfbf;
+        font-size: 14px;
+      }
+      .text {
+        color: #666666;
+        margin-left: 8px;
+      }
+    }
+  }
+
+  &:hover {
+    .item-operate {
+      display: block;
+    }
+  }
+
+  .ant-form {
+    display: inline-block;
+    .ant-form-item {
+      margin-bottom: 0 !important;
+    }
+  }
+}
+
+.sort-content-item {
+  display: flex;
+  padding: 15px 16px !important;
+  margin-left: 40px;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 1px dotted #e8e8e8;
+  vertical-align: middle;
+  * {
+    vertical-align: middle;
+    height: 20px;
+  }
+  &:hover {
+    .content-operate {
+      display: block;
+    }
+  }
+
+  .content-info {
+    .content-name {
+      color: #333333;
+      font-size: 14px;
+      margin-left: 12px;
+    }
+    .extra-info {
+      color: #999999;
+      margin-left: 12px;
+    }
+    .tip {
+      font-size: 14px;
+      color: #ff4f4f;
+      margin-right: 2px;
+    }
+  }
+  .content-operate {
+    display: none;
+    margin-left: 26px;
+    .operate__item {
+      cursor: pointer;
+      color: #666666;
+      .icon {
+        font-size: 14px;
+        color: #bfbfbf;
+      }
+      .text {
+        margin-left: 8px;
+      }
+    }
+  }
+}
+
+.type-option-icon {
+  width: 20px;
+  height: 20px;
+}
+.type-option-text {
+  margin-left: 12px;
+}
+
+.drag-btn {
+  margin-left: auto;
+  color: #cccccc;
+  cursor: pointer;
+}
+
+.add-content-btn {
+  color: #2966ff;
+  height: 52px;
+  border-radius: 2px;
+  padding: 16px;
+  cursor: pointer;
+  display: inline-block;
+  &.disabled {
+    color: #ccc;
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+}
+
+.ant-collapse-content {
+  padding-left: 24px !important;
+  > .ant-collapse-content-box {
+    padding: 0 !important;
+  }
+}

src/modules/task-center/train-task/components/TrainFilter.jsx

+/*
+ * @Author: 吴文洁
+ * @Date: 2020-07-14 15:41:30
+ * @Last Modified by: 吴文洁
+ * @Last Modified time: 2020-07-23 13:45:16
+ * @Description: 大班直播、互动班课列表的筛选组件
+ */
+
+import React, { useState, useEffect } from 'react';
+import { Row, Input, Select, Tooltip } from 'antd';
+import RangePicker from '@/modules/common/DateRangePicker';
+import moment from 'moment';
+import StoreService from '@/domains/store-domain/storeService';
+import './TrainFilter.less';
+const { Search } = Input;
+
+const DEFAULT_QUERY = {
+  // 头部筛选默认值
+  taskName: null,
+  createId: null, // 创建人
+  startTime: null,
+  endTime: null,
+};
+const DEFAULT_CREATOR_QUERY = {
+  // 创建人列表筛选默认值
+  size: 10,
+  current: 1,
+  nickName: null, // 搜索值
+};
+
+function TrainFilter(props) {
+  const [query, setQuery] = useState(DEFAULT_QUERY);
+  const [hasNext, setHasNext] = useState(false);
+  const [creatorQuery, setCreatorQuery] = useState(DEFAULT_CREATOR_QUERY);
+  const [creatorList, setCreatorList] = useState([]);
+
+  useEffect(() => {
+    getCreatorList();
+  }, []);
+
+  // 获取创建人列表
+  function getCreatorList(current = 1) {
+    const _query = {
+      ...creatorQuery,
+      current,
+    };
+    StoreService.getStoreUserBasicPage(_query).then((res) => {
+      const { result = {} } = res;
+      const { records = [], hasNext } = result;
+      const list = current > 1 ? creatorList.concat(records) : records;
+      setHasNext(hasNext);
+      setCreatorList(list);
+    });
+  }
+
+  // 滑动加载更多创建人列表（讲师）
+  function handleScrollCreatorList(e) {
+    const container = e.target;
+    const scrollToBottom = container && container.scrollHeight <= container.clientHeight + container.scrollTop;
+    if (scrollToBottom && hasNext) {
+      const _creatorQuery = { ...creatorQuery };
+      _creatorQuery.current = creatorQuery.current + 1;
+      setCreatorQuery(_creatorQuery);
+      getCreatorList(creatorQuery.current + 1);
+    }
+  }
+
+  // 改变搜索条件
+  function handleChangeQuery(field, value) {
+    const _query = _.clone(query);
+    _query.current = 1;
+    if (field === 'createdDate') {
+      _query.startTime = value && value[0].valueOf();
+      _query.endTime = value && value[1].valueOf();
+    } else {
+      _query[field] = value;
+    }
+    setQuery(_query);
+    if (field === 'taskName') return;
+    props.onChange(_query);
+  }
+
+  // 重置搜索条件
+  function handleReset() {
+    setQuery(DEFAULT_QUERY);
+    props.onChange(DEFAULT_QUERY);
+  }
+
+  return (
+    <div className='train-filter-page'>
+      <Row>
+        <div className='search-condition'>
+          <div className='search-condition__item'>
+            <span>培训任务：</span>
+            <Search
+              value={query.taskName}
+              placeholder='搜索培训任务名称'
+              onChange={(e) => {
+                handleChangeQuery('taskName', e.target.value.trim());
+              }}
+              onSearch={() => {
+                props.onChange(query);
+              }}
+              style={{ width: 'calc(100% - 70px)' }}
+              enterButton={<span className='icon iconfont'>&#xe832;</span>}
+            />
+          </div>
+          <div className='search-condition__item'>
+            <span>创建人：</span>
+            <Select
+              placeholder='请选择创建人'
+              style={{ width: 'calc(100% - 70px)' }}
+              showSearch
+              allowClear
+              filterOption={(input, option) => option}
+              suffixIcon={
+                <span className='icon iconfont' style={{ fontSize: '12px', color: '#BFBFBF' }}>
+                  &#xe835;
+                </span>
+              }
+              onPopupScroll={handleScrollCreatorList}
+              value={query.createId}
+              onChange={(value) => {
+                handleChangeQuery('createId', value);
+              }}
+              onSearch={(value) => {
+                creatorQuery.nickName = value;
+                setCreatorQuery(creatorQuery);
+                getCreatorList();
+              }}
+              onClear={() => {
+                setCreatorQuery(DEFAULT_CREATOR_QUERY);
+                getCreatorList();
+              }}>
+              {_.map(creatorList, (item, index) => {
+                return (
+                  <Select.Option value={item.id} key={item.id}>
+                    {item.nickName}
+                  </Select.Option>
+                );
+              })}
+            </Select>
+          </div>
+          <div className='search-condition__item'>
+            <span className='search-date'>创建日期：</span>
+            <RangePicker
+              id='train_date_picker'
+              allowClear={false}
+              value={query.startTime ? [moment(query.startTime), moment(query.endTime)] : null}
+              format={'YYYY-MM-DD'}
+              onChange={(value) => {
+                handleChangeQuery('createdDate', value);
+              }}
+              style={{ width: 'calc(100% - 70px)' }}
+            />
+          </div>
+        </div>
+
+        <div className='reset-fold-area'>
+          <Tooltip title='清空筛选'>
+            <span className='resetBtn iconfont icon' onClick={handleReset}>
+              &#xe61b;{' '}
+            </span>
+          </Tooltip>
+        </div>
+      </Row>
+    </div>
+  );
+}
+
+export default TrainFilter;

src/modules/task-center/train-task/components/TrainFilter.less

+.train-filter-page {
+  .search-condition {
+    width: calc(100% - 80px);
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+
+    &__item {
+      width: 30%;
+      margin-right: 3%;
+      line-height: 32px;
+    }
+  }
+  .reset-fold-area {
+    position: absolute;
+    right: 12px;
+    .resetBtn {
+      color: #999999;
+      font-size: 18px;
+      margin-right: 8px;
+    }
+  }
+}

src/modules/task-center/train-task/components/TrainList.less

+.train-list-page {
+  .header-line {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 16px;
+    margin-bottom: 12px;
+    .ant-radio-button-wrapper {
+      color: #9d9d9d;
+
+      &:first-child {
+        border-radius: 4px 0 0 4px;
+      }
+      &:last-child {
+        border-radius: 0 4px 4px 0;
+      }
+    }
+    .ant-radio-button-wrapper-checked {
+      color: #2966ff;
+    }
+  }
+
+  .train-list-table {
+    .train-task-name {
+      display: flex;
+      align-items: center;
+      .train-cover {
+        width: 106px;
+        height: 60px;
+        border-radius: 2px;
+        margin-right: 8px;
+      }
+      .train-name {
+        width: 188px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        height: 40px;
+      }
+    }
+    .task-state {
+      * {
+        vertical-align: middle;
+        display: inline-block;
+      }
+      .status-point {
+        width: 6px;
+        height: 6px;
+        border-radius: 50%;
+        margin-right: 4px;
+      }
+    }
+
+    .operate {
+      display: flex;
+      &__item {
+        color: #2966ff;
+        cursor: pointer;
+      }
+      .split {
+        margin: 0 8px;
+        color: #bfbfbf;
+      }
+      .more-text {
+        color: #2966ff;
+        cursor: pointer;
+      }
+    }
+
+    .tip {
+      cursor: pointer;
+      color: '#bfbfbf';
+      margin-left: 5px;
+      font-weight: normal;
+    }
+
+    thead.ant-table-thead {
+      tr {
+        th {
+          padding: 10px 16px;
+        }
+      }
+    }
+    tbody {
+      tr {
+        td.ant-table-cell {
+          padding: 20px 16px;
+          color: #333;
+        }
+        &:nth-child(even) {
+          background: transparent;
+          td {
+            background: #fff;
+          }
+        }
+        &:nth-child(odd) {
+          background: #fafafa;
+          td {
+            background: #fafafa;
+          }
+        }
+        &:hover {
+          td {
+            background: #f3f6fa;
+          }
+        }
+      }
+    }
+  }
+}
+
+.disabled {
+  color: #ccc !important;
+  cursor: not-allowed !important;
+  pointer-events: none !important;
+}

src/modules/task-center/train-task/modal/ChooseAssignorModal.less

+.choose-assignor-modal {
+  .assignor-container {
+    display: flex;
+    height: 417px;
+    .left-list {
+      width: 50%;
+      margin-right: 24px;
+      padding: 0 0 12px 16px;
+      border: 1px solid #e8e8e8;
+      .data-body {
+        .ant-tabs-nav {
+          margin: 0 !important;
+          .ant-tabs-tab {
+            padding: 16px 0 10px 0 !important;
+            font-size: 14px !important;
+          }
+        }
+        .tree-con {
+          overflow-y: scroll;
+          overflow-x: hidden;
+          max-height: 367px;
+          padding-right: 16px;
+          .ant-tree .ant-tree-treenode {
+            padding: 12px 0 !important;
+          }
+          .node-title-div {
+            display: flex;
+            justify-content: space-between;
+            white-space: nowrap;
+            .title-icon {
+              margin-right: 6px;
+              color: #999999;
+            }
+            .title-name {
+              position: absolute;
+              overflow: hidden;
+              white-space: nowrap;
+              text-overflow: ellipsis;
+              width: 55%;
+              left: 28px;
+              color: #666666;
+            }
+          }
+          .ant-tree.ant-tree-directory {
+            .ant-tree-treenode-selected:hover::before,
+            .ant-tree-treenode-selected::before {
+              background: #f3f6fa;
+            }
+          }
+          .ant-tree-switcher {
+            color: #999999 !important;
+          }
+        }
+      }
+    }
+    .right-list {
+      width: 50%;
+      border: 1px solid #e8e8e8;
+      .header-line {
+        display: flex;
+        justify-content: space-between;
+        border-bottom: 1px solid #e8e8e8;
+        padding: 12px 16px;
+        .tip-text {
+          font-weight: 500;
+          color: #333333;
+        }
+        .clear-btn {
+          color: #2966ff;
+          cursor: pointer;
+        }
+      }
+      .data-body {
+        overflow-y: scroll;
+        overflow-x: hidden;
+        max-height: 370px;
+        .selected-item {
+          padding: 12px 12px 12px 16px;
+          display: flex;
+          justify-content: space-between;
+          .item-title {
+            width: 80%;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            .title-icon {
+              color: #999999;
+              margin-right: 6px;
+            }
+            .title-name {
+              color: #333333;
+            }
+          }
+          .clear-icon {
+            font-size: 16px;
+            color: #999999;
+            vertical-align: middle;
+            cursor: pointer;
+          }
+        }
+      }
+    }
+  }
+}

src/modules/task-center/train-task/modal/ChooseCollaboratorModal.jsx

+/*
+ * @Author: yuananting
+ * @Date: 2021-08-12 16:27:38
+ * @LastEditors: yuananting
+ * @LastEditTime: 2021-08-13 19:39:34
+ * @Description: 新建培训任务-选择协同人员
+ * @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
+ * @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
+ */
+
+import React, { useState, useEffect } from 'react';
+import { Modal, Input, Tooltip, List, Checkbox } 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 StoreService from '@/domains/store-domain/storeService';
+import search from '@/common/lottie/search';
+import './ChooseCollaboratorModal.less';
+import WWOpenDataCom from '@/components/WWOpenDataCom';
+
+import _ from 'underscore';
+
+const { Search } = Input;
+
+function ChooseCollaboratorModal(props) {
+  const [searchKey, setSearchKey] = useState(''); // 搜索内容
+  const [employeeList, setEmployeeList] = useState([]); // 员工列表
+  const [checkedCollaboratorList, setCheckedCollaboratorList] = useState(props.currentCollaboratorList || []); // 勾选的协同人员
+  const [checkedCollaboratorKeys, setCheckedCollaboratorKeys] = useState(props.currentCollaboratorList.map((item) => item.checkedId) || []);
+  const [allChecked, setAllChecked] = useState(false);
+
+  useEffect(() => {
+    getEmployeeList();
+  }, [searchKey]);
+
+  function getEmployeeList() {
+    const params = {
+      current: 1,
+      size: 999,
+      nickName: searchKey,
+      phone: '',
+      roleCodes: [],
+    };
+    StoreService.getEmployeeList(params).then((res) => {
+      const { records } = res.result;
+      records.map((item) => {
+        item.checkedName = item.nickName;
+        item.checkedId = item.id;
+        item.checked = checkedCollaboratorKeys.includes(item.checkedId);
+        return item;
+      });
+      const checkedEmployeeList = records.filter((item) => item.checked);
+      const _checkedAll = records.length === checkedEmployeeList.length;
+      setEmployeeList(records);
+      setAllChecked(_checkedAll);
+    });
+  }
+
+  function renderDepItem(record) {
+    if (!record.depNameList) {
+      return <span>-</span>;
+    }
+    return record.depNameList.map((item, index) => {
+      return (
+        <span>
+          <WWOpenDataCom type='departmentName' openid={item} />
+          {index < record.depNameList.length - 1 ? '、' : ''}
+        </span>
+      );
+    });
+  }
+
+  function handleCheckedCollaborator(e) {
+    const { value, checked } = e.target;
+    let _checkedCollaboratorList = [...checkedCollaboratorList];
+    let _employeeList = [];
+    if (checked) {
+      _employeeList = employeeList.map((item) => {
+        if (item.checkedId === value.checkedId) {
+          item.checked = true;
+        }
+        return item;
+      });
+      _checkedCollaboratorList.push({ ...value, checked: true });
+    } else {
+      _employeeList = employeeList.map((item) => {
+        if (item.checkedId === value.checkedId) {
+          item.checked = false;
+        }
+        return item;
+      });
+      _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);
+    setCheckedCollaboratorList(_checkedCollaboratorList);
+    setCheckedCollaboratorKeys(_checkedCollaboratorKeys);
+    setAllChecked(_checkedAll);
+  }
+
+  function removeCheckedCollaborator(record) {
+    const _employeeList = employeeList.map((item) => {
+      if (item.checkedId === record.checkedId) {
+        item.checked = false;
+      }
+      return item;
+    });
+
+    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);
+  }
+
+  function clearCheckedCollaborator() {
+    const _employeeList = employeeList.map((item) => {
+      item.checked = item.checkedId === props.createId;
+      return item;
+    });
+    const createrItem = checkedCollaboratorList.filter((item) => item.checkedId === props.createId);
+    setEmployeeList(_employeeList);
+    setCheckedCollaboratorList(createrItem);
+    setCheckedCollaboratorKeys([props.createId]);
+    setAllChecked(false);
+  }
+
+  function handleCheckedAll(e) {
+    let _employeeList = [];
+    let _checkedCollaboratorList = [];
+    if (e.target.checked) {
+      _employeeList = employeeList.map((item) => {
+        item.checked = true;
+        return item;
+      });
+      const filterList = employeeList.filter((item) => {
+        return !checkedCollaboratorKeys.includes(item.checkedId);
+      });
+      _checkedCollaboratorList = checkedCollaboratorList.concat([...filterList]);
+    } else {
+      _employeeList = employeeList.map((item) => {
+        item.checked = item.checkedId === props.createId;
+        return item;
+      });
+      const removeIds = _employeeList.filter((item) => !item.checked).map((childItem) => childItem.checkedId);
+      _checkedCollaboratorList = checkedCollaboratorList.filter((item) => {
+        return !removeIds.includes(item.checkedId);
+      });
+    }
+
+    const _checkedCollaboratorKeys = _checkedCollaboratorList.map((item) => item.checkedId);
+
+    setEmployeeList(_employeeList);
+    setCheckedCollaboratorList(_checkedCollaboratorList);
+    setCheckedCollaboratorKeys(_checkedCollaboratorKeys);
+    setAllChecked(e.target.checked);
+  }
+
+  return (
+    <Modal
+      className='choose-collaborator-modal'
+      title='选择协同者'
+      visible={true}
+      onCancel={props.onClose}
+      onOk={() => {
+        props.onConfirm(checkedCollaboratorList);
+        props.onClose();
+      }}
+      width={680}
+      maskClosable={false}>
+      <div className='collaborator-container'>
+        <div className='left-list'>
+          <Search
+            placeholder='搜索员工'
+            value={searchKey}
+            style={{ paddingRight: 16 }}
+            onChange={(e) => setSearchKey(e.target.value.trim())}
+            onSearch={getEmployeeList}
+            className='search search-input'
+            enterButton={<span className='icon iconfont'>&#xe832;</span>}
+          />
+          <div className='data-body'>
+            <List
+              header={
+                <Checkbox checked={allChecked} onChange={handleCheckedAll}>
+                  全部
+                </Checkbox>
+              }
+              dataSource={employeeList}
+              renderItem={(item, index) => (
+                <List.Item>
+                  <Checkbox
+                    checked={item.checked}
+                    value={item}
+                    key={item.checkedId}
+                    disabled={item.checkedId === props.createId}
+                    onChange={handleCheckedCollaborator}>
+                    <div className='employee-item'>
+                      <span className='item-title'>
+                        <span className='icon iconfont title-icon'>&#xe84a;</span>
+                        <Tooltip title={<WWOpenDataCom type='userName' openid={item.checkedName} />}>
+                          <span className='title-name'>
+                            <WWOpenDataCom type='userName' openid={item.checkedName} />
+                          </span>
+                        </Tooltip>
+                      </span>
+                      <span className='dep-info'>{renderDepItem(item)}</span>
+                    </div>
+                  </Checkbox>
+                </List.Item>
+              )}
+            />
+          </div>
+        </div>
+        <div className='right-list'>
+          <div className='header-line'>
+            <span className='tip-text'>已选择</span>
+            <span className='clear-btn' onClick={clearCheckedCollaborator}>
+              清空
+            </span>
+          </div>
+          <div className='data-body'>
+            {checkedCollaboratorList.map((item, index) => {
+              return (
+                <div className='selected-item'>
+                  <span className='item-title'>
+                    <span className='icon iconfont title-icon'>&#xe84a;</span>
+                    <Tooltip title={<WWOpenDataCom type='userName' openid={item.checkedName} />}>
+                      <span className='title-name'>
+                        <WWOpenDataCom type='userName' openid={item.checkedName} />
+                      </span>
+                    </Tooltip>
+                  </span>
+                  <span
+                    className={`icon iconfont clear-icon ${item.checkedId === props.createId && 'disabled'}`}
+                    onClick={() => removeCheckedCollaborator(item)}>
+                    &#xe717;
+                  </span>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      </div>
+    </Modal>
+  );
+}
+
+export default ChooseCollaboratorModal;

src/modules/task-center/train-task/modal/ChooseCollaboratorModal.less

+.choose-collaborator-modal {
+  .collaborator-container {
+    display: flex;
+    height: 417px;
+    .left-list {
+      width: 50%;
+      margin-right: 24px;
+      padding: 12px 0 12px 16px;
+      border: 1px solid #e8e8e8;
+      .data-body {
+        overflow-y: scroll;
+        overflow-x: hidden;
+        max-height: 370px;
+        padding-right: 16px;
+        .ant-list {
+          .ant-list-item:hover {
+            background-color: #f3f6fa;
+          }
+        }
+        .employee-item {
+          display: flex;
+          justify-content: space-between;
+          .item-title {
+            width: 110px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            .title-icon {
+              color: #0081f0;
+              margin-right: 6px;
+            }
+            .title-name {
+              color: #333333;
+            }
+          }
+          .dep-info {
+            width: 128px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            margin-left: 12px;
+            text-align: right;
+          }
+        }
+      }
+    }
+    .right-list {
+      width: 50%;
+      border: 1px solid #e8e8e8;
+
+      .header-line {
+        display: flex;
+        justify-content: space-between;
+        border-bottom: 1px solid #e8e8e8;
+        padding: 12px 16px;
+        .tip-text {
+          font-weight: 500;
+          color: #333333;
+        }
+        .clear-btn {
+          color: #2966ff;
+          cursor: pointer;
+        }
+      }
+      .data-body {
+        overflow-y: scroll;
+        overflow-x: hidden;
+        max-height: 370px;
+        .selected-item {
+          padding: 12px 12px 12px 16px;
+          display: flex;
+          justify-content: space-between;
+          .item-title {
+            width: 80%;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            .title-icon {
+              color: #0081f0;
+              margin-right: 6px;
+            }
+            .title-name {
+              color: #333333;
+            }
+          }
+          .clear-icon {
+            font-size: 16px;
+            color: #999999;
+            vertical-align: middle;
+            cursor: pointer;
+            &.disabled {
+              color: #ccc;
+              cursor: not-allowed;
+              pointer-events: none;
+            }
+          }
+        }
+      }
+    }
+  }
+}

src/modules/task-center/train-task/modal/ShareTrainTaskModal.jsx

+/*
+ * @Author: 吴文洁
+ * @Date: 2020-07-20 19:12:49
+ * @Last Modified by: 吴文洁
+ * @Last Modified time: 2020-07-20 20:25:13
+ * @Description: 大班直播分享弹窗
+ */
+
+import React from 'react';
+import { Modal, Button, message } from 'antd';
+import domtoimage from 'dom-to-image';
+import qrcode from '@/libs/qrcode/qrcode.js';
+import User from '@/common/js/user';
+import $ from 'jquery';
+import CourseService from '@/domains/course-domain/CourseService';
+
+import './ShareTrainTaskModal.less';
+
+const DEFAULT_COVER = 'https://image.xiaomaiketang.com/xm/rEAetaTEh3.png';
+
+class ShareTrainTaskModal extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      shareUrl: '',
+    };
+  }
+
+  componentDidMount() {
+    // 获取短链接
+    this.handleConvertShortUrl();
+  }
+
+  handleConvertShortUrl = () => {
+    const { longUrl } = this.props.data;
+    // 发请求
+    CourseService.getQrcode({
+      urls: [longUrl],
+    }).then((res) => {
+      const { result = [] } = res;
+
+      this.setState(
+        {
+          shareUrl: result[0].shortUrl,
+        },
+        () => {
+          const qrcodeWrapDom = document.querySelector('#qrcodeWrap');
+          const qrcodeNode = new qrcode({
+            text: this.state.shareUrl,
+            size: 98,
+          });
+          qrcodeWrapDom.appendChild(qrcodeNode);
+
+          const qrcodeWrapDomDownload = document.querySelector('#qrcodeWrap-dowload');
+          const qrcodeNodeDownLoad = new qrcode({
+            text: this.state.shareUrl,
+            size: 196,
+          });
+          qrcodeWrapDomDownload.appendChild(qrcodeNodeDownLoad);
+        }
+      );
+    });
+  };
+
+  componentWillUnmount() {
+    // 页面销毁之前清空定时器
+    clearTimeout(this.timer);
+  }
+
+  // 下载海报
+  handleDownloadPoster = () => {
+    this.setState(
+      {
+        showImg: true,
+        time: new Date().valueOf(),
+      },
+      () => {
+        this.setState({ time: new Date().valueOf() }, () => {
+          let node = document.getElementById('poster-dowload');
+          domtoimage.toPng(node).then((imgData) => {
+            const download = document.createElement('a');
+            const { planName } = this.props.data;
+            $(download).attr('href', imgData).attr('download', `${planName}.png`).get(0).click();
+          });
+        });
+      }
+    );
+  };
+
+  // 复制分享链接
+  handleCopy = () => {
+    const textContent = document.getElementById('shareUrl').innerText;
+
+    window.copyText(textContent);
+    message.success('复制成功!');
+  };
+
+  render() {
+    const { data } = this.props;
+    const { planName, coverUrl = DEFAULT_COVER } = data;
+    const { shareUrl, showImg, time } = this.state;
+    return (
+      <Modal
+        title={'分享培训任务'}
+        width={680}
+        visible={true}
+        footer={null}
+        maskClosable={false}
+        closeIcon={<span className='icon iconfont modal-close-icon'>&#xe6ef;</span>}
+        className='share-task-modal'
+        onCancel={this.props.close}>
+        <div className='left'>
+          <div id='poster'>
+            <div className='store-name'>
+              <span className='text'>{User.getStoreName()}</span>
+            </div>
+
+            <div className='course-name-title'>邀请你参与培训：</div>
+
+            <div className='live-couse-name'>{planName}</div>
+            <Choose>
+              <When condition={showImg}>
+                <img crossOrigin='*' src={coverUrl + `?=${time}`} className='course-cover' alt='' />
+              </When>
+              <Otherwise>
+                <img src={coverUrl + `?=${time}`} className='course-cover' alt='' />
+              </Otherwise>
+            </Choose>
+
+            <div className='qrcode-wrap'>
+              <div className='qrcode-wrap__left'>
+                <div className='text'>长按识别二维码进入观看</div>
+                <img className='finger' src='https://image.xiaomaiketang.com/xm/thpkWDwJsC.png' alt='' />
+              </div>
+              <div className='qrcode-wrap__right' id='qrcodeWrap'></div>
+            </div>
+          </div>
+          <div id='poster-dowload'>
+            <div className='store-name'>
+              <span className='text'>{User.getStoreName()}</span>
+            </div>
+
+            <div className='course-name-title'>邀请你参与培训：</div>
+
+            <div className='live-couse-name'>{planName}</div>
+            <Choose>
+              <When condition={showImg}>
+                <img crossOrigin='*' src={coverUrl + `?=${time}`} className='course-cover' alt='' />
+              </When>
+              <Otherwise>
+                <img src={coverUrl + `?=${time}`} className='course-cover' alt='' />
+              </Otherwise>
+            </Choose>
+
+            <div className='qrcode-wrap'>
+              <div className='qrcode-wrap__left'>
+                <div className='text'>长按识别二维码进入观看</div>
+                <img className='finger' src='https://image.xiaomaiketang.com/xm/thpkWDwJsC.png' alt='' />
+              </div>
+              <div className='qrcode-wrap__right' id='qrcodeWrap-dowload'></div>
+            </div>
+          </div>
+        </div>
+        <div className='right'>
+          <div className='share-poster right__item'>
+            <div className='title'>① 海报分享</div>
+            <div className='sub-title'>学员可通过微信扫描海报二维码，查看培训计划</div>
+            <div className='content' onClick={this.handleDownloadPoster}>
+              下载海报
+            </div>
+          </div>
+
+          <div className='share-url right__item'>
+            <div className='title'>② 链接分享</div>
+            <div className='sub-title'>学员可通过微信或浏览器打开以下链接，查看培训计划</div>
+            <div className='content url-content'>
+              <div className='share-url' id='shareUrl'>
+                {shareUrl}
+              </div>
+              <Button type='primary' onClick={this.handleCopy}>
+                复制
+              </Button>
+            </div>
+          </div>
+        </div>
+      </Modal>
+    );
+  }
+}
+
+export default ShareTrainTaskModal;

src/modules/task-center/train-task/modal/ShareTrainTaskModal.less

+.share-task-modal {
+  .ant-modal-body {
+    display: flex;
+    height: 510px !important;
+    overflow: hidden !important;
+    .left {
+      width: 303px;
+      margin: 0 32px 0 16px;
+      box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.05);
+      border-radius: 12px;
+      #poster {
+        background: #fff;
+        margin: 0;
+        padding: 20px;
+        margin-bottom: 140px;
+        .course-name-title {
+          font-size: 14px;
+          color: #333;
+          line-height: 20px;
+          margin-bottom: 4px;
+        }
+        .live-couse-name {
+          font-size: 16px;
+          color: #333333;
+          font-weight: 600;
+        }
+        .course-name {
+          color: #333;
+          font-size: 16px;
+          font-weight: 600;
+          line-height: 20px;
+        }
+
+        .course-cover {
+          width: 263px;
+          height: 143px;
+          border-radius: 6px;
+          margin-top: 8px;
+        }
+
+        .qrcode-wrap {
+          padding: 0 16px;
+          display: flex;
+          align-items: center;
+          margin: 24px 0 16px 0;
+
+          &__left {
+            width: 98px;
+            text-align: center;
+            margin-right: 22px;
+
+            .text {
+              line-height: 20px;
+            }
+
+            .finger {
+              width: 40px;
+              height: 40px;
+              margin-top: 8px;
+            }
+          }
+
+          &__right {
+            width: 110px;
+            height: 110px;
+            padding: 6px;
+          }
+        }
+
+        .store-name {
+          // padding: 8px 16px;
+          display: flex;
+          align-items: center;
+          margin-bottom: 8px;
+          .text {
+            font-size: 12px;
+            color: #999;
+            font-size: 14px;
+            line-height: 20px;
+            text-overflow: ellipsis;
+            overflow: hidden;
+            white-space: nowrap;
+            width: 100%;
+          }
+        }
+      }
+      #poster-dowload {
+        background: #fff;
+        margin: 0;
+        padding: 40px;
+        width: 606px;
+        .course-name-title {
+          font-size: 28px;
+          color: #333;
+          line-height: 40px;
+          margin-bottom: 8px;
+        }
+        .live-couse-name {
+          font-size: 32px;
+          color: #333333;
+          font-weight: 600;
+        }
+        .course-name {
+          color: #333;
+          font-size: 32px;
+          font-weight: 600;
+          line-height: 40px;
+        }
+
+        .course-cover {
+          width: 526px;
+          height: 286px;
+          border-radius: 6px;
+          margin-top: 16px;
+        }
+
+        .qrcode-wrap {
+          padding: 0 32px;
+          display: flex;
+          align-items: center;
+          margin: 48px 0 32px 0;
+
+          &__left {
+            width: 196px;
+            text-align: center;
+            margin-right: 44px;
+
+            .text {
+              line-height: 40px;
+            }
+
+            .finger {
+              width: 80px;
+              height: 80px;
+              margin-top: 16px;
+            }
+          }
+
+          &__right {
+            width: 220px;
+            height: 220px;
+            padding: 12px;
+          }
+        }
+
+        .store-name {
+          // padding: 8px 16px;
+          display: flex;
+          align-items: center;
+          margin-bottom: 16px;
+          .text {
+            font-size: 12px;
+            color: #999;
+            font-size: 28px;
+            line-height: 40px;
+            text-overflow: ellipsis;
+            overflow: hidden;
+            white-space: nowrap;
+            width: 100%;
+          }
+        }
+      }
+    }
+
+    .right {
+      .title {
+        color: #333;
+        font-weight: 500;
+      }
+
+      .sub-title {
+        color: #999;
+        margin-top: 16px;
+      }
+
+      .content {
+        display: flex;
+        align-items: center;
+        margin-top: 8px;
+        .share-url {
+          width: 212px;
+          overflow: hidden;
+          height: 28px;
+          line-height: 28px;
+          border-radius: 4px 0 0 4px;
+          padding-left: 12px;
+          white-space: nowrap;
+          color: #999999;
+          background: #efefef;
+        }
+
+        .ant-btn {
+          margin-left: -2px;
+        }
+      }
+      .url-content {
+        position: relative;
+        &:after {
+          content: '';
+          width: 12px;
+          height: 22px;
+          background: #efefef;
+          position: absolute;
+          right: 71px;
+        }
+      }
+
+      .share-poster {
+        margin-bottom: 40px;
+
+        .content {
+          color: #2966ff;
+          cursor: pointer;
+        }
+      }
+    }
+  }
+}

src/modules/teach-tool/components/CourseCategoryManage.jsx

@@ -566,7 +566,7 @@ class CourseCategoryManage extends Component {
             新增一级分类
             新增一级分类
           </Button>
           </Button>
           <div className='show-tips' style={{ marginTop: '12px', width: '900px' }}>
           <div className='show-tips' style={{ marginTop: '12px', width: '900px' }}>
-            <ShowTips message='为方便管理，该分类用于课程、培训计划、题库、知识库等模块，改动将同步各模块更新' />
+            <ShowTips message='为方便管理，该分类用于课程、题库、知识库等模块，改动将同步各模块更新' />
           </div>
           </div>
           <div className='course-category-tree'>
           <div className='course-category-tree'>
             {
             {

src/modules/teach-tool/examination-manager/TestDetailPage.jsx

@@ -2,7 +2,7 @@
  * @Author: yuananting
  * @Author: yuananting
  * @Date: 2021-04-07 16:10:21
  * @Date: 2021-04-07 16:10:21
  * @LastEditors: wufan
  * @LastEditors: wufan
- * @LastEditTime: 2021-04-26 10:21:19
+ * @LastEditTime: 2021-08-10 14:19:22
  * @Description: 助学工具-考试-考试结果
  * @Description: 助学工具-考试-考试结果
  * @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
  * @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
  */
  */
@@ -18,6 +18,7 @@ import Breadcrumbs from '@/components/Breadcrumbs';
 function TestDetailPage(props) {
 function TestDetailPage(props) {
   const examId = props.match.params.testId.replace(/\?.+/, '');
   const examId = props.match.params.testId.replace(/\?.+/, '');
   const paperId = window.getParameterByName('paperId');
   const paperId = window.getParameterByName('paperId');
+  const fromTrainingTask = window.getParameterByName('fromTrainingTask'); // 是否来自培训任务
   const userId = window.getParameterByName('userId');
   const userId = window.getParameterByName('userId');
   const [examDetail, setExamDetail] = useState({
   const [examDetail, setExamDetail] = useState({
     answerAnalysis: '',
     answerAnalysis: '',
@@ -41,6 +42,7 @@ function TestDetailPage(props) {
   const [questionList, setQuestionList] = useState([]); // 试卷题目列表
   const [questionList, setQuestionList] = useState([]); // 试卷题目列表
   const [userAnswerList, setUserAnswerList] = useState([]); // 用户答案列表
   const [userAnswerList, setUserAnswerList] = useState([]); // 用户答案列表
   const [isScrollShow, setIsScrollShow] = useState(false); // 是否展示回到顶部按钮
   const [isScrollShow, setIsScrollShow] = useState(false); // 是否展示回到顶部按钮
+  const [isShowErrorPage, setIsShowErrorPage] = useState(false); // 是否展示异常提示页面
 
 
   const { answerAnalysis, resultContent, examName, totalScore, totalQuestionCount, passScore, examDuration, userExamDuration, userScore, userCorrectQuestion } =
   const { answerAnalysis, resultContent, examName, totalScore, totalQuestionCount, passScore, examDuration, userExamDuration, userScore, userCorrectQuestion } =
     examDetail;
     examDetail;
@@ -211,16 +213,20 @@ function TestDetailPage(props) {
   });
   });
 
 
   return (
   return (
-    <div className='exam-result-page page'>
-      <Breadcrumbs navList={'答题详情'} goBack={props.history.goBack} />
+    <div className={`${fromTrainingTask ? 'exam-result-page' :'exam-result-page page'}`}>
+    {fromTrainingTask ? null : <Breadcrumbs navList={'答题详情'} goBack={props.history.goBack} />}   
 
 
       <div className='center'>
       <div className='center'>
         <div className='box'>
         <div className='box'>
+        <img
+            className="header-img"
+            src="https://image.xiaomaiketang.com/xm/6Kt6PkJcWa.png"
+          />
           <div className='box-content'>
           <div className='box-content'>
             <div
             <div
               className='exam-head'
               className='exam-head'
               style={{
               style={{
-                padding: examName.length > 20 ? '8px 0 14px' : '16px 0 29px',
+                padding: examName.length > 20 ? '8px 0 14px' : '26px 0 29px',
               }}>
               }}>
               <div className={`exam-name ${examName.length > 20 ? 'many' : 'few'}`}>{examName}</div>
               <div className={`exam-name ${examName.length > 20 ? 'many' : 'few'}`}>{examName}</div>
             </div>
             </div>

src/modules/teach-tool/examination-manager/TestDetailPage.less

@@ -19,6 +19,14 @@
     }
     }
   }
   }
   .box {
   .box {
+    position: relative;
+    .header-img {
+      height: 180px;
+      width: calc(100vw - 450px);
+      position: absolute;
+      left: 50%;
+      transform: translateX(-50%);
+    }
     .box-content {
     .box-content {
       position: relative;
       position: relative;
       width: 840px;
       width: 840px;
@@ -40,6 +48,7 @@
         .few {
         .few {
           font-size: 25px;
           font-size: 25px;
           line-height: 36px;
           line-height: 36px;
+          color: #fff;
         }
         }
       }
       }
       .empty-result {
       .empty-result {

src/routes/config/mainRoutes.tsx

@@ -23,19 +23,21 @@ import AddGraphicsCoursePage from '@/modules/course-manage/graphics-course/AddGr
 import AddOfflineCoursePage from '@/modules/course-manage/offline-course/AddOfflineCourse';
 import AddOfflineCoursePage from '@/modules/course-manage/offline-course/AddOfflineCourse';
 // import DataList from '@/modules/course-manage/DataList/DataList';
 // import DataList from '@/modules/course-manage/DataList/DataList';
 // import ClassBook from '@/modules/resource-disk';
 // import ClassBook from '@/modules/resource-disk';
-import ResourceDisk from '@/modules/resource-disk'
-import SwitchRoute from '@/modules/root/SwitchRoute'
-import PlanPage from '@/modules/plan-manage/PlanPage'
-import AddPlanPage from '@/modules/plan-manage/AddPlan'
-import LearningDataPage from '@/modules/plan-manage/LearningData'
-import StoreInfoPage from '@/modules/store-manage/StoreInfo'
-import CourseCategoryManage from '@/modules/teach-tool/components/CourseCategoryManage'
-import QuestionManageIndex from '@/modules/teach-tool/question-manage/Index'
-import PaperManageIndex from '@/modules/teach-tool/paper-manage/Index'
-import ExaminationManagerIndex from '@/modules/teach-tool/examination-manager/Index'
-import ExaminationManagerTestDetail from '@/modules/teach-tool/examination-manager/TestDetailPage'
-import KnowledgeBase from '@/modules/knowledge-base/index'
-import CollegeInfoPage from '@/modules/college-manage/CollegeInfoPage'
+import ResourceDisk from '@/modules/resource-disk';
+import SwitchRoute from '@/modules/root/SwitchRoute';
+import PlanPage from '@/modules/plan-manage/PlanPage';
+import AddPlanPage from '@/modules/plan-manage/AddPlan';
+import LearningDataPage from '@/modules/plan-manage/LearningData';
+import StoreInfoPage from '@/modules/store-manage/StoreInfo';
+import CourseCategoryManage from '@/modules/teach-tool/components/CourseCategoryManage';
+import QuestionManageIndex from '@/modules/teach-tool/question-manage/Index';
+import PaperManageIndex from '@/modules/teach-tool/paper-manage/Index';
+import ExaminationManagerIndex from '@/modules/teach-tool/examination-manager/Index';
+import ExaminationManagerTestDetail from '@/modules/teach-tool/examination-manager/TestDetailPage';
+import KnowledgeBase from '@/modules/knowledge-base/index';
+import CollegeInfoPage from '@/modules/college-manage/CollegeInfoPage';
+import TrainTaskPage from '@/modules/task-center/train-task/TrainTaskPage';
+import AddTrainTask from '@/modules/task-center/train-task/AddTrainTask';
 
 
 const mainRoutes = [
 const mainRoutes = [
   {
   {
@@ -161,6 +163,16 @@ const mainRoutes = [
     name: '培训计划',
     name: '培训计划',
   },
   },
   {
   {
+    path: '/train-task',
+    component: TrainTaskPage,
+    name: '培训任务',
+  },
+  {
+    path: '/create-train-task',
+    component: AddTrainTask,
+    name: '创建培训任务',
+  },
+  {
     path: '/create-plan',
     path: '/create-plan',
     component: AddPlanPage,
     component: AddPlanPage,
     name: '创建线上课',
     name: '创建线上课',
@@ -180,6 +192,6 @@ const mainRoutes = [
     component: LearningDataPage,
     component: LearningDataPage,
     name: '学习数据',
     name: '学习数据',
   },
   },
-]
+];
 
 
-export default mainRoutes
+export default mainRoutes;

src/routes/config/menuList.tsx

 /*
 /*
  * @Author: yuananting
  * @Author: yuananting
  * @Date: 2021-02-21 15:53:31
  * @Date: 2021-02-21 15:53:31
- * @LastEditors: wufan
- * @LastEditTime: 2021-07-05 10:29:23
+ * @LastEditors: yuananting
+ * @LastEditTime: 2021-07-28 11:29:17
  * @Description: 描述一下咯
  * @Description: 描述一下咯
  * @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
  * @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
  */
  */
@@ -44,17 +44,18 @@ export const menuList: any = [
       },
       },
     ],
     ],
   },
   },
+ 
   {
   {
-    groupName: '培训管理',
+    groupName: '任务中心',
     groupCode: 'TrainManage',
     groupCode: 'TrainManage',
     icon: '',
     icon: '',
     img: 'https://image.xiaomaiketang.com/xm/Yy6pZ6G6kS.png',
     img: 'https://image.xiaomaiketang.com/xm/Yy6pZ6G6kS.png',
     selectImg: 'https://image.xiaomaiketang.com/xm/Z8G6NMQhaH.png',
     selectImg: 'https://image.xiaomaiketang.com/xm/Z8G6NMQhaH.png',
     children: [
     children: [
       {
       {
-        groupName: '培训计划',
+        groupName: '培训任务',
         groupCode: 'TrainPlan',
         groupCode: 'TrainPlan',
-        link: '/plan',
+        link: '/train-task',
       },
       },
     ],
     ],
   },
   },