Skip to content

X
xiaomai-cloud-class-web
Commit f3778a3c by guomingpang
Options

feat:课程管理添加课程分类组件

parent 831c59da
Showing with 129 additions and 197 deletions
src/modules/common/CourseCatalogSelect.jsx
import React, { useEffect, useState } from 'react' import React, { useEffect, useState } from 'react'
import { TreeSelect } from 'antd' import { TreeSelect } from 'antd'
import User from '@/common/js/user'
import Service from '@/common/js/service'
function CourseCatalogSelect(props) { function CourseCatalogSelect(props) {
let { let {
courseCatalogList = [], showSearch = true,
showSearch = false,
value = '', value = '',
treeNodeFilterProp = 'title', treeNodeFilterProp = 'title',
style = { width: 240 }, style = { width: 240 },
...@@ -12,20 +13,23 @@ function CourseCatalogSelect(props) { ...@@ -12,20 +13,23 @@ function CourseCatalogSelect(props) {
allowClear = true, allowClear = true,
onChange = () => {}, onChange = () => {},
} = props } = props
let [treeData, setTreeData] = useState([]) let [courseCatalogList, setCourseCatalogList] = useState([])
let [defaultValue, setDefaultValue] = useState(null)
console.log('aaaaaaa', courseCatalogList, value)
useEffect(() => { useEffect(() => {
console.log('useEffect', courseCatalogList, value) //获取分类列表
function getCourseCatalogList() {
Service.Hades('public/hades/queryCategoryTree', { source: 0, tenantId: User.getStoreId(), count: false, userId: User.getUserId() }).then((res) => {
const { categoryList = [] } = res.result
let list = renderTreeNodes(categoryList)
setCourseCatalogList(list)
})
}
function renderTreeNodes(list) { function renderTreeNodes(list) {
let newTreeData = list.map((item) => { let newTreeData = list.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
console.log(value, item.value, value === item.value, 'item.categoryName') console.log(value, item.value, value === item.value, 'item.categoryName')
if (value === item.value) {
setDefaultValue(item.title)
}
if (item.sonCategoryList) { if (item.sonCategoryList) {
item.children = renderTreeNodes(item.sonCategoryList) item.children = renderTreeNodes(item.sonCategoryList)
} }
...@@ -33,22 +37,20 @@ function CourseCatalogSelect(props) { ...@@ -33,22 +37,20 @@ function CourseCatalogSelect(props) {
}) })
return newTreeData return newTreeData
} }
let categoryList = renderTreeNodes(courseCatalogList) getCourseCatalogList()
setTreeData(categoryList) }, [])
}, [props.value])
return ( return (
<TreeSelect <TreeSelect
defaultValue={[defaultValue]}
treeNodeLabelProp='categoryName' treeNodeLabelProp='categoryName'
showSearch={showSearch} showSearch={showSearch}
treeNodeFilterProp={treeNodeFilterProp} treeNodeFilterProp={treeNodeFilterProp}
style={style} style={style}
value={value}
dropdownStyle={dropdownStyle} dropdownStyle={dropdownStyle}
treeData={treeData} treeData={courseCatalogList}
placeholder={placeholder} placeholder={placeholder}
allowClear={allowClear} allowClear={allowClear}
// value={value}
treeDefaultExpandAll treeDefaultExpandAll
onChange={(value, label) => { onChange={(value, label) => {
onChange(value, label) onChange(value, label)
......
src/modules/course-manage/components/AddLiveBasic.jsx
...@@ -6,25 +6,21 @@ ...@@ -6,25 +6,21 @@
* @Description: 新建/编辑直播课-基本信息 * @Description: 新建/编辑直播课-基本信息
*/ */
import React from 'react'; import React from 'react'
import { Input, Button, message, Cascader, Modal } from 'antd'; import { Input, Button, message, Cascader } from 'antd'
import UploadOss from '@/core/upload'; import { CourseCatalogSelect } from '@/modules/common'
import { ImgCutModalNew } from '@/components'; import StoreService from '@/domains/store-domain/storeService'
import StoreService from '@/domains/store-domain/storeService'; import SelectPrepareFileModal from '@/modules/prepare-lesson/modal/SelectPrepareFileModal'
import SelectPrepareFileModal from '@/modules/prepare-lesson/modal/SelectPrepareFileModal'; import Upload from '@/core/upload'
import Upload from '@/core/upload';
import Cropper from 'react-cropper';
import ImgClipModal from '@/components/ImgClipModal' import ImgClipModal from '@/components/ImgClipModal'
import 'cropperjs/dist/cropper.css'; import 'cropperjs/dist/cropper.css'
import './AddLiveBasic.less'; import './AddLiveBasic.less'
const defaultCover = 'https://image.xiaomaiketang.com/xm/Yip2YtFDwH.png'; const defaultCover = 'https://image.xiaomaiketang.com/xm/Yip2YtFDwH.png'
const fieldNames = { label: 'categoryName', value: 'id', children: 'sonCategoryList' }; const fieldNames = { label: 'categoryName', value: 'id', children: 'sonCategoryList' }
let cutFlag = false;
let timer = null;
class AddLiveBasic extends React.Component { class AddLiveBasic extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props)
this.state = { this.state = {
imageFile: null, imageFile: null,
showCutModal: false, showCutModal: false,
...@@ -32,63 +28,50 @@ class AddLiveBasic extends React.Component { ...@@ -32,63 +28,50 @@ class AddLiveBasic extends React.Component {
showSelectFileModal: false, showSelectFileModal: false,
cutImageBlob: null, cutImageBlob: null,
hasImgReady: false, // 图片是否上传成功 hasImgReady: false, // 图片是否上传成功
cropperInstace:null cropperInstace: null,
} }
} }
componentWillUnmount() {} componentWillUnmount() {}
componentDidMount() { componentDidMount() {
this.getCourseCatalogList(); this.getCourseCatalogList()
} }
getCourseCatalogList = () => { getCourseCatalogList = () => {
StoreService.getCourseCatalogList({ current: 1, size: 1000 }).then((res) => { StoreService.getCourseCatalogList({ current: 1, size: 1000 }).then((res) => {
this.setState({ this.setState({
courseCatalogList: res.result.records, courseCatalogList: res.result.records,
}); })
}); })
} }
// 使用默认封面图 // 使用默认封面图
handleResetCoverUrl = () => { handleResetCoverUrl = () => {
const { const {
data: { coverUrl }, data: { coverUrl },
} = this.props; } = this.props
const isDefaultCover = coverUrl === defaultCover; const isDefaultCover = coverUrl === defaultCover
// 如果已经是默认图的话，不做任何任何处理 // 如果已经是默认图的话，不做任何任何处理
if (isDefaultCover) return; if (isDefaultCover) return
message.success('已替换为默认图'); message.success('已替换为默认图')
this.props.onChange('coverUrl', defaultCover); this.props.onChange('coverUrl', defaultCover)
setTimeout(() => { setTimeout(() => {
this.props.onChange('coverId', null); this.props.onChange('coverId', null)
}, 1000); }, 1000)
}; }
handleChangeCatalogList = (value) => {
this.props.onChange('categoryId', value)
}
catalogChange = (value) => {
const changeValueLength = value.length;
switch (changeValueLength) {
case 1:
this.props.onChange('categoryId', value[0]);
break;
case 2:
this.props.onChange('categoryId', value[1]);
break;
default:
this.props.onChange('categoryId', null);
break;
}
};
handleSelectCover = (file) => { handleSelectCover = (file) => {
this.setState({ this.setState({
visible: true, visible: true,
imageFile:file imageFile: file,
}); })
} }
//获取resourceId //获取resourceId
getSignature = (blob, fileName) => { getSignature = (blob) => {
const { choosedBannerId } = this.state;
Upload.uploadBlobToOSS(blob, 'cover' + new Date().valueOf(), null, 'signInfo').then((signInfo) => { Upload.uploadBlobToOSS(blob, 'cover' + new Date().valueOf(), null, 'signInfo').then((signInfo) => {
this.setState( this.setState(
{ {
...@@ -97,26 +80,25 @@ class AddLiveBasic extends React.Component { ...@@ -97,26 +80,25 @@ class AddLiveBasic extends React.Component {
visible: false, visible: false,
}, },
() => this.updateCover() () => this.updateCover()
); )
}); })
}; }
updateCover = () =>{ updateCover = () => {
const {coverClicpPath,coverId} = this.state const { coverClicpPath, coverId } = this.state
this.setState({ this.setState({
showSelectFileModal: false, showSelectFileModal: false,
}); })
this.props.onChange('coverUrl', coverClicpPath); this.props.onChange('coverUrl', coverClicpPath)
setTimeout(() => { setTimeout(() => {
this.props.onChange('coverId', coverId); this.props.onChange('coverId', coverId)
}, 1000); }, 1000)
}; }
render() { render() {
const { showCutModal, imageFile, courseCatalogList, showSelectFileModal, visible, cutImageBlob, hasImgReady } = this.state; const { imageFile, showSelectFileModal, visible } = this.state
const { data, pageType, isEdit } = this.props; const { data } = this.props
const { courseName, categoryName, coverUrl } = data; const { courseName, coverUrl, categoryId } = data
const fileName = '';
// 当前是否使用的是默认图片 // 当前是否使用的是默认图片
const isDefaultCover = coverUrl === defaultCover; const isDefaultCover = coverUrl === defaultCover
return ( return (
<div className='add-live__basic-info'> <div className='add-live__basic-info'>
<div className='course-name'> <div className='course-name'>
...@@ -129,7 +111,7 @@ class AddLiveBasic extends React.Component { ...@@ -129,7 +111,7 @@ class AddLiveBasic extends React.Component {
maxLength={40} maxLength={40}
style={{ width: 240 }} style={{ width: 240 }}
onChange={(e) => { onChange={(e) => {
this.props.onChange('courseName', e.target.value); this.props.onChange('courseName', e.target.value)
}} }}
/> />
</div> </div>
...@@ -142,7 +124,7 @@ class AddLiveBasic extends React.Component { ...@@ -142,7 +124,7 @@ class AddLiveBasic extends React.Component {
onClick={() => { onClick={() => {
this.setState({ this.setState({
showSelectFileModal: true, showSelectFileModal: true,
}); })
}}> }}>
上传图片 上传图片
</Button> </Button>
...@@ -161,40 +143,14 @@ class AddLiveBasic extends React.Component { ...@@ -161,40 +143,14 @@ class AddLiveBasic extends React.Component {
<span className='label'> <span className='label'>
<span className='require'>*</span>课程分类： <span className='require'>*</span>课程分类：
</span> </span>
{pageType === 'add' && ( <CourseCatalogSelect
<Cascader value={categoryId}
options={courseCatalogList} onChange={(value, label) => {
displayRender={(label) => label.join('-')} this.handleChangeCatalogList(value, label)
fieldNames={fieldNames} }}
onChange={this.catalogChange} />
style={{ width: 240 }}
placeholder='请选择课程分类'
suffixIcon={
<span className='icon iconfont' style={{ fontSize: '12px', color: '#BFBFBF' }}>
&#xe835;
</span>
}
/>
)}
{pageType === 'edit' && categoryName && (
<Cascader
disabled={!isEdit ? true : false}
defaultValue={[categoryName]}
options={courseCatalogList}
displayRender={(label) => label.join('-')}
fieldNames={fieldNames}
onChange={this.catalogChange}
style={{ width: 240 }}
placeholder='请选择课程分类'
suffixIcon={
<span className='icon iconfont' style={{ fontSize: '12px', color: '#BFBFBF' }}>
&#xe835;
</span>
}
/>
)}
</div> </div>
{showSelectFileModal && {showSelectFileModal && (
<SelectPrepareFileModal <SelectPrepareFileModal
key='basic' key='basic'
operateType='select' operateType='select'
...@@ -204,17 +160,24 @@ class AddLiveBasic extends React.Component { ...@@ -204,17 +160,24 @@ class AddLiveBasic extends React.Component {
tooltip='支持文件类型：jpg、jpeg、png' tooltip='支持文件类型：jpg、jpeg、png'
isOpen={showSelectFileModal} isOpen={showSelectFileModal}
onClose={() => { onClose={() => {
this.setState({ showSelectFileModal: false }); this.setState({ showSelectFileModal: false })
}} }}
onSelect={this.handleSelectCover} onSelect={this.handleSelectCover}
/> />
} )}
{ visible && {visible && (
<ImgClipModal visible={visible} imgUrl={imageFile.ossUrl} onConfirm={this.getSignature} onClose={()=>{this.setState({ visible: false });}}/> <ImgClipModal
} visible={visible}
imgUrl={imageFile.ossUrl}
onConfirm={this.getSignature}
onClose={() => {
this.setState({ visible: false })
}}
/>
)}
</div> </div>
); )
} }
} }
export default AddLiveBasic; export default AddLiveBasic
src/modules/course-manage/offline-course/AddOfflineCourse.jsx
...@@ -8,10 +8,10 @@ ...@@ -8,10 +8,10 @@
*/ */
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 RangePicker from '@/modules/common/DateRangePicker' import { RangePicker, CourseCatalogSelect } from '@/modules/common'
import ShowTips from '@/components/ShowTips' import ShowTips from '@/components/ShowTips'
import Breadcrumbs from '@/components/Breadcrumbs' import Breadcrumbs from '@/components/Breadcrumbs'
import SelectPrepareFileModal from '../../prepare-lesson/modal/SelectPrepareFileModal' import SelectPrepareFileModal from '../../prepare-lesson/modal/SelectPrepareFileModal'
...@@ -759,7 +759,13 @@ class AddOfflineCourse extends React.Component { ...@@ -759,7 +759,13 @@ class AddOfflineCourse extends React.Component {
<span className='label special'> <span className='label special'>
<span className='require'>*</span>课程分类： <span className='require'>*</span>课程分类：
</span> </span>
<TreeSelect <CourseCatalogSelect
value={categoryId}
onChange={(value, label) => {
this.handleChangeCatalogList(value, label)
}}
/>
{/* <TreeSelect
showSearch showSearch
treeNodeFilterProp='title' treeNodeFilterProp='title'
style={{ width: 240 }} style={{ width: 240 }}
...@@ -772,7 +778,7 @@ class AddOfflineCourse extends React.Component { ...@@ -772,7 +778,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'>
......
src/modules/course-manage/video-course/AddVideoCourse.jsx
...@@ -8,8 +8,9 @@ ...@@ -8,8 +8,9 @@
*/ */
import React from 'react' import React from 'react'
import { Button, Input, message, Modal, Cascader, Tooltip, Form, Popconfirm, Menu, Dropdown } from 'antd' import { Button, Input, message, Modal, Tooltip, Form, Popconfirm, Menu, Dropdown } from 'antd'
import { FileTypeIcon, FileVerifyMap } from '@/common/constants/academic/lessonEnum' import { FileTypeIcon, FileVerifyMap } from '@/common/constants/academic/lessonEnum'
import { CourseCatalogSelect } from '@/modules/common'
import ShowTips from '@/components/ShowTips' import ShowTips from '@/components/ShowTips'
import Breadcrumbs from '@/components/Breadcrumbs' import Breadcrumbs from '@/components/Breadcrumbs'
import moment from 'moment' import moment from 'moment'
...@@ -84,7 +85,6 @@ class AddVideoCourse extends React.Component { ...@@ -84,7 +85,6 @@ class AddVideoCourse extends React.Component {
showSelectFileModal: false, showSelectFileModal: false,
studentModal: false, studentModal: false,
categoryName: null, //分类名称 categoryName: null, //分类名称
courseCatalogList: [], //分类列表
categoryId: null, //分类的Id值 categoryId: null, //分类的Id值
whetherVisitorsJoin: 'NO', // 是否允许游客加入 whetherVisitorsJoin: 'NO', // 是否允许游客加入
showSelectCoverModal: false, showSelectCoverModal: false,
...@@ -100,7 +100,6 @@ class AddVideoCourse extends React.Component { ...@@ -100,7 +100,6 @@ class AddVideoCourse extends React.Component {
componentWillMount() { componentWillMount() {
const { id, pageType } = this.state const { id, pageType } = this.state
this.getCourseCatalogList()
if (pageType === 'edit') { if (pageType === 'edit') {
this.handleFetchScheudleDetail(id) this.handleFetchScheudleDetail(id)
} }
...@@ -111,41 +110,34 @@ class AddVideoCourse extends React.Component { ...@@ -111,41 +110,34 @@ class AddVideoCourse extends React.Component {
}) })
} }
//获取分类列表 handleChangeCatalogList = (value, label) => {
getCourseCatalogList = () => { this.setState({ categoryId: value, categoryName: label[0] })
StoreService.getCourseCatalogList({ current: 1, size: 1000 }).then((res) => {
this.setState({
courseCatalogList: res.result.records,
})
})
} }
catalogChange = (value, _categoryName) => { // catalogChange = (value, _categoryName) => {
const categoryName = _.pluck(_categoryName, 'categoryName').join('-') // const categoryName = _.pluck(_categoryName, 'categoryName').join('-')
const changeValueLength = value.length // const changeValueLength = value.length
switch (changeValueLength) { // switch (changeValueLength) {
case 1: // case 1:
this.setState({ categoryId: value[0], categoryName }) // this.setState({ categoryId: value[0], categoryName })
break // break
case 2: // case 2:
this.setState({ categoryId: value[1], categoryName }) // this.setState({ categoryId: value[1], categoryName })
break // break
default: // default:
this.setState({ categoryId: null }) // this.setState({ categoryId: null })
break // break
} // }
} // }
// 获取线上课详情 // 获取线上课详情
handleFetchScheudleDetail = (courseId) => { handleFetchScheudleDetail = (courseId) => {
CourseService.videoScheduleDetail({ CourseService.videoScheduleDetail({
courseId, courseId,
}).then((res) => { }).then((res) => {
const { result = {} } = res || {} const { result = {} } = res || {}
const { courseName, shelfState, whetherVisitorsJoin, courseMediaVOS, categoryOneName, categoryTwoName, categoryId, courseChapterVOList = [] } = result const { courseName, shelfState, whetherVisitorsJoin, courseMediaVOS, categoryId, courseChapterVOList = [] } = result
let coverId let coverId
let coverUrl let coverUrl
// let videoDuration
// let videoName
let scheduleMedia = [] let scheduleMedia = []
let scheduleVideoUrl let scheduleVideoUrl
let hasIntro let hasIntro
...@@ -166,12 +158,12 @@ class AddVideoCourse extends React.Component { ...@@ -166,12 +158,12 @@ class AddVideoCourse extends React.Component {
return item return item
}) })
let categoryName // let categoryName
if (categoryTwoName) { // if (categoryTwoName) {
categoryName = `${categoryOneName}-${categoryTwoName}` // categoryName = `${categoryOneName}-${categoryTwoName}`
} else { // } else {
categoryName = `${categoryOneName}` // categoryName = `${categoryOneName}`
} // }
const _courseChapterVOList = courseChapterVOList.map((item) => { const _courseChapterVOList = courseChapterVOList.map((item) => {
item.mediaName = item.name item.mediaName = item.name
...@@ -183,14 +175,11 @@ class AddVideoCourse extends React.Component { ...@@ -183,14 +175,11 @@ class AddVideoCourse extends React.Component {
loadintroduce: !hasIntro, loadintroduce: !hasIntro,
coverId, coverId,
coverUrl, coverUrl,
// videoName,
// videoDuration,
scheduleMedia, scheduleMedia,
courseName, courseName,
scheduleVideoUrl, scheduleVideoUrl,
shelfState, shelfState,
whetherVisitorsJoin, whetherVisitorsJoin,
categoryName,
categoryId, categoryId,
courseChapterList: _courseChapterVOList, courseChapterList: _courseChapterVOList,
}) })
...@@ -708,13 +697,11 @@ class AddVideoCourse extends React.Component { ...@@ -708,13 +697,11 @@ class AddVideoCourse extends React.Component {
diskList, diskList,
// videoType, // videoType,
shelfState, shelfState,
categoryName, categoryId,
courseCatalogList,
whetherVisitorsJoin, whetherVisitorsJoin,
visible, visible,
showSelectCoverModal, showSelectCoverModal,
hasImgReady,
cutImageBlob,
introduce, introduce,
loadintroduce, loadintroduce,
id, id,
...@@ -884,38 +871,12 @@ class AddVideoCourse extends React.Component { ...@@ -884,38 +871,12 @@ class AddVideoCourse extends React.Component {
</div> </div>
<div className='course-catalog required'> <div className='course-catalog required'>
<span className='label'>课程分类：</span> <span className='label'>课程分类：</span>
{pageType === 'add' && ( <CourseCatalogSelect
<Cascader value={categoryId}
defaultValue={[]} onChange={(value, label) => {
options={courseCatalogList} this.handleChangeCatalogList(value, label)
displayRender={(label) => label.join('-')} }}
fieldNames={fieldNames} />
onChange={this.catalogChange}
style={{ width: 240 }}
placeholder='请选择课程分类'
suffixIcon={
<span className='icon iconfont' style={{ fontSize: '12px', color: '#BFBFBF' }}>
&#xe835;
</span>
}
/>
)}
{pageType === 'edit' && categoryName && (
<Cascader
defaultValue={[categoryName]}
options={courseCatalogList}
displayRender={(label) => label.join('-')}
fieldNames={fieldNames}
onChange={this.catalogChange}
style={{ width: 240 }}
placeholder='请选择课程分类'
suffixIcon={
<span className='icon iconfont' style={{ fontSize: '12px', color: '#BFBFBF' }}>
&#xe835;
</span>
}
/>
)}
</div> </div>
<div className='intro-info mt16'> <div className='intro-info mt16'>
<AddVideoIntro <AddVideoIntro
......
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