Skip to content

X
xiaomai-cloud-class-web
Commit 2d51dea1 by guomingpang
Options

feat:课程管理增加分类公共组件，修改学院装修banner上传尺寸

parents 6f173dcd 64195835
Showing with 1272 additions and 1385 deletions
src/modules/common/CourseCatalogSelect.jsx 0 → 100644
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 {
showSearch = true,
value = '',
treeNodeFilterProp = 'title',
style = { width: 240 },
dropdownStyle = { maxHeight: 300, overflow: 'auto' },
placeholder = '请选择课程类型',
allowClear = true,
onChange = () => {},
} = props
let [courseCatalogList, setCourseCatalogList] = useState([])
useEffect(() => {
//获取分类列表
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 (item.sonCategoryList) {
item.children = renderTreeNodes(item.sonCategoryList)
}
return item
})
return newTreeData
}
getCourseCatalogList()
}, [])
return (
<TreeSelect
treeNodeLabelProp='categoryName'
showSearch={showSearch}
treeNodeFilterProp={treeNodeFilterProp}
style={style}
value={value}
dropdownStyle={dropdownStyle}
treeData={courseCatalogList}
placeholder={placeholder}
allowClear={allowClear}
treeDefaultExpandAll
onChange={(value, label) => {
onChange(value, label)
}}
/>
)
}
export default CourseCatalogSelect
src/modules/common/index.js 0 → 100644
export { default as RangePicker } from './DateRangePicker'
export { default as CourseCatalogSelect } from './CourseCatalogSelect'
src/modules/course-manage/components/AddLiveBasic.jsx
...@@ -6,25 +6,21 @@ ...@@ -6,25 +6,21 @@
* @Description: 新建/编辑直播课-基本信息 * @Description: 新建/编辑直播课-基本信息
*/ */
import React from 'react'; import React from 'react'
import { Input, Button, message, Cascader, Modal } from 'antd'; import { Input, Button, message, Cascader } from 'antd'
import UploadOss from '@/core/upload'; import { CourseCatalogSelect } from '@/modules/common'
import { ImgCutModalNew } from '@/components'; import StoreService from '@/domains/store-domain/storeService'
import StoreService from '@/domains/store-domain/storeService'; import SelectPrepareFileModal from '@/modules/prepare-lesson/modal/SelectPrepareFileModal'
import SelectPrepareFileModal from '@/modules/prepare-lesson/modal/SelectPrepareFileModal'; import Upload from '@/core/upload'
import Upload from '@/core/upload';
import Cropper from 'react-cropper';
import ImgClipModal from '@/components/ImgClipModal' import ImgClipModal from '@/components/ImgClipModal'
import 'cropperjs/dist/cropper.css'; import 'cropperjs/dist/cropper.css'
import './AddLiveBasic.less'; import './AddLiveBasic.less'
const defaultCover = 'https://image.xiaomaiketang.com/xm/Yip2YtFDwH.png'; const defaultCover = 'https://image.xiaomaiketang.com/xm/Yip2YtFDwH.png'
const fieldNames = { label: 'categoryName', value: 'id', children: 'sonCategoryList' }; const fieldNames = { label: 'categoryName', value: 'id', children: 'sonCategoryList' }
let cutFlag = false;
let timer = null;
class AddLiveBasic extends React.Component { class AddLiveBasic extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props)
this.state = { this.state = {
imageFile: null, imageFile: null,
showCutModal: false, showCutModal: false,
...@@ -32,63 +28,50 @@ class AddLiveBasic extends React.Component { ...@@ -32,63 +28,50 @@ class AddLiveBasic extends React.Component {
showSelectFileModal: false, showSelectFileModal: false,
cutImageBlob: null, cutImageBlob: null,
hasImgReady: false, // 图片是否上传成功 hasImgReady: false, // 图片是否上传成功
cropperInstace:null cropperInstace: null,
} }
} }
componentWillUnmount() {} componentWillUnmount() {}
componentDidMount() { componentDidMount() {
this.getCourseCatalogList(); this.getCourseCatalogList()
} }
getCourseCatalogList = () => { getCourseCatalogList = () => {
StoreService.getCourseCatalogList({ current: 1, size: 1000 }).then((res) => { StoreService.getCourseCatalogList({ current: 1, size: 1000 }).then((res) => {
this.setState({ this.setState({
courseCatalogList: res.result.records, courseCatalogList: res.result.records,
}); })
}); })
} }
// 使用默认封面图 // 使用默认封面图
handleResetCoverUrl = () => { handleResetCoverUrl = () => {
const { const {
data: { coverUrl }, data: { coverUrl },
} = this.props; } = this.props
const isDefaultCover = coverUrl === defaultCover; const isDefaultCover = coverUrl === defaultCover
// 如果已经是默认图的话，不做任何任何处理 // 如果已经是默认图的话，不做任何任何处理
if (isDefaultCover) return; if (isDefaultCover) return
message.success('已替换为默认图'); message.success('已替换为默认图')
this.props.onChange('coverUrl', defaultCover); this.props.onChange('coverUrl', defaultCover)
setTimeout(() => { setTimeout(() => {
this.props.onChange('coverId', null); this.props.onChange('coverId', null)
}, 1000); }, 1000)
}; }
catalogChange = (value) => { handleChangeCatalogList = (value) => {
const changeValueLength = value.length; this.props.onChange('categoryId', value)
switch (changeValueLength) {
case 1:
this.props.onChange('categoryId', value[0]);
break;
case 2:
this.props.onChange('categoryId', value[1]);
break;
default:
this.props.onChange('categoryId', null);
break;
} }
};
handleSelectCover = (file) => { handleSelectCover = (file) => {
this.setState({ this.setState({
visible: true, visible: true,
imageFile:file imageFile: file,
}); })
} }
//获取resourceId //获取resourceId
getSignature = (blob, fileName) => { getSignature = (blob) => {
const { choosedBannerId } = this.state;
Upload.uploadBlobToOSS(blob, 'cover' + new Date().valueOf(), null, 'signInfo').then((signInfo) => { Upload.uploadBlobToOSS(blob, 'cover' + new Date().valueOf(), null, 'signInfo').then((signInfo) => {
this.setState( this.setState(
{ {
...@@ -97,26 +80,25 @@ class AddLiveBasic extends React.Component { ...@@ -97,26 +80,25 @@ class AddLiveBasic extends React.Component {
visible: false, visible: false,
}, },
() => this.updateCover() () => this.updateCover()
); )
}); })
}; }
updateCover = () =>{ updateCover = () => {
const {coverClicpPath,coverId} = this.state const { coverClicpPath, coverId } = this.state
this.setState({ this.setState({
showSelectFileModal: false, showSelectFileModal: false,
}); })
this.props.onChange('coverUrl', coverClicpPath); this.props.onChange('coverUrl', coverClicpPath)
setTimeout(() => { setTimeout(() => {
this.props.onChange('coverId', coverId); this.props.onChange('coverId', coverId)
}, 1000); }, 1000)
}; }
render() { render() {
const { showCutModal, imageFile, courseCatalogList, showSelectFileModal, visible, cutImageBlob, hasImgReady } = this.state; const { imageFile, showSelectFileModal, visible } = this.state
const { data, pageType, isEdit } = this.props; const { data } = this.props
const { courseName, categoryName, coverUrl } = data; const { courseName, coverUrl, categoryId } = data
const fileName = '';
// 当前是否使用的是默认图片 // 当前是否使用的是默认图片
const isDefaultCover = coverUrl === defaultCover; const isDefaultCover = coverUrl === defaultCover
return ( return (
<div className='add-live__basic-info'> <div className='add-live__basic-info'>
<div className='course-name'> <div className='course-name'>
...@@ -129,7 +111,7 @@ class AddLiveBasic extends React.Component { ...@@ -129,7 +111,7 @@ class AddLiveBasic extends React.Component {
maxLength={40} maxLength={40}
style={{ width: 240 }} style={{ width: 240 }}
onChange={(e) => { onChange={(e) => {
this.props.onChange('courseName', e.target.value); this.props.onChange('courseName', e.target.value)
}} }}
/> />
</div> </div>
...@@ -142,7 +124,7 @@ class AddLiveBasic extends React.Component { ...@@ -142,7 +124,7 @@ class AddLiveBasic extends React.Component {
onClick={() => { onClick={() => {
this.setState({ this.setState({
showSelectFileModal: true, showSelectFileModal: true,
}); })
}}> }}>
上传图片 上传图片
</Button> </Button>
...@@ -161,40 +143,14 @@ class AddLiveBasic extends React.Component { ...@@ -161,40 +143,14 @@ class AddLiveBasic extends React.Component {
<span className='label'> <span className='label'>
<span className='require'>*</span>课程分类： <span className='require'>*</span>课程分类：
</span> </span>
{pageType === 'add' && ( <CourseCatalogSelect
<Cascader value={categoryId}
options={courseCatalogList} onChange={(value, label) => {
displayRender={(label) => label.join('-')} this.handleChangeCatalogList(value, label)
fieldNames={fieldNames} }}
onChange={this.catalogChange}
style={{ width: 240 }}
placeholder='请选择课程分类'
suffixIcon={
<span className='icon iconfont' style={{ fontSize: '12px', color: '#BFBFBF' }}>
&#xe835;
</span>
}
/>
)}
{pageType === 'edit' && categoryName && (
<Cascader
disabled={!isEdit ? true : false}
defaultValue={[categoryName]}
options={courseCatalogList}
displayRender={(label) => label.join('-')}
fieldNames={fieldNames}
onChange={this.catalogChange}
style={{ width: 240 }}
placeholder='请选择课程分类'
suffixIcon={
<span className='icon iconfont' style={{ fontSize: '12px', color: '#BFBFBF' }}>
&#xe835;
</span>
}
/> />
)}
</div> </div>
{showSelectFileModal && {showSelectFileModal && (
<SelectPrepareFileModal <SelectPrepareFileModal
key='basic' key='basic'
operateType='select' operateType='select'
...@@ -204,17 +160,24 @@ class AddLiveBasic extends React.Component { ...@@ -204,17 +160,24 @@ class AddLiveBasic extends React.Component {
tooltip='支持文件类型：jpg、jpeg、png' tooltip='支持文件类型：jpg、jpeg、png'
isOpen={showSelectFileModal} isOpen={showSelectFileModal}
onClose={() => { onClose={() => {
this.setState({ showSelectFileModal: false }); this.setState({ showSelectFileModal: false })
}} }}
onSelect={this.handleSelectCover} onSelect={this.handleSelectCover}
/> />
} )}
{ visible && {visible && (
<ImgClipModal visible={visible} imgUrl={imageFile.ossUrl} onConfirm={this.getSignature} onClose={()=>{this.setState({ visible: false });}}/> <ImgClipModal
} visible={visible}
imgUrl={imageFile.ossUrl}
onConfirm={this.getSignature}
onClose={() => {
this.setState({ visible: false })
}}
/>
)}
</div> </div>
); )
} }
} }
export default AddLiveBasic; export default AddLiveBasic
src/modules/course-manage/graphics-course/AddGraphicsCourse.jsx
...@@ -7,44 +7,35 @@ ...@@ -7,44 +7,35 @@
* @Copyright: 杭州杰竞科技有限公司 版权所有 * @Copyright: 杭州杰竞科技有限公司 版权所有
*/ */
import React from 'react'; import React from 'react'
import { Button, Input, Radio, message, Modal, Cascader } from 'antd'; import { Button, Input, message, Modal } from 'antd'
import $ from 'jquery'; import $ from 'jquery'
import moment from 'moment'; import moment from 'moment'
import { DISK_MAP, FileTypeIcon, FileVerifyMap } from '@/common/constants/academic/lessonEnum'; import { CourseCatalogSelect } from '@/modules/common'
import { ImgCutModalNew } from '@/components'; import ShowTips from '@/components/ShowTips'
import ShowTips from '@/components/ShowTips'; import Breadcrumbs from '@/components/Breadcrumbs'
import Breadcrumbs from '@/components/Breadcrumbs'; import AddGraphicsIntro from './components/AddGraphicsIntro'
import AddGraphicsIntro from './components/AddGraphicsIntro'; import SelectStudent from '../modal/select-student'
import SelectStudent from '../modal/select-student'; import SelectPrepareFileModal from '../../prepare-lesson/modal/SelectPrepareFileModal'
import SelectPrepareFileModal from '../../prepare-lesson/modal/SelectPrepareFileModal'; import PreviewGraphicsModal from '../modal/PreviewGraphicsModal'
import PreviewGraphicsModal from '../modal/PreviewGraphicsModal'; import Service from '@/common/js/service'
import StoreService from '@/domains/store-domain/storeService'; import { randomString } from '@/domains/basic-domain/utils'
import Service from '@/common/js/service'; import User from '@/common/js/user'
import { randomString } from '@/domains/basic-domain/utils'; import _ from 'underscore'
import User from '@/common/js/user'; import Upload from '@/core/upload'
import _ from 'underscore';
import Upload from '@/core/upload';
import ImgClipModal from '@/components/ImgClipModal' import ImgClipModal from '@/components/ImgClipModal'
import './AddGraphicsCourse.less'; import './AddGraphicsCourse.less'
import Bus from '@/core/bus'; import Bus from '@/core/bus'
const EDIT_BOX_KEY = Math.random();
const fieldNames = { label: 'categoryName', value: 'id', children: 'sonCategoryList' };
//添加课程时课程默认的一些值 //添加课程时课程默认的一些值
const defaultShelfState = 'YES'; const defaultShelfState = 'YES'
const whetherVisitorsJoin = 'NO'; const defaultCover = 'https://image.xiaomaiketang.com/xm/wFnpZtp2yB.png'
const defaultCover = 'https://image.xiaomaiketang.com/xm/wFnpZtp2yB.png';
let cutFlag = false;
class AddGraphicsCourse extends React.Component { class AddGraphicsCourse extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props)
const id = getParameterByName('id')
const id = getParameterByName('id'); const pageType = getParameterByName('type')
const pageType = getParameterByName('type');
this.state = { this.state = {
id, // 图文课ID,编辑的时候从URL上带过来 id, // 图文课ID,编辑的时候从URL上带过来
pageType, // 页面类型: add->新建 edit->编辑 pageType, // 页面类型: add->新建 edit->编辑
...@@ -61,103 +52,72 @@ class AddGraphicsCourse extends React.Component { ...@@ -61,103 +52,72 @@ class AddGraphicsCourse extends React.Component {
showCutModal: false, // 是否显示截图弹窗 showCutModal: false, // 是否显示截图弹窗
showSelectVideoModal: false, showSelectVideoModal: false,
studentModal: false, studentModal: false,
categoryName: null, //分类名称 categoryName: '',
courseCatalogList: [], //分类列表
categoryId: null, //分类的Id值 categoryId: null, //分类的Id值
whetherVisitorsJoin: 'NO', // 是否允许游客加入 whetherVisitorsJoin: 'NO', // 是否允许游客加入
}; }
} }
componentWillMount() { componentWillMount() {
const { id, pageType } = this.state; const { id, pageType } = this.state
this.getCourseCatalogList();
if (pageType === 'edit') { if (pageType === 'edit') {
this.handleFetchScheudleDetail(id); this.handleFetchScheudleDetail(id)
} }
Bus.bind('editorLimit', (editorTextLength, editorType) => { Bus.bind('editorLimit', (editorTextLength, editorType) => {
this.setState({ this.setState({
[editorType]: editorTextLength, [editorType]: editorTextLength,
}); })
}); })
} }
initBus = () => { initBus = () => {
Bus.bind('graphicsEditorImage', this.uploadImage); Bus.bind('graphicsEditorImage', this.uploadImage)
Bus.bind('graphicsEditorVideo', this.uploadVideo); Bus.bind('graphicsEditorVideo', this.uploadVideo)
}; }
removeBus = () => { removeBus = () => {
Bus.unbind('graphicsEditorImage', this.uploadImage); Bus.unbind('graphicsEditorImage', this.uploadImage)
Bus.unbind('graphicsEditorVideo', this.uploadVideo); Bus.unbind('graphicsEditorVideo', this.uploadVideo)
}; }
uploadImage = () => { uploadImage = () => {
this.setState({ showSelectImageModal: true }); this.setState({ showSelectImageModal: true })
}; }
uploadVideo = () => { uploadVideo = () => {
this.setState({ showSelectVideoModal: true }); this.setState({ showSelectVideoModal: true })
};
//获取分类列表
getCourseCatalogList = () => {
StoreService.getCourseCatalogList({ current: 1, size: 1000 }).then((res) => {
this.setState({
courseCatalogList: res.result.records,
});
});
};
catalogChange = (value, options) => {
const changeValueLength = value.length;
switch (changeValueLength) {
case 1:
this.setState({ categoryId: value[0], categoryName: options[0].categoryName });
break;
case 2:
this.setState({ categoryId: value[1], categoryName: `${options[0].categoryName}-${options[1].categoryName}` });
break;
default:
this.setState({ categoryId: null, categoryName: '' });
break;
} }
};
// 获取图文课详情 // 获取图文课详情
handleFetchScheudleDetail = (courseId) => { handleFetchScheudleDetail = (courseId) => {
Service.Hades('public/hades/mediaCourseDetail', { Service.Hades('public/hades/mediaCourseDetail', {
courseId, courseId,
}).then((res) => { }).then((res) => {
const { result = {} } = res || {}; const { result = {} } = res || {}
const { courseName, shelfState, whetherVisitorsJoin, courseMediaVOS, categoryOneName, categoryTwoName, categoryId } = result; const { courseName, shelfState, whetherVisitorsJoin, courseMediaVOS, categoryId } = result
let coverId; let coverId
let coverUrl = this.state.coverUrl; let coverUrl = this.state.coverUrl
let hasIntro = false; let hasIntro = false
courseMediaVOS.map((item) => { courseMediaVOS.map((item) => {
switch (item.contentType) { switch (item.contentType) {
case 'COVER': case 'COVER':
coverId = item.mediaContent; coverId = item.mediaContent
coverUrl = item.mediaUrl; coverUrl = item.mediaUrl
break; break
case 'SCHEDULE': case 'SCHEDULE':
this.getTextDetail('courseMedia', item.mediaUrl); this.getTextDetail('courseMedia', item.mediaUrl)
break; break
case 'INTRO': case 'INTRO':
hasIntro = true; hasIntro = true
this.getTextDetail('introduce', item.mediaUrl); this.getTextDetail('introduce', item.mediaUrl)
break; break
default: default:
break; break
} }
return item; return item
}); })
let categoryName;
if (categoryTwoName) {
categoryName = `${categoryOneName}-${categoryTwoName}`;
} else {
categoryName = `${categoryOneName}`;
}
this.setState({ this.setState({
loadintroduce: !hasIntro, loadintroduce: !hasIntro,
coverId, coverId,
...@@ -165,11 +125,10 @@ class AddGraphicsCourse extends React.Component { ...@@ -165,11 +125,10 @@ class AddGraphicsCourse extends React.Component {
courseName, courseName,
shelfState, shelfState,
whetherVisitorsJoin, whetherVisitorsJoin,
categoryName,
categoryId, categoryId,
}); })
}); })
}; }
getTextDetail = (key, url) => { getTextDetail = (key, url) => {
$.ajax({ $.ajax({
...@@ -178,13 +137,13 @@ class AddGraphicsCourse extends React.Component { ...@@ -178,13 +137,13 @@ class AddGraphicsCourse extends React.Component {
url, url,
contentType: 'application/x-www-form-urlencoded; charset=UTF-8', contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
success: (res) => { success: (res) => {
this.setState({ [key]: res, [`load${key}`]: true }); this.setState({ [key]: res, [`load${key}`]: true })
}, },
}); })
}; }
handleGoBack = () => { handleGoBack = () => {
const { coverId, videoName, videoDuration, courseName, courseMediaId, categoryId, shelfState, whetherVisitorsJoin } = this.state; const { coverId, videoName, videoDuration, courseName, courseMediaId, categoryId, shelfState, whetherVisitorsJoin } = this.state
if ( if (
videoName || videoName ||
videoDuration || videoDuration ||
...@@ -204,32 +163,28 @@ class AddGraphicsCourse extends React.Component { ...@@ -204,32 +163,28 @@ class AddGraphicsCourse extends React.Component {
onOk: () => { onOk: () => {
window.RCHistory.push({ window.RCHistory.push({
pathname: `/graphics-course`, pathname: `/graphics-course`,
}); })
}, },
}); })
} else { } else {
window.RCHistory.push({ window.RCHistory.push({
pathname: `/graphics-course`, pathname: `/graphics-course`,
}); })
}
} }
};
// 修改表单 // 修改表单
handleChangeForm = (field, value, coverUrl) => { handleChangeForm = (field, value, coverUrl) => {
this.setState({ this.setState({
[field]: value, [field]: value,
coverUrl: coverUrl ? coverUrl : this.state.coverUrl, coverUrl: coverUrl ? coverUrl : this.state.coverUrl,
}); })
}; }
// 显示选择学员弹窗 // 显示选择学员弹窗
handleShowSelectStuModal = () => { handleShowSelectStuModal = () => {
this.setState({ studentModal: true }); this.setState({ studentModal: true })
const { studentList, selectedStuList } = this.state
const { studentList, selectedStuList } = this.state;
// const _studentList = _.map(studentList, (item) => {
// return item.studentId
// })
const studentModal = ( const studentModal = (
<SelectStudent <SelectStudent
showTabs={true} showTabs={true}
...@@ -240,36 +195,40 @@ class AddGraphicsCourse extends React.Component { ...@@ -240,36 +195,40 @@ class AddGraphicsCourse extends React.Component {
close={() => { close={() => {
this.setState({ this.setState({
studentModal: null, studentModal: null,
}); })
}} }}
/> />
); )
this.setState({ studentModal }); this.setState({ studentModal })
}; }
handleChangeCatalogList = (value, label) => {
this.setState({ categoryId: value, categoryName: label[0] })
}
handleSelectStudent = (studentIds) => { handleSelectStudent = (studentIds) => {
let studentList = []; let studentList = []
_.each(studentIds, (item) => { _.each(studentIds, (item) => {
studentList.push({ studentId: item }); studentList.push({ studentId: item })
}); })
// this.setState({ studentModal: null }); // this.setState({ studentModal: null });
this.setState({ studentList }); this.setState({ studentList })
this.setState({ studentModal: false }); this.setState({ studentModal: false })
}; }
// 显示预览弹窗 // 显示预览弹窗
handleShowPreviewModal = () => { handleShowPreviewModal = () => {
const { coverUrl, courseName, courseMedia, introduce, categoryName } = this.state; const { coverUrl, courseName, courseMedia, introduce, categoryName } = this.state
const courseBasinInfo = { const courseBasinInfo = {
coverUrl, coverUrl,
courseName, courseName,
categoryName, categoryName,
}; }
const courseIntroInfo = { const courseIntroInfo = {
courseMedia, courseMedia,
introduce, introduce,
}; }
const previewGraphicsModal = ( const previewGraphicsModal = (
<PreviewGraphicsModal <PreviewGraphicsModal
courseBasicInfo={courseBasinInfo} courseBasicInfo={courseBasinInfo}
...@@ -277,23 +236,23 @@ class AddGraphicsCourse extends React.Component { ...@@ -277,23 +236,23 @@ class AddGraphicsCourse extends React.Component {
close={() => { close={() => {
this.setState({ this.setState({
previewGraphicsModal: null, previewGraphicsModal: null,
}); })
}} }}
/> />
); )
this.setState({ previewGraphicsModal }); this.setState({ previewGraphicsModal })
}; }
handleSelectCover = (file) => { handleSelectCover = (file) => {
this.setState({ this.setState({
visible: true, visible: true,
imageFile:file imageFile: file,
}); })
}; }
//获取resourceId //获取resourceId
getSignature = (blob, fileName) => { getSignature = (blob) => {
Upload.uploadBlobToOSS(blob, 'cover' + new Date().valueOf(), null, 'signInfo').then((signInfo) => { Upload.uploadBlobToOSS(blob, 'cover' + new Date().valueOf(), null, 'signInfo').then((signInfo) => {
this.setState( this.setState(
{ {
...@@ -302,18 +261,18 @@ class AddGraphicsCourse extends React.Component { ...@@ -302,18 +261,18 @@ class AddGraphicsCourse extends React.Component {
visible: false, visible: false,
}, },
() => this.updateCover() () => this.updateCover()
); )
}); })
}; }
updateCover = () => { updateCover = () => {
const { coverClicpPath, coverId } = this.state; const { coverClicpPath, coverId } = this.state
this.setState({ this.setState({
showSelectCoverModal: false, showSelectCoverModal: false,
coverUrl: coverClicpPath, coverUrl: coverClicpPath,
coverId: coverId, coverId: coverId,
}); })
}; }
// 保存 // 保存
handleSubmit = () => { handleSubmit = () => {
...@@ -323,10 +282,10 @@ class AddGraphicsCourse extends React.Component { ...@@ -323,10 +282,10 @@ class AddGraphicsCourse extends React.Component {
title: '服务已到期', title: '服务已到期',
content: '当前企业购买的小麦企学院服务已到期，如需继续使用学院功能，请尽快续费购买', content: '当前企业购买的小麦企学院服务已到期，如需继续使用学院功能，请尽快续费购买',
okText: '我知道了', okText: '我知道了',
}); })
return; return
} }
const { id, coverId, pageType, courseName, courseMedia, introduce, categoryId, shelfState, whetherVisitorsJoin } = this.state; const { id, coverId, pageType, courseName, courseMedia, introduce, categoryId, shelfState, whetherVisitorsJoin } = this.state
const commonParams = { const commonParams = {
categoryId, categoryId,
...@@ -337,10 +296,10 @@ class AddGraphicsCourse extends React.Component { ...@@ -337,10 +296,10 @@ class AddGraphicsCourse extends React.Component {
shelfState, shelfState,
whetherVisitorsJoin, whetherVisitorsJoin,
courseType: 'PICTURE', courseType: 'PICTURE',
}; }
// 校验必填字段:课程名称, 课程图文 // 校验必填字段:课程名称, 课程图文
this.handleValidate(courseName, courseMedia, categoryId).then((res) => { this.handleValidate(courseName, courseMedia, categoryId).then((res) => {
if (!res) return; if (!res) return
Upload.uploadTextToOSS( Upload.uploadTextToOSS(
courseMedia, courseMedia,
`${randomString()}.txt`, `${randomString()}.txt`,
...@@ -355,95 +314,87 @@ class AddGraphicsCourse extends React.Component { ...@@ -355,95 +314,87 @@ class AddGraphicsCourse extends React.Component {
commonParams, commonParams,
courseMediaId, courseMediaId,
introduceId, introduceId,
}); })
}, },
() => message.warning('上传课程简介失败') () => message.warning('上传课程简介失败')
); )
}, },
() => message.warning('上传课程内容失败') () => message.warning('上传课程内容失败')
); )
}); })
}; }
submitRemote = (data) => { submitRemote = (data) => {
const { id, pageType, commonParams, courseMediaId, introduceId } = data; const { id, pageType, commonParams, courseMediaId, introduceId } = data
commonParams.courseMediaId = courseMediaId; commonParams.courseMediaId = courseMediaId
commonParams.introduceId = introduceId; commonParams.introduceId = introduceId
if (pageType === 'add') { if (pageType === 'add') {
Service.Hades('public/hades/createMediaCourse', commonParams).then((res) => { Service.Hades('public/hades/createMediaCourse', commonParams).then((res) => {
if (!res) return; if (!res) return
message.success('新建成功'); message.success('新建成功')
window.RCHistory.push({ window.RCHistory.push({
pathname: `/graphics-course`, pathname: `/graphics-course`,
}); })
}); })
} else { } else {
const editParams = { const editParams = {
courseId: id, courseId: id,
...commonParams, ...commonParams,
}; }
Service.Hades('public/hades/editMediaCourse', editParams).then((res) => { Service.Hades('public/hades/editMediaCourse', editParams).then((res) => {
if (!res) return; if (!res) return
message.success('保存成功'); message.success('保存成功')
window.RCHistory.push({ window.RCHistory.push({
pathname: `/graphics-course`, pathname: `/graphics-course`,
}); })
}); })
}
} }
};
handleValidate = (courseName, courseMedia, categoryId) => { handleValidate = (courseName, courseMedia, categoryId) => {
const { graphicsCourseIntor, graphicsCourseContent } = this.state; const { graphicsCourseIntor, graphicsCourseContent } = this.state
return new Promise((resolve) => { return new Promise((resolve) => {
if (!courseName) { if (!courseName) {
message.warning('请输入课程名称'); message.warning('请输入课程名称')
resolve(false); resolve(false)
return false; return false
} }
if (!courseMedia) { if (!courseMedia) {
message.warning('请输入课程内容'); message.warning('请输入课程内容')
resolve(false); resolve(false)
return false; return false
} }
if (!categoryId) { if (!categoryId) {
message.warning('请选择课程分类'); message.warning('请选择课程分类')
resolve(false); resolve(false)
return false; return false
} }
if (graphicsCourseContent > 1000) { if (graphicsCourseContent > 1000) {
message.warning('课程内容超过字数限定'); message.warning('课程内容超过字数限定')
resolve(false); resolve(false)
return; return
} }
if (graphicsCourseIntor > 1000) { if (graphicsCourseIntor > 1000) {
message.warning('课程简介超过字数限定'); message.warning('课程简介超过字数限定')
resolve(false); resolve(false)
return; return
} }
// const textMedia = scheduleMedia.filter((item) => item.mediaType === 'TEXT'); resolve(true)
// for (let i = 0, len = textMedia.length; i < len; i++) { })
// if (textMedia[i].mediaContentLength && textMedia[i].mediaContentLength.length > 1000) { }
// message.warning(`第${i+1}个文字简介的字数超过了1000个字`);
// resolve(false);
// return false
// }
// }
resolve(true);
});
};
// 使用默认封面图 // 使用默认封面图
handleResetCoverUrl = () => { handleResetCoverUrl = () => {
const { coverUrl } = this.state; const { coverUrl } = this.state
const isDefaultCover = coverUrl === defaultCover; const isDefaultCover = coverUrl === defaultCover
// 如果已经是默认图的话，不做任何任何处理 // 如果已经是默认图的话，不做任何任何处理
if (isDefaultCover) return; if (isDefaultCover) return
this.setState({ coverUrl: defaultCover, coverId: null }, () => { this.setState({ coverUrl: defaultCover, coverId: null }, () => {
message.success('已替换为默认图'); message.success('已替换为默认图')
}); })
}; }
render() { render() {
const { const {
...@@ -451,29 +402,20 @@ class AddGraphicsCourse extends React.Component { ...@@ -451,29 +402,20 @@ class AddGraphicsCourse extends React.Component {
pageType, pageType,
courseName, courseName,
coverUrl, coverUrl,
studentList,
courseMedia, courseMedia,
introduce, introduce,
showCutModal,
imageFile, imageFile,
videoType,
shelfState, shelfState,
categoryName,
courseCatalogList,
whetherVisitorsJoin, whetherVisitorsJoin,
loadcourseMedia, loadcourseMedia,
loadintroduce, loadintroduce,
showSelectCoverModal, showSelectCoverModal,
visible, visible,
hasImgReady, categoryId,
cutImageBlob, } = this.state
} = this.state;
// 已选择的上课学员数量 // 已选择的上课学员数量
const hasSelectedStu = studentList.length;
const courseWareIcon = FileVerifyMap[videoType] ? FileTypeIcon[FileVerifyMap[videoType].type] : FileTypeIcon[videoType];
// 当前是否使用的是默认图片 // 当前是否使用的是默认图片
const isDefaultCover = coverUrl === defaultCover; const isDefaultCover = coverUrl === defaultCover
return ( return (
<div className='page add-graphics-course-page'> <div className='page add-graphics-course-page'>
...@@ -493,34 +435,20 @@ class AddGraphicsCourse extends React.Component { ...@@ -493,34 +435,20 @@ class AddGraphicsCourse extends React.Component {
maxLength={40} maxLength={40}
style={{ width: 240 }} style={{ width: 240 }}
onChange={(e) => { onChange={(e) => {
this.handleChangeForm('courseName', e.target.value); this.handleChangeForm('courseName', e.target.value)
}} }}
/> />
</div> </div>
<div className='cover-url flex mt16'> <div className='cover-url flex mt16'>
<div className='label'>封面图：</div> <div className='label'>封面图：</div>
{/* <div className='cover-url__wrap'>
<div className='opt-btns'>
<Button
onClick={() => {
this.setState({
showSelectCoverModal: true,
});
}}>{`${pageType === 'add' && !coverUrl ? '上传' : '修改'}封面`}</Button>
<div className='tips'></div>
</div>
<div className='img-content'>
<img src={coverUrl} />
</div>
</div> */}
<div className='course-cover__wrap'> <div className='course-cover__wrap'>
<div className='opt-btns'> <div className='opt-btns'>
<Button <Button
onClick={() => { onClick={() => {
this.setState({ this.setState({
showSelectCoverModal: true, showSelectCoverModal: true,
}); })
}}> }}>
上传图片 上传图片
</Button> </Button>
...@@ -537,19 +465,11 @@ class AddGraphicsCourse extends React.Component { ...@@ -537,19 +465,11 @@ class AddGraphicsCourse extends React.Component {
</div> </div>
<div className='course-catalog required'> <div className='course-catalog required'>
<span className='label'>课程分类：</span> <span className='label'>课程分类：</span>
<Cascader <CourseCatalogSelect
value={categoryName ? [categoryName] : undefined} value={categoryId}
options={courseCatalogList} onChange={(value, label) => {
displayRender={(label) => label.join('-')} this.handleChangeCatalogList(value, label)
fieldNames={fieldNames} }}
onChange={this.catalogChange}
style={{ width: 240 }}
placeholder='请选择课程分类'
suffixIcon={
<span className='icon iconfont' style={{ fontSize: '12px', color: '#BFBFBF' }}>
&#xe835;
</span>
}
/> />
</div> </div>
<div className='intro-info mt16'> <div className='intro-info mt16'>
...@@ -587,18 +507,25 @@ class AddGraphicsCourse extends React.Component { ...@@ -587,18 +507,25 @@ class AddGraphicsCourse extends React.Component {
tooltip='支持文件类型：jpg、jpeg、png' tooltip='支持文件类型：jpg、jpeg、png'
isOpen={showSelectCoverModal} isOpen={showSelectCoverModal}
onClose={() => { onClose={() => {
this.setState({ showSelectCoverModal: false }); this.setState({ showSelectCoverModal: false })
}} }}
onSelect={this.handleSelectCover} onSelect={this.handleSelectCover}
/> />
)} )}
{ visible && {visible && (
<ImgClipModal visible={visible} imgUrl={imageFile.ossUrl} onConfirm={this.getSignature} onClose={()=>{this.setState({ visible: false });}}/> <ImgClipModal
} visible={visible}
imgUrl={imageFile.ossUrl}
onConfirm={this.getSignature}
onClose={() => {
this.setState({ visible: false })
}}
/>
)}
{this.state.previewGraphicsModal} {this.state.previewGraphicsModal}
</div> </div>
); )
} }
} }
export default AddGraphicsCourse; export default AddGraphicsCourse
src/modules/course-manage/graphics-course/components/GraphicsCourseList.jsx
...@@ -6,36 +6,36 @@ ...@@ -6,36 +6,36 @@
* @Description: 线上课-列表模块 * @Description: 线上课-列表模块
* @Copyright: 杭州杰竞科技有限公司 版权所有 * @Copyright: 杭州杰竞科技有限公司 版权所有
*/ */
import User from '@/common/js/user'; import User from '@/common/js/user'
import college from '@/common/lottie/college'; import college from '@/common/lottie/college'
import { PageControl, XMTable } from '@/components'; import { PageControl, XMTable } from '@/components'
import { LIVE_SHARE } from '@/domains/course-domain/constants'; import { LIVE_SHARE } from '@/domains/course-domain/constants'
import CourseService from '@/domains/course-domain/CourseService'; import CourseService from '@/domains/course-domain/CourseService'
import ShareLiveModal from '@/modules/course-manage/modal/ShareLiveModal'; import ShareLiveModal from '@/modules/course-manage/modal/ShareLiveModal'
import { Dropdown, message, Modal, Switch, Tooltip } from 'antd'; import { Dropdown, message, Modal, Switch, Tooltip } from 'antd'
import React from 'react'; import React from 'react'
import RelatedPlanModal from '../../modal/RelatedPlanModal'; import RelatedPlanModal from '../../modal/RelatedPlanModal'
import WatchDataModal from '../modal/WatchDataModal'; import WatchDataModal from '../modal/WatchDataModal'
import './GraphicsCourseList.less'; import './GraphicsCourseList.less'
const defaultCoverUrl = 'https://image.xiaomaiketang.com/xm/wFnpZtp2yB.png'; const defaultCoverUrl = 'https://image.xiaomaiketang.com/xm/wFnpZtp2yB.png'
class GraphicsCourseList extends React.Component { class GraphicsCourseList extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props)
this.state = { this.state = {
id: '', // 视频课ID id: '', // 视频课ID
studentIds: [], studentIds: [],
RelatedPlanModalVisible: false, RelatedPlanModalVisible: false,
selectPlanList: {}, selectPlanList: {},
}; }
} }
componentDidMount() { componentDidMount() {
const videoCourseItem = localStorage.getItem('videoCourseItem'); const videoCourseItem = localStorage.getItem('videoCourseItem')
if (videoCourseItem) { if (videoCourseItem) {
const _videoCourseItem = JSON.parse(videoCourseItem); const _videoCourseItem = JSON.parse(videoCourseItem)
this.handleShowShareModal(_videoCourseItem, true); this.handleShowShareModal(_videoCourseItem, true)
} }
} }
...@@ -48,24 +48,24 @@ class GraphicsCourseList extends React.Component { ...@@ -48,24 +48,24 @@ class GraphicsCourseList extends React.Component {
close={() => { close={() => {
this.setState({ this.setState({
watchDataModal: null, watchDataModal: null,
}); })
}} }}
/> />
); )
this.setState({ watchDataModal }); this.setState({ watchDataModal })
}; }
handlePlanName = (planArray) => { handlePlanName = (planArray) => {
let planStr = ''; let planStr = ''
planArray.forEach((item, index) => { planArray.forEach((item, index) => {
if (index < planArray.length - 1) { if (index < planArray.length - 1) {
planStr = planStr + item.planName + '、'; planStr = planStr + item.planName + '、'
} else { } else {
planStr = planStr + item.planName; planStr = planStr + item.planName
}
})
return planStr
} }
});
return planStr;
};
// 请求表头 // 请求表头
parseColumns = () => { parseColumns = () => {
const columns = [ const columns = [
...@@ -76,7 +76,7 @@ class GraphicsCourseList extends React.Component { ...@@ -76,7 +76,7 @@ class GraphicsCourseList extends React.Component {
width: 321, width: 321,
fixed: 'left', fixed: 'left',
render: (val, record) => { render: (val, record) => {
const { coverUrl } = record; const { coverUrl } = record
return ( return (
<div className='record__item'> <div className='record__item'>
{/* 上传了封面的话就用上传的封面, 没有的话就取视频的第一帧 */} {/* 上传了封面的话就用上传的封面, 没有的话就取视频的第一帧 */}
...@@ -92,7 +92,7 @@ class GraphicsCourseList extends React.Component { ...@@ -92,7 +92,7 @@ class GraphicsCourseList extends React.Component {
</Otherwise> </Otherwise>
</Choose> </Choose>
</div> </div>
); )
}, },
}, },
{ {
...@@ -106,7 +106,7 @@ class GraphicsCourseList extends React.Component { ...@@ -106,7 +106,7 @@ class GraphicsCourseList extends React.Component {
{record.categoryOneName} {record.categoryOneName}
{record.categoryTwoName ? `-${record.categoryTwoName}` : ''} {record.categoryTwoName ? `-${record.categoryTwoName}` : ''}
</div> </div>
); )
}, },
}, },
{ {
...@@ -123,7 +123,7 @@ class GraphicsCourseList extends React.Component { ...@@ -123,7 +123,7 @@ class GraphicsCourseList extends React.Component {
</Tooltip> </Tooltip>
)} )}
</div> </div>
); )
}, },
}, },
{ {
...@@ -154,7 +154,7 @@ class GraphicsCourseList extends React.Component { ...@@ -154,7 +154,7 @@ class GraphicsCourseList extends React.Component {
defaultChecked={item.shelfState === 'YES' ? true : false} defaultChecked={item.shelfState === 'YES' ? true : false}
onChange={(checked) => this.changeShelfState(index, item, checked)} onChange={(checked) => this.changeShelfState(index, item, checked)}
/> />
); )
}, },
}, },
{ {
...@@ -163,7 +163,7 @@ class GraphicsCourseList extends React.Component { ...@@ -163,7 +163,7 @@ class GraphicsCourseList extends React.Component {
key: 'watchUserCount', key: 'watchUserCount',
dataIndex: 'watchUserCount', dataIndex: 'watchUserCount',
render: (val, item) => { render: (val, item) => {
return <div className='watchUserCount'>{val}</div>; return <div className='watchUserCount'>{val}</div>
}, },
}, },
{ {
...@@ -173,7 +173,7 @@ class GraphicsCourseList extends React.Component { ...@@ -173,7 +173,7 @@ class GraphicsCourseList extends React.Component {
dataIndex: 'created', dataIndex: 'created',
sorter: true, sorter: true,
render: (val) => { render: (val) => {
return window.formatDate('YYYY-MM-DD H:i', val); return window.formatDate('YYYY-MM-DD H:i', val)
}, },
}, },
{ {
...@@ -183,7 +183,7 @@ class GraphicsCourseList extends React.Component { ...@@ -183,7 +183,7 @@ class GraphicsCourseList extends React.Component {
dataIndex: 'updated', dataIndex: 'updated',
sorter: true, sorter: true,
render: (val) => { render: (val) => {
return window.formatDate('YYYY-MM-DD H:i', val); return window.formatDate('YYYY-MM-DD H:i', val)
}, },
}, },
{ {
...@@ -199,10 +199,10 @@ class GraphicsCourseList extends React.Component { ...@@ -199,10 +199,10 @@ class GraphicsCourseList extends React.Component {
<Tooltip title={this.handlePlanName(record.relatedPlanList)} placement='top' arrowPointAtCenter> <Tooltip title={this.handlePlanName(record.relatedPlanList)} placement='top' arrowPointAtCenter>
{record.relatedPlanList.map((item, index) => { {record.relatedPlanList.map((item, index) => {
return ( return (
<span> <span key={item.planId}>
{item.planName} {index < record.relatedPlanList.length - 1 && <span> 、</span>}{' '} {item.planName} {index < record.relatedPlanList.length - 1 && <span> 、</span>}{' '}
</span> </span>
); )
})} })}
</Tooltip> </Tooltip>
</When> </When>
...@@ -211,7 +211,7 @@ class GraphicsCourseList extends React.Component { ...@@ -211,7 +211,7 @@ class GraphicsCourseList extends React.Component {
</Otherwise> </Otherwise>
</Choose> </Choose>
</div> </div>
); )
}, },
}, },
{ {
...@@ -240,42 +240,42 @@ class GraphicsCourseList extends React.Component { ...@@ -240,42 +240,42 @@ class GraphicsCourseList extends React.Component {
</span> </span>
</Dropdown> </Dropdown>
</div> </div>
); )
}, },
}, },
]; ]
return columns; return columns
}; }
handleRelatedModalShow = (item) => { handleRelatedModalShow = (item) => {
const selectPlanList = {}; const selectPlanList = {}
if (item.relatedPlanList) { if (item.relatedPlanList) {
item.relatedPlanList.map((item, index) => { item.relatedPlanList.map((item, index) => {
selectPlanList[item.planId] = {}; selectPlanList[item.planId] = {}
selectPlanList[item.planId].planId = item.planId; selectPlanList[item.planId].planId = item.planId
selectPlanList[item.planId].taskBaseVOList = [{ taskId: item.taskId }]; selectPlanList[item.planId].taskBaseVOList = [{ taskId: item.taskId }]
return item; return item
}); })
} }
this.setState({ this.setState({
RelatedPlanModalVisible: true, RelatedPlanModalVisible: true,
selectCourseId: item.id, selectCourseId: item.id,
selectPlanList: selectPlanList, selectPlanList: selectPlanList,
}); })
}; }
closeRelatedPlanModalVisible = () => { closeRelatedPlanModalVisible = () => {
this.setState({ this.setState({
RelatedPlanModalVisible: false, RelatedPlanModalVisible: false,
}); })
}; }
onChangeSelectPlanList = (selectPlanList) => { onChangeSelectPlanList = (selectPlanList) => {
this.setState({ this.setState({
selectPlanList: selectPlanList, selectPlanList: selectPlanList,
}); })
}; }
onConfirmSelectPlanList = () => { onConfirmSelectPlanList = () => {
this.setState( this.setState(
...@@ -283,10 +283,10 @@ class GraphicsCourseList extends React.Component { ...@@ -283,10 +283,10 @@ class GraphicsCourseList extends React.Component {
RelatedPlanModalVisible: false, RelatedPlanModalVisible: false,
}, },
() => { () => {
this.props.onChange(); this.props.onChange()
}
)
} }
);
};
renderMoreOperate = (item) => { renderMoreOperate = (item) => {
return ( return (
...@@ -296,7 +296,7 @@ class GraphicsCourseList extends React.Component { ...@@ -296,7 +296,7 @@ class GraphicsCourseList extends React.Component {
className='operate__item' className='operate__item'
key='plan' key='plan'
onClick={() => { onClick={() => {
this.handleRelatedModalShow(item); this.handleRelatedModalShow(item)
}}> }}>
关联培训计划 关联培训计划
</div> </div>
...@@ -305,7 +305,7 @@ class GraphicsCourseList extends React.Component { ...@@ -305,7 +305,7 @@ class GraphicsCourseList extends React.Component {
className='operate__item' className='operate__item'
key='edit' key='edit'
onClick={() => { onClick={() => {
window.RCHistory.push(`/create-graphics-course?type=edit&id=${item.id}`); window.RCHistory.push(`/create-graphics-course?type=edit&id=${item.id}`)
}}> }}>
编辑 编辑
</div> </div>
...@@ -313,11 +313,11 @@ class GraphicsCourseList extends React.Component { ...@@ -313,11 +313,11 @@ class GraphicsCourseList extends React.Component {
删除 删除
</div> </div>
</div> </div>
); )
}; }
//改变上架状态 //改变上架状态
changeShelfState = (index, item, checked) => { changeShelfState = (index, item, checked) => {
let _shelfState = checked ? 'YES' : 'NO'; let _shelfState = checked ? 'YES' : 'NO'
// if(_shelfState==='NO'){ // if(_shelfState==='NO'){
// _shelfState = "YES"; // _shelfState = "YES";
// }else{ // }else{
...@@ -326,18 +326,18 @@ class GraphicsCourseList extends React.Component { ...@@ -326,18 +326,18 @@ class GraphicsCourseList extends React.Component {
const params = { const params = {
courseId: item.id, courseId: item.id,
shelfState: _shelfState, shelfState: _shelfState,
}; }
CourseService.changeVideoShelfState(params).then((res) => { CourseService.changeVideoShelfState(params).then((res) => {
if (res.success) { if (res.success) {
if (_shelfState === 'YES') { if (_shelfState === 'YES') {
message.success('已开启展示'); message.success('已开启展示')
} else { } else {
message.success('已取消展示'); message.success('已取消展示')
} }
this.props.changeShelfState(index, _shelfState); this.props.changeShelfState(index, _shelfState)
}
})
} }
});
};
// 删除视频课 // 删除视频课
handleDeleteGraphicsCourse = (scheduleId) => { handleDeleteGraphicsCourse = (scheduleId) => {
Modal.confirm({ Modal.confirm({
...@@ -351,27 +351,27 @@ class GraphicsCourseList extends React.Component { ...@@ -351,27 +351,27 @@ class GraphicsCourseList extends React.Component {
const param = { const param = {
courseId: scheduleId, courseId: scheduleId,
storeId: User.getStoreId(), storeId: User.getStoreId(),
}; }
CourseService.delVideoSchedule(param).then(() => { CourseService.delVideoSchedule(param).then(() => {
message.success('删除成功'); message.success('删除成功')
this.props.onChange(); this.props.onChange()
}); })
}, },
}); })
}; }
// 显示分享弹窗 // 显示分享弹窗
handleShowShareModal = (record, needStr = false) => { handleShowShareModal = (record, needStr = false) => {
const { id, scheduleVideoUrl } = record; const { id, scheduleVideoUrl } = record
const htmlUrl = `${LIVE_SHARE}graphics_detail/${id}?id=${User.getStoreId()}`; const htmlUrl = `${LIVE_SHARE}graphics_detail/${id}?id=${User.getStoreId()}`
const longUrl = htmlUrl; const longUrl = htmlUrl
const { coverUrl, courseName } = record; const { coverUrl, courseName } = record
const shareData = { const shareData = {
longUrl, longUrl,
coverUrl, coverUrl,
scheduleVideoUrl, scheduleVideoUrl,
courseName, courseName,
}; }
const shareLiveModal = ( const shareLiveModal = (
<ShareLiveModal <ShareLiveModal
...@@ -382,82 +382,82 @@ class GraphicsCourseList extends React.Component { ...@@ -382,82 +382,82 @@ class GraphicsCourseList extends React.Component {
close={() => { close={() => {
this.setState({ this.setState({
shareLiveModal: null, shareLiveModal: null,
}); })
localStorage.setItem('videoCourseItem', ''); localStorage.setItem('videoCourseItem', '')
}} }}
/> />
); )
this.setState({ shareLiveModal }); this.setState({ shareLiveModal })
}; }
handleChangeTable = (pagination, filters, sorter) => { handleChangeTable = (pagination, filters, sorter) => {
const { columnKey, order } = sorter; const { columnKey, order } = sorter
const { query } = this.props; const { query } = this.props
let { order: _order } = query; let { order: _order } = query
// 按创建时间升序排序 // 按创建时间升序排序
if (columnKey === 'created' && order === 'ascend') { if (columnKey === 'created' && order === 'ascend') {
_order = 'CREATED_ASC'; _order = 'CREATED_ASC'
} }
// 按创建时间降序排序 // 按创建时间降序排序
if (columnKey === 'created' && order === 'descend') { if (columnKey === 'created' && order === 'descend') {
_order = 'CREATED_DESC'; _order = 'CREATED_DESC'
} }
// 按更新时间升序排序 // 按更新时间升序排序
if (columnKey === 'updated' && order === 'ascend') { if (columnKey === 'updated' && order === 'ascend') {
_order = 'UPDATED_ASC'; _order = 'UPDATED_ASC'
} }
// 按更新时间降序排序 // 按更新时间降序排序
if (columnKey === 'updated' && order === 'descend') { if (columnKey === 'updated' && order === 'descend') {
_order = 'UPDATED_DESC'; _order = 'UPDATED_DESC'
} }
const _query = { const _query = {
...query, ...query,
orderEnum: _order, orderEnum: _order,
}; }
this.props.onChange(_query); this.props.onChange(_query)
}; }
handleRelatedModalShow = (item) => { handleRelatedModalShow = (item) => {
const selectPlanList = {}; const selectPlanList = {}
if (item.relatedPlanList) { if (item.relatedPlanList) {
item.relatedPlanList.map((item, index) => { item.relatedPlanList.map((item, index) => {
selectPlanList[item.planId] = {}; selectPlanList[item.planId] = {}
selectPlanList[item.planId].planId = item.planId; selectPlanList[item.planId].planId = item.planId
selectPlanList[item.planId].taskBaseVOList = [{ taskId: item.taskId }]; selectPlanList[item.planId].taskBaseVOList = [{ taskId: item.taskId }]
return item; return item
}); })
} }
this.setState({ this.setState({
RelatedPlanModalVisible: true, RelatedPlanModalVisible: true,
selectCourseId: item.id, selectCourseId: item.id,
selectPlanList: selectPlanList, selectPlanList: selectPlanList,
}); })
}; }
closeRelatedPlanModalVisible = () => { closeRelatedPlanModalVisible = () => {
this.setState({ this.setState({
RelatedPlanModalVisible: false, RelatedPlanModalVisible: false,
}); })
}; }
onChangeSelectPlanList = (selectPlanList) => { onChangeSelectPlanList = (selectPlanList) => {
this.setState({ this.setState({
selectPlanList: selectPlanList, selectPlanList: selectPlanList,
}); })
}; }
onConfirmSelectPlanList = () => { onConfirmSelectPlanList = () => {
this.setState( this.setState(
{ {
RelatedPlanModalVisible: false, RelatedPlanModalVisible: false,
}, },
() => { () => {
this.props.onChange(); this.props.onChange()
}
)
} }
);
};
render() { render() {
const { RelatedPlanModalVisible, selectCourseId, selectPlanList } = this.state; const { RelatedPlanModalVisible, selectCourseId, selectPlanList } = this.state
const { dataSource = [], totalCount, query } = this.props; const { dataSource = [], totalCount, query } = this.props
const { current, size } = query; const { current, size } = query
return ( return (
<div className='video-course-list'> <div className='video-course-list'>
...@@ -482,8 +482,8 @@ class GraphicsCourseList extends React.Component { ...@@ -482,8 +482,8 @@ class GraphicsCourseList extends React.Component {
pageSize={size} pageSize={size}
total={totalCount} total={totalCount}
toPage={(page) => { toPage={(page) => {
const _query = { ...query, current: page + 1 }; const _query = { ...query, current: page + 1 }
this.props.onChange(_query); this.props.onChange(_query)
}} }}
/> />
</div> </div>
...@@ -510,8 +510,8 @@ class GraphicsCourseList extends React.Component { ...@@ -510,8 +510,8 @@ class GraphicsCourseList extends React.Component {
{this.state.shareLiveModal} {this.state.shareLiveModal}
{this.state.watchDataModal} {this.state.watchDataModal}
</div> </div>
); )
} }
} }
export default GraphicsCourseList; export default GraphicsCourseList
src/modules/course-manage/offline-course/AddOfflineCourse.jsx
...@@ -7,41 +7,41 @@ ...@@ -7,41 +7,41 @@
* @Copyright: 杭州杰竞科技有限公司 版权所有 * @Copyright: 杭州杰竞科技有限公司 版权所有
*/ */
import React from 'react'; import React from 'react'
import { Button, Input, Radio, message, Modal, TreeSelect, Select, Switch, TimePicker, InputNumber, Tooltip } from 'antd'; import { Button, Input, Radio, message, Modal, Select, Switch, TimePicker, InputNumber, Tooltip } from 'antd'
import $ from 'jquery'; import $ from 'jquery'
import Bus from '@/core/bus';
import RangePicker from '@/modules/common/DateRangePicker';
import ShowTips from '@/components/ShowTips';
import Breadcrumbs from '@/components/Breadcrumbs';
import SelectStudent from '../modal/select-student';
import SelectPrepareFileModal from '../../prepare-lesson/modal/SelectPrepareFileModal';
import PreviewOfflineModal from './modal/PreviewOfflineModal';
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 moment from 'moment';
import Upload from '@/core/upload';
import GraphicsEditor from '../components/GraphicsEditor';
import MultipleDatePicker from '@/components/MultipleDatePicker';
import ImgClipModal from '@/components/ImgClipModal';
import './AddOfflineCourse.less';
const { Option } = Select; import { RangePicker, CourseCatalogSelect } from '@/modules/common'
const defaultCoverUrl = 'https://image.xiaomaiketang.com/xm/pxbWKsYA87.png'; import ShowTips from '@/components/ShowTips'
import Breadcrumbs from '@/components/Breadcrumbs'
import SelectPrepareFileModal from '../../prepare-lesson/modal/SelectPrepareFileModal'
import PreviewOfflineModal from './modal/PreviewOfflineModal'
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 moment from 'moment'
import Upload from '@/core/upload'
import GraphicsEditor from '../components/GraphicsEditor'
import MultipleDatePicker from '@/components/MultipleDatePicker'
import ImgClipModal from '@/components/ImgClipModal'
import './AddOfflineCourse.less'
import Bus from '@/core/bus'
const { Option } = Select
const defaultCoverUrl = 'https://image.xiaomaiketang.com/xm/pxbWKsYA87.png'
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 = window.getParameterByName('id'); const courseId = window.getParameterByName('id')
const pageType = window.getParameterByName('type'); const pageType = window.getParameterByName('type')
this.state = { this.state = {
courseId, // 线下课ID,编辑的时候从URL上带过来 courseId, // 线下课ID,编辑的时候从URL上带过来
...@@ -87,74 +87,74 @@ class AddOfflineCourse extends React.Component { ...@@ -87,74 +87,74 @@ 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 newTreeData
} }
return item;
});
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,
categoryId, categoryId,
...@@ -183,29 +183,29 @@ class AddOfflineCourse extends React.Component { ...@@ -183,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,
...@@ -237,9 +237,9 @@ class AddOfflineCourse extends React.Component { ...@@ -237,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({
...@@ -248,13 +248,13 @@ class AddOfflineCourse extends React.Component { ...@@ -248,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: '确认要返回吗?',
...@@ -265,15 +265,15 @@ class AddOfflineCourse extends React.Component { ...@@ -265,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 = () => {
...@@ -299,7 +299,7 @@ class AddOfflineCourse extends React.Component { ...@@ -299,7 +299,7 @@ class AddOfflineCourse extends React.Component {
signOutStartTimeUnit, signOutStartTimeUnit,
signOutEndTimeNum, signOutEndTimeNum,
signOutEndTimeUnit, signOutEndTimeUnit,
} = this.state; } = this.state
const data = { const data = {
coverUrl, coverUrl,
...@@ -323,29 +323,28 @@ class AddOfflineCourse extends React.Component { ...@@ -323,29 +323,28 @@ 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.setState({ this.setState({
visible: true, visible: true,
imageFile: file imageFile: file,
}); })
} }
//获取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) => {
...@@ -356,18 +355,18 @@ class AddOfflineCourse extends React.Component { ...@@ -356,18 +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,
}); })
}; }
preSubmit = () => { preSubmit = () => {
//过期判断 //过期判断
...@@ -376,16 +375,16 @@ class AddOfflineCourse extends React.Component { ...@@ -376,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 = () => {
...@@ -420,22 +419,22 @@ class AddOfflineCourse extends React.Component { ...@@ -420,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,
...@@ -454,33 +453,33 @@ class AddOfflineCourse extends React.Component { ...@@ -454,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`,
...@@ -490,182 +489,182 @@ class AddOfflineCourse extends React.Component { ...@@ -490,182 +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 = [], 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) => { changeIntro = (value) => {
this.setState({ introduce: value }); 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,whetherVisitorsJoin} =this.state; const { whetherSetApply, whetherVisitorsJoin } = this.state
if(whetherSetApply =='NO'){ if (whetherSetApply == 'NO') {
message.warning('关闭报名无法获取手机号!') message.warning('关闭报名无法获取手机号!')
return 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 {
...@@ -704,8 +703,8 @@ class AddOfflineCourse extends React.Component { ...@@ -704,8 +703,8 @@ class AddOfflineCourse extends React.Component {
offlinePlace, offlinePlace,
isEditDisablie, isEditDisablie,
imageFile, imageFile,
} = this.state; } = this.state
const isDefaultCover = coverUrl === defaultCoverUrl; 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} />
...@@ -728,7 +727,7 @@ class AddOfflineCourse extends React.Component { ...@@ -728,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>
...@@ -741,7 +740,7 @@ class AddOfflineCourse extends React.Component { ...@@ -741,7 +740,7 @@ class AddOfflineCourse extends React.Component {
onClick={() => { onClick={() => {
this.setState({ this.setState({
showSelectCoverModal: true, showSelectCoverModal: true,
}); })
}}> }}>
上传图片 上传图片
</Button> </Button>
...@@ -760,7 +759,13 @@ class AddOfflineCourse extends React.Component { ...@@ -760,7 +759,13 @@ class AddOfflineCourse extends React.Component {
<span className='label special'> <span className='label special'>
<span className='require'>*</span>课程分类： <span className='require'>*</span>课程分类：
</span> </span>
<TreeSelect <CourseCatalogSelect
value={categoryId}
onChange={(value, label) => {
this.handleChangeCatalogList(value, label)
}}
/>
{/* <TreeSelect
showSearch showSearch
treeNodeFilterProp='title' treeNodeFilterProp='title'
style={{ width: 240 }} style={{ width: 240 }}
...@@ -771,9 +776,9 @@ class AddOfflineCourse extends React.Component { ...@@ -771,9 +776,9 @@ class AddOfflineCourse extends React.Component {
value={categoryId} value={categoryId}
treeDefaultExpandAll treeDefaultExpandAll
onChange={(value, label) => { onChange={(value, label) => {
this.handleChangeCatalogList(value, label); this.handleChangeCatalogList(value, label)
}} }}
/> /> */}
</div> </div>
<div className='course-catalog'> <div className='course-catalog'>
<span className='label special'> <span className='label special'>
...@@ -785,7 +790,7 @@ class AddOfflineCourse extends React.Component { ...@@ -785,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>
...@@ -809,22 +814,22 @@ class AddOfflineCourse extends React.Component { ...@@ -809,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(
...@@ -836,9 +841,9 @@ class AddOfflineCourse extends React.Component { ...@@ -836,9 +841,9 @@ class AddOfflineCourse extends React.Component {
}, },
}, },
() => { () => {
this.getTeacherList(); this.getTeacherList()
} }
); )
}} }}
getPopupContainer={() => document.getElementById('teacher')}> getPopupContainer={() => document.getElementById('teacher')}>
{_.map(teacherList, (item) => { {_.map(teacherList, (item) => {
...@@ -846,7 +851,7 @@ class AddOfflineCourse extends React.Component { ...@@ -846,7 +851,7 @@ class AddOfflineCourse extends React.Component {
<Option value={item.id} key={item.id}> <Option value={item.id} key={item.id}>
{item.nickName} {item.nickName}
</Option> </Option>
); )
})} })}
</Select> </Select>
</div> </div>
...@@ -864,7 +869,7 @@ class AddOfflineCourse extends React.Component { ...@@ -864,7 +869,7 @@ class AddOfflineCourse extends React.Component {
content: introduce, content: introduce,
}} }}
onChange={(val) => { onChange={(val) => {
this.changeIntro(val); this.changeIntro(val)
}} }}
/> />
)} )}
...@@ -901,7 +906,7 @@ class AddOfflineCourse extends React.Component { ...@@ -901,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')}
/> />
...@@ -915,7 +920,7 @@ class AddOfflineCourse extends React.Component { ...@@ -915,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')}
/> />
...@@ -928,7 +933,7 @@ class AddOfflineCourse extends React.Component { ...@@ -928,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}>
...@@ -953,8 +958,8 @@ class AddOfflineCourse extends React.Component { ...@@ -953,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>
...@@ -969,7 +974,7 @@ class AddOfflineCourse extends React.Component { ...@@ -969,7 +974,7 @@ 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={() => (
<If condition={calendarTime[0]}> <If condition={calendarTime[0]}>
...@@ -1056,7 +1061,7 @@ class AddOfflineCourse extends React.Component { ...@@ -1056,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>
...@@ -1069,7 +1074,9 @@ class AddOfflineCourse extends React.Component { ...@@ -1069,7 +1074,9 @@ class AddOfflineCourse extends React.Component {
<span className='label'>观看设置：</span> <span className='label'>观看设置：</span>
<div className='content'> <div className='content'>
<Switch checked={whetherVisitorsJoin === 'NO' ? true : false} onChange={this.whetherVisitorsJoinChange} /> <Switch checked={whetherVisitorsJoin === 'NO' ? true : false} onChange={this.whetherVisitorsJoinChange} />
<div className='desc'>{whetherVisitorsJoin === 'NO' ? '已开启，仅限绑定了手机号的学员报名线下课' : '已关闭，允许未绑定手机号的学员报名线下课'}</div> <div className='desc'>
{whetherVisitorsJoin === 'NO' ? '已开启，仅限绑定了手机号的学员报名线下课' : '已关闭，允许未绑定手机号的学员报名线下课'}
</div>
</div> </div>
</div> </div>
<div className='course-catalog'> <div className='course-catalog'>
...@@ -1084,7 +1091,7 @@ class AddOfflineCourse extends React.Component { ...@@ -1084,7 +1091,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>
...@@ -1096,7 +1103,7 @@ class AddOfflineCourse extends React.Component { ...@@ -1096,7 +1103,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'>
...@@ -1118,18 +1125,18 @@ class AddOfflineCourse extends React.Component { ...@@ -1118,18 +1125,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}>
...@@ -1156,7 +1163,7 @@ class AddOfflineCourse extends React.Component { ...@@ -1156,7 +1163,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>
...@@ -1168,7 +1175,7 @@ class AddOfflineCourse extends React.Component { ...@@ -1168,7 +1175,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'>
...@@ -1191,7 +1198,7 @@ class AddOfflineCourse extends React.Component { ...@@ -1191,7 +1198,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 })
}} }}
/> />
)} )}
...@@ -1200,11 +1207,11 @@ class AddOfflineCourse extends React.Component { ...@@ -1200,11 +1207,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}>
...@@ -1221,18 +1228,18 @@ class AddOfflineCourse extends React.Component { ...@@ -1221,18 +1228,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}>
...@@ -1267,19 +1274,25 @@ class AddOfflineCourse extends React.Component { ...@@ -1267,19 +1274,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}
/> />
) )}
} {visible && (
{visible && <ImgClipModal
<ImgClipModal visible={visible} imgUrl={imageFile.ossUrl} onConfirm={this.getSignature} onClose={() => { this.setState({ visible: false }); }} /> visible={visible}
} imgUrl={imageFile.ossUrl}
onConfirm={this.getSignature}
onClose={() => {
this.setState({ visible: false })
}}
/>
)}
{this.state.previewOfflineModal} {this.state.previewOfflineModal}
</div> </div>
); )
} }
} }
export default AddOfflineCourse; export default AddOfflineCourse
src/modules/course-manage/video-course/AddVideoCourse.jsx
...@@ -8,8 +8,9 @@ ...@@ -8,8 +8,9 @@
*/ */
import React from 'react' import React from 'react'
import { Button, Input, message, Modal, Cascader, Tooltip, Form, Popconfirm,Menu,Dropdown} from 'antd' import { Button, Input, message, Modal, Tooltip, Form, Popconfirm, Menu, Dropdown } from 'antd'
import { FileTypeIcon, FileVerifyMap } from '@/common/constants/academic/lessonEnum' import { FileTypeIcon, FileVerifyMap } from '@/common/constants/academic/lessonEnum'
import { CourseCatalogSelect } from '@/modules/common'
import ShowTips from '@/components/ShowTips' import ShowTips from '@/components/ShowTips'
import Breadcrumbs from '@/components/Breadcrumbs' import Breadcrumbs from '@/components/Breadcrumbs'
import moment from 'moment' import moment from 'moment'
...@@ -29,7 +30,7 @@ import $ from 'jquery' ...@@ -29,7 +30,7 @@ import $ from 'jquery'
import './AddVideoCourse.less' import './AddVideoCourse.less'
import Bus from '@/core/bus' import Bus from '@/core/bus'
const { TextArea } = Input; const { TextArea } = Input
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' }
...@@ -40,19 +41,19 @@ const defaultScheduleMedia = [ ...@@ -40,19 +41,19 @@ const defaultScheduleMedia = [
contentType: 'INTRO', contentType: 'INTRO',
mediaType: 'TEXT', mediaType: 'TEXT',
mediaContent: '', mediaContent: '',
key: EDIT_BOX_KEY key: EDIT_BOX_KEY,
} },
] ]
const whetherVisitorsJoin = 'NO' const whetherVisitorsJoin = 'NO'
let cutFlag = false; let cutFlag = false
const SUPPORT_WORD_PDF = [ const SUPPORT_WORD_PDF = [
"application/msword", 'application/msword',
"application/wps-writer", 'application/wps-writer',
"application/vnd.openxmlformats-officedocument.wordprocessingml.document", 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
"application/pdf", 'application/pdf',
"application/wps-office.pdf" 'application/wps-office.pdf',
]; ]
class AddVideoCourse extends React.Component { class AddVideoCourse extends React.Component {
constructor(props) { constructor(props) {
super(props) super(props)
...@@ -75,8 +76,8 @@ class AddVideoCourse extends React.Component { ...@@ -75,8 +76,8 @@ class AddVideoCourse extends React.Component {
contentType: 'INTRO', contentType: 'INTRO',
mediaType: 'TEXT', mediaType: 'TEXT',
mediaContent: '', mediaContent: '',
key: EDIT_BOX_KEY key: EDIT_BOX_KEY,
} },
], ],
diskList: [], // 机构可见磁盘目录 diskList: [], // 机构可见磁盘目录
selectedFileList: [], // 已经从资料云盘中勾选的文件 selectedFileList: [], // 已经从资料云盘中勾选的文件
...@@ -84,69 +85,59 @@ class AddVideoCourse extends React.Component { ...@@ -84,69 +85,59 @@ class AddVideoCourse extends React.Component {
showSelectFileModal: false, showSelectFileModal: false,
studentModal: false, studentModal: false,
categoryName: null, //分类名称 categoryName: null, //分类名称
courseCatalogList: [], //分类列表
categoryId: null, //分类的Id值 categoryId: null, //分类的Id值
whetherVisitorsJoin: 'NO', // 是否允许游客加入 whetherVisitorsJoin: 'NO', // 是否允许游客加入
showSelectCoverModal: false, showSelectCoverModal: false,
cutImageBlob: null, cutImageBlob: null,
introduce: '', introduce: '',
courseChapterList:[ courseChapterList: [], // 课节列表
], // 课节列表
// videoType: "MP4", // videoType: "MP4",
mediaNameAlias: '', // 任一视频重命名的名称（气泡框） mediaNameAlias: '', // 任一视频重命名的名称（气泡框）
selectTypeList:['MP4'], selectTypeList: ['MP4'],
accept:'video/mp4' accept: 'video/mp4',
} }
} }
componentWillMount() { componentWillMount() {
const { id, pageType } = this.state const { id, pageType } = this.state
this.getCourseCatalogList()
if (pageType === 'edit') { if (pageType === 'edit') {
this.handleFetchScheudleDetail(id) this.handleFetchScheudleDetail(id)
} }
Bus.bind('editorLimit', (editorTextLength) => { Bus.bind('editorLimit', (editorTextLength) => {
this.setState({ this.setState({
editorTextLength, editorTextLength,
});
});
}
//获取分类列表
getCourseCatalogList = () => {
StoreService.getCourseCatalogList({ current: 1, size: 1000 }).then((res) => {
this.setState({
courseCatalogList: res.result.records
}) })
}) })
} }
catalogChange = (value, _categoryName) => { handleChangeCatalogList = (value, label) => {
const categoryName =_.pluck(_categoryName,'categoryName').join('-') this.setState({ categoryId: value, categoryName: label[0] })
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) => { handleFetchScheudleDetail = (courseId) => {
CourseService.videoScheduleDetail({ CourseService.videoScheduleDetail({
courseId courseId,
}).then((res) => { }).then((res) => {
const { result = {} } = res || {} const { result = {} } = res || {}
const { courseName, shelfState, whetherVisitorsJoin, courseMediaVOS, categoryOneName, categoryTwoName, categoryId, courseChapterVOList =[] } = result const { courseName, shelfState, whetherVisitorsJoin, courseMediaVOS, categoryId, courseChapterVOList = [] } = result
let coverId let coverId
let coverUrl let coverUrl
// let videoDuration
// let videoName
let scheduleMedia = [] let scheduleMedia = []
let scheduleVideoUrl let scheduleVideoUrl
let hasIntro let hasIntro
...@@ -167,16 +158,16 @@ class AddVideoCourse extends React.Component { ...@@ -167,16 +158,16 @@ class AddVideoCourse extends React.Component {
return item return item
}) })
let categoryName // let categoryName
if (categoryTwoName) { // if (categoryTwoName) {
categoryName = `${categoryOneName}-${categoryTwoName}` // categoryName = `${categoryOneName}-${categoryTwoName}`
} else { // } else {
categoryName = `${categoryOneName}` // categoryName = `${categoryOneName}`
} // }
const _courseChapterVOList = courseChapterVOList.map(item => { const _courseChapterVOList = courseChapterVOList.map((item) => {
item.mediaName = item.name; item.mediaName = item.name
item.resourceId = item.id; item.resourceId = item.id
return item return item
}) })
...@@ -184,16 +175,13 @@ class AddVideoCourse extends React.Component { ...@@ -184,16 +175,13 @@ class AddVideoCourse extends React.Component {
loadintroduce: !hasIntro, loadintroduce: !hasIntro,
coverId, coverId,
coverUrl, coverUrl,
// videoName,
// videoDuration,
scheduleMedia, scheduleMedia,
courseName, courseName,
scheduleVideoUrl, scheduleVideoUrl,
shelfState, shelfState,
whetherVisitorsJoin, whetherVisitorsJoin,
categoryName,
categoryId, categoryId,
courseChapterList: _courseChapterVOList courseChapterList: _courseChapterVOList,
}) })
}) })
} }
...@@ -206,12 +194,12 @@ class AddVideoCourse extends React.Component { ...@@ -206,12 +194,12 @@ class AddVideoCourse extends React.Component {
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,courseName, scheduleMedia, courseChapterList, categoryId, shelfState, whetherVisitorsJoin } = this.state const { coverId, courseName, scheduleMedia, courseChapterList, categoryId, shelfState, whetherVisitorsJoin } = this.state
if ( if (
!courseChapterList.length || !courseChapterList.length ||
!_.isEqual(scheduleMedia, defaultScheduleMedia) || !_.isEqual(scheduleMedia, defaultScheduleMedia) ||
...@@ -229,13 +217,13 @@ class AddVideoCourse extends React.Component { ...@@ -229,13 +217,13 @@ class AddVideoCourse extends React.Component {
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: `/video-course` pathname: `/video-course`,
}) })
} },
}) })
} else { } else {
window.RCHistory.push({ window.RCHistory.push({
pathname: `/video-course` pathname: `/video-course`,
}) })
} }
} }
...@@ -244,7 +232,7 @@ class AddVideoCourse extends React.Component { ...@@ -244,7 +232,7 @@ class AddVideoCourse extends React.Component {
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,
}) })
} }
...@@ -262,7 +250,7 @@ class AddVideoCourse extends React.Component { ...@@ -262,7 +250,7 @@ class AddVideoCourse extends React.Component {
studentList={studentList} studentList={studentList}
close={() => { close={() => {
this.setState({ this.setState({
studentModal: null studentModal: null,
}) })
}} }}
/> />
...@@ -281,7 +269,7 @@ class AddVideoCourse extends React.Component { ...@@ -281,7 +269,7 @@ class AddVideoCourse extends React.Component {
// 显示预览弹窗 // 显示预览弹窗
handleShowPreviewModal = () => { handleShowPreviewModal = () => {
const { coverUrl, scheduleVideoUrl, courseName, scheduleMedia,introduce, courseChapterList, categoryName } = this.state const { coverUrl, scheduleVideoUrl, courseName, scheduleMedia, introduce, courseChapterList, categoryName } = this.state
const courseBasinInfo = { const courseBasinInfo = {
coverUrl, coverUrl,
scheduleVideoUrl, scheduleVideoUrl,
...@@ -290,7 +278,7 @@ class AddVideoCourse extends React.Component { ...@@ -290,7 +278,7 @@ class AddVideoCourse extends React.Component {
const courseIntroInfo = { const courseIntroInfo = {
liveCourseMediaRequests: scheduleMedia, liveCourseMediaRequests: scheduleMedia,
introduce, introduce,
categoryName categoryName,
} }
const previewCourseModal = ( const previewCourseModal = (
...@@ -300,7 +288,7 @@ class AddVideoCourse extends React.Component { ...@@ -300,7 +288,7 @@ class AddVideoCourse extends React.Component {
courseIntroInfo={courseIntroInfo} courseIntroInfo={courseIntroInfo}
close={() => { close={() => {
this.setState({ this.setState({
previewCourseModal: null previewCourseModal: null,
}) })
}} }}
courseChapterList={courseChapterList} courseChapterList={courseChapterList}
...@@ -311,43 +299,42 @@ class AddVideoCourse extends React.Component { ...@@ -311,43 +299,42 @@ class AddVideoCourse extends React.Component {
} }
// 选择视频 // 选择视频
handleSelectVideo = (addFolderIds,selectedFileList) => { handleSelectVideo = (addFolderIds, selectedFileList) => {
this.setState({ this.setState({
showSelectFileModal: false showSelectFileModal: false,
}) })
let { courseChapterList } = this.state; let { courseChapterList } = this.state
let _courseChapterList = [...courseChapterList]; let _courseChapterList = [...courseChapterList]
if(selectedFileList.length + courseChapterList.length > 20){ if (selectedFileList.length + courseChapterList.length > 20) {
message.warning(`最多只能上传20个文件`); message.warning(`最多只能上传20个文件`)
return; return
} }
selectedFileList.map((file,index) => { selectedFileList.map((file, index) => {
const { ossUrl, resourceId, folderName, folderFormat, folderSize } = file
const { ossUrl, resourceId, folderName, folderFormat, folderSize } = file; const _mediaName = folderName.replace(`.${_.last(folderName.split('.')).toLowerCase()}`, '')
const _mediaName =folderName.replace(`.${_.last(folderName.split('.')).toLowerCase()}`,'') console.log('folderFormat', folderFormat)
console.log('folderFormat',folderFormat); if (folderFormat === 'MP4' || folderFormat === 'video/mp4') {
if(folderFormat === 'MP4' || folderFormat === 'video/mp4'){
const videoDom = document.createElement('video') const videoDom = document.createElement('video')
videoDom.src = ossUrl videoDom.src = ossUrl
videoDom.onloadedmetadata = () => { videoDom.onloadedmetadata = () => {
_courseChapterList.push({ _courseChapterList.push({
mediaContent: resourceId, mediaContent: resourceId,
contentType: 'SCHEDULE', contentType: 'SCHEDULE',
mediaType: "VIDEO", mediaType: 'VIDEO',
mediaName: _mediaName, mediaName: _mediaName,
videoDuration: videoDom.duration, videoDuration: videoDom.duration,
resourceId, resourceId,
mediaUrl: ossUrl, mediaUrl: ossUrl,
sort: _courseChapterList.length sort: _courseChapterList.length,
}) })
this.setState({ this.setState({
courseChapterList: _courseChapterList courseChapterList: _courseChapterList,
}) })
} }
}else if( folderFormat==="WORD" || folderFormat==="PDF" || SUPPORT_WORD_PDF.indexOf(folderFormat)>-1){ } else if (folderFormat === 'WORD' || folderFormat === 'PDF' || SUPPORT_WORD_PDF.indexOf(folderFormat) > -1) {
const suffix = _.last(folderName.split('.')).toUpperCase(); const suffix = _.last(folderName.split('.')).toUpperCase()
_courseChapterList.push({ _courseChapterList.push({
mediaContent: resourceId, mediaContent: resourceId,
contentType: 'SCHEDULE', contentType: 'SCHEDULE',
...@@ -355,45 +342,44 @@ class AddVideoCourse extends React.Component { ...@@ -355,45 +342,44 @@ class AddVideoCourse extends React.Component {
mediaName: _mediaName, mediaName: _mediaName,
resourceId, resourceId,
mediaUrl: ossUrl, mediaUrl: ossUrl,
sort: _courseChapterList.length sort: _courseChapterList.length,
}) })
this.setState({ this.setState({
courseChapterList: _courseChapterList courseChapterList: _courseChapterList,
}) })
} }
}) })
} }
// 校验课节名称 // 校验课节名称
handleValidateChapterName = (chapterName)=> { handleValidateChapterName = (chapterName) => {
let hasError = false; let hasError = false
return new Promise((resolve) => { return new Promise((resolve) => {
if(!chapterName) { if (!chapterName) {
this.setState({ this.setState({
chapterNameValidateStatus: "error", chapterNameValidateStatus: 'error',
chapterNameHelpMsg: '请输入课节名称' chapterNameHelpMsg: '请输入课节名称',
}) })
hasError = true; hasError = true
resolve(false) resolve(false)
return false return false
} }
if(chapterName.length > 40) { if (chapterName.length > 40) {
this.setState({ this.setState({
chapterNameValidateStatus: "error", chapterNameValidateStatus: 'error',
chapterNameHelpMsg: '不要超过40字' chapterNameHelpMsg: '不要超过40字',
}) })
hasError = true; hasError = true
resolve(false) resolve(false)
return false return false
} }
if(!hasError){ if (!hasError) {
resolve(true) resolve(true)
this.setState({ this.setState({
chapterNameValidateStatus: "", chapterNameValidateStatus: '',
chapterNameHelpMsg: "" chapterNameHelpMsg: '',
}) })
} }
}) })
...@@ -404,9 +390,9 @@ class AddVideoCourse extends React.Component { ...@@ -404,9 +390,9 @@ class AddVideoCourse extends React.Component {
//过期判断 //过期判断
if (User.getExpirationTime() && moment().valueOf() > Number(User.getExpirationTime())) { if (User.getExpirationTime() && moment().valueOf() > Number(User.getExpirationTime())) {
Modal.warning({ Modal.warning({
title:"服务已到期", title: '服务已到期',
content: "当前企业购买的小麦企学院服务已到期，如需继续使用学院功能，请尽快续费购买", content: '当前企业购买的小麦企学院服务已到期，如需继续使用学院功能，请尽快续费购买',
okText: "我知道了" okText: '我知道了',
}) })
return return
} }
...@@ -429,7 +415,7 @@ class AddVideoCourse extends React.Component { ...@@ -429,7 +415,7 @@ class AddVideoCourse extends React.Component {
const commonParams = { const commonParams = {
// videoName, // videoName,
videoDuration:0, //后端的必要参数，不能传空 videoDuration: 0, //后端的必要参数，不能传空
scheduleMedia: scheduleMedia.filter((item) => !!item.mediaContent), scheduleMedia: scheduleMedia.filter((item) => !!item.mediaContent),
categoryId, categoryId,
courseName, courseName,
...@@ -439,7 +425,7 @@ class AddVideoCourse extends React.Component { ...@@ -439,7 +425,7 @@ class AddVideoCourse extends React.Component {
shelfState, shelfState,
whetherVisitorsJoin, whetherVisitorsJoin,
courseType: 'VOICE', courseType: 'VOICE',
courseChapterList courseChapterList,
} }
// 校验必填字段:课程名称, 课程视频 // 校验必填字段:课程名称, 课程视频
this.handleValidate(courseName, courseChapterList, categoryId, scheduleMedia, editorTextLength).then((res) => { this.handleValidate(courseName, courseChapterList, categoryId, scheduleMedia, editorTextLength).then((res) => {
...@@ -456,19 +442,19 @@ class AddVideoCourse extends React.Component { ...@@ -456,19 +442,19 @@ class AddVideoCourse extends React.Component {
if (!res) return if (!res) return
message.success('新建成功') message.success('新建成功')
window.RCHistory.push({ window.RCHistory.push({
pathname: `/video-course` pathname: `/video-course`,
}) })
}) })
} else { } else {
const editParams = { const editParams = {
courseId: id, courseId: id,
...commonParams ...commonParams,
} }
Service.Hades('public/hades/editVideoSchedule', editParams).then((res) => { Service.Hades('public/hades/editVideoSchedule', editParams).then((res) => {
if (!res) return if (!res) return
message.success('保存成功') message.success('保存成功')
window.RCHistory.push({ window.RCHistory.push({
pathname: `/video-course` pathname: `/video-course`,
}) })
}) })
} }
...@@ -492,22 +478,22 @@ class AddVideoCourse extends React.Component { ...@@ -492,22 +478,22 @@ class AddVideoCourse extends React.Component {
return false return false
} }
if (editorTextLength > 1000) { if (editorTextLength > 1000) {
message.warning('课程简介超过字数限定'); message.warning('课程简介超过字数限定')
resolve(false); resolve(false)
return; return
} }
resolve(true) resolve(true)
}) })
} }
handleSelectCover = (file) => { handleSelectCover = (file) => {
if(!file){ if (!file) {
message.info("请选择文件！"); message.info('请选择文件！')
return; return
} }
this.setState({ this.setState({
visible: true, visible: true,
imageFile:file imageFile: file,
}); })
} }
//获取resourceId //获取resourceId
getSignature = (blob, fileName) => { getSignature = (blob, fileName) => {
...@@ -516,7 +502,7 @@ class AddVideoCourse extends React.Component { ...@@ -516,7 +502,7 @@ class AddVideoCourse extends React.Component {
{ {
coverClicpPath: signInfo.fileUrl, coverClicpPath: signInfo.fileUrl,
coverId: signInfo.resourceId, coverId: signInfo.resourceId,
visible: false visible: false,
}, },
() => this.updateCover() () => this.updateCover()
) )
...@@ -527,43 +513,42 @@ class AddVideoCourse extends React.Component { ...@@ -527,43 +513,42 @@ class AddVideoCourse extends React.Component {
this.setState({ this.setState({
showSelectCoverModal: false, showSelectCoverModal: false,
coverUrl: coverClicpPath, coverUrl: coverClicpPath,
coverId: coverId coverId: coverId,
}) })
} }
handleRenameCourseChapter = (chapterId, chapterIndex) => { handleRenameCourseChapter = (chapterId, chapterIndex) => {
const { mediaNameAlias } = this.state; const { mediaNameAlias } = this.state
this.handleValidateChapterName(mediaNameAlias).then(res => { this.handleValidateChapterName(mediaNameAlias).then((res) => {
// 校验不通过不能点确定保存修改课节名称 // 校验不通过不能点确定保存修改课节名称
if (!res) { if (!res) {
return message.warning('重命名失败'); return message.warning('重命名失败')
} }
let { courseChapterList } = this.state; let { courseChapterList } = this.state
let _courseChapterList = []; let _courseChapterList = []
_courseChapterList = courseChapterList.map((item,index)=>{ _courseChapterList = courseChapterList.map((item, index) => {
if(item.resourceId === chapterId && chapterIndex === index){ if (item.resourceId === chapterId && chapterIndex === index) {
item.mediaName = mediaNameAlias; item.mediaName = mediaNameAlias
item.visible = false; item.visible = false
} }
return item return item
}) })
this.setState({ this.setState({
courseChapterList: _courseChapterList, courseChapterList: _courseChapterList,
chapterNameValidateStatus: '', chapterNameValidateStatus: '',
        chapterNameHelpMsg: '', chapterNameHelpMsg: '',
mediaNameAlias: '', mediaNameAlias: '',
}) })
}); })
} }
handleChangePopConfirmVisible = (chapterId, chapterNameIndex, visible)=> { handleChangePopConfirmVisible = (chapterId, chapterNameIndex, visible) => {
let { courseChapterList } = this.state; let { courseChapterList } = this.state
let _courseChapterList = []; let _courseChapterList = []
_courseChapterList = courseChapterList.map((item,index)=>{ _courseChapterList = courseChapterList.map((item, index) => {
if(item.resourceId === chapterId && chapterNameIndex === index){ if (item.resourceId === chapterId && chapterNameIndex === index) {
item.visible = visible item.visible = visible
} else { } else {
item.visible = false item.visible = false
...@@ -576,117 +561,130 @@ class AddVideoCourse extends React.Component { ...@@ -576,117 +561,130 @@ class AddVideoCourse extends React.Component {
} }
handleDeleteCourseChapter = (chapterId, chapterIndex) => { handleDeleteCourseChapter = (chapterId, chapterIndex) => {
console.log('chapterId---',chapterId, chapterIndex); console.log('chapterId---', chapterId, chapterIndex)
let { courseChapterList } = this.state; let { courseChapterList } = this.state
let _courseChapterList = courseChapterList.filter((item,index) => { let _courseChapterList = courseChapterList.filter((item, index) => {
return item.resourceId !== chapterId || item.resourceId === chapterId && chapterIndex !== index return item.resourceId !== chapterId || (item.resourceId === chapterId && chapterIndex !== index)
}) })
_courseChapterList.map((item, index) => { _courseChapterList.map((item, index) => {
item.sort = index item.sort = index
}) })
this.setState({ this.setState({
courseChapterList :_courseChapterList courseChapterList: _courseChapterList,
}) })
} }
renderChapterTitle = (item) => { renderChapterTitle = (item) => {
const { chapterNameValidateStatus, chapterNameHelpMsg} = this.state; const { chapterNameValidateStatus, chapterNameHelpMsg } = this.state
return <div className="course-chapter-title-popover"> return (
<div className="tag-title">课节名称</div> <div className='course-chapter-title-popover'>
<div className='tag-title'>课节名称</div>
<Form> <Form>
<Form.Item <Form.Item validateStatus={chapterNameValidateStatus} help={chapterNameHelpMsg}>
validateStatus={chapterNameValidateStatus}
help={chapterNameHelpMsg}
>
<TextArea <TextArea
defaultValue={item.mediaName} defaultValue={item.mediaName}
placeholder="请输入课节名称" placeholder='请输入课节名称'
maxLength={40} maxLength={40}
autoSize autoSize
style={{ width: '318px'}} style={{ width: '318px' }}
onChange={(e) => { onChange={(e) => {
this.setState({ this.setState(
mediaNameAlias: e.target.value.trim() {
}, () => { mediaNameAlias: e.target.value.trim(),
},
() => {
this.handleValidateChapterName(this.state.mediaNameAlias) this.handleValidateChapterName(this.state.mediaNameAlias)
}) }
)
}} }}
/> />
</Form.Item> </Form.Item>
</Form> </Form>
</div> </div>
)
} }
// 上下移动 // 上下移动
handleChangeIndex = (isUp, sortIndex) => { handleChangeIndex = (isUp, sortIndex) => {
const { courseChapterList} = this.state; const { courseChapterList } = this.state
// 第一个上移和最后一个下移不能使用 // 第一个上移和最后一个下移不能使用
if((isUp && sortIndex === 0) || (!isUp && sortIndex === (courseChapterList.length -1))){ if ((isUp && sortIndex === 0) || (!isUp && sortIndex === courseChapterList.length - 1)) {
return; return
} }
let _courseChapterList = [...courseChapterList]; let _courseChapterList = [...courseChapterList]
const temp = courseChapterList[sortIndex]; const temp = courseChapterList[sortIndex]
// 若上移 // 若上移
if(isUp){ if (isUp) {
_courseChapterList[sortIndex -1] = temp; _courseChapterList[sortIndex - 1] = temp
_courseChapterList[sortIndex -1].sort = sortIndex -1; _courseChapterList[sortIndex - 1].sort = sortIndex - 1
_courseChapterList[sortIndex] = courseChapterList[sortIndex - 1]; _courseChapterList[sortIndex] = courseChapterList[sortIndex - 1]
_courseChapterList[sortIndex].sort = sortIndex; _courseChapterList[sortIndex].sort = sortIndex
} else { // 若下移 } else {
_courseChapterList[sortIndex + 1] = temp; // 若下移
_courseChapterList[sortIndex + 1].sort = sortIndex + 1; _courseChapterList[sortIndex + 1] = temp
_courseChapterList[sortIndex] = courseChapterList[sortIndex + 1]; _courseChapterList[sortIndex + 1].sort = sortIndex + 1
_courseChapterList[sortIndex].sort = sortIndex; _courseChapterList[sortIndex] = courseChapterList[sortIndex + 1]
_courseChapterList[sortIndex].sort = sortIndex
} }
this.setState({ this.setState({
courseChapterList: _courseChapterList courseChapterList: _courseChapterList,
}) })
} }
renderTypemenu =()=>{ renderTypemenu = () => {
return <Menu> return (
<Menu>
<Menu.Item> <Menu.Item>
<span onClick={()=>{this.selectFileType("VIDEO")}}> <span
onClick={() => {
this.selectFileType('VIDEO')
}}>
视频文件 视频文件
</span> </span>
</Menu.Item> </Menu.Item>
<Menu.Item> <Menu.Item>
<span onClick={()=>{this.selectFileType("WORD_PDF")}}> <span
onClick={() => {
this.selectFileType('WORD_PDF')
}}>
资料文件 资料文件
</span> </span>
</Menu.Item> </Menu.Item>
</Menu> </Menu>
)
} }
selectFileType = (type) =>{ selectFileType = (type) => {
const { courseChapterList } = this.state; const { courseChapterList } = this.state
if(courseChapterList.length >= 20) { if (courseChapterList.length >= 20) {
message.warning(`最多只能上传20个文件`); message.warning(`最多只能上传20个文件`)
return; return
} }
if(type==="VIDEO"){ if (type === 'VIDEO') {
this.setState({ this.setState({
showSelectFileModal: true, showSelectFileModal: true,
selectTypeList:['MP4'], selectTypeList: ['MP4'],
accept:'video/mp4' accept: 'video/mp4',
}) })
}else{ } else {
this.setState({ this.setState({
showSelectFileModal: true, showSelectFileModal: true,
selectTypeList:['DOC','DOCX','PDF'], selectTypeList: ['DOC', 'DOCX', 'PDF'],
accept:'.doc,.docx,.pdf' accept: '.doc,.docx,.pdf',
}) })
} }
} }
renderToolTipTitle = ()=> { renderToolTipTitle = () => {
return (<div> return (
<div>
<p>视频支持mp4格式，大小不超过2G；</p> <p>视频支持mp4格式，大小不超过2G；</p>
<p>文件支持PDF、docx、doc格式，大小不超过100M</p> <p>文件支持PDF、docx、doc格式，大小不超过100M</p>
</div>) </div>
)
} }
render() { render() {
...@@ -699,23 +697,21 @@ class AddVideoCourse extends React.Component { ...@@ -699,23 +697,21 @@ class AddVideoCourse extends React.Component {
diskList, diskList,
// videoType, // videoType,
shelfState, shelfState,
categoryName, categoryId,
courseCatalogList,
whetherVisitorsJoin, whetherVisitorsJoin,
visible, visible,
showSelectCoverModal, showSelectCoverModal,
hasImgReady,
cutImageBlob,
introduce, introduce,
loadintroduce, loadintroduce,
id, id,
courseChapterList, courseChapterList,
imageFile, imageFile,
selectTypeList, selectTypeList,
accept accept,
} = this.state } = this.state
const defaultCover = 'https://image.xiaomaiketang.com/xm/TwtGPQGE4K.png'; const defaultCover = 'https://image.xiaomaiketang.com/xm/TwtGPQGE4K.png'
const isDefaultCover = coverUrl === defaultCover || coverUrl == null; const isDefaultCover = coverUrl === defaultCover || coverUrl == null
return ( return (
<div className='page add-video-course-page'> <div className='page add-video-course-page'>
...@@ -745,7 +741,7 @@ class AddVideoCourse extends React.Component { ...@@ -745,7 +741,7 @@ class AddVideoCourse extends React.Component {
<span className='label required upload-chapter'>上传课节：</span> <span className='label required upload-chapter'>上传课节：</span>
</div> </div>
<div className='sub-content'> <div className='sub-content'>
<div className="btn-wrap"> <div className='btn-wrap'>
{/* <Button {/* <Button
onClick={() => { onClick={() => {
if(courseChapterList.length >= 20) { if(courseChapterList.length >= 20) {
...@@ -765,61 +761,80 @@ class AddVideoCourse extends React.Component { ...@@ -765,61 +761,80 @@ class AddVideoCourse extends React.Component {
</div> </div>
<div className='tips'> <div className='tips'>
课节数量限制20个，文件规格说明 课节数量限制20个，文件规格说明
<Tooltip title={this.renderToolTipTitle()} overlayClassName="my-chapter-tooltip"> <Tooltip title={this.renderToolTipTitle()} overlayClassName='my-chapter-tooltip'>
<i className='icon iconfont' style={{ cursor: 'pointer', color: '#bfbfbf', fontSize: '14px'}}> &#xe61d;</i> <i className='icon iconfont' style={{ cursor: 'pointer', color: '#bfbfbf', fontSize: '14px' }}>
{' '}
&#xe61d;
</i>
</Tooltip> </Tooltip>
</div> </div>
</div> </div>
</div> </div>
<If condition={courseChapterList.length > 0}> <If condition={courseChapterList.length > 0}>
<div className="course-chapter-list-wrap"> <div className='course-chapter-list-wrap'>
<div className="course-chapter-total">{`共${courseChapterList.length}个课节`}</div> <div className='course-chapter-total'>{`共${courseChapterList.length}个课节`}</div>
<div className='course-chapter-list' id="course-chapter-list"> <div className='course-chapter-list' id='course-chapter-list'>
{ {_.map(courseChapterList, (item, index) => {
_.map(courseChapterList,(item,index) => { return (
return <div className='course-ware' key={index}> <div className='course-ware' key={index}>
<div className="course-ware__index">{index < 9 ? `0${index + 1 } ` : `${index + 1 } `}</div> <div className='course-ware__index'>{index < 9 ? `0${index + 1} ` : `${index + 1} `}</div>
<img className='course-ware__img' src={FileTypeIcon[item.mediaType]} alt='' /> <img className='course-ware__img' src={FileTypeIcon[item.mediaType]} alt='' />
<div className='course-ware__name'>{item.mediaName && item.mediaName.length > 24 ? <Tooltip title={item.mediaName}>{item.mediaName}</Tooltip>:item.mediaName}</div> <div className='course-ware__name'>
<div className="course-chapter__opt" id={item.resourceId}> {item.mediaName && item.mediaName.length > 24 ? <Tooltip title={item.mediaName}>{item.mediaName}</Tooltip> : item.mediaName}
<div className={`up ${Number(index) === 0 ? 'disabled':''}`} onClick={()=> this.handleChangeIndex(true,item.sort,item.resourceId)}>上移</div> </div>
<div className="line">|</div> <div className='course-chapter__opt' id={item.resourceId}>
<div className={`down ${Number(index) === (courseChapterList.length - 1) ? 'disabled':''}`} onClick={()=> this.handleChangeIndex(false,item.sort,item.resourceId)}>下移</div> <div
<div className="line">|</div> className={`up ${Number(index) === 0 ? 'disabled' : ''}`}
onClick={() => this.handleChangeIndex(true, item.sort, item.resourceId)}>
上移
</div>
<div className='line'>|</div>
<div
className={`down ${Number(index) === courseChapterList.length - 1 ? 'disabled' : ''}`}
onClick={() => this.handleChangeIndex(false, item.sort, item.resourceId)}>
下移
</div>
<div className='line'>|</div>
<Popconfirm <Popconfirm
placement="topLeft" placement='topLeft'
className="course-chapter-tooltip" className='course-chapter-tooltip'
title={this.renderChapterTitle(item)} title={this.renderChapterTitle(item)}
color='#fff' trigger="click" color='#fff'
overlayClassName="chapter-popover" trigger='click'
getPopupContainer={() => overlayClassName='chapter-popover'
document.getElementById('course-chapter-list') getPopupContainer={() => document.getElementById('course-chapter-list')}
}
destroyTooltipOnHide={true} destroyTooltipOnHide={true}
visible={item.visible} visible={item.visible}
onConfirm={() => this.handleRenameCourseChapter(item.resourceId, index)} onConfirm={() => this.handleRenameCourseChapter(item.resourceId, index)}
icon={null} icon={null}
onVisibleChange={(visible)=>{ onVisibleChange={(visible) => {
!visible && this.setState({ !visible &&
chapterNameValidateStatus: '', this.setState({
        chapterNameHelpMsg: '', chapterNameValidateStatus: '',
chapterNameHelpMsg: '',
mediaNameAlias: '', mediaNameAlias: '',
}) })
}} }}
onCancel={()=> this.handleChangePopConfirmVisible(item.resourceId, index, false)} onCancel={() => this.handleChangePopConfirmVisible(item.resourceId, index, false)}>
> <div
<div className="rename" onClick={() => {this.setState({mediaNameAlias: item.mediaName}, ()=>{ className='rename'
this.handleChangePopConfirmVisible(item.resourceId, index, true)}) onClick={() => {
}}>重命名</div> this.setState({ mediaNameAlias: item.mediaName }, () => {
this.handleChangePopConfirmVisible(item.resourceId, index, true)
})
}}>
重命名
</div>
</Popconfirm> </Popconfirm>
<div className="line">|</div> <div className='line'>|</div>
<div className="delete" onClick={()=>this.handleDeleteCourseChapter(item.resourceId, index)}>移除</div> <div className='delete' onClick={() => this.handleDeleteCourseChapter(item.resourceId, index)}>
移除
</div> </div>
</div> </div>
}) </div>
} )
})}
</div> </div>
</div> </div>
</If> </If>
...@@ -838,7 +853,7 @@ class AddVideoCourse extends React.Component { ...@@ -838,7 +853,7 @@ class AddVideoCourse extends React.Component {
onClick={() => { onClick={() => {
this.setState({ this.setState({
coverUrl: '', coverUrl: '',
coverId: '' coverId: '',
}) })
}}> }}>
使用默认图 使用默认图
...@@ -848,9 +863,7 @@ class AddVideoCourse extends React.Component { ...@@ -848,9 +863,7 @@ class AddVideoCourse extends React.Component {
</div> </div>
<div className='img-content'> <div className='img-content'>
{ {isDefaultCover && <span className='tag'>默认图</span>}
isDefaultCover && <span className="tag">默认图</span>
}
{/* 如果视频和封面都没有上传的话, 那么就显示缺省, 如果上传了视频, 那么封面图就默认显示视频的第一帧, 如果上传了封面图, 那么就显示上传的封面图 */} {/* 如果视频和封面都没有上传的话, 那么就显示缺省, 如果上传了视频, 那么封面图就默认显示视频的第一帧, 如果上传了封面图, 那么就显示上传的封面图 */}
<img src={coverUrl || `https://image.xiaomaiketang.com/xm/TwtGPQGE4K.png`} alt='' /> <img src={coverUrl || `https://image.xiaomaiketang.com/xm/TwtGPQGE4K.png`} alt='' />
</div> </div>
...@@ -858,38 +871,12 @@ class AddVideoCourse extends React.Component { ...@@ -858,38 +871,12 @@ class AddVideoCourse extends React.Component {
</div> </div>
<div className='course-catalog required'> <div className='course-catalog required'>
<span className='label'>课程分类：</span> <span className='label'>课程分类：</span>
{pageType === 'add' && ( <CourseCatalogSelect
<Cascader value={categoryId}
defaultValue={[]} onChange={(value, label) => {
options={courseCatalogList} this.handleChangeCatalogList(value, label)
displayRender={(label) => label.join('-')} }}
fieldNames={fieldNames}
onChange={this.catalogChange}
style={{ width: 240 }}
placeholder='请选择课程分类'
suffixIcon={
<span className='icon iconfont' style={{ fontSize: '12px', color: '#BFBFBF' }}>
&#xe835;
</span>
}
/>
)}
{pageType === 'edit' && categoryName && (
<Cascader
defaultValue={[categoryName]}
options={courseCatalogList}
displayRender={(label) => label.join('-')}
fieldNames={fieldNames}
onChange={this.catalogChange}
style={{ width: 240 }}
placeholder='请选择课程分类'
suffixIcon={
<span className='icon iconfont' style={{ fontSize: '12px', color: '#BFBFBF' }}>
&#xe835;
</span>
}
/> />
)}
</div> </div>
<div className='intro-info mt16'> <div className='intro-info mt16'>
<AddVideoIntro <AddVideoIntro
...@@ -899,7 +886,7 @@ class AddVideoCourse extends React.Component { ...@@ -899,7 +886,7 @@ class AddVideoCourse extends React.Component {
shelfState, shelfState,
whetherVisitorsJoin, whetherVisitorsJoin,
introduce, introduce,
loadintroduce loadintroduce,
}} }}
onChange={this.handleChangeForm} onChange={this.handleChangeForm}
/> />
...@@ -907,7 +894,7 @@ class AddVideoCourse extends React.Component { ...@@ -907,7 +894,7 @@ class AddVideoCourse 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 type='primary' onClick={_.debounce(() => this.handleSubmit(), 3000, true)}>
...@@ -925,7 +912,7 @@ class AddVideoCourse extends React.Component { ...@@ -925,7 +912,7 @@ class AddVideoCourse extends React.Component {
queryTypeEnum={'ONLINE'} queryTypeEnum={'ONLINE'}
confirm={{ confirm={{
title: '文件过大，无法上传', title: '文件过大，无法上传',
content: '上传的视频大小不能超过2G，文件大小不能超过100M' content: '上传的视频大小不能超过2G，文件大小不能超过100M',
}} }}
tooltip={''} tooltip={''}
isOpen={showSelectFileModal} isOpen={showSelectFileModal}
...@@ -952,9 +939,16 @@ class AddVideoCourse extends React.Component { ...@@ -952,9 +939,16 @@ class AddVideoCourse extends React.Component {
onSelect={this.handleSelectCover} onSelect={this.handleSelectCover}
/> />
)} )}
{ visible && {visible && (
<ImgClipModal visible={visible} imgUrl={imageFile.ossUrl} onConfirm={this.getSignature} onClose={()=>{this.setState({ visible: false });}}/> <ImgClipModal
} visible={visible}
imgUrl={imageFile.ossUrl}
onConfirm={this.getSignature}
onClose={() => {
this.setState({ visible: false })
}}
/>
)}
{this.state.previewCourseModal} {this.state.previewCourseModal}
</div> </div>
) )
......
src/modules/store-manage/StoreDecorationPage.less
.store-decoration-page { .store-decoration-page {
.box { .box {
padding-top:11px!important; padding-top: 11px !important;
} }
thead { thead {
display: none; display: none;
...@@ -27,11 +27,11 @@ ...@@ -27,11 +27,11 @@
} }
.banner-thumbnail { .banner-thumbnail {
width: 230px; width: 230px;
height: 79px; height: 96px;
} }
.web-banner-thumbnail { .web-banner-thumbnail {
width: 389px; width: 389px;
height: 67px; height: 162px;
} }
.index-num { .index-num {
...@@ -51,18 +51,17 @@ ...@@ -51,18 +51,17 @@
.operation { .operation {
.edit { .edit {
color: #2966FF; color: #2966ff;
cursor: pointer; cursor: pointer;
} }
.divider-line { .divider-line {
color:#BFBFBF color: #bfbfbf;
} }
.delete { .delete {
color: #2966FF; color: #2966ff;
cursor: pointer; cursor: pointer;
} }
} }
} }
.clip-box { .clip-box {
display: flex; display: flex;
...@@ -86,7 +85,7 @@ ...@@ -86,7 +85,7 @@
.preview-url { .preview-url {
width: 500px; width: 500px;
height: 73px; height: 73px;
background: #E6E6E6; background: #e6e6e6;
} }
#preview-url-box { #preview-url-box {
...@@ -112,11 +111,11 @@ ...@@ -112,11 +111,11 @@
} }
.banner-thumbnail { .banner-thumbnail {
width: 230px; width: 230px;
height: 79px; height: 96px;
} }
.web-banner-thumbnail { .web-banner-thumbnail {
width: 389px; width: 389px;
height: 67px; height: 162px;
} }
.index-num { .index-num {
height: 33px; height: 33px;
......
src/modules/store-manage/StoreH5DecorationTab.jsx
...@@ -7,185 +7,164 @@ ...@@ -7,185 +7,164 @@
* @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有 * @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/ */
import React from "react"; import React from 'react'
import { withRouter } from "react-router-dom"; import { withRouter } from 'react-router-dom'
import _ from "underscore"; import _ from 'underscore'
import { Modal, message, Button } from "antd"; import { Modal, message, Button } from 'antd'
import StoreService from "@/domains/store-domain/storeService"; import StoreService from '@/domains/store-domain/storeService'
import { import { sortableContainer, sortableElement, sortableHandle } from 'react-sortable-hoc'
sortableContainer, import { MenuOutlined } from '@ant-design/icons'
sortableElement, import arrayMove from 'array-move'
sortableHandle, import User from '@/common/js/user'
} from "react-sortable-hoc"; import SelectPrepareFileModal from '@/modules/prepare-lesson/modal/SelectPrepareFileModal'
import { MenuOutlined } from "@ant-design/icons"; import './StoreDecorationPage.less'
import arrayMove from "array-move"; import Upload from '@/core/upload'
import User from "@/common/js/user"; import { XMTable } from '@/components'
import SelectPrepareFileModal from "@/modules/prepare-lesson/modal/SelectPrepareFileModal"; import college from '@/common/lottie/college'
import "./StoreDecorationPage.less";
import Upload from "@/core/upload";
import { XMTable } from '@/components';
import college from '@/common/lottie/college';
import ImgClipModal from '@/components/ImgClipModal' import ImgClipModal from '@/components/ImgClipModal'
const { confirm } = Modal; const { confirm } = Modal
const DragHandle = sortableHandle(() => ( const DragHandle = sortableHandle(() => <MenuOutlined style={{ cursor: 'pointer', color: '#999' }} className='drag-icon' />)
<MenuOutlined const SortableItem = sortableElement((props) => <tr {...props} />)
style={{ cursor: "pointer", color: "#999" }} const SortableContainer = sortableContainer((props) => <tbody {...props} />)
className="drag-icon" let cutFlag = false
/>
));
const SortableItem = sortableElement((props) => <tr {...props} />);
const SortableContainer = sortableContainer((props) => <tbody {...props} />);
let cutFlag = false;
class StoreH5Decoration extends React.Component { class StoreH5Decoration extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props)
this.state = { this.state = {
storeDecorationlist: [], storeDecorationlist: [],
query: { query: {
storeId: User.getStoreId(), storeId: User.getStoreId(),
termType: "H5_ADMIN", termType: 'H5_ADMIN',
}, },
showSelectFileModal: false, showSelectFileModal: false,
diskList: [], diskList: [],
photoclip: null, photoclip: null,
preview: "", preview: '',
cutImageBlob: null, cutImageBlob: null,
hasImgReady: false, // 图片是否上传成功 hasImgReady: false, // 图片是否上传成功
imageFile: null // 需要被截取的图片 imageFile: null, // 需要被截取的图片
}; }
} }
timer = null timer = null
componentDidMount() { componentDidMount() {
this.getStoreDecorationList(); this.getStoreDecorationList()
} }
getStoreDecorationList = () => { getStoreDecorationList = () => {
StoreService.getStoreDecorationList(this.state.query).then((res) => { StoreService.getStoreDecorationList(this.state.query).then((res) => {
const data = _.map(res.result, (item, index) => { const data = _.map(res.result, (item, index) => {
item.index = index; item.index = index
item.key = index; item.key = index
return item; return item
}); })
this.setState({ this.setState({
storeDecorationlist: data, storeDecorationlist: data,
}); })
}); })
}; }
parseColumn = () => { parseColumn = () => {
return [ return [
{ {
title: "Sort", title: 'Sort',
dataIndex: "sort", dataIndex: 'sort',
width: 30, width: 30,
className: "drag-visible", className: 'drag-visible',
render: () => <DragHandle />, render: () => <DragHandle />,
}, },
{ {
title: "sequence", title: 'sequence',
dataIndex: "sequence", dataIndex: 'sequence',
key: "sequence", key: 'sequence',
className: "drag-visible", className: 'drag-visible',
width: 20, width: 20,
render: (val, record, index) => { render: (val, record, index) => {
return <div className="index-num">{index + 1}</div>; return <div className='index-num'>{index + 1}</div>
}, },
}, },
{ {
title: "banner", title: 'banner',
dataIndex: "bannerPath", dataIndex: 'bannerPath',
key: "bannerPath", key: 'bannerPath',
className: "drag-visible", className: 'drag-visible',
render: (val) => { render: (val) => {
return <img src={val} alt="banner" className="banner-thumbnail" />; return <img src={val} alt='banner' className='banner-thumbnail' />
}, },
}, },
{ {
title: "操作", title: '操作',
dataIndex: "operation", dataIndex: 'operation',
width: "20%", width: '20%',
render: (val, record, index) => { render: (val, record, index) => {
return ( return (
<div className="operation"> <div className='operation'>
<span <span className='edit' onClick={() => this.handleReplaceDecoration(record, index)}>
className="edit"
onClick={() => this.handleReplaceDecoration(record,index)}
>
替换 替换
</span> </span>
<span className="divider-line">{" | "}</span> <span className='divider-line'>{' | '}</span>
<span <span className='delete' onClick={() => this.handleDeleteDecorationConfirm(record)}>
className="delete"
onClick={() => this.handleDeleteDecorationConfirm(record)}
>
删除 删除
</span> </span>
</div> </div>
); )
}, },
}, },
]; ]
}; }
handleToAddStoreDecoration = () => { handleToAddStoreDecoration = () => {
const { choosedBannerId } = this.state; const { choosedBannerId } = this.state
if (this.state.storeDecorationlist.length >= 5 && !choosedBannerId) { if (this.state.storeDecorationlist.length >= 5 && !choosedBannerId) {
message.info("最多可添加5条"); message.info('最多可添加5条')
return; return
} }
this.setState({ this.setState({
showSelectFileModal: true, showSelectFileModal: true,
choosedBannerId: "" choosedBannerId: '',
}); })
}; }
handleReplaceDecoration = (record, index) => { handleReplaceDecoration = (record, index) => {
this.setState({ this.setState({
showSelectFileModal: true, showSelectFileModal: true,
choosedBannerId: record.id, choosedBannerId: record.id,
choosedBannerItem:record choosedBannerItem: record,
}); })
}; }
handleDeleteDecoration = (record) => { handleDeleteDecoration = (record) => {
StoreService.deleteStoreDecorationList({ StoreService.deleteStoreDecorationList({
storeBannerId: record.id, storeBannerId: record.id,
termType: "H5_ADMIN", termType: 'H5_ADMIN',
}).then((res) => { }).then((res) => {
message.success("已删除"); message.success('已删除')
this.getStoreDecorationList(); this.getStoreDecorationList()
}); })
}; }
handleDeleteDecorationConfirm = (record) => { handleDeleteDecorationConfirm = (record) => {
return confirm({ return confirm({
title: "你确定要删除这个banner吗？", title: '你确定要删除这个banner吗？',
icon: ( icon: <span className='icon iconfont default-confirm-icon'>&#xe839; </span>,
<span className="icon iconfont default-confirm-icon">&#xe839; </span> okText: '删除',
),
okText: "删除",
okType: 'danger', okType: 'danger',
cancelText: "取消", cancelText: '取消',
onOk: () => { onOk: () => {
this.handleDeleteDecoration(record); this.handleDeleteDecoration(record)
}, },
}); })
}; }
onSortEnd = ({ oldIndex, newIndex }) => { onSortEnd = ({ oldIndex, newIndex }) => {
const { storeDecorationlist } = this.state; const { storeDecorationlist } = this.state
if (oldIndex !== newIndex) { if (oldIndex !== newIndex) {
const newData = arrayMove( const newData = arrayMove([].concat(storeDecorationlist), oldIndex, newIndex).filter((el) => !!el)
[].concat(storeDecorationlist),
oldIndex,
newIndex
).filter((el) => !!el);
this.setState( this.setState(
{ {
storeDecorationlist: newData, storeDecorationlist: newData,
...@@ -193,132 +172,108 @@ class StoreH5Decoration extends React.Component { ...@@ -193,132 +172,108 @@ class StoreH5Decoration extends React.Component {
storeBannerId: storeDecorationlist[oldIndex].id, storeBannerId: storeDecorationlist[oldIndex].id,
}, },
() => { () => {
this.moveBannerSequence(); this.moveBannerSequence()
}
)
} }
);
} }
};
DraggableBodyRow = ({ className, style, ...restProps }) => { DraggableBodyRow = ({ className, style, ...restProps }) => {
const { storeDecorationlist } = this.state; const { storeDecorationlist } = this.state
// function findIndex base on Table rowKey props and should always be a right array index // function findIndex base on Table rowKey props and should always be a right array index
const index = storeDecorationlist.findIndex( const index = storeDecorationlist.findIndex((x) => x.index === restProps['data-row-key'])
(x) => x.index === restProps["data-row-key"] return <SortableItem index={index} {...restProps} />
); }
return <SortableItem index={index} {...restProps} />;
};
// 选择云盘资源 // 选择云盘资源
handleSelectImg = (file) => { handleSelectImg = (file) => {
if(file){ if (file) {
this.setState({ this.setState({
visible: true, visible: true,
imageFile:file imageFile: file,
}); })
}
} }
};
//获取resourceId //获取resourceId
getSignature = (blob) => { getSignature = (blob) => {
Upload.uploadBlobToOSS(blob, "avatar" + new Date().valueOf()).then( Upload.uploadBlobToOSS(blob, 'avatar' + new Date().valueOf()).then((addBannerPath) => {
(addBannerPath) => { this.setState(
this.setState({ {
addBannerPath, addBannerPath,
visible: false visible: false,
}, () => { },
this.state.choosedBannerId () => {
? this.editStoreBanner() this.state.choosedBannerId ? this.editStoreBanner() : this.addStoreBanner()
: this.addStoreBanner(); }
}); )
})
} }
);
};
editStoreBanner = () => { editStoreBanner = () => {
const { addBannerPath, choosedBannerId } = this.state; const { addBannerPath, choosedBannerId } = this.state
const params = { const params = {
bannerPath: addBannerPath, bannerPath: addBannerPath,
storeBannerId: choosedBannerId, storeBannerId: choosedBannerId,
termType: "H5_ADMIN", termType: 'H5_ADMIN',
}; }
StoreService.editStoreBanner(params).then((res) => { StoreService.editStoreBanner(params).then((res) => {
message.success("设置成功"); message.success('设置成功')
this.getStoreDecorationList(); this.getStoreDecorationList()
}); })
}; }
moveBannerSequence = () => { moveBannerSequence = () => {
const { newSequence, storeBannerId } = this.state; const { newSequence, storeBannerId } = this.state
const params = { const params = {
sequence: newSequence, sequence: newSequence,
storeBannerId: storeBannerId, storeBannerId: storeBannerId,
termType: "H5_ADMIN", termType: 'H5_ADMIN',
}; }
StoreService.moveBannerSequence(params).then((res) => { StoreService.moveBannerSequence(params).then((res) => {
this.getStoreDecorationList(); this.getStoreDecorationList()
}); })
}; }
addStoreBanner = () => { addStoreBanner = () => {
const { addBannerPath } = this.state; const { addBannerPath } = this.state
const params = { const params = {
bannerPath: addBannerPath, bannerPath: addBannerPath,
storeId: User.getStoreId(), storeId: User.getStoreId(),
termType: "H5_ADMIN", termType: 'H5_ADMIN',
}; }
StoreService.addStoreBanner(params).then((res) => { StoreService.addStoreBanner(params).then((res) => {
message.success("设置成功"); message.success('设置成功')
this.getStoreDecorationList(); this.getStoreDecorationList()
}); })
}; }
render() { render() {
const { const { storeDecorationlist, showSelectFileModal, diskList, visible, cutImageBlob, hasImgReady, imageFile } = this.state
storeDecorationlist, const DraggableContainer = (props) => <SortableContainer useDragHandle helperClass='row-dragging' onSortEnd={this.onSortEnd} {...props} />
showSelectFileModal,
diskList,
visible,
cutImageBlob,
hasImgReady,
imageFile,
} = this.state;
const DraggableContainer = (props) => (
<SortableContainer
useDragHandle
helperClass="row-dragging"
onSortEnd={this.onSortEnd}
{...props}
/>
);
return ( return (
<div className="store-decoration-h5-page"> <div className='store-decoration-h5-page'>
<div className="box-header"> <div className='box-header'>
<div className="banner-setting"> <div className='banner-setting'>
<div className="title">banner设置</div> <div className='title'>banner设置</div>
<div className="tip"> <div className='tip'>图片支持bmp、jpeg、jpg、png、gif格式，最大5M，最多可添加5张，拖动可排序。建议尺寸750*252px。</div>
图片支持bmp、jpeg、jpg、png、gif格式，最大5M，最多可添加5张，拖动可排序。建议尺寸750*252px。
</div>
</div> </div>
<Button <Button
onClick={() => { onClick={() => {
this.handleToAddStoreDecoration(); this.handleToAddStoreDecoration()
}} }}
type="primary" type='primary'
className="add-show-btn" className='add-show-btn'>
>
添加Banner 添加Banner
</Button> </Button>
</div> </div>
<div className="box-body"> <div className='box-body'>
<XMTable <XMTable
renderEmpty={{ renderEmpty={{
image: college, image: college,
description: '暂无数据' description: '暂无数据',
}} }}
size={"middle"} size={'middle'}
pagination={false} pagination={false}
dataSource={storeDecorationlist} dataSource={storeDecorationlist}
columns={this.parseColumn()} columns={this.parseColumn()}
...@@ -333,23 +288,32 @@ class StoreH5Decoration extends React.Component { ...@@ -333,23 +288,32 @@ class StoreH5Decoration extends React.Component {
/> />
</div> </div>
<SelectPrepareFileModal <SelectPrepareFileModal
operateType="select" operateType='select'
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={showSelectFileModal} isOpen={showSelectFileModal}
diskList={diskList} diskList={diskList}
onClose={() => { onClose={() => {
this.setState({ showSelectFileModal: false }); this.setState({ showSelectFileModal: false })
}} }}
onSelect={this.handleSelectImg} onSelect={this.handleSelectImg}
/> />
{ visible && {visible && (
<ImgClipModal visible={visible} imgUrl={imageFile.ossUrl} aspectRatio='500/172' cropBoxHeight='172' onConfirm={this.getSignature} onClose={()=>{this.setState({ visible: false });}}/> <ImgClipModal
} visible={visible}
imgUrl={imageFile.ossUrl}
aspectRatio='500/169'
cropBoxHeight='169'
onConfirm={this.getSignature}
onClose={() => {
this.setState({ visible: false })
}}
/>
)}
</div> </div>
); )
} }
} }
export default withRouter(StoreH5Decoration); export default withRouter(StoreH5Decoration)
src/modules/store-manage/StoreWebDecorationTab.jsx
...@@ -7,184 +7,163 @@ ...@@ -7,184 +7,163 @@
* @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有 * @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/ */
import React from "react"; import React from 'react'
import { withRouter } from "react-router-dom"; import { withRouter } from 'react-router-dom'
import _ from "underscore"; import _ from 'underscore'
import { Modal, message, Button } from "antd"; import { Modal, message, Button } from 'antd'
import StoreService from "@/domains/store-domain/storeService"; import StoreService from '@/domains/store-domain/storeService'
import { import { sortableContainer, sortableElement, sortableHandle } from 'react-sortable-hoc'
sortableContainer, import { MenuOutlined } from '@ant-design/icons'
sortableElement, import arrayMove from 'array-move'
sortableHandle, import User from '@/common/js/user'
} from "react-sortable-hoc"; import SelectPrepareFileModal from '@/modules/prepare-lesson/modal/SelectPrepareFileModal'
import { MenuOutlined } from "@ant-design/icons"; import './StoreDecorationPage.less'
import arrayMove from "array-move"; import Upload from '@/core/upload'
import User from "@/common/js/user"; import { XMTable } from '@/components'
import SelectPrepareFileModal from "@/modules/prepare-lesson/modal/SelectPrepareFileModal"; import college from '@/common/lottie/college'
import "./StoreDecorationPage.less";
import Upload from "@/core/upload";
import { XMTable } from '@/components';
import college from '@/common/lottie/college';
import ImgClipModal from '@/components/ImgClipModal' import ImgClipModal from '@/components/ImgClipModal'
const { confirm } = Modal; const { confirm } = Modal
const DragHandle = sortableHandle(() => ( const DragHandle = sortableHandle(() => <MenuOutlined style={{ cursor: 'pointer', color: '#999' }} className='drag-icon' />)
<MenuOutlined const SortableItem = sortableElement((props) => <tr {...props} />)
style={{ cursor: "pointer", color: "#999" }} const SortableContainer = sortableContainer((props) => <tbody {...props} />)
className="drag-icon" let cutFlag = false
/>
));
const SortableItem = sortableElement((props) => <tr {...props} />);
const SortableContainer = sortableContainer((props) => <tbody {...props} />);
let cutFlag = false;
class StoreWebDecoration extends React.Component { class StoreWebDecoration extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props)
this.state = { this.state = {
storeDecorationlist: [], storeDecorationlist: [],
query: { query: {
storeId: User.getStoreId(), storeId: User.getStoreId(),
termType: "WEB_ADMIN", termType: 'WEB_ADMIN',
}, },
showSelectFileModal: false, showSelectFileModal: false,
diskList: [], diskList: [],
photoclip: null, photoclip: null,
preview: "", preview: '',
cutImageBlob: null, cutImageBlob: null,
hasImgReady: false,// 图片是否上传成功 hasImgReady: false, // 图片是否上传成功
imageFile: null // 需要被截取的图片 imageFile: null, // 需要被截取的图片
}; }
} }
timer = null timer = null
componentDidMount() { componentDidMount() {
this.getStoreDecorationList(); this.getStoreDecorationList()
} }
getStoreDecorationList = () => { getStoreDecorationList = () => {
StoreService.getStoreDecorationList(this.state.query).then((res) => { StoreService.getStoreDecorationList(this.state.query).then((res) => {
const data = _.map(res.result, (item, index) => { const data = _.map(res.result, (item, index) => {
item.index = index; item.index = index
item.key = index; item.key = index
return item; return item
}); })
this.setState({ this.setState({
storeDecorationlist: data, storeDecorationlist: data,
}); })
}); })
}; }
parseColumn = () => { parseColumn = () => {
return [ return [
{ {
title: "Sort", title: 'Sort',
dataIndex: "sort", dataIndex: 'sort',
width: 30, width: 30,
className: "drag-visible", className: 'drag-visible',
render: () => <DragHandle />, render: () => <DragHandle />,
}, },
{ {
title: "sequence", title: 'sequence',
dataIndex: "sequence", dataIndex: 'sequence',
key: "sequence", key: 'sequence',
className: "drag-visible", className: 'drag-visible',
width: 20, width: 20,
render: (val, record, index) => { render: (val, record, index) => {
return <div className="index-num">{index + 1}</div>; return <div className='index-num'>{index + 1}</div>
}, },
}, },
{ {
title: "banner", title: 'banner',
dataIndex: "bannerPath", dataIndex: 'bannerPath',
key: "bannerPath", key: 'bannerPath',
className: "drag-visible", className: 'drag-visible',
render: (val) => { render: (val) => {
return <img src={val} alt="banner" className="web-banner-thumbnail" />; return <img src={val} alt='banner' className='web-banner-thumbnail' />
}, },
}, },
{ {
title: "操作", title: '操作',
dataIndex: "operation", dataIndex: 'operation',
width: "20%", width: '20%',
render: (val, record) => { render: (val, record) => {
return ( return (
<div className="operation"> <div className='operation'>
<span <span className='edit' onClick={() => this.handleReplaceDecoration(record)}>
className="edit"
onClick={() => this.handleReplaceDecoration(record)}
>
替换 替换
</span> </span>
<span className="divider-line">{" | "}</span> <span className='divider-line'>{' | '}</span>
<span <span className='delete' onClick={() => this.handleDeleteDecorationConfirm(record)}>
className="delete"
onClick={() => this.handleDeleteDecorationConfirm(record)}
>
删除 删除
</span> </span>
</div> </div>
); )
}, },
}, },
]; ]
}; }
handleToAddStoreDecoration = () => { handleToAddStoreDecoration = () => {
const { choosedBannerId } = this.state; const { choosedBannerId } = this.state
if (this.state.storeDecorationlist.length >= 5 && !choosedBannerId) { if (this.state.storeDecorationlist.length >= 5 && !choosedBannerId) {
message.info("最多可添加5条"); message.info('最多可添加5条')
return; return
} }
this.setState({ this.setState({
showSelectFileModal: true, showSelectFileModal: true,
choosedBannerId: "" choosedBannerId: '',
}); })
}; }
handleReplaceDecoration = (record) => { handleReplaceDecoration = (record) => {
this.setState({ this.setState({
showSelectFileModal: true, showSelectFileModal: true,
choosedBannerId: record.id, choosedBannerId: record.id,
choosedBannerItem:record choosedBannerItem: record,
}); })
}; }
handleDeleteDecoration = (record) => { handleDeleteDecoration = (record) => {
StoreService.deleteStoreDecorationList({ StoreService.deleteStoreDecorationList({
storeBannerId: record.id, storeBannerId: record.id,
termType: "WEB_ADMIN", termType: 'WEB_ADMIN',
}).then((res) => { }).then((res) => {
message.success("已删除"); message.success('已删除')
this.getStoreDecorationList(); this.getStoreDecorationList()
}); })
}; }
handleDeleteDecorationConfirm = (record) => { handleDeleteDecorationConfirm = (record) => {
return confirm({ return confirm({
title: "你确定要删除这个banner吗？", title: '你确定要删除这个banner吗？',
icon: ( icon: <span className='icon iconfont default-confirm-icon'>&#xe839; </span>,
<span className="icon iconfont default-confirm-icon">&#xe839; </span> okText: '删除',
),
okText: "删除",
okType: 'danger', okType: 'danger',
cancelText: "取消", cancelText: '取消',
onOk: () => { onOk: () => {
this.handleDeleteDecoration(record); this.handleDeleteDecoration(record)
}, },
}); })
}; }
onSortEnd = ({ oldIndex, newIndex }) => { onSortEnd = ({ oldIndex, newIndex }) => {
const { storeDecorationlist } = this.state; const { storeDecorationlist } = this.state
if (oldIndex !== newIndex) { if (oldIndex !== newIndex) {
const newData = arrayMove( const newData = arrayMove([].concat(storeDecorationlist), oldIndex, newIndex).filter((el) => !!el)
[].concat(storeDecorationlist),
oldIndex,
newIndex
).filter((el) => !!el);
this.setState( this.setState(
{ {
storeDecorationlist: newData, storeDecorationlist: newData,
...@@ -192,131 +171,107 @@ class StoreWebDecoration extends React.Component { ...@@ -192,131 +171,107 @@ class StoreWebDecoration extends React.Component {
storeBannerId: storeDecorationlist[oldIndex].id, storeBannerId: storeDecorationlist[oldIndex].id,
}, },
() => { () => {
this.moveBannerSequence(); this.moveBannerSequence()
}
)
} }
);
} }
};
DraggableBodyRow = ({ className, style, ...restProps }) => { DraggableBodyRow = ({ className, style, ...restProps }) => {
const { storeDecorationlist } = this.state; const { storeDecorationlist } = this.state
// function findIndex base on Table rowKey props and should always be a right array index // function findIndex base on Table rowKey props and should always be a right array index
const index = storeDecorationlist.findIndex( const index = storeDecorationlist.findIndex((x) => x.index === restProps['data-row-key'])
(x) => x.index === restProps["data-row-key"] return <SortableItem index={index} {...restProps} />
); }
return <SortableItem index={index} {...restProps} />;
};
// 选择云盘资源 // 选择云盘资源
handleSelectImg = (file) => { handleSelectImg = (file) => {
if(file){ if (file) {
this.setState({ this.setState({
visible: true, visible: true,
imageFile:file imageFile: file,
}); })
}
} }
};
//获取resourceId //获取resourceId
getSignature = (blob) => { getSignature = (blob) => {
Upload.uploadBlobToOSS(blob, "avatar" + new Date().valueOf()).then( Upload.uploadBlobToOSS(blob, 'avatar' + new Date().valueOf()).then((addBannerPath) => {
(addBannerPath) => { this.setState(
this.setState({ {
addBannerPath, addBannerPath,
visible: false visible: false,
}, () => { },
this.state.choosedBannerId () => {
? this.editStoreBanner() this.state.choosedBannerId ? this.editStoreBanner() : this.addStoreBanner()
: this.addStoreBanner(); }
}); )
})
} }
);
};
editStoreBanner = () => { editStoreBanner = () => {
const { addBannerPath, choosedBannerId } = this.state; const { addBannerPath, choosedBannerId } = this.state
const params = { const params = {
bannerPath: addBannerPath, bannerPath: addBannerPath,
storeBannerId: choosedBannerId, storeBannerId: choosedBannerId,
termType: "WEB_ADMIN", termType: 'WEB_ADMIN',
}; }
StoreService.editStoreBanner(params).then((res) => { StoreService.editStoreBanner(params).then((res) => {
message.success("设置成功"); message.success('设置成功')
this.getStoreDecorationList(); this.getStoreDecorationList()
}); })
}; }
moveBannerSequence = () => { moveBannerSequence = () => {
const { newSequence, storeBannerId } = this.state; const { newSequence, storeBannerId } = this.state
const params = { const params = {
sequence: newSequence, sequence: newSequence,
storeBannerId: storeBannerId, storeBannerId: storeBannerId,
termType: "WEB_ADMIN", termType: 'WEB_ADMIN',
}; }
StoreService.moveBannerSequence(params).then((res) => { StoreService.moveBannerSequence(params).then((res) => {
this.getStoreDecorationList(); this.getStoreDecorationList()
}); })
}; }
addStoreBanner = () => { addStoreBanner = () => {
const { addBannerPath } = this.state; const { addBannerPath } = this.state
const params = { const params = {
bannerPath: addBannerPath, bannerPath: addBannerPath,
storeId: User.getStoreId(), storeId: User.getStoreId(),
termType: "WEB_ADMIN", termType: 'WEB_ADMIN',
}; }
StoreService.addStoreBanner(params).then((res) => { StoreService.addStoreBanner(params).then((res) => {
message.success("设置成功"); message.success('设置成功')
this.getStoreDecorationList(); this.getStoreDecorationList()
}); })
}; }
render() { render() {
const { const { storeDecorationlist, showSelectFileModal, diskList, visible, cutImageBlob, hasImgReady, imageFile } = this.state
storeDecorationlist, const DraggableContainer = (props) => <SortableContainer useDragHandle helperClass='row-dragging' onSortEnd={this.onSortEnd} {...props} />
showSelectFileModal,
diskList,
visible,
cutImageBlob,
hasImgReady,
imageFile
} = this.state;
const DraggableContainer = (props) => (
<SortableContainer
useDragHandle
helperClass="row-dragging"
onSortEnd={this.onSortEnd}
{...props}
/>
);
return ( return (
<div className="store-decoration-web-page"> <div className='store-decoration-web-page'>
<div className="box-header"> <div className='box-header'>
<div className="banner-setting"> <div className='banner-setting'>
<div className="title">banner设置</div> <div className='title'>banner设置</div>
<div className="tip"> <div className='tip'>图片支持bmp、jpeg、jpg、png、gif格式，最大5M，最多可添加5张，拖动可排序。建议尺寸1232*212px。</div>
图片支持bmp、jpeg、jpg、png、gif格式，最大5M，最多可添加5张，拖动可排序。建议尺寸1232*212px。
</div>
</div> </div>
<Button <Button
onClick={() => { onClick={() => {
this.handleToAddStoreDecoration(); this.handleToAddStoreDecoration()
}} }}
type="primary" type='primary'
className="add-show-btn" className='add-show-btn'>
>
添加Banner 添加Banner
</Button> </Button>
</div> </div>
<div className="box-body"> <div className='box-body'>
<XMTable <XMTable
renderEmpty={{ renderEmpty={{
image: college, image: college,
description: '暂无数据' description: '暂无数据',
}} }}
size={"middle"} size={'middle'}
pagination={false} pagination={false}
dataSource={storeDecorationlist} dataSource={storeDecorationlist}
columns={this.parseColumn()} columns={this.parseColumn()}
...@@ -331,23 +286,32 @@ class StoreWebDecoration extends React.Component { ...@@ -331,23 +286,32 @@ class StoreWebDecoration extends React.Component {
/> />
</div> </div>
<SelectPrepareFileModal <SelectPrepareFileModal
operateType="select" operateType='select'
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={showSelectFileModal} isOpen={showSelectFileModal}
diskList={diskList} diskList={diskList}
onClose={() => { onClose={() => {
this.setState({ showSelectFileModal: false }); this.setState({ showSelectFileModal: false })
}} }}
onSelect={this.handleSelectImg} onSelect={this.handleSelectImg}
/> />
{ visible && {visible && (
<ImgClipModal visible={visible} imgUrl={imageFile.ossUrl} aspectRatio='500/73' cropBoxHeight='73' onConfirm={this.getSignature} onClose={()=>{this.setState({ visible: false });}}/> <ImgClipModal
} visible={visible}
imgUrl={imageFile.ossUrl}
aspectRatio='500/134'
cropBoxHeight='134'
onConfirm={this.getSignature}
onClose={() => {
this.setState({ visible: false })
}}
/>
)}
</div> </div>
); )
} }
} }
export default withRouter(StoreWebDecoration); export default withRouter(StoreWebDecoration)
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