Skip to content

X
xiaomai-cloud-class-web
Commit 7bb5f82a by zhangleyuan
Options

feat:处理权限操作

parent 70e57491
Showing with 270 additions and 178 deletions
src/modules/course-manage/components/LiveCourseList.jsx
...@@ -9,22 +9,13 @@ ...@@ -9,22 +9,13 @@
import React from 'react'; import React from 'react';
import { Table, Modal, message, Dropdown, Button,Switch,Tooltip} from 'antd'; import { Table, Modal, message, Dropdown, Button,Switch,Tooltip} from 'antd';
import { Route, withRouter } from 'react-router-dom'; import { Route, withRouter } from 'react-router-dom';
// import Bus from '@/core/bus';
// import User from "@/core/user";
// import User_t from "@/teacher/core/user";
import { PageControl } from "@/components"; import { PageControl } from "@/components";
// import { LIVE_SHARE_MAP } from '@/common/constants/academic/cloudClass';
import DownloadLiveModal from '@/components/DownloadLiveModal'; import DownloadLiveModal from '@/components/DownloadLiveModal';
// import LiveStudentListModal from '../modal/LiveStudentListModal';
// import CheckBalanceModal from '../modal/CheckBalanceModal';
// import StartLiveModal from '../modal/StartLiveModal';
// import ClassRecordModal from '../modal/ClassRecordModal';
// import PlayBackRecordModal from '../modal/PlayBackRecordModal';
import ManageCoursewareModal from '../modal/ManageCoursewareModal'; import ManageCoursewareModal from '../modal/ManageCoursewareModal';
import ShareLiveModal from '../modal/ShareLiveModal'; import ShareLiveModal from '../modal/ShareLiveModal';
// import AccountChargeModal from '../modal/AccountChargeModal';
// import SelectStudent from '../modal/select-student';
import './LiveCourseList.less'; import './LiveCourseList.less';
import { QuestionCircleOutlined } from '@ant-design/icons'; import { QuestionCircleOutlined } from '@ant-design/icons';
...@@ -34,7 +25,7 @@ import BaseService from "@/domains/basic-domain/baseService"; ...@@ -34,7 +25,7 @@ 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";
import user from '@/common/js/user';
const { confirm } = Modal; const { confirm } = Modal;
const courseStateShow = { const courseStateShow = {
...@@ -149,182 +140,279 @@ class LiveCourseList extends React.Component { ...@@ -149,182 +140,279 @@ class LiveCourseList extends React.Component {
</div> </div>
</div> </div>
); );
let columns
const columns = [ const userRole = User.getUserRole();
{ if(userRole !=="CloudLecturer"){
title: "直播课", columns = [
width: "25%", {
key: "course", title: "直播课",
dataIndex: "courseName", width: "25%",
render: (val, record) => { key: "course",
let hasCover = false; dataIndex: "courseName",
return ( render: (val, record) => {
<div className="record__item"> let hasCover = false;
{ return (
record.courseMediaVOS.map((item,index)=>{ <div className="record__item">
if( item.contentType === "COVER"){ {
hasCover = true; record.courseMediaVOS.map((item,index)=>{
return <img className="course-cover" src={item.mediaUrl} /> 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/YNfi45JwFA.png'} /> }
} { !hasCover &&
<div> <img className="course-cover" src={'https://image.xiaomaiketang.com/xm/YNfi45JwFA.png'} />
<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> <div className="course-name">{record.courseName}</div>
<span className="course-status" style={{color:courseStateShow[record.courseState].color,border:`1px solid ${courseStateShow[record.courseState].color}`}}>{courseStateShow[record.courseState].title}</span> <div>
</div> <span className="course-time">{formatDate("YYYY-MM-DD H:i",parseInt(record.startTime))}~{formatDate("H:i", parseInt(record.endTime))}</span>
<div className="teacher-assistant"> <span className="course-status" style={{color:courseStateShow[record.courseState].color,border:`1px solid ${courseStateShow[record.courseState].color}`}}>{courseStateShow[record.courseState].title}</span>
<span className="teacher">讲师：{record.teacherName}</span> </div>
<div className="teacher-assistant">
{ record.admins.length >0 && <span className="teacher">讲师：{record.teacherName}</span>
<>
<span className="split"> | </span> { record.admins.length >0 &&
<span className="assistant">助教： <>
<span className="split"> | </span>
{ record.admins.map((item,index)=>{ <span className="assistant">助教：
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> })
</> }
} </span>
</div> </>
}
</div>
</div>
</div> </div>
</div> )
) }
}
},
{
title: "课程分类",
width: "10%",
key: "couseCatalog",
dataIndex: "couseCatalog",
render: (val, item) => {
return (
<div className="categoryName">{item.categoryName}</div>
)
}, },
}, {
{ title: "课程分类",
title: "课件管理", width: "10%",
width: "8%", key: "couseCatalog",
key: "courseware", dataIndex: "couseCatalog",
dataIndex: "courseware", render: (val, item) => {
render: (val, item) => { return (
return ( <div className="categoryName">{item.categoryName}</div>
<span className="courseware" )
onClick={() => { },
this.setState({
editData: item,
openCoursewareModal: true,
});
}}>{item.courseDocumentCount}个</span>
);
}, },
}, {
{ title: "课件管理",
title: '上课数据', width: "8%",
width: "9%", key: "courseware",
key: "quota", dataIndex: "courseware",
dataIndex: "quota", render: (val, item) => {
render: (val, item) => { return (
return ( <span className="courseware"
<span className="iconfont icon quota-icon" onClick={() => { onClick={() => {
this.handleLinkToClassData(item) this.setState({
}}>&#xe7d6;</span> editData: item,
); openCoursewareModal: true,
});
}}>{item.courseDocumentCount}个</span>
);
},
}, },
}, {
{ title: '上课数据',
title: <span> width: "9%",
<span>店铺展示</span> key: "quota",
<Tooltip title="开启后，用户可在店铺内查看到此课程。若课程“未成功开课”，则系统会自动“关闭”店铺展示。关闭后，店铺内不再展示此课程，但用户仍可通过分享的海报/链接查看此课程。"><i className="icon iconfont" style={{ marginLeft: '5px',cursor:'pointer',color:'#bfbfbf'}}>&#xe61d;</i></Tooltip> dataIndex: "quota",
</span>, render: (val, item) => {
width: "7%", return (
dataIndex: "courseware", <span className="iconfont icon quota-icon" onClick={() => {
render: (val, item, index) => { this.handleLinkToClassData(item)
return ( }}>&#xe7d6;</span>
<Switch defaultChecked={item.shelfState==="YES"?true:false} onChange={()=>this.changeShelfState(item)}/> );
) },
}, },
}, {
{ title: <span>
title: "操作", <span>店铺展示</span>
width: "15%", <Tooltip title="开启后，用户可在店铺内查看到此课程。若课程“未成功开课”，则系统会自动“关闭”店铺展示。关闭后，店铺内不再展示此课程，但用户仍可通过分享的海报/链接查看此课程。"><i className="icon iconfont" style={{ marginLeft: '5px',cursor:'pointer',color:'#bfbfbf'}}>&#xe61d;</i></Tooltip>
key: "operate", </span>,
dataIndex: "operate", width: "7%",
render: (val, item) => { dataIndex: "courseware",
return ( render: (val, item, index) => {
return (
<div className="operate"> <Switch defaultChecked={item.shelfState==="YES"?true:false} onChange={()=>this.changeShelfState(item)}/>
{ ((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" title: "操作",
onClick={() => { this.handleEnterLiveRoom(item) }} width: "15%",
>进入直播间 key: "operate",
</div> dataIndex: "operate",
<span className="operate__item split" key="view_play_back_split"> | </span> render: (val, item) => {
</> return (
}
{ (item.courseState==="FINISH") &&
<> <div className="operate">
<div { ((item.courseState==="UN_START" || item.courseState==="STARTING") && (item.teacherId === User.getUserId() || _.pluck(item.admins, "adminId").includes(User.getUserId()))) &&
key="view_play_back" <>
className="operate__item" <div
onClick={()=>{this.handleViewPlayBack(item)}} key="enter_live_room1"
>查看回放</div> className="operate__item"
<span className="operate__item split" key="view_play_back_split"> | </span> onClick={() => { this.handleEnterLiveRoom(item) }}
>进入直播间
</div>
<span className="operate__item split" key="view_play_back_split"> | </span>
</> </>
}
{ (item.courseState==="FINISH") &&
} <>
{ item.courseState!=="EXPIRED" && <div
<> key="view_play_back"
className="operate__item"
onClick={()=>{this.handleViewPlayBack(item)}}
>查看回放</div>
<span className="operate__item split" key="view_play_back_split"> | </span>
</>
<div }
key="share" { item.courseState!=="EXPIRED" &&
className="operate__item" <>
onClick={() => { this.handleShowShareModal(item); }}
> <div
分享 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)}>
<span className="more-operate">
<span className="operate-text">更多</span>
<span
className="iconfont icon"
style={{ color: "#5289FA" }}
>
&#xe824;
</span>
</span>
</Dropdown>
</div> </div>
</> </>
} }
{ item.courseState!=="EXPIRED" && { item.courseState==="EXPIRED" &&
<> <div
<span key="split1" className="operate__item split"> | </span> className="operate__item"
<div className="big-live"> onClick={()=>this.handleDelete(item)}
<Dropdown overlay={this.renderMoreOperate(item)}> >删除</div>
<span className="more-operate"> }
<span className="operate-text">更多</span> </div>
<span )
className="iconfont icon" }
style={{ color: "#5289FA" }}
>
&#xe824;
</span>
</span>
</Dropdown>
</div>
</>
}
{ item.courseState==="EXPIRED" &&
<div
className="operate__item"
onClick={()=>this.handleDelete(item)}
>删除</div>
}
</div>
)
} }
} ];
]; }else{
columns = [
{
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"){
hasCover = true;
return <img className="course-cover" src={item.mediaUrl} />
}
})
}
{ !hasCover &&
<img className="course-cover" src={'https://image.xiaomaiketang.com/xm/YNfi45JwFA.png'} />
}
<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>
</div>
<div className="teacher-assistant">
<span className="teacher">讲师：{record.teacherName}</span>
{ record.admins.length >0 &&
<>
<span className="split"> | </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",
render: (val, item) => {
return (
<div className="categoryName">{item.categoryName}</div>
)
},
},
{
title: "课件管理",
width: "8%",
key: "courseware",
dataIndex: "courseware",
render: (val, item) => {
return (
<span className="courseware"
onClick={() => {
this.setState({
editData: item,
openCoursewareModal: true,
});
}}>{item.courseDocumentCount}个</span>
);
},
},
{
title: '上课数据',
width: "9%",
key: "quota",
dataIndex: "quota",
render: (val, item) => {
return (
<span className="iconfont icon quota-icon" onClick={() => {
this.handleLinkToClassData(item)
}}>&#xe7d6;</span>
);
},
},
];
}
this.setState({ columns }) this.setState({ columns })
} }
renderMoreOperate = (item) => { renderMoreOperate = (item) => {
...@@ -458,7 +546,7 @@ class LiveCourseList extends React.Component { ...@@ -458,7 +546,7 @@ class LiveCourseList extends React.Component {
editData editData
} = this.state; } = this.state;
const { match } = this.props; const { match } = this.props;
return ( return (
<div className="live-course-list"> <div className="live-course-list">
<Table <Table
......
src/modules/course-manage/components/LiveCourseOpt.jsx
...@@ -11,6 +11,7 @@ import { Button, Modal, message } from 'antd'; ...@@ -11,6 +11,7 @@ import { Button, Modal, message } from 'antd';
import Service from '@/common/js/service'; import Service from '@/common/js/service';
import './liveCourseOpt.less'; import './liveCourseOpt.less';
import BaseService from "@/domains/basic-domain/baseService"; import BaseService from "@/domains/basic-domain/baseService";
import User from '@/common/js/user'
class LiveCourseOpt extends React.Component { class LiveCourseOpt extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
...@@ -41,10 +42,13 @@ class LiveCourseOpt extends React.Component { ...@@ -41,10 +42,13 @@ class LiveCourseOpt extends React.Component {
}) })
} }
render() { render() {
const userRole = User.getUserRole();
return ( return (
<div className="live-course-opt"> <div className="live-course-opt">
<div className="opt__left"> <div className="opt__left">
<Button type="primary" onClick={this.handleCreateLiveCouese}>新建直播课</Button> { userRole !== "CloudLecturer" &&
<Button type="primary" onClick={this.handleCreateLiveCouese}>新建直播课</Button>
}
<Button onClick={this.handleDownloadClient}>下载直播客户端</Button> <Button onClick={this.handleDownloadClient}>下载直播客户端</Button>
</div> </div>
</div> </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