feat:解决合并代码后的冲突

package.json

@@ -68,7 +68,6 @@
     "mini-css-extract-plugin": "0.9.0",
     "moment": "^2.27.0",
     "optimize-css-assets-webpack-plugin": "5.0.3",
-    "photoclip": "3.4.8",
     "pnp-webpack-plugin": "1.6.4",
     "postcss-flexbugs-fixes": "4.1.0",
     "postcss-loader": "3.0.0",

src/bu-components/ChooseMembersModal.jsx

@@ -290,7 +290,6 @@ class ChooseMembersModal extends React.Component {
                   onSearch={this.handleSearch}
                   onChange={this.handleChangeSearchKey}
                   className='search search-input'
-               
                   enterButton={<span className="icon iconfont">&#xe832;</span>}
                 />
                 <div className='container-left-body-table'>

src/common/less/icon-font.less

 @font-face {
   font-family: 'iconfont';  /* project id 2223403 */
-  src: url('//at.alicdn.com/t/font_2223403_qb6r10go4s.eot');
-  src: url('//at.alicdn.com/t/font_2223403_qb6r10go4s.eot?#iefix') format('embedded-opentype'),
-  url('//at.alicdn.com/t/font_2223403_qb6r10go4s.woff2') format('woff2'),
-  url('//at.alicdn.com/t/font_2223403_qb6r10go4s.woff') format('woff'),
-  url('//at.alicdn.com/t/font_2223403_qb6r10go4s.ttf') format('truetype'),
-  url('//at.alicdn.com/t/font_2223403_qb6r10go4s.svg#iconfont') format('svg');
+  src: url('//at.alicdn.com/t/font_2223403_325yz7wxu2d.eot');
+  src: url('//at.alicdn.com/t/font_2223403_325yz7wxu2d.eot?#iefix') format('embedded-opentype'),
+  url('//at.alicdn.com/t/font_2223403_325yz7wxu2d.woff2') format('woff2'),
+  url('//at.alicdn.com/t/font_2223403_325yz7wxu2d.woff') format('woff'),
+  url('//at.alicdn.com/t/font_2223403_325yz7wxu2d.ttf') format('truetype'),
+  url('//at.alicdn.com/t/font_2223403_325yz7wxu2d.svg#iconfont') format('svg');
 }
 .iconfont{
   font-family:"iconfont" !important;

src/components/ImgCutModalNew.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { Modal, Button } from 'antd';
 import Service from '@/common/js/service';
 import User from '@/common/js/user';
-import PhotoClip from 'photoclip'
+// import PhotoClip from 'photoclip'
 let cutFlag = false;
 
 class ImgCutModalNew extends React.Component {

src/core/antd.less

@@ -131,6 +131,7 @@
 
 .ant-input {
   font-size: 14px !important;
+  border-color: #d9d9d9;
 }
 
 .ant-input[disabled] {
@@ -616,8 +617,17 @@ mr0 {
 .ant-table-thead > tr > th{
   font-weight:normal !important;
 }
+td.ant-table-column-sort{
+  background: none;
+}
+.ant-modal-content .ant-table-thead > tr > th{
+  padding:9px 24px;
+}
 
-
+.ant-modal-content tr > td{
+  padding:14px 24px !important;
+}
+//弹框里的table样式的处理
 
 
 //按钮的样式的公共处理
@@ -784,4 +794,6 @@ mr0 {
 .ant-table-column-sorter {
   margin-left: 2px!important;
 }
-
+.ant-table-column-sorter-full{
+  margin-top:-0.32rem !important;
+}

src/data-source/course/request-api.ts

 /*
  * @Author: wufan
  * @Date: 2020-12-12 11:57:10
- * @LastEditors: wufan
- * @LastEditTime: 2021-01-06 20:18:16
+ * @LastEditors: zhangleyuan
+ * @LastEditTime: 2021-03-05 17:20:29
  * @Description: Description
  * @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
  */
@@ -52,6 +52,11 @@ export function turnOnOrOffLiveCloudCourse(params: object) {
 export function delLiveCloudCourse(params: object) {
   return Service.Hades("public/courseCloud/delLiveCloudCourse", params);
 }
+//该接口主要用于培训计划关联直播课的接口（会筛选掉已关联的直播课）
+export function getLiveCloudCourseBasePage(params: object) {
+  return Service.Hades("public/courseCloud/getLiveCloudCourseBasePage", params);
+}
+
 //视频课相关接口
 export function changeVideoShelfState(params: object) {
   return Service.Hades("public/hades/changeVideoShelfState", params);
@@ -77,3 +82,9 @@ export function videoSchedulePage(params: object) {
 export function videoWatchInfo(params: object) {
   return Service.Hades("public/hades/videoWatchInfo", params);
 }
+export function videoScheduleBasePage(params: object) {
+  return Service.Hades("public/hades/videoScheduleBasePage", params);
+}
+export function relatedCourseToPlan(params: object) {
+  return Service.Hades("public/hades/relatedCourseToPlan", params);
+}
\ No newline at end of file

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

+/*
+ * @Author: zhangleyuan
+ * @Date: 2021-02-21 16:08:38
+ * @LastEditors: zhangleyuan
+ * @LastEditTime: 2021-03-09 12:54:31
+ * @Description: 描述一下
+ * @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
+ */
+import Service from "@/common/js/service";
+
+export function getTrainingPlanPage(params: object) {
+  return Service.Hades("public/hades/getTrainingPlanPage", params);
+}
+export function createTrainingPlan(params: object) {
+  return Service.Hades("public/hades/createTrainingPlan", params);
+}
+export function updateStateTrainingPlan(params: object) {
+  return Service.Hades("public/hades/updateStateTrainingPlan", params);
+}
+export function getTrainingPlanDetail(params: object) {
+  return Service.Hades("public/hades/getTrainingPlanDetail", params);
+}
+export function updateTrainingPlan(params: object) {
+  return Service.Hades("public/hades/updateTrainingPlan", params);
+}
+export function deleteTrainingPlan(params: object) {
+  return Service.Hades("public/hades/deleteTrainingPlan", params);
+}
+export function getPlanUserRecordPage(params: object) {
+  return Service.Hades("public/hades/getPlanUserRecordPage", params);
+}
+export function getPlanCustomerRecordPage(params: object) {
+  return Service.Hades("public/hades/getPlanCustomerRecordPage", params);
+}
+export function getPlanCustomerDetail(params: object) {
+  return Service.Hades("public/hades/getPlanCustomerDetail", params);
+}
+export function getPlanCustomerAboutUser(params: object) {
+  return Service.Hades("public/hades/getPlanCustomerAboutUser", params);
+}
+export function removePlanCustomer(params: object) {
+  return Service.Hades("public/hades/removePlanCustomer", params);
+}
+export function getStorePlanAll(params: object) {
+  return Service.Hades("public/hades/getStorePlanAll", params);
+}
+export function getTrainingCourseAutoCancel(params: object) {
+  return Service.Hades("public/hades/getTrainingCourseAutoCancel", params);
+}
\ No newline at end of file

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

 /*
  * @Author: wufan
  * @Date: 2020-11-25 18:25:02
- * @LastEditors: wufan
- * @LastEditTime: 2021-01-11 19:38:50
+ * @LastEditors: zhangleyuan
+ * @LastEditTime: 2021-03-09 10:28:03
  * @Description: Description
  * @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
  */
@@ -68,3 +68,11 @@ export function delCourseCategory(params: object) {
 export function getStoreUserBasicPage(params: object) {
   return Service.Hades("public/hades/getStoreUserBasicPage", params);
 }
+export function updateStoreMessage(params: object) {
+  return Service.Hades("public/hades/updateStoreMessage", params);
+}
+export function getStoreDetail(params: object) {
+  return Service.Hades("public/hades/getStoreDetail", params);
+}
+
+

src/domains/basic-domain/constants.ts

 /*
  * @Author: 陈剑宇
  * @Date: 2020-05-07 14:43:01
- * @LastEditTime: 2021-02-23 18:13:40
+ * @LastEditTime: 2021-03-01 10:09:42
  * @LastEditors: zhangleyuan
  * @Description: 
  * @FilePath: /wheat-web-demo/src/domains/basic-domain/constants.ts

src/domains/course-domain/CourseService.ts

 /*
  * @Author: wufan
  * @Date: 2020-11-25 18:25:02
- * @LastEditors: wufan
- * @LastEditTime: 2021-01-06 20:17:40
+ * @LastEditors: zhangleyuan
+ * @LastEditTime: 2021-03-05 17:20:56
  * @Description: Description
  * @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
  */
 import {
   fetchLecturerData, fetchUserData, exportStudentCourseData, exportPlayBackCourseData, fetchPlaybackList, createLiveCloudCourse, getLiveCloudCoursePage,
-  getLiveCloudCourseDetail, updateLiveCloudCourse, turnOnOrOffLiveCloudCourse, delLiveCloudCourse, changeVideoShelfState, createVideoSchedule, delVideoSchedule, editVideoSchedule, userWatchInfo, videoSchedulePage, videoScheduleDetail, videoWatchInfo, getQrcode
+  getLiveCloudCourseDetail, updateLiveCloudCourse, turnOnOrOffLiveCloudCourse, delLiveCloudCourse, changeVideoShelfState, createVideoSchedule, delVideoSchedule, 
+  editVideoSchedule, userWatchInfo, videoSchedulePage, videoScheduleDetail, videoWatchInfo, getQrcode,getLiveCloudCourseBasePage,videoScheduleBasePage,relatedCourseToPlan
 } from '@/data-source/course/request-api';
 
 export default class courseService {
@@ -84,4 +85,13 @@ export default class courseService {
   static videoWatchInfo(params: any) {
     return videoWatchInfo(params);
   }
+  static getLiveCloudCourseBasePage(params: any){
+    return getLiveCloudCourseBasePage(params);
+  }
+  static videoScheduleBasePage(params: any){
+    return videoScheduleBasePage(params);
+  }
+  static relatedCourseToPlan(params: any){
+    return relatedCourseToPlan(params);
+  }
 }
\ No newline at end of file

src/domains/course-domain/constants.ts

@@ -2,7 +2,7 @@
  * @Author: 吴文洁
  * @Date: 2020-08-20 09:21:40
  * @LastEditors: zhangleyuan
- * @LastEditTime: 2021-01-27 19:53:17
+ * @LastEditTime: 2021-02-20 17:08:58
  * @Description: 
  * @Copyright: 杭州杰竞科技有限公司 版权所有
  */

src/domains/plan-domain/planService.ts

+/*
+ * @Author: zhangleyuan
+ * @Date: 2021-02-21 16:15:38
+ * @LastEditors: zhangleyuan
+ * @LastEditTime: 2021-03-09 12:54:46
+ * @Description: 描述一下
+ * @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
+ */
+import {getTrainingPlanPage,createTrainingPlan,updateStateTrainingPlan,getTrainingPlanDetail,updateTrainingPlan,deleteTrainingPlan,getPlanUserRecordPage,getPlanCustomerRecordPage,getPlanCustomerDetail,getPlanCustomerAboutUser,removePlanCustomer,getStorePlanAll,getTrainingCourseAutoCancel} from '@/data-source/plan/request-apis';
+export default class PlanService {
+    // 获取员工列表 
+    static getTrainingPlanPage(params: any) {
+      return getTrainingPlanPage(params);
+    }
+    static createTrainingPlan(params: any) {
+      return createTrainingPlan(params);
+    } 
+    static updateStateTrainingPlan(params: any) {
+      return updateStateTrainingPlan(params);
+    } 
+    static getTrainingPlanDetail(params: any) {
+      return getTrainingPlanDetail(params);
+    } 
+    static updateTrainingPlan(params: any) {
+      return updateTrainingPlan(params);
+    } 
+    static deleteTrainingPlan(params: any) {
+      return deleteTrainingPlan(params);
+    } 
+    static getPlanUserRecordPage(params: any) {
+      return getPlanUserRecordPage(params);
+    } 
+    static getPlanCustomerRecordPage(params: any) {
+      return getPlanCustomerRecordPage(params);
+    }
+    static getPlanCustomerDetail(params: any) {
+      return getPlanCustomerDetail(params);
+    } 
+    static getPlanCustomerAboutUser(params: any) {
+      return getPlanCustomerAboutUser(params);
+    }
+    static removePlanCustomer(params: any) {
+      return removePlanCustomer(params);
+    }
+    static getStorePlanAll(params: any) {
+      return getStorePlanAll(params);
+    }
+    static getTrainingCourseAutoCancel(params: any) {
+      return getTrainingCourseAutoCancel(params);
+    }
+}
\ No newline at end of file

src/domains/store-domain/constants.ts

+/*
+ * @Author: zhangleyuan
+ * @Date: 2021-01-19 11:27:56
+ * @LastEditors: zhangleyuan
+ * @LastEditTime: 2021-03-08 10:36:04
+ * @Description: 描述一下
+ * @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
+ */
 
 export const storeRoleEnum = {
     "0": "店铺管理员",
     "1": "管理员",
     "2": "普通讲师"
 };
+export const industryList = ["IT服务","制造业","批发/零售","生活服务","文化/体育/娱乐业","建筑/房地产","教育","运输/物流/仓储","医疗","政府","金融","能源/采矿","农林渔牧","其他行业"];
+
+export const childIndustryList = {
+    "IT服务":["计算机软件/硬件/信息服务","互联网和相关服务","其他"],
+    "制造业":["机械/电子","服装/纺织","汽车","金属制品","家具/家纺","重工制造","家电/数码","橡胶/塑料","日用品/化妆品","化学原料制品","文教/工美/体育/娱乐用品","烟酒/茶","非金属矿物","其他"],
+    "批发/零售":["批发","零售","超市/便利店/百货商场","进出口","其他"],
+    "生活服务":["餐饮","居民服务","租赁和商务服务","酒店/住宿","其他"],
+    "文化/体育/娱乐业":["文化/体育","娱乐/旅游","新闻传媒","其他"],
+    "建筑/房地产":["建筑业","建材装修","房地产","其他"],
+    "教育":["学前教育","初中等教育","高等教育","培训机构","其他"],
+    "运输/物流/仓储":["物流/仓储","道路/铁路运输","邮政/快递","航空运输","水上运输","其他"],
+    "医疗":["医院/医疗机构","医疗器械","医药制造","医药流通","其他"],
+    "政府":["党政机关","国家权利/行政机构","检察院/法院/公安","民政/人社/交通/卫生","发改委/经信委/商务局/统计局","国土/规划","税务/海关/工商/环保/物价/药品","政协/民主党派","地方政府","其他"],
+    "金融":["保险","银行","证券/投资/基金","其他"],
+    "能源/采矿":["电力/热力/燃气/水供应业","石油/天然气","煤炭","有色金属","钢铁","其他"],
+    "农林渔牧":["农林渔牧"],
+    "其他行业":["科学研究和技术服务业","社会组织","水利和环境管理","国际组织","其他"]
+}
\ No newline at end of file

src/domains/store-domain/storeService.ts

@@ -2,11 +2,13 @@
  * @Author: wufan
  * @Date: 2020-11-25 18:25:02
  * @LastEditors: zhangleyuan
- * @LastEditTime: 2020-12-23 16:54:10
+ * @LastEditTime: 2021-03-08 11:48:43
  * @Description: Description
  * @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
  */
-import { getEmployeeList, getUserList, getStoreDecorationList, getStoreRole, addEmployee, editEmployee, deleteEmployee, getCourseCatalogList, getAllSonCategory, addCourseCategory, delCourseCategory, editCourseCategory, deleteStoreDecorationList, addStoreBanner, editStoreBanner, moveBannerSequence,getStoreUserBasicPage} from '@/data-source/store/request-apis';
+import { getEmployeeList, getUserList, getStoreDecorationList, getStoreRole, addEmployee, editEmployee, deleteEmployee, getCourseCatalogList,
+   getAllSonCategory, addCourseCategory, delCourseCategory, editCourseCategory, deleteStoreDecorationList, addStoreBanner, editStoreBanner,
+    moveBannerSequence,getStoreUserBasicPage,updateStoreMessage,getStoreDetail} from '@/data-source/store/request-apis';
 
 export default class StoreService {
   // 获取员工列表 
@@ -81,5 +83,10 @@ export default class StoreService {
   static delCourseCategory(params: any) {
     return delCourseCategory(params);
   }
-  
+  static updateStoreMessage(params: any) {
+    return updateStoreMessage(params);
+  }
+  static getStoreDetail(params: any) {
+    return getStoreDetail(params);
+  }
 }
\ No newline at end of file

src/h5.html

 <!--
  * @Author: 吴文洁
  * @Date: 2020-08-24 12:20:57
- * @LastEditors: wufan
- * @LastEditTime: 2021-01-12 13:52:14
+ * @LastEditors: zhangleyuan
+ * @LastEditTime: 2021-03-17 09:41:02
  * @Description: 
  * @Copyright: 杭州杰竞科技有限公司 版权所有
 -->
@@ -25,7 +25,7 @@
       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="stylesheet" href="//at.alicdn.com/t/font_2223403_80qwxi5x2ed.css">
+    <link rel="stylesheet" href="//at.alicdn.com/t/font_2223403_325yz7wxu2d.css">
 
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
@@ -37,7 +37,10 @@
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
     <title>小麦企培</title>
-    
+    <script type="text/javascript" src="https://image.xiaomaiketang.com/xm/iscroll-zoom-min.js"></script>
+    <script type="text/javascript" src="https://image.xiaomaiketang.com/xm/hammer.min.js"></script>
+    <script type="text/javascript" src="https://image.xiaomaiketang.com/xm/lrz.all.bundle.js"></script>
+    <script type="text/javascript" src="https://image.xiaomaiketang.com/xm/PhotoClip.js"></script>
     <script type="text/javascript" charset="utf-8" src="//g.alicdn.com/sd/ncpc/nc.js?t=2015052012"></script>
   </head>
   <body>

src/index.html

@@ -2,7 +2,7 @@
  * @Author: 吴文洁
  * @Date: 2020-08-24 12:20:57
  * @LastEditors: zhangleyuan
- * @LastEditTime: 2021-01-25 20:44:39
+ * @LastEditTime: 2021-03-17 09:41:11
  * @Description: 
  * @Copyright: 杭州杰竞科技有限公司 版权所有
 -->
@@ -25,7 +25,7 @@
       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="stylesheet" href="//at.alicdn.com/t/font_2223403_80qwxi5x2ed.css">
+    <link rel="stylesheet" href="//at.alicdn.com/t/font_2223403_325yz7wxu2d.css">
 
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
@@ -37,7 +37,10 @@
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
     <title>小麦企培</title>
-    
+    <script type="text/javascript" src="https://image.xiaomaiketang.com/xm/iscroll-zoom-min.js"></script>
+    <script type="text/javascript" src="https://image.xiaomaiketang.com/xm/hammer.min.js"></script>
+    <script type="text/javascript" src="https://image.xiaomaiketang.com/xm/lrz.all.bundle.js"></script>
+    <script type="text/javascript" src="https://image.xiaomaiketang.com/xm/PhotoClip.js"></script>
     <script type="text/javascript" charset="utf-8" src="//g.alicdn.com/sd/ncpc/nc.js?t=2015052012"></script>
   </head>
   <body>

src/modules/course-manage/AddLive.jsx

@@ -237,17 +237,6 @@ handleChangeBasicInfo = (field, value) => {
         assistantStoreUserId:type==='assistantType'?_.pluck(optionValue, "key"):assistantStoreUserId,
       }
     });
-
-    // 批量开始时间改变，结束时间自动同步一致
-    // if (field === 'startTime') {
-    //   this.setState({
-    //     addLiveClassInfo: {
-    //       ...this.state.addLiveClassInfo,
-    //       [field]: _value,
-    //       endTime: _value,
-    //     }
-    //   });
-    // }
   }
 
   // 修改简介
@@ -346,7 +335,9 @@ handleChangeBasicInfo = (field, value) => {
         CourseService.createLiveCloudCourse(params).then((res) => {
           if (res.success){
             message.success("新建成功");
-            window.RCHistory.goBack();
+            window.RCHistory.push({
+              pathname: `/live-course`,
+            });
           }  
         });
 
@@ -359,7 +350,9 @@ handleChangeBasicInfo = (field, value) => {
         CourseService.updateLiveCloudCourse(params).then((res) => {
           if (res.success){
             message.success("更新成功");
-            window.RCHistory.goBack();
+            window.RCHistory.push({
+              pathname: `/live-course`,
+            });
           }
         });
       }
@@ -493,11 +486,15 @@ handleChangeBasicInfo = (field, value) => {
         cancelText: '留在本页',
         icon: <span className="icon iconfont default-confirm-icon">&#xe6f4;</span>,
         onOk: () =>  {
-          window.RCHistory.goBack();
+          window.RCHistory.push({
+            pathname: `/live-course`,
+          });
         }
       })
     } else {
-      window.RCHistory.goBack();
+      window.RCHistory.push({
+        pathname: `/live-course`,
+      });
     }
   }
 

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

@@ -13,7 +13,7 @@ import { ImgCutModalNew } from '@/components';
 import StoreService from "@/domains/store-domain/storeService";
 import SelectPrepareFileModal from '@/modules/prepare-lesson/modal/SelectPrepareFileModal';
 import Upload from '@/core/upload';
-import PhotoClip from 'photoclip'
+// import PhotoClip from 'photoclip'
 
 import './AddLiveBasic.less';
 

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

@@ -15,7 +15,7 @@ import DownloadLiveModal from '@/components/DownloadLiveModal';
 
 import ManageCoursewareModal from '../modal/ManageCoursewareModal';
 import ShareLiveModal from '../modal/ShareLiveModal';
-
+import RelatedPlanModal from '../modal/RelatedPlanModal';
 
 import './LiveCourseList.less';
 import { QuestionCircleOutlined } from '@ant-design/icons';
@@ -56,7 +56,9 @@ class LiveCourseList extends React.Component {
     this.state = {
       columns: [],
       openDownloadModal:false,
-      url:''
+      url:'',
+      RelatedPlanModalVisible:false,
+      selectPlanList:{}
     }
   }
   componentWillMount(){
@@ -271,6 +273,40 @@ class LiveCourseList extends React.Component {
           },
         },
         {
+          title: '创建时间',
+          width: "9%",
+          key: "created",
+          dataIndex: "created",
+          sorter: true,
+          render: (val, item) => {
+            return (
+              <span>{formatDate('YYYY-MM-DD H:i', val)}</span>
+            );
+          },
+        },
+        {
+          title: '关联项',
+          width: "15%",
+          key: "planList",
+          dataIndex: "planList",
+          render: (val, record) => {
+            return  (
+              <div className="related-task">
+                  { record.relatedPlanList ?
+                   <Tooltip title={this.handlePlanName(record.relatedPlanList)} placement="top" arrowPointAtCenter>
+                     { record.relatedPlanList.map((item,index)=>{
+                        return <span>{item.planName} { (index < record.relatedPlanList.length-1)&&(<span> 、</span>)} </span>
+                      })
+                      }
+                   </Tooltip>
+                    :
+                    <span></span>
+                  }
+              </div>
+            )
+          },
+        },
+        {
           title: "操作",
           width: "15%",
           key: "operate",
@@ -456,11 +492,42 @@ class LiveCourseList extends React.Component {
             );
           },
         },
+        {
+          title: '创建时间',
+          width: "9%",
+          key: "created",
+          dataIndex: "created",
+          sorter: true,
+          render: (val, item) => {
+            return (
+              <span>{formatDate('YYYY-MM-DD H:i', val)}</span>
+            );
+          },
+        },
+        {
+          title: '关联项',
+          width: "15%",
+          key: "planList",
+          dataIndex: "planList",
+          render: (val, record) => {
+            return  (
+              <div className="related-task">
+                  { record.relatedPlanList ?
+                   <Tooltip title={this.handlePlanName(record.relatedPlanList)} placement="top" arrowPointAtCenter>
+                     { record.relatedPlanList.map((item,index)=>{
+                        return <span>{item.planName} { (index < record.relatedPlanList.length-1)&&(<span> 、</span>)} </span>
+                      })
+                      }
+                   </Tooltip>
+                    :
+                    <span></span>
+                  }
+              </div>
+            )
+          },
+        },
       ];
     }
-  
-
-
     this.setState({ columns })
   }
   handleAdminName = (adminArray)=>{
@@ -474,9 +541,28 @@ class LiveCourseList extends React.Component {
     })
     return adminStr
   }
+
+  handlePlanName = (planArray)=>{
+    let planStr = "";
+    planArray.map((item,index)=>{
+      if(index < planArray.length-1){
+        planStr = planStr + item.planName + '、';
+      }else{
+        planStr = planStr + item.planName
+      }
+    })
+    return planStr
+  }
+
   renderMoreOperate = (item) => {
     return (
       <div className="live-course-more-menu">
+         { (User.getUserRole() === "CloudManager" || User.getUserRole() === "StoreManager") &&
+          <div
+            className="operate__item"
+            onClick={()=>this.handleRelatedModalShow(item)}
+          >关联培训计划</div>
+        }
           <div
             className="operate__item"
             onClick={()=>this.toEditCoursePage(item)}
@@ -597,14 +683,65 @@ class LiveCourseList extends React.Component {
     }
     window.open(htmlUrl);
   }
+  handleRelatedModalShow = (item)=>{
 
+    const selectPlanList = {};
+    if(item.relatedPlanList){
+      item.relatedPlanList.map((item,index)=>{
+        selectPlanList[item.planId] = {}
+        selectPlanList[item.planId].planId = item.planId;
+        selectPlanList[item.planId].taskBaseVOList = [{taskId:item.taskId}];
+        return item
+      })
+    }
+
+    this.setState({
+      RelatedPlanModalVisible:true,
+      selectCourseId:item.liveCourseId,
+      selectPlanList:selectPlanList
+    })
+  }
+  closeRelatedPlanModalVisible = ()=>{
+    this.setState({
+      RelatedPlanModalVisible:false
+    })
+  }
+  onChangeSelectPlanList = (selectPlanList)=>{
+    this.setState({
+      selectPlanList:selectPlanList
+    })
+  }
+  onConfirmSelectPlanList = ()=>{
+    this.setState({
+      RelatedPlanModalVisible:false
+    },()=>{this.props.onChange();})
+  }
+  handleChangeTable = (pagination, filters, sorter) => {
+    const { columnKey, order } = sorter;
+    const { query } = this.props;
+    let  _columnKey;
+    let _order;
+    // 按创建时间升序排序
+    if (columnKey === 'created' && order === 'ascend') {_columnKey="CREATED"; _order = 'SORT_ASC'; }
+    // 按创建时间降序排序
+    if (columnKey === 'created' && order === 'descend') { _columnKey="CREATED"; _order = 'SORT_DESC';}
+    const _query = {
+      ...query,
+      sortMap:{}
+    };
+    _query.sortMap[_columnKey]=_order;
+    this.props.onChange(_query);
+  }
   render() {
     const { total, query, courseList, loading} = this.props;
     const { current, size } = query;
     const { openDownloadModal,
       downloadUrl, url, columns,
       openCoursewareModal,
-      editData
+      editData,
+      RelatedPlanModalVisible,
+      selectCourseId,
+      selectPlanList
     } = this.state;
     const { match } = this.props;
     
@@ -617,6 +754,7 @@ class LiveCourseList extends React.Component {
           columns={columns}
           loading={loading}
           dataSource={courseList}
+          onChange={this.handleChangeTable}
           rowKey={(row) => row.liveCourseId}
         />
         { total>0 &&
@@ -655,6 +793,16 @@ class LiveCourseList extends React.Component {
             }}
           />
         )}
+        { RelatedPlanModalVisible &&
+          <RelatedPlanModal 
+            onClose={this.closeRelatedPlanModalVisible}
+            visible={RelatedPlanModalVisible}
+            selectCourseId={selectCourseId}
+            selectPlanList={selectPlanList}
+            onChange={this.onChangeSelectPlanList}
+            onConfirm={this.onConfirmSelectPlanList}
+          />
+        }
         <iframe src={url} style={{ display: "none" }} />
         <Route path={`${match.url}/live-course-data`} component={DataList} />
       </div>

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

@@ -67,6 +67,15 @@
     
 
   }
+  .related-task{
+    text-overflow: -o-ellipsis-lastline;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    line-clamp: 2;
+    -webkit-box-orient: vertical;
+  }
   .categoryName{
     font-size: 14px;
     color: #666666;

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

+import React from 'react';
+import {Table, Modal,Input} from 'antd';
+import { PageControl } from "@/components";
+import CourseService from "@/domains/course-domain/CourseService";
+import PlanService from "@/domains/plan-domain/planService";
+import User from '@/common/js/user'
+import './RelatedPlanModal.less';
+import _ from "underscore";
+const { Search } = Input;
+class RelatedPlanModal extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      dataSource:[],
+      size:10,
+      query: {
+        current: 1,
+      },
+      totalCount:0,
+      selectPlanList:{},
+    };
+  }
+
+  componentDidMount() {
+    this.handleFetchDataList();
+  }
+  // 获取培训计划列表
+  handleFetchDataList = () => {
+    const {query,size,totalCount} = this.state
+    const params ={
+      ...query,
+      size,
+      storeId:User.getStoreId()
+    }
+    PlanService.getStorePlanAll(params).then((res) => {
+      const { result = {} } = res ;
+      const { records = [], total = 0 } = result;
+      this.setState({
+        dataSource: records,
+        totalCount: Number(total)
+      });
+    });
+  }
+  handleChangePlanName = (value)=>{
+    const {query} = this.state;
+    query.planName = value;
+    query.current = 1;
+    this.setState({
+      query
+    })
+  }
+
+  onShowSizeChange = (current, size) => {
+    if (current == size) {
+      return
+    }
+    this.setState({
+      size
+    },()=>{this.handleFetchDataList()})
+  }
+
+  // 请求表头
+  parsePlanColumns = () => {
+    const columns = [
+      {
+        title: '培训计划',
+        key: 'planName',
+        dataIndex: 'planName',
+        render:(val,record)=>{
+          return (
+            <span>{val}</span>
+          )
+        }
+      }
+    ];
+    return columns;
+  }
+
+  parseTaskColumns = (parentIndex) => {
+    const columns = [
+      {
+        title: '任务名称',
+        key: 'taskName',
+        dataIndex: 'taskName',
+        render:(val,record)=>{
+          return (
+            <span>{val}</span>
+          )
+        }
+      }
+    ];
+    return columns;
+  }
+  selectPlanList = (record,selected,planId) =>{
+    const { selectPlanList } = this.props;
+    let _selectPlanList = {...selectPlanList};
+    
+    if (selected) { 
+      if(!_selectPlanList[planId]){
+        _selectPlanList[planId] = {}
+      }
+      _selectPlanList[planId].taskBaseVOList = [];
+      _selectPlanList[planId].planId = planId;
+      _selectPlanList[planId].taskBaseVOList.push(record);
+    } else {
+      if(!_selectPlanList[planId]){
+        _selectPlanList[planId] = {}
+      }
+      _selectPlanList[planId].taskBaseVOList = [];
+      _selectPlanList[planId].planId =  planId;
+    }
+    this.props.onChange(_selectPlanList);
+    // this.setState({selectPlanList:_selectPlanList});
+  }
+  handleSelectPlanListData(selectPlanList){
+    let _selectPlanList = [];
+    for(let key  in selectPlanList ){
+      let item = {}; 
+      if(selectPlanList[key].taskBaseVOList){
+        item.planId = selectPlanList[key].planId;
+        if(selectPlanList[key].taskBaseVOList[0]){
+          item.taskId  = selectPlanList[key].taskBaseVOList[0].taskId;
+        }
+      }
+      if(item.taskId){
+        _selectPlanList.push(item)
+      }
+    }
+    return _selectPlanList;
+  }
+  confirmRelatedPlan =()=>{
+    const {selectPlanList } = this.props;
+    const params = {
+      courseId:this.props.selectCourseId,
+      relatedPlanList:this.handleSelectPlanListData(selectPlanList),
+      storeId:User.getStoreId(),
+    }
+    CourseService.relatedCourseToPlan(params).then((res) => {
+      this.props.onConfirm();
+    });
+  }
+  getSelectLength = (selectList)=>{
+    let num = 0;
+    for(let key  in selectList ){
+      if(selectList[key].taskBaseVOList.length > 0){
+        num = num + 1
+      }
+    }
+    return num;
+  }
+  clearSelect = ()=>{
+    const _selectPlanList = {};
+    this.props.onChange(_selectPlanList);
+  }
+  render() {
+    const { size,dataSource,totalCount,query} = this.state;
+    const { visible,selectPlanList} = this.props;
+    return (
+        <Modal
+          title="关联培训计划"
+          onCancel={this.props.onClose}
+          maskClosable={false}
+          visible={visible}
+          className="related-plan-modal"
+          closable={true}
+          width={800}
+          onOk={() => this.confirmRelatedPlan() } 
+          closeIcon={<span className="icon iconfont modal-close-icon">&#xe6ef;</span>} 
+        >
+          <div className="search-container">
+            <Search placeholder="搜索培训计划名称"  
+              style={{ width: 207 }}  
+              onChange={(e) => { this.handleChangePlanName(e.target.value)}}  
+              onSearch={ () => { this.handleFetchDataList()}} 
+              enterButton={<span className="icon iconfont">&#xe832;</span>}
+            />
+          </div>
+          <div className="select-container"> 
+            <span className="con">
+              <div>
+                <span className="icon iconfont tip">&#xe6f2;</span>
+                <span className="text">已选择{this.getSelectLength(selectPlanList)}个任务</span>
+              </div>
+              <div>
+                <span className="clear" onClick={this.clearSelect}>清空</span>
+              </div>
+            </span>
+          </div>
+          <div>
+            <Table
+              rowKey={record => record.planId}
+              className="plan-table"
+              dataSource={dataSource}
+              columns={this.parsePlanColumns()}
+              pagination={false}
+              expandedRowRender={(_record,index) => {
+                if(!_record.taskBaseVOList){
+                  return
+                }
+                if (_record.taskBaseVOList.length !== 0 ){
+                  const selectPlan = selectPlanList[_record.planId]
+                  let taskBaseVOList = [];
+                  if(selectPlan){
+                    taskBaseVOList = selectPlan.taskBaseVOList;
+                  }
+
+                  console.log('taskBaseVOList',taskBaseVOList);
+
+                  return  <div>
+                            <Table
+                              rowKey={record => record.taskId}
+                              pagination={false}
+                              dataSource={_record.taskBaseVOList}
+                              columns={this.parseTaskColumns(index)}
+                              className="child-table"
+                              rowSelection={{
+                                type: 'checkbox',
+                                selectedRowKeys: _.pluck(taskBaseVOList, 'taskId'),
+                                onSelect: (record, selected) => {
+                                  this.selectPlanList(record,selected,_record.planId);
+                                },
+                                onSelectAll: (selected, _selectedRows, changeRows) => {
+                                },
+                              }}
+                            />
+                      </div>
+                }
+              }}
+              rowClassName={(record,index)=>{if(index%2===0){return 'odd-row'}else{ return 'even-row'}}}
+            />
+            {dataSource.length >0 &&
+              <div className="box-footer">
+                <PageControl
+                  current={query.current - 1}
+                  pageSize={size}
+                  total={totalCount}
+                  size="small"
+                  toPage={(page) => {
+                    const _query = {...query, current: page + 1};
+                    this.setState({
+                      query:_query
+                    },()=>{ this.handleFetchDataList()})
+                  }}
+                  onShowSizeChange={this.onShowSizeChange}
+                />
+              </div>
+            }
+          </div>
+        </Modal>
+    )
+  }
+}
+
+export default RelatedPlanModal;
\ No newline at end of file

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

+.related-plan-modal{
+    .search-container{
+        margin-bottom:16px;
+    }
+    .select-container{
+        margin-bottom:12px;
+        .con{
+            background: #FFF4DD;
+            border-radius: 4px;
+            padding:6px 16px;
+            display: inline-flex;
+            align-items: center;
+            justify-content: space-between;
+            .tip{
+                font-size:14px;
+                color:#FF9D14;
+                margin-right:8px;
+            }
+            .text{
+                font-size:14px;
+                color:#666;
+                margin-right:30px;
+            }
+            .clear{
+                color:#5289FA;
+                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;
+                line-height: 16px;
+                border: 1px solid #999999;
+                margin-right:4px;
+                border-radius: 2px;
+            }
+            .course-name{
+                color:#666666;
+                font-size:14px;
+                margin-right:8px;
+            }
+            .tip{
+                font-size:14px;
+                color:#FF4F4F;
+                margin-right:2px;
+            }
+            .course-state{
+                color:#999;
+                font-size:14px;
+            }
+        }
+        .ant-table-content{
+            border:1px solid #e8e8e8;
+            tr{
+                td{
+                    border:none;
+                }
+                .child-table{
+                    .ant-table-content{
+                        border:none;
+                        thead{
+                            display:none;
+                        }
+                        tbody tr td{
+                            border-bottom:none;
+                        }
+                    }
+                  
+                } 
+            }
+            .odd-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;
+                        }
+                    }
+                }
+            }
+            .even-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;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
\ No newline at end of file

src/modules/course-manage/video-course/AddVideoCourse.jsx

@@ -2,7 +2,7 @@
  * @Author: 吴文洁
  * @Date: 2020-08-05 10:07:47
  * @LastEditors: zhangleyuan
- * @LastEditTime: 2021-03-04 10:26:07
+ * @LastEditTime: 2021-03-12 10:12:23
  * @Description: 视频课新增/编辑页
  * @Copyright: 杭州杰竞科技有限公司 版权所有
  */
@@ -23,6 +23,8 @@ import StoreService from "@/domains/store-domain/storeService";
 import CourseService from "@/domains/course-domain/CourseService";
 import User from '@/common/js/user';
 import _ from "underscore";
+import Upload from '@/core/upload';
+// import PhotoClip from 'photoclip';
 import './AddVideoCourse.less';
 
 const EDIT_BOX_KEY = Math.random();
@@ -38,7 +40,7 @@ const defaultScheduleMedia = [{
 }]
 const whetherVisitorsJoin = 'NO'
 
-
+let cutFlag = false;
 class AddVideoCourse extends React.Component {
 
   constructor(props) {
@@ -71,17 +73,17 @@ class AddVideoCourse extends React.Component {
       categoryName:null, //分类名称
       courseCatalogList:[], //分类列表
       categoryId:null, //分类的Id值
-      whetherVisitorsJoin:'NO' // 是否允许游客加入
+      whetherVisitorsJoin:'NO', // 是否允许游客加入
+      showSelectCoverModal:false,
+      cutImageBlob: null,
     }
   }
 
   componentWillMount() {
-    // this.handleFetchDiskList();
     const { id, pageType } = this.state;
     this.getCourseCatalogList();
     if (pageType === 'edit') {
       this.handleFetchScheudleDetail(id);
-      // this.handleFetchStudentList(id);
     }
   }
   //获取分类列表
@@ -114,15 +116,7 @@ class AddVideoCourse extends React.Component {
     }).then((res) => {
       const { result = {} } = res || {};
       const {
-        // coverId,
-        // coverUrl,
-        // videoType,
-        // videoDuration,
-        // videoName,
-        // scheduleMedia,
         courseName,
-        // scheduleVideoId,
-        // scheduleVideoUrl,
         shelfState,
         whetherVisitorsJoin,
         courseMediaVOS,
@@ -206,17 +200,20 @@ class AddVideoCourse extends React.Component {
         cancelText: '留在本页',
         icon: <span className="icon iconfont default-confirm-icon">&#xe6f4;</span>,
         onOk: () => {
-          RCHistory.goBack();
+          window.RCHistory.push({
+            pathname: `/video-course`,
+          });
         }
       });
     }else{
-      RCHistory.goBack();
+      window.RCHistory.push({
+        pathname: `/video-course`,
+      });
     }
   }
 
   // 修改表单
   handleChangeForm = (field, value, coverUrl) => {
-    console.log('field',value);
     this.setState({
       [field]: value,
       coverUrl: coverUrl ? coverUrl : this.state.coverUrl
@@ -228,9 +225,6 @@ class AddVideoCourse extends React.Component {
     this.setState({ studentModal : true });
 
     const { studentList, selectedStuList } = this.state;
-    // const _studentList = _.map(studentList, (item) => { 
-    //   return item.studentId
-    // })
     const studentModal = (
       <SelectStudent
         showTabs={true}
@@ -316,15 +310,6 @@ class AddVideoCourse extends React.Component {
     }
   }
 
-  // 上传封面图
-  handleShowImgCutModal = (event) => {
-    const imageFile = event.target.files[0];
-    if (!imageFile) return;
-    this.setState({
-      imageFile,
-      showCutModal: true,
-    });
-  }
   // 保存
   handleSubmit = () => {
     const { instId, adminId } = window.currentUserInstInfo;
@@ -368,7 +353,9 @@ class AddVideoCourse extends React.Component {
         CourseService.createVideoSchedule(commonParams).then((res) => {
           if (!res) return;
           message.success("新建成功");
-          window.RCHistory.goBack();
+          window.RCHistory.push({
+            pathname: `/video-course`,
+          });
         })
       } else {
         const editParams = {
@@ -378,7 +365,9 @@ class AddVideoCourse extends React.Component {
         CourseService.editVideoSchedule(editParams).then((res) => {
           if (!res) return;
           message.success("保存成功");
-          window.RCHistory.goBack();
+          window.RCHistory.push({
+            pathname: `/video-course`,
+          });
         });
       }
     });
@@ -412,14 +401,122 @@ class AddVideoCourse extends React.Component {
       resolve(true);
     });
   }
+  handleSelectCover = (file)=> {
+    this.uploadImage(file);
+  }
+  
+  //上传图片
+  uploadImage = (imageFile) => {
+    const { folderName } = imageFile;
+    const fileName = window.random_string(16) + folderName.slice(folderName.lastIndexOf("."));
+    const self = this;
+    this.setState(
+      {
+        visible: true,
+      },
+      () => {
+        setTimeout(() => {
+          const okBtnDom = document.querySelector("#headPicModal");
+          const options = {
+            size: [500, 282],
+            ok: okBtnDom,
+            maxZoom: 3,
+            style: {
+              jpgFillColor: "transparent",
+            },
+            done: function (dataUrl) {
+              clearTimeout(self.timer);
+              self.timer = setTimeout(() => {
+                if ((self.state.rotate != this.rotate()) || (self.state.scale != this.scale())) {
+                  const _dataUrl = this.clip()
+                  const cutImageBlob = self.convertBase64UrlToBlob(_dataUrl);
+                  self.setState({
+                    cutImageBlob,
+                    dataUrl: _dataUrl,
+                    rotate: this.rotate(),
+                    scale: this.scale()
+                  })
+                }
+
+              }, 500)
+
+              const cutImageBlob = self.convertBase64UrlToBlob(dataUrl);
+              self.setState({
+                cutImageBlob,
+                dataUrl
+              })
+              setTimeout(() => {
+                cutFlag = false;
+              }, 2000);
+            },
+            fail: (failInfo) => {
+              message.error("图片上传失败了，请重新上传");
+            },
+            loadComplete: function (img) {
+              setTimeout(() => {
+                const _dataUrl = this.clip()
+                self.setState({
+                  dataUrl: _dataUrl,
+                  hasImgReady: true 
+                })
+              }, 100)
+
+            },
+          };
+          const imgUrl = `${imageFile.ossUrl}?${new Date().getTime()}`
+          if (!this.state.photoclip) {
+            const _photoclip = new PhotoClip("#headPicModal", options);
+            _photoclip.load(imgUrl);
+            this.setState({
+              photoclip: _photoclip,
+            });
+          } else {
+            this.state.photoclip.clear();
+            this.state.photoclip.load(imgUrl);
+          }
+
+        }, 200);
+      }
+    );
+  };
+
+  //获取resourceId
+  getSignature = (blob, fileName) => {
+    Upload.uploadBlobToOSS(blob, 'cover' + (new Date()).valueOf(),null,'signInfo').then((signInfo) => {
+      this.setState({
+        coverClicpPath:signInfo.fileUrl,
+        coverId:signInfo.resourceId,
+        visible: false
+      },()=>this.updateCover())
     
+    });
+  };
+  updateCover = () =>{
+    const {coverClicpPath,coverId} = this.state
+    this.setState({
+      showSelectCoverModal: false,
+      coverUrl:coverClicpPath,
+      coverId:coverId
+    })
+  }
+   // base64转换成blob
+  convertBase64UrlToBlob = (urlData) => {
+    const bytes = window.atob(urlData.split(",")[1]);
+    const ab = new ArrayBuffer(bytes.length);
+    const ia = new Uint8Array(ab);
+    for (let i = 0; i < bytes.length; i++) {
+      ia[i] = bytes.charCodeAt(i);
+    }
+    return new Blob([ab], { type: "image/png" });
+  };
   render() {
     const {
       pageType,courseName, scheduleVideoId, coverId,
       coverUrl, scheduleVideoUrl, studentList, scheduleMedia,
       showCutModal, showSelectFileModal, diskList,
       imageFile, joinType, videoName, videoType,shelfState,
-      categoryName,courseCatalogList,whetherVisitorsJoin 
+      categoryName,courseCatalogList,whetherVisitorsJoin,
+      visible,showSelectCoverModal,hasImgReady,cutImageBlob
     } = this.state;
 
     // 已选择的上课学员数量
@@ -491,20 +588,7 @@ class AddVideoCourse extends React.Component {
                   }
                 </div>
                 <div className="opt-btns">
-                  <input
-                    type="file"
-                    accept="image/png, image/jpeg, image/jpg"
-                    ref="picInputFile"
-                    style={{display: 'none'}}
-                    onChange={(event) => { this.handleShowImgCutModal(event) }}
-                  />
-
-                  <Button onClick={() => {
-                    this.setState({
-                      currentInputFile: this.refs.picInputFile
-                    });
-                    this.refs.picInputFile.click()
-                  }}>{`${(pageType === 'add' && (!scheduleVideoId && !coverUrl)) ? '上传' : '修改'}封面`}</Button>
+                  <Button onClick={() => {this.setState({ showSelectCoverModal:true  })}}>{`${(pageType === 'add' && (!scheduleVideoId && !coverUrl)) ? '上传' : '修改'}封面`}</Button>
                   <div className="tips">建议尺寸1280*720px或16:9。封面图最大5M，支持jpg、jpeg和png。</div>
                 </div>
               </div>
@@ -558,24 +642,75 @@ class AddVideoCourse extends React.Component {
             onSelect={this.handleSelectVideo}
           />
         }
-        <ImgCutModalNew
-          title="裁剪"
-          width={550}
-          cutWidth={500}
-          cutHeight={282}
-          cutContentWidth={500}
-          cutContentHeight={300}
-          visible={showCutModal}
-          imageFile={imageFile}
-          bizCode='LIVE_COURSE_MEDIA'
-          onOk={(urlStr, resourceId) => {
-            this.setState({ showCutModal: false });
-            this.handleChangeForm('coverId', resourceId, urlStr)
-            this.state.currentInputFile.value = '';
+         {showSelectCoverModal && 
+          <SelectPrepareFileModal
+            key="basic"
+            operateType="select"
+            multiple={false}
+            accept="image/jpeg,image/png,image/jpg"
+            selectTypeList={['JPG', 'JPEG', 'PNG']}
+            tooltip='支持文件类型：jpg、jpeg、png'
+            isOpen={showSelectCoverModal}
+            onClose={() => {
+              this.setState({ showSelectCoverModal: false })
             }}
-          onClose={() => this.setState({ showCutModal: false })}
-          reUpload={() => { this.state.currentInputFile.click() }}
+            onSelect={this.handleSelectCover}
           />
+        }
+        <Modal
+          title="设置图片"
+          width={1080}
+          visible={visible}
+          maskClosable={false}
+          closeIcon={<span className="icon iconfont modal-close-icon">&#xe6ef;</span>}
+          onCancel={() => {
+            this.setState({ visible: false });
+          }}
+          zIndex={10001}
+          footer={[
+            <Button
+              key="back"
+              onClick={() => {
+                this.setState({ visible: false });
+              }}
+            >
+              重新上传
+            </Button>,
+            <Button
+              key="submit"
+              type="primary"
+              disabled={!hasImgReady}
+              onClick={() => {
+                if (!cutFlag) {
+                  cutFlag = true;
+                  this.refs.hiddenBtn.click();
+                }
+                this.getSignature(cutImageBlob);
+              }}
+            >
+              确定
+            </Button>,
+          ]}
+        >
+          <div className="clip-box">
+            <div
+              id="headPicModal"
+              ref="headPicModal"
+              style={{
+                width: "500px",
+                height: "430px",
+                marginBottom: 0,
+              }}
+            ></div>
+            <div id="clipBtn" style={{ display: "none" }} ref="hiddenBtn"></div>
+            <div className="preview-img">
+              <div className="title">效果预览</div>
+              <div id="preview-url-box" style={{width:500,height:282}}>
+                <img src={this.state.dataUrl} style={{ width: '100%' }} alt="" />
+              </div>
+            </div>
+          </div>
+        </Modal>
         { this.state.previewCourseModal }
       </div>
     )

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

@@ -2,7 +2,7 @@
  * @Author: 吴文洁
  * @Date: 2020-08-05 10:12:45
  * @LastEditors: zhangleyuan
- * @LastEditTime: 2021-01-27 18:11:12
+ * @LastEditTime: 2021-03-17 09:41:23
  * @Description: 视频课-列表模块
  * @Copyright: 杭州杰竞科技有限公司 版权所有
  */
@@ -17,21 +17,23 @@ import { appId, shareUrl, LIVE_SHARE } from '@/domains/course-domain/constants';
 import ShareLiveModal from '@/modules/course-manage/modal/ShareLiveModal';
 import WatchDataModal from '../modal/WatchDataModal'
 import CourseService from "@/domains/course-domain/CourseService";
-
+import RelatedPlanModal from '../../modal/RelatedPlanModal';
 import User from '@/common/js/user'
 
 
 import './VideoCourseList.less';
 
 const ENV = process.env.DEPLOY_ENV || 'dev';
-
+const userRole =  User.getUserRole();
 class VideoCourseList extends React.Component {
 
   constructor(props) {
     super(props);
     this.state = {
       id: '', // 视频课ID
-      studentIds:[]
+      studentIds:[],
+      RelatedPlanModalVisible:false,
+      selectPlanList:{}
     }
   }
 
@@ -91,7 +93,7 @@ class VideoCourseList extends React.Component {
         title: '课程分类',
         key: 'categoryName',
         dataIndex: 'categoryName',
-        width: '20%',
+        width: 200,
         render: (val, record) => {
           return (
             <div className="record__item">
@@ -104,7 +106,7 @@ class VideoCourseList extends React.Component {
         title: '创建人',
         key: 'createName',
         dataIndex: 'createName',
-        width: '10%',
+        width: 100,
         render: (val) => {
           return (
               <div>
@@ -126,7 +128,7 @@ class VideoCourseList extends React.Component {
           <span>店铺展示</span>
           <Tooltip  title={<div>开启后，用户可在店铺内查看到此课程。若课程“未成功开课”，则系统会自动“关闭”店铺展示。<br/>关闭后，店铺内不再展示此课程，但用户仍可通过分享的海报/链接查看此课程。</div>}><i className="icon iconfont" style={{ marginLeft: '5px',cursor:'pointer',color:'#bfbfbf',fontSize:'14px'}}>&#xe61d;</i></Tooltip>
         </span>,
-        width: '12%',
+        width: 120,
         dataIndex: "courseware",
         render: (val, item, index) => {
           return  (
@@ -166,6 +168,28 @@ class VideoCourseList extends React.Component {
         }
       },
       {
+        title: '关联项',
+        width: 200,
+        key: "planList",
+        dataIndex: "planList",
+        render: (val, record) => {
+          return  (
+            <div className="related-task">
+                  { record.relatedPlanList ?
+                   <Tooltip title={this.handlePlanName(record.relatedPlanList)} placement="top" arrowPointAtCenter>
+                     { record.relatedPlanList.map((item,index)=>{
+                        return <span>{item.planName} { (index < record.relatedPlanList.length-1)&&(<span> 、</span>)} </span>
+                      })
+                      }
+                   </Tooltip>
+                    :
+                    <span></span>
+                  }
+              </div>
+          )
+        }
+      },
+      {
         title: '操作',
         key: 'operate',
         dataIndex: 'operate',
@@ -200,6 +224,12 @@ class VideoCourseList extends React.Component {
   renderMoreOperate = (item) => {
     return (
       <div className="live-course-more-menu">
+        { (User.getUserRole() === "CloudManager" || User.getUserRole() === "StoreManager") &&
+           <div
+            className="operate__item"
+            onClick={()=>this.handleRelatedModalShow(item)}
+          >关联培训计划</div>
+        }
           <div
             className="operate__item"
             onClick={() => {
@@ -213,6 +243,18 @@ class VideoCourseList extends React.Component {
       </div>
     )
   }
+  
+  handlePlanName = (planArray)=>{
+    let planStr = "";
+    planArray.map((item,index)=>{
+      if(index < planArray.length-1){
+        planStr = planStr + item.planName + '、';
+      }else{
+        planStr = planStr + item.planName
+      }
+    })
+    return planStr
+  }
   //改变上架状态
   changeShelfState = (item) =>{
     let _shelfState = item.shelfState
@@ -237,6 +279,7 @@ class VideoCourseList extends React.Component {
       }
     }) 
   }
+  
   // 删除视频课
   handleDeleteVideoCourse = (scheduleId) => {
     Modal.confirm({
@@ -314,12 +357,42 @@ class VideoCourseList extends React.Component {
     };
     this.props.onChange(_query);
   }
-  
+  handleRelatedModalShow = (item)=>{
+    const selectPlanList = {};
+    if(item.relatedPlanList){
+      item.relatedPlanList.map((item,index)=>{
+        selectPlanList[item.planId] = {}
+        selectPlanList[item.planId].planId = item.planId;
+        selectPlanList[item.planId].taskBaseVOList = [{taskId:item.taskId}];
+        return item
+      })
+    }
+    this.setState({
+      RelatedPlanModalVisible:true,
+      selectCourseId:item.id,
+      selectPlanList:selectPlanList
+    })
+  }
+  closeRelatedPlanModalVisible = ()=>{
+    this.setState({
+      RelatedPlanModalVisible:false
+    })
+  }
+  onChangeSelectPlanList = (selectPlanList)=>{
+    this.setState({
+      selectPlanList:selectPlanList
+    })
+  }
+  onConfirmSelectPlanList = ()=>{
+    this.setState({
+      RelatedPlanModalVisible:false
+    },()=>{this.props.onChange();})
+  }
   render() {
 
     const { dataSource = [], totalCount, query } = this.props;
     const { current, size } = query;
-
+    const {RelatedPlanModalVisible,selectPlanList,selectCourseId} = this.state;
     return (
       <div className="video-course-list">
         <Table
@@ -344,6 +417,16 @@ class VideoCourseList extends React.Component {
             }}
           />
         </div>   
+        { RelatedPlanModalVisible &&
+          <RelatedPlanModal 
+            onClose={this.closeRelatedPlanModalVisible}
+            visible={RelatedPlanModalVisible}
+            selectCourseId={selectCourseId}
+            selectPlanList={selectPlanList}
+            onChange={this.onChangeSelectPlanList}
+            onConfirm={this.onConfirmSelectPlanList}
+          />
+        }
         { this.state.shareLiveModal }
         { this.state.watchDataModal }
       </div>

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

@@ -70,7 +70,15 @@
       height:48px;
     }
   }
- 
+  .related-task{
+    text-overflow: -o-ellipsis-lastline;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    line-clamp: 2;
+    -webkit-box-orient: vertical;
+  }
 }
 
 .video-course-more-menu {

src/modules/personalInfo/index.tsx

 /*
  * @Author: zhangleyuan
  * @Date: 2020-11-27 15:06:31
- * @LastEditors: wufan
- * @LastEditTime: 2021-02-01 14:34:44
+ * @LastEditors: zhangleyuan
+ * @LastEditTime: 2021-03-09 14:22:10
  * @Description: 描述一下
  * @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
  */
@@ -95,12 +95,14 @@ function PersonalInfoPage() {
       phone: String(phone),
       roleCodes: roleCodes,
       avatar,
-      storeUserId: User.getStoreUserId()
+      storeUserId: User.getStoreUserId(),
+      storeId:User.getStoreId()
     } : {
       nickName,
       roleCodes: roleCodes,
       avatar,
-      storeUserId: User.getStoreUserId()
+      storeUserId: User.getStoreUserId(),
+      storeId:User.getStoreId()
     };
     
     StoreService.editEmployee(params).then((res) => {

src/modules/plan-manage/AddPlan.jsx

+/*
+ * @Author: zhangleyuan
+ * @Date: 2021-02-20 16:13:39
+ * @LastEditors: zhangleyuan
+ * @LastEditTime: 2021-03-16 11:27:06
+ * @Description: 描述一下
+ * @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
+ */
+import React, { useEffect, useState } from "react";
+import { Button, message, Modal} from 'antd';
+import ShowTips from "@/components/ShowTips";
+import Breadcrumbs from "@/components/Breadcrumbs";
+import BasicInfo from './components/BasicInfo';
+import TrainingTask from './components/TrainingTask';
+import ExpiredCourseList from './components/ExpiredCourseList';
+import PlanService from '@/domains/plan-domain/planService'
+import User from '@/common/js/user';
+import _ from "underscore";
+import './AddPlan.less'
+const defaultCover = 'https://image.xiaomaiketang.com/xm/YNfi45JwFA.png';
+const defaultBasicData = {
+    planName:"",
+    coverUrl: defaultCover,
+    coverId:null,
+    enableState:"YES",
+    selectOperatorList:[],
+    instro:'',
+    operateType:'All_Operate',
+    percentCompleteLive:80,
+    percentCompleteVideo:80,
+}
+const defaultTaskList = [];
+
+function AddPlan() {
+    const id = getParameterByName("id");
+    const type = getParameterByName("type");
+    const [basicData,setBasicData] = useState(defaultBasicData);
+    const [taskList,setTaskList] = useState(defaultTaskList);
+    const [expiredCourseList,setExpiredCourseList] = useState([]);
+    const [hasGetDetail,setHasGetDetail]= useState(false);
+    const [submitDisabled,setSubmitDisabled] = useState(false);
+    useEffect(()=>{
+        if(type==='edit'){
+            getPlanDetail();  
+            getPlanCustomerState();
+        }
+    },id)
+    function getPlanCustomerState(){
+        PlanService.getTrainingCourseAutoCancel({
+            planId: id
+        }).then((res) => {
+            const expiredCourseList = res.result;
+            setExpiredCourseList(expiredCourseList)
+        })
+    }
+    function getPlanDetail (){
+        PlanService.getTrainingPlanDetail({
+            planId: id
+        }).then((res) => {
+            const {
+                planName,
+                enableState,
+                operateType,
+                operateIds,
+                percentCompleteLive,
+                percentCompleteVideo,
+                courseMediaVOS,
+                trainingTaskList
+            } = res.result;
+            let coverId;
+            let coverUrl;
+            let instro;
+            courseMediaVOS.map((item) => {
+                switch (item.contentType){
+                    case "COVER":
+                        coverId = item.mediaContent;
+                        coverUrl = item.mediaUrl;
+                    break;
+                    case "INTRO":
+                        instro = item.mediaContent;
+                    break;  
+                    default:
+                    break;
+                }
+                return item;
+            })
+            let _selectOperatorList = [];
+            if(operateIds){
+                _selectOperatorList = operateIds.map((item,index)=>{
+                    let _item = {};
+                    _item.id = item;
+                    return _item
+                })
+            }
+            setTaskList(trainingTaskList);
+            setBasicData({
+                planName,
+                coverUrl:coverUrl || defaultCover,
+                coverId,
+                enableState,
+                selectOperatorList:_selectOperatorList,
+                instro,
+                operateType,
+                percentCompleteLive,
+                percentCompleteVideo
+            })
+            setHasGetDetail(true);
+        })
+    }
+    function handleChangeBasicInfo(field, value,option){
+        setBasicData( {
+            ...basicData,
+            [field]: value,
+        })
+    }
+
+    function handleChangeTaskInfo(value){
+        setTaskList(value)
+    }
+
+    function submitInfo(){
+        const {planName,enableState,selectOperatorList,instro,operateType,percentCompleteLive,percentCompleteVideo,coverId,coverUrl} = basicData;
+        let input  = /^[\s]*$/;
+        if(!planName || input.test(planName)){
+            message.warning('请输入的培训计划名称');
+           return;
+        }
+        if(operateType==='Assign_Operate' && selectOperatorList.length===0){
+            message.warning('请选择指定运营师');
+            return;
+        }
+        if(!percentCompleteLive && percentCompleteLive !==0 ){
+            message.warning('请输入完成标准');
+           return;
+        }
+        if(!percentCompleteVideo && percentCompleteVideo !==0 ){
+            message.warning('请输入完成标准');
+           return;
+        }
+        if(taskList.length === 0){
+            message.warning('请输入培训计划内容');
+            return;
+        }
+        for(let i=0;i<taskList.length;i++){
+            if(input.test(taskList[i].taskName)){
+                message.warning('培训任务名称不能为空');
+                return false; 
+            }
+            if(taskList[i].courseList.length === 0){
+                Modal.confirm({
+                    title: '保存失败',
+                    content: '每个任务下至少关联一个课程',
+                    okText: '确定',
+                    cancelText: '取消',
+                    icon: <span className="icon iconfont default-confirm-icon">&#xe6f4;</span>,
+                })
+                return false; 
+            }
+        }
+        let scheduleMediaRequests = [];
+        let coverObj ={
+            contentType:'COVER',
+            mediaContent:coverId,
+            mediaType:'PICTURE',
+            mediaUrl: coverUrl,
+        }
+        if(coverId){
+            scheduleMediaRequests = [...scheduleMediaRequests,coverObj];
+        }
+        let instroObj = {
+            contentType:"INTRO",
+            mediaType: 'TEXT',
+            mediaContent:instro,
+        }
+        if(instro){
+            scheduleMediaRequests = [...scheduleMediaRequests,instroObj];
+        }
+
+        const params = {
+            createId:User.getStoreUserId(),
+            enableState,
+            operateIds:_.pluck(selectOperatorList,'id'),
+            operateType,
+            percentCompleteLive,
+            percentCompleteVideo,
+            planName,
+            scheduleMediaRequests,
+            storeId:User.getStoreId(),
+            trainingTaskList:handleSubmitTaskData(taskList)
+        } 
+        if (type === 'add') {
+            PlanService.createTrainingPlan(params).then((res) => {
+                if (res.success){
+                    message.success("新建成功");
+                    setSubmitDisabled(true);
+                    window.RCHistory.goBack();
+                }  
+            });
+        }else{
+            const _params = {
+                ...params,
+                id
+            }
+            PlanService.updateTrainingPlan(_params).then((res) => {
+                if (res.success){
+                    message.success("更新成功");
+                    window.RCHistory.goBack();
+                }  
+            }); 
+        }
+    }
+    function handleSubmitTaskData(taskData){
+        return  taskData.map((item,index)=>{
+            let _item = {};
+            _item.taskId = item.taskId;
+            _item.taskName =item.taskName;
+            _item.courseList = item.courseList.map((childItem,index)=>{
+                let _childItem = {}
+                _childItem.courseId = childItem.courseId;
+                _childItem.courseName = childItem.courseName;
+                _childItem.courseType = childItem.courseType;
+                return _childItem;
+            });
+            return  _item;
+        })
+    }
+  // 取消编辑并返回上一级路由
+  function handleGoBack (){
+    if (!_.isEqual(basicData, defaultBasicData) || !_.isEqual(taskList, defaultTaskList)
+    ) {
+      Modal.confirm({
+        title: '确定要返回吗？',
+        content: '返回后，本次编辑的内容将不被保存',
+        okText: '确认返回',
+        cancelText: '留在本页',
+        icon: <span className="icon iconfont default-confirm-icon">&#xe6f4;</span>,
+        onOk: () =>  {
+          window.RCHistory.goBack();
+        }
+      })
+    } else {
+      window.RCHistory.goBack();
+    }
+  }
+  
+  
+  return (
+    <div className="page add-plan-page">   
+        <Breadcrumbs
+            navList={type == "add" ? "新建培训计划" : "编辑培训计划"}
+            goBack={handleGoBack}
+        />
+        <div className="box">
+            <div className="show-tips">
+                <ShowTips message="请遵守国家相关规定，切勿上传低俗色情、暴力恐怖、谣言诈骗、侵权盗版等相关内容，小麦企培保有依据国家规定及平台规则进行处理的权利" />
+            </div>
+            <div className="add-plan-page__form">
+                <div className="basic-info__wrap">
+                    <div className="title">基本信息</div>
+                    <BasicInfo 
+                      data={basicData}
+                      onChange={handleChangeBasicInfo}
+                    />
+                </div>
+                <div className="basic-info__wrap">
+                    <div className="title">培训任务</div>
+                    { (type==='edit' && hasGetDetail) &&
+                        <TrainingTask data={taskList} onChange={handleChangeTaskInfo} />
+                    }
+                    { type==='add' &&
+                        <TrainingTask data={taskList} onChange={handleChangeTaskInfo} />
+                    }
+                </div>
+                { (type==='edit' && expiredCourseList.length > 0) &&
+                    <div className="expired-info__wrap">
+                        <div className="title">失效课程</div>
+                        <ExpiredCourseList expiredCourseList={expiredCourseList}/>
+                    </div>
+                }
+            </div> 
+        </div>
+        <div className="footer">
+            <Button onClick={handleGoBack}>取消</Button>
+            <Button type="primary" onClick={submitInfo} disabled={submitDisabled}>保存</Button>
+        </div>
+    </div>    
+  )
+
+}
+export default AddPlan;
\ No newline at end of file

src/modules/plan-manage/AddPlan.less

+.add-plan-page {
+    position:relative !important;
+    .box {
+      margin-bottom: 66px !important;
+      .add-plan-page__form {
+        margin-top: 16px;
+        .title {
+          font-size: 16px;
+          color: #333;
+          font-weight: 500;
+          line-height: 22px;
+          margin-bottom:8px;
+        }
+      }
+      .expired-info__wrap{
+        margin-top:16px;
+      }
+    }
+    .footer {
+      position: fixed;
+      bottom: 0;
+      height: 58px;
+      width: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      padding-right: 252px;
+      background: #fff;
+      border-top: 1px solid #E8E8E8;
+      z-index: 9999;
+      .ant-btn {
+        margin-left: 10px;
+      }
+    }
+  }
+  
\ No newline at end of file

src/modules/plan-manage/LearningData.jsx

+import React from 'react';
+import { withRouter } from "react-router-dom";
+import { Tabs } from 'antd';
+import Breadcrumbs from "@/components/Breadcrumbs";
+import EmployeeShareData from './components/EmployeeShareData';
+import UserLearningData from './components/UserLearningData';
+import PlanService from '@/domains/plan-domain/planService';
+import User from '@/common/js/user'
+import Bus from '@/core/bus';
+import './LearningData.less';
+
+const userRole =  User.getUserRole();
+const defaultCover = 'https://image.xiaomaiketang.com/xm/YNfi45JwFA.png';
+
+class LearningData extends React.Component {
+  constructor(props) {
+    super(props);
+    const id = getParameterByName("id");
+    this.state = {
+      id,
+      planName:"",
+      coverUrl:defaultCover,
+      courseNum:0,
+      created:"",
+      cultureCustomerNum:0,
+      activeKey:"employeeShareData",
+      createName:""
+    }
+  }
+  
+  componentDidMount(){
+    this.getPlanDetail();
+    Bus.bind('watchDataView',() =>{this.setState({activeKey:"userLearningData"}) })
+  }
+  
+  getPlanDetail = ()=>{
+    const { id } = this.state;
+    PlanService.getTrainingPlanDetail({
+        planId: id
+    }).then((res) => {
+        const {
+            planName,
+            courseMediaVOS,
+            courseNum,
+            created,
+            cultureCustomerNum,
+            createName
+        } = res.result;
+        let coverUrl;
+        courseMediaVOS.map((item) => {
+          if(item.contentType === "COVER"){
+            coverUrl = item.mediaUrl;
+          }
+          return item;
+        })
+        this.setState({
+          planName,
+          coverUrl: coverUrl || defaultCover,
+          courseNum,
+          created,
+          cultureCustomerNum,
+          createName
+        })
+    })
+  }
+
+  render() {
+    const {planName,coverUrl,courseNum,created,cultureCustomerNum,activeKey,createName} = this.state;
+    return (
+      <div className="page plan-learn-data-list">
+        <Breadcrumbs
+          navList="学习数据"
+          goBack={() => {
+            RCHistory.goBack();
+          }}
+        />
+        <div className="plan-info">
+          <div className="plan-intro">
+            <div className="plan-img-con">
+              <img src="https://image.xiaomaiketang.com/xm/YNfi45JwFA.png"/>
+            </div>
+            <div>
+              <div className="plan-name">
+                {planName}
+              </div>
+              <div className="create-course">
+                <span className="createUser">创建人：{createName}</span>
+                <span className="split">|</span>
+                <span className="course-total">课程总数量：{courseNum}</span>
+              </div>
+              <div className="create-time">创建时间：{formatDate('YYYY-MM-DD H:i', created)} </div>
+            </div>
+          </div>
+          <div className="join">
+            <div className="number">{cultureCustomerNum}</div>
+            <div className="text">参培人数</div>
+          </div>
+        </div>
+        <div className="box">
+        { (User.getUserRole() === "CloudManager" || User.getUserRole() === "StoreManager")?
+          (<Tabs activeKey={activeKey} onChange={(activeKey)=>{this.setState({activeKey})}}>
+            <Tabs.TabPane tab="员工分享数据" key="employeeShareData" forceRender="true">
+                <EmployeeShareData/>
+            </Tabs.TabPane>
+            <Tabs.TabPane tab="用户学习数据" key="userLearningData" forceRender="true">
+                <UserLearningData/>
+            </Tabs.TabPane>
+          </Tabs>)
+          :
+          (<UserLearningData/>)
+        }
+        </div>
+
+      </div>
+    )
+  }
+}
+
+export default withRouter(LearningData);
\ No newline at end of file

src/modules/plan-manage/LearningData.less

+
+.plan-learn-data-list{
+    .ant-tabs-tab.ant-tabs-tab-active{
+        font-weight:normal;
+    }
+    .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn{
+        font-weight:normal;
+    }
+    .plan-info{
+        margin:16px;
+        padding:16px;
+        background: #FFF;
+        display:flex;
+        justify-content: space-between;
+        align-items: center;
+        .plan-intro{
+            display: flex;
+            align-items: center;
+            .plan-img-con{
+                margin-right:8px;
+                img{
+                    width:136px;
+                    height:77px;
+                }
+            }
+            .plan-name{
+                font-size: 16px;
+                font-weight: 500;
+                color: #333333;
+                line-height: 22px;
+                margin-bottom:8px;
+            }
+            .create-course{
+                font-size: 14px;
+                color: #666666;
+                .split{
+                   margin:0 8px;
+                   color:#666;
+                }
+                margin-bottom:4px;
+            }
+            .create-time{
+                font-size:14px;
+                color:#666;
+            }
+        }
+        .join{
+            margin-right:144px;
+            min-width:54px;
+            text-align:center;
+            .number{
+              font-size: 26px;
+              font-weight: 500;
+              color: #333333;
+              margin-botttom:4px;
+            }
+            .text{
+              font-size: 14px;
+              color:#999;
+            }
+        }
+      
+    }
+}
\ No newline at end of file

src/modules/plan-manage/PlanPage.jsx

+/*
+ * @Author: zhangleyuan
+ * @Date: 2021-02-20 16:13:39
+ * @LastEditors: zhangleyuan
+ * @LastEditTime: 2021-03-10 18:38:50
+ * @Description: 描述一下
+ * @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
+ */
+import React, { useEffect, useState } from "react";
+import PlanFilter from './components/PlanFilter';
+import PlanOpt from './components/PlanOpt';
+import PlanList from './components/PlanList';
+import PlanService from "@/domains/plan-domain/planService";
+import User from '@/common/js/user';
+function PlanPage() {
+
+  const [planListData, setPlanListData] = useState([]);
+  const [query,setQuery] = useState({
+    current:1,
+    size:10,
+  });
+  useEffect(() => {
+    handleFetchPlanList();
+  }, [query]);
+  const [totalCount,setTotalCount] = useState(0);
+  function queryChange(_query){
+    const params = {
+      ...query,
+      ..._query,
+    };
+    setQuery(params);
+  }
+  function handleFetchPlanList(_query){
+    const params = {
+      ...query,
+      ..._query,
+      storeUserId:User.getStoreUserId()
+    };
+    //动态获取计划列表
+    PlanService.getTrainingPlanPage(params).then((res) => {
+      const { result: { records = [], total } } = res;
+      setPlanListData(records);
+      setTotalCount(total);
+    })
+  }
+  return (
+      <div className="page">
+        <div className="content-header">培训计划</div>
+        <div className="box">
+          <PlanFilter onChange={queryChange}/>
+          <PlanOpt/>
+          <PlanList 
+            planListData={planListData}
+            query={query}
+            totalCount={totalCount}
+            onChange={queryChange}
+          />
+        </div>
+      </div>
+  )
+
+}
+export default PlanPage;
\ No newline at end of file

src/modules/plan-manage/components/BasicInfo.jsx

+/*
+ * @Author: zhangleyuan
+ * @Date: 2021-02-20 16:45:51
+ * @LastEditors: zhangleyuan
+ * @LastEditTime: 2021-03-15 17:01:47
+ * @Description: 描述一下
+ * @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
+ */
+import React from 'react';
+import { Button,Input,Switch,Radio,Row,Col,Modal,message,Tooltip} from 'antd';
+import { withRouter } from 'react-router-dom';
+import SelectOperatorModal from '../modal/SelectOperatorModal';
+import { ImgCutModalNew } from '@/components';
+import SelectPrepareFileModal from '@/modules/prepare-lesson/modal/SelectPrepareFileModal';
+import Upload from '@/core/upload';
+// import PhotoClip from 'photoclip'
+import './BasicInfo.less';
+
+
+const { TextArea } = Input;
+const defaultCover = 'https://image.xiaomaiketang.com/xm/YNfi45JwFA.png';
+let cutFlag = false;
+let timer = null
+class BasicInfo extends React.Component{
+  constructor(props) {
+    super(props);
+    this.state = {
+      operatorModalVisible: false,
+      showSelectFileModal:false,
+      cutImageBlob: null
+    };
+  }
+
+
+  handleShowSelectOperatorModal = () =>{
+    this.setState({
+      operatorModalVisible:true
+    })
+  }
+  handleCloseSelectOperatorMOdal = ()=>{
+    this.setState({
+      operatorModalVisible:false
+    })
+  }
+  handleConfirmSelectOperator = (selectOperatorList)=> {
+    if(selectOperatorList.length === 0){
+      message.warning('请选择运营师')
+      return;
+    }
+    this.props.onChange('selectOperatorList',selectOperatorList);
+    this.setState({
+      operatorModalVisible:false
+    })
+  }
+  enableStateChange = ()=> {
+    if(this.props.data.enableState==="NO"){
+      this.props.onChange('enableState','YES')
+    }else{
+      this.props.onChange('enableState','NO')
+    }
+  }
+  
+  // 使用默认封面图
+  handleResetCoverUrl = ()=> {
+    const { data: { coverUrl } } = this.props;
+    const isDefaultCover = coverUrl === defaultCover;
+    // 如果已经是默认图的话，不做任何任何处理
+    if (isDefaultCover) return;
+    message.success('已替换为默认图');
+    this.props.onChange('coverUrl',defaultCover);
+    setTimeout(()=>{
+      this.props.onChange('coverId', null);
+    },1000)
+  }
+  handleSelectCover = (file)=> {
+    this.uploadImage(file);
+  }
+  
+  //上传图片
+  uploadImage = (imageFile) => {
+    const { folderName } = imageFile;
+    const fileName = window.random_string(16) + folderName.slice(folderName.lastIndexOf("."));
+    const self = this;
+    this.setState(
+      {
+        visible: true,
+      },
+      () => {
+        setTimeout(() => {
+          const okBtnDom = document.querySelector("#headPicModal");
+          const options = {
+            size: [500, 282],
+            ok: okBtnDom,
+            maxZoom: 3,
+            style: {
+              jpgFillColor: "transparent",
+            },
+            done: function (dataUrl) {
+              clearTimeout(self.timer);
+              self.timer = setTimeout(() => {
+                if ((self.state.rotate != this.rotate()) || (self.state.scale != this.scale())) {
+                  console.log(this.scale(), 'scale')
+                  const _dataUrl = this.clip()
+                  const cutImageBlob = self.convertBase64UrlToBlob(_dataUrl);
+                  self.setState({
+                    cutImageBlob,
+                    dataUrl: _dataUrl,
+                    rotate: this.rotate(),
+                    scale: this.scale()
+                  })
+                }
+
+              }, 500)
+
+              const cutImageBlob = self.convertBase64UrlToBlob(dataUrl);
+              self.setState({
+                cutImageBlob,
+                dataUrl
+              })
+              setTimeout(() => {
+                cutFlag = false;
+              }, 2000);
+            },
+            fail: (failInfo) => {
+              message.error("图片上传失败了，请重新上传");
+            },
+            loadComplete: function (img) {
+              setTimeout(() => {
+                const _dataUrl = this.clip()
+                self.setState({
+                  dataUrl: _dataUrl,
+                  hasImgReady: true 
+                })
+              }, 100)
+
+            },
+          };
+          const imgUrl = `${imageFile.ossUrl}?${new Date().getTime()}`
+          if (!this.state.photoclip) {
+            const _photoclip = new PhotoClip("#headPicModal", options);
+            _photoclip.load(imgUrl);
+            this.setState({
+              photoclip: _photoclip,
+            });
+          } else {
+            this.state.photoclip.clear();
+            this.state.photoclip.load(imgUrl);
+          }
+
+        }, 200);
+      }
+    );
+  };
+
+  //获取resourceId
+  getSignature = (blob, fileName) => {
+    Upload.uploadBlobToOSS(blob, 'cover' + (new Date()).valueOf(),null,'signInfo').then((signInfo) => {
+      this.setState({
+        coverClicpPath:signInfo.fileUrl,
+        coverId:signInfo.resourceId,
+        visible: false
+      },()=>this.updateCover())
+    
+    });
+  };
+  updateCover = () =>{
+    const {coverClicpPath,coverId} = this.state
+    this.setState({
+      showSelectFileModal: false
+    })
+    this.props.onChange('coverUrl', coverClicpPath);
+    setTimeout(()=>{
+      this.props.onChange('coverId', coverId);
+    },1000)
+  }
+   // base64转换成blob
+  convertBase64UrlToBlob = (urlData) => {
+    const bytes = window.atob(urlData.split(",")[1]);
+    const ab = new ArrayBuffer(bytes.length);
+    const ia = new Uint8Array(ab);
+    for (let i = 0; i < bytes.length; i++) {
+      ia[i] = bytes.charCodeAt(i);
+    }
+    return new Blob([ab], { type: "image/png" });
+  };
+  limitNumber = value => {
+    if (typeof value === 'string') {
+      return !isNaN(Number(value)) ? value.replace(/^(0+)|[^\d]/g, '') : ''
+    } else if (typeof value === 'number') {
+      return !isNaN(value) ? String(value).replace(/^(0+)|[^\d]/g, '') : ''
+    } else {
+      return ''
+    }
+  }
+  percentCompleteBlur = (e,field) =>{
+    let _percentCompleteLive;
+    const { value } = e.target;
+    if(value > 100){
+      _percentCompleteLive = 100;
+    }else{
+      if(value < 0){
+        _percentCompleteLive = 0;
+      }else{
+        _percentCompleteLive = value;
+      }
+    }
+    this.props.onChange(field,_percentCompleteLive) 
+  }
+  
+  render(){
+    const { operatorModalVisible ,showSelectFileModal,visible,hasImgReady,cutImageBlob} = this.state;
+    const { data} = this.props;
+    const { planName,coverUrl,instro,enableState,operateType,selectOperatorList,percentCompleteLive,percentCompleteVideo} = data;
+    // 当前是否使用的是默认图片
+    const isDefaultCover = coverUrl === defaultCover;
+    return (
+      <div className="plan-basic-info">
+          <div className="plan-name">
+              <span className="label"><span className="require">*</span>培训计划名称：</span>
+              <Input
+                  value={planName}
+                  placeholder="请输入培训计划名称(20字以内)"
+                  maxLength={20}
+                  style={{ width: 240 }}
+                  onChange={(e)=>this.props.onChange('planName', e.target.value)}
+              />    
+          </div>
+          <div className="cover">
+            <span className="label">封面图：</span>
+            <div className="cover__wrap">
+              <div className="img-content">
+                { isDefaultCover &&
+                  <span className="tag">默认图</span>
+                }
+                <img src={coverUrl} width="690"/>
+              </div>
+              <div className="opt-btns">
+                <Button onClick={() => {
+                  this.setState({
+                    showSelectFileModal:true
+                  })
+                }}>上传图片</Button>
+                <span
+                  className={`default-btn ${isDefaultCover ? 'disabled' : ''}`}
+                  onClick={this.handleResetCoverUrl}
+                >使用默认图</span>
+                <div className="tips">建议尺寸1280*720px或16:9。封面图最大5M，支持jpg、jpeg和png。</div>
+              </div>
+            </div>
+          </div>
+          <div className="introduction">
+              <span className="label">简介：</span>
+              <TextArea
+                placeholder="请输入培训计划简介"
+                maxLength={200}
+                style={{ width: '552px',height:'110px'}}
+                className="instro-textarea"
+                value={instro}
+                onChange={(e)=>this.props.onChange('instro', e.target.value)}
+              />
+          </div>
+          <div className="wether-use">
+            <span className="label">是否启用：</span>
+            <div className="content">
+              <div>
+                <Switch checked={enableState==="YES"? true:false} onChange={()=> {this.enableStateChange()}}/>
+              </div>  
+              <div>
+                <div className="instro-text">
+                  <div>开启：此培训计划可以分享给用户进行学习</div>
+                  <div>关闭：此培训计划暂不可分享给用户进行学习，后续可开启</div>
+                </div>
+              </div> 
+            </div>
+          </div>
+          <div className="view-range" >
+            <span className="label">
+              <span className="require">*</span>
+              可见范围
+              <Tooltip 
+                title="店铺管理员、管理员默认都可见">
+                <span className="iconfont">&#xe61d;</span>
+              </Tooltip>：</span>
+            <div className="content">
+              <Radio.Group  value={operateType} onChange={(e) => { this.props.onChange('operateType', e.target.value) }}>
+                <Row style={{ marginBottom: '5px' }}>
+                  <Col span={24}>
+                    <Radio value="All_Operate">
+                      所有运营师 
+                      <span className="playback__text">后续新增的运营师都有权限可见</span>
+                    </Radio>
+                  </Col>
+                </Row>
+                <Row>
+                  <Col span={8}>
+                    <Radio value="Assign_Operate">
+                      指定运营师
+                      <span className="playback__text">仅被选择的运营师有权限可见</span>
+                    </Radio>
+                  </Col>
+                </Row>
+              </Radio.Group>
+              {operateType==="Assign_Operate" &&
+                <div className="choose-business">
+                 <Button onClick={()=>{this.handleShowSelectOperatorModal()}}>选择运营师</Button>
+                 <span>已选择<span>{selectOperatorList.length}</span>名运营师</span>
+                </div>
+              }
+            </div>
+          </div>
+          <div className="done-standard">
+              <span className="label standard-label"><span className="require">*</span>完成标准：</span>
+              <div>
+                <div className="live-standard-info">
+                  <span className="icon iconfont">&#xe865;</span>
+                  <span className="instro">直播课单个课程，用户学习进度达到
+                    <Input
+                      width="40" 
+                      value={percentCompleteLive} 
+                      onChange={(e) => { this.props.onChange('percentCompleteLive', e.target.value.replace(/\D/g,'')) }} 
+                      onBlur={(e)=>this.percentCompleteBlur(e,'percentCompleteLive')}
+                      className="input-box"
+                    />%，即视为"已完成"学习
+                   
+                  </span>
+                </div>
+                <div className="video-standard-info">
+                  <span className="icon iconfont">&#xe864;</span>
+                  <span className="instro">视频课单个课程，用户学习进度达到
+                    <Input  
+                      width="40" 
+                      value={percentCompleteVideo} 
+                      onChange={(e) => { this.props.onChange('percentCompleteVideo', e.target.value.replace(/\D/g,'')) }} 
+                      onBlur={(e)=>this.percentCompleteBlur(e,'percentCompleteVideo')}
+                      className="input-box"
+                    />
+                    %，即视为"已完成"学习
+                  </span>
+                </div>
+              </div>  
+          </div>
+          { operatorModalVisible && 
+            <SelectOperatorModal 
+              visible={operatorModalVisible}
+              onClose={this.handleCloseSelectOperatorMOdal}
+              selectOperatorList={selectOperatorList}
+              onSelect={this.handleConfirmSelectOperator}
+            />
+          }
+          {showSelectFileModal && 
+            <SelectPrepareFileModal
+              key="basic"
+              operateType="select"
+              multiple={false}
+              accept="image/jpeg,image/png,image/jpg"
+              selectTypeList={['JPG', 'JPEG', 'PNG']}
+              tooltip='支持文件类型：jpg、jpeg、png'
+              isOpen={showSelectFileModal}
+              onClose={() => {
+                this.setState({
+                  showSelectFileModal:false
+                })
+              }}
+              onSelect={this.handleSelectCover}
+            />
+          }
+          <Modal
+            title="设置图片"
+            width={1080}
+            visible={visible}
+            maskClosable={false}
+            closeIcon={<span className="icon iconfont modal-close-icon">&#xe6ef;</span>}
+            onCancel={() => {
+              this.setState({ visible: false });
+            }}
+            zIndex={10001}
+            footer={[
+              <Button
+                key="back"
+                onClick={() => {
+                  this.setState({ visible: false });
+                }}
+              >
+                重新上传
+              </Button>,
+              <Button
+                key="submit"
+                type="primary"
+                disabled={!hasImgReady}
+                onClick={() => {
+                  if (!cutFlag) {
+                    cutFlag = true;
+                    this.refs.hiddenBtn.click();
+                  }
+                  this.getSignature(cutImageBlob);
+                }}
+              >
+                确定
+              </Button>,
+            ]}
+          >
+            <div className="clip-box">
+              <div
+                id="headPicModal"
+                ref="headPicModal"
+                style={{
+                  width: "500px",
+                  height: "430px",
+                  marginBottom: 0,
+                }}
+              ></div>
+              <div id="clipBtn" style={{ display: "none" }} ref="hiddenBtn"></div>
+              <div className="preview-img">
+                <div className="title">效果预览</div>
+                <div id="preview-url-box" style={{width:500,height:282}}>
+                  <img src={this.state.dataUrl} style={{ width: '100%' }} alt="" />
+                </div>
+              </div>
+            </div>
+          </Modal>
+      </div>
+    );
+  }
+}
+export default withRouter(BasicInfo)

src/modules/plan-manage/components/BasicInfo.less

+.plan-basic-info{
+    .label {
+      width: 110px;
+      text-align: right;
+      display:inline-block;
+      font-size:14px;
+      color:#666;
+      .require {
+        color: #EC4B35;
+      }
+      .iconfont{
+        font-size:14px;
+        color:#BFBFBF;
+      }
+    }
+    .cover {
+        display: flex;
+        margin-top: 16px;
+        &__wrap {
+          position: relative;
+          display: flex;
+          .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-content {
+          margin-right: 20px;
+          width: 299px;
+          height: 169px;
+          img {
+            width: 100%;
+            height: 100%;
+            object-fit: contain;
+            border: 1px solid #E8e8e8;
+          }
+        }
+        .opt-btns{
+          .default-btn {
+            margin:0 8px;
+            color: #5289FA;
+            cursor: pointer;
+            &.disabled {
+              color: #CCC;
+              cursor: not-allowed;
+            }
+          }  
+          .tips{
+            margin-top:8px;
+            font-size:14px;
+            color:#999;
+          }
+        }
+    }
+    .introduction{
+        margin-top:16px;
+        .instro-textarea{
+            vertical-align: top;
+        }
+    }
+    .wether-use{
+        display:flex;
+        margin-top:16px;
+        .instro-text{
+            color:#999;
+            margin-left:12px;
+        }
+        .content{
+            display:flex;
+        }
+    }
+    .view-range{
+        display:flex;
+        margin-top:16px;
+        .label{
+          margin-top:2px;
+        }
+        .instro-text{
+          color:#999;
+          margin-left:12px;
+        }
+        .choose-business{
+            margin-top:16px;
+        }
+        .playback__text{
+          margin-left:12px;
+          color:#999999;
+        }
+    }
+    .done-standard{
+      display: flex;
+      margin-top:22px;
+      .standard-label{
+        margin-top:3px;
+      }
+      .live-standard-info{
+        margin-bottom:10px;
+      }
+      input{
+        display:inline-block;
+        width:90px;
+        height:32px;
+      }
+      .icon{
+        color:#A0A0A0;
+        font-size:14px;
+        margin-right:4px;
+      }
+      .instro{
+        color:#333333;
+        font-size:14px;
+      }
+      .input-box{
+        width: 60px;
+        height: 32px;
+        border-radius: 4px;
+        border: 1px solid #E8E8E8;
+        color:#333333;
+        font-size:14px;
+        margin:0 2px;
+      }
+    }
+
+}

src/modules/plan-manage/components/EmployeeShareData.jsx

+import React from 'react';
+import { withRouter } from "react-router-dom";
+import {Table, Modal,Input,message} from 'antd';
+import { PageControl } from "@/components";
+import PlanService from '@/domains/plan-domain/planService'
+import User from '@/common/js/user';
+import Bus from '@/core/bus';
+import './EmployeeShareData.less';
+
+const { Search } = Input;
+const UserRole = {
+  Store_Manager: {
+    text: "店铺管理员"
+  },
+  Cloud_Manager: {
+    text:"管理员"
+  },
+  Cloud_Operator: {
+    text:'运营师'
+  },
+  Cloud_Lecture: {
+    text:"讲师"
+  },
+};
+
+class EmployeeShareData extends React.Component {
+  constructor(props) {
+    super(props);
+    const id = getParameterByName("id");
+    this.state = {
+      id,
+      dataSource:[],
+      size:10,
+      query: {
+        current: 1,
+      },
+      totalCount:0,
+    }
+  }
+  componentDidMount(){
+    this.handleFetchDataList();
+  }
+  handleFetchDataList = ()=>{
+    const { query ,size,id}  = this.state;
+    const params ={
+      ...query,
+      size,
+      planId:id,
+      storeId:User.getStoreId(),
+    }
+    PlanService.getPlanUserRecordPage(params).then((res) => {
+      const { result = {} } = res ;
+      const { records = [], total = 0 } = result;
+      this.setState({
+          dataSource: records,
+          totalCount: Number(total)
+      });
+    });
+  }
+
+  onShowSizeChange = (current, size) => {
+    if (current == size) {
+      return
+    }
+    this.setState({
+      size
+    },()=>{this.handleFetchDataList()})
+  }
+  handleChangeTable = (pagination, filters, sorter)=> {
+    const { columnKey, order } = sorter;
+    const { query } = this.state;
+    let  _columnKey;
+    let _order;
+    if (columnKey === 'learnNum' && order === 'ascend') { _columnKey="LEARN_NUM"; _order = 'SORT_ASC'; }
+    if (columnKey === 'learnNum' && order === 'descend') { _columnKey="LEARN_NUM"; _order = 'SORT_DESC'; }
+
+    if (columnKey === 'learnFinishNum' && order === 'ascend') { _columnKey="FINISH_NUM"; _order = 'SORT_ASC'; }
+    if (columnKey === 'learnFinishNum' && order === 'descend') { _columnKey="FINISH_NUM"; _order = 'SORT_DESC'; }
+
+    if (columnKey === 'learnNoFinishNum' && order === 'ascend') { _columnKey="NOT_NUM"; _order = 'SORT_ASC'; }
+    if (columnKey === 'learnNoFinishNum' && order === 'descend') { _columnKey="NOT_NUM"; _order = 'SORT_DESC'; }
+
+    const _query = {
+      ...query,
+      sortMap:{}
+    };
+    _query.sortMap[_columnKey]=_order;
+    this.setState({
+      query:_query
+    },()=>this.handleFetchDataList())
+  }
+  handleChangNickname = (value)=>{
+      const isPhone = (value || '').match(/^\d+$/);
+      const { query } =  this.state;
+      if(isPhone){
+          query.userPhone = value;
+          query.userName = null;
+      }else{
+          query.userName = value;
+          query.userPhone = null;
+      }
+      query.current = 1;
+      this.setState({
+        query
+      })
+  }
+  watchDataView = (record)=>{
+    Bus.trigger('watchDataView',record);
+  } 
+  // 请求表头
+  parselumns = () => {
+    const columns = [
+      {
+        title: '员工',
+        key: 'storeUserName',
+        dataIndex: 'storeUserName',
+        render: (val, record) => {
+          return (
+            <div>
+              {val}
+            </div>
+          )
+        }
+      },
+      {
+        title: '角色',
+        key: 'roleEnum',
+        dataIndex: 'roleEnum',
+        render: (val, record) => {
+          return (
+            <div>
+              {UserRole[record.roleEnum].text}
+            </div>
+          )
+        }
+      },
+      {
+        title: '手机号',
+        key: 'storeUserPhone',
+        dataIndex: 'storeUserPhone',
+        render: (val, record) => {
+          return (
+            <div>
+              {val}
+            </div>
+          )
+        }
+      },
+      {
+        title: '最近分享成功时间',
+        key: 'recentlyForwardTime',
+        dataIndex: 'recentlyForwardTime',
+        width:240,
+        render: (val, record) => {
+          return (
+            <div>
+              {formatDate('YYYY-MM-DD H:i', val)}
+            </div>
+          )
+        }
+      },
+      {
+        title: '学习人数',
+        key: 'learnNum',
+        dataIndex: 'learnNum',
+        width:110,
+        sorter:true,
+        render: (val, record) => {
+          return (
+            <div className="learn-num">
+              {val}
+            </div>
+          )
+        }
+      },
+      // {
+      //   title: '已学完',
+      //   key: 'learnFinishNum',
+      //   dataIndex: 'learnFinishNum',
+      //   width:110,
+      //   sorter:true,
+      //   render: (val, record) => {
+      //     return (
+      //       <div className="learn-finish-num">
+      //         {val}
+      //       </div>
+      //     )
+      //   }
+      // },
+      // {
+      //   title: '未学完',
+      //   key: 'learnNoFinishNum',
+      //   dataIndex: 'learnNoFinishNum',
+      //   width:110,
+      //   sorter:true,
+      //   render: (val, record) => {
+      //     return (
+      //       <div className="learn-no-finish-num">
+      //         {val}
+      //       </div>
+      //     )
+      //   }
+      // },
+      {
+        title: '操作',
+        key: 'operate',
+        dataIndex: 'operate',
+        render: (val, record) => {
+          return (
+            <span className="operate-item" onClick={()=>this.watchDataView(record)}>数据详情</span>
+          )
+        }
+      }
+
+    ];
+    return columns;
+  }
+  render() {
+    const { dataSource,query,size,totalCount} = this.state;
+    return (
+      <div className="employee-share-data">
+        <div className="search-container">
+            <Search placeholder="搜索员工姓名或手机号"  onChange={(e) => { this.handleChangNickname(e.target.value)}}  onSearch={ () => { this.handleFetchDataList()}}  style={{ width: 200 }}  enterButton={<span className="icon iconfont">&#xe832;</span>}/>
+        </div>
+        <div>
+              <Table
+                  rowKey={record => record.id}
+                  dataSource={dataSource}
+                  columns={this.parselumns()}
+                  pagination={false}
+                  onChange={this.handleChangeTable}
+                  showSorterTooltip={false}
+                  bordered
+              />
+              {dataSource.length >0 &&
+                <div className="box-footer">
+                    <PageControl
+                        current={query.current - 1}
+                        pageSize={size}
+                        total={totalCount}
+                        toPage={(page) => {
+                            const _query = {...query, current: page + 1};
+                            this.setState({
+                              query:_query
+                            },()=>{ this.handleFetchDataList()})
+                        }}
+                        onShowSizeChange={this.onShowSizeChange}
+                    />
+                </div>
+                }
+        </div>
+      </div>
+    )
+  }
+}
+
+export default withRouter(EmployeeShareData);
\ No newline at end of file

src/modules/plan-manage/components/EmployeeShareData.less

+.employee-share-data{
+    .search-container{
+        margin-bottom:12px;
+    }
+    .operate-item{
+        font-size:14px;
+        color:#5289FA;
+        cursor: pointer;
+    }
+    .learn-num{
+        text-align:right;
+        margin-right:20px;
+    }
+    .learn-finish-num{
+        text-align:right;
+        margin-right:30px; 
+    }
+    .learn-no-finish-num{
+        text-align:right;
+        margin-right:35px;  
+    }
+}
\ No newline at end of file

src/modules/plan-manage/components/ExpiredCourseList.jsx

+import React from 'react';
+import { Button } from 'antd';
+import { withRouter } from 'react-router-dom';
+import User from '@/common/js/user';
+import './ExpiredCourseList.less';
+
+function ExpiredCourseList(props) {
+ 
+  return (
+    <div className="expired-course-list">
+        { props.expiredCourseList.map((item,index)=>{
+            return  <div className="course-item">
+                    <div className="course-left">
+                        <div className="course-status">
+                            未成功开课
+                        </div>
+                        <div className="course-info">
+                            <div className="course-type">
+                                { item.courseType === "LIVE" &&
+                                    <span>直播课</span>
+                                }
+                                 { item.courseType === "VOICE " &&
+                                    <span>视频课</span>
+                                }
+                            </div>
+                            <div className="course-instro">
+                                <div className="course-name">
+                                    {item.courseName}
+                                </div>
+                                <div className="task-name">
+                                    {item.taskName}
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div className="course-time">
+                        上课时间：{formatDate('YYYY-MM-DD H:i', item.startTime)}
+                    </div>
+                </div>
+            })
+           
+        }
+       
+    </div>
+  );
+}
+export default withRouter(ExpiredCourseList)

src/modules/plan-manage/components/ExpiredCourseList.less

+.expired-course-list{
+    margin:8px 10px 0px;
+    .course-item{
+        display:flex;
+        padding:16px 0;
+        border-bottom:1px dotted #E8E8E8;
+        justify-content: space-between;
+        &:last-child{
+            border-bottom:none;
+            padding-bottom:0px;
+        }
+        .course-left{
+            display:flex;
+
+            .course-status{
+                color:#999999;
+                font-size:14px;
+                margin-right:16px;
+            }
+            .course-info{
+                display:flex;
+                .course-type{
+                    margin-right:16px;
+                    span{
+                        padding:0px 6px;
+                        color:#666666;
+                        font-size:11px;
+                        border-radius: 2px;
+                        border: 1px solid #999999;
+                        line-height: 16px;
+                    }
+                }
+                .course-instro{
+                    .course-name{
+                        color:#333333;
+                        font-size:14px;
+                        margin-bottom:7px;
+                    }
+                    .task-name{
+                        color:#999;
+                        font-size:14px;
+
+                    }
+                }
+            }
+        }
+        .course-time{
+            color:#999;
+            font-size:14px;
+        }
+    }
+}
\ No newline at end of file

src/modules/plan-manage/components/PlanFilter.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, useRef, useEffect } from 'react';
+import { withRouter } from 'react-router-dom';
+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 './PlanFilter.less';
+const { Search } = Input;
+const { Option } = Select;
+
+const DEFAULT_QUERY = {
+  planName: null,
+  startTime: null,
+  endTime:null,
+  enableState:null,
+  createId: null
+}
+const defaultCreatorQuery = {
+  size: 10,
+  current: 1,
+  nickName:null
+}
+function PlanFilter(props) {
+
+  const [expandFilter, setExpandFilter] = useState(false);
+  const [query,setQuery] = useState(DEFAULT_QUERY);
+  const [hasNext,setHasNext] = useState(false);
+  const [creatorQuery,setCreatorQuery] = useState(defaultCreatorQuery);
+  const [creatorList,setCreatorList] =  useState([]);
+
+  
+  useEffect(() => {
+    getCreatorList();
+  }, []);
+
+    // 改变搜索条件
+  function handleChangeQuery(field, value){
+    const _query ={
+      ...query,
+      [field]: value,
+      current: 1,
+    } 
+    setQuery(_query);
+    if (field === 'planName') return;
+    props.onChange( _query);
+  }
+
+   
+
+  function handleChangeDates (dates){
+    const _query = _.clone(query);
+    if (_.isEmpty(dates)) {
+      delete _query.startTime;
+      delete _query.endTime;
+    } else {
+      _query.startTime = dates[0].valueOf();
+      _query.endTime = dates[1].valueOf();
+    }
+    const param ={
+      ..._query,
+      current: 1,
+    }
+    setQuery(param);
+    props.onChange(param);
+  }
+
+  // 重置搜索条件
+  function  handleReset(){
+    setQuery(DEFAULT_QUERY);
+    props.onChange(DEFAULT_QUERY);
+  }
+
+  function getCreatorList(current = 1, selectList){
+    const _query = {
+      ...creatorQuery,
+      current,
+      size:10
+    };
+    StoreService.getStoreUserBasicPage( _query).then((res) => {
+        const { result = {} } = res;
+        const { records = [], total = 0, 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);
+    }
+  }
+
+
+  return (
+      <div className="plan-filter">
+        <Row>
+            <div className="search-condition">
+              <div className="search-condition__item">
+                <span className="search-name">培训计划：</span>
+                <Search
+                  value={query.planName}
+                  placeholder="搜索培训计划名称"
+                  onChange={(e) => { handleChangeQuery('planName', e.target.value)}}
+                  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 ={(value)=>{
+                      setCreatorQuery({
+                        size: 10,
+                        current: 1,
+                        nickName:null
+                      })
+                      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="course_date_picker"
+                  allowClear={false}
+                  value={ query.startTime ? [moment(query.startTime), moment(query.endTime)] : null }
+                  format={"YYYY-MM-DD"}
+                  onChange={(dates) => { handleChangeDates(dates) }}
+                  style={{ width: "calc(100% - 70px)" }}
+                />
+              </div>
+              { expandFilter &&
+                <div className="search-condition__item">
+                  <span className="shelf-status">当前状态：</span>
+                  <Select
+                    style={{ width: "calc(100% - 70px)" }}
+                    placeholder="请选择当前状态"
+                    allowClear={true}
+                    value={query.enableState}
+                    onChange={(value) => { handleChangeQuery('enableState', value) }}
+                    suffixIcon={<span className="icon iconfont" style={{fontSize:'12px',color:'#BFBFBF'}}>&#xe835;</span>}
+                  >
+                    <Option value="YES">开启</Option>
+                    <Option value="NO">关闭</Option>
+                  </Select>
+                </div>
+              }
+            </div>  
+
+          <div className="reset-fold-area">
+            <Tooltip title="清空筛选"><span className="resetBtn iconfont icon" onClick={handleReset}>&#xe61b; </span></Tooltip>
+            <span style={{ cursor: 'pointer' }} className="fold-btn" onClick={() => {
+              setExpandFilter(!expandFilter)
+            }}>{expandFilter ? <span><span>收起</span><span className="iconfont icon fold-icon" >&#xe82d; </span> </span> : <span>展开<span className="iconfont icon fold-icon" >&#xe835; </span></span>}</span>
+         </div>
+        </Row>
+      </div>
+    )
+ 
+}
+
+export default withRouter(PlanFilter);
\ No newline at end of file

src/modules/plan-manage/components/PlanFilter.less

+.plan-filter {
+    position: relative;
+    .ant-input-search-button{
+      border-left:none;
+    }
+    .search-condition {
+      width: calc(100% - 80px);
+      display: flex;
+      align-items: center;
+      flex-wrap: wrap;
+  
+      &__item {
+        width: 30%;
+        margin-right: 3%;
+        margin-bottom: 12px;
+        .search-name{
+          vertical-align: middle;
+          display:inline-block;
+          height:32px;
+          line-height:32px;
+        }
+      }
+    }
+    .reset-fold-area {
+      position: absolute;
+      right: 12px;
+    }
+    .resetBtn {
+      color: #999999;
+      font-size: 18px;
+      margin-right: 8px;
+    }
+    .fold-btn {
+      font-size: 14px;
+      color: #666666;
+      line-height: 20px;
+      .fold-icon {
+        font-size: 12px;
+        margin-left:4px;
+      }
+    }
+  }
\ No newline at end of file

src/modules/plan-manage/components/PlanList.jsx

+/*
+ * @Author: zhangleyuan
+ * @Date: 2021-02-20 16:46:46
+ * @LastEditors: zhangleyuan
+ * @LastEditTime: 2021-03-16 15:53:59
+ * @Description: 描述一下
+ * @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
+ */
+
+import React, { useState, useRef, useEffect } from 'react';
+import { Table, Modal, message , Tooltip,Switch,Dropdown} from 'antd';
+import { withRouter } from 'react-router-dom';
+import { PageControl } from "@/components";
+import PlanService from "@/domains/plan-domain/planService";
+import SharePlanModal from '../modal/SharePlanModal';
+import {LIVE_SHARE} from '@/domains/course-domain/constants';
+import User from '@/common/js/user';
+import './PlanList.less';
+
+const { confirm } = Modal;
+const userRole =  User.getUserRole();
+function PlanList(props) {
+    const [sharePlanModal, setSharePlanModal] = useState(null);
+   
+    function parseColumns(){
+        const columns = [
+            {
+                title: '培训计划',
+                key: 'planName',
+                dataIndex: 'planName',
+                width:'18%',
+                render: (val, record) => {
+                    return (
+                        <div className="plan-name">
+                            {val}
+                        </div>
+                    )
+                }
+            },
+            {
+                title: '课程总数量',
+                key: 'courseNum',
+                dataIndex: 'courseNum',
+                width: 110,
+                render: (val, record) => {
+                return (
+                    <div className="course-number">
+                        {val}
+                    </div>
+                )
+                }
+            },
+            {
+                title: '当前状态',
+                width: '10%',
+                dataIndex: "status",
+                render: (val, item, index) => {
+                    return  (
+                        <Switch  checked={item.enableState==="NO"?false:true}  onChange={()=>changeEnableState(item)} disabled={(User.getUserRole() === "CloudManager" || User.getUserRole() === "StoreManager")?false:true}/>
+                    ) 
+                },
+            },
+            {
+                title: '创建人',
+                key: 'createName',
+                dataIndex: 'createName',
+                width: '10%',
+                render: (val) => {
+                return (
+                    <div className="create-name">
+                        {val}
+                    </div>
+                )
+                }
+            },
+            {
+                title: '创建时间',
+                width: "12.5%",
+                key: 'created',
+                dataIndex: 'created',
+                sorter: true,
+                render: (val) => {
+                return  formatDate('YYYY-MM-DD H:i', val) 
+                }
+            },
+            {
+                title: '更新时间',
+                width: "10%",
+                key: 'updated',
+                dataIndex: 'updated',
+                sorter: true,
+                render: (val) => {
+                return formatDate('YYYY-MM-DD H:i', val) 
+                }
+            },
+            {
+                title: '参培人数',
+                width:76,
+                key: 'cultureCustomerNum',
+                dataIndex: 'cultureCustomerNum',
+                sorter: true,
+                render: (val) => {
+                    return ( 
+                        <div className="join-number">
+                            {val}
+                        </div>
+                    ) 
+                }
+            },
+            {
+                title: '操作',
+                key: 'operate',
+                dataIndex: 'operate',
+                fixed: 'right',
+                width: 176,
+                render: (val, record) => {
+                    return (
+                        <div className="operate">
+                            <div className="operate__item" onClick={()=>toLearningDataPage(record)}>学习数据</div>
+                            {record.enableState==="YES" &&
+                                <>
+                                    <span className="operate__item split"> | </span>
+                                    <div className="operate__item" onClick={() => {handleShowShareModal(record); }}>分享</div>
+                                </>
+                            }
+                            {(User.getUserRole() === "CloudManager" || User.getUserRole() === "StoreManager") &&
+                                <>
+                                <span className="operate__item split"> | </span>
+                                <Dropdown overlay={renderMoreOperate(record)}>
+                                    <span className="more-operate">
+                                    <span className="operate-text">更多</span>
+                                    <span
+                                        className="iconfont icon"
+                                        style={{ color: "#5289FA" }}
+                                    >
+                                        &#xe824;
+                                    </span>
+                                    </span>
+                                </Dropdown>
+                                </>
+                            }
+                        </div>
+                    )
+                }
+            }
+        ];
+        return columns;
+    }
+    
+    function renderMoreOperate(item){
+        return (
+            <div className="live-course-more-menu">
+                
+                <div  className="operate__item"
+                onClick={()=>toEditPlanPage(item)}
+                >编辑</div>
+                <div
+                className="operate__item" onClick={()=>handleDelete(item)}
+                >删除</div>
+            </div>
+        )
+    }
+    
+    function handleChangeTable(pagination, filters, sorter){
+        const { columnKey, order } = sorter;
+        const { query } = props;
+        let  _columnKey;
+        let _order;
+
+        // 按创建时间升序排序
+        if (columnKey === 'created' && order === 'ascend') {_columnKey="CREATED"; _order = 'SORT_ASC'; }
+        // 按创建时间降序排序
+        if (columnKey === 'created' && order === 'descend') { _columnKey="CREATED"; _order = 'SORT_DESC';}
+        // 按更新时间升序排序
+        if (columnKey === 'updated' && order === 'ascend') { _columnKey="UPDATED"; _order = 'SORT_ASC'; }
+        // 按更新时间降序排序
+        if (columnKey === 'updated' && order === 'descend') { _columnKey="UPDATED"; _order = 'SORT_DESC'; }
+        // 按更新时间升序排序
+        if (columnKey === 'cultureCustomerNum' && order === 'ascend') { _columnKey="CUSTOMER_NUM"; _order = 'SORT_ASC'; }
+        // 按更新时间降序排序
+        if (columnKey === 'cultureCustomerNum' && order === 'descend') { _columnKey="CUSTOMER_NUM"; _order = 'SORT_DESC'; }
+        const _query = {
+          ...query,
+          sortMap:{}
+        };
+        _query.sortMap[_columnKey]=_order;
+        props.onChange(_query);
+    }
+        // 显示分享弹窗
+    function handleShowShareModal(item) {
+        const htmlUrl = `${LIVE_SHARE}training_plan_detail/${item.planId}?id=${User.getStoreId()}&storeUserId=${User.getStoreUserId()}`;
+        const longUrl = htmlUrl
+        const shareData = { ...item, longUrl };
+        const sharePlanModal = (
+            <SharePlanModal
+                data={shareData}
+                type="liveClass"
+                close={() => {
+                    setSharePlanModal(null)
+                   
+                }}
+            />
+        )
+        setSharePlanModal(sharePlanModal)
+    }
+     //改变上架状态
+    function changeEnableState(item){
+      let _enableState = item.enableState
+      if(_enableState==='NO'){
+        _enableState = "YES";
+        item.enableState = "YES"
+      }else{
+        _enableState = "NO"
+        item.enableState = "NO"
+      }
+      const params={
+        "planId": item.planId,
+        "enableState":_enableState
+      }
+      PlanService.updateStateTrainingPlan(params).then((res)=>{
+        if(res.success){
+          if(_enableState === "YES"){
+            message.success("已启用此计划");
+          }else{
+            message.success("已禁用此计划");
+          }
+          props.onChange();
+        }
+      }) 
+    } 
+    
+    function toEditPlanPage(item){
+        window.RCHistory.push({
+            pathname: `/create-plan?type=edit&id=${item.planId}`,
+        })
+    }
+    function toLearningDataPage(item){
+        window.RCHistory.push({
+            pathname: `/learning-data?id=${item.planId}`,
+        })
+    }
+    function handleDelete(record){
+      return  confirm({
+        title: '你确定要删除吗？',
+        content: '删除后，此培训计划的用户将无法继续学习，所有学习数据将同步删除不可恢复',
+        icon: <span className="icon iconfont default-confirm-icon">&#xe839; </span>,
+        okText: '删除',
+        okType: 'danger',
+        cancelText: '取消',
+        width:440,
+        height:188,
+        onOk: () => {
+          if(record.enableState === "YES"){
+              Modal.warning({
+                  title: '无法删除',
+                  content: '培训计划启用中，无法直接删除',
+              });
+          }else{
+              deleteConfirm(record);
+          }
+          
+        }
+      })
+    }
+    function deleteConfirm(item){
+      const params={
+          "planId": item.planId,
+      }
+      PlanService.deleteTrainingPlan(params).then((res)=>{
+        if(res.success){
+            message.success("删除成功");
+            props.onChange();
+        }
+      }) 
+    }
+    function onShowSizeChange(current, size){
+        if (current === size) {
+            return
+        }
+        let _query = props.query
+        _query.size = size;
+        props.onChange(_query)
+    }
+    return (
+        <div className="plan-list">
+            <Table
+                rowKey={record => record.id}
+                showSorterTooltip={false}
+                dataSource={props.planListData}
+                columns={ parseColumns() }
+                pagination={false}
+                onChange={handleChangeTable}
+                bordered
+                size="middle"
+                scroll={{ x: 1400}}
+                className="plan-list-table"
+            />
+            <div className="box-footer">
+                <PageControl
+                    current={props.query.current - 1}
+                    pageSize={props.query.size}
+                    total={props.totalCount}
+                    toPage={(page) => {
+                        const _query = {...props.query, current: page + 1};
+                        props.onChange(_query)
+                    }}
+                    onShowSizeChange={onShowSizeChange}
+                />
+            </div>  
+            {sharePlanModal }
+        </div>
+    )
+  }
+  
+  export default withRouter(PlanList);
\ No newline at end of file

src/modules/plan-manage/components/PlanList.less

+.plan-list{
+    margin-top:12px;
+    .course-number{
+      text-align:right;
+      margin-right:45px;
+    }
+    .plan-list-table{
+      tbody {
+        tr{
+          &:nth-child(even){
+            background: transparent !important;
+            td{
+              background:#FFF !important;
+            }
+          }
+          &:nth-child(odd){
+            background: #FAFAFA !important;
+            td{
+              background: #FAFAFA !important;
+            }
+          }
+          &:hover{
+            td{
+              background:#F3f6fa !important;
+            }
+          }
+        }
+      }
+    }
+    .plan-name{
+      text-overflow: -o-ellipsis-lastline;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      line-clamp: 2;
+      -webkit-box-orient: vertical;
+    }
+    .operate-text {
+      color: #5289FA;
+      cursor: pointer;
+    }
+    .operate {
+      display: flex;
+  
+      &__item {
+        color: #5289FA;
+        cursor: pointer;
+  
+        &.split {
+          margin: 0 8px;
+          color: #BFBFBF;
+        }
+      }
+    }
+    .join-number{
+      text-align:right;
+      margin-right:12px;
+    }
+    .more-operate{
+      line-height:20px;
+    }
+}
\ No newline at end of file

src/modules/plan-manage/components/PlanOpt.jsx

+/*
+ * @Author: zhangleyuan
+ * @Date: 2021-02-20 16:45:51
+ * @LastEditors: zhangleyuan
+ * @LastEditTime: 2021-03-10 15:50:02
+ * @Description: 描述一下
+ * @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
+ */
+import React from 'react';
+import { Button } from 'antd';
+import { withRouter } from 'react-router-dom';
+import User from '@/common/js/user';
+import './PlanOpt.less';
+function PlanOpt() {
+  function  handleCreatePlan(){
+    window.RCHistory.push({
+      pathname: '/create-plan?type=add',
+    })
+  }
+  return (
+    <div className="plan-opt">
+      { (User.getUserRole() === "CloudManager" || User.getUserRole() === "StoreManager") &&
+          <Button
+            type="primary"
+            className="mr12"
+            onClick={handleCreatePlan}
+          >新建培训计划</Button>
+      }
+    </div>
+  );
+}
+export default withRouter(PlanOpt)

src/modules/plan-manage/components/PlanOpt.less

+.plan-opt{
+    margin-top:4px;
+}
\ No newline at end of file

src/modules/plan-manage/components/TrainingTask.jsx

+/*
+ * @Author: zhangleyuan
+ * @Date: 2021-02-20 16:45:51
+ * @LastEditors: zhangleyuan
+ * @LastEditTime: 2021-03-16 11:36:36
+ * @Description: 描述一下
+ * @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
+ */
+import React from 'react';
+import { Table ,Button,Input,Form,Collapse,Modal } from 'antd';
+import { sortableContainer, sortableElement, sortableHandle} from 'react-sortable-hoc';
+import { MenuOutlined } from '@ant-design/icons';
+import arrayMove from 'array-move';
+import RelatedCourseModal from '../modal/relatedCourseModal'
+import { withRouter } from 'react-router-dom';
+import './TrainingTask.less';
+const { Panel } = Collapse;
+const { confirm } = Modal;
+const CourseType = {
+  LIVE: {
+    text: "直播课"
+  },
+  VOICE : {
+    text:"视频课"
+  },
+  RECORD : {
+    text:'录播课'
+  }
+};
+const courseStateShow = {
+  UN_START: {
+    title: "待开播",
+  },
+  STARTING: {
+    title: "直播中",
+  },
+  FINISH: {
+    title: "回放",
+  },
+  EXPIRED: {
+    title: "未成功开课",
+  },
+};
+
+const DragHandle = sortableHandle(() => (
+  <span className="operate__item" >
+    <span className="icon iconfont">&#xe7cd;</span>
+    <span className="text">移动</span>
+  </span>
+));
+
+
+
+const SortableTaskItem = sortableElement(props => <div {...props}>{props.taskItem}</div>)
+const SortableTaskContainer =  sortableContainer(props => <div {...props}></div>);
+
+const SortableCourseItem = sortableElement(props => <div {...props}>{props.courseItem}</div>)
+const SortableCourseContainer =  sortableContainer(props => <div {...props}></div>);
+class TrainingTask extends React.Component {
+  
+  constructor(props) {
+    super(props);
+    this.state = {
+      dataSource:this.props.data,
+      selectedTaskIndex:0,
+      relatedCourseModalVisible:false
+    };
+  }
+  componentWillMount(){
+  
+  }
+
+  componentWillReceiveProps(nextProps) {
+    
+  }
+  
+  onTaskSortEnd = ({ oldIndex, newIndex }) => {
+    const { dataSource } = this.state;
+
+    if (oldIndex !== newIndex) {
+
+      const newData = arrayMove([].concat(dataSource), oldIndex, newIndex).filter(el => !!el);
+      this.setState({
+        dataSource:newData,
+      },()=>{this.props.onChange(newData);})
+    }
+  };
+  onCourseSortEnd = ({ oldIndex, newIndex },parentIndex) => {
+    
+    const { dataSource } = this.state;
+  
+    const _dataSource = [...dataSource];
+    if (oldIndex !== newIndex) {
+      _dataSource[parentIndex].courseList = arrayMove([].concat(dataSource[parentIndex].courseList), oldIndex, newIndex).filter(el => !!el);
+      this.setState({
+        dataSource:_dataSource,
+      },()=>{this.props.onChange(_dataSource);})
+    }
+
+  };
+  
+  addTask = () => {
+    const { dataSource } = this.state;
+    const taskObj={
+      taskName: '',
+      index:dataSource.length,
+      type:'input',
+      open:true,
+      courseList:[
+      ]
+    }
+    const newData = [...dataSource,taskObj];
+    this.setState({
+      dataSource:newData
+    },()=>{this.props.onChange(newData);})
+  }
+  
+  handleRenameTaskName = (e,record) => {
+    const { value } = e.target;
+    const { dataSource } = this.state;
+    record.taskName = value;
+    this.setState({
+      dataSource,
+    },()=>{this.props.onChange(dataSource);})
+  }
+  handleTaskNameBlur = (e,record)=>{
+    const { value } = e.target;
+    const { dataSource }= this.state; 
+    let input  = /^[\s]*$/;
+    if(value && !input.test(value)){
+      record.type="text";
+      this.setState({
+        dataSource,
+      },()=>{this.props.onChange(dataSource);})
+    } 
+  }
+
+  handleRenameCourseName = (e,record) => {
+    const { value } = e.target;
+    const { dataSource } = this.state;
+    record.courseName = value;
+    this.setState({
+      dataSource,
+    },()=>{this.props.onChange(dataSource);})
+  }
+
+  handleCourseNameBlur = (e,record)=>{
+    const { value } = e.target;
+    const { dataSource }= this.state;
+    let input  = /^[\s]*$/;
+    if(value && !input.test(value)){
+      record.type="text";
+      this.setState({
+        dataSource,
+      },()=>{this.props.onChange(dataSource);})
+    } 
+
+  }
+  handleDeleteTask = (index)=>{
+    return confirm({
+      title: "删除任务",
+      content: "删除该任务会同步删除任务下的课程，是否仍要删除？",
+      icon: (
+        <span className="icon iconfont default-confirm-icon">&#xe839; </span>
+      ),
+      okText: "删除",
+      okType: "danger",
+      cancelText: "取消",
+      onOk: () => {
+        this.handleConfirmDeleteTask(index);
+      },
+    });
+  
+  }
+  handleConfirmDeleteTask = (index)=>{
+    const {dataSource}= this.state;
+    const newData=[...dataSource];
+    newData.splice(index,1);
+    this.setState({
+      dataSource:newData,
+    },()=>{this.props.onChange(newData);})
+  }
+  
+  handleDeleteCourse = (parentIndex,index)=>{
+    return confirm({
+      title: "删除课程",
+      content: "确定删除该课程吗？",
+      icon: (
+        <span className="icon iconfont default-confirm-icon">&#xe839; </span>
+      ),
+      okText: "删除",
+      okType: "danger",
+      cancelText: "取消",
+      onOk: () => {
+        this.handleConfirmDeleteCourse(parentIndex,index);
+      },
+    });
+  }
+  handleConfirmDeleteCourse = (parentIndex,index)=>{
+    const {dataSource}= this.state;
+    const newData=[...dataSource];
+    const selectData = [...newData[parentIndex].courseList]
+    selectData.splice(index,1)
+    newData[parentIndex].courseList= selectData;
+    this.setState({
+      dataSource:newData,
+    },()=>{this.props.onChange(newData);})
+  }
+  showRelatedCourseModal = (index)=>{
+    this.setState({
+      selectedTaskIndex:index,
+      relatedCourseModalVisible:true
+    })
+  }
+  closeRelatedCourseModal = (index)=>{
+    this.setState({
+      relatedCourseModalVisible:false
+    })
+  }
+  confirmSelectCourse = (selectList) =>{
+    const {selectedTaskIndex}= this.state;
+    const { dataSource } = this.state
+    const newData=[...dataSource];
+    const selectData = [...newData[selectedTaskIndex].courseList]
+    const _selectData =[...selectData,...selectList];
+    newData[selectedTaskIndex].courseList= _selectData;
+    this.setState({
+      relatedCourseModalVisible:false,
+      dataSource:newData,
+    },()=>{
+      this.props.onChange(newData);
+    })
+  }
+  openOrCloseTask = (index)=>{
+    const {dataSource}= this.state;
+    const newData=[...dataSource];
+    newData[index].open = !newData[index].open;
+    this.setState({
+      dataSource:newData,
+    },()=>{this.props.onChange(newData);})
+  }
+  handleValidatorTaskName = (rule,value)=>{
+    let input  = /^[\s]*$/;
+    if (input.test(value) || !value){
+      return Promise.reject(new Error('请输入任务名称'))
+    }
+    return  Promise.resolve()
+  }
+  
+  handleValidatorCourseName = (rule,value)=>{
+    let input  = /^[\s]*$/;
+    if (input.test(value) || !value){
+      return Promise.reject(new Error('请输入课程名称'))
+    }
+    return  Promise.resolve()
+  }
+
+  renderTaskItem = (record,index)=>{
+    return  <div className="plan-sort-task-item">
+              <div className="task-con">
+                <div className="task-instro">
+                  <span onClick={()=>this.openOrCloseTask(index)}>
+                    {record.open?
+                      <span className="icon iconfont open-icon">&#xe82d;</span>:
+                      <span className="icon iconfont  open-icon">&#xe835;</span>
+                    }
+                  </span>
+                  {record.type==='input'?
+                    <div className="task-name-con">
+                      <span className="number">{index + 1}.</span>
+                      <Form>
+                        <Form.Item  
+                        validateTrigger={['onChange', 'onBlur']}
+                        name={['taskName']}
+                        rules={[
+                          {
+                            validator:(rule,value)=>this.handleValidatorTaskName(rule,value)
+                          }
+                        ]}>
+                          <Input  className="task-name-input" defaultValue={record.taskName} style={{ width: 300 }} placeholder="请输入任务名称（20字以内）"  maxLength={20} onChange={(e) => { this.handleRenameTaskName(e,record)}} onBlur={(e)=>{this.handleTaskNameBlur(e,record)}}/>
+                        </Form.Item>
+                      </Form>
+                      </div>
+                      : 
+                      <div className="task-name-con">
+                        <span className="number">{index + 1}.</span>
+                        <span className="task-name">{record.taskName}</span>
+                      </div>
+                  }
+                </div>
+                <div className="operate">
+                    <DragHandle />
+                    <span className="operate__item" onClick={()=>{const { dataSource }= this.state; record.type="input";this.setState({dataSource})}}>
+                      <span className="icon iconfont">&#xe6f5;</span>
+                      <span className="text">重命名</span>
+                    </span>
+                    <span className="operate__item"  onClick={()=>{this.handleDeleteTask(index)}} >
+                      <span className="icon iconfont">&#xe6f6;</span>
+                      <span className="text">删除</span>
+                    </span>
+                </div>
+              </div>
+              {record.open &&
+                <div className="course-box">
+                  <SortableCourseContainer 
+                    useDragHandle
+                    disableAutoscroll
+                    helperClass="row-dragging"
+                    onSortEnd={(record)=>this.onCourseSortEnd(record,index)} >
+                    {record.courseList.map((courseItem, courseIndex) =>
+                      <SortableCourseItem courseItem={this.renderCourseItem(courseItem,courseIndex,index)} index={courseIndex}>
+                      </SortableCourseItem>
+                    )}
+                  </SortableCourseContainer>
+
+                  <div className="add-course-con">
+                    {record.courseList.length>19?
+                      <span className="add-course-btn-disabled" onClick={()=>{this.showRelatedCourseModal(index)}}><span>+</span><span>关联课程</span></span>
+                      :
+                      <span className="add-course-btn" onClick={()=>{this.showRelatedCourseModal(index)}}><span>+</span><span>关联课程</span></span>
+                    }
+                   
+                  </div>
+                </div>
+              }
+            </div>
+    }
+  renderCourseItem = (record,index,parentIndex)=>{
+    return <div className="plan-course-sort-item">
+              <div className="course-info">
+                <span className="course-type">{CourseType[record.courseType].text}</span>
+                {record.type==='input'?
+                  <Form>
+                    <Form.Item  
+                    validateTrigger={['onChange', 'onBlur']}
+                    name={['courseName']}
+                    rules={[
+                      {
+                        validator:(rule,value)=>this.handleValidatorCourseName(rule,value)
+                      }
+                    ]}>
+                      <Input className="course-name-input" defaultValue={record.courseName} style={{ width: 300 }} placeholder="请输入课程名称（40字以内）"  maxLength={40} onChange={(e) => { this.handleRenameCourseName(e,record)}} onBlur={(e)=>{this.handleCourseNameBlur(e,record)}}/></Form.Item>
+                    </Form>
+                  :
+                  <span className="course-name">{parentIndex + 1}.{index + 1} {record.courseName}</span>
+                }
+                {record.courseState === "EXPIRED" &&
+                  <span className="icon iconfont tip">&#xe834;</span>
+                }
+                { record.courseType==="LIVE" &&
+                  <span className="course-state">{courseStateShow[record.courseState].title}</span>
+                }
+               
+              </div>
+              <div className="course-operate">
+                <DragHandle />
+                {/* <span className="operate__item">
+                  <span className="icon iconfont">&#xe6f5;</span>
+                  <span  className="text" onClick={(e)=>{const { dataSource } = this.state; record.type="input";this.setState({dataSource})}}>重命名</span>
+                </span> */}
+                <span className="operate__item" onClick={()=>{this.handleDeleteCourse(parentIndex,index)}}>
+                  <span className="icon iconfont">&#xe6f6;</span>
+                  <span  className="text">删除</span>
+                </span>
+              </div>
+          </div>
+  }
+  render() {
+    const { dataSource,selectedTaskIndex,relatedCourseModalVisible} = this.state;
+
+    const { data } = this.props;
+    return (
+      <div  className="training-task">
+       <SortableTaskContainer  
+          useDragHandle
+          disableAutoscroll
+          helperClass="row-dragging"
+          onSortEnd={this.onTaskSortEnd} 
+          className="plan-task-sort-container"
+        >
+          {dataSource.map((item, index) =>
+            <SortableTaskItem taskItem={this.renderTaskItem(item,index)} index={index}>
+            </SortableTaskItem>
+          )}
+       </SortableTaskContainer>
+       
+        <div className="add-task-con">
+          {dataSource.length > 9 ?
+          <span className="add-task-btn-disabled"><span>+</span><span>添加任务</span></span>
+          :
+          <span className="add-task-btn" onClick={()=>this.addTask()}><span>+</span><span>添加任务</span></span>
+          }
+        </div>
+        { relatedCourseModalVisible &&
+          <RelatedCourseModal
+            selectedTaskIndex={selectedTaskIndex}
+            data={dataSource}
+            visible={relatedCourseModalVisible}
+            onClose={this.closeRelatedCourseModal}
+            onSelect={this.confirmSelectCourse}
+          />
+        }
+      </div>
+    );
+  }
+}
+
+export default withRouter(TrainingTask)

src/modules/plan-manage/components/TrainingTask.less

+.training-task{
+    thead{
+        display:none;
+    }
+    .ant-form-item{
+      margin-bottom:0 !important;
+    }
+
+    .add-task-con{
+      height: 52px;
+      background: #F7F8F9;
+      border-radius: 2px;
+      padding:16px;
+      margin-top:16px;
+      .add-task-btn-disabled{
+        color:#CCCCCC;
+        font-size:14px;
+      }
+      .add-task-btn{     
+        color: #5289FA;
+        font-size:14px;
+      }
+    }
+}
+
+.plan-sort-task-item{
+  .task-con{
+    display:flex;
+    padding:16px;
+    background: #F7F8F9;
+    border-radius: 2px;
+    justify-content: space-between;
+    align-items: center;
+    .task-instro{
+      display:flex;
+      align-items: center;
+      .open-icon{
+        color:#999999;
+        font-size:10px;
+      }
+      .task-name-con{
+        display:flex;
+        align-items: center;
+        color:#333333;
+        font-size:14px;
+        .number{
+          margin-right:10px;
+          margin-left:10px;
+        }
+        .task-name-input{
+          width: 300px;
+          height: 32px;
+          background: #FFFFFF;
+          border-radius: 4px;
+        }
+      } 
+    }
+    .operate{
+      display: none;
+      .operate__item{
+        cursor:pointer;
+        margin-left:16px;
+        color:#666666;
+        font-size:14px;
+        .icon{
+          font-size:14px;
+          color:#999;
+        }
+        .text{
+          margin-left:8px;
+        }
+      }
+    }
+    &:hover{
+      .operate{
+        display:block;
+      }
+    }
+  }
+ 
+  .course-box{
+    .add-course-con{
+        padding:16px 51px;
+        color: #5289FA;
+        font-size:14px;
+        .add-course-btn-disabled{
+          font-size:14px;
+          color:#ccc;
+        }
+    }
+  }
+}
+.plan-course-sort-item{
+  display:flex;
+  padding:16px 16px 16px 0px;
+  margin-left:51px;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom:1px dotted #E8E8E8;
+  &:hover{
+    .course-operate{
+      display:block;
+    }
+  }
+  .course-operate{
+    display: none;
+    .operate__item{
+      cursor:pointer;
+      margin-left:16px;
+      color:#666666;
+      font-size:14px;
+      .icon{
+        font-size:14px;
+        color:#999;
+      }
+      .text{
+        margin-left:8px;
+      }
+    }
+  }
+
+  .course-info{
+    .ant-form{
+      display:inline-block;
+    }
+    .course-name-input{
+      margin-right:8px;
+    }
+    .course-type{
+        font-size:11px;
+        color:#666666;
+        padding:0px 6px;
+        border: 1px solid #999999;
+        margin-right:4px;
+        border-radius: 2px;
+        line-height: 16px;
+    }
+    .course-name{
+        color:#666666;
+        font-size:14px;
+        margin-right:8px;
+    }
+    .tip{
+        font-size:14px;
+        color:#FF4F4F;
+        margin-right:2px;
+    }
+    .course-state{
+        color:#999;
+        font-size:14px;
+    }
+  }
+}

src/modules/plan-manage/components/UserLearningData.jsx

+import React from 'react';
+import { withRouter } from "react-router-dom";
+import {Table, Modal,Input,message,Tooltip} from 'antd';
+import { PageControl } from "@/components";
+import UserLearningDataFilter from './UserLearningDataFilter';
+import PlanService from '@/domains/plan-domain/planService';
+import UserLearnDetailModal from "../modal/UserLearnDetailModal";
+import UnbundEmployeeModal from '../modal/UnbundEmployeeModal'
+import User from '@/common/js/user';
+import './UserLearningData.less';
+const userRole =  User.getUserRole();
+const { Search } = Input;
+const { confirm } = Modal;
+const LearnState = {
+  UN_PLAY: {
+    text: "未开始"
+  },
+  UNDER_WAY: {
+    text:"进行中"
+  },
+  FINISH : {
+    text:'已完成'
+  }
+};
+
+class UserLearningData extends React.Component {
+  constructor(props) {
+    super(props);
+    const id = getParameterByName("id");
+    this.state = {
+      id,
+      dataSource:[],
+      size:10,
+      query: {
+        current: 1,
+      },
+      totalCount:0,
+      userLearnDetailModalSHow:false,
+      unbundEmployeeModalVisible:false,
+    }
+  }
+  componentDidMount(){
+    this.handleFetchDataList();
+  }
+  handleFetchDataList = (_query)=>{
+    const { query ,size,id}  = this.state;
+    const params ={
+      ...query,
+      ..._query,
+      size,
+      planId:id,
+      storeId:User.getStoreId(),
+      storeUserId:User.getStoreUserId(),
+    }
+    this.setState({ query: params });
+    PlanService.getPlanCustomerRecordPage(params).then((res) => {
+      const { result = {} } = res ;
+      const { records = [], total = 0 } = result;
+      this.setState({
+          dataSource: records,
+          totalCount: Number(total)
+      });
+    });
+  }
+  onShowSizeChange = (current, size) => {
+    if (current == size) {
+      return
+    }
+    this.setState({
+      size
+    },()=>{this.handleFetchDataList()})
+  }
+  handleChangeTable = (pagination, filters, sorter)=> {
+    const { columnKey, order } = sorter;
+    const { query } = this.state;
+    let  _columnKey;
+    let _order;
+    if (columnKey === 'latelyLearnTime' && order === 'ascend') {_columnKey="LATE_LEARN_TIME"; _order = 'SORT_ASC'; }
+
+    if (columnKey === 'latelyLearnTime' && order === 'descend') { _columnKey="LATE_LEARN_TIME"; _order = 'SORT_DESC';}
+   
+    if (columnKey === 'startLearnTime' && order === 'ascend') { _columnKey="START_LEARN_TIME"; _order = 'SORT_ASC'; }
+  
+    if (columnKey === 'startLearnTime' && order === 'descend') { _columnKey="START_LEARN_TIME"; _order = 'SORT_DESC'; }
+   
+    if (columnKey === 'learnNum' && order === 'ascend') { _columnKey="LEARN_NUM"; _order = 'SORT_ASC'; }
+  
+    if (columnKey === 'learnNum' && order === 'descend') { _columnKey="LEARN_NUM"; _order = 'SORT_DESC'; }
+    const _query = {
+      ...query,
+      sortMap:{}
+    };
+    _query.sortMap[_columnKey]=_order;
+    this.setState({
+      query:_query
+    }, ()=>this.handleFetchDataList())
+  }
+  watchDetail = (record)=>{
+    this.setState({
+      userLearnDetailModalSHow:true,
+      storeCustomerId:record.storeCustomerId,
+      planId:record.planId
+    })
+  }
+  closeUserLearnDetailModal = ()=>{
+    this.setState({
+      userLearnDetailModalSHow:false,
+    })
+  }
+  UnbundEmployee = (record)=>{
+    if(User.getUserRole()==='CloudOperator'){
+      return confirm({
+        title: "你确定要解绑与用户的关系吗？",
+        content: "解绑后，用户该培训计划的学习数据将同步移出",
+        icon: (
+          <span className="icon iconfont default-confirm-icon">&#xe839; </span>
+        ),
+        okText: "删除",
+        okType: "danger",
+        cancelText: "取消",
+        onOk: () => {
+          this.handleConfirmUnbundEmployee(record.storeCustomerId);
+        },
+      });
+    }else{
+      this.setState({
+        unbundEmployeeModalVisible:true,
+        storeCustomerId:record.storeCustomerId
+      })
+    }
+  }
+
+  handleConfirmUnbundEmployee=(storeCustomerId)=>{
+    let removeUserIds = [];
+    removeUserIds.push(storeCustomerId)
+    const params = {
+      planId:getParameterByName("id"),
+      removeUserIds,
+      storeCustomerId:storeCustomerId,
+      storeId:User.getStoreId(),
+      storeUserId:User.getStoreUserId()
+    }
+    PlanService.removePlanCustomer(params).then((res) => {
+      this.handleFetchDataList();
+      message.success('解绑成功');
+    });
+  }
+  handleCloseUnbundEmployeeModal = ()=>{
+    this.setState({
+      unbundEmployeeModalVisible:false,
+    })
+  }
+  // 请求表头
+  parselumns = () => {
+    let columns;
+    if(User.getUserRole() === "CloudManager" || User.getUserRole() === "StoreManager"){
+      columns = [
+        {
+          title: '用户',
+          key: 'storeCustomerName',
+          dataIndex: 'storeCustomerName',
+          render: (val, record) => {
+            return (
+              <div>
+                {val}
+              </div>
+            )
+          }
+        },
+        {
+          title: '学习状态',
+          key: 'learnState',
+          dataIndex: 'learnState',
+          render: (val, record) => {
+            return (
+              <div>
+                {LearnState[val].text}
+              </div>
+            )
+          }
+        },
+        {
+        title: <span>
+          <span>负责人</span>
+          <Tooltip  title="培训计划的分享者/跟进人"><i className="icon iconfont" style={{ marginLeft: '5px',cursor:'pointer',color:'#bfbfbf',fontSize:'14px'}}>&#xe61d;</i></Tooltip>
+        </span>,
+          key: 'userNameList',
+          dataIndex: 'userNameList',
+          render: (val, record) => {
+            return (
+              <div>
+                {record.userNameList.map((item,index)=>{
+                   return <span>{item} { (index < record.userNameList.length-1)&&(<span> 、</span>)} </span>
+                })}
+              </div>
+            )
+          }
+        },
+        {
+          title: '最近学习时间',
+          key: 'latelyLearnTime',
+          dataIndex: 'latelyLearnTime',
+          sorter:true,
+          width:240,
+          render: (val, record) => {
+            return (
+              `${formatDate('YYYY-MM-DD H:i',parseInt(record.latelyLearnTime))}`
+            )
+          }
+        },
+        {
+          title: '开始学习时间',
+          key: 'startLearnTime',
+          dataIndex: 'startLearnTime',
+          width:240,
+          sorter:true,
+          render: (val, record) => {
+            return (
+              <div>
+                {formatDate('YYYY-MM-DD H:i', val)}
+              </div>
+            )
+          }
+        },
+        {
+          title: <span>
+            <span>学习进度</span>
+            <Tooltip  title="用户培训计划中达到“已完成”状态的课程数/总课程数"><i className="icon iconfont" style={{ marginLeft: '5px',cursor:'pointer',color:'#bfbfbf',fontSize:'14px'}}>&#xe61d;</i></Tooltip>
+          </span>,
+          key: 'learnNum',
+          dataIndex: 'learnNum',
+          width:130,
+          sorter:true,
+          render: (val, record) => {
+            return (
+              <div className="learn-num">
+                <span>{record.courseFinishNum}</span>
+                <span>/</span>
+                <span>{record.courseNum}</span>
+              </div>
+            )
+          }
+        },
+        {
+          title: '操作',
+          key: 'operate',
+          dataIndex: 'operate',
+          render: (val, record) => {
+            return (
+              <div className="operate-area">
+                <span className="operate-item" onClick={()=>this.watchDetail(record)}>学习详情</span>
+                <span className="split">|</span>
+                <span className="operate-item" onClick={()=>{this.UnbundEmployee(record)}}>解绑</span>
+              </div>
+            )
+          }
+        }
+      ];
+    }else{
+      columns = [
+        {
+          title: '用户',
+          key: 'storeCustomerName',
+          dataIndex: 'storeCustomerName',
+          render: (val, record) => {
+            return (
+              <div>
+                {val}
+              </div>
+            )
+          }
+        },
+        {
+          title: '学习状态',
+          key: 'learnState',
+          dataIndex: 'learnState',
+          render: (val, record) => {
+            return (
+              <div>
+                {LearnState[val].text}
+              </div>
+            )
+          }
+        },
+        {
+          title: '最近学习时间',
+          key: 'latelyLearnTime',
+          dataIndex: 'latelyLearnTime',
+          sorter:true,
+          render: (val, record) => {
+            return (
+              <div>
+                {formatDate('YYYY-MM-DD H:i', val)}
+              </div>
+            )
+          }
+        },
+        {
+          title: '开始学习时间',
+          key: 'startLearnTime',
+          dataIndex: 'startLearnTime',
+          sorter:true,
+          render: (val, record) => {
+            return (
+              <div>
+                {formatDate('YYYY-MM-DD H:i', val)}
+              </div>
+            )
+          }
+        },
+        {
+          title: <span>
+            <span>学习进度</span>
+            <Tooltip  title="用户培训计划中达到“已完成”状态的课程数/总课程数"><i className="icon iconfont" style={{ marginLeft: '5px',cursor:'pointer',color:'#bfbfbf',fontSize:'14px'}}>&#xe61d;</i></Tooltip>
+          </span>,
+          key: 'learnNum',
+          dataIndex: 'learnNum',
+          sorter:true,
+          render: (val, record) => {
+            return (
+              <div>
+                <span>{record.courseFinishNum}</span>
+                <span>/</span>
+                <span>{record.courseNum}</span>
+              </div>
+            )
+          }
+        },
+        {
+          title: '操作',
+          key: 'operate',
+          dataIndex: 'operate',
+          render: (val, record) => {
+            return (
+              <div className="operate-area">
+                <span className="operate-item" onClick={()=>this.watchDetail(record)}>学习详情</span>
+                <span className="split">|</span>
+                <span className="operate-item" onClick={()=>{this.UnbundEmployee(record)}}>解绑</span>
+              </div>
+            )
+          }
+        }
+      ];
+    }
+   
+
+    return columns;
+  }
+  render() {
+    const { dataSource,query,size,totalCount,userLearnDetailModalSHow,storeCustomerId,planId,unbundEmployeeModalVisible} = this.state;
+    return (
+      <div className="user-learning-data">
+        <div className="search-container">
+          <UserLearningDataFilter  onChange={this.handleFetchDataList}/>
+        </div>
+        <div>
+              <Table
+                  rowKey={record => record.storeCustomerId}
+                  dataSource={dataSource}
+                  columns={this.parselumns()}
+                  pagination={false}
+                  className="user-learning-table"
+                  onChange={this.handleChangeTable}
+                  showSorterTooltip={false}
+                  bordered
+              />
+              {dataSource.length >0 &&
+                <div className="box-footer">
+                    <PageControl
+                        current={query.current - 1}
+                        pageSize={size}
+                        total={totalCount}
+                        toPage={(page) => {
+                            const _query = {...query, current: page + 1};
+                            this.setState({
+                              query:_query
+                            },()=>{ this.handleFetchDataList()})
+                        }}
+                        onShowSizeChange={this.onShowSizeChange}
+                    />
+                </div>
+              }
+        </div>
+        { userLearnDetailModalSHow &&
+          <UserLearnDetailModal storeCustomerId={storeCustomerId} planId={planId} visible={userLearnDetailModalSHow} onClose={this.closeUserLearnDetailModal}/>
+        }
+        {unbundEmployeeModalVisible && 
+          <UnbundEmployeeModal
+            visible={unbundEmployeeModalVisible}
+            onClose={this.handleCloseUnbundEmployeeModal}
+            storeCustomerId={storeCustomerId}
+            onConfirm={()=>{this.handleFetchDataList();this.handleCloseUnbundEmployeeModal();}}
+          />
+        }
+      
+      </div>
+    )
+  }
+}
+
+export default withRouter(UserLearningData);
\ No newline at end of file

src/modules/plan-manage/components/UserLearningData.less

+.user-learning-data{
+    .user-learning-table{
+        margin-top:4px;
+    }
+    .operate-area{
+        .operate-item{
+            font-size:14px;
+            color:#5289FA;
+            cursor: pointer;
+        }
+        .split{
+            margin:0 4px;
+            color: #BFBFBF;
+        }
+    }
+    .learn-num{
+        text-align:right;
+        margin-right:20px;
+    }
+}
\ No newline at end of file

src/modules/plan-manage/components/UserLearningDataFilter.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, useRef, useEffect } from 'react';
+import { withRouter } from 'react-router-dom';
+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 User from '@/common/js/user'
+import Bus from '@/core/bus';
+import './UserLearningDataFilter.less';
+
+const { Search } = Input;
+const { Option } = Select;
+const userRole =  User.getUserRole();
+const DEFAULT_QUERY = {
+  customerName: null,
+  startTime: null,
+  endTime:null,
+  learnState:null,
+  operateId: null,
+}
+const defaultCreatorQuery = {
+  size: 10,
+  current: 1,
+  nickName:null
+}
+function UserLearningDataFilter(props) {
+
+  const [expandFilter, setExpandFilter] = useState(false);
+  const [query,setQuery] = useState(DEFAULT_QUERY);
+  const [operateName,setOperateName] = useState(null)
+  const [hasNext,setHasNext] = useState(false);
+  const [creatorQuery,setCreatorQuery] = useState(defaultCreatorQuery);
+  const [creatorList,setCreatorList] =  useState([]);
+
+  useEffect(() => {
+    Bus.bind('watchDataView',(record) => handleChangeCreatorQuery(record))
+  });
+  useEffect(() => {
+    getCreatorList();
+  }, []);
+
+  function handleChangeCreatorQuery (record){
+    const _creatorQuery = {...creatorQuery};
+    _creatorQuery.operateId = record.storeUserId;
+    setCreatorQuery(_creatorQuery);
+    handleChangeQuery('operateId', record.storeUserId,record.storeUserName)
+  }
+    // 改变搜索条件
+  function handleChangeQuery(field,value,optionValue){
+    const _query ={
+      ...query,
+      [field]: value,
+      current: 1,
+    } 
+    setQuery(_query);
+    if(field === 'operateId'){
+      setOperateName(optionValue)
+    }
+    if (field === 'customerName') return;
+    props.onChange( _query);
+  }
+
+   
+
+  function handleChangeDates (dates){
+    const _query = _.clone(query);
+    if (_.isEmpty(dates)) {
+      delete _query.startTime;
+      delete _query.endTime;
+    } else {
+      _query.startTime = dates[0].valueOf();
+      _query.endTime = dates[1].valueOf();
+    }
+    const param ={
+      ..._query,
+      current: 1,
+    }
+    setQuery(param);
+    props.onChange(param);
+  }
+
+  // 重置搜索条件
+  function  handleReset(){
+    setQuery(DEFAULT_QUERY);
+    props.onChange(DEFAULT_QUERY);
+  }
+
+  function getCreatorList(current = 1, selectList){
+    const _query = {
+      ...creatorQuery,
+      current,
+      size:10
+    };
+    StoreService.getStoreUserBasicPage( _query).then((res) => {
+        const { result = {} } = res;
+        const { records = [], total = 0, 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);
+    }
+  }
+
+
+  return (
+      <div className="user-learn-data-filter">
+        <Row>
+            <div className="search-condition">
+              <div className="search-condition__item">
+                <span className="label customer-label">用户：</span>
+                <Search
+                  value={query.customerName}
+                  placeholder="搜索用户名称"
+                  onChange={(e) => { handleChangeQuery('customerName', e.target.value)}}
+                  onSearch={ () => { props.onChange(query) } }
+                  style={{ width: "calc(100% - 70px)" }}
+                  enterButton={<span className="icon iconfont">&#xe832;</span>}
+                />
+              </div>
+              {(User.getUserRole() === "CloudManager" || User.getUserRole() === "StoreManager")&&
+                <div className="search-condition__item">
+                    <span className="label lead-label">负责人：</span>
+                    <Select
+                      id="leadSelect"
+                      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={operateName}
+                      onChange={(value,option) => {
+                        if(option){
+                          handleChangeQuery('operateId',value,option.children)  
+                        }else{
+                          handleChangeQuery('operateId',value,"") 
+                        }
+
+                      }}
+                      onSearch={(value) => {
+                          creatorQuery.nickName = value
+                          setCreatorQuery(creatorQuery)
+                          getCreatorList();
+                        }
+                      }
+                      onClear ={(value)=>{
+                        setCreatorQuery({
+                          size: 10,
+                          current: 1,
+                          nickName:null
+                        })
+                        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="label learn-date-label">最近学习日期：</span>
+                <RangePicker
+                  id="course_date_picker"
+                  allowClear={false}
+                  value={ query.startTime ? [moment(query.startTime), moment(query.endTime)] : null }
+                  format={"YYYY-MM-DD"}
+                  onChange={(dates) => { handleChangeDates(dates) }}
+                  style={{ width: "calc(100% - 98px)" }}
+                />
+              </div>
+              { ((expandFilter && (User.getUserRole() === "CloudManager" || User.getUserRole() === "StoreManager")) ||   User.getUserRole === "CloudOperator")&&
+                <div className="search-condition__item">
+                  <span  className="label learn-status-label">学习状态：</span>
+                  <Select
+                    style={{ width: "calc(100% - 70px)" }}
+                    placeholder="请选择当前状态"
+                    allowClear={true}
+                    value={query.learnState}
+                    onChange={(value) => { handleChangeQuery('learnState', value) }}
+                    suffixIcon={<span className="icon iconfont" style={{fontSize:'12px',color:'#BFBFBF'}}>&#xe835;</span>}
+                  >
+                    <Option value="UN_PLAY">未开始</Option>
+                    <Option value="UNDER_WAY">进行中</Option>
+                    <Option value="FINISH">已完成</Option>
+                  </Select>
+                </div>
+              }
+            </div>  
+          {( User.getUserRole() === "CloudManager" ||  User.getUserRole() === "StoreManager")&&
+            <div className="reset-fold-area">
+              <Tooltip title="清空筛选"><span className="resetBtn iconfont icon" onClick={handleReset}>&#xe61b; </span></Tooltip>
+              <span style={{ cursor: 'pointer' }} className="fold-btn" onClick={() => {
+                setExpandFilter(!expandFilter)
+              }}>{expandFilter ? <span><span>收起</span><span className="iconfont icon fold-icon" >&#xe82d; </span> </span> : <span>展开<span className="iconfont icon fold-icon" >&#xe835; </span></span>}</span>
+          </div>
+          }
+        </Row>
+      </div>
+    )
+ 
+}
+
+export default withRouter(UserLearningDataFilter);
\ No newline at end of file

src/modules/plan-manage/components/UserLearningDataFilter.less

+.user-learn-data-filter {
+    position: relative;
+    .ant-input-search-button{
+      border-left:none;
+    }
+    .search-condition {
+      width: calc(100% - 80px);
+      display: flex;
+      align-items: center;
+      flex-wrap: wrap;
+  
+      &__item {
+        width: 30%;
+        margin-right: 3%;
+        margin-bottom: 12px;
+        .label{
+          font-size:14px;
+          color:#666;
+          vertical-align: middle;
+          width:70px;
+          text-align:right;
+          display:inline-block;
+        }
+        .learn-date-label{
+          width:98px;
+          text-align:right;
+          display:inline-block;
+        }
+        .ant-input-group-wrapper{
+          vertical-align: middle;
+        }
+      }
+    }
+    .reset-fold-area {
+      position: absolute;
+      right: 12px;
+    }
+    .resetBtn {
+      color: #999999;
+      font-size: 18px;
+      margin-right: 8px;
+    }
+    .fold-btn {
+      font-size: 14px;
+      color: #666666;
+      line-height: 20px;
+      .fold-icon {
+        font-size: 12px;
+        margin-left:4px;
+      }
+    }
+  }
\ No newline at end of file

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

+import React from 'react';
+import {Table, Modal,Input} from 'antd';
+import { PageControl } from "@/components";
+import StoreService from "@/domains/store-domain/storeService";
+import User from '@/common/js/user'
+import './SelectOperatorModal.less';
+import _ from "underscore";
+const { Search } = Input;
+class SelectOperatorModal extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      dataSource:[],
+      size:10,
+      query: {
+        current: 1,
+      },
+      totalCount:0,
+      selectOperatorList:this.props.selectOperatorList
+    };
+  }
+  componentDidMount() {
+    this.handleFetchDataList();
+  }
+ 
+   // 获取运营师列表
+  handleFetchDataList = () => {
+    const {query,size,totalCount} = this.state
+    const params ={
+      ...query,
+      size,
+      roleCodes:['CloudOperator']
+    }
+    StoreService.getStoreUserBasicPage(params).then((res) => {
+      const { result = {} } = res ;
+      const { records = [], total = 0 } = result;
+      this.setState({
+        dataSource: records,
+        totalCount: Number(total)
+      });
+    });
+  }
+  handleChangNickname = (value)=>{
+    const isPhone = (value || '').match(/^\d+$/);
+    const { query } =  this.state;
+    if(isPhone){
+      query.phone = value;
+      query.nickName = null;
+    }else{
+      query.nickName = value;
+      query.phone = null;
+    }
+    query.current = 1;
+    this.setState({
+      query
+    })
+  }
+
+  onShowSizeChange = (current, size) => {
+    if (current == size) {
+      return
+    }
+    this.setState({
+      size
+    },()=>{this.handleFetchDataList()})
+  }
+
+  // 请求表头
+  parseColumns = () => {
+    const columns = [
+      {
+        title: '姓名',
+        key: 'nickName',
+        dataIndex: 'nickName'
+      },
+      {
+        title: '手机号',
+        key: 'phone',
+        dataIndex: 'phone'
+      }
+    ];
+    return columns;
+  }
+  selectOperator = (record,selected) =>{
+    const {selectOperatorList} = this.state;
+    let _list = [];
+    if (selected || !_.find(selectOperatorList, (item) => item.id == record.id)) {
+      _list = _.uniq(selectOperatorList.concat([record]), false, (item) => item.id);
+    } else {
+      _list = _.reject(selectOperatorList, (item) => item.id === record.id);
+    }
+    this.setState({selectOperatorList:_list});
+  }
+  render() {
+    const { size,dataSource,totalCount,query,selectOperatorList} = this.state;
+    const { visible } = this.props;
+    return (
+        <Modal
+          title="选择运营师"
+          onCancel={this.props.onClose}
+          maskClosable={false}
+          visible={visible}
+          className="select-operator-modal"
+          closable={true}
+          width={800}
+          onOk={() => this.props.onSelect(selectOperatorList) } 
+          closeIcon={<span className="icon iconfont modal-close-icon">&#xe6ef;</span>} 
+        >
+          <div className="search-container">
+            <Search placeholder="搜索运营师/手机号" 
+              enterButton={<span className="icon iconfont">&#xe832;</span>} 
+              style={{ width: 200 }}  
+              onChange={(e) => { this.handleChangNickname(e.target.value)}}  
+              onSearch={ () => { this.handleFetchDataList()}} 
+            />
+          </div>
+          <div>
+            <Table
+              rowKey={record => record.id}
+              dataSource={dataSource}
+              columns={this.parseColumns()}
+              pagination={false}
+              bordered
+              rowSelection={{
+                type: 'checkbox',
+                selectedRowKeys: _.pluck(selectOperatorList, 'id'),
+                onSelect: (record, selected) => {
+                  this.selectOperator(record, selected)
+                },
+                onSelectAll: (selected, _selectedRows, changeRows) => {
+                  let _list = [];
+                  if (selected) {
+                    _list = _.uniq(selectOperatorList.concat(changeRows), false, (item) => item.id);
+                  } else {
+                    _list = _.reject(selectOperatorList, (item) => _.find(changeRows, (data) => data.id === item.id));
+                  }
+                  this.setState({selectOperatorList:_list});
+                },
+              }}
+            />
+            {dataSource.length >0 &&
+              <div className="box-footer">
+                <PageControl
+                  size="small"
+                  current={query.current - 1}
+                  pageSize={size}
+                  total={totalCount}
+                  toPage={(page) => {
+                    const _query = {...query, current: page + 1};
+                    this.setState({
+                      query:_query
+                    },()=>{ this.handleFetchDataList()})
+                  }}
+                  onShowSizeChange={this.onShowSizeChange}
+                />
+              </div>
+            }
+          </div>
+        </Modal>
+    )
+  }
+}
+
+export default SelectOperatorModal;
\ No newline at end of file

src/modules/plan-manage/modal/SelectOperatorModal.less

+.select-operator-modal{
+    .search-container{
+       margin-bottom:16px;
+    }
+}
\ No newline at end of file

src/modules/plan-manage/modal/SharePlanModal.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, Input, 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';
+
+const  storeName = User.getStoreName();
+const DEFAULT_COVER = 'https://image.xiaomaiketang.com/xm/YNfi45JwFA.png';
+
+class ShareLiveModal 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);
+      });
+    })
+  }
+
+  componentWillUnmount() {
+    // 页面销毁之前清空定时器
+    clearTimeout(this.timer);
+  }
+
+  // 下载海报
+  handleDownloadPoster = () => {
+    this.setState({
+      showImg:true,
+      time:new Date().valueOf()
+    },()=>{
+      this.setState({time:new Date().valueOf()},()=>{
+        let node = document.getElementById('poster');
+        domtoimage.toPng(node)
+          .then((imgData) => {
+            console.log(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-live-modal"
+        onCancel={this.props.close}
+      >
+      <div className="left">
+        <div id="poster">
+          <div className="store-name">
+            <span className="text">{storeName}</span>
+          </div>
+
+          <div className="course-name-title">邀请你参与培训：</div>
+         
+          <div class="live-couse-name">{planName}</div>
+          {
+           showImg ?  <img
+              crossOrigin='*'
+              src={coverUrl+`?=${time}`}
+              className="course-cover"
+            />:  <img
+              src={coverUrl+`?=${time}`}
+              className="course-cover"
+            />
+          }
+          <div className="qrcode-wrap">
+            <div className="qrcode-wrap__left">
+              <div className="text">长按识别二维码进入观看</div>
+              <img className="finger" src="https://image.xiaomaiketang.com/xm/thpkWDwJsC.png"/>
+            </div>
+            <div className="qrcode-wrap__right" id="qrcodeWrap">
+            </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 ShareLiveModal;

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

+.share-live-modal {
+  .ant-modal-body {
+    display: flex;
+    #poster{
+      background: #FFF;
+      margin:0;
+      padding: 20px;
+    }
+    .left {
+      width: 303px;
+      margin: 0 32px 0 16px;
+      box-shadow:0px 2px 10px 0px rgba(0,0,0,0.05);
+      border-radius: 12px;
+     
+    .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%;
+        }
+      }
+    }
+
+    .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:rgba(82, 137, 250, 1);
+          cursor: pointer;
+        }
+      }
+    }
+  }
+}
\ No newline at end of file

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

+import React from 'react';
+import {Table, Modal,Input,message} from 'antd';
+import { PageControl } from "@/components";
+import PlanService from '@/domains/plan-domain/planService'
+import User from '@/common/js/user'
+import './UnbundEmployeeModal.less';
+import _ from "underscore";
+const { Search } = Input;
+const UserRole = {
+  StoreManager: {
+    text: "店铺管理员"
+  },
+  CloudManager: {
+    text:"管理员"
+  },
+  CloudOperator: {
+    text:'运营师'
+  },
+  Cloud_Lecture: {
+    text:"讲师"
+  },
+};
+class UnbundEmployeeModal extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      dataSource:[],
+      selectOperatorList:[]
+    };
+  }
+  componentDidMount() {
+    this.handleFetchDataList();
+  }
+ 
+   // 获取绑定员工列表
+  handleFetchDataList = () => {
+    const params ={
+        planId: getParameterByName("id"),
+        storeCustomerId: this.props.storeCustomerId,
+        storeId:this.props.storeId
+    }
+    PlanService.getPlanCustomerAboutUser(params).then((res) => {
+      const { result = {} } = res ;
+      this.setState({
+        dataSource: result,
+      });
+    });
+  }
+
+  // 请求表头
+  parseColumns = () => {
+    const columns = [
+      {
+        title: '员工',
+        key: 'storeUserName',
+        dataIndex: 'storeUserName',
+       
+      },
+      {
+        title: '角色',
+        key: 'role',
+        dataIndex: 'role',
+        render:(val,record)=>{
+          return <span>{UserRole[val].text}</span>
+        }
+      },
+      {
+        title: '手机号',
+        key: 'storeUserPhone',
+        dataIndex: 'storeUserPhone'
+      }
+    ];
+    return columns;
+  }
+  selectOperator = (record,selected) =>{
+    const {selectOperatorList} = this.state;
+    let _list = [];
+    if (selected || !_.find(selectOperatorList, (item) => item.storeUserId == record.storeUserId)) {
+      _list = _.uniq(selectOperatorList.concat([record]), false, (item) => item.storeUserId);
+    } else {
+      _list = _.reject(selectOperatorList, (item) => item.storeUserId === record.storeUserId);
+    }
+    this.setState({selectOperatorList:_list});
+  }
+  confirmUnbund = ()=>{
+    const { selectOperatorList } = this.state;
+    if(selectOperatorList.length ===0){
+      message.warning('请选择需要解绑的员工');
+      return false;
+    }
+    const params = {
+      planId:getParameterByName("id"),
+      removeUserIds:_.pluck(selectOperatorList, 'storeUserId'),
+      storeCustomerId:this.props.storeCustomerId,
+      storeId:User.getStoreId(),
+      storeUserId:User.getStoreUserId()
+    }
+    PlanService.removePlanCustomer(params).then((res) => {
+      message.success('解绑成功');
+      this.props.onConfirm();
+    });
+  }
+  render() {
+    const { size,dataSource,totalCount,query,selectOperatorList} = this.state;
+    const { visible } = this.props;
+    return (
+        <Modal
+          title="选择需解绑的员工"
+          onCancel={this.props.onClose}
+          maskClosable={false}
+          visible={visible}
+          className="select-operator-modal"
+          closable={true}
+          width={800}
+          onOk={() => {this.confirmUnbund()}} 
+          closeIcon={<span className="icon iconfont modal-close-icon">&#xe6ef;</span>} 
+        >
+          <div>
+            <Table
+              rowKey={record => record.storeUserId}
+              dataSource={dataSource}
+              columns={this.parseColumns()}
+              pagination={false}
+              bordered
+              rowSelection={{
+                type: 'checkbox',
+                selectedRowKeys: _.pluck(selectOperatorList, 'storeUserId'),
+                onSelect: (record, selected) => {
+                  this.selectOperator(record, selected)
+                },
+                onSelectAll: (selected, _selectedRows, changeRows) => {
+                  let _list = [];
+                  if (selected) {
+                      _list = _.uniq(selectOperatorList.concat(changeRows), false, (item) => item.storeUserId);
+                  } else {
+                      _list = _.reject(selectOperatorList, (item) => _.find(changeRows, (data) => data.storeUserId === item.storeUserId));
+                  }
+                  this.setState({selectOperatorList:_list});
+                }
+              }}
+            />
+          </div>
+        </Modal>
+    )
+  }
+}
+
+export default UnbundEmployeeModal;
\ No newline at end of file

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

+import React from 'react';
+import {Table, Modal,Input} from 'antd';
+import { PageControl } from "@/components";
+import PlanService from '@/domains/plan-domain/planService'
+import User from '@/common/js/user'
+import './UserLearnDetailModal.less';
+import _ from "underscore";
+const { Search } = Input;
+const defaultCover = 'https://image.xiaomaiketang.com/xm/YNfi45JwFA.png';
+const CourseType = {
+  LIVE: {
+    text: "直播课"
+  },
+  VOICE : {
+    text:"视频课"
+  },
+  RECORD : {
+    text:'录播课'
+  }
+};
+const courseStateShow = {
+  UN_START: {
+    title: "待开播",
+  },
+  STARTING: {
+    title: "直播中",
+  },
+  FINISH: {
+    title: "回放",
+  },
+  EXPIRED: {
+    title: "未成功开课",
+  },
+};
+class UserLearnDetailModal extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      planDataSource:{},
+      taskDataSource:[],
+      taskSize:10,
+      taskQuery: {
+        current: 1,
+      },
+      taskTotalCount:0,
+      courseDataSource:[],
+      storeCustomerName:'',
+      storeCustomerPhone:''
+    };
+  }
+  componentDidMount() {
+    this.getPlanCustomerDetail();
+  }
+  getPlanCustomerDetail = ()=>{
+    PlanService.getPlanCustomerDetail({
+       planId:getParameterByName("id"),
+       storeCustomerId:this.props.storeCustomerId,
+       storeId:User.getStoreId()
+    }).then((res) => {
+      const {
+        storeCustomerName,
+        storeCustomerPhone,
+        planName,
+        learnFinishPercentage,
+        taskCustomerVOList,
+        courseMediaVOS,
+      }=res.result;
+        let coverUrl;
+        courseMediaVOS.map((item) => {
+          if(item.contentType === "COVER"){
+            coverUrl = item.mediaUrl;
+          }
+          return item;
+        })
+        const planDataSource = {
+          planName,
+          learnFinishPercentage,
+          coverUrl:coverUrl || defaultCover
+        }
+        this.setState({
+          storeCustomerName,   
+          storeCustomerPhone,
+          planDataSource,
+          taskDataSource:taskCustomerVOList
+        })
+    })
+  }
+
+  parseTaskColumns = () => {
+    const columns = [
+      {
+        title: '培训任务',
+        key: 'taskName',
+        dataIndex: 'taskName',
+        render: (val, record,index) => {
+          return (
+            <div className="taskName">
+              {index + 1}.{record.taskName}
+            </div>
+          )
+        }
+      },
+      {
+        title: '学习进度',
+        key: 'learnFinishPercentage',
+        dataIndex: 'learnFinishPercentage',
+        width:167,
+        render: (val, record) => {
+          return (
+            <div className="task-learn-percentage">
+              { val === 100 ?<span>已完成</span>:<span>{val}%</span>}
+            </div>
+          )
+        }
+      }
+    ];
+    return columns;
+  }
+  parseCoursecolumns = (parentIndex) => {
+    const columns = [
+      {
+        title: '课程',
+        key: 'courseName',
+        dataIndex: 'courseName',
+        render: (val, record,index) => {
+          return (
+            <div className="course-info">
+              <div>
+                <span className="course-type">{CourseType[record.courseType].text}</span>
+                <span>{parentIndex + 1}.{index + 1}&nbsp;</span>
+              </div>
+              <div className="name-and-state">
+                <span className="course-name">{record.courseName}</span>
+                { record.courseType==="LIVE" &&
+                <span className="course-state">{courseStateShow[record.courseState].title}</span>
+                }
+              </div>
+            </div>
+          )
+        }
+      },
+      {
+        title: '学习进度',
+        key: 'learnFinishPercentage',
+        dataIndex: 'learnFinishPercentage',
+        width:152,
+        render: (val, record) => {
+          return (
+            <div className="course-learn-percentage">
+               { record.learnState === "FINISH"  ?<span>已完成</span>:<span>{val}%</span>}
+            </div>
+          )
+        }
+      }
+    ];
+    return columns;
+  }
+  render() {
+    const {storeCustomerName,storeCustomerPhone,planDataSource,taskDataSource,taskQuery,taskTotalCount} = this.state;
+    const { visible } = this.props;
+    return (
+        <Modal
+          title="用户学习详情"
+          onCancel={this.props.onClose}
+          onOk={this.props.onClose}
+          maskClosable={false}
+          visible={visible}
+          className="user-Learn-modal"
+          closable={true}
+          width={800}
+          closeIcon={<span className="icon iconfont modal-close-icon">&#xe6ef;</span>} 
+        >
+          <div className="customer-info">
+            <span className="customer-name">
+              <span>用户：</span>
+              <span>{storeCustomerName}</span>
+            </span>
+            <span className="customer-phone">
+              <span>手机号：</span>
+              <span>{storeCustomerPhone}</span>
+            </span>
+          </div>
+          <div className="plan-instro">
+            <div className="img-con">
+              <img src={planDataSource.coverUrl}/>
+            </div>
+            <div>
+              <div className="plan-name">{planDataSource.planName}</div>
+              <div className="task-learn-percentage">
+                <span>学习进度: {planDataSource.learnFinishPercentage}%</span>
+              </div>
+            </div>
+          </div>
+        
+          <div>
+            <Table
+              rowKey={(record) => record.taskId}
+              className="task-table"
+              dataSource={taskDataSource}
+              columns={this.parseTaskColumns()}
+              pagination={false}
+              expandedRowRender={(record,index) => {
+                if(!record.courseVOList){
+                  return
+                }
+                if (record.courseVOList.length !== 0 ){
+                  return  <div>
+                            <Table
+                              pagination={false}
+                              dataSource={record.courseVOList}
+                              columns={this.parseCoursecolumns(index)}
+                              className="child-table"
+                            />
+                      </div>
+                }
+              }}
+              rowClassName={(record,index)=>{if(index%2===0){return 'odd-row'}else{ return 'even-row'}}}
+            />
+          </div>
+        </Modal>
+    )
+  }
+}
+
+export default UserLearnDetailModal;
\ No newline at end of file

src/modules/plan-manage/modal/UserLearnDetailModal.less

+.user-Learn-modal{
+   
+    .customer-info{
+        margin-bottom:16px;
+        .customer-name{
+            font-size:14px;
+            color:#333;
+            margin-right:32px;
+        }
+        .customer-phone{
+            font-size:14px;
+            color:#333;
+        } 
+    }   
+    .plan-instro{
+        display: flex;
+        align-items: center;
+        margin-bottom:16px;
+        .img-con{
+            margin-right:8px;
+            img{
+                width: 97px;
+                height: 54px;
+                display: inline-block;
+                border-radius:4px;
+            }
+        }
+        .plan-name{
+            color:#333;
+            font-size:16px;
+        }
+        .plan-learn-percentage{
+            color:#333;
+            font-size:14px;
+        }
+    }
+    .task-table{
+        .ant-table-thead{
+            tr {
+                th{
+                    padding:9px 16px;
+                }
+            }
+        }
+        tr{
+            td{
+                padding:14px 16px;
+            }
+        }
+        .taskName{
+            color:#333;
+            font-size:14px;
+        }
+        .task-learn-percentage{
+            color:#333;
+            font-size:14px;
+        }
+        .course-info{
+            display:flex;
+            margin-left:57px;
+            align-items: center;
+            .course-type{
+                font-size:11px;
+                color:#666666;
+                padding:0px 6px;
+                border: 1px solid #999999;
+                margin-right:4px;
+                border-radius: 2px;
+                line-height: 16px;
+            }
+            .name-and-state{
+                flex:1;
+                .course-name{
+                    color:#666666;
+                    font-size:14px;
+                    margin-right:8px;
+                }
+                .tip{
+                    font-size:14px;
+                    color:#FF4F4F;
+                    margin-right:2px;
+                }
+                .course-state{
+                    color:#999;
+                    font-size:14px;
+                }
+            }
+           
+        }
+        .ant-table-expanded-row{
+            td{
+                padding:0 16px;
+            }
+        }
+        .ant-table-content{
+            border:1px solid #e8e8e8;
+            tr{
+                td{
+                    border:none;
+                }
+                .child-table{
+
+                    .ant-table-content{
+                        border:none;
+                        thead{
+                            display:none;
+                        }
+                        tbody tr {
+                            td{
+                                border-bottom:none;
+                                padding:14px 16px;
+                            }
+                            
+                        }
+                    }
+                  
+                } 
+            }
+            .odd-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;
+                        }
+                    }
+                }
+            }
+            .even-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;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
\ No newline at end of file

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

+import React from 'react';
+import {Table, Modal,Input,message,Button,Tooltip} from 'antd';
+import { PageControl } from "@/components";
+import CourseService from "@/domains/course-domain/CourseService";
+import User from '@/common/js/user';
+import { Tabs } from 'antd';
+import './relatedCourseModal.less';
+import _ from "underscore";
+import dealTimeDuration from "../../course-manage/utils/dealTimeDuration";
+
+const { Search } = Input;
+const { TabPane } = Tabs;
+const courseStateShow = {
+  UN_START: {
+    code: 1,
+    title: "待开课",
+    color: "#FFB714",
+  },
+  STARTING: {
+    code: 2,
+    title: "上课中",
+    color: "#238FFF",
+  },
+  FINISH: {
+    code: 3,
+    title: "已完成",
+    color: "#3BBDAA",
+  },
+  EXPIRED: {
+    code: 4,
+    title: "未成功开课",
+    color: "#999",
+  },
+};
+class SelectOperatorModal extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+        liveDataSource:[],
+        liveSize:10,
+        liveQuery: {
+          current: 1,
+        },
+        liveTotalCount:0,
+        selectLive:[],//弹窗内已选择的直播课程
+        currentCourseListData:[],
+        currentLiveCourseListData:[], //页面中已关联的直播课程
+        videoDataSource:[],
+        videoSize:10,
+        videoQuery: {
+          current: 1,
+        },
+        videoTotalCount:0,
+        selectVideo:[], //弹窗内已选择的视频课程 
+        currentVideoCourseListData:[], //页面中已关联的视频课程
+        activeKey:'video',
+        currentTaskCourseData:this.props.data[this.props.selectedTaskIndex].courseList || []
+     }
+  }
+
+  componentDidMount() {
+    this.handleFetchLiveDataList();
+    this.handleFetchVideoDataList();
+    
+  }
+
+  // 获取直播课列表
+  handleFetchLiveDataList = () => {
+    const {liveQuery,liveSize} = this.state;
+    const { selectedTaskIndex } =this.props;
+    const _data = [...this.props.data];
+    let  currentLiveCourseListData = [];
+    _data.map((item,index) => {
+      item.courseList.map((childItem,childIndex)=>{
+        if(childItem.courseType ==="LIVE"){
+          currentLiveCourseListData.push(childItem.courseId)
+        }
+        return childItem
+      })
+      return item
+    });
+    const params ={
+      ...liveQuery,
+      size:liveSize,
+      excludeCourseIdList:currentLiveCourseListData
+    }
+   
+    CourseService.getLiveCloudCourseBasePage(params).then((res) => {
+      const { result = {} } = res ;
+      const { records = [], total = 0 } = result;
+      this.setState({
+          liveDataSource: records,
+          liveTotalCount: Number(total),
+          currentLiveCourseListData
+      });
+    });
+  }
+
+  // 获取视频课列表
+  handleFetchVideoDataList = () => {
+    const {videoQuery,videoSize,videoTotalCount} = this.state;
+    const { selectedTaskIndex } =this.props;
+    const _data = [...this.props.data];
+    let  currentVideoCourseListData = [];
+    _data.map((item,index) => {
+      item.courseList.map((childItem,childIndex)=>{
+        if(childItem.courseType ==="VOICE"){
+          currentVideoCourseListData.push(childItem.courseId)
+        }
+        return childItem
+      })
+      return item
+    });
+    const params ={
+      ...videoQuery,
+      size:videoSize,
+      excludeCourseIdList:currentVideoCourseListData
+    }
+    CourseService.videoScheduleBasePage(params).then((res) => {
+      const { result = {} } = res ;
+      const { records = [], total = 0 } = result;
+
+      this.setState({
+          videoDataSource: records,
+          videoTotalCount: Number(total),
+          currentVideoCourseListData
+      });
+    });
+  }
+
+  handleChangVideoCourseName = (value)=>{
+    const { videoQuery } =  this.state;
+    videoQuery.courseName = value;
+    videoQuery.current = 1;
+    this.setState({
+      videoQuery
+    })
+  }
+  handleChangLiveCourseName = (value)=>{
+    const { liveQuery } =  this.state;
+    liveQuery.courseName = value;
+    liveQuery.current = 1;
+    this.setState({
+      liveQuery
+    })
+  }
+  onShowLiveSizeChange = (current, size) => {
+    if (current == size) {
+      return
+    }
+    this.setState({
+      liveSize:size
+    },()=>{this.handleFetchLiveDataList()})
+  }
+
+  onShowVideoSizeChange = (current, size) => {
+    if (current == size) {
+      return
+    }
+    this.setState({
+      videoSize:size
+    },()=>{this.handleFetchLiveDataList()})
+  }
+
+  // 请求表头
+  parseLiveColumns = () => {
+    const columns = [
+      {
+        title: <span><span>课程信息</span><Tooltip  title="仅显示未关联课程，已关联课程不支持重复选择"><i className="icon iconfont" style={{ marginLeft: '5px',cursor:'pointer',color:'#bfbfbf',fontSize:'14px'}}>&#xe61d;</i></Tooltip></span>,
+        key: 'course',
+        dataIndex: 'course',
+        width:'40%',
+        render: (val, record) => {
+          let hasCover = false;
+          return (
+            <div className="course-info">
+              { 
+                record.courseMediaVOS.map((item,index)=>{
+                  if( item.contentType === "COVER"){
+                    hasCover = true;
+                    return <img className="course-cover" src={item.mediaUrl}/>
+                  }    
+                })
+              }
+              { !hasCover  && 
+                <img className="course-cover" src={'https://image.xiaomaiketang.com/xm/YNfi45JwFA.png'}   />
+              }
+              <div>
+                <div className="course-name">{record.courseName}</div>
+                <span className="course-status" style={{color:courseStateShow[record.courseState].color,border:`1px solid ${courseStateShow[record.courseState].color}`}}>{courseStateShow[record.courseState].title}</span>
+              </div>
+            </div>
+          )
+        }
+      },
+      {
+        title: '上课时间',
+        key: 'courseTime',
+        dataIndex: 'courseTime',
+        width:'40%',
+        render: (val, record) => {
+          return (
+            <div>
+              <div>{formatDate('YYYY-MM-DD', record.startTime)}</div>
+              <div>{formatDate('H:i', record.startTime)}~{formatDate('H:i', record.endTime)}</div>
+            </div>
+          )
+        }
+      },
+      {
+        title: '店铺展示',
+        key: 'shelfState',
+        dataIndex: 'shelfState',
+        width:'20%',
+        render: (val, record) => {
+          return (
+            <span>
+              {record.shelfState==="YES"?
+                <span>开启</span>
+                :
+                <span>关闭</span>
+              }
+          </span>
+          )
+        }
+      },
+
+    ];
+    return columns;
+  }
+
+  // 请求表头
+  parseVideoColumns = () => {
+    const columns = [
+      {
+        title: <span><span>课程信息</span><Tooltip  title="仅显示未关联课程，已关联课程不支持重复选择"><i className="icon iconfont" style={{ marginLeft: '5px',cursor:'pointer',color:'#bfbfbf',fontSize:'14px'}}>&#xe61d;</i></Tooltip></span>,
+        key: 'course',
+        dataIndex: 'course',
+        width:'60%',
+        render: (val, record) => {
+          const { coverUrl, scheduleVideoUrl } = record;
+          return (
+            <div className="course-info">
+              {/* 上传了封面的话就用上传的封面, 没有的话就取视频的第一帧 */}
+              <img className="course-cover" src={coverUrl || `${scheduleVideoUrl}?x-oss-process=video/snapshot,t_0,m_fast`}/>
+              <div className="course-name">{record.courseName}</div>
+            </div>
+          )
+        }
+      },
+      {
+        title: '课程时长',
+        key: 'courseTime',
+        dataIndex: 'courseTime',
+        width:'20%',
+        render: (val, record) => {
+          return (
+            <span className="course-status">{dealTimeDuration(record.videoDuration)}</span>
+          )
+        }
+      },
+      {
+        title: '店铺展示',
+        key: 'shelfState',
+        dataIndex: 'shelfState',
+        width:'20%',
+        render: (val, record) => {
+          return (
+            <span>
+              {record.shelfState==="YES"?
+                <span>开启</span>
+                :
+                <span>关闭</span>
+              }
+            </span>
+          )
+        }
+      }
+
+    ];
+    return columns;
+  }
+  selectLiveList = (record,selected) =>{
+    const {selectVideo,currentTaskCourseData,selectLive} = this.state;
+      let _list = [];
+      if (selected || !_.find(selectLive, (item) => item.liveCourseId == record.liveCourseId)) {
+          _list = _.uniq(selectLive.concat([record]), false, (item) => item.liveCourseId);
+      } else {
+          _list = _.reject(selectLive, (item) => item.liveCourseId === record.liveCourseId);
+      }
+      if(_list.length + currentTaskCourseData.length + selectVideo.length> 20){
+        message.warning('无法继续选择，一个任务最多关联20个课程');
+        return;
+      }
+    this.setState({selectLive:_list});
+  }
+
+  selectVideoList = (record,selected) =>{
+    const {selectVideo,currentTaskCourseData,selectLive} = this.state;
+    let _list = [];
+    if (selected || !_.find(selectVideo, (item) => item.id == record.id)) {
+        _list = _.uniq(selectVideo.concat([record]), false, (item) => item.id);
+    } else {
+        _list = _.reject(selectVideo, (item) => item.id === record.id);
+    }
+    if(_list.length + currentTaskCourseData.length + selectLive.length> 20){
+        message.warning('无法继续选择，一个任务最多关联20个课程');
+      return;
+    }
+    this.setState({selectVideo:_list});
+  }
+  clearSelectCourse = ()=>{
+    this.setState({
+      selectLive:[],
+      selectVideo:[]
+    })
+  }
+  handleSelectVideo = (selectVideo)=>{
+      return  selectVideo.map((item,index)=>{
+          let _item = {};
+          _item.courseId = item.id;
+          _item.courseType = "VOICE";
+          _item.courseName = item.courseName;
+         
+          return  _item;
+      })
+  }
+  handleSelectLive = (selectLive)=>{
+    return  selectLive.map((item,index)=>{
+        let _item = {};
+        _item.courseId = item.liveCourseId;
+        _item.courseType = "LIVE";
+        _item.courseName = item.courseName;
+        _item.courseState = item.courseState;
+        return  _item;
+    })
+}
+  render() {
+    const { visible } = this.props;
+    const { liveDataSource,liveSize,liveQuery,liveTotalCount,selectLive,videoDataSource,videoSize,videoQuery,videoTotalCount,selectVideo,currentTaskCourseData,activeKey} = this.state;
+
+    return (
+        <Modal
+          title="关联课程"
+          onCancel={this.props.onClose}
+          maskClosable={false}
+          visible={visible}
+          className="related-course-modal"
+          closable={true}
+          width={800}
+          onOk={() => this.props.onSelect([...this.handleSelectVideo(selectVideo),...this.handleSelectLive(selectLive)]) } 
+          closeIcon={<span className="icon iconfont modal-close-icon">&#xe6ef;</span>} 
+          footer={[
+            activeKey ==='live'?
+              <a target='_blank' className="link-create-course" href={window.location.origin + window.location.pathname + '#/create-live-course?type=add'} onClick={this.props.onClose}>没有找到需要的直播课？<span>去创建</span></a>
+              :
+              <a target='_blank' className="link-create-course" href={window.location.origin + window.location.pathname + '#/create-video-course?type=add'} onClick={this.props.onClose}>没有找到需要的视频课？<span>去创建</span></a>
+            ,
+            <Button
+              onClick={() => {
+                this.props.onClose()
+              }}
+            >
+              取消
+            </Button>,
+            <Button type="primary" onClick={() => this.props.onSelect([...this.handleSelectVideo(selectVideo),...this.handleSelectLive(selectLive)]) }>
+              确定
+            </Button>
+          ]}
+        >
+            
+            <div>
+                <Tabs defaultActiveKey="video" onChange={(activeKey)=>{this.setState({activeKey:activeKey})}}>
+                    <TabPane tab="视频课" key="video">
+                        <div className="search-container">
+                            <Search enterButton={<span className="icon iconfont">&#xe832;</span>} placeholder="搜索课程名称"  style={{ width: 200 }} onChange={(e) => { this.handleChangVideoCourseName(e.target.value)}}  onSearch={ () => { this.handleFetchVideoDataList()}}/>
+                        </div>
+                        <div className="select-area">
+                            <div className="select-box">
+                              <div>
+                                <span className="icon iconfont tip-icon">&#xe61d;</span>
+                                <span className="select-num">已选择{selectVideo.length + selectLive.length}个</span>
+                              </div>
+                              <div>
+                                <span className="clear-btn" onClick={this.clearSelectCourse}>清空</span>
+                              </div>
+                            </div>
+                            <div className="related-box">该任务已关联{currentTaskCourseData.length}个课程，可继续选择{20- currentTaskCourseData.length }个</div>
+                        </div>
+                        <div>
+                            <Table
+                                rowKey={record => record.id}
+                                dataSource={videoDataSource}
+                                columns={this.parseVideoColumns()}
+                                pagination={false}
+                                bordered
+                                rowSelection={{
+                                    type: 'checkbox',
+                                    selectedRowKeys: _.pluck(selectVideo, 'id'),
+                                    onSelect: (record, selected) => {
+                                      this.selectVideoList(record, selected);
+                                    },
+                                    onSelectAll: (selected, _selectedRows, changeRows) => {
+                                      let _list = [];
+                                      if (selected) {
+                                          _list = _.uniq(selectVideo.concat(changeRows), false, (item) => item.id);
+                                      } else {
+                                          _list = _.reject(selectVideo, (item) => _.find(changeRows, (data) => data.id === item.id));
+                                      }
+                                      if(_list.length + currentTaskCourseData.length + selectLive.length> 20){
+                                        message.warning('无法继续选择，一个任务最多关联20个课程');
+                                        console.log('1111');
+                                        const extraLength = (_list.length + currentTaskCourseData.length + selectLive.length) -20;
+                                        _list.splice(_list.length - extraLength,extraLength);
+                                      }
+                                      this.setState({selectVideo:_list});
+                                    },
+                                }}
+                            />
+                                {videoDataSource.length >0 &&
+                                <div className="box-footer">
+                                    <PageControl
+                                      current={videoQuery.current - 1}
+                                      pageSize={videoSize}
+                                      size="small"
+                                      total={videoTotalCount}
+                                      toPage={(page) => {
+                                          const _query = {...videoQuery, current: page + 1};
+                                          this.setState({
+                                            videoQuery:_query
+                                          },()=>{ this.handleFetchVideoDataList()})
+                                      }}
+                                      onShowSizeChange={this.onShowVideoSizeChange}
+                                    />
+                                </div>
+                                }
+                        </div>
+                    </TabPane>
+                    <TabPane tab="直播课" key="live">
+                        <div className="search-container">
+                            <Search enterButton={<span className="icon iconfont">&#xe832;</span>} placeholder="搜索课程名称"  style={{ width: 200 }}  onChange={(e) => { this.handleChangLiveCourseName(e.target.value)}}  onSearch={ () => { this.handleFetchLiveDataList()}} />
+                        </div>
+
+                        <div className="select-area">
+                            <div className="select-box">
+                              <div>
+                                <span className="icon iconfont tip-icon">&#xe61d;</span>
+                                <span className="select-num">已选择{selectVideo.length + selectLive.length}个</span>
+                              </div>
+                              <div>
+                                <span className="clear-btn" onClick={this.clearSelectCourse}>清空</span>
+                              </div>
+                            </div>
+                            <div className="related-box">该任务已关联{currentTaskCourseData.length}个课程，可继续选择{20- currentTaskCourseData.length }个</div>
+                        </div>
+                        <div>
+                          <Table
+                              rowKey={record => record.liveCourseId}
+                              dataSource={liveDataSource}
+                              columns={this.parseLiveColumns()}
+                              pagination={false}
+                              bordered
+                              rowSelection={{
+                                  type: 'checkbox',
+                                  selectedRowKeys: _.pluck(selectLive, 'liveCourseId'),
+                                    onSelect: (record, selected) => {
+                                      this.selectLiveList(record, selected)
+                                    },
+                                    onSelectAll: (selected, _selectedRows, changeRows) => {
+                                    let _list = [];
+                                    if (selected) {
+                                        _list = _.uniq(selectLive.concat(changeRows), false, (item) => item.liveCourseId);
+                                    } else {
+                                        _list = _.reject(selectLive, (item) => _.find(changeRows, (data) => data.liveCourseId === item.liveCourseId));
+                                    }
+                                    if(_list.length + currentTaskCourseData.length + selectVideo.length> 20){
+                                      message.warning('无法继续选择，一个任务最多关联20个课程');
+                                      const extraLength = (_list.length + currentTaskCourseData.length + selectVideo.length) -20;
+                                      _list.splice(_list.length - extraLength,extraLength);
+                                      console.log('_list',_list);
+
+                                    }
+                                    this.setState({selectLive:_list});
+                                  },
+                              }}
+                          />
+                            {liveDataSource.length >0 &&
+                            <div className="box-footer">
+                                <PageControl
+                                  current={liveQuery.current - 1}
+                                  pageSize={liveSize}
+                                  size="small"
+                                  total={liveTotalCount}
+                                  toPage={(page) => {
+                                      const _query = {...liveQuery, current: page + 1};
+                                      this.setState({
+                                        liveQuery:_query
+                                      },()=>{ this.handleFetchLiveDataList()})
+                                  }}
+                                  onShowSizeChange={this.onShowLiveSizeChange}
+                                />
+                            </div>
+                            }
+                        </div>
+                    </TabPane>
+                </Tabs>
+            </div>
+        </Modal>
+    )
+  }
+}
+
+export default SelectOperatorModal;
\ No newline at end of file

src/modules/plan-manage/modal/relatedCourseModal.less

+.related-course-modal{
+    .ant-tabs-top > .ant-tabs-nav::before{
+        border-bottom: 0px;
+    }
+    .ant-tabs-nav-list{
+        margin:0 auto;
+    }
+    .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn{
+      font-weight:normal;
+    }
+    .ant-tabs-nav .ant-tabs-tab{
+        padding:6px 12px !important;
+        margin:0;
+        border: 1px solid #E8E8E8;
+        font-size:14px !important;
+        color:#999;
+        
+        &:nth-child(1){
+            border-radius: 4px 0px 0px 4px;
+        }
+        &:nth-child(2){
+            border-radius: 0px 4px 4px 0px;
+        }
+    }
+
+    .ant-tabs-nav .ant-tabs-tab-active{
+      border: 1px solid #FFB714;
+      color:#FFB714;
+    }
+
+    .ant-tabs-top .ant-tabs-ink-bar-animated:after{
+        height:0;
+    }
+    .link-create-course{
+        color:#666666;
+        font-size:14px;
+        width:638px;
+        text-align:left;
+        display:inline-block;
+        span{
+            color:#5289FA;
+        }
+    }
+    .search-container{
+        margin-bottom:16px;
+    }
+    .select-area{
+        margin-bottom:12px;
+        display:flex;
+        justify-content:space-between;
+        .select-box{
+          display:inline-box;
+          width: 186px;
+          background: #FFF4DD;
+          border-radius: 4px;
+          padding:6px 16px;
+          margin-right:8px;
+          display: flex;
+          justify-content: space-between;
+          .tip-icon{
+            color:#FF9D14;
+            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: #FFF4DD;
+          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:238px;
+      }
+      .course-status {
+        font-size:12px;
+        line-height:18px;
+        display:inline-block;
+        border-radius:2px;
+        padding:0 8px;
+        margin-top:8px;
+      }
+    }
+}
\ No newline at end of file

src/modules/root/App.tsx

 /*
  * @Author: 吴文洁
  * @Date: 2019-07-10 10:30:49
- * @LastEditors: zhangleyuan
- * @LastEditTime: 2021-02-02 16:42:04
+ * @LastEditors: wufan
+ * @LastEditTime: 2021-03-11 17:22:01
  * @Description:
  */
 import React, { useContext, useEffect, useState } from 'react';
@@ -16,6 +16,7 @@ import User from '@/common/js/user';
 import BaseService from "@/domains/basic-domain/baseService";
 import { XMContext } from '@/store/context';
 import { setStoreGroupPermission, setStorePermission, setStoreGroupList, setStoreList } from '@/store/actions/index';
+import Bus from '@/core/tbus';
 declare var window: any;
 
 const App: React.FC = (props: any) => {
@@ -28,9 +29,9 @@ const App: React.FC = (props: any) => {
 
   useEffect(() => {
     getStoreAndUserInfo();
-    window.RCHistory.push({
-      pathname: `/switch-route`,
-    })
+    // window.RCHistory.push({
+    //   pathname: `/switch-route`,
+    // })
   }, [])
 
   async function getStoreAndUserInfo() {
@@ -47,9 +48,9 @@ const App: React.FC = (props: any) => {
       User.setStoreId(id);
       User.setStoreUserId(storeUserId);
       User.setStoreName(storeName);
+      Bus.trigger('storeNameChange',storeName);
       User.setUserRole(userRole);
       User.setStoreType(storeType);
-
       ctx.dispatch(setStoreGroupList(storeGroupVOS))
       ctx.dispatch(setStoreList(storeVOS));
       serStoreUserId(storeUserId)

src/modules/root/Header.jsx

@@ -2,7 +2,7 @@
  * @Author: 吴文洁
  * @Date: 2019-09-10 18:26:03
  * @LastEditors: zhangleyuan
- * @LastEditTime: 2021-01-28 15:24:43
+ * @LastEditTime: 2021-03-09 19:05:49
  * @Description:
  */
 import React, { useContext, useEffect, useState } from "react";
@@ -15,17 +15,22 @@ import { XMContext } from "@/store/context";
 import logoImg from "@/common/images/logo.png";
 import CourseService from "@/domains/course-domain/CourseService";
 import qrcode from "@/libs/qrcode/qrcode.js";
+import Bus from '@/core/tbus';
 
 const baseImg = "https://image.xiaomaiketang.com/xm/rJeQaZxtc7.png";
 const { confirm } = Modal;
 
 function Header(props) {
   const { menuType, handleMenuType } = props;
+  const [storeName,setStoreName] = useState(User.getStoreName())
   const ctx = useContext(XMContext);
   const htmlUrl = `${LIVE_SHARE}store/index?id=${User.getStoreId()}&userId=${User.getUserId()}&from=work_weixin`;
 
   useEffect(() => {
     htmlUrl && handleConvertShortUrl();
+    Bus.bind('storeNameChange', (value) => {
+      setStoreName(value);
+    });
   }, []);
 
   function userMenu() {
@@ -135,7 +140,7 @@ function Header(props) {
         )}
         <div className="message-help">
           <div className="store-related">
-            <div className="store-name">{User.getStoreName()}</div>
+            <div className="store-name">{storeName}</div>
             <div className="line"></div>
             <div className="link-to-store">
               <div className="link">

src/modules/root/Header.less

@@ -182,6 +182,7 @@
         height: 49px;
         display: flex;
         position: relative;
+        align-items: center;
         .store-name {
           font-size: 14px;
           color: #666;
@@ -191,16 +192,13 @@
           text-overflow: ellipsis;
           overflow: hidden;
           max-width: 230px;
-          margin-right: 32px;
+          margin-right: 16px;
         }
         .line {
           width: 1px;
           height: 16px;
           background-color: #f4f4f4;
-          position: absolute;
-          left: 122px;
-          top: 50%;
-          transform: translateY(-50%);
+          margin-right:16px;
         }
         .link-to-store {
           display: flex;

src/modules/root/SwitchRoute.tsx

@@ -2,7 +2,7 @@
  * @Author: wufan
  * @Date: 2020-12-26 11:51:14
  * @LastEditors: wufan
- * @LastEditTime: 2020-12-26 15:04:26
+ * @LastEditTime: 2021-03-09 15:18:09
  * @Description: 登录后跳转承载页面
  * @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
  */
@@ -39,6 +39,11 @@ function SwitchRoute(props: SwitchProps) {
           pathname: `/home`,
         });
         break;
+      case "CloudOperator":
+        window.RCHistory.replace({
+            pathname: `/home`,
+          });
+        break;
     }
   }, [User.getUserRole()]);
   return <div></div>

src/modules/store-manage/EmployeeAddOrEditModal.less

 .employee-add-modal {
-  .ant-modal-body {
-    height: 247px;
-  }
   .mt-4 {
     margin-bottom:-6px !important
   }

src/modules/store-manage/EmployeeAddOrEditModal.tsx

 /*
  * @Author: wufan
  * @Date: 2020-11-27 16:21:49
- * @LastEditors: wufan
- * @LastEditTime: 2021-01-25 21:14:48
+ * @LastEditors: zhangleyuan
+ * @LastEditTime: 2021-03-09 14:21:35
  * @Description: Description
  * @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
  */
@@ -40,11 +40,10 @@ interface AddEmployeeModalProps {
   onClose: () => void;
   isWorkWechat: boolean;
 }
-
 function AddEmployeeModal(props: AddEmployeeModalProps) {
   const [nickName, setName] = useState("");
   const [phone, setPhone] = useState("");
-  const [role, setRole] = useState("CloudLecturer");
+  const [role, setRole] = useState("CloudOperator");
   const [avatar, setAvatar] = useState(
     "https://image.xiaomaiketang.com/xm/rJeQaZxtc7.png"
   );
@@ -64,16 +63,15 @@ function AddEmployeeModal(props: AddEmployeeModalProps) {
   const [form] = Form.useForm();
 
   useEffect(() => {
+    
     if (props.choosedItem.nickName) {
       console.log("props.choosedItem", props.choosedItem);
       setName(props.choosedItem.nickName);
+      console.log('choosedItem',props.choosedItem);
       props.choosedItem.phone && setPhone(props.choosedItem.phone);
       props.choosedItem.role && setRole(props.choosedItem.role[0]);
       props.choosedItem.avatar && setAvatar(props.choosedItem.avatar);
-      const _role =
-        props.choosedItem.role[0] === "CloudLecturer"
-          ? "CloudLecturer"
-          : "CloudManager";
+      const _role =  props.choosedItem.role[0];
       form.setFieldsValue({
         nickName: props.choosedItem.nickName,
         role: _role,
@@ -190,6 +188,7 @@ function AddEmployeeModal(props: AddEmployeeModalProps) {
       roleCodes: [role],
       avatar,
       storeUserId: storeUserId,
+      storeId:User.getStoreId()
     };
     console.log("params", params);
 
@@ -284,8 +283,13 @@ function AddEmployeeModal(props: AddEmployeeModalProps) {
                 }}
                 className="mt5"
               >
-                <Radio value={"CloudLecturer"} className="mt-4"
->
+                <Radio value={"CloudOperator"} className="mt-4">
+                  <span style={{ color: "#333" }}>运营师</span>
+                  <p className="radio-tip">
+                  仅可查看/转发培训计划内容，并查看其负责的用户学习进度
+                  </p>
+                </Radio>
+                <Radio value={"CloudLecturer"} className="mt-4">
                   <span style={{ color: "#333" }}>普通讲师</span>
                   <p className="radio-tip">
                     仅可查看/使用与自己相关的文件和课表，并进行上课

src/modules/store-manage/StoreH5DecorationTab.jsx

@@ -10,7 +10,7 @@
 import React from "react";
 import { withRouter } from "react-router-dom";
 import _ from "underscore";
-import PhotoClip from 'photoclip'
+// import PhotoClip from 'photoclip'
 import { Table, Modal, message, Button } from "antd";
 import StoreService from "@/domains/store-domain/storeService";
 import {

src/modules/store-manage/StoreInfo.jsx

+import React from 'react';
+import { withRouter } from "react-router-dom";
+import { Form, Input, Button, Checkbox ,Select,Modal,message} from 'antd';
+import {industryList,childIndustryList} from '@/domains/store-domain/constants'
+import SelectPrepareFileModal from '@/modules/prepare-lesson/modal/SelectPrepareFileModal';
+import Upload from '@/core/upload';
+// import PhotoClip from 'photoclip';
+import StoreService from "@/domains/store-domain/storeService";
+import User from "@/common/js/user";
+import Bus from '@/core/tbus';
+import "./StoreInfo.less";
+let cutFlag = false;
+class StoreInfo extends React.Component {
+  formRef = React.createRef();
+  constructor(props) {
+    super(props);
+    this.state = {
+      storeName:null,
+      storeFullName:null,
+      subjectType:null,
+      corpIndustry:null,
+      corpSubIndustry:null,
+      logo:'',
+      showSelectFileModal:false,
+      cutImageBlob: null,
+    }
+  }
+  componentWillMount(){
+    this.getStoreDetail()
+  }
+  getStoreDetail = ()=>{
+    const params= {
+      storeId:User.getStoreId()
+    }
+    StoreService.getStoreDetail(params).then((res) => {
+      const { result = { } } = res;
+      const {
+        storeName,
+        storeFullName,
+        subjectType,
+        corpIndustry,
+        corpSubIndustry,
+        logo
+      } = result;
+      this.formRef.current.setFieldsValue({
+        storeName:storeName
+      });
+      this.formRef.current.setFieldsValue({
+        storeFullName:storeFullName
+      });
+      this.formRef.current.setFieldsValue({
+        subjectType:subjectType
+      });
+      this.formRef.current.setFieldsValue({
+        corpIndustry:corpIndustry
+      });
+      this.formRef.current.setFieldsValue({
+        corpSubIndustry:corpSubIndustry
+      });
+      this.setState({
+        storeName,
+        storeFullName,
+        subjectType,
+        corpIndustry,
+        corpSubIndustry,
+        logo
+      })
+    });
+  }
+  onChangeFiledValue=(filed,value)=>{
+    this.setState({
+      [filed]:value
+    })
+  }
+  handleSelectCover = (file)=> {
+    this.uploadImage(file);
+  }
+  
+  //上传图片
+  uploadImage = (imageFile) => {
+    const { folderName } = imageFile;
+    const fileName = window.random_string(16) + folderName.slice(folderName.lastIndexOf("."));
+    const self = this;
+    this.setState(
+      {
+        visible: true,
+      },
+      () => {
+        setTimeout(() => {
+          const okBtnDom = document.querySelector("#headPicModal");
+          const options = {
+            size: [500, 282],
+            ok: okBtnDom,
+            maxZoom: 3,
+            style: {
+              jpgFillColor: "transparent",
+            },
+            done: function (dataUrl) {
+              clearTimeout(self.timer);
+              self.timer = setTimeout(() => {
+                if ((self.state.rotate != this.rotate()) || (self.state.scale != this.scale())) {
+                  console.log(this.scale(), 'scale')
+                  const _dataUrl = this.clip()
+                  const cutImageBlob = self.convertBase64UrlToBlob(_dataUrl);
+                  self.setState({
+                    cutImageBlob,
+                    dataUrl: _dataUrl,
+                    rotate: this.rotate(),
+                    scale: this.scale()
+                  })
+                }
+
+              }, 500)
+
+              const cutImageBlob = self.convertBase64UrlToBlob(dataUrl);
+              self.setState({
+                cutImageBlob,
+                dataUrl
+              })
+              setTimeout(() => {
+                cutFlag = false;
+              }, 2000);
+            },
+            fail: (failInfo) => {
+              message.error("图片上传失败了，请重新上传");
+            },
+            loadComplete: function (img) {
+              setTimeout(() => {
+                const _dataUrl = this.clip()
+                self.setState({
+                  dataUrl: _dataUrl,
+                  hasImgReady: true 
+                })
+              }, 100)
+
+            },
+          };
+          const imgUrl = `${imageFile.ossUrl}?${new Date().getTime()}`
+          if (!this.state.photoclip) {
+            const _photoclip = new PhotoClip("#headPicModal", options);
+            _photoclip.load(imgUrl);
+            this.setState({
+              photoclip: _photoclip,
+            });
+          } else {
+            this.state.photoclip.clear();
+            this.state.photoclip.load(imgUrl);
+          }
+
+        }, 200);
+      }
+    );
+  };
+
+  //获取resourceId
+  getSignature = (blob, fileName) => {
+    Upload.uploadBlobToOSS(blob, 'cover' + (new Date()).valueOf(),null,'signInfo').then((signInfo) => {
+      this.setState({
+        coverClicpPath:signInfo.fileUrl,
+        coverId:signInfo.resourceId,
+        visible: false
+      },()=>this.updateCover())
+    
+    });
+  };
+  updateCover = () =>{
+    const {coverClicpPath,coverId} = this.state
+    this.setState({
+      showSelectFileModal: false
+    })
+    this.setState({
+      logo:coverClicpPath
+    })
+  }
+   // base64转换成blob
+  convertBase64UrlToBlob = (urlData) => {
+    const bytes = window.atob(urlData.split(",")[1]);
+    const ab = new ArrayBuffer(bytes.length);
+    const ia = new Uint8Array(ab);
+    for (let i = 0; i < bytes.length; i++) {
+      ia[i] = bytes.charCodeAt(i);
+    }
+    return new Blob([ab], { type: "image/png" });
+  };
+  updateInfo=()=>{
+    const {storeName,storeFullName,logo,subjectType,corpIndustry,corpSubIndustry} = this.state;
+    if(!storeName){
+      message.warning('请输入店铺简称');
+     return;
+    }
+    if(!storeFullName){
+      message.warning('请输入店铺名称');
+      return;
+    }
+    if(!subjectType){
+      message.warning('请选择店铺类型');
+      return;
+    }
+    if(!corpIndustry){
+      message.warning('请选择店铺所属行业');
+      return;
+    }
+    const params= {
+      storeName,
+      storeFullName,
+      logo,
+      subjectType,
+      corpIndustry,
+      corpSubIndustry,
+      storeId:User.getStoreId()
+    }
+    StoreService.updateStoreMessage(params).then((res) => {
+      User.setStoreName(storeName);
+      Bus.trigger('storeNameChange',storeName);
+      message.success('保存成功');
+    });
+  }
+  render() {
+    const {storeName,storeFullName,subjectType,corpIndustry,corpSubIndustry,showSelectFileModal,visible,hasImgReady,logo,cutImageBlob } = this.state;
+    return (
+      <div className="page store-info-page">
+        <div className="content-header">店铺基本信息</div>
+        <div className="box">
+          <div className="store-info-header">店铺基本信息</div>
+          <div className="store-info-page-form">
+           
+            <Form ref={this.formRef}>
+              <Form.Item
+                label="店铺简称"
+                name="storeName"
+                rules={[{ required: true}]}
+              >
+                <Input  value={storeName} style={{ width: '300px' }} placeholder="请输入店铺简称" onChange={(e)=>this.onChangeFiledValue("storeName",e.target.value)} maxLength={20}/>
+              </Form.Item>
+              <Form.Item
+                label="店铺名称"
+                name="storeFullName"
+                rules={[{ required: true}]}
+              >
+                <Input value={storeFullName} style={{ width: '300px' }} placeholder="请输入店铺名称" onChange={(e)=>this.onChangeFiledValue("storeFullName",e.target.value)} maxLength={30}/>
+              </Form.Item>
+          
+              <Form.Item
+                label="店铺logo"
+              >
+                <div className="logo-con">
+                  <div className="logo-img-con">
+                    { logo ?  <img src={logo}  className="logo-img"/> : <div className="logo-box"><span className="text">Logo</span></div>}
+                  </div>
+                  <div className="operate-con">
+                    <div><span onClick={() => {this.setState({ showSelectFileModal:true  })}} className="upload-btn">
+                      {logo ? <span>重新上传</span> : <span>上传</span> }
+                    </span></div>
+                    <div className="tip">建议尺寸702*180px。最大2M，支持jpg、jpeg和png。</div>
+                  </div>  
+                </div>
+              </Form.Item>
+              <Form.Item
+                label="店铺类型"
+                name="subjectType"
+                rules={[{ required: true }]}
+              >
+                <Select
+                  placeholder="Select a option and change input text above"
+                  allowClear
+                  style={{ width: '300px' }}
+                  placeholder="请选择店铺类型"
+                  value={subjectType}
+                  onChange={(value)=>this.onChangeFiledValue("subjectType",value)}
+                >
+                  <Option value="COMPANY">企业</Option>
+                  <Option value="INSTITUTION">政府以及事业单位</Option>
+                  <Option value="ELSE">其他组织</Option>
+                  <Option value="TEAM ">团队号</Option>
+                </Select>
+              </Form.Item>
+              <Form.Item
+                label="店铺所属行业"
+                rules={[{ required: true }]}
+                name="corpIndustry"
+              >
+                <Select
+                 placeholder="请选择店铺所属行业"
+                  style={{ width: '300px' }}
+                  allowClear
+                  value={corpIndustry}
+                  onChange={(value)=>this.onChangeFiledValue("corpIndustry",value)}
+                >
+                  {industryList.map((item,index)=>{
+                    return <Option value={item}>{item}</Option>
+                  })
+                  }
+                  
+                </Select>
+              </Form.Item>
+              <Form.Item
+                label="店铺所属子行业"
+                name="corpSubIndustry"
+              >
+                <Select
+                  placeholder="请选择店铺所属子行业"
+                  allowClear
+                  style={{ width: '300px' }}
+                  value={corpSubIndustry}
+                  onChange={(value)=>this.onChangeFiledValue("corpSubIndustry",value)}
+                >
+                  {childIndustryList[corpIndustry] && 
+                      childIndustryList[corpIndustry].map((item,index)=>{
+                        return <Option value={item}>{item}</Option>
+                      }) 
+                  }
+                </Select>
+              </Form.Item>
+            </Form>
+          </div>
+          {showSelectFileModal && 
+            <SelectPrepareFileModal
+              key="basic"
+              operateType="select"
+              multiple={false}
+              accept="image/jpeg,image/png,image/jpg"
+              selectTypeList={['JPG', 'JPEG', 'PNG']}
+              tooltip='支持文件类型：jpg、jpeg、png'
+              isOpen={showSelectFileModal}
+              onClose={() => {
+                this.setState({
+                  showSelectFileModal:false
+                })
+              }}
+              onSelect={this.handleSelectCover}
+            />
+          }
+          <Modal
+            title="设置图片"
+            width={1080}
+            visible={visible}
+            maskClosable={false}
+            closeIcon={<span className="icon iconfont modal-close-icon">&#xe6ef;</span>}
+            onCancel={() => {
+              this.setState({ visible: false });
+            }}
+            zIndex={10001}
+            footer={[
+              <Button
+                key="back"
+                onClick={() => {
+                  this.setState({ visible: false });
+                }}
+              >
+                重新上传
+              </Button>,
+              <Button
+                key="submit"
+                type="primary"
+                disabled={!hasImgReady}
+                onClick={() => {
+                  if (!cutFlag) {
+                    cutFlag = true;
+                    this.refs.hiddenBtn.click();
+                  }
+                  this.getSignature(cutImageBlob);
+                }}
+              >
+                确定
+              </Button>,
+            ]}
+          >
+            <div className="clip-box">
+              <div
+                id="headPicModal"
+                ref="headPicModal"
+                style={{
+                  width: "500px",
+                  height: "430px",
+                  marginBottom: 0,
+                }}
+              ></div>
+              <div id="clipBtn" style={{ display: "none" }} ref="hiddenBtn"></div>
+              <div className="preview-img">
+                <div className="title">效果预览</div>
+                <div id="preview-url-box" style={{width:500,height:282}}>
+                  <img src={this.state.dataUrl} style={{ width: '100%' }} alt="" />
+                </div>
+              </div>
+            </div>
+          </Modal>
+          <div><Button type="primary" onClick={this.updateInfo} htmlType="submit" className="submit-btn">更新信息</Button></div>
+        </div>
+
+      </div>
+    )
+  }
+}
+
+export default withRouter(StoreInfo);
\ No newline at end of file

src/modules/store-manage/StoreInfo.less

+.store-info-page{
+    .store-info-header{
+        font-weight:bold;
+        color:#333;
+        font-size:16px;
+        margin-bottom: 16px;
+    }
+    .ant-form-item-label > label{
+        width:112px;
+        display:inline-block;
+        text-align:right;
+        color:#666666;
+        font-size:14px;
+    }
+    .store-info-page-form{
+        margin-left:29px;
+        .logo-con{
+            display: flex;
+            .logo-img-con{
+                width: 258px;
+                height: 60px;
+                margin-right:8px;
+                .logo-box{
+                    width: 258px;
+                    height: 60px;
+                    background: #F7F8F9;
+                    border-radius: 1px;
+                    text-align:center;
+                    .text{
+                        text-align:center;
+                        line-height:60px;
+                        color:#ccc;
+                        font-size:14px;
+                    }
+                }
+                .logo-img{
+                    width: 258px;
+                    height: 60px;
+                }
+            }
+            .operate-con{
+                .upload-btn{
+                    color:#5289FA;
+                    font-size:14px;
+                    margin-bottom:4px;
+                }
+                .tip{
+                    color:#999999;
+                    font-size:14px;
+                }
+            }
+        }
+        
+    }
+    .submit-btn{
+        margin-left:142px;
+    }
+    
+}
\ No newline at end of file

src/modules/store-manage/StoreWebDecorationTab.jsx

 /*
  * @Author: wufan
  * @Date: 2020-11-30 10:47:38
- * @LastEditors: wufan
- * @LastEditTime: 2021-01-18 14:59:57
+ * @LastEditors: zhangleyuan
+ * @LastEditTime: 2021-03-11 15:30:00
  * @Description: web店铺banner页面
  * @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
  */
@@ -10,7 +10,7 @@
 import React from "react";
 import { withRouter } from "react-router-dom";
 import _ from "underscore";
-import PhotoClip from 'photoclip'
+// import PhotoClip from 'photoclip'
 import { Table, Modal, message, Button } from "antd";
 import StoreService from "@/domains/store-domain/storeService";
 import {

src/routes/config/mainRoutes.tsx

 /*
  * @Author: 吴文洁
  * @Date: 2020-04-29 10:26:32
- * @LastEditors: wufan
- * @LastEditTime: 2021-01-18 21:23:08
+ * @LastEditors: zhangleyuan
+ * @LastEditTime: 2021-03-02 15:56:22
  * @Description: 内容线路由配置
  */
 import Home from '@/modules/home/Home';
@@ -15,10 +15,15 @@ import LiveCoursePage from '@/modules/course-manage/LiveCoursePage';
 import AddLivePage from '@/modules/course-manage/AddLive'
 import VideoCoursePage from '@/modules/course-manage/video-course'
 import AddVideoCoursePage from '@/modules/course-manage/video-course/AddVideoCourse'
-import DataList from '@/modules/course-manage/DataList/DataList';
-import ClassBook from '@/modules/resource-disk';
+//TODO
+// import DataList from '@/modules/course-manage/DataList/DataList';
+// 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';
 
 const mainRoutes = [
   {
@@ -80,7 +85,28 @@ const mainRoutes = [
     path: '/switch-route',
 		component: SwitchRoute,
 		name: '登录后跳转承载页'
+  },
+  {
+    path:'/plan',
+    component: PlanPage,
+		name: '培训计划'
+  },
+  {
+    path: '/create-plan',
+		component:AddPlanPage,
+		name: '创建视频课'
+  },
+  {
+    path: '/store-info',
+		component:StoreInfoPage,
+		name: '店铺信息'
+  },
+  {
+    path: '/learning-data',
+    component:LearningDataPage,
+    name: '学习数据'
   }
+
 ]
 
 export default mainRoutes;
\ No newline at end of file

src/routes/config/menuList.tsx

+/*
+ * @Author: zhangleyuan
+ * @Date: 2021-01-19 11:27:56
+ * @LastEditors: zhangleyuan
+ * @LastEditTime: 2021-03-02 15:18:12
+ * @Description: 描述一下
+ * @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
+ */
 export const menuList: any = [
   {
     groupName: "中心首页",
@@ -29,11 +37,28 @@ export const menuList: any = [
     link: '/resource-disk'
   },
   {
+    groupName: "培训管理",
+    groupCode: "TrainManage",
+    icon: '',
+    children: [
+      {
+        groupName: "培训计划",
+        groupCode: "TrainPlan",
+        link: '/plan'
+      }
+    ]
+  },
+  {
     groupName: "店铺管理",
     groupCode: "CloudShop",
     icon: '',
     children: [
       {
+        groupName: "店铺信息",
+        groupCode: "ShopInfo",
+        link: '/store-info'
+      },
+      {
         groupName: "员工管理",
         groupCode: "ShopStaff",
         link: '/employees-manage'