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