feat:处理观看数据相关

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

@@ -2,7 +2,7 @@
  * @Author: 吴文洁
  * @Author: 吴文洁
  * @Date: 2020-08-05 10:12:45
  * @Date: 2020-08-05 10:12:45
  * @LastEditors: zhangleyuan
  * @LastEditors: zhangleyuan
- * @LastEditTime: 2020-12-30 17:44:18
+ * @LastEditTime: 2020-12-31 10:31:07
  * @Description: 视频课-列表模块
  * @Description: 视频课-列表模块
  * @Copyright: 杭州杰竞科技有限公司 版权所有
  * @Copyright: 杭州杰竞科技有限公司 版权所有
  */
  */
@@ -12,11 +12,13 @@ import { Table, Modal, message , Tooltip,Switch,Dropdown} from 'antd';
 import { PageControl } from "@/components";
 import { PageControl } from "@/components";
 import { LIVE_SHARE_MAP } from '@/common/constants/academic/cloudClass';
 import { LIVE_SHARE_MAP } from '@/common/constants/academic/cloudClass';
 
 
-import StudentListModal from '../modal/StudentListModal';
+
 import ShareLiveModal from '@/modules/course-manage/modal/ShareLiveModal';
 import ShareLiveModal from '@/modules/course-manage/modal/ShareLiveModal';
+import WatchDataModal from '../modal/WatchDataModal'
 import CourseService from "@/domains/course-domain/CourseService";
 import CourseService from "@/domains/course-domain/CourseService";
 import User from '@/common/js/user'
 import User from '@/common/js/user'
 
 
+
 import './VideoCourseList.less';
 import './VideoCourseList.less';
 
 
 const ENV = process.env.DEPLOY_ENV || 'dev';
 const ENV = process.env.DEPLOY_ENV || 'dev';
@@ -38,6 +40,18 @@ class VideoCourseList extends React.Component {
       this.handleShowShareModal(_videoCourseItem, true);
       this.handleShowShareModal(_videoCourseItem, true);
     }
     }
   }
   }
+  
+  // 学员人数弹窗
+  handleShowWatchDataModal = (record) => {
+    
+    const WatchDataModal = (
+      <WatchDataModal
+        type='videoCourseList'
+        data={record}
+      />
+    );
+    this.setState({ WatchDataModal });
+  }
 
 
   // 请求表头
   // 请求表头
   parseColumns = () => {
   parseColumns = () => {
@@ -95,7 +109,7 @@ class VideoCourseList extends React.Component {
         dataIndex: "watchUserCount",
         dataIndex: "watchUserCount",
         render: (val, item) => {
         render: (val, item) => {
           return (
           return (
-            <div className="watchUserCount">{val}</div>
+            <div className="watchUserCount" onclick={this.handleShowWatchDataModal}>{val}</div>
           )
           )
         },
         },
       },
       },
@@ -208,33 +222,7 @@ class VideoCourseList extends React.Component {
     });
     });
   }
   }
 
 
-  // 学员人数弹窗
-  handleShowStudentListModal = (record) => {
-    
-    const { studentIds = [], id } = this.state;
-    if (id !== record.id) {
-      this.setState({
-        id : record.id
-      })
-    }
-    const studentListModal = (
-      <StudentListModal
-        type='videoCourseList'
-        close={(studentIds) =>
-          this.setState({
-            studentListModal: null,
-            studentIds
-          })
-        }
-        studentIds={studentIds}
-        data={record}
-        refresh={() => {
-          this.props.onChange();
-        }}
-      />
-    );
-    this.setState({ studentListModal });
-  }
+
 
 
   // 显示分享弹窗
   // 显示分享弹窗
   handleShowShareModal = (record, needStr = false) => {
   handleShowShareModal = (record, needStr = false) => {
@@ -316,10 +304,9 @@ class VideoCourseList extends React.Component {
               this.props.onChange(_query)
               this.props.onChange(_query)
             }}
             }}
           />
           />
-        </div>
-                  
+        </div>   
         { this.state.shareLiveModal }
         { this.state.shareLiveModal }
-        { this.state.studentListModal }
+        { this.state.WatchDataModal }
       </div>
       </div>
     )
     )
   }
   }

src/modules/course-manage/video-course/modal/StudentListModal.less

-.video-course-student-list-modal {
-  &__operate {
-    position: relative;
-    margin-bottom: 16px;
-
-    .export-btn {
-      margin-left: 8px;
-    }
-
-    .search {
-      position: absolute;
-      right: 0;
-    }
-  }
-
-  .operate__item {
-    color: #FF8534;
-    cursor: pointer;
-  }
-}
\ No newline at end of file

src/modules/course-manage/video-course/modal/WatchDataModal.jsx

+/*
+ * @Author: 吴文洁 
+ * @Date: 2020-05-19 11:01:31 
+ * @Last Modified by: 吴文洁
+ * @Last Modified time: 2020-05-25 16:50:47
+ * @Description 余额异常弹窗
+ */
+import React from 'react';
+import { Modal,Input} from 'antd';
+import './WatchDataModal.less';
+
+const { Search } = Input;
+class WatchDataModal extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+        visible:true
+    };
+  }
+  onClose = ()=>{
+    this.setState({
+        visible:false
+    })
+  }
+  render() {
+  
+
+    return (
+        <Modal
+          title="视频课观看数据"
+          visible={visible}
+          footer={null}
+          onCancel={this.onClose}
+          maskClosable={false}
+          className="watch-data-modal"
+          closable={true}
+        >
+          <div>
+            <Search placeholder="搜索用户姓名/手机号" style={{ width: 200 }} />
+          </div>
+          <div>
+
+          </div>
+        </Modal>
+    )
+  }
+}
+
+export default WatchDataModal;
\ No newline at end of file