Skip to content

X
xiaomai-cloud-class-web
Commit ffaaa96d by guomingpang
Options

feat:外部课程相关模块提交

parent 34887728
Showing with 92 additions and 62 deletions
src/modules/course-manage/video-course/components/VideoCourseList.jsx
...@@ -64,7 +64,15 @@ class VideoCourseList extends React.Component { ...@@ -64,7 +64,15 @@ class VideoCourseList extends React.Component {
return ( return (
<div className='record__item'> <div className='record__item'>
{/* 上传了封面的话就用上传的封面, 没有的话就取视频的第一帧 */} {/* 上传了封面的话就用上传的封面, 没有的话就取视频的第一帧 */}
<img className='course-cover' src={coverUrl || `${scheduleVideoUrl}?x-oss-process=video/snapshot,t_0,m_fast`} alt='' /> <img
className='course-cover'
src={
coverUrl || type === 'internal'
? `${scheduleVideoUrl}?x-oss-process=video/snapshot,t_0,m_fast`
: 'https://image.xiaomaiketang.com/xm/mt3ZQRxGKB.png'
}
alt=''
/>
<Choose> <Choose>
<When condition={record.courseName.length > 25}> <When condition={record.courseName.length > 25}>
<Tooltip title={record.courseName}> <Tooltip title={record.courseName}>
......
src/modules/course-manage/video-course/index.jsx
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
* @Author: 吴文洁 * @Author: 吴文洁
* @Date: 2020-08-05 10:08:06 * @Date: 2020-08-05 10:08:06
* @LastEditors: fusanqiasng * @LastEditors: fusanqiasng
* @LastEditTime: 2021-05-25 12:00:56 * @LastEditTime: 2021-05-25 18:08:10
* @Description: 云课堂-视频课入口页面 * @Description: 云课堂-视频课入口页面
* @Copyright: 杭州杰竞科技有限公司 版权所有 * @Copyright: 杭州杰竞科技有限公司 版权所有
*/ */
...@@ -51,6 +51,12 @@ class VideoCourse extends React.Component { ...@@ -51,6 +51,12 @@ class VideoCourse extends React.Component {
CourseService.videoSchedulePage(query).then((res) => { CourseService.videoSchedulePage(query).then((res) => {
const { result = {} } = res || {} const { result = {} } = res || {}
const { records = [], total = 0 } = result const { records = [], total = 0 } = result
if (query.size * (query.current - 1) >= Number(total)) {
this.handleFetchScheduleList({
current: 1
})
return
}
this.setState({ this.setState({
dataSource: records, dataSource: records,
totalCount: Number(total) totalCount: Number(total)
...@@ -58,9 +64,14 @@ class VideoCourse extends React.Component { ...@@ -58,9 +64,14 @@ class VideoCourse extends React.Component {
}) })
} }
currenTabChange = (currentTabKey) => { currenTabChange = (currentTabKey) => {
const { query } = this.state
this.setState( this.setState(
{ {
currentTabKey currentTabKey,
query: {
...query,
current: 1
}
}, },
() => { () => {
this.handleFetchScheduleList() this.handleFetchScheduleList()
......
src/modules/plan-manage/modal/relatedCourseModal.jsx
...@@ -369,6 +369,7 @@ class SelectOperatorModal extends React.Component { ...@@ -369,6 +369,7 @@ class SelectOperatorModal extends React.Component {
// 请求表头 // 请求表头
parseVideoColumns = () => { parseVideoColumns = () => {
const { videoCourseDivision } = this.state
const columns = [ const columns = [
{ {
title: ( title: (
...@@ -389,7 +390,16 @@ class SelectOperatorModal extends React.Component { ...@@ -389,7 +390,16 @@ class SelectOperatorModal extends React.Component {
return ( return (
<div className='course-info'> <div className='course-info'>
{/* 上传了封面的话就用上传的封面, 没有的话就取视频的第一帧 */} {/* 上传了封面的话就用上传的封面, 没有的话就取视频的第一帧 */}
<img className='course-cover' src={coverUrl || `${scheduleVideoUrl}?x-oss-process=video/snapshot,t_0,m_fast`} alt='' /> <img
className='course-cover'
src={
coverUrl || videoCourseDivision === 'internal'
? `${scheduleVideoUrl}?x-oss-process=video/snapshot,t_0,m_fast`
: 'https://image.xiaomaiketang.com/xm/mt3ZQRxGKB.png'
}
alt=''
/>
<div className='course-name'>{record.courseName}</div> <div className='course-name'>{record.courseName}</div>
</div> </div>
) )
...@@ -685,29 +695,25 @@ class SelectOperatorModal extends React.Component { ...@@ -685,29 +695,25 @@ class SelectOperatorModal extends React.Component {
<div> <div>
<Tabs <Tabs
type='line' type='line'
defaultActiveKey='video' defaultActiveKey='live'
onChange={(activeKey) => { onChange={(activeKey) => {
this.setState({ activeKey: activeKey }) this.setState({ activeKey: activeKey })
}}> }}>
<TabPane tab='视频课' key='video'> <TabPane tab='直播课' key='live'>
<Radio.Group value={videoCourseDivision} onChange={this.videoCourseDivisionChange} style={{ marginBottom: 8 }}>
<Radio.Button value='internal'>内部课程</Radio.Button>
<Radio.Button value='external'>外部课程</Radio.Button>
</Radio.Group>
<div className='search-container'> <div className='search-container'>
<Search <Search
value={videoSearchDefalt}
enterButton={<span className='icon iconfont'>&#xe832;</span>} enterButton={<span className='icon iconfont'>&#xe832;</span>}
placeholder='搜索课程名称' placeholder='搜索课程名称'
style={{ width: 200 }} style={{ width: 200 }}
onChange={(e) => { onChange={(e) => {
this.handleChangVideoCourseName(e.target.value) this.handleChangLiveCourseName(e.target.value)
}} }}
onSearch={() => { onSearch={() => {
this.handleFetchVideoDataList() this.handleFetchLiveDataList()
}} }}
/> />
</div> </div>
<div className='select-area'> <div className='select-area'>
<div className='select-box'> <div className='select-box'>
<div> <div>
...@@ -728,81 +734,77 @@ class SelectOperatorModal extends React.Component { ...@@ -728,81 +734,77 @@ class SelectOperatorModal extends React.Component {
</div> </div>
<div> <div>
<Table <Table
rowKey={(record) => record.id} rowKey={(record) => record.liveCourseId}
dataSource={videoDataSource[videoCourseDivision]} dataSource={liveDataSource}
columns={this.parseVideoColumns()} columns={this.parseLiveColumns()}
pagination={false} pagination={false}
bordered bordered
rowSelection={{ rowSelection={{
type: 'checkbox', type: 'checkbox',
selectedRowKeys: _.pluck(selectVideo[videoCourseDivision], 'id'), selectedRowKeys: _.pluck(selectLive, 'liveCourseId'),
onSelect: (record, selected) => { onSelect: (record, selected) => {
this.selectVideoList(record, selected) this.selectLiveList(record, selected)
}, },
onSelectAll: (selected, _selectedRows, changeRows) => { onSelectAll: (selected, _selectedRows, changeRows) => {
let _list = [] let _list = []
if (selected) { if (selected) {
_list = _.uniq(selectVideo[videoCourseDivision].concat(changeRows), false, (item) => item.id) _list = _.uniq(selectLive.concat(changeRows), false, (item) => item.liveCourseId)
} else { } else {
_list = _.reject(selectVideo[videoCourseDivision], (item) => _.find(changeRows, (data) => data.id === item.id)) _list = _.reject(selectLive, (item) => _.find(changeRows, (data) => data.liveCourseId === item.liveCourseId))
} }
if (_list.length + currentTaskCourseData.length + selectLive.length + selectPicture.length > 20) { if (_list.length + currentTaskCourseData.length + selectVideo.length + selectPicture.length > 20) {
message.warning('无法继续选择，一个任务最多关联20个课程') message.warning('无法继续选择，一个任务最多关联20个课程')
const extraLength = _list.length + currentTaskCourseData.length + selectLive.length + selectPicture.length - 20 const extraLength = _list.length + currentTaskCourseData.length + selectVideo.length + selectPicture.length - 20
_list.splice(_list.length - extraLength, extraLength) _list.splice(_list.length - extraLength, extraLength)
} }
this.setState({ this.setState({ selectLive: _list })
selectVideo: {
...selectVideo,
[videoCourseDivision]: _list
}
})
} }
}} }}
/> />
{videoDataSource[videoCourseDivision].length > 0 && ( {liveDataSource.length > 0 && (
<div className='box-footer'> <div className='box-footer'>
<PageControl <PageControl
current={videoQuery[videoCourseDivision].current - 1} current={liveQuery.current - 1}
pageSize={videoSize[videoCourseDivision]} pageSize={liveSize}
size='small' size='small'
total={videoTotalCount[videoCourseDivision]} total={liveTotalCount}
toPage={(page) => { toPage={(page) => {
const _query = { ...videoQuery[videoCourseDivision], current: page + 1 } const _query = { ...liveQuery, current: page + 1 }
this.setState( this.setState(
{ {
videoQuery: { liveQuery: _query
...videoQuery,
[videoCourseDivision]: _query
}
}, },
() => { () => {
this.handleFetchVideoDataList() this.handleFetchLiveDataList()
} }
) )
}} }}
onShowSizeChange={this.onShowVideoSizeChange} onShowSizeChange={this.onShowLiveSizeChange}
/> />
</div> </div>
)} )}
</div> </div>
</TabPane> </TabPane>
<TabPane tab='直播课' key='live'>
<TabPane tab='视频课' key='video'>
<Radio.Group value={videoCourseDivision} onChange={this.videoCourseDivisionChange} style={{ marginBottom: 8 }}>
<Radio.Button value='internal'>内部课程</Radio.Button>
<Radio.Button value='external'>外部课程</Radio.Button>
</Radio.Group>
<div className='search-container'> <div className='search-container'>
<Search <Search
value={videoSearchDefalt}
enterButton={<span className='icon iconfont'>&#xe832;</span>} enterButton={<span className='icon iconfont'>&#xe832;</span>}
placeholder='搜索课程名称' placeholder='搜索课程名称'
style={{ width: 200 }} style={{ width: 200 }}
onChange={(e) => { onChange={(e) => {
this.handleChangLiveCourseName(e.target.value) this.handleChangVideoCourseName(e.target.value)
}} }}
onSearch={() => { onSearch={() => {
this.handleFetchLiveDataList() this.handleFetchVideoDataList()
}} }}
/> />
</div> </div>
<div className='select-area'> <div className='select-area'>
<div className='select-box'> <div className='select-box'>
<div> <div>
...@@ -823,52 +825,61 @@ class SelectOperatorModal extends React.Component { ...@@ -823,52 +825,61 @@ class SelectOperatorModal extends React.Component {
</div> </div>
<div> <div>
<Table <Table
rowKey={(record) => record.liveCourseId} rowKey={(record) => record.id}
dataSource={liveDataSource} dataSource={videoDataSource[videoCourseDivision]}
columns={this.parseLiveColumns()} columns={this.parseVideoColumns()}
pagination={false} pagination={false}
bordered bordered
rowSelection={{ rowSelection={{
type: 'checkbox', type: 'checkbox',
selectedRowKeys: _.pluck(selectLive, 'liveCourseId'), selectedRowKeys: _.pluck(selectVideo[videoCourseDivision], 'id'),
onSelect: (record, selected) => { onSelect: (record, selected) => {
this.selectLiveList(record, selected) this.selectVideoList(record, selected)
}, },
onSelectAll: (selected, _selectedRows, changeRows) => { onSelectAll: (selected, _selectedRows, changeRows) => {
let _list = [] let _list = []
if (selected) { if (selected) {
_list = _.uniq(selectLive.concat(changeRows), false, (item) => item.liveCourseId) _list = _.uniq(selectVideo[videoCourseDivision].concat(changeRows), false, (item) => item.id)
} else { } else {
_list = _.reject(selectLive, (item) => _.find(changeRows, (data) => data.liveCourseId === item.liveCourseId)) _list = _.reject(selectVideo[videoCourseDivision], (item) => _.find(changeRows, (data) => data.id === item.id))
} }
if (_list.length + currentTaskCourseData.length + selectVideo.length + selectPicture.length > 20) { if (_list.length + currentTaskCourseData.length + selectLive.length + selectPicture.length > 20) {
message.warning('无法继续选择，一个任务最多关联20个课程') message.warning('无法继续选择，一个任务最多关联20个课程')
const extraLength = _list.length + currentTaskCourseData.length + selectVideo.length + selectPicture.length - 20 const extraLength = _list.length + currentTaskCourseData.length + selectLive.length + selectPicture.length - 20
_list.splice(_list.length - extraLength, extraLength) _list.splice(_list.length - extraLength, extraLength)
} }
this.setState({ selectLive: _list }) this.setState({
selectVideo: {
...selectVideo,
[videoCourseDivision]: _list
}
})
} }
}} }}
/> />
{liveDataSource.length > 0 && ( {videoDataSource[videoCourseDivision].length > 0 && (
<div className='box-footer'> <div className='box-footer'>
<PageControl <PageControl
current={liveQuery.current - 1} current={videoQuery[videoCourseDivision].current - 1}
pageSize={liveSize} pageSize={videoSize[videoCourseDivision]}
size='small' size='small'
total={liveTotalCount} total={videoTotalCount[videoCourseDivision]}
toPage={(page) => { toPage={(page) => {
const _query = { ...liveQuery, current: page + 1 } const _query = { ...videoQuery[videoCourseDivision], current: page + 1 }
this.setState( this.setState(
{ {
liveQuery: _query videoQuery: {
...videoQuery,
[videoCourseDivision]: _query
}
}, },
() => { () => {
this.handleFetchLiveDataList() this.handleFetchVideoDataList()
} }
) )
}} }}
onShowSizeChange={this.onShowLiveSizeChange} onShowSizeChange={this.onShowVideoSizeChange}
/> />
</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