feat:完成上课数据页面

src/modules/course-manage/DataList/CourseData.jsx

 import React from "react";
 import { withRouter } from "react-router-dom";
 import {
-  Input,
-  InputNumber,
   Table,
   Tooltip,
   Popover,
@@ -16,21 +14,9 @@ import {
 } from "antd";
 import dealTimeDuration from "../utils/dealTimeDuration";
 import { PageControl } from "@/components";
-import SelectStudent from "../modal/select-student";
-// import { StudentStatus } from '@/modules/types';
 import Bus from "@/core/bus";
-import StudentClassReportModal from "../components/StudentClassReportModal";
-import TeacherClassReportModal from "../components/TeacherClassReportModal";
 
 import "./DataList.less";
-const { TextArea } = Input;
-const { Search } = Input;
-const ConsumeHourTypeEnum = {
-  SUPER_NOT_CONSUME: "超上未扣",
-  MANUAL_CONSUME: "手动扣除",
-  ARRIVE_CONSUME: "到课扣除",
-};
-const StudentStatus = {};
 class DataList extends React.Component {
   constructor(props) {
     super(props);
@@ -47,16 +33,10 @@ class DataList extends React.Component {
       courseInfo: {}, // 课程信息
       liveSignState: "",
       nameOrPhone: "", // 搜索学员姓名/手机号
-      currentEditData: {}, // 当前编辑对象
       current: 1,
-      size: 1000, // 添加扣课时学员弹窗回填所需 当前接口返回全部列表
+      size: 10, // 添加扣课时学员弹窗回填所需 当前接口返回全部列表
       total: 0,
-      loading: false,
-      teacherClassReportModal: null, // 展示老师课堂报告
-      studentClassReportModal: null, // 展示学生课堂报告
-      hasOpenIntegral: false, // 是否开启小麦粒积分
-      excludeStudentIds: [],
-      excludeConsumeStudentIds: [],
+      loading: false
     };
   }
 
@@ -64,17 +44,8 @@ class DataList extends React.Component {
     // this.fetchCourseInfo();
     // this.fetchTeacherData();
     // this.fetchStudentData();
-    // this.getXMPointConfig();
   }
 
-  // 获取小麦粒配置
-  getXMPointConfig() {
-    // axios.Business("public/integral/getConfig").then(res => {
-    //   this.setState({
-    //     hasOpenIntegral: res.result
-    //   })
-    // })
-  }
 
   // 获取课程信息
   fetchCourseInfo() {
@@ -139,230 +110,7 @@ class DataList extends React.Component {
     //     }
     //   });
   };
-  // 添加上课学员弹窗
-  handleShowSelectStuModal = (studentType) => {
-    const { studentData } = this.state;
-    const { courseId, courseInfo, savedSelectedRows } = this.state;
-    const [
-      studentList,
-      consumeStudentList,
-      excludeStudentIds,
-      excludeConsumeStudentIds,
-    ] = [[], [], [], []];
-    studentData.forEach((item) => {
-      if (item.statusEnum === "NORMAL") {
-        if (item.needConsumeHour === "YES") {
-          consumeStudentList.push({
-            studentId: item.userId,
-            classHourId: item.consumeHourClassId,
-          });
-          excludeConsumeStudentIds.push(item.userId);
-        } else if (item.needConsumeHour === "NO") {
-          studentList.push({ studentId: item.userId });
-          excludeStudentIds.push(item.userId);
-        }
-        this.setState({
-          excludeStudentIds,
-          excludeConsumeStudentIds,
-        });
-      }
-    });
-
-    const studentModal = (
-      <SelectStudent
-        savedSelectedRows={savedSelectedRows}
-        liveCourseId={courseId}
-        studentType={studentType}
-        studentList={studentList}
-        consumeStudentList={consumeStudentList}
-        excludeStudentIds={excludeStudentIds}
-        excludeConsumeStudentIds={excludeConsumeStudentIds}
-        onSelect={(
-          excludeStudentIds,
-          consumeStudentList,
-          savedSelectedRows
-        ) => {
-          this.setState({ savedSelectedRows });
-          this.handleSelectStudent(
-            courseInfo,
-            excludeStudentIds,
-            consumeStudentList,
-            studentType
-          );
-        }}
-        after={true}
-        close={() => {
-          this.setState({
-            studentModal: null,
-          });
-        }}
-      />
-    );
-    this.setState({ studentModal });
-  };
-
-  // 添加学员
-  handleSelectStudent = (item, studentIds, consumeStudentList, studentType) => {
-    const { liveType, liveCourseId, podium, quota } = item;
-    const {
-      excludeStudentIds = [],
-      excludeConsumeStudentIds = [],
-    } = this.state;
-    // 当前选择的学员
-    const currentSelectStuIds =
-      studentType === "DEDUCTION"
-        ? _.pluck(consumeStudentList, "studentId")
-        : studentIds;
-    // 如果当前选择的是扣课时学员，那么总的已选学员人数 = 扣课时 + 之前选择不扣课时的
-    // 如果当前选择的是不扣课时学员，那么总的已选学员人数 = 不扣课时 + 之前选择的扣课时的
-    const prevSelectStutIds =
-      studentType === "DEDUCTION"
-        ? excludeStudentIds
-        : excludeConsumeStudentIds;
-
-    const stuLen = [...currentSelectStuIds, ...prevSelectStutIds].length;
 
-    if (liveType !== "SMALL_CLASS_INTERACTION" && stuLen > 1000) {
-      message.info(`最多选择1000人`);
-      return;
-    } else if (liveType == "SMALL_CLASS_INTERACTION" && stuLen > podium) {
-      message.info(`最多选择${podium}人`);
-      return;
-    } else {
-      const param = {
-        liveCourseId: liveCourseId,
-      };
-      if (studentType === "DEDUCTION") {
-        param.consumeStudentIds = consumeStudentList;
-      } else {
-        param.studentIds = studentIds;
-      }
-      // axios.Apollo('public/businessLive/addCourseStu', param).then((res) => {
-      //   if (res.success) {
-      //     this.setState({
-      //       studentModal: null,
-      //     });
-      //     message.success('学员变更成功');
-      //     this.fetchStudentData();
-      //   }
-      // });
-    }
-  };
-  // 移出学员
-  handelDeleteStu(item) {
-    const { courseId } = this.state;
-    const { userId, innerLiveUserId } = item;
-    const params = {
-      innerLiveUserId: innerLiveUserId,
-      liveCourseId: courseId,
-      studentId: userId,
-    };
-    // axios.Apollo('/public/businessLive/moveCourseStu', params).then((res) => {
-    //   if (res.success === true) {
-    //     message.success('移出成功');
-    //     this.fetchStudentData();
-    //   }
-    // });
-  }
-  // 获取课程包
-  fetchCourseBag(item, index) {
-    const params = {
-      studentId: item.userId,
-    };
-    const { studentData } = this.state;
-    // axios.Business('public/classHour/getUseAbleAccountByStudentId', params).then((res) => {
-    //   const { success, result } = res;
-    //   if (success) {
-    //     studentData[index] = {
-    //       ...studentData[index],
-    //       courseBag: result || [],
-    //     };
-    //     let currentEditData = JSON.parse(JSON.stringify(studentData[index]));
-    //     this.setState({
-    //       studentData,
-    //       currentEditData,
-    //     });
-    //   }
-    // });
-  }
-  // 编辑
-  handelEditColumn(item, index) {
-    this.fetchCourseBag(item, index);
-    const { studentData } = this.state;
-
-    studentData.forEach((i, y) => {
-      if (y === index) {
-        i.edit = true;
-      } else {
-        i.edit = false;
-      }
-    });
-    let currentEditData = JSON.parse(JSON.stringify(studentData[index]));
-    this.setState({
-      studentData,
-      currentEditData,
-    });
-  }
-  // 保存
-  handelSaveColumn(index) {
-    const { instId, currentEditData } = this.state;
-    const consumeUserId = window.currentUserInstInfo.adminId;
-    const {
-      consumeHourClassId,
-      consumeHourNum,
-      remark,
-      liveStudentId,
-    } = currentEditData;
-    const params = {
-      consumeHourClassId: consumeHourClassId,
-      consumeHourNum,
-      remark,
-      consumeUserId: consumeUserId,
-      instId: instId,
-      liveStudentId: liveStudentId,
-    };
-    // axios.Apollo('public/businessLive/updateStudentVisitCheckedData', params).then((res) => {
-    //   if (res.success === true) {
-    //     message.success('修改成功');
-    //     this.fetchStudentData();
-    //   }
-    // });
-  }
-  // 取消
-  handelCancelColumn(index) {
-    const { studentData } = this.state;
-    studentData[index].edit = false;
-    this.setState({
-      studentData,
-    });
-  }
-  // 修改
-  changeFiledValue(filed, val, index) {
-    const { currentEditData } = this.state;
-    currentEditData[filed] = val;
-    this.setState({
-      currentEditData,
-    });
-  }
-  // 修改课程包
-  handleChangeCourse(val, index) {
-    let { currentEditData } = this.state;
-    const courseObj = currentEditData.courseBag.find((item) => {
-      if (item.courseId === val) {
-        return item;
-      }
-    });
-    const { courseName, leftLessons } = courseObj;
-    currentEditData = {
-      ...currentEditData,
-      consumeHourClassId: val,
-      consumeHourClassName: courseName,
-      leftLessons,
-    };
-    this.setState({
-      currentEditData,
-    });
-  }
   // 进入直播次数列表
   getVisiterColumns() {
     const columns = [
@@ -401,45 +149,8 @@ class DataList extends React.Component {
     return columns;
   }
 
-  // 查看老师课堂报告
-  handleCheckTeacherClassReport = () => {
-    const teacherClassReportModal = (
-      <TeacherClassReportModal
-        courseId={this.state.courseInfo.liveCourseId}
-        onCancel={() => {
-          this.setState({ teacherClassReportModal: null });
-        }}
-      />
-    );
-    this.setState({
-      teacherClassReportModal,
-    });
-  };
-
-  // 查看学生课堂报告
-  handleCheckStudentClassReport = (studentId) => {
-    const studentClassReportModal = (
-      <StudentClassReportModal
-        courseId={this.state.courseInfo.liveCourseId}
-        studentId={studentId}
-        onCancel={() => {
-          this.setState({ studentClassReportModal: null });
-        }}
-      />
-    );
-    this.setState({
-      studentClassReportModal,
-    });
-  };
-
   // 学员上课数据列表
   getStudentColumns() {
-    const {
-      courseState,
-      consumeClassTime,
-      consumeHourNum,
-    } = this.state.courseInfo;
-    const { type, currentEditData, hasOpenIntegral } = this.state;
     const columns = [
       {
         title: "用户姓名",
@@ -500,7 +211,7 @@ class DataList extends React.Component {
                   size={"small"}
                   style={{ width: 450 }}
                   pagination={false}
-                ></Table>
+                />
               );
               return (
                 <Popover content={table} trigger="click">
@@ -508,7 +219,7 @@ class DataList extends React.Component {
                 </Popover>
               );
             } else {
-              return <div className="live-table--empty">暂无上课数据</div>;
+              return <div className="live-table--empty">暂无观看数据</div>;
             }
           } else {
             return <span>{text}</span>;
@@ -552,33 +263,35 @@ class DataList extends React.Component {
     //   });
   };
 
-  handleCheckEnterTimes =()=>{
-
-    return (<Popover
-      placement="top"
-      visible={visible}
-      overlayClassName='popover-confirm'
-      content={(
+  handleCheckEnterTimes = () => {
+    const { teacherData } = this.state;
+    if (teacherData.times > 0) {
+      if (
+        teacherData.visitorInfoVOList &&
+        teacherData.visitorInfoVOList.length > 0
+      ) {
+        const table = (
           <Table
-            size="small"
-            scroll={{ y: 600 }}
-            columns={this.getStudentColumns()}
-            dataSource={studentData}
+            columns={this.getVisiterColumns()}
+            dataSource={teacherData.visitorInfoVOList}
+            scroll={{ y: 75 }}
+            size={"small"}
+            style={{ width: 450 }}
             pagination={false}
-            style={{ margin: "16px 0" }}
           />
-      )}
-    >
-      <span
-        style={{cursor: 'pointer'}}
-        className="iconfont icon edit gray-icon"
-        onClick={() => {
-          setVisible(true)
-        }}
-      >&#xe6e7;</span>
-    </Popover>)
-  }
-
+        );
+        return (
+          <Popover content={table} trigger="click">
+            <span className="handel-btn">{text}</span>
+          </Popover>
+        );
+      } else {
+        return <div className="live-table--empty">暂无观看数据</div>;
+      }
+    } else {
+      return <span>{teacherData.times}</span>;
+    }
+  };
 
   render() {
     const {
@@ -589,11 +302,6 @@ class DataList extends React.Component {
       total,
       loading,
     } = this.state;
-    const {
-      courseState,
-      consumeClassTime,
-      consumeHourNum,
-    } = this.state.courseInfo;
     return (
       <Spin spinning={loading}>
         {/* 讲师上课数据 */}
@@ -611,17 +319,30 @@ class DataList extends React.Component {
               />
               <div className="right">
                 <div className="name">{teacherData.name || "王凯凯"}</div>
-                <div className="phone">{teacherData.phone || "13888884388" }</div>
+                <div className="phone">
+                  {teacherData.phone || "13888884388"}
+                </div>
               </div>
             </div>
 
             <div className="times item-block">
-              <div className={`times-num ${Number(teacherData.times) > 0 ? "can-click":""}`} onClick={()=>{this.handleCheckEnterTimes()}}>{teacherData.times || '47'}</div>
+              <div
+                className={`times-num ${
+                  Number(teacherData.times) > 0 ? "can-click" : ""
+                }`}
+                onClick={() => {
+                  this.handleCheckEnterTimes();
+                }}
+              >
+                {teacherData.times || "47"}
+              </div>
               <div className="text">进入直播间次数</div>
             </div>
 
             <div className="online-duration item-block">
-              <div className="duration">{teacherData.duration || '20:30:45'}</div>
+              <div className="duration">
+                {dealTimeDuration(teacherData.duration) || "20:30:45"}
+              </div>
               <div className="text">累计在线时长</div>
             </div>
           </div>
@@ -640,7 +361,7 @@ class DataList extends React.Component {
                       message.warning("暂无数据可导出");
                       return;
                     }
-                      this.handleExportV5();
+                    this.handleExportV5();
                   },
                   500,
                   true