Skip to content

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

fix:修复图文课编辑清空内容后隐藏的bug

parent 96108489
Showing with 258 additions and 269 deletions
src/modules/course-manage/graphics-course/AddGraphicsCourse.jsx
/* /*
* @Author: 吴文洁 * @Author: 吴文洁
* @Date: 2020-08-05 10:07:47 * @Date: 2020-08-05 10:07:47
* @LastEditors: wufan * @LastEditors: fusanqiasng
* @LastEditTime: 2021-05-27 16:37:28 * @LastEditTime: 2021-06-16 18:16:14
* @Description: 图文课新增/编辑页 * @Description: 图文课新增/编辑页
* @Copyright: 杭州杰竞科技有限公司 版权所有 * @Copyright: 杭州杰竞科技有限公司 版权所有
*/ */
import React from 'react'; import React from 'react';
import { Button, Input, Radio, message, Modal,Cascader} from 'antd'; import { Button, Input, Radio, message, Modal, Cascader } from 'antd';
import $ from 'jquery'; import $ from 'jquery';
import { DISK_MAP, FileTypeIcon, FileVerifyMap } from '@/common/constants/academic/lessonEnum'; import { DISK_MAP, FileTypeIcon, FileVerifyMap } from '@/common/constants/academic/lessonEnum';
import { ImgCutModalNew } from '@/components'; import { ImgCutModalNew } from '@/components';
import ShowTips from "@/components/ShowTips"; import ShowTips from '@/components/ShowTips';
import Breadcrumbs from "@/components/Breadcrumbs"; import Breadcrumbs from '@/components/Breadcrumbs';
import AddGraphicsIntro from './components/AddGraphicsIntro'; import AddGraphicsIntro from './components/AddGraphicsIntro';
import SelectStudent from '../modal/select-student'; import SelectStudent from '../modal/select-student';
import SelectPrepareFileModal from '../../prepare-lesson/modal/SelectPrepareFileModal'; import SelectPrepareFileModal from '../../prepare-lesson/modal/SelectPrepareFileModal';
import PreviewGraphicsModal from '../modal/PreviewGraphicsModal'; import PreviewGraphicsModal from '../modal/PreviewGraphicsModal';
import 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 Upload from '@/core/upload'; import Upload from '@/core/upload';
import './AddGraphicsCourse.less'; import './AddGraphicsCourse.less';
const EDIT_BOX_KEY = Math.random(); const EDIT_BOX_KEY = Math.random();
const fieldNames = { label: 'categoryName', value: 'id', children: 'sonCategoryList' }; const fieldNames = { label: 'categoryName', value: 'id', children: 'sonCategoryList' };
//添加课程时课程默认的一些值 //添加课程时课程默认的一些值
const defaultShelfState = 'YES'; const defaultShelfState = 'YES';
const whetherVisitorsJoin = 'NO' const whetherVisitorsJoin = 'NO';
const defaultCoverUrl = 'https://image.xiaomaiketang.com/xm/wFnpZtp2yB.png'; const defaultCoverUrl = 'https://image.xiaomaiketang.com/xm/wFnpZtp2yB.png';
let cutFlag = false; let cutFlag = false;
class AddGraphicsCourse extends React.Component { class AddGraphicsCourse extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
const id = getParameterByName("id"); const id = getParameterByName('id');
const pageType = getParameterByName("type"); const pageType = getParameterByName('type');
this.state = { this.state = {
id, // 图文课ID,编辑的时候从URL上带过来 id, // 图文课ID,编辑的时候从URL上带过来
pageType, // 页面类型: add->新建 edit->编辑 pageType, // 页面类型: add->新建 edit->编辑
imageFile: null, // 需要被截取的图片 imageFile: null, // 需要被截取的图片
courseName: null, // 图文课名称 courseName: null, // 图文课名称
courseMedia: '', courseMedia: '',
introduce: '', introduce: '',
courseMediaId: null, // 图文课链接 courseMediaId: null, // 图文课链接
coverId: null, // 图文封面的recourceId coverId: null, // 图文封面的recourceId
coverUrl: defaultCoverUrl, // 图文课封面 coverUrl: defaultCoverUrl, // 图文课封面
studentList: [], // 上课学员列表 studentList: [], // 上课学员列表
shelfState:'YES', //是否开启学院展示 shelfState: 'YES', //是否开启学院展示
selectedFileList: [], // 已经从资料云盘中勾选的文件 selectedFileList: [], // 已经从资料云盘中勾选的文件
showCutModal: false, // 是否显示截图弹窗 showCutModal: false, // 是否显示截图弹窗
showSelectVideoModal: false, showSelectVideoModal: false,
studentModal: false, studentModal: false,
categoryName:null, //分类名称 categoryName: null, //分类名称
courseCatalogList:[], //分类列表 courseCatalogList: [], //分类列表
categoryId:null, //分类的Id值 categoryId: null, //分类的Id值
whetherVisitorsJoin: 'NO', // 是否允许游客加入 whetherVisitorsJoin: 'NO', // 是否允许游客加入
} };
} }
componentWillMount() { componentWillMount() {
...@@ -76,88 +75,80 @@ class AddGraphicsCourse extends React.Component { ...@@ -76,88 +75,80 @@ class AddGraphicsCourse extends React.Component {
} }
initBus = () => { initBus = () => {
Bus.bind('graphicsEditorImage', this.uploadImage) Bus.bind('graphicsEditorImage', this.uploadImage);
Bus.bind('graphicsEditorVideo', this.uploadVideo) Bus.bind('graphicsEditorVideo', this.uploadVideo);
} };
removeBus = () => { removeBus = () => {
Bus.unbind('graphicsEditorImage', this.uploadImage) Bus.unbind('graphicsEditorImage', this.uploadImage);
Bus.unbind('graphicsEditorVideo', this.uploadVideo) Bus.unbind('graphicsEditorVideo', this.uploadVideo);
} };
uploadImage = () => { uploadImage = () => {
this.setState({ showSelectImageModal: true }) this.setState({ showSelectImageModal: true });
} };
uploadVideo = () => { uploadVideo = () => {
this.setState({ showSelectVideoModal: true }) this.setState({ showSelectVideoModal: true });
} };
//获取分类列表 //获取分类列表
getCourseCatalogList = ()=>{ getCourseCatalogList = () => {
StoreService.getCourseCatalogList({current:1,size:1000}).then((res) => { StoreService.getCourseCatalogList({ current: 1, size: 1000 }).then((res) => {
this.setState({ this.setState({
courseCatalogList:res.result.records courseCatalogList: res.result.records,
}) });
}); });
} };
catalogChange= (value, options) => { catalogChange = (value, options) => {
const changeValueLength = value.length; const changeValueLength = value.length;
switch (changeValueLength){ switch (changeValueLength) {
case 1: case 1:
this.setState({ categoryId: value[0], categoryName: options[0].categoryName }); this.setState({ categoryId: value[0], categoryName: options[0].categoryName });
break; break;
case 2: case 2:
this.setState({ categoryId: value[1], categoryName: `${options[0].categoryName}-${options[1].categoryName}` }); this.setState({ categoryId: value[1], categoryName: `${options[0].categoryName}-${options[1].categoryName}` });
break; break;
default: default:
this.setState({ categoryId: null, categoryName: '' }); this.setState({ categoryId: null, categoryName: '' });
break; break;
} }
} };
// 获取图文课详情 // 获取图文课详情
handleFetchScheudleDetail = (courseId) => { handleFetchScheudleDetail = (courseId) => {
Service.Hades('public/hades/mediaCourseDetail',{ Service.Hades('public/hades/mediaCourseDetail', {
courseId courseId,
}).then((res) => { }).then((res) => {
const { result = {} } = res || {}; const { result = {} } = res || {};
const { const { courseName, shelfState, whetherVisitorsJoin, courseMediaVOS, categoryOneName, categoryTwoName, categoryId } = result;
courseName,
shelfState,
whetherVisitorsJoin,
courseMediaVOS,
categoryOneName,
categoryTwoName,
categoryId
} = result;
let coverId; let coverId;
let coverUrl = this.state.coverUrl; let coverUrl = this.state.coverUrl;
let hasIntro = false; let hasIntro = false;
courseMediaVOS.map((item) => { courseMediaVOS.map((item) => {
switch (item.contentType){ switch (item.contentType) {
case "COVER": case 'COVER':
coverId = item.mediaContent; coverId = item.mediaContent;
coverUrl = item.mediaUrl; coverUrl = item.mediaUrl;
break; break;
case "SCHEDULE": case 'SCHEDULE':
this.getTextDetail('courseMedia', item.mediaUrl); this.getTextDetail('courseMedia', item.mediaUrl);
break; break;
case "INTRO": case 'INTRO':
hasIntro = true; hasIntro = true;
this.getTextDetail('introduce', item.mediaUrl); this.getTextDetail('introduce', item.mediaUrl);
break; break;
default: default:
break; break;
} }
return item; return item;
}) });
let categoryName; let categoryName;
if( categoryTwoName ){ if (categoryTwoName) {
categoryName = `${categoryOneName}-${categoryTwoName}`; categoryName = `${categoryOneName}-${categoryTwoName}`;
}else{ } else {
categoryName = `${categoryOneName}`; categoryName = `${categoryOneName}`;
} }
this.setState({ this.setState({
...@@ -168,74 +159,74 @@ class AddGraphicsCourse extends React.Component { ...@@ -168,74 +159,74 @@ class AddGraphicsCourse extends React.Component {
shelfState, shelfState,
whetherVisitorsJoin, whetherVisitorsJoin,
categoryName, categoryName,
categoryId categoryId,
}); });
}) });
} };
getTextDetail = (key, url) => { getTextDetail = (key, url) => {
$.ajax({ $.ajax({
data: {}, data: {},
type: 'GET', type: 'GET',
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 { const { coverId, videoName, videoDuration, courseName, courseMediaId, categoryId, shelfState, whetherVisitorsJoin } = this.state;
coverId, if (
videoName, videoName ||
videoDuration, videoDuration ||
courseName, courseMediaId ||
courseMediaId, categoryId ||
categoryId, courseName ||
shelfState, coverId ||
whetherVisitorsJoin shelfState !== defaultShelfState ||
} = this.state; whetherVisitorsJoin !== whetherVisitorsJoin
if(videoName || videoDuration || courseMediaId || categoryId || courseName || coverId || shelfState !== defaultShelfState || whetherVisitorsJoin !== whetherVisitorsJoin ){ ) {
Modal.confirm({ Modal.confirm({
title: '确认要返回吗?', title: '确认要返回吗?',
content: '返回后，本次编辑的内容将不被保存。', content: '返回后，本次编辑的内容将不被保存。',
okText: '确认返回', okText: '确认返回',
cancelText: '留在本页', cancelText: '留在本页',
icon: <span className="icon iconfont default-confirm-icon">&#xe6f4;</span>, icon: <span className='icon iconfont default-confirm-icon'>&#xe6f4;</span>,
onOk: () => { onOk: () => {
window.RCHistory.push({ window.RCHistory.push({
pathname: `/graphics-course`, pathname: `/graphics-course`,
}); });
} },
}); });
}else{ } else {
window.RCHistory.push({ window.RCHistory.push({
pathname: `/graphics-course`, pathname: `/graphics-course`,
}); });
} }
} };
// 修改表单 // 修改表单
handleChangeForm = (field, value, coverUrl) => { handleChangeForm = (field, value, coverUrl) => {
this.setState({ this.setState({
[field]: value, [field]: value,
coverUrl: coverUrl ? coverUrl : this.state.coverUrl coverUrl: coverUrl ? coverUrl : this.state.coverUrl,
}); });
} };
// 显示选择学员弹窗 // 显示选择学员弹窗
handleShowSelectStuModal = () => { handleShowSelectStuModal = () => {
this.setState({ studentModal : true }); this.setState({ studentModal: true });
const { studentList, selectedStuList } = this.state; const { studentList, selectedStuList } = this.state;
// const _studentList = _.map(studentList, (item) => { // const _studentList = _.map(studentList, (item) => {
// return item.studentId // return item.studentId
// }) // })
const studentModal = ( const studentModal = (
<SelectStudent <SelectStudent
showTabs={true} showTabs={true}
type="videoCourse" type='videoCourse'
onSelect={this.handleSelectStudent} onSelect={this.handleSelectStudent}
after={true} //表明是不是上课后的状态 after={true} //表明是不是上课后的状态
studentList={studentList} studentList={studentList}
...@@ -245,9 +236,9 @@ class AddGraphicsCourse extends React.Component { ...@@ -245,9 +236,9 @@ class AddGraphicsCourse extends React.Component {
}); });
}} }}
/> />
) );
this.setState({ studentModal }); this.setState({ studentModal });
} };
handleSelectStudent = (studentIds) => { handleSelectStudent = (studentIds) => {
let studentList = []; let studentList = [];
...@@ -255,52 +246,46 @@ class AddGraphicsCourse extends React.Component { ...@@ -255,52 +246,46 @@ class AddGraphicsCourse extends React.Component {
studentList.push({ studentId: item }); studentList.push({ studentId: item });
}); });
// this.setState({ studentModal: null }); // this.setState({ studentModal: null });
this.setState({ studentList }); this.setState({ studentList });
this.setState({ studentModal : false }); this.setState({ studentModal: false });
} };
// 显示预览弹窗 // 显示预览弹窗
handleShowPreviewModal = () => { handleShowPreviewModal = () => {
const { const { coverUrl, courseName, courseMedia, introduce, categoryName } = this.state;
coverUrl,
courseName,
courseMedia,
introduce,
categoryName,
} = this.state;
const courseBasinInfo = { const courseBasinInfo = {
coverUrl, coverUrl,
courseName, courseName,
categoryName categoryName,
} };
const courseIntroInfo = { const courseIntroInfo = {
courseMedia, courseMedia,
introduce, introduce,
} };
const previewGraphicsModal = ( const previewGraphicsModal = (
<PreviewGraphicsModal <PreviewGraphicsModal
courseBasicInfo={courseBasinInfo} courseBasicInfo={courseBasinInfo}
courseIntroInfo={courseIntroInfo} courseIntroInfo={courseIntroInfo}
close={() => { close={() => {
this.setState({ this.setState({
previewGraphicsModal: null previewGraphicsModal: null,
}) });
}} }}
/> />
); );
this.setState({ previewGraphicsModal }); this.setState({ previewGraphicsModal });
} };
handleSelectCover = (file)=> { handleSelectCover = (file) => {
this.uploadCoverImage(file); this.uploadCoverImage(file);
} };
//上传图片 //上传图片
uploadCoverImage = (imageFile) => { uploadCoverImage = (imageFile) => {
const { folderName } = imageFile; const { folderName } = imageFile;
const fileName = window.random_string(16) + folderName.slice(folderName.lastIndexOf(".")); const fileName = window.random_string(16) + folderName.slice(folderName.lastIndexOf('.'));
const self = this; const self = this;
this.setState( this.setState(
{ {
...@@ -308,56 +293,54 @@ class AddGraphicsCourse extends React.Component { ...@@ -308,56 +293,54 @@ class AddGraphicsCourse extends React.Component {
}, },
() => { () => {
setTimeout(() => { setTimeout(() => {
const okBtnDom = document.querySelector("#headPicModal"); const okBtnDom = document.querySelector('#headPicModal');
const options = { const options = {
size: [500, 282], size: [500, 282],
ok: okBtnDom, ok: okBtnDom,
maxZoom: 3, maxZoom: 3,
style: { style: {
jpgFillColor: "transparent", jpgFillColor: 'transparent',
}, },
done: function (dataUrl) { done: function (dataUrl) {
clearTimeout(self.timer); clearTimeout(self.timer);
self.timer = setTimeout(() => { self.timer = setTimeout(() => {
if ((self.state.rotate != this.rotate()) || (self.state.scale != this.scale())) { if (self.state.rotate != this.rotate() || self.state.scale != this.scale()) {
const _dataUrl = this.clip() const _dataUrl = this.clip();
const cutImageBlob = self.convertBase64UrlToBlob(_dataUrl); const cutImageBlob = self.convertBase64UrlToBlob(_dataUrl);
self.setState({ self.setState({
cutImageBlob, cutImageBlob,
dataUrl: _dataUrl, dataUrl: _dataUrl,
rotate: this.rotate(), rotate: this.rotate(),
scale: this.scale() scale: this.scale(),
}) });
} }
}, 500);
}, 500)
const cutImageBlob = self.convertBase64UrlToBlob(dataUrl); const cutImageBlob = self.convertBase64UrlToBlob(dataUrl);
self.setState({ self.setState({
cutImageBlob, cutImageBlob,
dataUrl dataUrl,
}) });
setTimeout(() => { setTimeout(() => {
cutFlag = false; cutFlag = false;
}, 2000); }, 2000);
}, },
fail: (failInfo) => { fail: (failInfo) => {
message.error("图片上传失败了，请重新上传"); message.error('图片上传失败了，请重新上传');
}, },
loadComplete: function (img) { loadComplete: function (img) {
setTimeout(() => { setTimeout(() => {
const _dataUrl = this.clip() const _dataUrl = this.clip();
self.setState({ self.setState({
dataUrl: _dataUrl, dataUrl: _dataUrl,
hasImgReady: true hasImgReady: true,
}) });
}, 100) }, 100);
}, },
}; };
const imgUrl = `${imageFile.ossUrl}?${new Date().getTime()}` const imgUrl = `${imageFile.ossUrl}?${new Date().getTime()}`;
if (!this.state.photoclip) { if (!this.state.photoclip) {
const _photoclip = new PhotoClip("#headPicModal", options); const _photoclip = new PhotoClip('#headPicModal', options);
_photoclip.load(imgUrl); _photoclip.load(imgUrl);
this.setState({ this.setState({
photoclip: _photoclip, photoclip: _photoclip,
...@@ -366,7 +349,6 @@ class AddGraphicsCourse extends React.Component { ...@@ -366,7 +349,6 @@ class AddGraphicsCourse extends React.Component {
this.state.photoclip.clear(); this.state.photoclip.clear();
this.state.photoclip.load(imgUrl); this.state.photoclip.load(imgUrl);
} }
}, 200); }, 200);
} }
); );
...@@ -374,56 +356,48 @@ class AddGraphicsCourse extends React.Component { ...@@ -374,56 +356,48 @@ class AddGraphicsCourse extends React.Component {
//获取resourceId //获取resourceId
getSignature = (blob, fileName) => { getSignature = (blob, fileName) => {
Upload.uploadBlobToOSS(blob, 'cover' + (new Date()).valueOf(),null,'signInfo').then((signInfo) => { Upload.uploadBlobToOSS(blob, 'cover' + new Date().valueOf(), null, 'signInfo').then((signInfo) => {
this.setState({ this.setState(
coverClicpPath:signInfo.fileUrl, {
coverId:signInfo.resourceId, coverClicpPath: signInfo.fileUrl,
visible: false coverId: signInfo.resourceId,
},()=>this.updateCover()) visible: false,
},
() => 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 // base64转换成blob
convertBase64UrlToBlob = (urlData) => { convertBase64UrlToBlob = (urlData) => {
const bytes = window.atob(urlData.split(",")[1]); const bytes = window.atob(urlData.split(',')[1]);
const ab = new ArrayBuffer(bytes.length); const ab = new ArrayBuffer(bytes.length);
const ia = new Uint8Array(ab); const ia = new Uint8Array(ab);
for (let i = 0; i < bytes.length; i++) { for (let i = 0; i < bytes.length; i++) {
ia[i] = bytes.charCodeAt(i); ia[i] = bytes.charCodeAt(i);
} }
return new Blob([ab], { type: "image/png" }); return new Blob([ab], { type: 'image/png' });
}; };
// 保存 // 保存
handleSubmit = () => { handleSubmit = () => {
const { const { id, coverId, pageType, courseName, courseMedia, introduce, categoryId, shelfState, whetherVisitorsJoin } = this.state;
id,
coverId,
pageType,
courseName,
courseMedia,
introduce,
categoryId,
shelfState,
whetherVisitorsJoin,
} = this.state;
const commonParams = { const commonParams = {
categoryId, categoryId,
courseName, courseName,
coverId, coverId,
operatorId:User.getStoreUserId(), operatorId: User.getStoreUserId(),
storeId:User.getStoreId(), storeId: User.getStoreId(),
shelfState, shelfState,
whetherVisitorsJoin, whetherVisitorsJoin,
courseType: 'PICTURE', courseType: 'PICTURE',
...@@ -431,19 +405,29 @@ class AddGraphicsCourse extends React.Component { ...@@ -431,19 +405,29 @@ class AddGraphicsCourse extends React.Component {
// 校验必填字段:课程名称, 课程图文 // 校验必填字段:课程名称, 课程图文
this.handleValidate(courseName, courseMedia, categoryId).then((res) => { this.handleValidate(courseName, courseMedia, categoryId).then((res) => {
if (!res) return; if (!res) return;
Upload.uploadTextToOSS(courseMedia, `${randomString()}.txt`, (courseMediaId) => { Upload.uploadTextToOSS(
Upload.uploadTextToOSS(introduce, `${randomString()}.txt`, (introduceId) => { courseMedia,
this.submitRemote({ `${randomString()}.txt`,
id, (courseMediaId) => {
pageType, Upload.uploadTextToOSS(
commonParams, introduce,
courseMediaId, `${randomString()}.txt`,
introduceId, (introduceId) => {
}); this.submitRemote({
}, () => message.warning('上传课程简介失败')); id,
}, () => message.warning('上传课程内容失败')); pageType,
commonParams,
courseMediaId,
introduceId,
});
},
() => message.warning('上传课程简介失败')
);
},
() => message.warning('上传课程内容失败')
);
}); });
} };
submitRemote = (data) => { submitRemote = (data) => {
const { id, pageType, commonParams, courseMediaId, introduceId } = data; const { id, pageType, commonParams, courseMediaId, introduceId } = data;
...@@ -452,42 +436,42 @@ class AddGraphicsCourse extends React.Component { ...@@ -452,42 +436,42 @@ class AddGraphicsCourse extends React.Component {
if (pageType === 'add') { if (pageType === 'add') {
Service.Hades('public/hades/createMediaCourse', commonParams).then((res) => { Service.Hades('public/hades/createMediaCourse', commonParams).then((res) => {
if (!res) return; if (!res) return;
message.success("新建成功"); message.success('新建成功');
window.RCHistory.push({ window.RCHistory.push({
pathname: `/graphics-course`, pathname: `/graphics-course`,
}); });
}) });
} else { } else {
const editParams = { const editParams = {
courseId:id, courseId: id,
...commonParams, ...commonParams,
} };
Service.Hades('public/hades/editMediaCourse', editParams).then((res) => { Service.Hades('public/hades/editMediaCourse', editParams).then((res) => {
if (!res) return; if (!res) return;
message.success("保存成功"); message.success('保存成功');
window.RCHistory.push({ window.RCHistory.push({
pathname: `/graphics-course`, pathname: `/graphics-course`,
}); });
}); });
} }
} };
handleValidate = (courseName, courseMedia, categoryId) => { handleValidate = (courseName, courseMedia, categoryId) => {
return new Promise((resolve) => { return new Promise((resolve) => {
if (!courseName) { if (!courseName) {
message.warning('请输入课程名称'); message.warning('请输入课程名称');
resolve(false); resolve(false);
return false return false;
} }
if (!courseMedia) { if (!courseMedia) {
message.warning('请输入课程内容'); message.warning('请输入课程内容');
resolve(false); resolve(false);
return false return false;
} }
if(!categoryId){ if (!categoryId) {
message.warning('请选择课程分类'); message.warning('请选择课程分类');
resolve(false); resolve(false);
return false return false;
} }
// const textMedia = scheduleMedia.filter((item) => item.mediaType === 'TEXT'); // const textMedia = scheduleMedia.filter((item) => item.mediaType === 'TEXT');
// for (let i = 0, len = textMedia.length; i < len; i++) { // for (let i = 0, len = textMedia.length; i < len; i++) {
...@@ -499,7 +483,7 @@ class AddGraphicsCourse extends React.Component { ...@@ -499,7 +483,7 @@ class AddGraphicsCourse extends React.Component {
// } // }
resolve(true); resolve(true);
}); });
} };
render() { render() {
const { const {
...@@ -528,58 +512,65 @@ class AddGraphicsCourse extends React.Component { ...@@ -528,58 +512,65 @@ class AddGraphicsCourse extends React.Component {
const hasSelectedStu = studentList.length; const hasSelectedStu = studentList.length;
const courseWareIcon = FileVerifyMap[videoType] ? FileTypeIcon[FileVerifyMap[videoType].type] : FileTypeIcon[videoType]; const courseWareIcon = FileVerifyMap[videoType] ? FileTypeIcon[FileVerifyMap[videoType].type] : FileTypeIcon[videoType];
return ( return (
<div className="page add-graphics-course-page"> <div className='page add-graphics-course-page'>
<Breadcrumbs <Breadcrumbs navList={pageType === 'add' ? '新建图文课' : '编辑图文课'} goBack={this.handleGoBack} />
navList={pageType === "add" ? "新建图文课" : "编辑图文课"}
goBack={this.handleGoBack} <div className='box'>
/> <div className='show-tips'>
<ShowTips message='请遵守国家相关规定，切勿上传低俗色情、暴力恐怖、谣言诈骗、侵权盗版等相关内容，小麦企学院保有依据国家规定及平台规则进行处理的权利' />
<div className="box">
<div className="show-tips">
<ShowTips message="请遵守国家相关规定，切勿上传低俗色情、暴力恐怖、谣言诈骗、侵权盗版等相关内容，小麦企学院保有依据国家规定及平台规则进行处理的权利" />
</div> </div>
<div className="form"> <div className='form'>
<div className="course-name required"> <div className='course-name required'>
<span className="label">课程名称：</span> <span className='label'>课程名称：</span>
<Input <Input
value={courseName} value={courseName}
placeholder="请输入图文课的名称（40字以内）" placeholder='请输入图文课的名称（40字以内）'
maxLength={40} maxLength={40}
style={{ width: 240 }} style={{ width: 240 }}
onChange={(e) => { this.handleChangeForm('courseName', e.target.value)}} onChange={(e) => {
this.handleChangeForm('courseName', e.target.value);
}}
/> />
</div> </div>
<div className="cover-url flex mt16"> <div className='cover-url flex mt16'>
<div className="label">封面图：</div> <div className='label'>封面图：</div>
<div className="cover-url__wrap"> <div className='cover-url__wrap'>
<div className="img-content"> <div className='img-content'>
<img src={coverUrl} /> <img src={coverUrl} />
</div> </div>
<div className="opt-btns"> <div className='opt-btns'>
<Button
<Button onClick={() => { onClick={() => {
this.setState({ this.setState({
showSelectCoverModal: true showSelectCoverModal: true,
}); });
}}>{`${(pageType === 'add' && !coverUrl) ? '上传' : '修改'}封面`}</Button> }}>{`${pageType === 'add' && !coverUrl ? '上传' : '修改'}封面`}</Button>
<div className="tips">建议尺寸1280*720px或16:9。封面图最大5M，支持jpg、jpeg和png。</div> <div className='tips'>建议尺寸1280*720px或16:9。封面图最大5M，支持jpg、jpeg和png。</div>
</div> </div>
</div> </div>
</div> </div>
<div className="course-catalog required"> <div className='course-catalog required'>
<span className="label">课程分类：</span> <span className='label'>课程分类：</span>
{ (pageType === 'add') && <Cascader
<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>}/> value={categoryName ? [categoryName] : undefined}
} options={courseCatalogList}
{ (pageType === 'edit' && categoryName ) && displayRender={(label) => label.join('-')}
<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>}/> fieldNames={fieldNames}
} onChange={this.catalogChange}
style={{ width: 240 }}
placeholder='请选择课程分类'
suffixIcon={
<span className='icon iconfont' style={{ fontSize: '12px', color: '#BFBFBF' }}>
&#xe835;
</span>
}
/>
</div> </div>
<div className="intro-info mt16"> <div className='intro-info mt16'>
<AddGraphicsIntro <AddGraphicsIntro
data={{ data={{
id, id,
...@@ -596,49 +587,50 @@ class AddGraphicsCourse extends React.Component { ...@@ -596,49 +587,50 @@ class AddGraphicsCourse extends React.Component {
</div> </div>
</div> </div>
<div className="footer shrink-footer"> <div className='footer shrink-footer'>
<Button onClick={this.handleGoBack}>取消</Button> <Button onClick={this.handleGoBack}>取消</Button>
<Button onClick={this.handleShowPreviewModal}>预览</Button> <Button onClick={this.handleShowPreviewModal}>预览</Button>
<Button type="primary" onClick={_.debounce(() => this.handleSubmit(), 3000, true)}>保存</Button> <Button type='primary' onClick={_.debounce(() => this.handleSubmit(), 3000, true)}>
保存
</Button>
</div> </div>
{showSelectCoverModal && {showSelectCoverModal && (
<SelectPrepareFileModal <SelectPrepareFileModal
key="basic" key='basic'
operateType="select" operateType='select'
multiple={false} multiple={false}
accept="image/jpeg,image/png,image/jpg" accept='image/jpeg,image/png,image/jpg'
selectTypeList={['JPG', 'JPEG', 'PNG']} selectTypeList={['JPG', 'JPEG', 'PNG']}
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 <Modal
title="设置图片" title='设置图片'
width={1080} width={1080}
visible={visible} visible={visible}
maskClosable={false} maskClosable={false}
closeIcon={<span className="icon iconfont modal-close-icon">&#xe6ef;</span>} closeIcon={<span className='icon iconfont modal-close-icon'>&#xe6ef;</span>}
onCancel={() => { onCancel={() => {
this.setState({ visible: false }); this.setState({ visible: false });
}} }}
zIndex={10001} zIndex={10001}
footer={[ footer={[
<Button <Button
key="back" key='back'
onClick={() => { onClick={() => {
this.setState({ visible: false }); this.setState({ visible: false });
}} }}>
>
重新上传 重新上传
</Button>, </Button>,
<Button <Button
key="submit" key='submit'
type="primary" type='primary'
disabled={!hasImgReady} disabled={!hasImgReady}
onClick={() => { onClick={() => {
if (!cutFlag) { if (!cutFlag) {
...@@ -646,39 +638,36 @@ class AddGraphicsCourse extends React.Component { ...@@ -646,39 +638,36 @@ class AddGraphicsCourse extends React.Component {
this.refs.hiddenBtn.click(); this.refs.hiddenBtn.click();
} }
this.getSignature(cutImageBlob); this.getSignature(cutImageBlob);
}} }}>
>
确定 确定
</Button>, </Button>,
]} ]}>
> <div className='clip-box'>
<div className="clip-box">
<div <div
id="headPicModal" id='headPicModal'
ref="headPicModal" ref='headPicModal'
style={{ style={{
width: "500px", width: '500px',
height: "430px", height: '430px',
marginBottom: 0, marginBottom: 0,
}} }}></div>
></div> <div id='clipBtn' style={{ display: 'none' }} ref='hiddenBtn'></div>
<div id="clipBtn" style={{ display: "none" }} ref="hiddenBtn"></div> <div className='preview-img'>
<div className="preview-img"> <div className='title'>效果预览</div>
<div className="title">效果预览</div> <div id='preview-url-box' style={{ width: 500, height: 282 }}>
<div id="preview-url-box" style={{width:500,height:282}}> <img src={this.state.dataUrl} style={{ width: '100%' }} alt='' />
<img src={this.state.dataUrl} style={{ width: '100%' }} alt="" />
</div> </div>
<div className="tip-box"> <div className='tip-box'>
<div className="tip">温馨提示</div> <div className='tip'>温馨提示</div>
<div className="tip">①预览效果图时可能存在延迟，单击左侧图片刷新即可</div> <div className='tip'>①预览效果图时可能存在延迟，单击左侧图片刷新即可</div>
<div className="tip">②设置图片时双击可旋转图片，滚动可放大或缩小图片</div> <div className='tip'>②设置图片时双击可旋转图片，滚动可放大或缩小图片</div>
</div> </div>
</div> </div>
</div> </div>
</Modal> </Modal>
{ this.state.previewGraphicsModal } {this.state.previewGraphicsModal}
</div> </div>
) );
} }
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment