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

src/modules/course-manage/video-course/AddVideoCourse.jsx

 /*
  * @Author: 吴文洁
  * @Date: 2020-08-05 10:07:47
- * @LastEditors: Please set LastEditors
- * @LastEditTime: 2021-07-08 19:34:10
- * @Description: 视频课新增/编辑页
+ * @LastEditors: yuananting
+ * @LastEditTime: 2021-07-12 14:58:59
+ * @Description: 线上课新增/编辑页
  * @Copyright: 杭州杰竞科技有限公司 版权所有
  */
 
@@ -518,11 +518,6 @@ class AddVideoCourse extends React.Component {
     this.handleValidateChapterName(mediaNameAlias).then(res => {
       // 校验不通过不能点确定保存修改课节名称
       if (!res) {
-        this.setState({
-          chapterNameValidateStatus: '',
-          chapterNameHelpMsg: '',
-          mediaNameAlias: '',
-        })
         return message.warning('重命名失败');
       }
 
@@ -531,6 +526,7 @@ class AddVideoCourse extends React.Component {
       _courseChapterList = courseChapterList.map((item,index)=>{
         if(item.resourceId === chapterId){
           item.mediaName = mediaNameAlias;
+          item.visible = false;
         }
         return item
       })
@@ -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) => {
     console.log('chapterId---',chapterId);
     let { courseChapterList } = this.state; 
@@ -716,10 +728,10 @@ class AddVideoCourse extends React.Component {
                                     getPopupContainer={() =>
                                       document.getElementById('course-chapter-list')
                                     }
-                                    onConfirm={() => this.handleRenameCourseChapter(item.resourceId)}
                                     destroyTooltipOnHide={true}
+                                    visible={item.visible}
+                                    onConfirm={() => this.handleRenameCourseChapter(item.resourceId)}
                                     icon={null}
-                                    visible={popConfirmVisible}
                                     onVisibleChange={(visible)=>{
                                       !visible && this.setState({
                                         chapterNameValidateStatus: '',
@@ -727,13 +739,11 @@ class AddVideoCourse extends React.Component {
                                         mediaNameAlias: '',
                                       })
                                     }}
-                                    onCancel={()=>{
-                                      this.setState({
-                                        popConfirmVisible: false
-                                      })
-                                    }}
+                                    onCancel={()=> this.handleChangePopConfirmVisible(item.resourceId, index, 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>
                                 <div className="line">|</div>
                                 <div className="delete" onClick={()=>this.handleDeleteCourseChapter(item.resourceId)}>移除</div>

src/modules/course-manage/video-course/AddVideoCourse.less

@@ -156,16 +156,14 @@
     .course-chapter-list-wrap {
       position: relative;
       margin-left: 85px;
+      border: 1px solid #E8E8E8;
+      width: 630px;
       .course-chapter-total {
         height: 40px;
         font-size: 14px;
         font-family: PingFangSC-Medium, PingFang SC;
         font-weight: 500;
         color: #333333;
-        margin-bottom: 18px;
-        position: absolute;
-        top: 1px;
-        left: 1px;
         z-index: 10;
         background: #fff;
         width: 628px;
@@ -174,17 +172,15 @@
       }
       .course-chapter-list {
         margin-top: 8px;
-        width: 630px;
         max-height: 247px;
         min-height: 130px;
         overflow-y: auto ;
         border-radius: 4px;
-        border: 1px solid #E8E8E8;
-        padding: 50px 16px 20px 16px;
+        padding: 20px 16px;
         .course-ware {
           display: flex;
           align-items: center;
-          margin-bottom: 20px;
+          margin-bottom: 22px;
           color: #666;
           &:last-child {
             margin-bottom: 0;
@@ -205,6 +201,7 @@
           .course-chapter__opt {
             display: flex;
             color: #2966ff;
+            width: 168px;
             .line {
               color: #bfbfbf;
               margin-left: 4px;