Skip to content

X
xiaomai-cloud-class-web
Commit 448e3eb7 by wufan
Options

feat:完成观看学员数据联调

parent f95a3d4e
Showing with 158 additions and 60 deletions
src/modules/course-manage/video-course/components/LearningDetailModal.jsx
import CourseService from "@/domains/course-domain/CourseService";
import React from "react";
import './LearningDetailModal.less';
class LearningDetailModal extends React.Component {
constructor(props) {
super(props);
......@@ -34,3 +36,5 @@ class LearningDetailModal extends React.Component {
}
export default LearningDetailModal;
\ No newline at end of file
src/modules/course-manage/video-course/components/VideoCourseList.jsx
......@@ -47,7 +47,7 @@ class VideoCourseList extends React.Component {
handleShowWatchDataModal = (item) => {
const { match } = this.props;
window.RCHistory.push({
pathname: `${match.url}/course-data?type=${item.type}&id=${item.id}`
pathname: `${match.url}/course-data?courseName=${item.courseName}&id=${item.id}`
})
}
......
src/modules/course-manage/video-course/components/WatchData.jsx
......@@ -3,26 +3,31 @@ import college from "@/common/lottie/college";
import { PageControl, XMTable } from "@/components";
import Breadcrumbs from "@/components/Breadcrumbs";
import CourseService from "@/domains/course-domain/CourseService";
import { Input, Select } from 'antd';
import { Input, Select } from "antd";
import React from "react";
import { withRouter } from "react-router-dom";
import LearningDetailModal from "./LearningDetailModal";
import "./WatchData.less";
const { Search } = Input;
class WatchData extends React.Component {
constructor(props) {
super(props);
const id = window.getParameterByName("id");
const courseName = window.getParameterByName("courseName");
this.state = {
courseName,
id,
visible: true,
dataSource: [],
query: {
current: 1,
size: 10,
sourceEnum: ""
sourceEnum: null,
},
totalCount: 0,
learningDetailModal: null,
};
}
......@@ -51,52 +56,56 @@ class WatchData extends React.Component {
parseColumns = () => {
const SOURCENUM = {
'WE_CHAT': "微信", 'WORK_WE_CHAT': "企业微信"
}
WE_CHAT: "微信",
WORK_WE_CHAT: "企业微信",
};
const columns = [
{
title: '观看学员',
key: 'name',
dataIndex: 'name',
render: (val,item) => {
return <div className="watcher">
title: "观看学员",
key: "name",
dataIndex: "name",
render: (val, item) => {
return (
<div className="watcher">
<div className="watcher__name">{val}</div>
<div className={`watcher__type ${item.sourceEnum}`}>{SOURCENUM[item.sourceEnum]}</div>
<div className={`watcher__type ${item.sourceEnum}`}>
@{SOURCENUM[item.sourceEnum]}
</div>
}
</div>
);
},
},
{
title: '手机号',
key: 'phone',
dataIndex: 'phone'
title: "手机号",
key: "phone",
dataIndex: "phone",
},
{
title: '首次观看时间',
key: 'firstWatch',
dataIndex: 'firstWatch',
title: "首次观看时间",
key: "firstWatch",
dataIndex: "firstWatch",
render: (val) => {
return formatDate('YYYY-MM-DD H:i', val)
}
return formatDate("YYYY-MM-DD H:i", val);
},
},
{
title: '学习进度',
key: 'progress',
dataIndex: 'progress',
title: "学习进度",
key: "progress",
dataIndex: "progress",
render: (val) => {
return <span>{val}</span>
}
return <span>{val}%</span>;
},
},
{
title: "操作",
key: "operate",
dataIndex: "operate",
width: 210,
render: (val, record) => {
return (
<div className="operate">
<div
className="operate__item"
// onClick={() => this.handleShowShareModal(record)}
onClick={() => this.ShowLearningDetailModal(record)}
>
学习详情
</div>
......@@ -109,24 +118,59 @@ class WatchData extends React.Component {
return columns;
};
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;
// 显示学员数据详情弹窗
ShowLearningDetailModal = (item) => {
const learningDetailModal = (
<LearningDetailModal
data={item}
title="学习详情"
close={() => {
this.setState({
query
}, this.handleFetchDataList)
learningDetailModal: null,
});
}}
/>
);
this.setState({ learningDetailModal });
};
// 搜索学员姓名或手机号
handleChangNickname = (value) => {
const isPhone = (value || "").match(/^\d+$/);
const { query } = this.state;
let _query = { ...query };
if (isPhone) {
_query.phone = value;
_query.nickName = null;
} else {
_query.nickName = value;
_query.phone = null;
}
_query.current = 1;
this.setState(
{
query: _query,
},
this.handleFetchDataList
);
};
// 搜索学员类型
handleWatchTypeSelect = (sourceEnum) => {
const { query } = this.state;
let _query = { ...query };
_query.sourceEnum = sourceEnum;
this.setState(
{
query: _query,
},
this.handleFetchDataList
);
};
render() {
const { dataSource, totalCount, query } = this.state;
const { dataSource, totalCount, query, courseName } = this.state;
const { current, size, sourceEnum } = query;
return (
......@@ -137,30 +181,45 @@ class WatchData extends React.Component {
window.RCHistory.goBack();
}}
/>
<div className="box">
<div className="box-header">
<div className="course-title"></div>
<div className="course-detail">
<div className="detail__line"></div>
<div className="detail__name">{courseName}</div>
</div>
<div className="filter-box">
<Search placeholder="搜索学员姓名/手机号" style={{ width: 200 }} onChange={(e) => { this.handleChangNickname(e.target.value)}} onSearch={ () => { this.handleFetchDataList()}} enterButton={<span className="icon iconfont">&#xe832;</span>}/>
<div className="watcher-name">
<span className="label">学员：</span>
<Search
placeholder="搜索学员姓名/手机号"
style={{ width: 200 }}
onChange={(e) => {
this.handleChangNickname(e.target.value);
}}
onSearch={() => {
this.handleFetchDataList();
}}
enterButton={<span className="icon iconfont">&#xe832;</span>}
/>
</div>
<div className="watch-type">
<span className="label">学员类型：</span>
<Select
showSearch
style={{ width: 200 }}
allowClear
onSearch={(value) => {
query.classNameLike = value;
this.setState({ query }, this.handleFetchClassList)
}}
onPopupScroll={this.handleFetchMore}
placeholder="请选择学员类型"
value={sourceEnum}
onChange={this.handleClassSelect}
>
<Select.Option
tyle={{ textAlign: 'center' }}
value="WE_CHAT"
onChange={this.handleWatchTypeSelect}
>
<Select.Option tyle={{ textAlign: "center" }} value="WE_CHAT">
微信
</Select.Option>
<Select.Option
tyle={{ textAlign: 'center' }}
tyle={{ textAlign: "center" }}
value="WORK_WE_CHAT"
>
企业微信
......@@ -168,8 +227,8 @@ class WatchData extends React.Component {
</Select>
</div>
</div>
</div>
<div className="box">
<XMTable
renderEmpty={{
image: college,
......@@ -179,11 +238,9 @@ class WatchData extends React.Component {
dataSource={dataSource}
columns={this.parseColumns()}
pagination={false}
scroll={{ x: 1500 }}
bordered
className="video-list-table"
/>
</div>
<div className="box-footer">
<PageControl
......@@ -191,14 +248,20 @@ class WatchData extends React.Component {
pageSize={size}
total={totalCount}
toPage={(page) => {
const _query = {...query, current: page + 1};
this.setState({
query:_query
},()=>{ this.handleFetchDataList()})
const _query = { ...query, current: page + 1 };
this.setState(
{
query: _query,
},
() => {
this.handleFetchDataList();
}
);
}}
/>
</div>
</div>
</div>
);
}
}
......
src/modules/course-manage/video-course/components/WatchData.less
.video-course-watch-data {
.watcher {
display: flex;
&__type {
margin-left: 8px;
&.WE_CHAT {
......@@ -10,4 +11,32 @@
}
}
}
.filter-box {
display: flex;
margin-bottom: 4px;
.watcher-name {
margin-right: 40px;
}
}
.course-detail {
display: flex;
align-items: center;
margin-bottom: 16px;
.detail__line {
width: 4px;
height: 12px;
background-image: linear-gradient(#2966ff 83.5%, #0acca4 16.5%);
margin-right: 8px;
}
.detail__name {
width: 880px;
height: 26px;
font-size: 19px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #333333;
line-height: 26px;
}
}
}
\ No newline at end of file
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