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