Skip to content

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

feat:课程管理添加课程分类组件

parent 831c59da
Showing with 414 additions and 555 deletions
src/modules/common/CourseCatalogSelect.jsx
import React, { useEffect, useState } from 'react' import React, { useEffect, useState } from 'react'
import { TreeSelect } from 'antd' import { TreeSelect } from 'antd'
import User from '@/common/js/user'
import Service from '@/common/js/service'
function CourseCatalogSelect(props) { function CourseCatalogSelect(props) {
let { let {
courseCatalogList = [], showSearch = true,
showSearch = false,
value = '', value = '',
treeNodeFilterProp = 'title', treeNodeFilterProp = 'title',
style = { width: 240 }, style = { width: 240 },
...@@ -12,20 +13,23 @@ function CourseCatalogSelect(props) { ...@@ -12,20 +13,23 @@ function CourseCatalogSelect(props) {
allowClear = true, allowClear = true,
onChange = () => {}, onChange = () => {},
} = props } = props
let [treeData, setTreeData] = useState([]) let [courseCatalogList, setCourseCatalogList] = useState([])
let [defaultValue, setDefaultValue] = useState(null)
console.log('aaaaaaa', courseCatalogList, value)
useEffect(() => { useEffect(() => {
console.log('useEffect', courseCatalogList, value) //获取分类列表
function getCourseCatalogList() {
Service.Hades('public/hades/queryCategoryTree', { source: 0, tenantId: User.getStoreId(), count: false, userId: User.getUserId() }).then((res) => {
const { categoryList = [] } = res.result
let list = renderTreeNodes(categoryList)
setCourseCatalogList(list)
})
}
function renderTreeNodes(list) { function renderTreeNodes(list) {
let newTreeData = list.map((item) => { let newTreeData = list.map((item) => {
item.title = item.categoryName item.title = item.categoryName
item.value = item.id item.value = item.id
item.key = item.id item.key = item.id
console.log(value, item.value, value === item.value, 'item.categoryName') console.log(value, item.value, value === item.value, 'item.categoryName')
if (value === item.value) {
setDefaultValue(item.title)
}
if (item.sonCategoryList) { if (item.sonCategoryList) {
item.children = renderTreeNodes(item.sonCategoryList) item.children = renderTreeNodes(item.sonCategoryList)
} }
...@@ -33,22 +37,20 @@ function CourseCatalogSelect(props) { ...@@ -33,22 +37,20 @@ function CourseCatalogSelect(props) {
}) })
return newTreeData return newTreeData
} }
let categoryList = renderTreeNodes(courseCatalogList) getCourseCatalogList()
setTreeData(categoryList) }, [])
}, [props.value])
return ( return (
<TreeSelect <TreeSelect
defaultValue={[defaultValue]}
treeNodeLabelProp='categoryName' treeNodeLabelProp='categoryName'
showSearch={showSearch} showSearch={showSearch}
treeNodeFilterProp={treeNodeFilterProp} treeNodeFilterProp={treeNodeFilterProp}
style={style} style={style}
value={value}
dropdownStyle={dropdownStyle} dropdownStyle={dropdownStyle}
treeData={treeData} treeData={courseCatalogList}
placeholder={placeholder} placeholder={placeholder}
allowClear={allowClear} allowClear={allowClear}
// value={value}
treeDefaultExpandAll treeDefaultExpandAll
onChange={(value, label) => { onChange={(value, label) => {
onChange(value, label) onChange(value, label)
......
src/modules/course-manage/components/AddLiveBasic.jsx
...@@ -6,25 +6,21 @@ ...@@ -6,25 +6,21 @@
* @Description: 新建/编辑直播课-基本信息 * @Description: 新建/编辑直播课-基本信息
*/ */
import React from 'react'; import React from 'react'
import { Input, Button, message, Cascader, Modal } from 'antd'; import { Input, Button, message, Cascader } from 'antd'
import UploadOss from '@/core/upload'; import { CourseCatalogSelect } from '@/modules/common'
import { ImgCutModalNew } from '@/components'; import StoreService from '@/domains/store-domain/storeService'
import StoreService from '@/domains/store-domain/storeService'; import SelectPrepareFileModal from '@/modules/prepare-lesson/modal/SelectPrepareFileModal'
import SelectPrepareFileModal from '@/modules/prepare-lesson/modal/SelectPrepareFileModal'; import Upload from '@/core/upload'
import Upload from '@/core/upload';
import Cropper from 'react-cropper';
import ImgClipModal from '@/components/ImgClipModal' import ImgClipModal from '@/components/ImgClipModal'
import 'cropperjs/dist/cropper.css'; import 'cropperjs/dist/cropper.css'
import './AddLiveBasic.less'; import './AddLiveBasic.less'
const defaultCover = 'https://image.xiaomaiketang.com/xm/Yip2YtFDwH.png'; const defaultCover = 'https://image.xiaomaiketang.com/xm/Yip2YtFDwH.png'
const fieldNames = { label: 'categoryName', value: 'id', children: 'sonCategoryList' }; const fieldNames = { label: 'categoryName', value: 'id', children: 'sonCategoryList' }
let cutFlag = false;
let timer = null;
class AddLiveBasic extends React.Component { class AddLiveBasic extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props)
this.state = { this.state = {
imageFile: null, imageFile: null,
showCutModal: false, showCutModal: false,
...@@ -32,63 +28,50 @@ class AddLiveBasic extends React.Component { ...@@ -32,63 +28,50 @@ class AddLiveBasic extends React.Component {
showSelectFileModal: false, showSelectFileModal: false,
cutImageBlob: null, cutImageBlob: null,
hasImgReady: false, // 图片是否上传成功 hasImgReady: false, // 图片是否上传成功
cropperInstace:null cropperInstace: null,
} }
} }
componentWillUnmount() {} componentWillUnmount() {}
componentDidMount() { componentDidMount() {
this.getCourseCatalogList(); this.getCourseCatalogList()
} }
getCourseCatalogList = () => { getCourseCatalogList = () => {
StoreService.getCourseCatalogList({ current: 1, size: 1000 }).then((res) => { StoreService.getCourseCatalogList({ current: 1, size: 1000 }).then((res) => {
this.setState({ this.setState({
courseCatalogList: res.result.records, courseCatalogList: res.result.records,
}); })
}); })
} }
// 使用默认封面图 // 使用默认封面图
handleResetCoverUrl = () => { handleResetCoverUrl = () => {
const { const {
data: { coverUrl }, data: { coverUrl },
} = this.props; } = this.props
const isDefaultCover = coverUrl === defaultCover; const isDefaultCover = coverUrl === defaultCover
// 如果已经是默认图的话，不做任何任何处理 // 如果已经是默认图的话，不做任何任何处理
if (isDefaultCover) return; if (isDefaultCover) return
message.success('已替换为默认图'); message.success('已替换为默认图')
this.props.onChange('coverUrl', defaultCover); this.props.onChange('coverUrl', defaultCover)
setTimeout(() => { setTimeout(() => {
this.props.onChange('coverId', null); this.props.onChange('coverId', null)
}, 1000); }, 1000)
}; }
catalogChange = (value) => { handleChangeCatalogList = (value) => {
const changeValueLength = value.length; this.props.onChange('categoryId', value)
switch (changeValueLength) {
case 1:
this.props.onChange('categoryId', value[0]);
break;
case 2:
this.props.onChange('categoryId', value[1]);
break;
default:
this.props.onChange('categoryId', null);
break;
} }
};
handleSelectCover = (file) => { handleSelectCover = (file) => {
this.setState({ this.setState({
visible: true, visible: true,
imageFile:file imageFile: file,
}); })
} }
//获取resourceId //获取resourceId
getSignature = (blob, fileName) => { getSignature = (blob) => {
const { choosedBannerId } = this.state;
Upload.uploadBlobToOSS(blob, 'cover' + new Date().valueOf(), null, 'signInfo').then((signInfo) => { Upload.uploadBlobToOSS(blob, 'cover' + new Date().valueOf(), null, 'signInfo').then((signInfo) => {
this.setState( this.setState(
{ {
...@@ -97,26 +80,25 @@ class AddLiveBasic extends React.Component { ...@@ -97,26 +80,25 @@ class AddLiveBasic extends React.Component {
visible: false, visible: false,
}, },
() => this.updateCover() () => this.updateCover()
); )
}); })
}; }
updateCover = () =>{ updateCover = () => {
const {coverClicpPath,coverId} = this.state const { coverClicpPath, coverId } = this.state
this.setState({ this.setState({
showSelectFileModal: false, showSelectFileModal: false,
}); })
this.props.onChange('coverUrl', coverClicpPath); this.props.onChange('coverUrl', coverClicpPath)
setTimeout(() => { setTimeout(() => {
this.props.onChange('coverId', coverId); this.props.onChange('coverId', coverId)
}, 1000); }, 1000)
}; }
render() { render() {
const { showCutModal, imageFile, courseCatalogList, showSelectFileModal, visible, cutImageBlob, hasImgReady } = this.state; const { imageFile, showSelectFileModal, visible } = this.state
const { data, pageType, isEdit } = this.props; const { data } = this.props
const { courseName, categoryName, coverUrl } = data; const { courseName, coverUrl, categoryId } = data
const fileName = '';
// 当前是否使用的是默认图片 // 当前是否使用的是默认图片
const isDefaultCover = coverUrl === defaultCover; const isDefaultCover = coverUrl === defaultCover
return ( return (
<div className='add-live__basic-info'> <div className='add-live__basic-info'>
<div className='course-name'> <div className='course-name'>
...@@ -129,7 +111,7 @@ class AddLiveBasic extends React.Component { ...@@ -129,7 +111,7 @@ class AddLiveBasic extends React.Component {
maxLength={40} maxLength={40}
style={{ width: 240 }} style={{ width: 240 }}
onChange={(e) => { onChange={(e) => {
this.props.onChange('courseName', e.target.value); this.props.onChange('courseName', e.target.value)
}} }}
/> />
</div> </div>
...@@ -142,7 +124,7 @@ class AddLiveBasic extends React.Component { ...@@ -142,7 +124,7 @@ class AddLiveBasic extends React.Component {
onClick={() => { onClick={() => {
this.setState({ this.setState({
showSelectFileModal: true, showSelectFileModal: true,
}); })
}}> }}>
上传图片 上传图片
</Button> </Button>
...@@ -161,40 +143,14 @@ class AddLiveBasic extends React.Component { ...@@ -161,40 +143,14 @@ class AddLiveBasic extends React.Component {
<span className='label'> <span className='label'>
<span className='require'>*</span>课程分类： <span className='require'>*</span>课程分类：
</span> </span>
{pageType === 'add' && ( <CourseCatalogSelect
<Cascader value={categoryId}
options={courseCatalogList} onChange={(value, label) => {
displayRender={(label) => label.join('-')} this.handleChangeCatalogList(value, label)
fieldNames={fieldNames} }}
onChange={this.catalogChange}
style={{ width: 240 }}
placeholder='请选择课程分类'
suffixIcon={
<span className='icon iconfont' style={{ fontSize: '12px', color: '#BFBFBF' }}>
&#xe835;
</span>
}
/>
)}
{pageType === 'edit' && categoryName && (
<Cascader
disabled={!isEdit ? true : false}
defaultValue={[categoryName]}
options={courseCatalogList}
displayRender={(label) => label.join('-')}
fieldNames={fieldNames}
onChange={this.catalogChange}
style={{ width: 240 }}
placeholder='请选择课程分类'
suffixIcon={
<span className='icon iconfont' style={{ fontSize: '12px', color: '#BFBFBF' }}>
&#xe835;
</span>
}
/> />
)}
</div> </div>
{showSelectFileModal && {showSelectFileModal && (
<SelectPrepareFileModal <SelectPrepareFileModal
key='basic' key='basic'
operateType='select' operateType='select'
...@@ -204,17 +160,24 @@ class AddLiveBasic extends React.Component { ...@@ -204,17 +160,24 @@ class AddLiveBasic extends React.Component {
tooltip='支持文件类型：jpg、jpeg、png' tooltip='支持文件类型：jpg、jpeg、png'
isOpen={showSelectFileModal} isOpen={showSelectFileModal}
onClose={() => { onClose={() => {
this.setState({ showSelectFileModal: false }); this.setState({ showSelectFileModal: false })
}} }}
onSelect={this.handleSelectCover} onSelect={this.handleSelectCover}
/> />
} )}
{ visible && {visible && (
<ImgClipModal visible={visible} imgUrl={imageFile.ossUrl} onConfirm={this.getSignature} onClose={()=>{this.setState({ visible: false });}}/> <ImgClipModal
} visible={visible}
imgUrl={imageFile.ossUrl}
onConfirm={this.getSignature}
onClose={() => {
this.setState({ visible: false })
}}
/>
)}
</div> </div>
); )
} }
} }
export default AddLiveBasic; export default AddLiveBasic
src/modules/course-manage/graphics-course/AddGraphicsCourse.jsx
...@@ -7,44 +7,35 @@ ...@@ -7,44 +7,35 @@
* @Copyright: 杭州杰竞科技有限公司 版权所有 * @Copyright: 杭州杰竞科技有限公司 版权所有
*/ */
import React from 'react'; import React from 'react'
import { Button, Input, Radio, message, Modal, Cascader } from 'antd'; import { Button, Input, message, Modal } from 'antd'
import $ from 'jquery'; import $ from 'jquery'
import moment from 'moment'; import moment from 'moment'
import { DISK_MAP, FileTypeIcon, FileVerifyMap } from '@/common/constants/academic/lessonEnum'; import { CourseCatalogSelect } from '@/modules/common'
import { ImgCutModalNew } from '@/components'; import ShowTips from '@/components/ShowTips'
import ShowTips from '@/components/ShowTips'; import Breadcrumbs from '@/components/Breadcrumbs'
import Breadcrumbs from '@/components/Breadcrumbs'; import AddGraphicsIntro from './components/AddGraphicsIntro'
import AddGraphicsIntro from './components/AddGraphicsIntro'; import SelectStudent from '../modal/select-student'
import SelectStudent from '../modal/select-student'; import SelectPrepareFileModal from '../../prepare-lesson/modal/SelectPrepareFileModal'
import SelectPrepareFileModal from '../../prepare-lesson/modal/SelectPrepareFileModal'; import PreviewGraphicsModal from '../modal/PreviewGraphicsModal'
import PreviewGraphicsModal from '../modal/PreviewGraphicsModal'; import Service from '@/common/js/service'
import StoreService from '@/domains/store-domain/storeService'; import { randomString } from '@/domains/basic-domain/utils'
import Service from '@/common/js/service'; import User from '@/common/js/user'
import { randomString } from '@/domains/basic-domain/utils'; import _ from 'underscore'
import User from '@/common/js/user'; import Upload from '@/core/upload'
import _ from 'underscore';
import Upload from '@/core/upload';
import ImgClipModal from '@/components/ImgClipModal' import ImgClipModal from '@/components/ImgClipModal'
import './AddGraphicsCourse.less'; import './AddGraphicsCourse.less'
import Bus from '@/core/bus'; import Bus from '@/core/bus'
const EDIT_BOX_KEY = Math.random();
const fieldNames = { label: 'categoryName', value: 'id', children: 'sonCategoryList' };
//添加课程时课程默认的一些值 //添加课程时课程默认的一些值
const defaultShelfState = 'YES'; const defaultShelfState = 'YES'
const whetherVisitorsJoin = 'NO'; const defaultCover = 'https://image.xiaomaiketang.com/xm/wFnpZtp2yB.png'
const defaultCover = 'https://image.xiaomaiketang.com/xm/wFnpZtp2yB.png';
let cutFlag = false;
class AddGraphicsCourse extends React.Component { class AddGraphicsCourse extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props)
const id = getParameterByName('id')
const id = getParameterByName('id'); const pageType = getParameterByName('type')
const pageType = getParameterByName('type');
this.state = { this.state = {
id, // 图文课ID,编辑的时候从URL上带过来 id, // 图文课ID,编辑的时候从URL上带过来
pageType, // 页面类型: add->新建 edit->编辑 pageType, // 页面类型: add->新建 edit->编辑
...@@ -61,103 +52,72 @@ class AddGraphicsCourse extends React.Component { ...@@ -61,103 +52,72 @@ class AddGraphicsCourse extends React.Component {
showCutModal: false, // 是否显示截图弹窗 showCutModal: false, // 是否显示截图弹窗
showSelectVideoModal: false, showSelectVideoModal: false,
studentModal: false, studentModal: false,
categoryName: null, //分类名称 categoryName: '',
courseCatalogList: [], //分类列表
categoryId: null, //分类的Id值 categoryId: null, //分类的Id值
whetherVisitorsJoin: 'NO', // 是否允许游客加入 whetherVisitorsJoin: 'NO', // 是否允许游客加入
}; }
} }
componentWillMount() { componentWillMount() {
const { id, pageType } = this.state; const { id, pageType } = this.state
this.getCourseCatalogList();
if (pageType === 'edit') { if (pageType === 'edit') {
this.handleFetchScheudleDetail(id); this.handleFetchScheudleDetail(id)
} }
Bus.bind('editorLimit', (editorTextLength, editorType) => { Bus.bind('editorLimit', (editorTextLength, editorType) => {
this.setState({ this.setState({
[editorType]: editorTextLength, [editorType]: editorTextLength,
}); })
}); })
} }
initBus = () => { initBus = () => {
Bus.bind('graphicsEditorImage', this.uploadImage); Bus.bind('graphicsEditorImage', this.uploadImage)
Bus.bind('graphicsEditorVideo', this.uploadVideo); Bus.bind('graphicsEditorVideo', this.uploadVideo)
}; }
removeBus = () => { removeBus = () => {
Bus.unbind('graphicsEditorImage', this.uploadImage); Bus.unbind('graphicsEditorImage', this.uploadImage)
Bus.unbind('graphicsEditorVideo', this.uploadVideo); Bus.unbind('graphicsEditorVideo', this.uploadVideo)
}; }
uploadImage = () => { uploadImage = () => {
this.setState({ showSelectImageModal: true }); this.setState({ showSelectImageModal: true })
}; }
uploadVideo = () => { uploadVideo = () => {
this.setState({ showSelectVideoModal: true }); this.setState({ showSelectVideoModal: true })
};
//获取分类列表
getCourseCatalogList = () => {
StoreService.getCourseCatalogList({ current: 1, size: 1000 }).then((res) => {
this.setState({
courseCatalogList: res.result.records,
});
});
};
catalogChange = (value, options) => {
const changeValueLength = value.length;
switch (changeValueLength) {
case 1:
this.setState({ categoryId: value[0], categoryName: options[0].categoryName });
break;
case 2:
this.setState({ categoryId: value[1], categoryName: `${options[0].categoryName}-${options[1].categoryName}` });
break;
default:
this.setState({ categoryId: null, categoryName: '' });
break;
} }
};
// 获取图文课详情 // 获取图文课详情
handleFetchScheudleDetail = (courseId) => { handleFetchScheudleDetail = (courseId) => {
Service.Hades('public/hades/mediaCourseDetail', { Service.Hades('public/hades/mediaCourseDetail', {
courseId, courseId,
}).then((res) => { }).then((res) => {
const { result = {} } = res || {}; const { result = {} } = res || {}
const { courseName, shelfState, whetherVisitorsJoin, courseMediaVOS, categoryOneName, categoryTwoName, categoryId } = result; const { courseName, shelfState, whetherVisitorsJoin, courseMediaVOS, categoryId } = result
let coverId; let coverId
let coverUrl = this.state.coverUrl; let coverUrl = this.state.coverUrl
let hasIntro = false; let hasIntro = false
courseMediaVOS.map((item) => { courseMediaVOS.map((item) => {
switch (item.contentType) { switch (item.contentType) {
case 'COVER': case 'COVER':
coverId = item.mediaContent; coverId = item.mediaContent
coverUrl = item.mediaUrl; coverUrl = item.mediaUrl
break; break
case 'SCHEDULE': case 'SCHEDULE':
this.getTextDetail('courseMedia', item.mediaUrl); this.getTextDetail('courseMedia', item.mediaUrl)
break; break
case 'INTRO': case 'INTRO':
hasIntro = true; hasIntro = true
this.getTextDetail('introduce', item.mediaUrl); this.getTextDetail('introduce', item.mediaUrl)
break; break
default: default:
break; break
} }
return item; return item
}); })
let categoryName;
if (categoryTwoName) {
categoryName = `${categoryOneName}-${categoryTwoName}`;
} else {
categoryName = `${categoryOneName}`;
}
this.setState({ this.setState({
loadintroduce: !hasIntro, loadintroduce: !hasIntro,
coverId, coverId,
...@@ -165,11 +125,10 @@ class AddGraphicsCourse extends React.Component { ...@@ -165,11 +125,10 @@ class AddGraphicsCourse extends React.Component {
courseName, courseName,
shelfState, shelfState,
whetherVisitorsJoin, whetherVisitorsJoin,
categoryName,
categoryId, categoryId,
}); })
}); })
}; }
getTextDetail = (key, url) => { getTextDetail = (key, url) => {
$.ajax({ $.ajax({
...@@ -178,13 +137,13 @@ class AddGraphicsCourse extends React.Component { ...@@ -178,13 +137,13 @@ class AddGraphicsCourse extends React.Component {
url, url,
contentType: 'application/x-www-form-urlencoded; charset=UTF-8', contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
success: (res) => { success: (res) => {
this.setState({ [key]: res, [`load${key}`]: true }); this.setState({ [key]: res, [`load${key}`]: true })
}, },
}); })
}; }
handleGoBack = () => { handleGoBack = () => {
const { coverId, videoName, videoDuration, courseName, courseMediaId, categoryId, shelfState, whetherVisitorsJoin } = this.state; const { coverId, videoName, videoDuration, courseName, courseMediaId, categoryId, shelfState, whetherVisitorsJoin } = this.state
if ( if (
videoName || videoName ||
videoDuration || videoDuration ||
...@@ -204,32 +163,28 @@ class AddGraphicsCourse extends React.Component { ...@@ -204,32 +163,28 @@ class AddGraphicsCourse extends React.Component {
onOk: () => { onOk: () => {
window.RCHistory.push({ window.RCHistory.push({
pathname: `/graphics-course`, pathname: `/graphics-course`,
}); })
}, },
}); })
} else { } else {
window.RCHistory.push({ window.RCHistory.push({
pathname: `/graphics-course`, pathname: `/graphics-course`,
}); })
}
} }
};
// 修改表单 // 修改表单
handleChangeForm = (field, value, coverUrl) => { handleChangeForm = (field, value, coverUrl) => {
this.setState({ this.setState({
[field]: value, [field]: value,
coverUrl: coverUrl ? coverUrl : this.state.coverUrl, coverUrl: coverUrl ? coverUrl : this.state.coverUrl,
}); })
}; }
// 显示选择学员弹窗 // 显示选择学员弹窗
handleShowSelectStuModal = () => { handleShowSelectStuModal = () => {
this.setState({ studentModal: true }); this.setState({ studentModal: true })
const { studentList, selectedStuList } = this.state
const { studentList, selectedStuList } = this.state;
// const _studentList = _.map(studentList, (item) => {
// return item.studentId
// })
const studentModal = ( const studentModal = (
<SelectStudent <SelectStudent
showTabs={true} showTabs={true}
...@@ -240,36 +195,40 @@ class AddGraphicsCourse extends React.Component { ...@@ -240,36 +195,40 @@ class AddGraphicsCourse extends React.Component {
close={() => { close={() => {
this.setState({ this.setState({
studentModal: null, studentModal: null,
}); })
}} }}
/> />
); )
this.setState({ studentModal }); this.setState({ studentModal })
}; }
handleChangeCatalogList = (value, label) => {
this.setState({ categoryId: value, categoryName: label[0] })
}
handleSelectStudent = (studentIds) => { handleSelectStudent = (studentIds) => {
let studentList = []; let studentList = []
_.each(studentIds, (item) => { _.each(studentIds, (item) => {
studentList.push({ studentId: item }); studentList.push({ studentId: item })
}); })
// this.setState({ studentModal: null }); // this.setState({ studentModal: null });
this.setState({ studentList }); this.setState({ studentList })
this.setState({ studentModal: false }); this.setState({ studentModal: false })
}; }
// 显示预览弹窗 // 显示预览弹窗
handleShowPreviewModal = () => { handleShowPreviewModal = () => {
const { coverUrl, courseName, courseMedia, introduce, categoryName } = this.state; const { coverUrl, courseName, courseMedia, introduce, categoryName } = this.state
const courseBasinInfo = { const courseBasinInfo = {
coverUrl, coverUrl,
courseName, courseName,
categoryName, categoryName,
}; }
const courseIntroInfo = { const courseIntroInfo = {
courseMedia, courseMedia,
introduce, introduce,
}; }
const previewGraphicsModal = ( const previewGraphicsModal = (
<PreviewGraphicsModal <PreviewGraphicsModal
courseBasicInfo={courseBasinInfo} courseBasicInfo={courseBasinInfo}
...@@ -277,23 +236,23 @@ class AddGraphicsCourse extends React.Component { ...@@ -277,23 +236,23 @@ class AddGraphicsCourse extends React.Component {
close={() => { close={() => {
this.setState({ this.setState({
previewGraphicsModal: null, previewGraphicsModal: null,
}); })
}} }}
/> />
); )
this.setState({ previewGraphicsModal }); this.setState({ previewGraphicsModal })
}; }
handleSelectCover = (file) => { handleSelectCover = (file) => {
this.setState({ this.setState({
visible: true, visible: true,
imageFile:file imageFile: file,
}); })
}; }
//获取resourceId //获取resourceId
getSignature = (blob, fileName) => { getSignature = (blob) => {
Upload.uploadBlobToOSS(blob, 'cover' + new Date().valueOf(), null, 'signInfo').then((signInfo) => { Upload.uploadBlobToOSS(blob, 'cover' + new Date().valueOf(), null, 'signInfo').then((signInfo) => {
this.setState( this.setState(
{ {
...@@ -302,18 +261,18 @@ class AddGraphicsCourse extends React.Component { ...@@ -302,18 +261,18 @@ class AddGraphicsCourse extends React.Component {
visible: false, visible: false,
}, },
() => this.updateCover() () => this.updateCover()
); )
}); })
}; }
updateCover = () => { updateCover = () => {
const { coverClicpPath, coverId } = this.state; const { coverClicpPath, coverId } = this.state
this.setState({ this.setState({
showSelectCoverModal: false, showSelectCoverModal: false,
coverUrl: coverClicpPath, coverUrl: coverClicpPath,
coverId: coverId, coverId: coverId,
}); })
}; }
// 保存 // 保存
handleSubmit = () => { handleSubmit = () => {
...@@ -323,10 +282,10 @@ class AddGraphicsCourse extends React.Component { ...@@ -323,10 +282,10 @@ class AddGraphicsCourse extends React.Component {
title: '服务已到期', title: '服务已到期',
content: '当前企业购买的小麦企学院服务已到期，如需继续使用学院功能，请尽快续费购买', content: '当前企业购买的小麦企学院服务已到期，如需继续使用学院功能，请尽快续费购买',
okText: '我知道了', okText: '我知道了',
}); })
return; return
} }
const { id, coverId, pageType, courseName, courseMedia, introduce, categoryId, shelfState, whetherVisitorsJoin } = this.state; const { id, coverId, pageType, courseName, courseMedia, introduce, categoryId, shelfState, whetherVisitorsJoin } = this.state
const commonParams = { const commonParams = {
categoryId, categoryId,
...@@ -337,10 +296,10 @@ class AddGraphicsCourse extends React.Component { ...@@ -337,10 +296,10 @@ class AddGraphicsCourse extends React.Component {
shelfState, shelfState,
whetherVisitorsJoin, whetherVisitorsJoin,
courseType: 'PICTURE', courseType: 'PICTURE',
}; }
// 校验必填字段:课程名称, 课程图文 // 校验必填字段:课程名称, 课程图文
this.handleValidate(courseName, courseMedia, categoryId).then((res) => { this.handleValidate(courseName, courseMedia, categoryId).then((res) => {
if (!res) return; if (!res) return
Upload.uploadTextToOSS( Upload.uploadTextToOSS(
courseMedia, courseMedia,
`${randomString()}.txt`, `${randomString()}.txt`,
...@@ -355,95 +314,87 @@ class AddGraphicsCourse extends React.Component { ...@@ -355,95 +314,87 @@ class AddGraphicsCourse extends React.Component {
commonParams, commonParams,
courseMediaId, courseMediaId,
introduceId, introduceId,
}); })
}, },
() => message.warning('上传课程简介失败') () => message.warning('上传课程简介失败')
); )
}, },
() => message.warning('上传课程内容失败') () => message.warning('上传课程内容失败')
); )
}); })
}; }
submitRemote = (data) => { submitRemote = (data) => {
const { id, pageType, commonParams, courseMediaId, introduceId } = data; const { id, pageType, commonParams, courseMediaId, introduceId } = data
commonParams.courseMediaId = courseMediaId; commonParams.courseMediaId = courseMediaId
commonParams.introduceId = introduceId; commonParams.introduceId = introduceId
if (pageType === 'add') { if (pageType === 'add') {
Service.Hades('public/hades/createMediaCourse', commonParams).then((res) => { Service.Hades('public/hades/createMediaCourse', commonParams).then((res) => {
if (!res) return; if (!res) return
message.success('新建成功'); message.success('新建成功')
window.RCHistory.push({ window.RCHistory.push({
pathname: `/graphics-course`, pathname: `/graphics-course`,
}); })
}); })
} else { } else {
const editParams = { const editParams = {
courseId: id, courseId: id,
...commonParams, ...commonParams,
}; }
Service.Hades('public/hades/editMediaCourse', editParams).then((res) => { Service.Hades('public/hades/editMediaCourse', editParams).then((res) => {
if (!res) return; if (!res) return
message.success('保存成功'); message.success('保存成功')
window.RCHistory.push({ window.RCHistory.push({
pathname: `/graphics-course`, pathname: `/graphics-course`,
}); })
}); })
}
} }
};
handleValidate = (courseName, courseMedia, categoryId) => { handleValidate = (courseName, courseMedia, categoryId) => {
const { graphicsCourseIntor, graphicsCourseContent } = this.state; const { graphicsCourseIntor, graphicsCourseContent } = this.state
return new Promise((resolve) => { return new Promise((resolve) => {
if (!courseName) { if (!courseName) {
message.warning('请输入课程名称'); message.warning('请输入课程名称')
resolve(false); resolve(false)
return false; return false
} }
if (!courseMedia) { if (!courseMedia) {
message.warning('请输入课程内容'); message.warning('请输入课程内容')
resolve(false); resolve(false)
return false; return false
} }
if (!categoryId) { if (!categoryId) {
message.warning('请选择课程分类'); message.warning('请选择课程分类')
resolve(false); resolve(false)
return false; return false
} }
if (graphicsCourseContent > 1000) { if (graphicsCourseContent > 1000) {
message.warning('课程内容超过字数限定'); message.warning('课程内容超过字数限定')
resolve(false); resolve(false)
return; return
} }
if (graphicsCourseIntor > 1000) { if (graphicsCourseIntor > 1000) {
message.warning('课程简介超过字数限定'); message.warning('课程简介超过字数限定')
resolve(false); resolve(false)
return; return
} }
// const textMedia = scheduleMedia.filter((item) => item.mediaType === 'TEXT'); resolve(true)
// for (let i = 0, len = textMedia.length; i < len; i++) { })
// if (textMedia[i].mediaContentLength && textMedia[i].mediaContentLength.length > 1000) { }
// message.warning(`第${i+1}个文字简介的字数超过了1000个字`);
// resolve(false);
// return false
// }
// }
resolve(true);
});
};
// 使用默认封面图 // 使用默认封面图
handleResetCoverUrl = () => { handleResetCoverUrl = () => {
const { coverUrl } = this.state; const { coverUrl } = this.state
const isDefaultCover = coverUrl === defaultCover; const isDefaultCover = coverUrl === defaultCover
// 如果已经是默认图的话，不做任何任何处理 // 如果已经是默认图的话，不做任何任何处理
if (isDefaultCover) return; if (isDefaultCover) return
this.setState({ coverUrl: defaultCover, coverId: null }, () => { this.setState({ coverUrl: defaultCover, coverId: null }, () => {
message.success('已替换为默认图'); message.success('已替换为默认图')
}); })
}; }
render() { render() {
const { const {
...@@ -451,29 +402,20 @@ class AddGraphicsCourse extends React.Component { ...@@ -451,29 +402,20 @@ class AddGraphicsCourse extends React.Component {
pageType, pageType,
courseName, courseName,
coverUrl, coverUrl,
studentList,
courseMedia, courseMedia,
introduce, introduce,
showCutModal,
imageFile, imageFile,
videoType,
shelfState, shelfState,
categoryName,
courseCatalogList,
whetherVisitorsJoin, whetherVisitorsJoin,
loadcourseMedia, loadcourseMedia,
loadintroduce, loadintroduce,
showSelectCoverModal, showSelectCoverModal,
visible, visible,
hasImgReady, categoryId,
cutImageBlob, } = this.state
} = this.state;
// 已选择的上课学员数量 // 已选择的上课学员数量
const hasSelectedStu = studentList.length;
const courseWareIcon = FileVerifyMap[videoType] ? FileTypeIcon[FileVerifyMap[videoType].type] : FileTypeIcon[videoType];
// 当前是否使用的是默认图片 // 当前是否使用的是默认图片
const isDefaultCover = coverUrl === defaultCover; const isDefaultCover = coverUrl === defaultCover
return ( return (
<div className='page add-graphics-course-page'> <div className='page add-graphics-course-page'>
...@@ -493,34 +435,20 @@ class AddGraphicsCourse extends React.Component { ...@@ -493,34 +435,20 @@ class AddGraphicsCourse extends React.Component {
maxLength={40} maxLength={40}
style={{ width: 240 }} style={{ width: 240 }}
onChange={(e) => { onChange={(e) => {
this.handleChangeForm('courseName', e.target.value); this.handleChangeForm('courseName', e.target.value)
}} }}
/> />
</div> </div>
<div className='cover-url flex mt16'> <div className='cover-url flex mt16'>
<div className='label'>封面图：</div> <div className='label'>封面图：</div>
{/* <div className='cover-url__wrap'>
<div className='opt-btns'>
<Button
onClick={() => {
this.setState({
showSelectCoverModal: true,
});
}}>{`${pageType === 'add' && !coverUrl ? '上传' : '修改'}封面`}</Button>
<div className='tips'></div>
</div>
<div className='img-content'>
<img src={coverUrl} />
</div>
</div> */}
<div className='course-cover__wrap'> <div className='course-cover__wrap'>
<div className='opt-btns'> <div className='opt-btns'>
<Button <Button
onClick={() => { onClick={() => {
this.setState({ this.setState({
showSelectCoverModal: true, showSelectCoverModal: true,
}); })
}}> }}>
上传图片 上传图片
</Button> </Button>
...@@ -537,19 +465,11 @@ class AddGraphicsCourse extends React.Component { ...@@ -537,19 +465,11 @@ class AddGraphicsCourse extends React.Component {
</div> </div>
<div className='course-catalog required'> <div className='course-catalog required'>
<span className='label'>课程分类：</span> <span className='label'>课程分类：</span>
<Cascader <CourseCatalogSelect
value={categoryName ? [categoryName] : undefined} value={categoryId}
options={courseCatalogList} onChange={(value, label) => {
displayRender={(label) => label.join('-')} this.handleChangeCatalogList(value, label)
fieldNames={fieldNames} }}
onChange={this.catalogChange}
style={{ width: 240 }}
placeholder='请选择课程分类'
suffixIcon={
<span className='icon iconfont' style={{ fontSize: '12px', color: '#BFBFBF' }}>
&#xe835;
</span>
}
/> />
</div> </div>
<div className='intro-info mt16'> <div className='intro-info mt16'>
...@@ -587,18 +507,25 @@ class AddGraphicsCourse extends React.Component { ...@@ -587,18 +507,25 @@ class AddGraphicsCourse extends React.Component {
tooltip='支持文件类型：jpg、jpeg、png' tooltip='支持文件类型：jpg、jpeg、png'
isOpen={showSelectCoverModal} isOpen={showSelectCoverModal}
onClose={() => { onClose={() => {
this.setState({ showSelectCoverModal: false }); this.setState({ showSelectCoverModal: false })
}} }}
onSelect={this.handleSelectCover} onSelect={this.handleSelectCover}
/> />
)} )}
{ visible && {visible && (
<ImgClipModal visible={visible} imgUrl={imageFile.ossUrl} onConfirm={this.getSignature} onClose={()=>{this.setState({ visible: false });}}/> <ImgClipModal
} visible={visible}
imgUrl={imageFile.ossUrl}
onConfirm={this.getSignature}
onClose={() => {
this.setState({ visible: false })
}}
/>
)}
{this.state.previewGraphicsModal} {this.state.previewGraphicsModal}
</div> </div>
); )
} }
} }
export default AddGraphicsCourse; export default AddGraphicsCourse
src/modules/course-manage/graphics-course/components/GraphicsCourseList.jsx
...@@ -6,36 +6,36 @@ ...@@ -6,36 +6,36 @@
* @Description: 线上课-列表模块 * @Description: 线上课-列表模块
* @Copyright: 杭州杰竞科技有限公司 版权所有 * @Copyright: 杭州杰竞科技有限公司 版权所有
*/ */
import User from '@/common/js/user'; import User from '@/common/js/user'
import college from '@/common/lottie/college'; import college from '@/common/lottie/college'
import { PageControl, XMTable } from '@/components'; import { PageControl, XMTable } from '@/components'
import { LIVE_SHARE } from '@/domains/course-domain/constants'; import { LIVE_SHARE } from '@/domains/course-domain/constants'
import CourseService from '@/domains/course-domain/CourseService'; import CourseService from '@/domains/course-domain/CourseService'
import ShareLiveModal from '@/modules/course-manage/modal/ShareLiveModal'; import ShareLiveModal from '@/modules/course-manage/modal/ShareLiveModal'
import { Dropdown, message, Modal, Switch, Tooltip } from 'antd'; import { Dropdown, message, Modal, Switch, Tooltip } from 'antd'
import React from 'react'; import React from 'react'
import RelatedPlanModal from '../../modal/RelatedPlanModal'; import RelatedPlanModal from '../../modal/RelatedPlanModal'
import WatchDataModal from '../modal/WatchDataModal'; import WatchDataModal from '../modal/WatchDataModal'
import './GraphicsCourseList.less'; import './GraphicsCourseList.less'
const defaultCoverUrl = 'https://image.xiaomaiketang.com/xm/wFnpZtp2yB.png'; const defaultCoverUrl = 'https://image.xiaomaiketang.com/xm/wFnpZtp2yB.png'
class GraphicsCourseList extends React.Component { class GraphicsCourseList extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props)
this.state = { this.state = {
id: '', // 视频课ID id: '', // 视频课ID
studentIds: [], studentIds: [],
RelatedPlanModalVisible: false, RelatedPlanModalVisible: false,
selectPlanList: {}, selectPlanList: {},
}; }
} }
componentDidMount() { componentDidMount() {
const videoCourseItem = localStorage.getItem('videoCourseItem'); const videoCourseItem = localStorage.getItem('videoCourseItem')
if (videoCourseItem) { if (videoCourseItem) {
const _videoCourseItem = JSON.parse(videoCourseItem); const _videoCourseItem = JSON.parse(videoCourseItem)
this.handleShowShareModal(_videoCourseItem, true); this.handleShowShareModal(_videoCourseItem, true)
} }
} }
...@@ -48,24 +48,24 @@ class GraphicsCourseList extends React.Component { ...@@ -48,24 +48,24 @@ class GraphicsCourseList extends React.Component {
close={() => { close={() => {
this.setState({ this.setState({
watchDataModal: null, watchDataModal: null,
}); })
}} }}
/> />
); )
this.setState({ watchDataModal }); this.setState({ watchDataModal })
}; }
handlePlanName = (planArray) => { handlePlanName = (planArray) => {
let planStr = ''; let planStr = ''
planArray.forEach((item, index) => { planArray.forEach((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;
};
// 请求表头 // 请求表头
parseColumns = () => { parseColumns = () => {
const columns = [ const columns = [
...@@ -76,7 +76,7 @@ class GraphicsCourseList extends React.Component { ...@@ -76,7 +76,7 @@ class GraphicsCourseList extends React.Component {
width: 321, width: 321,
fixed: 'left', fixed: 'left',
render: (val, record) => { render: (val, record) => {
const { coverUrl } = record; const { coverUrl } = record
return ( return (
<div className='record__item'> <div className='record__item'>
{/* 上传了封面的话就用上传的封面, 没有的话就取视频的第一帧 */} {/* 上传了封面的话就用上传的封面, 没有的话就取视频的第一帧 */}
...@@ -92,7 +92,7 @@ class GraphicsCourseList extends React.Component { ...@@ -92,7 +92,7 @@ class GraphicsCourseList extends React.Component {
</Otherwise> </Otherwise>
</Choose> </Choose>
</div> </div>
); )
}, },
}, },
{ {
...@@ -106,7 +106,7 @@ class GraphicsCourseList extends React.Component { ...@@ -106,7 +106,7 @@ class GraphicsCourseList extends React.Component {
{record.categoryOneName} {record.categoryOneName}
{record.categoryTwoName ? `-${record.categoryTwoName}` : ''} {record.categoryTwoName ? `-${record.categoryTwoName}` : ''}
</div> </div>
); )
}, },
}, },
{ {
...@@ -123,7 +123,7 @@ class GraphicsCourseList extends React.Component { ...@@ -123,7 +123,7 @@ class GraphicsCourseList extends React.Component {
</Tooltip> </Tooltip>
)} )}
</div> </div>
); )
}, },
}, },
{ {
...@@ -154,7 +154,7 @@ class GraphicsCourseList extends React.Component { ...@@ -154,7 +154,7 @@ class GraphicsCourseList extends React.Component {
defaultChecked={item.shelfState === 'YES' ? true : false} defaultChecked={item.shelfState === 'YES' ? true : false}
onChange={(checked) => this.changeShelfState(index, item, checked)} onChange={(checked) => this.changeShelfState(index, item, checked)}
/> />
); )
}, },
}, },
{ {
...@@ -163,7 +163,7 @@ class GraphicsCourseList extends React.Component { ...@@ -163,7 +163,7 @@ class GraphicsCourseList extends React.Component {
key: 'watchUserCount', key: 'watchUserCount',
dataIndex: 'watchUserCount', dataIndex: 'watchUserCount',
render: (val, item) => { render: (val, item) => {
return <div className='watchUserCount'>{val}</div>; return <div className='watchUserCount'>{val}</div>
}, },
}, },
{ {
...@@ -173,7 +173,7 @@ class GraphicsCourseList extends React.Component { ...@@ -173,7 +173,7 @@ class GraphicsCourseList extends React.Component {
dataIndex: 'created', dataIndex: 'created',
sorter: true, sorter: true,
render: (val) => { render: (val) => {
return window.formatDate('YYYY-MM-DD H:i', val); return window.formatDate('YYYY-MM-DD H:i', val)
}, },
}, },
{ {
...@@ -183,7 +183,7 @@ class GraphicsCourseList extends React.Component { ...@@ -183,7 +183,7 @@ class GraphicsCourseList extends React.Component {
dataIndex: 'updated', dataIndex: 'updated',
sorter: true, sorter: true,
render: (val) => { render: (val) => {
return window.formatDate('YYYY-MM-DD H:i', val); return window.formatDate('YYYY-MM-DD H:i', val)
}, },
}, },
{ {
...@@ -199,10 +199,10 @@ class GraphicsCourseList extends React.Component { ...@@ -199,10 +199,10 @@ class GraphicsCourseList extends React.Component {
<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 ( return (
<span> <span key={item.planId}>
{item.planName} {index < record.relatedPlanList.length - 1 && <span> 、</span>}{' '} {item.planName} {index < record.relatedPlanList.length - 1 && <span> 、</span>}{' '}
</span> </span>
); )
})} })}
</Tooltip> </Tooltip>
</When> </When>
...@@ -211,7 +211,7 @@ class GraphicsCourseList extends React.Component { ...@@ -211,7 +211,7 @@ class GraphicsCourseList extends React.Component {
</Otherwise> </Otherwise>
</Choose> </Choose>
</div> </div>
); )
}, },
}, },
{ {
...@@ -240,42 +240,42 @@ class GraphicsCourseList extends React.Component { ...@@ -240,42 +240,42 @@ class GraphicsCourseList extends React.Component {
</span> </span>
</Dropdown> </Dropdown>
</div> </div>
); )
}, },
}, },
]; ]
return columns; return columns
}; }
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.id, selectCourseId: item.id,
selectPlanList: selectPlanList, selectPlanList: selectPlanList,
}); })
}; }
closeRelatedPlanModalVisible = () => { closeRelatedPlanModalVisible = () => {
this.setState({ this.setState({
RelatedPlanModalVisible: false, RelatedPlanModalVisible: false,
}); })
}; }
onChangeSelectPlanList = (selectPlanList) => { onChangeSelectPlanList = (selectPlanList) => {
this.setState({ this.setState({
selectPlanList: selectPlanList, selectPlanList: selectPlanList,
}); })
}; }
onConfirmSelectPlanList = () => { onConfirmSelectPlanList = () => {
this.setState( this.setState(
...@@ -283,10 +283,10 @@ class GraphicsCourseList extends React.Component { ...@@ -283,10 +283,10 @@ class GraphicsCourseList extends React.Component {
RelatedPlanModalVisible: false, RelatedPlanModalVisible: false,
}, },
() => { () => {
this.props.onChange(); this.props.onChange()
}
)
} }
);
};
renderMoreOperate = (item) => { renderMoreOperate = (item) => {
return ( return (
...@@ -296,7 +296,7 @@ class GraphicsCourseList extends React.Component { ...@@ -296,7 +296,7 @@ class GraphicsCourseList extends React.Component {
className='operate__item' className='operate__item'
key='plan' key='plan'
onClick={() => { onClick={() => {
this.handleRelatedModalShow(item); this.handleRelatedModalShow(item)
}}> }}>
关联培训计划 关联培训计划
</div> </div>
...@@ -305,7 +305,7 @@ class GraphicsCourseList extends React.Component { ...@@ -305,7 +305,7 @@ class GraphicsCourseList extends React.Component {
className='operate__item' className='operate__item'
key='edit' key='edit'
onClick={() => { onClick={() => {
window.RCHistory.push(`/create-graphics-course?type=edit&id=${item.id}`); window.RCHistory.push(`/create-graphics-course?type=edit&id=${item.id}`)
}}> }}>
编辑 编辑
</div> </div>
...@@ -313,11 +313,11 @@ class GraphicsCourseList extends React.Component { ...@@ -313,11 +313,11 @@ class GraphicsCourseList extends React.Component {
删除 删除
</div> </div>
</div> </div>
); )
}; }
//改变上架状态 //改变上架状态
changeShelfState = (index, item, checked) => { changeShelfState = (index, item, checked) => {
let _shelfState = checked ? 'YES' : 'NO'; let _shelfState = checked ? 'YES' : 'NO'
// if(_shelfState==='NO'){ // if(_shelfState==='NO'){
// _shelfState = "YES"; // _shelfState = "YES";
// }else{ // }else{
...@@ -326,18 +326,18 @@ class GraphicsCourseList extends React.Component { ...@@ -326,18 +326,18 @@ class GraphicsCourseList extends React.Component {
const params = { const params = {
courseId: item.id, courseId: item.id,
shelfState: _shelfState, shelfState: _shelfState,
}; }
CourseService.changeVideoShelfState(params).then((res) => { CourseService.changeVideoShelfState(params).then((res) => {
if (res.success) { if (res.success) {
if (_shelfState === 'YES') { if (_shelfState === 'YES') {
message.success('已开启展示'); message.success('已开启展示')
} else { } else {
message.success('已取消展示'); message.success('已取消展示')
} }
this.props.changeShelfState(index, _shelfState); this.props.changeShelfState(index, _shelfState)
}
})
} }
});
};
// 删除视频课 // 删除视频课
handleDeleteGraphicsCourse = (scheduleId) => { handleDeleteGraphicsCourse = (scheduleId) => {
Modal.confirm({ Modal.confirm({
...@@ -351,27 +351,27 @@ class GraphicsCourseList extends React.Component { ...@@ -351,27 +351,27 @@ class GraphicsCourseList extends React.Component {
const param = { const param = {
courseId: scheduleId, courseId: scheduleId,
storeId: User.getStoreId(), storeId: User.getStoreId(),
}; }
CourseService.delVideoSchedule(param).then(() => { CourseService.delVideoSchedule(param).then(() => {
message.success('删除成功'); message.success('删除成功')
this.props.onChange(); this.props.onChange()
}); })
}, },
}); })
}; }
// 显示分享弹窗 // 显示分享弹窗
handleShowShareModal = (record, needStr = false) => { handleShowShareModal = (record, needStr = false) => {
const { id, scheduleVideoUrl } = record; const { id, scheduleVideoUrl } = record
const htmlUrl = `${LIVE_SHARE}graphics_detail/${id}?id=${User.getStoreId()}`; const htmlUrl = `${LIVE_SHARE}graphics_detail/${id}?id=${User.getStoreId()}`
const longUrl = htmlUrl; const longUrl = htmlUrl
const { coverUrl, courseName } = record; const { coverUrl, courseName } = record
const shareData = { const shareData = {
longUrl, longUrl,
coverUrl, coverUrl,
scheduleVideoUrl, scheduleVideoUrl,
courseName, courseName,
}; }
const shareLiveModal = ( const shareLiveModal = (
<ShareLiveModal <ShareLiveModal
...@@ -382,82 +382,82 @@ class GraphicsCourseList extends React.Component { ...@@ -382,82 +382,82 @@ class GraphicsCourseList extends React.Component {
close={() => { close={() => {
this.setState({ this.setState({
shareLiveModal: null, shareLiveModal: null,
}); })
localStorage.setItem('videoCourseItem', ''); localStorage.setItem('videoCourseItem', '')
}} }}
/> />
); )
this.setState({ shareLiveModal }); this.setState({ shareLiveModal })
}; }
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 { order: _order } = query; let { order: _order } = query
// 按创建时间升序排序 // 按创建时间升序排序
if (columnKey === 'created' && order === 'ascend') { if (columnKey === 'created' && order === 'ascend') {
_order = 'CREATED_ASC'; _order = 'CREATED_ASC'
} }
// 按创建时间降序排序 // 按创建时间降序排序
if (columnKey === 'created' && order === 'descend') { if (columnKey === 'created' && order === 'descend') {
_order = 'CREATED_DESC'; _order = 'CREATED_DESC'
} }
// 按更新时间升序排序 // 按更新时间升序排序
if (columnKey === 'updated' && order === 'ascend') { if (columnKey === 'updated' && order === 'ascend') {
_order = 'UPDATED_ASC'; _order = 'UPDATED_ASC'
} }
// 按更新时间降序排序 // 按更新时间降序排序
if (columnKey === 'updated' && order === 'descend') { if (columnKey === 'updated' && order === 'descend') {
_order = 'UPDATED_DESC'; _order = 'UPDATED_DESC'
} }
const _query = { const _query = {
...query, ...query,
orderEnum: _order, orderEnum: _order,
}; }
this.props.onChange(_query); this.props.onChange(_query)
}; }
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.id, selectCourseId: item.id,
selectPlanList: selectPlanList, selectPlanList: selectPlanList,
}); })
}; }
closeRelatedPlanModalVisible = () => { closeRelatedPlanModalVisible = () => {
this.setState({ this.setState({
RelatedPlanModalVisible: false, RelatedPlanModalVisible: false,
}); })
}; }
onChangeSelectPlanList = (selectPlanList) => { onChangeSelectPlanList = (selectPlanList) => {
this.setState({ this.setState({
selectPlanList: selectPlanList, selectPlanList: selectPlanList,
}); })
}; }
onConfirmSelectPlanList = () => { onConfirmSelectPlanList = () => {
this.setState( this.setState(
{ {
RelatedPlanModalVisible: false, RelatedPlanModalVisible: false,
}, },
() => { () => {
this.props.onChange(); this.props.onChange()
}
)
} }
);
};
render() { render() {
const { RelatedPlanModalVisible, selectCourseId, selectPlanList } = this.state; const { RelatedPlanModalVisible, selectCourseId, selectPlanList } = this.state
const { dataSource = [], totalCount, query } = this.props; const { dataSource = [], totalCount, query } = this.props
const { current, size } = query; const { current, size } = query
return ( return (
<div className='video-course-list'> <div className='video-course-list'>
...@@ -482,8 +482,8 @@ class GraphicsCourseList extends React.Component { ...@@ -482,8 +482,8 @@ class GraphicsCourseList extends React.Component {
pageSize={size} pageSize={size}
total={totalCount} total={totalCount}
toPage={(page) => { toPage={(page) => {
const _query = { ...query, current: page + 1 }; const _query = { ...query, current: page + 1 }
this.props.onChange(_query); this.props.onChange(_query)
}} }}
/> />
</div> </div>
...@@ -510,8 +510,8 @@ class GraphicsCourseList extends React.Component { ...@@ -510,8 +510,8 @@ class GraphicsCourseList extends React.Component {
{this.state.shareLiveModal} {this.state.shareLiveModal}
{this.state.watchDataModal} {this.state.watchDataModal}
</div> </div>
); )
} }
} }
export default GraphicsCourseList; export default GraphicsCourseList
src/modules/course-manage/offline-course/AddOfflineCourse.jsx
...@@ -8,10 +8,10 @@ ...@@ -8,10 +8,10 @@
*/ */
import React from 'react' import React from 'react'
import { Button, Input, Radio, message, Modal, TreeSelect, Select, Switch, TimePicker, InputNumber, Tooltip } from 'antd' import { Button, Input, Radio, message, Modal, Select, Switch, TimePicker, InputNumber, Tooltip } from 'antd'
import $ from 'jquery' import $ from 'jquery'
import RangePicker from '@/modules/common/DateRangePicker' import { RangePicker, CourseCatalogSelect } from '@/modules/common'
import ShowTips from '@/components/ShowTips' import ShowTips from '@/components/ShowTips'
import Breadcrumbs from '@/components/Breadcrumbs' import Breadcrumbs from '@/components/Breadcrumbs'
import SelectPrepareFileModal from '../../prepare-lesson/modal/SelectPrepareFileModal' import SelectPrepareFileModal from '../../prepare-lesson/modal/SelectPrepareFileModal'
...@@ -759,7 +759,13 @@ class AddOfflineCourse extends React.Component { ...@@ -759,7 +759,13 @@ class AddOfflineCourse extends React.Component {
<span className='label special'> <span className='label special'>
<span className='require'>*</span>课程分类： <span className='require'>*</span>课程分类：
</span> </span>
<TreeSelect <CourseCatalogSelect
value={categoryId}
onChange={(value, label) => {
this.handleChangeCatalogList(value, label)
}}
/>
{/* <TreeSelect
showSearch showSearch
treeNodeFilterProp='title' treeNodeFilterProp='title'
style={{ width: 240 }} style={{ width: 240 }}
...@@ -772,7 +778,7 @@ class AddOfflineCourse extends React.Component { ...@@ -772,7 +778,7 @@ class AddOfflineCourse extends React.Component {
onChange={(value, label) => { onChange={(value, label) => {
this.handleChangeCatalogList(value, label) this.handleChangeCatalogList(value, label)
}} }}
/> /> */}
</div> </div>
<div className='course-catalog'> <div className='course-catalog'>
<span className='label special'> <span className='label special'>
......
src/modules/course-manage/video-course/AddVideoCourse.jsx
...@@ -8,8 +8,9 @@ ...@@ -8,8 +8,9 @@
*/ */
import React from 'react' import React from 'react'
import { Button, Input, message, Modal, Cascader, Tooltip, Form, Popconfirm, Menu, Dropdown } from 'antd' import { Button, Input, message, Modal, Tooltip, Form, Popconfirm, Menu, Dropdown } from 'antd'
import { FileTypeIcon, FileVerifyMap } from '@/common/constants/academic/lessonEnum' import { FileTypeIcon, FileVerifyMap } from '@/common/constants/academic/lessonEnum'
import { CourseCatalogSelect } from '@/modules/common'
import ShowTips from '@/components/ShowTips' import ShowTips from '@/components/ShowTips'
import Breadcrumbs from '@/components/Breadcrumbs' import Breadcrumbs from '@/components/Breadcrumbs'
import moment from 'moment' import moment from 'moment'
...@@ -84,7 +85,6 @@ class AddVideoCourse extends React.Component { ...@@ -84,7 +85,6 @@ class AddVideoCourse extends React.Component {
showSelectFileModal: false, showSelectFileModal: false,
studentModal: false, studentModal: false,
categoryName: null, //分类名称 categoryName: null, //分类名称
courseCatalogList: [], //分类列表
categoryId: null, //分类的Id值 categoryId: null, //分类的Id值
whetherVisitorsJoin: 'NO', // 是否允许游客加入 whetherVisitorsJoin: 'NO', // 是否允许游客加入
showSelectCoverModal: false, showSelectCoverModal: false,
...@@ -100,7 +100,6 @@ class AddVideoCourse extends React.Component { ...@@ -100,7 +100,6 @@ class AddVideoCourse extends React.Component {
componentWillMount() { componentWillMount() {
const { id, pageType } = this.state const { id, pageType } = this.state
this.getCourseCatalogList()
if (pageType === 'edit') { if (pageType === 'edit') {
this.handleFetchScheudleDetail(id) this.handleFetchScheudleDetail(id)
} }
...@@ -111,41 +110,34 @@ class AddVideoCourse extends React.Component { ...@@ -111,41 +110,34 @@ class AddVideoCourse extends React.Component {
}) })
} }
//获取分类列表 handleChangeCatalogList = (value, label) => {
getCourseCatalogList = () => { this.setState({ categoryId: value, categoryName: label[0] })
StoreService.getCourseCatalogList({ current: 1, size: 1000 }).then((res) => {
this.setState({
courseCatalogList: res.result.records,
})
})
} }
catalogChange = (value, _categoryName) => { // catalogChange = (value, _categoryName) => {
const categoryName = _.pluck(_categoryName, 'categoryName').join('-') // const categoryName = _.pluck(_categoryName, 'categoryName').join('-')
const changeValueLength = value.length // const changeValueLength = value.length
switch (changeValueLength) { // switch (changeValueLength) {
case 1: // case 1:
this.setState({ categoryId: value[0], categoryName }) // this.setState({ categoryId: value[0], categoryName })
break // break
case 2: // case 2:
this.setState({ categoryId: value[1], categoryName }) // this.setState({ categoryId: value[1], categoryName })
break // break
default: // default:
this.setState({ categoryId: null }) // this.setState({ categoryId: null })
break // break
} // }
} // }
// 获取线上课详情 // 获取线上课详情
handleFetchScheudleDetail = (courseId) => { handleFetchScheudleDetail = (courseId) => {
CourseService.videoScheduleDetail({ CourseService.videoScheduleDetail({
courseId, courseId,
}).then((res) => { }).then((res) => {
const { result = {} } = res || {} const { result = {} } = res || {}
const { courseName, shelfState, whetherVisitorsJoin, courseMediaVOS, categoryOneName, categoryTwoName, categoryId, courseChapterVOList = [] } = result const { courseName, shelfState, whetherVisitorsJoin, courseMediaVOS, categoryId, courseChapterVOList = [] } = result
let coverId let coverId
let coverUrl let coverUrl
// let videoDuration
// let videoName
let scheduleMedia = [] let scheduleMedia = []
let scheduleVideoUrl let scheduleVideoUrl
let hasIntro let hasIntro
...@@ -166,12 +158,12 @@ class AddVideoCourse extends React.Component { ...@@ -166,12 +158,12 @@ class AddVideoCourse extends React.Component {
return item return item
}) })
let categoryName // let categoryName
if (categoryTwoName) { // if (categoryTwoName) {
categoryName = `${categoryOneName}-${categoryTwoName}` // categoryName = `${categoryOneName}-${categoryTwoName}`
} else { // } else {
categoryName = `${categoryOneName}` // categoryName = `${categoryOneName}`
} // }
const _courseChapterVOList = courseChapterVOList.map((item) => { const _courseChapterVOList = courseChapterVOList.map((item) => {
item.mediaName = item.name item.mediaName = item.name
...@@ -183,14 +175,11 @@ class AddVideoCourse extends React.Component { ...@@ -183,14 +175,11 @@ class AddVideoCourse extends React.Component {
loadintroduce: !hasIntro, loadintroduce: !hasIntro,
coverId, coverId,
coverUrl, coverUrl,
// videoName,
// videoDuration,
scheduleMedia, scheduleMedia,
courseName, courseName,
scheduleVideoUrl, scheduleVideoUrl,
shelfState, shelfState,
whetherVisitorsJoin, whetherVisitorsJoin,
categoryName,
categoryId, categoryId,
courseChapterList: _courseChapterVOList, courseChapterList: _courseChapterVOList,
}) })
...@@ -708,13 +697,11 @@ class AddVideoCourse extends React.Component { ...@@ -708,13 +697,11 @@ class AddVideoCourse extends React.Component {
diskList, diskList,
// videoType, // videoType,
shelfState, shelfState,
categoryName, categoryId,
courseCatalogList,
whetherVisitorsJoin, whetherVisitorsJoin,
visible, visible,
showSelectCoverModal, showSelectCoverModal,
hasImgReady,
cutImageBlob,
introduce, introduce,
loadintroduce, loadintroduce,
id, id,
...@@ -884,38 +871,12 @@ class AddVideoCourse extends React.Component { ...@@ -884,38 +871,12 @@ class AddVideoCourse extends React.Component {
</div> </div>
<div className='course-catalog required'> <div className='course-catalog required'>
<span className='label'>课程分类：</span> <span className='label'>课程分类：</span>
{pageType === 'add' && ( <CourseCatalogSelect
<Cascader value={categoryId}
defaultValue={[]} onChange={(value, label) => {
options={courseCatalogList} this.handleChangeCatalogList(value, label)
displayRender={(label) => label.join('-')} }}
fieldNames={fieldNames}
onChange={this.catalogChange}
style={{ width: 240 }}
placeholder='请选择课程分类'
suffixIcon={
<span className='icon iconfont' style={{ fontSize: '12px', color: '#BFBFBF' }}>
&#xe835;
</span>
}
/>
)}
{pageType === 'edit' && categoryName && (
<Cascader
defaultValue={[categoryName]}
options={courseCatalogList}
displayRender={(label) => label.join('-')}
fieldNames={fieldNames}
onChange={this.catalogChange}
style={{ width: 240 }}
placeholder='请选择课程分类'
suffixIcon={
<span className='icon iconfont' style={{ fontSize: '12px', color: '#BFBFBF' }}>
&#xe835;
</span>
}
/> />
)}
</div> </div>
<div className='intro-info mt16'> <div className='intro-info mt16'>
<AddVideoIntro <AddVideoIntro
......
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