Skip to content

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

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

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