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 @@
* @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)
}
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;
handleChangeCatalogList = (value) => {
this.props.onChange('categoryId', value)
}
};
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/store-manage/StoreDecorationPage.less
.store-decoration-page {
.box {
padding-top:11px!important;
padding-top: 11px !important;
}
thead {
display: none;
......@@ -27,11 +27,11 @@
}
.banner-thumbnail {
width: 230px;
height: 79px;
height: 96px;
}
.web-banner-thumbnail {
width: 389px;
height: 67px;
height: 162px;
}
.index-num {
......@@ -51,18 +51,17 @@
.operation {
.edit {
color: #2966FF;
color: #2966ff;
cursor: pointer;
}
.divider-line {
color:#BFBFBF
color: #bfbfbf;
}
.delete {
color: #2966FF;
color: #2966ff;
cursor: pointer;
}
}
}
.clip-box {
display: flex;
......@@ -86,7 +85,7 @@
.preview-url {
width: 500px;
height: 73px;
background: #E6E6E6;
background: #e6e6e6;
}
#preview-url-box {
......@@ -112,11 +111,11 @@
}
.banner-thumbnail {
width: 230px;
height: 79px;
height: 96px;
}
.web-banner-thumbnail {
width: 389px;
height: 67px;
height: 162px;
}
.index-num {
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