Skip to content

X
xiaomai-cloud-class-web
Commit b0efcce5 by maolipeng
Options

fix:hook。。。。。

parent a648b7d4
Showing with 135 additions and 125 deletions
src/modules/course-manage/components/CreateWorkWXCourse.tsx
......@@ -6,7 +6,7 @@
* @Description: 大班互动-添加/编辑直播课
*/
import React, { useEffect, useState } from 'react';
import React, { ReactElement, useEffect, useState } from 'react';
import { withRouter } from 'react-router-dom';
import { Button, message, Modal } from 'antd';
......@@ -30,7 +30,7 @@ import './CreateWorkWXCourse.less';
const defaultCover = 'https://image.xiaomaiketang.com/xm/Yip2YtFDwH.png';
interface BasicInfo {
courseName: string; // 课程名称
[courseName: string]: string; // 课程名称
coverUrl: string;
coverId: string;
categoryId: string;
......@@ -52,9 +52,12 @@ interface ClassInfo {
liveDate: number;
timeHorizonStart: number;
timeHorizonEnd: number;
calendarTime: number[];
calendarTime?: number[];
startTime: number;
endTime: number;
nickname?: string;
assistantStoreUserId?: string[];
assistantNames?: string[];
};
const defaultClassInfo: ClassInfo = {
......@@ -68,20 +71,20 @@ const defaultClassInfo: ClassInfo = {
startTime: new Date().getTime() + 300000,
endTime: new Date().getTime() + 300000,
};
interface CourseMedia {
contentType?: string;
mediaContent?: string;
mediaType?: string;
mediaUrl?: string;
key?: number;
}
interface IntroInfo {
needRecord: string,
whetherVisitorsJoin: string,
liveCourseWarmMedia: any,
needRecord?: string,
whetherVisitorsJoin?: string,
liveCourseWarmMedia?: CourseMedia,
introduce?: string;
// 讲师简介
liveCourseMediaRequests: [
{
contentType: string,
mediaType: string,
mediaContent: string,
key: number,
},
],
liveCourseMediaRequests?: CourseMedia[],
};
const defaultIntroInfo: IntroInfo = {
......@@ -99,6 +102,24 @@ const defaultIntroInfo: IntroInfo = {
],
};
interface CourseDetail {
teacherId: string;
teacherName: string;
courseName: string;
startTime: number;
endTime: number;
courseMediaVOS: CourseMedia[];
nickname?: string;
needRecord: string,
whetherVisitorsJoin: string;
warmMedia?: string;
categoryId: string;
categoryName: string;
admins: any[],
courseState: string;
}
function CreateWorkWXCourse() {
const [id, setId] = useState(getParameterByName('id'))
const [type,setType] = useState(getParameterByName('type'))
......@@ -106,42 +127,45 @@ function CreateWorkWXCourse() {
const [isEdit, setIsEdit] = useState(true)
const [courseState, setCourseState] = useState('UN_START')
const [editorTextLength, setEditorTextLength] = useState(0)
const [] = useState()
const [] = useState()
this.state = {
// 直播课基本信息
addLiveBasicInfo: {
courseName: null, // 课程名称
coverUrl: defaultCover,
coverId: null,
categoryId: null,
categoryName: null,
},
// 直播课上课信息
addLiveClassInfo: {
teacherId: null,
teacherName: null,
assistant: [],
assistantStoreUserId: [],
assistantNames: [],
liveDate: null,
timeHorizonStart: null,
timeHorizonEnd: null,
calendarTime: [], // 批量排课
startTime: new Date().getTime() + 300000, // 批量开始时分
endTime: new Date().getTime() + 300000, // 批量结束时分
},
// 直播课简介
addLiveIntroInfo: {
needRecord: 'YES',
whetherVisitorsJoin: 'NO',
liveCourseWarmMedia: {},
introduce: '',
liveCourseMediaRequests: [],
},
};
const [loadintroduce, setLoadintroduce] = useState(false)
const [addLiveBasicInfo, setAddLiveBasicInfo] = useState<BasicInfo>({courseName:'',coverUrl:'',coverId:'',categoryId:'',categoryName:''})
const [addLiveClassInfo, setAddLiveClassInfo] = useState<any>()
const [addLiveIntroInfo, setAddLiveIntroInfo] = useState<any>({})
const [previewLiveCourseModal, setPreviewLiveCourseModal] = useState<ReactElement|null>()
// this.state = {
// // 直播课基本信息
// addLiveBasicInfo: {
// courseName: null, // 课程名称
// coverUrl: defaultCover,
// coverId: null,
// categoryId: null,
// categoryName: null,
// },
// // 直播课上课信息
// addLiveClassInfo: {
// teacherId: null,
// teacherName: null,
// assistant: [],
// assistantStoreUserId: [],
// assistantNames: [],
// liveDate: null,
// timeHorizonStart: null,
// timeHorizonEnd: null,
// calendarTime: [], // 批量排课
// startTime: new Date().getTime() + 300000, // 批量开始时分
// endTime: new Date().getTime() + 300000, // 批量结束时分
// },
// // 直播课简介
// addLiveIntroInfo: {
// needRecord: 'YES',
// whetherVisitorsJoin: 'NO',
// liveCourseWarmMedia: {},
// introduce: '',
// liveCourseMediaRequests: [],
// },
// };
useEffect(()=> {
routeHook.addSaveCase();
......@@ -173,13 +197,13 @@ function CreateWorkWXCourse() {
categoryName,
admins,
courseState,
} = res.result;
let coverId;
} = res.result as CourseDetail;
let coverId: string|undefined = '';
let coverUrl;
let liveCourseMediaRequests: any[] = [];
let liveCourseWarmMedia;
let hasIntro = false;
courseMediaVOS.map((item:any) => {
courseMediaVOS.map((item:CourseMedia) => {
switch (item.contentType) {
case 'COVER':
coverId = item.mediaContent;
......@@ -190,7 +214,7 @@ function CreateWorkWXCourse() {
break;
case 'INTRO':
hasIntro = true;
getTextDetail('introduce', item.mediaUrl);
getIntroduce('introduce', item.mediaUrl);
break;
default:
break;
......@@ -199,7 +223,7 @@ function CreateWorkWXCourse() {
return item;
});
const addLiveBasicInfo = {
const addLiveBasicInfo: BasicInfo = {
courseName,
coverUrl: coverUrl || defaultCover,
coverId,
......@@ -213,7 +237,7 @@ function CreateWorkWXCourse() {
const assistant = _.pluck(admins, 'adminId');
const assistantStoreUserId = _.pluck(admins, 'adminStoreUserId'); //编辑时的选中的助教的查询用storeUserId查询
const assistantNames = _.pluck(admins, 'adminName');
const addLiveClassInfo = {
const addLiveClassInfo: ClassInfo = {
assistant,
liveDate,
nickname,
......@@ -227,7 +251,7 @@ function CreateWorkWXCourse() {
assistantStoreUserId,
};
const addLiveIntroInfo = {
const addLiveIntroInfo: IntroInfo = {
liveCourseWarmMedia,
needRecord,
whetherVisitorsJoin,
......@@ -236,28 +260,28 @@ function CreateWorkWXCourse() {
// 晚于开课前30分钟
if (new Date().getTime() > startTime - 1800000) {
isEdit = false;
setIsEdit(false)
}
this.setState({
loadintroduce: !hasIntro,
isEdit,
loading: false,
courseState,
addLiveIntroInfo,
addLiveClassInfo,
addLiveBasicInfo,
});
setLoadintroduce(!hasIntro)
setLoading(false)
setAddLiveBasicInfo(addLiveBasicInfo)
setAddLiveClassInfo(addLiveClassInfo)
setAddLiveIntroInfo(addLiveIntroInfo)
setCourseState(courseState)
});
};
function getTextDetail(key: string, url: string) {
function getIntroduce(key: string, url: string|undefined) {
$.ajax({
data: {},
type: 'GET',
url,
contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
success: (res) => {
this.setState({ addLiveIntroInfo: { ...this.state.addLiveIntroInfo, [key]: res }, [`load${key}`]: true });
let intro = addLiveIntroInfo
intro.introduce = res
setLoadintroduce(true)
setAddLiveIntroInfo(intro)
},
error: () => {
message.warning('获取简介失败');
......@@ -267,45 +291,35 @@ function CreateWorkWXCourse() {
// 修改基本信息
// 修改基本信息
handleChangeBasicInfo = (field, value) => {
const { coverUrl } = this.state.addLiveBasicInfo;
this.setState({
addLiveBasicInfo: {
...this.state.addLiveBasicInfo,
[field]: value,
},
});
function handleChangeBasicInfo(field: string, value: string) {
let binfo = {...addLiveBasicInfo}
binfo[field] = value
setAddLiveBasicInfo(binfo)
};
// 修改上课信息
handleChangeClassInfo = (field, value, type, optionValue) => {
function handleChangeClassInfo(field: string, value: any, type: any, optionValue: any) {
const _value = value ? value.valueOf() : null;
const { teacherName } = this.state.addLiveClassInfo;
const { assistantNames } = this.state.addLiveClassInfo;
const { assistantStoreUserId } = this.state.addLiveClassInfo;
this.setState({
addLiveClassInfo: {
...this.state.addLiveClassInfo,
const { teacherName, assistantNames, assistantStoreUserId } = addLiveClassInfo;
let _addLiveClassInfo = {
addLiveClassInfo,
[field]: _value,
teacherName: type === 'teacherType' ? optionValue : teacherName,
assistantNames: type === 'assistantType' ? _.pluck(optionValue, 'children') : assistantNames,
assistantStoreUserId: type === 'assistantType' ? _.pluck(optionValue, 'key') : assistantStoreUserId,
},
});
}
setAddLiveClassInfo(_addLiveClassInfo)
};
// 修改简介
handleChangeIntroInfo = (field, value) => {
this.setState({
addLiveIntroInfo: {
...this.state.addLiveIntroInfo,
[field]: value,
},
});
function handleChangeIntroInfo(field: string, value: any) {
let introinfo = {...addLiveIntroInfo}
introinfo[field] = value
setAddLiveIntroInfo(introinfo)
};
// 完成创建/编辑
handleSubmit = () => {
function handleSubmit() {
//过期判断
if (User.getExpirationTime() && moment().valueOf() > Number(User.getExpirationTime())) {
Modal.warning({
......@@ -319,7 +333,7 @@ function CreateWorkWXCourse() {
const { liveDate, timeHorizonStart } = addLiveClassInfo;
const _liveDate = moment(liveDate).format('YYYY-MM-DD');
const _timeHorizonStart = moment(timeHorizonStart).format('HH:mm');
const startTime = moment(_liveDate + ' ' + _timeHorizonStart).format('x');
const startTime = Number(moment(_liveDate + ' ' + _timeHorizonStart).format('x'));
if (type === 'edit' && isEdit && new Date().getTime() > startTime - 1800000) {
Modal.info({
title: '提示',
......@@ -327,26 +341,25 @@ function CreateWorkWXCourse() {
content: '晚于开课前30分钟，部分信息不可修改',
okText: '我知道了',
onOk: () => {
this.getCourseDetail();
getCourseDetail();
},
});
return;
}
this.handleValidate(addLiveBasicInfo, addLiveClassInfo, addLiveIntroInfo, isEdit, editorTextLength).then((res) => {
if (!res) return;
// this.handleValidate(addLiveBasicInfo, addLiveClassInfo, addLiveIntroInfo, isEdit, editorTextLength).then((res) => {
// if (!res) return;
Upload.uploadTextToOSS(
addLiveIntroInfo.introduce,
`${randomString()}.txt`,
(introduceId) => {
this.submitRemote({ introduceId, addLiveBasicInfo, addLiveClassInfo, addLiveIntroInfo, id });
(introduceId:any) => {
submitRemote({ introduceId, addLiveBasicInfo, addLiveClassInfo, addLiveIntroInfo, id });
},
() => message.warning('上传课程简介失败')
);
});
// });
};
submitRemote = ({ introduceId, addLiveBasicInfo, addLiveClassInfo, addLiveIntroInfo, id }) => {
const { type } = this.state;
function submitRemote({ introduceId, addLiveBasicInfo, addLiveClassInfo, addLiveIntroInfo, id }) {
const { courseName, coverUrl, coverId, categoryId } = addLiveBasicInfo;
const { liveDate, teacherId, assistant, timeHorizonEnd, timeHorizonStart, calendarTime } = addLiveClassInfo;
......@@ -423,7 +436,7 @@ function CreateWorkWXCourse() {
});
}
};
/*
handleValidate = (addLiveBasicInfo, addLiveClassInfo, addLiveIntroInfo, isEdit, editorTextLength) => {
return new Promise((resolve) => {
const { type } = this.state;
......@@ -519,10 +532,11 @@ function CreateWorkWXCourse() {
resolve(true);
});
};
*/
// 显示预览课程弹窗
handleShowPreviewModal = () => {
const { addLiveBasicInfo, addLiveClassInfo, addLiveIntroInfo, type, courseState } = this.state;
function handleShowPreviewModal() {
// const { addLiveBasicInfo, addLiveClassInfo, addLiveIntroInfo, type, courseState } = this.state;
const previewLiveCourseModal = (
<PreviewCourseModal
courseBasicInfo={addLiveBasicInfo}
......@@ -531,20 +545,18 @@ function CreateWorkWXCourse() {
type={type}
courseState={courseState}
close={() => {
this.setState({
previewLiveCourseModal: null,
});
setPreviewLiveCourseModal(null)
}}
/>
);
this.setState({ previewLiveCourseModal });
setPreviewLiveCourseModal(previewLiveCourseModal)
};
// 取消编辑并返回上一级路由
handleGoBack = () => {
function handleGoBack() {
// 比较state的addLiveBasicInfo, addLiveClassInfo, addLiveIntroInfo和默认数据是否相等
const { addLiveBasicInfo, addLiveClassInfo, addLiveIntroInfo } = this.state;
// const { addLiveBasicInfo, addLiveClassInfo, addLiveIntroInfo } = this.state;
if (!_.isEqual(addLiveBasicInfo, defaultBasicInfo) || !_.isEqual(addLiveClassInfo, defaultClassInfo) || !_.isEqual(addLiveIntroInfo, defaultIntroInfo)) {
console.log('ghjklkjh')
window.RCHistory.push({
......@@ -558,11 +570,11 @@ function CreateWorkWXCourse() {
}
};
render() {
const { id, type, addLiveBasicInfo, addLiveClassInfo, addLiveIntroInfo, isEdit, loadintroduce } = this.state;
// const { id, type, addLiveBasicInfo, addLiveClassInfo, addLiveIntroInfo, isEdit, loadintroduce } = this.state;
return (
<div className='page add-live-page'>
<Breadcrumbs navList={type == 'add' ? '新建直播课' : '编辑直播课'} goBack={this.handleGoBack} />
<Breadcrumbs navList={type == 'add' ? '新建直播课' : '编辑直播课'} goBack={handleGoBack} />
<div className='box'>
<div className='show-tips'>
<ShowTips message='请遵守国家相关规定，切勿上传低俗色情、暴力恐怖、谣言诈骗、侵权盗版等相关内容，小麦企学院保有依据国家规定及平台规则进行处理的权利' />
......@@ -570,33 +582,31 @@ function CreateWorkWXCourse() {
<div className='add-live-page__form'>
<div className='basic-info__wrap'>
<div className='title'>基本信息</div>
<AddLiveBasic isEdit={isEdit} pageType={type} data={addLiveBasicInfo} onChange={this.handleChangeBasicInfo} />
<AddLiveBasic isEdit={isEdit} pageType={type} data={addLiveBasicInfo} onChange={handleChangeBasicInfo} />
</div>
<div className='class-info__wrap'>
<div className='title'>上课信息</div>
<AddLiveClass isEdit={isEdit} pageType={type} data={{ ...addLiveClassInfo, id }} onChange={this.handleChangeClassInfo} />
<AddLiveClass isEdit={isEdit} pageType={type} data={{ ...addLiveClassInfo, id }} onChange={handleChangeClassInfo} />
</div>
<div className='intro-info__wrap'>
<div className='title'>更多信息</div>
<AddLiveIntro isEdit={isEdit} data={{ ...addLiveIntroInfo, loadintroduce, id }} onChange={this.handleChangeIntroInfo} />
<AddLiveIntro isEdit={isEdit} data={{ ...addLiveIntroInfo, loadintroduce, id }} onChange={handleChangeIntroInfo} />
</div>
</div>
</div>
<div className='footer shrink-footer'>
<Button onClick={this.handleGoBack}>取消</Button>
<Button onClick={this.handleShowPreviewModal}>预览</Button>
<Button type='primary' onClick={_.debounce(() => this.handleSubmit(), 3000, true)}>
<Button onClick={handleGoBack}>取消</Button>
<Button onClick={handleShowPreviewModal}>预览</Button>
<Button type='primary' onClick={_.debounce(() => handleSubmit(), 3000, true)}>
保存
</Button>
</div>
{this.state.previewLiveCourseModal}
{this.state.lackConsumeStudentModal}
{previewLiveCourseModal}
</div>
);
}
}
export default withRouter(CreateWorkWXCourse);
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