feat:解决合并代码冲突

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/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-02-28 13:47:38
  * @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);
@@ -76,4 +81,7 @@ 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);
 }
\ 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-05 14:04:52
+ * @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);
+}
\ No newline at end of file

src/domains/basic-domain/constants.ts

 /*
  * @Author: 陈剑宇
  * @Date: 2020-05-07 14:43:01
- * @LastEditTime: 2021-01-28 16:28:08
+ * @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-02-28 15:15:37
  * @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
 } from '@/data-source/course/request-api';
 
 export default class courseService {
@@ -84,4 +85,10 @@ 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);
+  }
 }
\ 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/constants.ts

+/*
+ * @Author: zhangleyuan
+ * @Date: 2021-03-01 15:33:02
+ * @LastEditors: zhangleyuan
+ * @LastEditTime: 2021-03-01 15:35:09
+ * @Description: 描述一下
+ * @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
+ */

src/domains/plan-domain/planService.ts

+/*
+ * @Author: zhangleyuan
+ * @Date: 2021-02-21 16:15:38
+ * @LastEditors: zhangleyuan
+ * @LastEditTime: 2021-03-05 14:04:25
+ * @Description: 描述一下
+ * @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
+ */
+import {getTrainingPlanPage,createTrainingPlan,updateStateTrainingPlan,getTrainingPlanDetail,updateTrainingPlan,deleteTrainingPlan,getPlanUserRecordPage,getPlanCustomerRecordPage,getPlanCustomerDetail,getPlanCustomerAboutUser,removePlanCustomer,getStorePlanAll} 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);
+    }
+}
\ 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-05 14:10:41
  * @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.

src/index.html

 <!--
  * @Author: 吴文洁
  * @Date: 2020-08-24 12:20:57
- * @LastEditors: wufan
- * @LastEditTime: 2021-01-18 21:18:43
+ * @LastEditors: zhangleyuan
+ * @LastEditTime: 2021-03-02 15:16: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.

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

@@ -272,21 +272,21 @@ class AddLiveBasic extends React.Component {
           onClose={() => this.setState({ showCutModal: false })}
           reUpload={() => { this.state.currentInputFile.click() }}
         />
-          {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}
-            />
-          }
+        {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}

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

@@ -271,6 +271,37 @@ class LiveCourseList extends React.Component {
           },
         },
         {
+          title: '创建时间',
+          width: "9%",
+          key: "created",
+          dataIndex: "created",
+          sorted: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  (
+              <span>
+                  { record.relatedPlanList ?
+                    record.relatedPlanList.map((item,index)=>{
+                      return <span>{item.planName} { (index < record.relatedPlanList.length-1)&&(<span> 、</span>)} </span>
+                    })
+                    :
+                    <span></span>
+                  }
+              </span>
+            )
+          },
+        },
+        {
           title: "操作",
           width: "15%",
           key: "operate",
@@ -456,6 +487,37 @@ class LiveCourseList extends React.Component {
             );
           },
         },
+        {
+          title: '创建时间',
+          width: "9%",
+          key: "created",
+          dataIndex: "created",
+          sorted: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  (
+              <span>
+                  { record.relatedPlanList ?
+                    record.relatedPlanList.map((item,index)=>{
+                      return <span>{item.planName} { (index < record.relatedPlanList.length-1)&&(<span> 、</span>)} </span>
+                    })
+                    :
+                    <span></span>
+                  }
+              </span>
+            )
+          },
+        },
       ];
     }
   
@@ -477,6 +539,10 @@ class LiveCourseList extends React.Component {
   renderMoreOperate = (item) => {
     return (
       <div className="live-course-more-menu">
+           <div
+            className="operate__item"
+           
+          >关联培训计划</div>
           <div
             className="operate__item"
             onClick={()=>this.toEditCoursePage(item)}

src/modules/course-manage/modal/RelatedPlanModal.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 './SelectOperatorModal.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,
+    };
+  }
+  componentDidMount() {
+    this.handleFetchDataList();
+  }
+ 
+   // 获取运营师列表
+  handleFetchDataList = () => {
+    const {query,size,totalCount} = this.state
+    const params ={
+      ...query,
+      size,
+      roleCodes:['CloudOperator']
+    }
+    PlanService.getStorePlanAll(params).then((res) => {
+      const { result = {} } = res ;
+      const { records = [], total = 0 } = result;
+      this.setState({
+        dataSource: records,
+        totalCount: Number(total)
+      });
+    });
+  }
+  handleChangePlanName = (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;
+  }
+
+  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="related-plan-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="搜索培训计划名称"  style={{ width: 200 }}  onChange={(e) => { this.handleChangePlanName(e.target.value)}}  onSearch={ () => { this.handleFetchDataList()}} />
+          </div>
+          <div>
+            <Table
+              rowKey={record => record.id}
+              dataSource={dataSource}
+              columns={this.parseColumns()}
+              pagination={false}
+             
+            />
+            {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>
+        </Modal>
+    )
+  }
+}
+
+export default SelectOperatorModal;
\ No newline at end of file

src/modules/plan-manage/AddPlan.jsx

+/*
+ * @Author: zhangleyuan
+ * @Date: 2021-02-20 16:13:39
+ * @LastEditors: zhangleyuan
+ * @LastEditTime: 2021-03-03 10:29:13
+ * @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 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);
+    useEffect(()=>{
+        if(type==='edit'){
+            getPlanDetail();  
+        }
+    },id)
+   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;
+            })
+            setBasicData({
+                planName,
+                coverUrl:coverUrl || defaultCover,
+                coverId,
+                enableState,
+                selectOperatorList:operateIds || [],
+                instro,
+                operateType,
+                percentCompleteLive,
+                percentCompleteVideo
+            })
+            setTaskList(trainingTaskList)
+        })
+    }
+    function handleChangeBasicInfo(field, value){
+        setBasicData( {
+            ...basicData,
+            [field]: value,
+        })
+    }
+
+    function handleChangeTaskInfo(value){
+        setTaskList(value)
+    }
+
+    function submitInfo(){
+        const {planName,enableState,selectOperatorList,instro,operateType,percentCompleteLive,percentCompleteVideo,coverId,coverUrl} = basicData;
+        if(!planName){
+            message.warning('请输入的培训计划名称');
+           return;
+        }
+        if(taskList.length === 0){
+            message.warning('请输入培训计划内容');
+            return;
+        }
+        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("新建成功");
+                    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>
+                    <TrainingTask data={taskList} onChange={handleChangeTaskInfo} />
+                </div>
+            </div> 
+        </div>
+        <div className="footer">
+            <Button>取消</Button>
+            <Button type="primary" onClick={submitInfo}>保存</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;
+      }
+    }
+    .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"
+    }
+  }
+  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
+        } = 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:0
+        })
+    })
+  }
+  render() {
+    const {planName,coverUrl,courseNum,created,cultureCustomerNum,activeKey} = 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">创建人：张老师</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">
+        { (userRole === "CloudManager" || userRole === "StoreManager")?
+          (<Tabs activeKey={activeKey} onChange={(activeKey)=>{this.setState({activeKey})}}>
+            <Tabs.TabPane tab="员工分享数据" key="employeeShareData">
+                <EmployeeShareData/>
+            </Tabs.TabPane>
+            <Tabs.TabPane tab="用户学习数据" key="userLearningData">
+                <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{
+    .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-01 13:41:08
+ * @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";
+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,
+    };
+    //动态获取计划列表
+    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={handleFetchPlanList}/>
+          <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.less

+.plan-basic-info{
+    .label {
+      width: 110px;
+      text-align: right;
+      display:inline-block;
+      .require {
+        color: #EC4B35;
+      }
+    }
+    .cover {
+        display: flex;
+        margin-top: 16px;
+        &__wrap {
+          position: relative;
+          .tag {
+            border-radius: 2px;
+            background: #D6D6D6;
+            font-size: 12px;
+            height: 18px;
+            width: 52px;
+            text-align: center;
+            color: #FFF;
+            position: absolute;
+            top: 8px;
+            left: 8px;
+          }
+        }
+        .cover__wrap {
+          display: flex;
+          flex-direction: row;
+        }
+    
+        .img-content {
+          margin-right: 20px;
+          width: 299px;
+          height: 169px;
+    
+          img {
+            width: 100%;
+            height: 100%;
+            object-fit: contain;
+            border: 1px solid #E8e8e8;
+          }
+        }
+    }
+    .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;
+        .instro-text{
+          color:#999;
+          margin-left:12px;
+        }
+        .choose-business{
+            margin-top:16px;
+        }
+    }
+    .done-standard{
+      display: flex;
+      margin-top:22px;
+      input{
+        display:inline-block;
+        width:90px;
+        height:32px;
+      }
+
+    }
+
+}

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.storeUserId);
+  } 
+  // 请求表头
+  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',
+        render: (val, record) => {
+          return (
+            <div>
+              {formatDate('YYYY-MM-DD H:i', val)}
+            </div>
+          )
+        }
+      },
+      {
+        title: '学习人数',
+        key: 'learnNum',
+        dataIndex: 'learnNum',
+        sorter:true,
+        render: (val, record) => {
+          return (
+            <div>
+              {val}
+            </div>
+          )
+        }
+      },
+      {
+        title: '已学完',
+        key: 'learnFinishNum',
+        dataIndex: 'learnFinishNum',
+        sorter:true,
+        render: (val, record) => {
+          return (
+            <div>
+              {val}
+            </div>
+          )
+        }
+      },
+      {
+        title: '未学完',
+        key: 'learnNoFinishNum',
+        dataIndex: 'learnNoFinishNum',
+        sorter:true,
+        render: (val, record) => {
+          return (
+            <div>
+              {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}
+                  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;
+    }
+}
\ 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();
+  }, [creatorQuery]);
+
+    // 改变搜索条件
+  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) {
+      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)" }}
+                />
+              </div>
+             
+              <div className="search-condition__item">
+                  <span>创建人：</span>
+                  <Select
+                    placeholder="请选择创建人"
+                    style={{width:"calc(100% - 70px)"}}
+                    showSearch
+                    allowClear
+                    filterOption={(input, option) => option}
+                    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) }}
+                  >
+                    <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.less

+.plan-list{
+    margin-top:12px;
+    .operate-text {
+        color: #5289FA;
+        cursor: pointer;
+      }
+      .operate {
+        display: flex;
+    
+        &__item {
+          color: #5289FA;
+          cursor: pointer;
+    
+          &.split {
+            margin: 0 8px;
+            color: #BFBFBF;
+          }
+        }
+      }
+}
\ 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-01 16:43:16
+ * @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';
+
+const userRole =  User.getUserRole();
+function PlanOpt() {
+  function  handleCreatePlan(){
+    window.RCHistory.push({
+      pathname: '/create-plan?type=add',
+    })
+  }
+  return (
+    <div className="plan-opt">
+      { (userRole === "CloudManager" || userRole === "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.less

+.training-task{
+    thead{
+        display:none;
+    }
+}

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;
+        }
+    }
+}
\ 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 [hasNext,setHasNext] = useState(false);
+  const [creatorQuery,setCreatorQuery] = useState(defaultCreatorQuery);
+  const [creatorList,setCreatorList] =  useState([]);
+
+  useEffect(() => {
+    Bus.bind('watchDataView',(value) => handleChangeCreatorQuery(value))
+  }, []);
+  useEffect(() => {
+    getCreatorList();
+  }, [creatorQuery]);
+
+  function handleChangeCreatorQuery (value){
+    const _creatorQuery = {...creatorQuery};
+    _creatorQuery.operateId = value;
+    setCreatorQuery(_creatorQuery);
+  }
+    // 改变搜索条件
+  function handleChangeQuery(field, value){
+    const _query ={
+      ...query,
+      [field]: value,
+      current: 1,
+    } 
+    setQuery(_query);
+    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) {
+      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>
+              {(userRole === "CloudManager" || userRole === "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={query.operateId}
+                      onChange={(value) => {
+                        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 && (userRole === "CloudManager" || userRole === "StoreManager")) ||  userRole === "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) }}
+                  >
+                    <Option value="YES">开启</Option>
+                    <Option value="NO">关闭</Option>
+                  </Select>
+                </div>
+              }
+            </div>  
+          {(userRole === "CloudManager" || userRole === "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: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="搜索运营师/手机号"  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}
+              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
+                  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;
+    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.onClose();
+    });
+  }
+  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.id === 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
+        })
+    })
+  }
+  parsePlanColumns = () => {
+    const columns = [
+      {
+        title: '培训计划名称',
+        key: 'planInfo',
+        dataIndex: 'planInfo',
+        render: (val, record) => {
+          return (
+            <div className="plan-instro">
+              <div className="img-con">
+                <img src={record.coverUrl}/>
+              </div>
+              <div className="plan-name">{record.planName}</div>
+            </div>
+          )
+        }
+      },
+      {
+        title: '学习进度',
+        key: 'learnFinishPercentage',
+        dataIndex: 'learnFinishPercentage',
+        width:167,
+        render: (val, record) => {
+          return (
+            <div className="plan-learn-percentage">
+               {val}%
+            </div>
+          )
+        }
+      }
+    ];
+    return columns;
+  }
+
+  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">
+              <span className="course-type">{CourseType[record.courseType].text}</span>
+              <span className="course-name">{parentIndex + 1}.{index + 1}{record.courseName}</span>
+              {record.courseState === "EXPIRED" &&
+                <span className="icon iconfont tip">&#xe834;</span>
+              }
+              <span className="course-state">{courseStateShow[record.courseState].title}</span>
+            </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}
+          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>
+           <Table
+              dataSource={planDataSource}
+              columns={this.parsePlanColumns()}
+              pagination={false}
+              bordered
+              className="plan-table"
+            />
+          </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-table{
+        margin-bottom:8px;
+        .plan-instro{
+            display: flex;
+            align-items: center;
+            .img-con{
+                margin-right:8px;
+                img{
+                    width: 97px;
+                    height: 55px;
+                    display: inline-block;
+                    border-radius:4px;
+                }
+            }
+            .plan-name{
+                color:#666666;
+                font-size:14px;
+            }
+            .plan-learn-percentage{
+                color:#666666;
+                font-size:14px;
+            }
+        }
+    }
+    .task-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:1px 8px;
+                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/prepare-lesson/components/OperateArea.jsx

@@ -60,7 +60,7 @@ class OperateArea extends React.Component {
   // 显示创建文件夹弹窗
   handleToggleCreateFolderModal = async () => {
     const { instId } = window.currentUserInstInfo;
-    const ultimateRes = await axios.Business('public/inst/checkInstProduct', {
+    const ultimateRes = await axios.Business('public/inst/checkInstProduct', {    
       instId: instId || LS.get("instId"),
       productCodeList: ['ULTIMATESELL', 'PIP_TO_ULTIMATE', 'HIGH_TO_ULTIMATE']
     });

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-02 13:40:27
  * @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,
@@ -284,8 +282,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/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'