Skip to content

X
xiaomai-cloud-class-web
Commit c6ce3801 by yuananting
Options

fix:解决线下课分类修改导致代码覆盖缺失问题

parent 3e668c78
Showing with 281 additions and 409 deletions
src/modules/course-manage/offline-course/AddOfflineCourse.jsx
...@@ -2,47 +2,46 @@ ...@@ -2,47 +2,46 @@
* @Author: 吴文洁 * @Author: 吴文洁
* @Date: 2020-08-05 10:07:47 * @Date: 2020-08-05 10:07:47
* @LastEditors: yuananting * @LastEditors: yuananting
* @LastEditTime: 2021-07-15 12:04:00 * @LastEditTime: 2021-07-27 15:09:00
* @Description: 线下课新增/编辑页 * @Description: 线下课新增/编辑页
* @Copyright: 杭州杰竞科技有限公司 版权所有 * @Copyright: 杭州杰竞科技有限公司 版权所有
*/ */
import React from 'react' import React from 'react';
import { Button, Input, Radio, message, Modal, Select, Switch, TimePicker, InputNumber, Tooltip } from 'antd' import { Button, Input, Radio, message, Modal, TreeSelect, Select, Switch, TimePicker, InputNumber, Tooltip } from 'antd';
import $ from 'jquery' import $ from 'jquery';
import { RangePicker, CourseCatalogSelect } from '@/modules/common' 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 SelectStudent from '../modal/select-student' import SelectPrepareFileModal from '../../prepare-lesson/modal/SelectPrepareFileModal';
import SelectPrepareFileModal from '../../prepare-lesson/modal/SelectPrepareFileModal' import PreviewOfflineModal from './modal/PreviewOfflineModal';
import PreviewOfflineModal from './modal/PreviewOfflineModal' import StoreService from '@/domains/store-domain/storeService';
import StoreService from '@/domains/store-domain/storeService' import Service from '@/common/js/service';
import Service from '@/common/js/service' import { randomString } from '@/domains/basic-domain/utils';
import { randomString } from '@/domains/basic-domain/utils' import User from '@/common/js/user';
import User from '@/common/js/user' import _ from 'underscore';
import _ from 'underscore' import moment from 'moment';
import moment from 'moment' import Upload from '@/core/upload';
import Upload from '@/core/upload' import GraphicsEditor from '../components/GraphicsEditor';
import GraphicsEditor from '../components/GraphicsEditor' import MultipleDatePicker from '@/components/MultipleDatePicker';
import MultipleDatePicker from '@/components/MultipleDatePicker' import ImgClipModal from '@/components/ImgClipModal';
import './AddOfflineCourse.less' import './AddOfflineCourse.less';
import Bus from '@/core/bus' import Bus from '@/core/bus';
const { Option } = Select const { Option } = Select;
const defaultCoverUrl = 'https://image.xiaomaiketang.com/xm/pxbWKsYA87.png' const defaultCoverUrl = 'https://image.xiaomaiketang.com/xm/pxbWKsYA87.png';
let cutFlag = false
const unitList = [ const unitList = [
{ key: 'HOUR', value: '小时' }, { key: 'HOUR', value: '小时' },
{ key: 'MINUTE', value: '分钟' }, { key: 'MINUTE', value: '分钟' },
] ];
class AddOfflineCourse extends React.Component { class AddOfflineCourse extends React.Component {
constructor(props) { constructor(props) {
super(props) super(props);
const courseId = getParameterByName('id') const courseId = window.getParameterByName('id');
const pageType = getParameterByName('type') const pageType = window.getParameterByName('type');
this.state = { this.state = {
courseId, // 线下课ID,编辑的时候从URL上带过来 courseId, // 线下课ID,编辑的时候从URL上带过来
...@@ -88,77 +87,76 @@ class AddOfflineCourse extends React.Component { ...@@ -88,77 +87,76 @@ class AddOfflineCourse extends React.Component {
isEditDisablie: false, isEditDisablie: false,
startTime: new Date().getTime() + 300000, // 批量开始时分 startTime: new Date().getTime() + 300000, // 批量开始时分
endTime: new Date().getTime() + 300000, // 批量结束时分 endTime: new Date().getTime() + 300000, // 批量结束时分
} };
} }
componentWillMount() { componentWillMount() {
const { courseId, pageType } = this.state const { courseId, pageType } = this.state;
this.getCourseCatalogList() this.getCourseCatalogList();
this.getTeacherList() this.getTeacherList();
if (pageType === 'edit') { if (pageType === 'edit') {
this.handleFetchScheudleDetail(courseId) this.handleFetchScheudleDetail(courseId);
} }
Bus.bind('editorLimit', (editorTextLength) => { Bus.bind('editorLimit', (editorTextLength) => {
this.setState({ this.setState({
editorTextLength, editorTextLength,
}) });
}) });
} }
initBus = () => { initBus = () => {
Bus.bind('offlineEditorImage', this.uploadImage) Bus.bind('offlineEditorImage', this.uploadImage);
} };
removeBus = () => { removeBus = () => {
Bus.unbind('offlineEditorImage', this.uploadImage) Bus.unbind('offlineEditorImage', this.uploadImage);
} };
uploadImage = () => { uploadImage = () => {
this.setState({ showSelectImageModal: true }) this.setState({ showSelectImageModal: true });
} };
//获取分类列表 //获取分类列表
getCourseCatalogList = () => { getCourseCatalogList = () => {
Service.Hades('public/hades/queryCategoryTree', { source: 0, tenantId: User.getStoreId(), count: false, userId: User.getUserId() }).then((res) => { Service.Hades('public/hades/queryCategoryTree', { source: 0, tenantId: User.getStoreId(), count: false, userId: User.getUserId() }).then((res) => {
const { categoryList = [] } = res.result const { categoryList = [] } = res.result;
this.setState({ this.setState({
categoryList, categoryList,
courseCatalogList: this.renderTreeNodes(categoryList), courseCatalogList: this.renderTreeNodes(categoryList),
}) });
}) });
} };
renderTreeNodes = (data) => { renderTreeNodes = (data) => {
let newTreeData = data.map((item) => { let newTreeData = data.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;
if (item.sonCategoryList) { if (item.sonCategoryList) {
item.children = this.renderTreeNodes(item.sonCategoryList) item.children = this.renderTreeNodes(item.sonCategoryList);
} }
return item return item;
}) });
return newTreeData return newTreeData;
} };
checkDetail = (courseId) => { checkDetail = (courseId) => {
return Service.Hades('public/hades/getOfflineCourseDetail', { return Service.Hades('public/hades/getOfflineCourseDetail', {
courseId, courseId,
}).then((res) => { }).then((res) => {
const { courseState } = res.result const { courseState } = res.result;
return courseState === 'UN_START' return courseState === 'UN_START';
}) });
} };
// 获取线下课详情 // 获取线下课详情
handleFetchScheudleDetail = (courseId) => { handleFetchScheudleDetail = (courseId) => {
return Service.Hades('public/hades/getOfflineCourseDetail', { return Service.Hades('public/hades/getOfflineCourseDetail', {
courseId, courseId,
}).then((res) => { }).then((res) => {
const { result = {} } = res || {} const { result = {} } = res || {};
const { const {
courseName, courseName,
courseState,
categoryId, categoryId,
offlinePlace, offlinePlace,
whetherVisitorsJoin, whetherVisitorsJoin,
...@@ -185,29 +183,29 @@ class AddOfflineCourse extends React.Component { ...@@ -185,29 +183,29 @@ class AddOfflineCourse extends React.Component {
signInType, signInType,
signOutType, signOutType,
whetherHaveApply, whetherHaveApply,
} = result } = 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;
}) });
this.setState({ this.setState({
loadintroduce: !hasIntro, loadintroduce: !hasIntro,
coverId, coverId,
...@@ -239,9 +237,9 @@ class AddOfflineCourse extends React.Component { ...@@ -239,9 +237,9 @@ class AddOfflineCourse extends React.Component {
signInType, signInType,
signOutType, signOutType,
isEditDisablie: whetherHaveApply === 'YES', isEditDisablie: whetherHaveApply === 'YES',
}) });
}) });
} };
getTextDetail = (key, url) => { getTextDetail = (key, url) => {
$.ajax({ $.ajax({
...@@ -250,13 +248,13 @@ class AddOfflineCourse extends React.Component { ...@@ -250,13 +248,13 @@ class AddOfflineCourse 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, categoryId, whetherVisitorsJoin } = this.state const { coverId, videoName, videoDuration, courseName, categoryId, whetherVisitorsJoin } = this.state;
if (videoName || videoDuration || categoryId || courseName || coverId || whetherVisitorsJoin !== whetherVisitorsJoin) { if (videoName || videoDuration || categoryId || courseName || coverId || whetherVisitorsJoin !== whetherVisitorsJoin) {
Modal.confirm({ Modal.confirm({
title: '确认要返回吗?', title: '确认要返回吗?',
...@@ -267,15 +265,15 @@ class AddOfflineCourse extends React.Component { ...@@ -267,15 +265,15 @@ class AddOfflineCourse extends React.Component {
onOk: () => { onOk: () => {
window.RCHistory.push({ window.RCHistory.push({
pathname: `/offline-course`, pathname: `/offline-course`,
}) });
}, },
}) });
} else { } else {
window.RCHistory.push({ window.RCHistory.push({
pathname: `/offline-course`, pathname: `/offline-course`,
}) });
} }
} };
// 显示预览弹窗 // 显示预览弹窗
handleShowPreviewModal = () => { handleShowPreviewModal = () => {
...@@ -301,7 +299,7 @@ class AddOfflineCourse extends React.Component { ...@@ -301,7 +299,7 @@ class AddOfflineCourse extends React.Component {
signOutStartTimeUnit, signOutStartTimeUnit,
signOutEndTimeNum, signOutEndTimeNum,
signOutEndTimeUnit, signOutEndTimeUnit,
} = this.state } = this.state;
const data = { const data = {
coverUrl, coverUrl,
...@@ -325,96 +323,27 @@ class AddOfflineCourse extends React.Component { ...@@ -325,96 +323,27 @@ class AddOfflineCourse extends React.Component {
signOutStartTimeUnit, signOutStartTimeUnit,
signOutEndTimeNum, signOutEndTimeNum,
signOutEndTimeUnit, signOutEndTimeUnit,
} };
const previewOfflineModal = ( const previewOfflineModal = (
<PreviewOfflineModal <PreviewOfflineModal
data={data} data={data}
close={() => { close={() => {
this.setState({ this.setState({
previewOfflineModal: null, previewOfflineModal: null,
}) });
}} }}
/> />
) );
this.setState({ previewOfflineModal }) this.setState({ previewOfflineModal });
} };
handleSelectCover = (file) => { handleSelectCover = (file) => {
this.uploadCoverImage(file) this.setState({
} visible: true,
imageFile: file
//上传图片 });
uploadCoverImage = (imageFile) => { };
const { folderName } = imageFile
const fileName = window.random_string(16) + folderName.slice(folderName.lastIndexOf('.'))
const self = this
this.setState(
{
visible: true,
},
() => {
setTimeout(() => {
const okBtnDom = document.querySelector('#headPicModal')
const options = {
size: [500, 282],
ok: okBtnDom,
maxZoom: 3,
style: {
jpgFillColor: 'transparent',
},
done: function (dataUrl) {
clearTimeout(self.timer)
self.timer = setTimeout(() => {
if (self.state.rotate != this.rotate() || self.state.scale != this.scale()) {
const _dataUrl = this.clip()
const cutImageBlob = self.convertBase64UrlToBlob(_dataUrl)
self.setState({
cutImageBlob,
dataUrl: _dataUrl,
rotate: this.rotate(),
scale: this.scale(),
})
}
}, 500)
const cutImageBlob = self.convertBase64UrlToBlob(dataUrl)
self.setState({
cutImageBlob,
dataUrl,
})
setTimeout(() => {
cutFlag = false
}, 2000)
},
fail: (failInfo) => {
message.error('图片上传失败了，请重新上传')
},
loadComplete: function (img) {
setTimeout(() => {
const _dataUrl = this.clip()
self.setState({
dataUrl: _dataUrl,
hasImgReady: true,
})
}, 100)
},
}
const imgUrl = `${imageFile.ossUrl}?${new Date().getTime()}`
if (!this.state.photoclip) {
const _photoclip = new PhotoClip('#headPicModal', options)
_photoclip.load(imgUrl)
this.setState({
photoclip: _photoclip,
})
} else {
this.state.photoclip.clear()
this.state.photoclip.load(imgUrl)
}
}, 200)
}
)
}
//获取resourceId //获取resourceId
getSignature = (blob, fileName) => { getSignature = (blob, fileName) => {
...@@ -426,29 +355,18 @@ class AddOfflineCourse extends React.Component { ...@@ -426,29 +355,18 @@ class AddOfflineCourse 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,
}) });
} };
// base64转换成blob
convertBase64UrlToBlob = (urlData) => {
const bytes = window.atob(urlData.split(',')[1])
const ab = new ArrayBuffer(bytes.length)
const ia = new Uint8Array(ab)
for (let i = 0; i < bytes.length; i++) {
ia[i] = bytes.charCodeAt(i)
}
return new Blob([ab], { type: 'image/png' })
}
preSubmit = () => { preSubmit = () => {
//过期判断 //过期判断
...@@ -457,16 +375,16 @@ class AddOfflineCourse extends React.Component { ...@@ -457,16 +375,16 @@ class AddOfflineCourse extends React.Component {
title: '服务已到期', title: '服务已到期',
content: '当前企业购买的小麦企学院服务已到期，如需继续使用学院功能，请尽快续费购买', content: '当前企业购买的小麦企学院服务已到期，如需继续使用学院功能，请尽快续费购买',
okText: '我知道了', okText: '我知道了',
}) });
return return;
} }
const { courseId } = this.state const { courseId } = this.state;
if (courseId) { if (courseId) {
this.checkDetail(courseId).then((bool) => (bool ? this.handleSubmit() : message.warning('课程已开始，无法继续编辑'))) this.checkDetail(courseId).then((bool) => (bool ? this.handleSubmit() : message.warning('课程已开始，无法继续编辑')));
} else { } else {
this.handleSubmit() this.handleSubmit();
} }
} };
// 保存 // 保存
handleSubmit = () => { handleSubmit = () => {
...@@ -501,22 +419,22 @@ class AddOfflineCourse extends React.Component { ...@@ -501,22 +419,22 @@ class AddOfflineCourse extends React.Component {
signOutEndTimeUnit, signOutEndTimeUnit,
// isMore, // isMore,
editorTextLength, editorTextLength,
} = this.state } = this.state;
let coverObj = { let coverObj = {
contentType: 'COVER', contentType: 'COVER',
mediaContent: coverId, mediaContent: coverId,
mediaType: 'PICTURE', mediaType: 'PICTURE',
mediaUrl: coverUrl, mediaUrl: coverUrl,
} };
let scheduleMediaRequests = [] let scheduleMediaRequests = [];
if (coverId) { if (coverId) {
scheduleMediaRequests = [coverObj] scheduleMediaRequests = [coverObj];
} }
// 编辑且使用默认图时不传 // 编辑且使用默认图时不传
if (pageType === 'edit' && coverUrl === defaultCoverUrl) { if (pageType === 'edit' && coverUrl === defaultCoverUrl) {
scheduleMediaRequests = [] scheduleMediaRequests = [];
} }
const commonParams = { const commonParams = {
categoryId, categoryId,
...@@ -535,33 +453,33 @@ class AddOfflineCourse extends React.Component { ...@@ -535,33 +453,33 @@ class AddOfflineCourse extends React.Component {
calendarTime, calendarTime,
editorTextLength, editorTextLength,
// isMore, // isMore,
} };
if (whetherSetApply === 'YES') { if (whetherSetApply === 'YES') {
commonParams.startTimeApply = startTimeApply commonParams.startTimeApply = startTimeApply;
commonParams.endTimeApply = endTimeApply commonParams.endTimeApply = endTimeApply;
commonParams.quota = quota commonParams.quota = quota;
} }
if (whetherSetSignIn === 'YES') { if (whetherSetSignIn === 'YES') {
commonParams.signInType = signInType commonParams.signInType = signInType;
commonParams.signInTimeNum = signInTimeNum commonParams.signInTimeNum = signInTimeNum;
commonParams.signInTimeUnit = signInTimeUnit commonParams.signInTimeUnit = signInTimeUnit;
} }
if (whetherSetSignOut === 'YES') { if (whetherSetSignOut === 'YES') {
commonParams.signOutType = signOutType commonParams.signOutType = signOutType;
if (commonParams.signOutType === 'START_LATER') { if (commonParams.signOutType === 'START_LATER') {
commonParams.signOutStartTimeNum = signOutStartTimeNum commonParams.signOutStartTimeNum = signOutStartTimeNum;
commonParams.signOutStartTimeUnit = signOutStartTimeUnit commonParams.signOutStartTimeUnit = signOutStartTimeUnit;
} }
commonParams.signOutEndTimeNum = signOutEndTimeNum commonParams.signOutEndTimeNum = signOutEndTimeNum;
commonParams.signOutEndTimeUnit = signOutEndTimeUnit commonParams.signOutEndTimeUnit = signOutEndTimeUnit;
} }
// 校验必填字段:课程名称, 课程线下 // 校验必填字段:课程名称, 课程线下
this.handleValidate(commonParams).then((res) => { this.handleValidate(commonParams).then((res) => {
if (!res) return if (!res) return;
Upload.uploadTextToOSS( Upload.uploadTextToOSS(
introduce, introduce,
`${randomString()}.txt`, `${randomString()}.txt`,
...@@ -571,181 +489,182 @@ class AddOfflineCourse extends React.Component { ...@@ -571,181 +489,182 @@ class AddOfflineCourse extends React.Component {
pageType, pageType,
commonParams, commonParams,
introduceId, introduceId,
}) });
}, },
() => message.warning('上传课程简介失败') () => message.warning('上传课程简介失败')
) );
}) });
} };
submitRemote = (data) => { submitRemote = (data) => {
const { courseId, pageType, commonParams, introduceId } = data const { courseId, pageType, commonParams, introduceId } = data;
commonParams.introduceId = introduceId commonParams.introduceId = introduceId;
if (pageType === 'add') { if (pageType === 'add') {
Service.Hades('public/hades/createOfflineCourse', commonParams).then((res) => { Service.Hades('public/hades/createOfflineCourse', commonParams).then((res) => {
if (!res) return if (!res) return;
message.success('新建成功') message.success('新建成功');
window.RCHistory.push({ window.RCHistory.push({
pathname: `/offline-course`, pathname: `/offline-course`,
}) });
}) });
} else { } else {
const editParams = { const editParams = {
courseId: courseId, courseId: courseId,
...commonParams, ...commonParams,
} };
Service.Hades('public/hades/updateOfflineCourse', editParams).then((res) => { Service.Hades('public/hades/updateOfflineCourse', editParams).then((res) => {
if (!res) return if (!res) return;
message.success('保存成功') message.success('保存成功');
window.RCHistory.push({ window.RCHistory.push({
pathname: `/offline-course`, pathname: `/offline-course`,
}) });
}) });
} }
} };
handleValidate = (data) => { handleValidate = (data) => {
return new Promise((resolve) => { return new Promise((resolve) => {
if (!data.courseName) { if (!data.courseName) {
message.warning('请输入课程名称') message.warning('请输入课程名称');
resolve(false) resolve(false);
} else if (!data.categoryId) { } else if (!data.categoryId) {
message.warning('请选择课程分类') message.warning('请选择课程分类');
resolve(false) resolve(false);
} else if (!data.offlinePlace) { } else if (!data.offlinePlace) {
message.warning('请输入上课地点') message.warning('请输入上课地点');
resolve(false) resolve(false);
} else if (!data.teacherId) { } else if (!data.teacherId) {
message.warning('请选择讲师') message.warning('请选择讲师');
resolve(false) resolve(false);
} else if (_.isEmpty(data.calendarTime)) { } else if (_.isEmpty(data.calendarTime)) {
message.warning('请选择上课日期') message.warning('请选择上课日期');
resolve(false) resolve(false);
} else if (!data.startTime || !data.endTime) { } else if (!data.startTime || !data.endTime) {
message.warning('请选择上课时间') message.warning('请选择上课时间');
resolve(false) resolve(false);
} else if (moment(moment(data.calendarTime[0]).format('YYYY-MM-DD') + moment(data.startTime).format(' HH:mm')).valueOf() < Date.now()) { } else if (moment(moment(data.calendarTime[0]).format('YYYY-MM-DD') + moment(data.startTime).format(' HH:mm')).valueOf() < Date.now()) {
message.warning('上课时间不能早于现在') message.warning('上课时间不能早于现在');
resolve(false) resolve(false);
} else if (data.startTime >= data.endTime) { } else if (data.startTime >= data.endTime) {
message.warning('上课结束时间不能早于上课开始时间') message.warning('上课结束时间不能早于上课开始时间');
resolve(false) resolve(false);
} else if (data.whetherSetApply === 'YES' && !data.startTimeApply) { } else if (data.whetherSetApply === 'YES' && !data.startTimeApply) {
message.warning('请选择报名时间') message.warning('请选择报名时间');
resolve(false) resolve(false);
} else if (data.whetherSetApply === 'YES' && data.startTimeApply >= data.endTimeApply) { } else if (data.whetherSetApply === 'YES' && data.startTimeApply >= data.endTimeApply) {
message.warning('报名结束时间需大于报名开始时间') message.warning('报名结束时间需大于报名开始时间');
resolve(false) resolve(false);
} else if ( } else if (
data.whetherSetApply === 'YES' && data.whetherSetApply === 'YES' &&
data.endTimeApply > moment(moment(data.calendarTime[0]).format('YYYY-MM-DD') + moment(data.endTime).format(' HH:mm:ss')).valueOf() data.endTimeApply > moment(moment(data.calendarTime[0]).format('YYYY-MM-DD') + moment(data.endTime).format(' HH:mm:ss')).valueOf()
) { ) {
message.warning('报名结束时间需小于上课开始时间') message.warning('报名结束时间需小于上课开始时间');
resolve(false) resolve(false);
} else if (data.whetherSetSignIn === 'YES' && !data.signInTimeNum) { } else if (data.whetherSetSignIn === 'YES' && !data.signInTimeNum) {
message.warning('请输入签到时间') message.warning('请输入签到时间');
resolve(false) resolve(false);
} else if (data.whetherSetSignOut === 'YES' && ((data.signOutType === 'START_LATER' && !data.signOutStartTimeNum) || !data.signOutEndTimeNum)) { } else if (data.whetherSetSignOut === 'YES' && ((data.signOutType === 'START_LATER' && !data.signOutStartTimeNum) || !data.signOutEndTimeNum)) {
message.warning('请输入签退时间') message.warning('请输入签退时间');
resolve(false) resolve(false);
} else if (data.editorTextLength > 1000) { } else if (data.editorTextLength > 1000) {
message.warning('课程简介超过字数限定') message.warning('课程简介超过字数限定');
resolve(false) resolve(false);
} else { } else {
resolve(true) resolve(true);
} }
}) });
} };
// 使用默认封面图 // 使用默认封面图
handleResetCoverUrl = () => { handleResetCoverUrl = () => {
const { coverUrl } = this.state const { coverUrl } = this.state;
const isDefaultCover = coverUrl === defaultCoverUrl const isDefaultCover = coverUrl === defaultCoverUrl;
// 如果已经是默认图的话，不做任何任何处理 // 如果已经是默认图的话，不做任何任何处理
if (isDefaultCover) return if (isDefaultCover) return;
message.success('已替换为默认图') message.success('已替换为默认图');
this.setState({ coverUrl: defaultCoverUrl }) this.setState({ coverUrl: defaultCoverUrl });
} };
// 滑动加载更多讲师列表 // 滑动加载更多讲师列表
handleScrollTeacherList = (e) => { handleScrollTeacherList = (e) => {
const { hasNext } = this.state const { hasNext } = this.state;
const container = e.target const container = e.target;
//判定元素是否滚动到底部 //判定元素是否滚动到底部
const scrollToBottom = container && container.scrollHeight <= container.clientHeight + container.scrollTop const scrollToBottom = container && container.scrollHeight <= container.clientHeight + container.scrollTop;
if (scrollToBottom && hasNext) { if (scrollToBottom && hasNext) {
const { teacherQuery } = this.state const { teacherQuery } = this.state;
let _teacherQuery = teacherQuery let _teacherQuery = teacherQuery;
_teacherQuery.current = _teacherQuery.current + 1 _teacherQuery.current = _teacherQuery.current + 1;
this.setState( this.setState(
{ {
teacherQuery: { ..._teacherQuery }, teacherQuery: { ..._teacherQuery },
}, },
() => { () => {
this.getTeacherList(_teacherQuery.current) this.getTeacherList(_teacherQuery.current);
} }
) );
} }
} };
getTeacherList(current = 1, selectList) { getTeacherList(current = 1, selectList) {
const { teacherQuery, teacherList } = this.state const { teacherQuery, teacherList } = this.state;
const _query = { const _query = {
...teacherQuery, ...teacherQuery,
current, current,
size: 15, size: 15,
} };
StoreService.getStoreUserBasicPage(_query).then((res) => { StoreService.getStoreUserBasicPage(_query).then((res) => {
const { result = {} } = res const { result = {} } = res;
const { records = [], total = 0, hasNext } = result const { records = [], hasNext } = result;
const list = current > 1 ? teacherList.concat(records) : records const list = current > 1 ? teacherList.concat(records) : records;
this.setState({ this.setState({
hasNext, hasNext,
teacherList: list, teacherList: list,
teacherQuery: { ..._query }, teacherQuery: { ..._query },
}) });
}) });
} }
changeIntro = (value, textLength) => { changeIntro = (value) => {
// const isMore = textLength > 1000; this.setState({ introduce: value });
// if (isMore) { };
// message.warning('内容过长，不能超过1000字');
// }
this.setState({ introduce: value })
}
selectMultiDate = (calendarTime) => { selectMultiDate = (calendarTime) => {
const dateList = _.sortBy(calendarTime) const dateList = _.sortBy(calendarTime);
this.setState({ this.setState({
calendarTime: dateList, calendarTime: dateList,
}) });
} };
handleChangeDates = (dates) => { handleChangeDates = (dates) => {
const data = {} const data = {};
if (_.isEmpty(dates)) { if (_.isEmpty(dates)) {
data.startTimeApply = undefined data.startTimeApply = undefined;
data.endTimeApply = undefined data.endTimeApply = undefined;
} else { } else {
data.startTimeApply = dates[0].valueOf() data.startTimeApply = dates[0].valueOf();
data.endTimeApply = dates[1].startOf('minute').valueOf() + 59000 data.endTimeApply = dates[1].startOf('minute').valueOf() + 59000;
} }
this.setState(data) this.setState(data);
} };
whetherVisitorsJoinChange = () => { whetherVisitorsJoinChange = () => {
const { whetherSetApply } =this.state;
if(whetherSetApply === 'NO'){
message.warning('关闭报名无法获取手机号!')
return
}
if (this.state.whetherVisitorsJoin === 'NO') { if (this.state.whetherVisitorsJoin === 'NO') {
this.setState({ whetherVisitorsJoin: 'YES' }) this.setState({ whetherVisitorsJoin: 'YES' });
} else { } else {
this.setState({ whetherVisitorsJoin: 'NO' }) this.setState({ whetherVisitorsJoin: 'NO' });
} }
} };
handleChangeCatalogList = (value, label) => { handleChangeCatalogList = (value, label) => {
this.setState({ categoryId: value, categoryName: label[0] }) this.setState({ categoryId: value, categoryName: label[0] });
} };
render() { render() {
const { const {
...@@ -755,14 +674,11 @@ class AddOfflineCourse extends React.Component { ...@@ -755,14 +674,11 @@ class AddOfflineCourse extends React.Component {
coverUrl, coverUrl,
introduce, introduce,
categoryId, categoryId,
categoryList,
courseCatalogList, courseCatalogList,
whetherVisitorsJoin, whetherVisitorsJoin,
loadintroduce, loadintroduce,
showSelectCoverModal, showSelectCoverModal,
visible, visible,
hasImgReady,
cutImageBlob,
teacherId, teacherId,
teacherList, teacherList,
calendarTime, calendarTime,
...@@ -786,8 +702,9 @@ class AddOfflineCourse extends React.Component { ...@@ -786,8 +702,9 @@ class AddOfflineCourse extends React.Component {
quota, quota,
offlinePlace, offlinePlace,
isEditDisablie, isEditDisablie,
} = this.state imageFile,
const isDefaultCover = coverUrl === defaultCoverUrl } = this.state;
const isDefaultCover = coverUrl === defaultCoverUrl;
return ( return (
<div className='page add-offline-course-page'> <div className='page add-offline-course-page'>
<Breadcrumbs navList={pageType === 'add' ? '新建线下课' : '编辑线下课'} goBack={this.handleGoBack} /> <Breadcrumbs navList={pageType === 'add' ? '新建线下课' : '编辑线下课'} goBack={this.handleGoBack} />
...@@ -810,7 +727,7 @@ class AddOfflineCourse extends React.Component { ...@@ -810,7 +727,7 @@ class AddOfflineCourse extends React.Component {
maxLength={40} maxLength={40}
style={{ width: 240 }} style={{ width: 240 }}
onChange={(e) => { onChange={(e) => {
this.setState({ courseName: e.target.value }) this.setState({ courseName: e.target.value });
}} }}
/> />
</div> </div>
...@@ -823,7 +740,7 @@ class AddOfflineCourse extends React.Component { ...@@ -823,7 +740,7 @@ class AddOfflineCourse extends React.Component {
onClick={() => { onClick={() => {
this.setState({ this.setState({
showSelectCoverModal: true, showSelectCoverModal: true,
}) });
}}> }}>
上传图片 上传图片
</Button> </Button>
...@@ -873,7 +790,7 @@ class AddOfflineCourse extends React.Component { ...@@ -873,7 +790,7 @@ class AddOfflineCourse extends React.Component {
style={{ width: 240 }} style={{ width: 240 }}
placeholder='请输入上课地点（40字以内）' placeholder='请输入上课地点（40字以内）'
onChange={(e) => { onChange={(e) => {
this.setState({ offlinePlace: e.target.value }) this.setState({ offlinePlace: e.target.value });
}} }}
/> />
</div> </div>
...@@ -897,22 +814,22 @@ class AddOfflineCourse extends React.Component { ...@@ -897,22 +814,22 @@ class AddOfflineCourse extends React.Component {
} }
onChange={(value, option) => { onChange={(value, option) => {
if (option) { if (option) {
this.setState({ teacherId: value, teacherName: option.children }) this.setState({ teacherId: value, teacherName: option.children });
} else { } else {
this.setState({ teacherId: value, teacherName: '' }) this.setState({ teacherId: value, teacherName: '' });
} }
}} }}
onSearch={(value) => { onSearch={(value) => {
let _teacherQuery = { ...this.state.teacherQuery } let _teacherQuery = { ...this.state.teacherQuery };
_teacherQuery.nickName = value _teacherQuery.nickName = value;
this.setState( this.setState(
{ {
teacherQuery: _teacherQuery, teacherQuery: _teacherQuery,
}, },
() => { () => {
this.getTeacherList() this.getTeacherList();
} }
) );
}} }}
onClear={(value) => { onClear={(value) => {
this.setState( this.setState(
...@@ -924,27 +841,20 @@ class AddOfflineCourse extends React.Component { ...@@ -924,27 +841,20 @@ class AddOfflineCourse extends React.Component {
}, },
}, },
() => { () => {
this.getTeacherList() this.getTeacherList();
} }
) );
}} }}
getPopupContainer={() => document.getElementById('teacher')}> getPopupContainer={() => document.getElementById('teacher')}>
{_.map(teacherList, (item, index) => { {_.map(teacherList, (item) => {
return ( return (
<Option value={item.id} key={item.id}> <Option value={item.id} key={item.id}>
{item.nickName} {item.nickName}
</Option> </Option>
) );
})} })}
</Select> </Select>
</div> </div>
<div className='allow-tourist-join'>
<span className='label'>观看设置：</span>
<div className='content'>
<Switch checked={whetherVisitorsJoin === 'NO' ? true : false} onChange={this.whetherVisitorsJoinChange} />
<div className='desc'>{whetherVisitorsJoin === 'NO' ? '已开启，学员需绑定手机号才可观看' : '已关闭，学员无需绑定手机号即可观看'}</div>
</div>
</div>
<div className='introduce'> <div className='introduce'>
<span className='label'>课程简介：</span> <span className='label'>课程简介：</span>
<div className='content'> <div className='content'>
...@@ -959,7 +869,7 @@ class AddOfflineCourse extends React.Component { ...@@ -959,7 +869,7 @@ class AddOfflineCourse extends React.Component {
content: introduce, content: introduce,
}} }}
onChange={(val) => { onChange={(val) => {
this.changeIntro(val) this.changeIntro(val);
}} }}
/> />
)} )}
...@@ -977,7 +887,7 @@ class AddOfflineCourse extends React.Component { ...@@ -977,7 +887,7 @@ class AddOfflineCourse extends React.Component {
</span> </span>
<div> <div>
<div className='select-day'> <div className='select-day'>
已选 <span className='mark-day'>{isLongArr(calendarTime) ? calendarTime.length : 0}</span> 天 已选 <span className='mark-day'>{window.isLongArr(calendarTime) ? calendarTime.length : 0}</span> 天
</div> </div>
<MultipleDatePicker disabled={isEditDisablie} selectDateList={calendarTime} onSelect={this.selectMultiDate} canSelectTodayBefore={false} /> <MultipleDatePicker disabled={isEditDisablie} selectDateList={calendarTime} onSelect={this.selectMultiDate} canSelectTodayBefore={false} />
</div> </div>
...@@ -996,7 +906,7 @@ class AddOfflineCourse extends React.Component { ...@@ -996,7 +906,7 @@ class AddOfflineCourse extends React.Component {
showNow={false} showNow={false}
style={{ width: 100, minWidth: 100 }} style={{ width: 100, minWidth: 100 }}
onSelect={(time) => { onSelect={(time) => {
this.setState({ startTime: time }) this.setState({ startTime: time });
}} }}
getPopupContainer={() => document.getElementById('hour')} getPopupContainer={() => document.getElementById('hour')}
/> />
...@@ -1010,7 +920,7 @@ class AddOfflineCourse extends React.Component { ...@@ -1010,7 +920,7 @@ class AddOfflineCourse extends React.Component {
showNow={false} showNow={false}
style={{ width: 100, minWidth: 100 }} style={{ width: 100, minWidth: 100 }}
onSelect={(time) => { onSelect={(time) => {
this.setState({ endTime: time }) this.setState({ endTime: time });
}} }}
getPopupContainer={() => document.getElementById('hour')} getPopupContainer={() => document.getElementById('hour')}
/> />
...@@ -1023,7 +933,7 @@ class AddOfflineCourse extends React.Component { ...@@ -1023,7 +933,7 @@ class AddOfflineCourse extends React.Component {
style={{ display: 'inline-block' }} style={{ display: 'inline-block' }}
value={offlineCourseType} value={offlineCourseType}
onChange={(e) => { onChange={(e) => {
this.setState({ offlineCourseType: e.target.value }) this.setState({ offlineCourseType: e.target.value });
}} }}
className='mt5' className='mt5'
disabled={isEditDisablie}> disabled={isEditDisablie}>
...@@ -1048,8 +958,8 @@ class AddOfflineCourse extends React.Component { ...@@ -1048,8 +958,8 @@ class AddOfflineCourse extends React.Component {
startTimeApply: undefined, startTimeApply: undefined,
endTimeApply: undefined, endTimeApply: undefined,
quota: null, quota: null,
whetherVisitorsJoin: value ? whetherVisitorsJoin : 'YES', whetherVisitorsJoin: value ? whetherVisitorsJoin : 'YES'
}) });
}} }}
/> />
<span className='switch-tip'>开启后可设置课程报名时间，获取报名数据</span> <span className='switch-tip'>开启后可设置课程报名时间，获取报名数据</span>
...@@ -1064,10 +974,10 @@ class AddOfflineCourse extends React.Component { ...@@ -1064,10 +974,10 @@ class AddOfflineCourse extends React.Component {
value={startTimeApply ? [moment(startTimeApply), moment(endTimeApply)] : null} value={startTimeApply ? [moment(startTimeApply), moment(endTimeApply)] : null}
format={'YYYY-MM-DD HH:mm'} format={'YYYY-MM-DD HH:mm'}
onChange={(dates) => { onChange={(dates) => {
this.handleChangeDates(dates) this.handleChangeDates(dates);
}} }}
renderExtraFooter={() => renderExtraFooter={() => (
calendarTime[0] ? ( <If condition={calendarTime[0]}>
<div style={{ position: 'absolute', bottom: 8, cursor: 'pointer' }}> <div style={{ position: 'absolute', bottom: 8, cursor: 'pointer' }}>
<span <span
onClick={() => onClick={() =>
...@@ -1127,8 +1037,8 @@ class AddOfflineCourse extends React.Component { ...@@ -1127,8 +1037,8 @@ class AddOfflineCourse extends React.Component {
上课前3天 上课前3天
</span> </span>
</div> </div>
) : null </If>
} )}
/> />
</div> </div>
)} )}
...@@ -1151,7 +1061,7 @@ class AddOfflineCourse extends React.Component { ...@@ -1151,7 +1061,7 @@ class AddOfflineCourse extends React.Component {
style={{ margin: '0 4px', width: 90 }} style={{ margin: '0 4px', width: 90 }}
disabled={oldQuta < 0} disabled={oldQuta < 0}
onChange={(value) => { onChange={(value) => {
this.setState({ quota: value }) this.setState({ quota: value });
}} }}
/> />
<span className='switch-label'>人</span> <span className='switch-label'>人</span>
...@@ -1160,6 +1070,13 @@ class AddOfflineCourse extends React.Component { ...@@ -1160,6 +1070,13 @@ class AddOfflineCourse extends React.Component {
)} )}
</div> </div>
</div> </div>
<div className='allow-tourist-join'>
<span className='label'>观看设置：</span>
<div className='content'>
<Switch checked={whetherVisitorsJoin === 'NO' ? true : false} onChange={this.whetherVisitorsJoinChange} />
<div className='desc'>{whetherVisitorsJoin === 'NO' ? '已开启，仅限绑定了手机号的学员报名线下课' : '已关闭，允许未绑定手机号的学员报名线下课'}</div>
</div>
</div>
<div className='course-catalog'> <div className='course-catalog'>
<span className='label'>考勤签到：</span> <span className='label'>考勤签到：</span>
<div className='switch-box'> <div className='switch-box'>
...@@ -1172,7 +1089,7 @@ class AddOfflineCourse extends React.Component { ...@@ -1172,7 +1089,7 @@ class AddOfflineCourse extends React.Component {
signInType: 'START_AGO', signInType: 'START_AGO',
signInTimeNum: null, signInTimeNum: null,
signInTimeUnit: 'MINUTE', signInTimeUnit: 'MINUTE',
}) });
}} }}
/> />
<span className='switch-tip'>开启后可设置获取签到考勤数据</span> <span className='switch-tip'>开启后可设置获取签到考勤数据</span>
...@@ -1184,7 +1101,7 @@ class AddOfflineCourse extends React.Component { ...@@ -1184,7 +1101,7 @@ class AddOfflineCourse extends React.Component {
style={{ display: 'inline-block' }} style={{ display: 'inline-block' }}
value={signInType} value={signInType}
onChange={(e) => { onChange={(e) => {
this.setState({ signInType: e.target.value }) this.setState({ signInType: e.target.value });
}} }}
className='mt5'> className='mt5'>
<Radio value='START_AGO' className='mr-16'> <Radio value='START_AGO' className='mr-16'>
...@@ -1206,18 +1123,18 @@ class AddOfflineCourse extends React.Component { ...@@ -1206,18 +1123,18 @@ class AddOfflineCourse extends React.Component {
precision={0} precision={0}
style={{ margin: '0 4px', width: 90 }} style={{ margin: '0 4px', width: 90 }}
onChange={(value) => { onChange={(value) => {
this.setState({ signInTimeNum: value }) this.setState({ signInTimeNum: value });
}} }}
/> />
<Select <Select
style={{ width: 72, marginRight: 4 }} style={{ width: 72, marginRight: 4 }}
value={signInTimeUnit} value={signInTimeUnit}
onChange={(value) => { onChange={(value) => {
const data = { signInTimeUnit: value } const data = { signInTimeUnit: value };
if (value === 'HOUR' && signInTimeNum > 24) { if (value === 'HOUR' && signInTimeNum > 24) {
data.signInTimeNum = 24 data.signInTimeNum = 24;
} }
this.setState(data) this.setState(data);
}}> }}>
{unitList.map((item) => ( {unitList.map((item) => (
<Option value={item.key} key={item.key}> <Option value={item.key} key={item.key}>
...@@ -1244,7 +1161,7 @@ class AddOfflineCourse extends React.Component { ...@@ -1244,7 +1161,7 @@ class AddOfflineCourse extends React.Component {
signOutStartTimeUnit: 'MINUTE', signOutStartTimeUnit: 'MINUTE',
signOutEndTimeNum: null, signOutEndTimeNum: null,
signOutEndTimeUnit: 'MINUTE', signOutEndTimeUnit: 'MINUTE',
}) });
}} }}
/> />
<span className='switch-tip'>开启后可设置获取签退考勤数据</span> <span className='switch-tip'>开启后可设置获取签退考勤数据</span>
...@@ -1256,7 +1173,7 @@ class AddOfflineCourse extends React.Component { ...@@ -1256,7 +1173,7 @@ class AddOfflineCourse extends React.Component {
style={{ display: 'inline-block' }} style={{ display: 'inline-block' }}
value={signOutType} value={signOutType}
onChange={(e) => { onChange={(e) => {
this.setState({ signOutType: e.target.value }) this.setState({ signOutType: e.target.value });
}} }}
className='mt5'> className='mt5'>
<Radio value='START_LATER' className='mr-16'> <Radio value='START_LATER' className='mr-16'>
...@@ -1279,7 +1196,7 @@ class AddOfflineCourse extends React.Component { ...@@ -1279,7 +1196,7 @@ class AddOfflineCourse extends React.Component {
precision={0} precision={0}
style={{ margin: '0 4px', width: 90 }} style={{ margin: '0 4px', width: 90 }}
onChange={(value) => { onChange={(value) => {
this.setState({ signOutStartTimeNum: value }) this.setState({ signOutStartTimeNum: value });
}} }}
/> />
)} )}
...@@ -1288,11 +1205,11 @@ class AddOfflineCourse extends React.Component { ...@@ -1288,11 +1205,11 @@ class AddOfflineCourse extends React.Component {
style={{ width: 72, marginRight: 4 }} style={{ width: 72, marginRight: 4 }}
value={signOutStartTimeUnit} value={signOutStartTimeUnit}
onChange={(value) => { onChange={(value) => {
const data = { signOutStartTimeUnit: value } const data = { signOutStartTimeUnit: value };
if (value === 'HOUR' && signOutStartTimeNum > 24) { if (value === 'HOUR' && signOutStartTimeNum > 24) {
data.signOutStartTimeNum = 24 data.signOutStartTimeNum = 24;
} }
this.setState(data) this.setState(data);
}}> }}>
{unitList.map((item) => ( {unitList.map((item) => (
<Option value={item.key} key={item.key}> <Option value={item.key} key={item.key}>
...@@ -1309,18 +1226,18 @@ class AddOfflineCourse extends React.Component { ...@@ -1309,18 +1226,18 @@ class AddOfflineCourse extends React.Component {
precision={0} precision={0}
style={{ margin: '0 4px', width: 90 }} style={{ margin: '0 4px', width: 90 }}
onChange={(value) => { onChange={(value) => {
this.setState({ signOutEndTimeNum: value }) this.setState({ signOutEndTimeNum: value });
}} }}
/> />
<Select <Select
style={{ width: 72, marginRight: 4 }} style={{ width: 72, marginRight: 4 }}
value={signOutEndTimeUnit} value={signOutEndTimeUnit}
onChange={(value) => { onChange={(value) => {
const data = { signOutEndTimeUnit: value } const data = { signOutEndTimeUnit: value };
if (value === 'HOUR' && signOutEndTimeNum > 24) { if (value === 'HOUR' && signOutEndTimeNum > 24) {
data.signOutEndTimeNum = 24 data.signOutEndTimeNum = 24;
} }
this.setState(data) this.setState(data);
}}> }}>
{unitList.map((item) => ( {unitList.map((item) => (
<Option value={item.key} key={item.key}> <Option value={item.key} key={item.key}>
...@@ -1355,70 +1272,25 @@ class AddOfflineCourse extends React.Component { ...@@ -1355,70 +1272,25 @@ class AddOfflineCourse 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}
/> />
)} )}
<Modal {visible && (
title='设置图片' <ImgClipModal
width={1080} visible={visible}
visible={visible} imgUrl={imageFile.ossUrl}
maskClosable={false} onConfirm={this.getSignature}
closeIcon={<span className='icon iconfont modal-close-icon'>&#xe6ef;</span>} onClose={() => {
onCancel={() => { this.setState({ visible: false });
this.setState({ visible: false }) }}
}} />
zIndex={10001} )}
footer={[
<Button
key='back'
onClick={() => {
this.setState({ visible: false })
}}>
重新上传
</Button>,
<Button
key='submit'
type='primary'
disabled={!hasImgReady}
onClick={() => {
if (!cutFlag) {
cutFlag = true
this.refs.hiddenBtn.click()
}
this.getSignature(cutImageBlob)
}}>
确定
</Button>,
]}>
<div className='clip-box'>
<div
id='headPicModal'
ref='headPicModal'
style={{
width: '500px',
height: '430px',
marginBottom: 0,
}}></div>
<div id='clipBtn' style={{ display: 'none' }} ref='hiddenBtn'></div>
<div className='preview-img'>
<div className='title'>效果预览</div>
<div id='preview-url-box' style={{ width: 500, height: 282 }}>
<img src={this.state.dataUrl} style={{ width: '100%' }} alt='' />
</div>
<div className='tip-box'>
<div className='tip'>温馨提示</div>
<div className='tip'>①预览效果图时可能存在延迟，单击左侧图片刷新即可</div>
<div className='tip'>②设置图片时双击可旋转图片，滚动可放大或缩小图片</div>
</div>
</div>
</div>
</Modal>
{this.state.previewOfflineModal} {this.state.previewOfflineModal}
</div> </div>
) );
} }
} }
export default AddOfflineCourse export default AddOfflineCourse;
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