Skip to content

X
xiaomai-cloud-class-web
Commit ad079064 by yuananting
Options

feat:学院初始化直播课创建时间默认展示

parent 84416698
Showing with 467 additions and 431 deletions
src/modules/course-manage/components/LiveCourseList.jsx
......@@ -7,47 +7,45 @@
*/
import React from 'react';
import { Table, Modal, message, Dropdown, Button,Switch,Tooltip} from 'antd';
import { Table, Modal, message, Dropdown, Switch, Tooltip } from 'antd';
import { Route, withRouter } from 'react-router-dom';
import { PageControl } from "@/components";
import { PageControl } from '@/components';
import DownloadLiveModal from '@/components/DownloadLiveModal';
import ManageCoursewareModal from '../modal/ManageCoursewareModal';
import ShareLiveModal from '../modal/ShareLiveModal';
import RelatedPlanModal from '../modal/RelatedPlanModal';
import './LiveCourseList.less';
import { QuestionCircleOutlined } from '@ant-design/icons';
import { appId, shareUrl, LIVE_SHARE,LIVE_REPLAY_MAP} from '@/domains/course-domain/constants';
import CourseService from "@/domains/course-domain/CourseService";
import BaseService from "@/domains/basic-domain/baseService";
import { appId, LIVE_SHARE } from '@/domains/course-domain/constants';
import CourseService from '@/domains/course-domain/CourseService';
import BaseService from '@/domains/basic-domain/baseService';
import DataList from '../DataList/DataList';
import User from '@/common/js/user';
import _ from "underscore";
import _ from 'underscore';
const { confirm } = Modal;
const courseStateShow = {
UN_START: {
code: 1,
title: "待开课",
color: "#FFB129",
title: '待开课',
color: '#FFB129',
},
STARTING: {
code: 2,
title: "上课中",
color: "#238FFF",
title: '上课中',
color: '#238FFF',
},
FINISH: {
code: 3,
title: "已完成",
color: "#3BBDAA",
title: '已完成',
color: '#3BBDAA',
},
EXPIRED: {
code: 4,
title: "未成功开课",
color: "#999",
title: '未成功开课',
color: '#999',
},
};
class LiveCourseList extends React.Component {
......@@ -55,18 +53,17 @@ class LiveCourseList extends React.Component {
super(props);
this.state = {
columns: [],
openDownloadModal:false,
url:'',
RelatedPlanModalVisible:false,
selectPlanList:{}
}
openDownloadModal: false,
url: '',
RelatedPlanModalVisible: false,
selectPlanList: {},
};
}
componentWillMount(){
componentWillMount() {
this.parseColumns();
}
componentDidMount() {
this.getDownloadVersion()
this.getDownloadVersion();
}
// 显示分享弹窗
handleShowShareModal = (item, needStr = false) => {
......@@ -74,555 +71,595 @@ class LiveCourseList extends React.Component {
const { liveCourseId } = item;
const htmlUrl = `${LIVE_SHARE}live_detail/${liveCourseId}?id=${User.getStoreId()}`;
const longUrl = htmlUrl
console.log('htmlUrl',htmlUrl,longUrl);
const longUrl = htmlUrl;
console.log('htmlUrl', htmlUrl, longUrl);
const shareData = { ...item, longUrl };
const shareLiveModal = (
<ShareLiveModal
needStr={needStr}
data={shareData}
type="liveClass"
title="直播课"
type='liveClass'
title='直播课'
close={() => {
this.setState({
shareLiveModal: null
shareLiveModal: null,
});
localStorage.setItem('largeLiveCourseItem', '');
}}
/>
)
);
this.setState({ shareLiveModal })
}
this.setState({ shareLiveModal });
};
//改变上架状态
changeShelfState = (item) =>{
let _shelfState = item.shelfState
if(_shelfState==='NO'){
_shelfState = "YES";
item.shelfState = "YES"
}else{
_shelfState = "NO"
item.shelfState = "NO"
}
const params={
"liveCourseId": item.liveCourseId,
"shelfState":_shelfState
}
CourseService.turnOnOrOffLiveCloudCourse(params).then((res)=>{
if(res.success){
if(_shelfState === "YES"){
message.success("已开启展示");
}else{
message.success("已取消展示");
changeShelfState = (item) => {
let _shelfState = item.shelfState;
if (_shelfState === 'NO') {
_shelfState = 'YES';
item.shelfState = 'YES';
} else {
_shelfState = 'NO';
item.shelfState = 'NO';
}
const params = {
liveCourseId: item.liveCourseId,
shelfState: _shelfState,
};
CourseService.turnOnOrOffLiveCloudCourse(params).then((res) => {
if (res.success) {
if (_shelfState === 'YES') {
message.success('已开启展示');
} else {
message.success('已取消展示');
}
})
}
});
};
// 前往上课数据页面
handleLinkToClassData = (item) => {
const { match } = this.props;
window.RCHistory.push({
pathname: `${match.url}/live-course-data?type=large&id=${item.liveCourseId}`
pathname: `${match.url}/live-course-data?type=large&id=${item.liveCourseId}`,
});
}
};
parseColumns = () => {
const menu = (item) => (
<div className="live-course-more-menu">
<div>
上课记录
</div>
<div className='live-course-more-menu'>
<div>上课记录</div>
<div
onClick={() => {
this.handleShowRepeatModal(item);
}}
>
}}>
回放记录
</div>
</div>
);
let columns
let columns;
const userRole = User.getUserRole();
if(userRole !=="CloudLecturer"){
if (userRole !== 'CloudLecturer') {
columns = [
{
title: "直播课",
width: "23%",
key: "course",
dataIndex: "courseName",
title: '直播课',
width: '23%',
key: 'course',
dataIndex: 'courseName',
render: (val, record) => {
let hasCover = false;
return (
<div className="record__item">
{
record.courseMediaVOS.map((item,index)=>{
if( item.contentType === "COVER"){
<div className='record__item'>
{record.courseMediaVOS.map((item, index) => {
if (item.contentType === 'COVER') {
hasCover = true;
return <img className="course-cover" src={item.mediaUrl} />
}
})
}
{ !hasCover &&
<img className="course-cover" src={'https://image.xiaomaiketang.com/xm/Yip2YtFDwH.png'} />
return <img className='course-cover' src={item.mediaUrl} />;
}
})}
{!hasCover && <img className='course-cover' src={'https://image.xiaomaiketang.com/xm/Yip2YtFDwH.png'} />}
<div>
{ record.courseName.length > 17?
{record.courseName.length > 17 ? (
<Tooltip title={record.courseName}>
<div className="course-name">{record.courseName}</div>
<div className='course-name'>{record.courseName}</div>
</Tooltip>
:
<div className="course-name">{record.courseName}</div>
}
) : (
<div className='course-name'>{record.courseName}</div>
)}
<div>
<span className="course-time">{formatDate("YYYY-MM-DD H:i",parseInt(record.startTime))}~{formatDate("H:i", parseInt(record.endTime))}</span>
<span className="course-status" style={{color:courseStateShow[record.courseState].color,border:`1px solid ${courseStateShow[record.courseState].color}`}}>{courseStateShow[record.courseState].title}</span>
<span className='course-time'>
{formatDate('YYYY-MM-DD H:i', parseInt(record.startTime))}~{formatDate('H:i', parseInt(record.endTime))}
</span>
<span
className='course-status'
style={{ color: courseStateShow[record.courseState].color, border: `1px solid ${courseStateShow[record.courseState].color}` }}>
{courseStateShow[record.courseState].title}
</span>
</div>
<div className="teacher-assistant">
{ record.teacherName.length > 4 ?
<div className='teacher-assistant'>
{record.teacherName.length > 4 ? (
<Tooltip title={record.teacherName}>
<span className="teacher">讲师：{record.teacherName}</span>
<span className='teacher'>讲师：{record.teacherName}</span>
</Tooltip>
:
<span className="teacher">讲师：{record.teacherName}</span>
}
) : (
<span className='teacher'>讲师：{record.teacherName}</span>
)}
{ record.admins.length >0 &&
{record.admins.length > 0 && (
<>
<span className="split"> | </span>
{ this.handleAdminName(record.admins).length > 4?
<span className='split'> | </span>
{this.handleAdminName(record.admins).length > 4 ? (
<Tooltip title={this.handleAdminName(record.admins)}>
<span className="assistant">助教：
{ record.admins.map((item,index)=>{
return <span>{item.adminName} { (index < record.admins.length-1)&&(<span> 、</span>)} </span>
})
}
<span className='assistant'>
助教：
{record.admins.map((item, index) => {
return (
<span>
{item.adminName} {index < record.admins.length - 1 && <span> 、</span>}{' '}
</span>
);
})}
</span>
</Tooltip>
:
<span className="assistant">助教：
{ record.admins.map((item,index)=>{
return <span>{item.adminName} { (index < record.admins.length-1)&&(<span> 、</span>)} </span>
})
}
) : (
<span className='assistant'>
助教：
{record.admins.map((item, index) => {
return (
<span>
{item.adminName} {index < record.admins.length - 1 && <span> 、</span>}{' '}
</span>
}
);
})}
</span>
)}
</>
}
)}
</div>
</div>
</div>
)
}
);
},
},
{
title: "课程分类",
width: "10%",
key: "couseCatalog",
dataIndex: "couseCatalog",
title: '课程分类',
width: '10%',
key: 'couseCatalog',
dataIndex: 'couseCatalog',
render: (val, item) => {
return (
<div className="categoryName">{item.categoryName}</div>
)
return <div className='categoryName'>{item.categoryName}</div>;
},
},
{
title: "课件管理",
width: "8%",
key: "courseware",
dataIndex: "courseware",
title: '课件管理',
width: '8%',
key: 'courseware',
dataIndex: 'courseware',
render: (val, item) => {
return (
<span className="courseware"
<span
className='courseware'
onClick={() => {
this.setState({
editData: item,
openCoursewareModal: true,
});
}}>{item.courseDocumentCount}个</span>
}}>
{item.courseDocumentCount}个
</span>
);
},
},
{
title: '上课数据',
width: "9%",
key: "quota",
dataIndex: "quota",
width: '9%',
key: 'quota',
dataIndex: 'quota',
render: (val, item) => {
return (
<span className="iconfont icon quota-icon" onClick={() => {
this.handleLinkToClassData(item)
}}>&#xe7d6;</span>
<span
className='iconfont icon quota-icon'
onClick={() => {
this.handleLinkToClassData(item);
}}>
&#xe7d6;
</span>
);
},
},
{
title: <span>
title: (
<span>
<span>学院展示</span>
<Tooltip title={<div>开启后，学员可在学院内查看到此课程。若课程“未成功开课”，则系统会自动“关闭”学院展示。<br/>关闭后，学院内不再展示此课程，但学员仍可通过分享的海报/链接查看此课程。</div>}><i className="icon iconfont" style={{ marginLeft: '5px',cursor:'pointer',color:'#bfbfbf',fontSize:'14px',fontWeight:'normal'}}>&#xe61d;</i></Tooltip>
</span>,
width: "9%",
key: "shelfState",
dataIndex: "shelfState",
<Tooltip
title={
<div>
开启后，学员可在学院内查看到此课程。若课程“未成功开课”，则系统会自动“关闭”学院展示。
<br />
关闭后，学院内不再展示此课程，但学员仍可通过分享的海报/链接查看此课程。
</div>
}>
<i className='icon iconfont' style={{ marginLeft: '5px', cursor: 'pointer', color: '#bfbfbf', fontSize: '14px', fontWeight: 'normal' }}>
&#xe61d;
</i>
</Tooltip>
</span>
),
width: '9%',
key: 'shelfState',
dataIndex: 'shelfState',
render: (val, item, index) => {
return (
<Switch defaultChecked={item.shelfState==="YES"?true:false} onChange={()=>this.changeShelfState(item)}/>
)
return <Switch defaultChecked={item.shelfState === 'YES' ? true : false} onChange={() => this.changeShelfState(item)} />;
},
},
{
title: '创建时间',
width: "9%",
key: "created",
dataIndex: "created",
width: '9%',
key: 'created',
dataIndex: 'created',
sorter: true,
render: (val, item) => {
return (
<span>{formatDate('YYYY-MM-DD H:i', val)}</span>
);
return <span>{val === 0 ? '-' : formatDate('YYYY-MM-DD H:i', val)}</span>;
},
},
{
title: '关联项',
width: "15%",
key: "planList",
dataIndex: "planList",
width: '15%',
key: 'planList',
dataIndex: 'planList',
render: (val, record) => {
return (
<div className="related-task">
{ record.relatedPlanList ?
<Tooltip title={this.handlePlanName(record.relatedPlanList)} placement="top" arrowPointAtCenter>
{ record.relatedPlanList.map((item,index)=>{
return <span>{item.planName} { (index < record.relatedPlanList.length-1)&&(<span> 、</span>)} </span>
})
}
<div className='related-task'>
{record.relatedPlanList ? (
<Tooltip title={this.handlePlanName(record.relatedPlanList)} placement='top' arrowPointAtCenter>
{record.relatedPlanList.map((item, index) => {
return (
<span>
{item.planName} {index < record.relatedPlanList.length - 1 && <span> 、</span>}{' '}
</span>
);
})}
</Tooltip>
:
) : (
<span></span>
}
)}
</div>
)
);
},
},
{
title: "操作",
width: "15%",
key: "operate",
dataIndex: "operate",
title: '操作',
width: '15%',
key: 'operate',
dataIndex: 'operate',
render: (val, item) => {
return (
<div className="operate">
{ ((item.courseState==="UN_START" || item.courseState==="STARTING") && (item.teacherId === User.getUserId() || _.pluck(item.admins, "adminId").includes(User.getUserId()))) &&
<div className='operate'>
{(item.courseState === 'UN_START' || item.courseState === 'STARTING') &&
(item.teacherId === User.getUserId() || _.pluck(item.admins, 'adminId').includes(User.getUserId())) && (
<>
<div
key="enter_live_room1"
className="operate__item"
onClick={() => { this.handleEnterLiveRoom(item) }}
>进入直播间
key='enter_live_room1'
className='operate__item'
onClick={() => {
this.handleEnterLiveRoom(item);
}}>
进入直播间
</div>
<span className="operate__item split" key="view_play_back_split"> | </span>
<span className='operate__item split' key='view_play_back_split'>
{' '}
|{' '}
</span>
</>
}
{ (item.courseState==="FINISH" && item.haveRecord==="YES") &&
)}
{item.courseState === 'FINISH' && item.haveRecord === 'YES' && (
<>
<div
key="view_play_back"
className="operate__item"
onClick={()=>{this.handleViewPlayBack(item)}}
>查看回放</div>
<span className="operate__item split" key="view_play_back_split"> | </span>
key='view_play_back'
className='operate__item'
onClick={() => {
this.handleViewPlayBack(item);
}}>
查看回放
</div>
<span className='operate__item split' key='view_play_back_split'>
{' '}
|{' '}
</span>
</>
}
{ item.courseState!=="EXPIRED" &&
)}
{item.courseState !== 'EXPIRED' && (
<>
<div
key="share"
className="operate__item"
onClick={() => { this.handleShowShareModal(item); }}
>
key='share'
className='operate__item'
onClick={() => {
this.handleShowShareModal(item);
}}>
分享
</div>
</>
}
{ item.courseState!=="EXPIRED" &&
)}
{item.courseState !== 'EXPIRED' && (
<>
<span key="split1" className="operate__item split"> | </span>
<div className="big-live">
<span key='split1' className='operate__item split'>
{' '}
|{' '}
</span>
<div className='big-live'>
<Dropdown overlay={this.renderMoreOperate(item)}>
<span className="more-operate">
<span className="operate-text">更多</span>
<span
className="iconfont icon"
style={{ color: "#2966FF" }}
>
<span className='more-operate'>
<span className='operate-text'>更多</span>
<span className='iconfont icon' style={{ color: '#2966FF' }}>
&#xe824;
</span>
</span>
</Dropdown>
</div>
</>
}
{ item.courseState==="EXPIRED" &&
<div
className="operate__item"
onClick={()=>this.handleDelete(item)}
>删除</div>
}
)}
{item.courseState === 'EXPIRED' && (
<div className='operate__item' onClick={() => this.handleDelete(item)}>
删除
</div>
)
}
}
)}
</div>
);
},
},
];
}else{
} else {
columns = [
{
title: "直播课",
width: "25%",
key: "course",
dataIndex: "courseName",
title: '直播课',
width: '25%',
key: 'course',
dataIndex: 'courseName',
render: (val, record) => {
let hasCover = false;
return (
<div className="record__item">
{
record.courseMediaVOS.map((item,index)=>{
if( item.contentType === "COVER"){
<div className='record__item'>
{record.courseMediaVOS.map((item, index) => {
if (item.contentType === 'COVER') {
hasCover = true;
return <img className="course-cover" src={item.mediaUrl} />
}
})
}
{ !hasCover &&
<img className="course-cover" src={'https://image.xiaomaiketang.com/xm/Yip2YtFDwH.png'} />
return <img className='course-cover' src={item.mediaUrl} />;
}
})}
{!hasCover && <img className='course-cover' src={'https://image.xiaomaiketang.com/xm/Yip2YtFDwH.png'} />}
<div>
{ record.courseName.length > 17?
{record.courseName.length > 17 ? (
<Tooltip title={record.courseName}>
<div className="course-name">{record.courseName}</div>
<div className='course-name'>{record.courseName}</div>
</Tooltip>
:
<div className="course-name">{record.courseName}</div>
}
) : (
<div className='course-name'>{record.courseName}</div>
)}
<div>
<span className="course-time">{formatDate("YYYY-MM-DD H:i",parseInt(record.startTime))}~{formatDate("H:i", parseInt(record.endTime))}</span>
<span className="course-status" style={{color:courseStateShow[record.courseState].color,border:`1px solid ${courseStateShow[record.courseState].color}`}}>{courseStateShow[record.courseState].title}</span>
<span className='course-time'>
{formatDate('YYYY-MM-DD H:i', parseInt(record.startTime))}~{formatDate('H:i', parseInt(record.endTime))}
</span>
<span
className='course-status'
style={{ color: courseStateShow[record.courseState].color, border: `1px solid ${courseStateShow[record.courseState].color}` }}>
{courseStateShow[record.courseState].title}
</span>
</div>
<div className="teacher-assistant">
{ record.teacherName.length > 4 ?
<div className='teacher-assistant'>
{record.teacherName.length > 4 ? (
<Tooltip title={record.teacherName}>
<span className="teacher">讲师：{record.teacherName}</span>
<span className='teacher'>讲师：{record.teacherName}</span>
</Tooltip>
:
<span className="teacher">讲师：{record.teacherName}</span>
}
) : (
<span className='teacher'>讲师：{record.teacherName}</span>
)}
{ record.admins.length >0 &&
{record.admins.length > 0 && (
<>
<span className="split"> | </span>
{ this.handleAdminName(record.admins).length > 4?
<span className='split'> | </span>
{this.handleAdminName(record.admins).length > 4 ? (
<Tooltip title={this.handleAdminName(record.admins)}>
<span className="assistant">助教：
{ record.admins.map((item,index)=>{
return <span>{item.adminName} { (index < record.admins.length-1)&&(<span> 、</span>)} </span>
})
}
<span className='assistant'>
助教：
{record.admins.map((item, index) => {
return (
<span>
{item.adminName} {index < record.admins.length - 1 && <span> 、</span>}{' '}
</span>
);
})}
</span>
</Tooltip>
:
<span className="assistant">助教：
{ record.admins.map((item,index)=>{
return <span>{item.adminName} { (index < record.admins.length-1)&&(<span> 、</span>)} </span>
})
}
) : (
<span className='assistant'>
助教：
{record.admins.map((item, index) => {
return (
<span>
{item.adminName} {index < record.admins.length - 1 && <span> 、</span>}{' '}
</span>
}
);
})}
</span>
)}
</>
}
)}
</div>
</div>
</div>
)
}
);
},
},
{
title: "课程分类",
width: "10%",
key: "couseCatalog",
dataIndex: "couseCatalog",
title: '课程分类',
width: '10%',
key: 'couseCatalog',
dataIndex: 'couseCatalog',
render: (val, item) => {
return (
<div className="categoryName">{item.categoryName}</div>
)
return <div className='categoryName'>{item.categoryName}</div>;
},
},
{
title: "课件管理",
width: "8%",
key: "courseware",
dataIndex: "courseware",
title: '课件管理',
width: '8%',
key: 'courseware',
dataIndex: 'courseware',
render: (val, item) => {
return (
<span className="courseware"
<span
className='courseware'
onClick={() => {
this.setState({
editData: item,
openCoursewareModal: true,
});
}}>{item.courseDocumentCount}个</span>
}}>
{item.courseDocumentCount}个
</span>
);
},
},
{
title: '上课数据',
width: "9%",
key: "quota",
dataIndex: "quota",
width: '9%',
key: 'quota',
dataIndex: 'quota',
render: (val, item) => {
return (
<span className="iconfont icon quota-icon" onClick={() => {
this.handleLinkToClassData(item)
}}>&#xe7d6;</span>
<span
className='iconfont icon quota-icon'
onClick={() => {
this.handleLinkToClassData(item);
}}>
&#xe7d6;
</span>
);
},
},
{
title: '创建时间',
width: "9%",
key: "created",
dataIndex: "created",
width: '9%',
key: 'created',
dataIndex: 'created',
sorter: true,
render: (val, item) => {
return (
<span>{formatDate('YYYY-MM-DD H:i', val)}</span>
);
return <span>{formatDate('YYYY-MM-DD H:i', val)}</span>;
},
},
{
title: '关联项',
width: "15%",
key: "planList",
dataIndex: "planList",
width: '15%',
key: 'planList',
dataIndex: 'planList',
render: (val, record) => {
return (
<div className="related-task">
{ record.relatedPlanList ?
<Tooltip title={this.handlePlanName(record.relatedPlanList)} placement="top" arrowPointAtCenter>
{ record.relatedPlanList.map((item,index)=>{
return <span>{item.planName} { (index < record.relatedPlanList.length-1)&&(<span> 、</span>)} </span>
})
}
<div className='related-task'>
{record.relatedPlanList ? (
<Tooltip title={this.handlePlanName(record.relatedPlanList)} placement='top' arrowPointAtCenter>
{record.relatedPlanList.map((item, index) => {
return (
<span>
{item.planName} {index < record.relatedPlanList.length - 1 && <span> 、</span>}{' '}
</span>
);
})}
</Tooltip>
:
) : (
<span></span>
}
)}
</div>
)
);
},
},
];
}
this.setState({ columns })
}
handleAdminName = (adminArray)=>{
let adminStr = "";
adminArray.map((item,index)=>{
if(index < adminArray.length-1){
this.setState({ columns });
};
handleAdminName = (adminArray) => {
let adminStr = '';
adminArray.map((item, index) => {
if (index < adminArray.length - 1) {
adminStr = adminStr + item.adminName + '、';
}else{
adminStr = adminStr + item.adminName
}
})
return adminStr
} else {
adminStr = adminStr + item.adminName;
}
});
return adminStr;
};
handlePlanName = (planArray)=>{
let planStr = "";
planArray.map((item,index)=>{
if(index < planArray.length-1){
handlePlanName = (planArray) => {
let planStr = '';
planArray.map((item, index) => {
if (index < planArray.length - 1) {
planStr = planStr + item.planName + '、';
}else{
planStr = planStr + item.planName
}
})
return planStr
} else {
planStr = planStr + item.planName;
}
});
return planStr;
};
renderMoreOperate = (item) => {
return (
<div className="live-course-more-menu">
{ (User.getUserRole() === "CloudManager" || User.getUserRole() === "StoreManager") &&
<div
className="operate__item"
onClick={()=>this.handleRelatedModalShow(item)}
>关联培训计划</div>
}
<div
className="operate__item"
onClick={()=>this.toEditCoursePage(item)}
>编辑</div>
{ item.courseState !=="STARTING" &&
<div
className="operate__item"
onClick={()=>this.handleDelete(item)}
>删除</div>
}
<div className='live-course-more-menu'>
{(User.getUserRole() === 'CloudManager' || User.getUserRole() === 'StoreManager') && (
<div className='operate__item' onClick={() => this.handleRelatedModalShow(item)}>
关联培训计划
</div>
)
}
handleDelete = (record)=>{
)}
<div className='operate__item' onClick={() => this.toEditCoursePage(item)}>
编辑
</div>
{item.courseState !== 'STARTING' && (
<div className='operate__item' onClick={() => this.handleDelete(item)}>
删除
</div>
)}
</div>
);
};
handleDelete = (record) => {
return confirm({
title: '你确定要删除直播课？',
content: '删除后，学员将不能观看直播课/回放',
icon: <span className="icon iconfont default-confirm-icon">&#xe839; </span>,
icon: <span className='icon iconfont default-confirm-icon'>&#xe839; </span>,
okText: '删除',
okType: 'danger',
cancelText: '取消',
width:440,
height:188,
width: 440,
height: 188,
onOk: () => {
this.deleteConfirm(record);
}
})
}
deleteConfirm = (item)=>{
const params={
"liveCourseId": item.liveCourseId,
}
CourseService.delLiveCloudCourse(params).then((res)=>{
if(res.success){
message.success("已删除");
},
});
};
deleteConfirm = (item) => {
const params = {
liveCourseId: item.liveCourseId,
};
CourseService.delLiveCloudCourse(params).then((res) => {
if (res.success) {
message.success('已删除');
this.props.onChange();
}
})
}
toEditCoursePage =(item)=>{
});
};
toEditCoursePage = (item) => {
window.RCHistory.push({
pathname: `/create-live-course?type=edit&id=${item.liveCourseId}`,
})
}
refreshCourseList = ()=>{
});
};
refreshCourseList = () => {
this.props.onChange(this.props.query);
}
};
//进入直播间
handleEnterLiveRoom = (item) => {
if (item.startTime - Date.now() > 1800000) {
Modal.warning({
title: "你来得太早了",
title: '你来得太早了',
okText: '我知道了',
content: "请于开始上课前30分钟来直播上课。",
content: '请于开始上课前30分钟来直播上课。',
icon: (
<span
className="icon iconfont default-confirm-icon"
style={{ color: "#FFBB54 !important" }}
>
<span className='icon iconfont default-confirm-icon' style={{ color: '#FFBB54 !important' }}>
&#xe834;
</span>
),
......@@ -630,127 +667,126 @@ class LiveCourseList extends React.Component {
} else {
CourseService.getLiveCloudCourseDetail({
liveCourseId: item.liveCourseId,
})
.then((res) => {
}).then((res) => {
const url = `xmqx://liveCourseId=${item.liveCourseId}`;
if (res.result.courseState === "FINISH") {
if (res.result.courseState === 'FINISH') {
Modal.warning({
title: "刷新页面",
title: '刷新页面',
icon: <QuestionCircleOutlined />,
content: "课次已结束，请刷新一下",
content: '课次已结束，请刷新一下',
onOk: () => {
this.refreshCourseList();
}
},
});
} else {
this.setState({ url, openDownloadModal: true });
}
});
}
}
};
onShowSizeChange = (current, size) => {
if (current == size) {
return
return;
}
let _query = this.props.query
let _query = this.props.query;
_query.size = size;
this.props.onChange(_query)
}
this.props.onChange(_query);
};
getDownloadVersion() {
const isMac = /macintosh|mac os x/i.test(navigator.userAgent);
// 判断学员系统
let platform;
if(!isMac){
platform = 1
}else{
platform = 4
if (!isMac) {
platform = 1;
} else {
platform = 4;
}
BaseService
.getLastedVersion({ model: 5, platform})
.then((res) => {
BaseService.getLastedVersion({ model: 5, platform }).then((res) => {
const { result = {} } = res;
this.setState({ downloadUrl: result.releaseUrl });
})
});
}
handleViewPlayBack = (item) => {
let htmlUrl;
if(item.teacherId === User.getUserId()){
if (item.teacherId === User.getUserId()) {
htmlUrl = `${LIVE_SHARE}replay/${item.liveCourseId}?teacherId=${User.getUserId()}&id=${User.getStoreId()}`;
}else if(_.pluck(item.admins, "adminId").includes(User.getUserId())){
} else if (_.pluck(item.admins, 'adminId').includes(User.getUserId())) {
htmlUrl = `${LIVE_SHARE}replay/${item.liveCourseId}?userId=${User.getUserId()}&id=${User.getStoreId()}`;
}else{
} else {
htmlUrl = `${LIVE_SHARE}replay/${item.liveCourseId}?id=${User.getStoreId()}`;
}
window.open(htmlUrl);
}
handleRelatedModalShow = (item)=>{
};
handleRelatedModalShow = (item) => {
const selectPlanList = {};
if(item.relatedPlanList){
item.relatedPlanList.map((item,index)=>{
selectPlanList[item.planId] = {}
if (item.relatedPlanList) {
item.relatedPlanList.map((item, index) => {
selectPlanList[item.planId] = {};
selectPlanList[item.planId].planId = item.planId;
selectPlanList[item.planId].taskBaseVOList = [{taskId:item.taskId}];
return item
})
selectPlanList[item.planId].taskBaseVOList = [{ taskId: item.taskId }];
return item;
});
}
this.setState({
RelatedPlanModalVisible:true,
selectCourseId:item.liveCourseId,
selectPlanList:selectPlanList
})
}
closeRelatedPlanModalVisible = ()=>{
this.setState({
RelatedPlanModalVisible:false
})
}
onChangeSelectPlanList = (selectPlanList)=>{
RelatedPlanModalVisible: true,
selectCourseId: item.liveCourseId,
selectPlanList: selectPlanList,
});
};
closeRelatedPlanModalVisible = () => {
this.setState({
selectPlanList:selectPlanList
})
}
onConfirmSelectPlanList = ()=>{
RelatedPlanModalVisible: false,
});
};
onChangeSelectPlanList = (selectPlanList) => {
this.setState({
RelatedPlanModalVisible:false
},()=>{this.props.onChange();})
selectPlanList: selectPlanList,
});
};
onConfirmSelectPlanList = () => {
this.setState(
{
RelatedPlanModalVisible: false,
},
() => {
this.props.onChange();
}
);
};
handleChangeTable = (pagination, filters, sorter) => {
const { columnKey, order } = sorter;
const { query } = this.props;
let _columnKey;
let _order;
// 按创建时间升序排序
if (columnKey === 'created' && order === 'ascend') {_columnKey="CREATED"; _order = 'SORT_ASC'; }
if (columnKey === 'created' && order === 'ascend') {
_columnKey = 'CREATED';
_order = 'SORT_ASC';
}
// 按创建时间降序排序
if (columnKey === 'created' && order === 'descend') { _columnKey="CREATED"; _order = 'SORT_DESC';}
if (columnKey === 'created' && order === 'descend') {
_columnKey = 'CREATED';
_order = 'SORT_DESC';
}
const _query = {
...query,
sortMap:{}
sortMap: {},
};
_query.sortMap[_columnKey]=_order;
_query.sortMap[_columnKey] = _order;
this.props.onChange(_query);
}
};
render() {
const { total, query, courseList, loading} = this.props;
const { total, query, courseList, loading } = this.props;
const { current, size } = query;
const { openDownloadModal,
downloadUrl, url, columns,
openCoursewareModal,
editData,
RelatedPlanModalVisible,
selectCourseId,
selectPlanList
} = this.state;
const { openDownloadModal, downloadUrl, url, columns, openCoursewareModal, editData, RelatedPlanModalVisible, selectCourseId, selectPlanList } = this.state;
const { match } = this.props;
return (
<div className="live-course-list">
<div className='live-course-list'>
<Table
bordered
size="middle"
size='middle'
pagination={false}
columns={columns}
loading={loading}
......@@ -758,21 +794,21 @@ class LiveCourseList extends React.Component {
onChange={this.handleChangeTable}
rowKey={(row) => row.liveCourseId}
/>
{ total>0 &&
<div className="box-footer">
{total > 0 && (
<div className='box-footer'>
<PageControl
current={current - 1}
pageSize={size}
total={parseInt(total)}
toPage={(page) => {
const _query = {...query, current: page + 1};
this.props.onChange(_query)
const _query = { ...query, current: page + 1 };
this.props.onChange(_query);
}}
onShowSizeChange={this.onShowSizeChange}
/>
</div>
}
{ this.state.shareLiveModal }
)}
{this.state.shareLiveModal}
{openCoursewareModal && (
<ManageCoursewareModal
data={editData}
......@@ -789,12 +825,12 @@ class LiveCourseList extends React.Component {
onCancel={() => {
this.setState({
url: '',
openDownloadModal:
false });
openDownloadModal: false,
});
}}
/>
)}
{ RelatedPlanModalVisible &&
{RelatedPlanModalVisible && (
<RelatedPlanModal
onClose={this.closeRelatedPlanModalVisible}
visible={RelatedPlanModalVisible}
......@@ -803,11 +839,11 @@ class LiveCourseList extends React.Component {
onChange={this.onChangeSelectPlanList}
onConfirm={this.onConfirmSelectPlanList}
/>
}
<iframe src={url} style={{ display: "none" }} />
)}
<iframe src={url} style={{ display: 'none' }} />
<Route path={`${match.url}/live-course-data`} component={DataList} />
</div>
)
);
}
}
......
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