Skip to content

X
xiaomai-cloud-class-web
Commit 7791d71c by yuananting
Options

fix:修复课节滚动+重命名弹窗多个显示问题

parent 2b0bf0dc
Showing with 31 additions and 24 deletions
src/modules/course-manage/video-course/AddVideoCourse.jsx
/* /*
* @Author: 吴文洁 * @Author: 吴文洁
* @Date: 2020-08-05 10:07:47 * @Date: 2020-08-05 10:07:47
* @LastEditors: Please set LastEditors * @LastEditors: yuananting
* @LastEditTime: 2021-07-08 19:34:10 * @LastEditTime: 2021-07-12 14:58:59
* @Description: 视频课新增/编辑页 * @Description: 线上课新增/编辑页
* @Copyright: 杭州杰竞科技有限公司 版权所有 * @Copyright: 杭州杰竞科技有限公司 版权所有
*/ */
...@@ -518,11 +518,6 @@ class AddVideoCourse extends React.Component { ...@@ -518,11 +518,6 @@ class AddVideoCourse extends React.Component {
this.handleValidateChapterName(mediaNameAlias).then(res => { this.handleValidateChapterName(mediaNameAlias).then(res => {
// 校验不通过不能点确定保存修改课节名称 // 校验不通过不能点确定保存修改课节名称
if (!res) { if (!res) {
this.setState({
chapterNameValidateStatus: '',
        chapterNameHelpMsg: '',
mediaNameAlias: '',
})
return message.warning('重命名失败'); return message.warning('重命名失败');
} }
...@@ -531,6 +526,7 @@ class AddVideoCourse extends React.Component { ...@@ -531,6 +526,7 @@ class AddVideoCourse extends React.Component {
_courseChapterList = courseChapterList.map((item,index)=>{ _courseChapterList = courseChapterList.map((item,index)=>{
if(item.resourceId === chapterId){ if(item.resourceId === chapterId){
item.mediaName = mediaNameAlias; item.mediaName = mediaNameAlias;
item.visible = false;
} }
return item return item
}) })
...@@ -545,6 +541,22 @@ class AddVideoCourse extends React.Component { ...@@ -545,6 +541,22 @@ class AddVideoCourse extends React.Component {
} }
handleChangePopConfirmVisible = (chapterId, chapterNameIndex, visible)=> {
let { courseChapterList } = this.state;
let _courseChapterList = [];
_courseChapterList = courseChapterList.map((item,index)=>{
if(item.resourceId === chapterId && chapterNameIndex === index){
item.visible = visible
} else {
item.visible = false
}
return item
})
this.setState({
courseChapterList: _courseChapterList,
})
}
handleDeleteCourseChapter = (chapterId) => { handleDeleteCourseChapter = (chapterId) => {
console.log('chapterId---',chapterId); console.log('chapterId---',chapterId);
let { courseChapterList } = this.state; let { courseChapterList } = this.state;
...@@ -716,10 +728,10 @@ class AddVideoCourse extends React.Component { ...@@ -716,10 +728,10 @@ class AddVideoCourse extends React.Component {
getPopupContainer={() => getPopupContainer={() =>
document.getElementById('course-chapter-list') document.getElementById('course-chapter-list')
} }
onConfirm={() => this.handleRenameCourseChapter(item.resourceId)}
destroyTooltipOnHide={true} destroyTooltipOnHide={true}
visible={item.visible}
onConfirm={() => this.handleRenameCourseChapter(item.resourceId)}
icon={null} icon={null}
visible={popConfirmVisible}
onVisibleChange={(visible)=>{ onVisibleChange={(visible)=>{
!visible && this.setState({ !visible && this.setState({
chapterNameValidateStatus: '', chapterNameValidateStatus: '',
...@@ -727,13 +739,11 @@ class AddVideoCourse extends React.Component { ...@@ -727,13 +739,11 @@ class AddVideoCourse extends React.Component {
mediaNameAlias: '', mediaNameAlias: '',
}) })
}} }}
onCancel={()=>{ onCancel={()=> this.handleChangePopConfirmVisible(item.resourceId, index, false)}
this.setState({
popConfirmVisible: false
})
}}
> >
<div className="rename" onClick={()=> {this.setState({mediaNameAlias: item.mediaName, popConfirmVisible: true})}}>重命名</div> <div className="rename" onClick={() => {this.setState({mediaNameAlias: item.mediaName}, ()=>{
this.handleChangePopConfirmVisible(item.resourceId, index, true)})
}}>重命名</div>
</Popconfirm> </Popconfirm>
<div className="line">|</div> <div className="line">|</div>
<div className="delete" onClick={()=>this.handleDeleteCourseChapter(item.resourceId)}>移除</div> <div className="delete" onClick={()=>this.handleDeleteCourseChapter(item.resourceId)}>移除</div>
......
src/modules/course-manage/video-course/AddVideoCourse.less
...@@ -156,16 +156,14 @@ ...@@ -156,16 +156,14 @@
.course-chapter-list-wrap { .course-chapter-list-wrap {
position: relative; position: relative;
margin-left: 85px; margin-left: 85px;
border: 1px solid #E8E8E8;
width: 630px;
.course-chapter-total { .course-chapter-total {
height: 40px; height: 40px;
font-size: 14px; font-size: 14px;
font-family: PingFangSC-Medium, PingFang SC; font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500; font-weight: 500;
color: #333333; color: #333333;
margin-bottom: 18px;
position: absolute;
top: 1px;
left: 1px;
z-index: 10; z-index: 10;
background: #fff; background: #fff;
width: 628px; width: 628px;
...@@ -174,17 +172,15 @@ ...@@ -174,17 +172,15 @@
} }
.course-chapter-list { .course-chapter-list {
margin-top: 8px; margin-top: 8px;
width: 630px;
max-height: 247px; max-height: 247px;
min-height: 130px; min-height: 130px;
overflow-y: auto ; overflow-y: auto ;
border-radius: 4px; border-radius: 4px;
border: 1px solid #E8E8E8; padding: 20px 16px;
padding: 50px 16px 20px 16px;
.course-ware { .course-ware {
display: flex; display: flex;
align-items: center; align-items: center;
margin-bottom: 20px; margin-bottom: 22px;
color: #666; color: #666;
&:last-child { &:last-child {
margin-bottom: 0; margin-bottom: 0;
...@@ -205,6 +201,7 @@ ...@@ -205,6 +201,7 @@
.course-chapter__opt { .course-chapter__opt {
display: flex; display: flex;
color: #2966ff; color: #2966ff;
width: 168px;
.line { .line {
color: #bfbfbf; color: #bfbfbf;
margin-left: 4px; margin-left: 4px;
......
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