Skip to content

X
xiaomai-cloud-class-web
Commit 3934ecf3 by guomingpang
Options

style:修改学院装修裁剪banner尺寸

parent 4fd7b88d
Showing with 971 additions and 952 deletions
src/modules/common/CourseCatalogSelect.jsx 0 → 100644
import React, { useEffect, useState } from 'react'
import { TreeSelect } from 'antd'
function CourseCatalogSelect(props) {
let {
courseCatalogList = [],
showSearch = false,
value = '',
treeNodeFilterProp = 'title',
style = { width: 240 },
dropdownStyle = { maxHeight: 300, overflow: 'auto' },
placeholder = '请选择课程类型',
allowClear = true,
onChange = () => {},
} = props
let [treeData, setTreeData] = useState([])
let [defaultValue, setDefaultValue] = useState(null)
console.log('aaaaaaa', courseCatalogList, value)
useEffect(() => {
console.log('useEffect', courseCatalogList, value)
function renderTreeNodes(list) {
let newTreeData = list.map((item) => {
item.title = item.categoryName
item.value = item.id
item.key = item.id
console.log(value, item.value, value === item.value, 'item.categoryName')
if (value === item.value) {
setDefaultValue(item.title)
}
if (item.sonCategoryList) {
item.children = renderTreeNodes(item.sonCategoryList)
}
return item
})
return newTreeData
}
let categoryList = renderTreeNodes(courseCatalogList)
setTreeData(categoryList)
}, [props.value])
return (
<TreeSelect
defaultValue={[defaultValue]}
treeNodeLabelProp='categoryName'
showSearch={showSearch}
treeNodeFilterProp={treeNodeFilterProp}
style={style}
dropdownStyle={dropdownStyle}
treeData={treeData}
placeholder={placeholder}
allowClear={allowClear}
// value={value}
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/offline-course/AddOfflineCourse.jsx
...@@ -7,41 +7,40 @@ ...@@ -7,41 +7,40 @@
* @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 { CourseCatalogSelect, RangePicker } from '@/modules/common/'
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'
import RangePicker from '@/modules/common/DateRangePicker'; const { Option } = Select
import ShowTips from '@/components/ShowTips'; const defaultCoverUrl = 'https://image.xiaomaiketang.com/xm/pxbWKsYA87.png'
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 +86,74 @@ class AddOfflineCourse extends React.Component { ...@@ -87,74 +86,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 item
}); })
return newTreeData; return newTreeData
}; }
checkDetail = (courseId) => { checkDetail = (courseId) => {
return Service.Hades('public/hades/getOfflineCourseDetail', { return Service.Hades('public/hades/getOfflineCourseDetail', {
courseId, courseId,
}).then((res) => { }).then((res) => {
const { courseState } = res.result; const { courseState } = res.result
return courseState === 'UN_START'; return courseState === 'UN_START'
}); })
}; }
// 获取线下课详情 // 获取线下课详情
handleFetchScheudleDetail = (courseId) => { handleFetchScheudleDetail = (courseId) => {
return Service.Hades('public/hades/getOfflineCourseDetail', { return Service.Hades('public/hades/getOfflineCourseDetail', {
courseId, courseId,
}).then((res) => { }).then((res) => {
const { result = {} } = res || {}; const { result = {} } = res || {}
const { const {
courseName, courseName,
categoryId, categoryId,
...@@ -183,29 +182,29 @@ class AddOfflineCourse extends React.Component { ...@@ -183,29 +182,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 +236,9 @@ class AddOfflineCourse extends React.Component { ...@@ -237,9 +236,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 +247,13 @@ class AddOfflineCourse extends React.Component { ...@@ -248,13 +247,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 +264,15 @@ class AddOfflineCourse extends React.Component { ...@@ -265,15 +264,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 +298,7 @@ class AddOfflineCourse extends React.Component { ...@@ -299,7 +298,7 @@ class AddOfflineCourse extends React.Component {
signOutStartTimeUnit, signOutStartTimeUnit,
signOutEndTimeNum, signOutEndTimeNum,
signOutEndTimeUnit, signOutEndTimeUnit,
} = this.state; } = this.state
const data = { const data = {
coverUrl, coverUrl,
...@@ -323,27 +322,27 @@ class AddOfflineCourse extends React.Component { ...@@ -323,27 +322,27 @@ class AddOfflineCourse extends React.Component {
signOutStartTimeUnit, signOutStartTimeUnit,
signOutEndTimeNum, signOutEndTimeNum,
signOutEndTimeUnit, signOutEndTimeUnit,
}; }
const previewOfflineModal = ( const previewOfflineModal = (
<PreviewOfflineModal <PreviewOfflineModal
data={data} data={data}
close={() => { close={() => {
this.setState({ this.setState({
previewOfflineModal: null, previewOfflineModal: null,
}); })
}} }}
/> />
); )
this.setState({ previewOfflineModal }); this.setState({ previewOfflineModal })
}; }
handleSelectCover = (file) => { handleSelectCover = (file) => {
this.setState({ this.setState({
visible: true, visible: true,
imageFile: file imageFile: file,
}); })
}; }
//获取resourceId //获取resourceId
getSignature = (blob, fileName) => { getSignature = (blob, fileName) => {
...@@ -355,18 +354,18 @@ class AddOfflineCourse extends React.Component { ...@@ -355,18 +354,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 = () => {
//过期判断 //过期判断
...@@ -375,16 +374,16 @@ class AddOfflineCourse extends React.Component { ...@@ -375,16 +374,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 = () => {
...@@ -419,22 +418,22 @@ class AddOfflineCourse extends React.Component { ...@@ -419,22 +418,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,
...@@ -453,33 +452,33 @@ class AddOfflineCourse extends React.Component { ...@@ -453,33 +452,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`,
...@@ -489,182 +488,182 @@ class AddOfflineCourse extends React.Component { ...@@ -489,182 +488,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 {
...@@ -703,8 +702,8 @@ class AddOfflineCourse extends React.Component { ...@@ -703,8 +702,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} />
...@@ -727,7 +726,7 @@ class AddOfflineCourse extends React.Component { ...@@ -727,7 +726,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>
...@@ -740,7 +739,7 @@ class AddOfflineCourse extends React.Component { ...@@ -740,7 +739,7 @@ class AddOfflineCourse extends React.Component {
onClick={() => { onClick={() => {
this.setState({ this.setState({
showSelectCoverModal: true, showSelectCoverModal: true,
}); })
}}> }}>
上传图片 上传图片
</Button> </Button>
...@@ -759,7 +758,12 @@ class AddOfflineCourse extends React.Component { ...@@ -759,7 +758,12 @@ 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
courseCatalogList={courseCatalogList}
value={categoryId}
onChange={(value, label) => this.handleChangeCatalogList(value, label)}
/>
{/* <TreeSelect
showSearch showSearch
treeNodeFilterProp='title' treeNodeFilterProp='title'
style={{ width: 240 }} style={{ width: 240 }}
...@@ -772,7 +776,7 @@ class AddOfflineCourse extends React.Component { ...@@ -772,7 +776,7 @@ class AddOfflineCourse extends React.Component {
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'>
...@@ -784,7 +788,7 @@ class AddOfflineCourse extends React.Component { ...@@ -784,7 +788,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>
...@@ -808,22 +812,22 @@ class AddOfflineCourse extends React.Component { ...@@ -808,22 +812,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(
...@@ -835,9 +839,9 @@ class AddOfflineCourse extends React.Component { ...@@ -835,9 +839,9 @@ class AddOfflineCourse extends React.Component {
}, },
}, },
() => { () => {
this.getTeacherList(); this.getTeacherList()
} }
); )
}} }}
getPopupContainer={() => document.getElementById('teacher')}> getPopupContainer={() => document.getElementById('teacher')}>
{_.map(teacherList, (item) => { {_.map(teacherList, (item) => {
...@@ -845,7 +849,7 @@ class AddOfflineCourse extends React.Component { ...@@ -845,7 +849,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>
...@@ -863,7 +867,7 @@ class AddOfflineCourse extends React.Component { ...@@ -863,7 +867,7 @@ class AddOfflineCourse extends React.Component {
content: introduce, content: introduce,
}} }}
onChange={(val) => { onChange={(val) => {
this.changeIntro(val); this.changeIntro(val)
}} }}
/> />
)} )}
...@@ -900,7 +904,7 @@ class AddOfflineCourse extends React.Component { ...@@ -900,7 +904,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')}
/> />
...@@ -914,7 +918,7 @@ class AddOfflineCourse extends React.Component { ...@@ -914,7 +918,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')}
/> />
...@@ -927,7 +931,7 @@ class AddOfflineCourse extends React.Component { ...@@ -927,7 +931,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}>
...@@ -952,8 +956,8 @@ class AddOfflineCourse extends React.Component { ...@@ -952,8 +956,8 @@ class AddOfflineCourse extends React.Component {
startTimeApply: undefined, startTimeApply: undefined,
endTimeApply: undefined, endTimeApply: undefined,
quota: null, quota: null,
whetherVisitorsJoin: whetherSetApply !== 'YES' ? whetherVisitorsJoin : false whetherVisitorsJoin: whetherSetApply !== 'YES' ? whetherVisitorsJoin : false,
}); })
}} }}
/> />
<span className='switch-tip'>开启后可设置课程报名时间，获取报名数据</span> <span className='switch-tip'>开启后可设置课程报名时间，获取报名数据</span>
...@@ -968,7 +972,7 @@ class AddOfflineCourse extends React.Component { ...@@ -968,7 +972,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]}>
...@@ -1055,7 +1059,7 @@ class AddOfflineCourse extends React.Component { ...@@ -1055,7 +1059,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>
...@@ -1068,7 +1072,9 @@ class AddOfflineCourse extends React.Component { ...@@ -1068,7 +1072,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'>
...@@ -1083,7 +1089,7 @@ class AddOfflineCourse extends React.Component { ...@@ -1083,7 +1089,7 @@ class AddOfflineCourse extends React.Component {
signInType: 'START_AGO', signInType: 'START_AGO',
signInTimeNum: null, signInTimeNum: null,
signInTimeUnit: 'MINUTE', signInTimeUnit: 'MINUTE',
}); })
}} }}
/> />
<span className='switch-tip'>开启后可设置获取签到考勤数据</span> <span className='switch-tip'>开启后可设置获取签到考勤数据</span>
...@@ -1095,7 +1101,7 @@ class AddOfflineCourse extends React.Component { ...@@ -1095,7 +1101,7 @@ class AddOfflineCourse extends React.Component {
style={{ display: 'inline-block' }} style={{ display: 'inline-block' }}
value={signInType} value={signInType}
onChange={(e) => { onChange={(e) => {
this.setState({ signInType: e.target.value }); this.setState({ signInType: e.target.value })
}} }}
className='mt5'> className='mt5'>
<Radio value='START_AGO' className='mr-16'> <Radio value='START_AGO' className='mr-16'>
...@@ -1117,18 +1123,18 @@ class AddOfflineCourse extends React.Component { ...@@ -1117,18 +1123,18 @@ class AddOfflineCourse extends React.Component {
precision={0} precision={0}
style={{ margin: '0 4px', width: 90 }} style={{ margin: '0 4px', width: 90 }}
onChange={(value) => { onChange={(value) => {
this.setState({ signInTimeNum: value }); this.setState({ signInTimeNum: value })
}} }}
/> />
<Select <Select
style={{ width: 72, marginRight: 4 }} style={{ width: 72, marginRight: 4 }}
value={signInTimeUnit} value={signInTimeUnit}
onChange={(value) => { onChange={(value) => {
const data = { signInTimeUnit: value }; const data = { signInTimeUnit: value }
if (value === 'HOUR' && signInTimeNum > 24) { if (value === 'HOUR' && signInTimeNum > 24) {
data.signInTimeNum = 24; data.signInTimeNum = 24
} }
this.setState(data); this.setState(data)
}}> }}>
{unitList.map((item) => ( {unitList.map((item) => (
<Option value={item.key} key={item.key}> <Option value={item.key} key={item.key}>
...@@ -1155,7 +1161,7 @@ class AddOfflineCourse extends React.Component { ...@@ -1155,7 +1161,7 @@ class AddOfflineCourse extends React.Component {
signOutStartTimeUnit: 'MINUTE', signOutStartTimeUnit: 'MINUTE',
signOutEndTimeNum: null, signOutEndTimeNum: null,
signOutEndTimeUnit: 'MINUTE', signOutEndTimeUnit: 'MINUTE',
}); })
}} }}
/> />
<span className='switch-tip'>开启后可设置获取签退考勤数据</span> <span className='switch-tip'>开启后可设置获取签退考勤数据</span>
...@@ -1167,7 +1173,7 @@ class AddOfflineCourse extends React.Component { ...@@ -1167,7 +1173,7 @@ class AddOfflineCourse extends React.Component {
style={{ display: 'inline-block' }} style={{ display: 'inline-block' }}
value={signOutType} value={signOutType}
onChange={(e) => { onChange={(e) => {
this.setState({ signOutType: e.target.value }); this.setState({ signOutType: e.target.value })
}} }}
className='mt5'> className='mt5'>
<Radio value='START_LATER' className='mr-16'> <Radio value='START_LATER' className='mr-16'>
...@@ -1190,7 +1196,7 @@ class AddOfflineCourse extends React.Component { ...@@ -1190,7 +1196,7 @@ class AddOfflineCourse extends React.Component {
precision={0} precision={0}
style={{ margin: '0 4px', width: 90 }} style={{ margin: '0 4px', width: 90 }}
onChange={(value) => { onChange={(value) => {
this.setState({ signOutStartTimeNum: value }); this.setState({ signOutStartTimeNum: value })
}} }}
/> />
)} )}
...@@ -1199,11 +1205,11 @@ class AddOfflineCourse extends React.Component { ...@@ -1199,11 +1205,11 @@ class AddOfflineCourse extends React.Component {
style={{ width: 72, marginRight: 4 }} style={{ width: 72, marginRight: 4 }}
value={signOutStartTimeUnit} value={signOutStartTimeUnit}
onChange={(value) => { onChange={(value) => {
const data = { signOutStartTimeUnit: value }; const data = { signOutStartTimeUnit: value }
if (value === 'HOUR' && signOutStartTimeNum > 24) { if (value === 'HOUR' && signOutStartTimeNum > 24) {
data.signOutStartTimeNum = 24; data.signOutStartTimeNum = 24
} }
this.setState(data); this.setState(data)
}}> }}>
{unitList.map((item) => ( {unitList.map((item) => (
<Option value={item.key} key={item.key}> <Option value={item.key} key={item.key}>
...@@ -1220,18 +1226,18 @@ class AddOfflineCourse extends React.Component { ...@@ -1220,18 +1226,18 @@ class AddOfflineCourse extends React.Component {
precision={0} precision={0}
style={{ margin: '0 4px', width: 90 }} style={{ margin: '0 4px', width: 90 }}
onChange={(value) => { onChange={(value) => {
this.setState({ signOutEndTimeNum: value }); this.setState({ signOutEndTimeNum: value })
}} }}
/> />
<Select <Select
style={{ width: 72, marginRight: 4 }} style={{ width: 72, marginRight: 4 }}
value={signOutEndTimeUnit} value={signOutEndTimeUnit}
onChange={(value) => { onChange={(value) => {
const data = { signOutEndTimeUnit: value }; const data = { signOutEndTimeUnit: value }
if (value === 'HOUR' && signOutEndTimeNum > 24) { if (value === 'HOUR' && signOutEndTimeNum > 24) {
data.signOutEndTimeNum = 24; data.signOutEndTimeNum = 24
} }
this.setState(data); this.setState(data)
}}> }}>
{unitList.map((item) => ( {unitList.map((item) => (
<Option value={item.key} key={item.key}> <Option value={item.key} key={item.key}>
...@@ -1266,7 +1272,7 @@ class AddOfflineCourse extends React.Component { ...@@ -1266,7 +1272,7 @@ 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}
/> />
...@@ -1277,14 +1283,14 @@ class AddOfflineCourse extends React.Component { ...@@ -1277,14 +1283,14 @@ class AddOfflineCourse extends React.Component {
imgUrl={imageFile.ossUrl} imgUrl={imageFile.ossUrl}
onConfirm={this.getSignature} onConfirm={this.getSignature}
onClose={() => { onClose={() => {
this.setState({ visible: false }); 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 } 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: [], // 已经从资料云盘中勾选的文件
...@@ -90,12 +91,11 @@ class AddVideoCourse extends React.Component { ...@@ -90,12 +91,11 @@ class AddVideoCourse extends React.Component {
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',
} }
} }
...@@ -108,41 +108,30 @@ class AddVideoCourse extends React.Component { ...@@ -108,41 +108,30 @@ class AddVideoCourse extends React.Component {
Bus.bind('editorLimit', (editorTextLength) => { Bus.bind('editorLimit', (editorTextLength) => {
this.setState({ this.setState({
editorTextLength, editorTextLength,
}); })
}); })
} }
//获取分类列表 //获取分类列表
getCourseCatalogList = () => { getCourseCatalogList = () => {
StoreService.getCourseCatalogList({ current: 1, size: 1000 }).then((res) => { StoreService.getCourseCatalogList({ current: 1, size: 1000 }).then((res) => {
this.setState({ this.setState({
courseCatalogList: res.result.records courseCatalogList: res.result.records,
}) })
}) })
} }
catalogChange = (value, _categoryName) => { catalogChange = (value, _categoryName) => {
const categoryName =_.pluck(_categoryName,'categoryName').join('-') console.log(value, _categoryName)
const changeValueLength = value.length this.setState({ categoryId: value, categoryName: _categoryName[0] })
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, categoryOneName, categoryTwoName, categoryId, courseChapterVOList = [] } = result
let coverId let coverId
let coverUrl let coverUrl
// let videoDuration // let videoDuration
...@@ -174,9 +163,9 @@ class AddVideoCourse extends React.Component { ...@@ -174,9 +163,9 @@ class AddVideoCourse extends React.Component {
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
}) })
...@@ -193,7 +182,7 @@ class AddVideoCourse extends React.Component { ...@@ -193,7 +182,7 @@ class AddVideoCourse extends React.Component {
whetherVisitorsJoin, whetherVisitorsJoin,
categoryName, categoryName,
categoryId, categoryId,
courseChapterList: _courseChapterVOList courseChapterList: _courseChapterVOList,
}) })
}) })
} }
...@@ -206,12 +195,12 @@ class AddVideoCourse extends React.Component { ...@@ -206,12 +195,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 +218,13 @@ class AddVideoCourse extends React.Component { ...@@ -229,13 +218,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 +233,7 @@ class AddVideoCourse extends React.Component { ...@@ -244,7 +233,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 +251,7 @@ class AddVideoCourse extends React.Component { ...@@ -262,7 +251,7 @@ class AddVideoCourse extends React.Component {
studentList={studentList} studentList={studentList}
close={() => { close={() => {
this.setState({ this.setState({
studentModal: null studentModal: null,
}) })
}} }}
/> />
...@@ -281,7 +270,7 @@ class AddVideoCourse extends React.Component { ...@@ -281,7 +270,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 +279,7 @@ class AddVideoCourse extends React.Component { ...@@ -290,7 +279,7 @@ class AddVideoCourse extends React.Component {
const courseIntroInfo = { const courseIntroInfo = {
liveCourseMediaRequests: scheduleMedia, liveCourseMediaRequests: scheduleMedia,
introduce, introduce,
categoryName categoryName,
} }
const previewCourseModal = ( const previewCourseModal = (
...@@ -300,7 +289,7 @@ class AddVideoCourse extends React.Component { ...@@ -300,7 +289,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 +300,42 @@ class AddVideoCourse extends React.Component { ...@@ -311,43 +300,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,61 +343,60 @@ class AddVideoCourse extends React.Component { ...@@ -355,61 +343,60 @@ 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: '',
}) })
} }
}) })
} }
// 保存 // 保存
handleSubmit = () => { handleSubmit = () => {
//过期判断 //过期判断
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
} }
const { const {
id, id,
...@@ -429,7 +416,7 @@ class AddVideoCourse extends React.Component { ...@@ -429,7 +416,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 +426,7 @@ class AddVideoCourse extends React.Component { ...@@ -439,7 +426,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 +443,19 @@ class AddVideoCourse extends React.Component { ...@@ -456,19 +443,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 +479,22 @@ class AddVideoCourse extends React.Component { ...@@ -492,22 +479,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 +503,7 @@ class AddVideoCourse extends React.Component { ...@@ -516,7 +503,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 +514,42 @@ class AddVideoCourse extends React.Component { ...@@ -527,43 +514,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,119 +562,132 @@ class AddVideoCourse extends React.Component { ...@@ -576,119 +562,132 @@ 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} <TextArea
help={chapterNameHelpMsg} defaultValue={item.mediaName}
> placeholder='请输入课节名称'
<TextArea maxLength={40}
defaultValue={item.mediaName} autoSize
placeholder="请输入课节名称" style={{ width: '318px' }}
maxLength={40} onChange={(e) => {
autoSize this.setState(
style={{ width: '318px'}} {
onChange={(e) => { mediaNameAlias: e.target.value.trim(),
this.setState({ },
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];
const temp = courseChapterList[sortIndex];
// 若上移
if(isUp){
_courseChapterList[sortIndex -1] = temp;
_courseChapterList[sortIndex -1].sort = sortIndex -1;
_courseChapterList[sortIndex] = courseChapterList[sortIndex - 1];
_courseChapterList[sortIndex].sort = sortIndex;
} else { // 若下移
_courseChapterList[sortIndex + 1] = temp;
_courseChapterList[sortIndex + 1].sort = sortIndex + 1;
_courseChapterList[sortIndex] = courseChapterList[sortIndex + 1];
_courseChapterList[sortIndex].sort = sortIndex;
}
this.setState({
courseChapterList: _courseChapterList
})
} }
renderTypemenu =()=>{
return <Menu> let _courseChapterList = [...courseChapterList]
<Menu.Item> const temp = courseChapterList[sortIndex]
<span onClick={()=>{this.selectFileType("VIDEO")}}>
视频文件 // 若上移
</span> if (isUp) {
</Menu.Item> _courseChapterList[sortIndex - 1] = temp
<Menu.Item> _courseChapterList[sortIndex - 1].sort = sortIndex - 1
<span onClick={()=>{this.selectFileType("WORD_PDF")}}> _courseChapterList[sortIndex] = courseChapterList[sortIndex - 1]
资料文件 _courseChapterList[sortIndex].sort = sortIndex
</span> } else {
</Menu.Item> // 若下移
</Menu> _courseChapterList[sortIndex + 1] = temp
_courseChapterList[sortIndex + 1].sort = sortIndex + 1
_courseChapterList[sortIndex] = courseChapterList[sortIndex + 1]
_courseChapterList[sortIndex].sort = sortIndex
} }
selectFileType = (type) =>{
const { courseChapterList } = this.state; this.setState({
if(courseChapterList.length >= 20) { courseChapterList: _courseChapterList,
message.warning(`最多只能上传20个文件`); })
return; }
} renderTypemenu = () => {
if(type==="VIDEO"){ return (
this.setState({ <Menu>
showSelectFileModal: true, <Menu.Item>
selectTypeList:['MP4'], <span
accept:'video/mp4' onClick={() => {
}) this.selectFileType('VIDEO')
}else{ }}>
this.setState({ 视频文件
showSelectFileModal: true, </span>
selectTypeList:['DOC','DOCX','PDF'], </Menu.Item>
accept:'.doc,.docx,.pdf' <Menu.Item>
}) <span
} onClick={() => {
this.selectFileType('WORD_PDF')
}}>
资料文件
</span>
</Menu.Item>
</Menu>
)
}
selectFileType = (type) => {
const { courseChapterList } = this.state
if (courseChapterList.length >= 20) {
message.warning(`最多只能上传20个文件`)
return
}
if (type === 'VIDEO') {
this.setState({
showSelectFileModal: true,
selectTypeList: ['MP4'],
accept: 'video/mp4',
})
} else {
this.setState({
showSelectFileModal: true,
selectTypeList: ['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() {
const { const {
pageType, pageType,
...@@ -712,10 +711,11 @@ class AddVideoCourse extends React.Component { ...@@ -712,10 +711,11 @@ class AddVideoCourse extends React.Component {
courseChapterList, courseChapterList,
imageFile, imageFile,
selectTypeList, selectTypeList,
accept accept,
categoryId,
} = 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 +745,7 @@ class AddVideoCourse extends React.Component { ...@@ -745,7 +745,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) {
...@@ -764,68 +764,87 @@ class AddVideoCourse extends React.Component { ...@@ -764,68 +764,87 @@ class AddVideoCourse extends React.Component {
<div className='course-ware--empty'>从资料云盘中选择视频</div> <div className='course-ware--empty'>从资料云盘中选择视频</div>
</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' }}>
</Tooltip> {' '}
&#xe61d;
</i>
</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 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
placement="topLeft"
className="course-chapter-tooltip"
title={this.renderChapterTitle(item)}
color='#fff' trigger="click"
overlayClassName="chapter-popover"
getPopupContainer={() =>
document.getElementById('course-chapter-list')
}
destroyTooltipOnHide={true}
visible={item.visible}
onConfirm={() => this.handleRenameCourseChapter(item.resourceId, index)}
icon={null}
onVisibleChange={(visible)=>{
!visible && this.setState({
chapterNameValidateStatus: '',
        chapterNameHelpMsg: '',
mediaNameAlias: '',
})
}}
onCancel={()=> this.handleChangePopConfirmVisible(item.resourceId, index, false)}
>
<div className="rename" onClick={() => {this.setState({mediaNameAlias: item.mediaName}, ()=>{
this.handleChangePopConfirmVisible(item.resourceId, index, true)})
}}>重命名</div>
</Popconfirm>
<div className="line">|</div>
<div className="delete" onClick={()=>this.handleDeleteCourseChapter(item.resourceId, index)}>移除</div>
</div>
</div> </div>
}) <div className='course-chapter__opt' id={item.resourceId}>
} <div
className={`up ${Number(index) === 0 ? 'disabled' : ''}`}
</div> onClick={() => this.handleChangeIndex(true, item.sort, item.resourceId)}>
</div> 上移
</If> </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
placement='topLeft'
className='course-chapter-tooltip'
title={this.renderChapterTitle(item)}
color='#fff'
trigger='click'
overlayClassName='chapter-popover'
getPopupContainer={() => document.getElementById('course-chapter-list')}
destroyTooltipOnHide={true}
visible={item.visible}
onConfirm={() => this.handleRenameCourseChapter(item.resourceId, index)}
icon={null}
onVisibleChange={(visible) => {
!visible &&
this.setState({
chapterNameValidateStatus: '',
chapterNameHelpMsg: '',
mediaNameAlias: '',
})
}}
onCancel={() => this.handleChangePopConfirmVisible(item.resourceId, index, false)}>
<div
className='rename'
onClick={() => {
this.setState({ mediaNameAlias: item.mediaName }, () => {
this.handleChangePopConfirmVisible(item.resourceId, index, true)
})
}}>
重命名
</div>
</Popconfirm>
<div className='line'>|</div>
<div className='delete' onClick={() => this.handleDeleteCourseChapter(item.resourceId, index)}>
移除
</div>
</div>
</div>
)
})}
</div>
</div>
</If>
<div className='cover-url flex mt16'> <div className='cover-url flex mt16'>
<div className='label cover'>封面图：</div> <div className='label cover'>封面图：</div>
<div className='cover-url__wrap'> <div className='cover-url__wrap'>
<div className='opt-btns'> <div className='opt-btns'>
<div> <div>
...@@ -838,7 +857,7 @@ class AddVideoCourse extends React.Component { ...@@ -838,7 +857,7 @@ class AddVideoCourse extends React.Component {
onClick={() => { onClick={() => {
this.setState({ this.setState({
coverUrl: '', coverUrl: '',
coverId: '' coverId: '',
}) })
}}> }}>
使用默认图 使用默认图
...@@ -848,9 +867,7 @@ class AddVideoCourse extends React.Component { ...@@ -848,9 +867,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,7 +875,7 @@ class AddVideoCourse extends React.Component { ...@@ -858,7 +875,7 @@ 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' && ( {/* {pageType === 'add' && (
<Cascader <Cascader
defaultValue={[]} defaultValue={[]}
options={courseCatalogList} options={courseCatalogList}
...@@ -889,7 +906,8 @@ class AddVideoCourse extends React.Component { ...@@ -889,7 +906,8 @@ class AddVideoCourse extends React.Component {
</span> </span>
} }
/> />
)} )} */}
<CourseCatalogSelect courseCatalogList={courseCatalogList} value={categoryId} onChange={this.catalogChange} />
</div> </div>
<div className='intro-info mt16'> <div className='intro-info mt16'>
<AddVideoIntro <AddVideoIntro
...@@ -899,7 +917,7 @@ class AddVideoCourse extends React.Component { ...@@ -899,7 +917,7 @@ class AddVideoCourse extends React.Component {
shelfState, shelfState,
whetherVisitorsJoin, whetherVisitorsJoin,
introduce, introduce,
loadintroduce loadintroduce,
}} }}
onChange={this.handleChangeForm} onChange={this.handleChangeForm}
/> />
...@@ -907,7 +925,7 @@ class AddVideoCourse extends React.Component { ...@@ -907,7 +925,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 +943,7 @@ class AddVideoCourse extends React.Component { ...@@ -925,7 +943,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 +970,16 @@ class AddVideoCourse extends React.Component { ...@@ -952,9 +970,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