Skip to content

X
xiaomai-cloud-class-web
Commit 9bf68b4b by wufan
Options

feat:完成上课数据页面

parent 3d8ebb9a
Showing with 47 additions and 326 deletions
src/modules/course-manage/DataList/CourseData.jsx
import React from "react"; import React from "react";
import { withRouter } from "react-router-dom"; import { withRouter } from "react-router-dom";
import { import {
Input,
InputNumber,
Table, Table,
Tooltip, Tooltip,
Popover, Popover,
...@@ -16,21 +14,9 @@ import { ...@@ -16,21 +14,9 @@ import {
} from "antd"; } from "antd";
import dealTimeDuration from "../utils/dealTimeDuration"; import dealTimeDuration from "../utils/dealTimeDuration";
import { PageControl } from "@/components"; import { PageControl } from "@/components";
import SelectStudent from "../modal/select-student";
// import { StudentStatus } from '@/modules/types';
import Bus from "@/core/bus"; import Bus from "@/core/bus";
import StudentClassReportModal from "../components/StudentClassReportModal";
import TeacherClassReportModal from "../components/TeacherClassReportModal";
import "./DataList.less"; 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 { class DataList extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
...@@ -47,16 +33,10 @@ class DataList extends React.Component { ...@@ -47,16 +33,10 @@ class DataList extends React.Component {
courseInfo: {}, // 课程信息 courseInfo: {}, // 课程信息
liveSignState: "", liveSignState: "",
nameOrPhone: "", // 搜索学员姓名/手机号 nameOrPhone: "", // 搜索学员姓名/手机号
currentEditData: {}, // 当前编辑对象
current: 1, current: 1,
size: 1000, // 添加扣课时学员弹窗回填所需 当前接口返回全部列表 size: 10, // 添加扣课时学员弹窗回填所需 当前接口返回全部列表
total: 0, total: 0,
loading: false, loading: false
teacherClassReportModal: null, // 展示老师课堂报告
studentClassReportModal: null, // 展示学生课堂报告
hasOpenIntegral: false, // 是否开启小麦粒积分
excludeStudentIds: [],
excludeConsumeStudentIds: [],
}; };
} }
...@@ -64,17 +44,8 @@ class DataList extends React.Component { ...@@ -64,17 +44,8 @@ class DataList extends React.Component {
// this.fetchCourseInfo(); // this.fetchCourseInfo();
// this.fetchTeacherData(); // this.fetchTeacherData();
// this.fetchStudentData(); // this.fetchStudentData();
// this.getXMPointConfig();
} }
// 获取小麦粒配置
getXMPointConfig() {
// axios.Business("public/integral/getConfig").then(res => {
// this.setState({
// hasOpenIntegral: res.result
// })
// })
}
// 获取课程信息 // 获取课程信息
fetchCourseInfo() { fetchCourseInfo() {
...@@ -139,230 +110,7 @@ class DataList extends React.Component { ...@@ -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() { getVisiterColumns() {
const columns = [ const columns = [
...@@ -401,45 +149,8 @@ class DataList extends React.Component { ...@@ -401,45 +149,8 @@ class DataList extends React.Component {
return columns; 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() { getStudentColumns() {
const {
courseState,
consumeClassTime,
consumeHourNum,
} = this.state.courseInfo;
const { type, currentEditData, hasOpenIntegral } = this.state;
const columns = [ const columns = [
{ {
title: "用户姓名", title: "用户姓名",
...@@ -500,7 +211,7 @@ class DataList extends React.Component { ...@@ -500,7 +211,7 @@ class DataList extends React.Component {
size={"small"} size={"small"}
style={{ width: 450 }} style={{ width: 450 }}
pagination={false} pagination={false}
></Table> />
); );
return ( return (
<Popover content={table} trigger="click"> <Popover content={table} trigger="click">
...@@ -508,7 +219,7 @@ class DataList extends React.Component { ...@@ -508,7 +219,7 @@ class DataList extends React.Component {
</Popover> </Popover>
); );
} else { } else {
return <div className="live-table--empty">暂无上课数据</div>; return <div className="live-table--empty">暂无观看数据</div>;
} }
} else { } else {
return <span>{text}</span>; return <span>{text}</span>;
...@@ -552,33 +263,35 @@ class DataList extends React.Component { ...@@ -552,33 +263,35 @@ class DataList extends React.Component {
// }); // });
}; };
handleCheckEnterTimes =()=>{ handleCheckEnterTimes = () => {
const { teacherData } = this.state;
return (<Popover if (teacherData.times > 0) {
placement="top" if (
visible={visible} teacherData.visitorInfoVOList &&
overlayClassName='popover-confirm' teacherData.visitorInfoVOList.length > 0
content={( ) {
const table = (
<Table <Table
size="small" columns={this.getVisiterColumns()}
scroll={{ y: 600 }} dataSource={teacherData.visitorInfoVOList}
columns={this.getStudentColumns()} scroll={{ y: 75 }}
dataSource={studentData} size={"small"}
style={{ width: 450 }}
pagination={false} pagination={false}
style={{ margin: "16px 0" }}
/> />
)} );
> return (
<span <Popover content={table} trigger="click">
style={{cursor: 'pointer'}} <span className="handel-btn">{text}</span>
className="iconfont icon edit gray-icon" </Popover>
onClick={() => { );
setVisible(true) } else {
}} return <div className="live-table--empty">暂无观看数据</div>;
>&#xe6e7;</span> }
</Popover>) } else {
} return <span>{teacherData.times}</span>;
}
};
render() { render() {
const { const {
...@@ -589,11 +302,6 @@ class DataList extends React.Component { ...@@ -589,11 +302,6 @@ class DataList extends React.Component {
total, total,
loading, loading,
} = this.state; } = this.state;
const {
courseState,
consumeClassTime,
consumeHourNum,
} = this.state.courseInfo;
return ( return (
<Spin spinning={loading}> <Spin spinning={loading}>
{/* 讲师上课数据 */} {/* 讲师上课数据 */}
...@@ -611,17 +319,30 @@ class DataList extends React.Component { ...@@ -611,17 +319,30 @@ class DataList extends React.Component {
/> />
<div className="right"> <div className="right">
<div className="name">{teacherData.name || "王凯凯"}</div> <div className="name">{teacherData.name || "王凯凯"}</div>
<div className="phone">{teacherData.phone || "13888884388" }</div> <div className="phone">
{teacherData.phone || "13888884388"}
</div>
</div> </div>
</div> </div>
<div className="times item-block"> <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 className="text">进入直播间次数</div>
</div> </div>
<div className="online-duration item-block"> <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 className="text">累计在线时长</div>
</div> </div>
</div> </div>
...@@ -640,7 +361,7 @@ class DataList extends React.Component { ...@@ -640,7 +361,7 @@ class DataList extends React.Component {
message.warning("暂无数据可导出"); message.warning("暂无数据可导出");
return; return;
} }
this.handleExportV5(); this.handleExportV5();
}, },
500, 500,
true true
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment