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 {
return (
<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>
<When condition={record.courseName.length > 25}>
<Tooltip title={record.courseName}>
......
src/modules/course-manage/video-course/index.jsx
......@@ -2,7 +2,7 @@
* @Author: 吴文洁
* @Date: 2020-08-05 10:08:06
* @LastEditors: fusanqiasng
* @LastEditTime: 2021-05-25 12:00:56
* @LastEditTime: 2021-05-25 18:08:10
* @Description: 云课堂-视频课入口页面
* @Copyright: 杭州杰竞科技有限公司 版权所有
*/
......@@ -51,6 +51,12 @@ class VideoCourse extends React.Component {
CourseService.videoSchedulePage(query).then((res) => {
const { result = {} } = res || {}
const { records = [], total = 0 } = result
if (query.size * (query.current - 1) >= Number(total)) {
this.handleFetchScheduleList({
current: 1
})
return
}
this.setState({
dataSource: records,
totalCount: Number(total)
......@@ -58,9 +64,14 @@ class VideoCourse extends React.Component {
})
}
currenTabChange = (currentTabKey) => {
const { query } = this.state
this.setState(
{
currentTabKey
currentTabKey,
query: {
...query,
current: 1
}
},
() => {
this.handleFetchScheduleList()
......
src/modules/plan-manage/modal/relatedCourseModal.jsx
......@@ -369,6 +369,7 @@ class SelectOperatorModal extends React.Component {
// 请求表头
parseVideoColumns = () => {
const { videoCourseDivision } = this.state
const columns = [
{
title: (
......@@ -389,7 +390,16 @@ class SelectOperatorModal extends React.Component {
return (
<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>
)
......@@ -685,29 +695,25 @@ class SelectOperatorModal extends React.Component {
<div>
<Tabs
type='line'
defaultActiveKey='video'
defaultActiveKey='live'
onChange={(activeKey) => {
this.setState({ activeKey: activeKey })
}}>
<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>
<TabPane tab='直播课' key='live'>
<div className='search-container'>
<Search
value={videoSearchDefalt}
enterButton={<span className='icon iconfont'>&#xe832;</span>}
placeholder='搜索课程名称'
style={{ width: 200 }}
onChange={(e) => {
this.handleChangVideoCourseName(e.target.value)
this.handleChangLiveCourseName(e.target.value)
}}
onSearch={() => {
this.handleFetchVideoDataList()
this.handleFetchLiveDataList()
}}
/>
</div>
<div className='select-area'>
<div className='select-box'>
<div>
......@@ -728,81 +734,77 @@ class SelectOperatorModal extends React.Component {
</div>
<div>
<Table
rowKey={(record) => record.id}
dataSource={videoDataSource[videoCourseDivision]}
columns={this.parseVideoColumns()}
rowKey={(record) => record.liveCourseId}
dataSource={liveDataSource}
columns={this.parseLiveColumns()}
pagination={false}
bordered
rowSelection={{
type: 'checkbox',
selectedRowKeys: _.pluck(selectVideo[videoCourseDivision], 'id'),
selectedRowKeys: _.pluck(selectLive, 'liveCourseId'),
onSelect: (record, selected) => {
this.selectVideoList(record, selected)
this.selectLiveList(record, selected)
},
onSelectAll: (selected, _selectedRows, changeRows) => {
let _list = []
if (selected) {
_list = _.uniq(selectVideo[videoCourseDivision].concat(changeRows), false, (item) => item.id)
_list = _.uniq(selectLive.concat(changeRows), false, (item) => item.liveCourseId)
} 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个课程')
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)
}
this.setState({
selectVideo: {
...selectVideo,
[videoCourseDivision]: _list
}
})
this.setState({ selectLive: _list })
}
}}
/>
{videoDataSource[videoCourseDivision].length > 0 && (
{liveDataSource.length > 0 && (
<div className='box-footer'>
<PageControl
current={videoQuery[videoCourseDivision].current - 1}
pageSize={videoSize[videoCourseDivision]}
current={liveQuery.current - 1}
pageSize={liveSize}
size='small'
total={videoTotalCount[videoCourseDivision]}
total={liveTotalCount}
toPage={(page) => {
const _query = { ...videoQuery[videoCourseDivision], current: page + 1 }
const _query = { ...liveQuery, current: page + 1 }
this.setState(
{
videoQuery: {
...videoQuery,
[videoCourseDivision]: _query
}
liveQuery: _query
},
() => {
this.handleFetchVideoDataList()
this.handleFetchLiveDataList()
}
)
}}
onShowSizeChange={this.onShowVideoSizeChange}
onShowSizeChange={this.onShowLiveSizeChange}
/>
</div>
)}
</div>
</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'>
<Search
value={videoSearchDefalt}
enterButton={<span className='icon iconfont'>&#xe832;</span>}
placeholder='搜索课程名称'
style={{ width: 200 }}
onChange={(e) => {
this.handleChangLiveCourseName(e.target.value)
this.handleChangVideoCourseName(e.target.value)
}}
onSearch={() => {
this.handleFetchLiveDataList()
this.handleFetchVideoDataList()
}}
/>
</div>
<div className='select-area'>
<div className='select-box'>
<div>
......@@ -823,52 +825,61 @@ class SelectOperatorModal extends React.Component {
</div>
<div>
<Table
rowKey={(record) => record.liveCourseId}
dataSource={liveDataSource}
columns={this.parseLiveColumns()}
rowKey={(record) => record.id}
dataSource={videoDataSource[videoCourseDivision]}
columns={this.parseVideoColumns()}
pagination={false}
bordered
rowSelection={{
type: 'checkbox',
selectedRowKeys: _.pluck(selectLive, 'liveCourseId'),
selectedRowKeys: _.pluck(selectVideo[videoCourseDivision], 'id'),
onSelect: (record, selected) => {
this.selectLiveList(record, selected)
this.selectVideoList(record, selected)
},
onSelectAll: (selected, _selectedRows, changeRows) => {
let _list = []
if (selected) {
_list = _.uniq(selectLive.concat(changeRows), false, (item) => item.liveCourseId)
_list = _.uniq(selectVideo[videoCourseDivision].concat(changeRows), false, (item) => item.id)
} 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个课程')
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)
}
this.setState({ selectLive: _list })
this.setState({
selectVideo: {
...selectVideo,
[videoCourseDivision]: _list
}
})
}
}}
/>
{liveDataSource.length > 0 && (
{videoDataSource[videoCourseDivision].length > 0 && (
<div className='box-footer'>
<PageControl
current={liveQuery.current - 1}
pageSize={liveSize}
current={videoQuery[videoCourseDivision].current - 1}
pageSize={videoSize[videoCourseDivision]}
size='small'
total={liveTotalCount}
total={videoTotalCount[videoCourseDivision]}
toPage={(page) => {
const _query = { ...liveQuery, current: page + 1 }
const _query = { ...videoQuery[videoCourseDivision], current: page + 1 }
this.setState(
{
liveQuery: _query
videoQuery: {
...videoQuery,
[videoCourseDivision]: _query
}
},
() => {
this.handleFetchLiveDataList()
this.handleFetchVideoDataList()
}
)
}}
onShowSizeChange={this.onShowLiveSizeChange}
onShowSizeChange={this.onShowVideoSizeChange}
/>
</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