Skip to content

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

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

parents 6f173dcd 64195835
Showing with 137 additions and 112 deletions
src/modules/common/CourseCatalogSelect.jsx 0 → 100644
import React, { useEffect, useState } from 'react'
import { TreeSelect } from 'antd'
import User from '@/common/js/user'
import Service from '@/common/js/service'
function CourseCatalogSelect(props) {
let {
showSearch = true,
value = '',
treeNodeFilterProp = 'title',
style = { width: 240 },
dropdownStyle = { maxHeight: 300, overflow: 'auto' },
placeholder = '请选择课程类型',
allowClear = true,
onChange = () => {},
} = props
let [courseCatalogList, setCourseCatalogList] = useState([])
useEffect(() => {
//获取分类列表
function getCourseCatalogList() {
Service.Hades('public/hades/queryCategoryTree', { source: 0, tenantId: User.getStoreId(), count: false, userId: User.getUserId() }).then((res) => {
const { categoryList = [] } = res.result
let list = renderTreeNodes(categoryList)
setCourseCatalogList(list)
})
}
function renderTreeNodes(list) {
let newTreeData = list.map((item) => {
item.title = item.categoryName
item.value = item.id
item.key = item.id
console.log(value, item.value, value === item.value, 'item.categoryName')
if (item.sonCategoryList) {
item.children = renderTreeNodes(item.sonCategoryList)
}
return item
})
return newTreeData
}
getCourseCatalogList()
}, [])
return (
<TreeSelect
treeNodeLabelProp='categoryName'
showSearch={showSearch}
treeNodeFilterProp={treeNodeFilterProp}
style={style}
value={value}
dropdownStyle={dropdownStyle}
treeData={courseCatalogList}
placeholder={placeholder}
allowClear={allowClear}
treeDefaultExpandAll
onChange={(value, label) => {
onChange(value, label)
}}
/>
)
}
export default CourseCatalogSelect
src/modules/common/index.js 0 → 100644
export { default as RangePicker } from './DateRangePicker'
export { default as CourseCatalogSelect } from './CourseCatalogSelect'
src/modules/course-manage/components/AddLiveBasic.jsx
...@@ -6,25 +6,21 @@ ...@@ -6,25 +6,21 @@
* @Description: 新建/编辑直播课-基本信息 * @Description: 新建/编辑直播课-基本信息
*/ */
import React from 'react'; import React from 'react'
import { Input, Button, message, Cascader, Modal } from 'antd'; import { Input, Button, message, Cascader } from 'antd'
import UploadOss from '@/core/upload'; import { CourseCatalogSelect } from '@/modules/common'
import { ImgCutModalNew } from '@/components'; import StoreService from '@/domains/store-domain/storeService'
import StoreService from '@/domains/store-domain/storeService'; import SelectPrepareFileModal from '@/modules/prepare-lesson/modal/SelectPrepareFileModal'
import SelectPrepareFileModal from '@/modules/prepare-lesson/modal/SelectPrepareFileModal'; import Upload from '@/core/upload'
import Upload from '@/core/upload';
import Cropper from 'react-cropper';
import ImgClipModal from '@/components/ImgClipModal' import ImgClipModal from '@/components/ImgClipModal'
import 'cropperjs/dist/cropper.css'; import 'cropperjs/dist/cropper.css'
import './AddLiveBasic.less'; import './AddLiveBasic.less'
const defaultCover = 'https://image.xiaomaiketang.com/xm/Yip2YtFDwH.png'; const defaultCover = 'https://image.xiaomaiketang.com/xm/Yip2YtFDwH.png'
const fieldNames = { label: 'categoryName', value: 'id', children: 'sonCategoryList' }; const fieldNames = { label: 'categoryName', value: 'id', children: 'sonCategoryList' }
let cutFlag = false;
let timer = null;
class AddLiveBasic extends React.Component { class AddLiveBasic extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props)
this.state = { this.state = {
imageFile: null, imageFile: null,
showCutModal: false, showCutModal: false,
...@@ -32,63 +28,50 @@ class AddLiveBasic extends React.Component { ...@@ -32,63 +28,50 @@ class AddLiveBasic extends React.Component {
showSelectFileModal: false, showSelectFileModal: false,
cutImageBlob: null, cutImageBlob: null,
hasImgReady: false, // 图片是否上传成功 hasImgReady: false, // 图片是否上传成功
cropperInstace:null cropperInstace: null,
} }
} }
componentWillUnmount() {} componentWillUnmount() {}
componentDidMount() { componentDidMount() {
this.getCourseCatalogList(); this.getCourseCatalogList()
} }
getCourseCatalogList = () => { getCourseCatalogList = () => {
StoreService.getCourseCatalogList({ current: 1, size: 1000 }).then((res) => { StoreService.getCourseCatalogList({ current: 1, size: 1000 }).then((res) => {
this.setState({ this.setState({
courseCatalogList: res.result.records, courseCatalogList: res.result.records,
}); })
}); })
} }
// 使用默认封面图 // 使用默认封面图
handleResetCoverUrl = () => { handleResetCoverUrl = () => {
const { const {
data: { coverUrl }, data: { coverUrl },
} = this.props; } = this.props
const isDefaultCover = coverUrl === defaultCover; const isDefaultCover = coverUrl === defaultCover
// 如果已经是默认图的话，不做任何任何处理 // 如果已经是默认图的话，不做任何任何处理
if (isDefaultCover) return; if (isDefaultCover) return
message.success('已替换为默认图'); message.success('已替换为默认图')
this.props.onChange('coverUrl', defaultCover); this.props.onChange('coverUrl', defaultCover)
setTimeout(() => { setTimeout(() => {
this.props.onChange('coverId', null); this.props.onChange('coverId', null)
}, 1000); }, 1000)
}; }
catalogChange = (value) => { handleChangeCatalogList = (value) => {
const changeValueLength = value.length; this.props.onChange('categoryId', value)
switch (changeValueLength) {
case 1:
this.props.onChange('categoryId', value[0]);
break;
case 2:
this.props.onChange('categoryId', value[1]);
break;
default:
this.props.onChange('categoryId', null);
break;
} }
};
handleSelectCover = (file) => { handleSelectCover = (file) => {
this.setState({ this.setState({
visible: true, visible: true,
imageFile:file imageFile: file,
}); })
} }
//获取resourceId //获取resourceId
getSignature = (blob, fileName) => { getSignature = (blob) => {
const { choosedBannerId } = this.state;
Upload.uploadBlobToOSS(blob, 'cover' + new Date().valueOf(), null, 'signInfo').then((signInfo) => { Upload.uploadBlobToOSS(blob, 'cover' + new Date().valueOf(), null, 'signInfo').then((signInfo) => {
this.setState( this.setState(
{ {
...@@ -97,26 +80,25 @@ class AddLiveBasic extends React.Component { ...@@ -97,26 +80,25 @@ class AddLiveBasic extends React.Component {
visible: false, visible: false,
}, },
() => this.updateCover() () => this.updateCover()
); )
}); })
}; }
updateCover = () =>{ updateCover = () => {
const {coverClicpPath,coverId} = this.state const { coverClicpPath, coverId } = this.state
this.setState({ this.setState({
showSelectFileModal: false, showSelectFileModal: false,
}); })
this.props.onChange('coverUrl', coverClicpPath); this.props.onChange('coverUrl', coverClicpPath)
setTimeout(() => { setTimeout(() => {
this.props.onChange('coverId', coverId); this.props.onChange('coverId', coverId)
}, 1000); }, 1000)
}; }
render() { render() {
const { showCutModal, imageFile, courseCatalogList, showSelectFileModal, visible, cutImageBlob, hasImgReady } = this.state; const { imageFile, showSelectFileModal, visible } = this.state
const { data, pageType, isEdit } = this.props; const { data } = this.props
const { courseName, categoryName, coverUrl } = data; const { courseName, coverUrl, categoryId } = data
const fileName = '';
// 当前是否使用的是默认图片 // 当前是否使用的是默认图片
const isDefaultCover = coverUrl === defaultCover; const isDefaultCover = coverUrl === defaultCover
return ( return (
<div className='add-live__basic-info'> <div className='add-live__basic-info'>
<div className='course-name'> <div className='course-name'>
...@@ -129,7 +111,7 @@ class AddLiveBasic extends React.Component { ...@@ -129,7 +111,7 @@ class AddLiveBasic extends React.Component {
maxLength={40} maxLength={40}
style={{ width: 240 }} style={{ width: 240 }}
onChange={(e) => { onChange={(e) => {
this.props.onChange('courseName', e.target.value); this.props.onChange('courseName', e.target.value)
}} }}
/> />
</div> </div>
...@@ -142,7 +124,7 @@ class AddLiveBasic extends React.Component { ...@@ -142,7 +124,7 @@ class AddLiveBasic extends React.Component {
onClick={() => { onClick={() => {
this.setState({ this.setState({
showSelectFileModal: true, showSelectFileModal: true,
}); })
}}> }}>
上传图片 上传图片
</Button> </Button>
...@@ -161,40 +143,14 @@ class AddLiveBasic extends React.Component { ...@@ -161,40 +143,14 @@ class AddLiveBasic extends React.Component {
<span className='label'> <span className='label'>
<span className='require'>*</span>课程分类： <span className='require'>*</span>课程分类：
</span> </span>
{pageType === 'add' && ( <CourseCatalogSelect
<Cascader value={categoryId}
options={courseCatalogList} onChange={(value, label) => {
displayRender={(label) => label.join('-')} this.handleChangeCatalogList(value, label)
fieldNames={fieldNames} }}
onChange={this.catalogChange}
style={{ width: 240 }}
placeholder='请选择课程分类'
suffixIcon={
<span className='icon iconfont' style={{ fontSize: '12px', color: '#BFBFBF' }}>
&#xe835;
</span>
}
/>
)}
{pageType === 'edit' && categoryName && (
<Cascader
disabled={!isEdit ? true : false}
defaultValue={[categoryName]}
options={courseCatalogList}
displayRender={(label) => label.join('-')}
fieldNames={fieldNames}
onChange={this.catalogChange}
style={{ width: 240 }}
placeholder='请选择课程分类'
suffixIcon={
<span className='icon iconfont' style={{ fontSize: '12px', color: '#BFBFBF' }}>
&#xe835;
</span>
}
/> />
)}
</div> </div>
{showSelectFileModal && {showSelectFileModal && (
<SelectPrepareFileModal <SelectPrepareFileModal
key='basic' key='basic'
operateType='select' operateType='select'
...@@ -204,17 +160,24 @@ class AddLiveBasic extends React.Component { ...@@ -204,17 +160,24 @@ class AddLiveBasic extends React.Component {
tooltip='支持文件类型：jpg、jpeg、png' tooltip='支持文件类型：jpg、jpeg、png'
isOpen={showSelectFileModal} isOpen={showSelectFileModal}
onClose={() => { onClose={() => {
this.setState({ showSelectFileModal: false }); this.setState({ showSelectFileModal: false })
}} }}
onSelect={this.handleSelectCover} onSelect={this.handleSelectCover}
/> />
} )}
{ visible && {visible && (
<ImgClipModal visible={visible} imgUrl={imageFile.ossUrl} onConfirm={this.getSignature} onClose={()=>{this.setState({ visible: false });}}/> <ImgClipModal
} visible={visible}
imgUrl={imageFile.ossUrl}
onConfirm={this.getSignature}
onClose={() => {
this.setState({ visible: false })
}}
/>
)}
</div> </div>
); )
} }
} }
export default AddLiveBasic; export default AddLiveBasic
src/modules/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;
......
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