Merge branch 'feature/wufan/20210701/course-B-reform' into dev

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

@@ -2,7 +2,7 @@
  * @Author: 吴文洁
  * @Author: 吴文洁
  * @Date: 2020-08-05 10:07:47
  * @Date: 2020-08-05 10:07:47
  * @LastEditors: yuananting
  * @LastEditors: yuananting
- * @LastEditTime: 2021-07-07 15:01:40
+ * @LastEditTime: 2021-07-08 17:23:24
  * @Description: 线上课新增/编辑页
  * @Description: 线上课新增/编辑页
  * @Copyright: 杭州杰竞科技有限公司 版权所有
  * @Copyright: 杭州杰竞科技有限公司 版权所有
  */
  */
@@ -85,6 +85,7 @@ class AddVideoCourse extends React.Component {
       courseChapterList:[
       courseChapterList:[
       ], // 课节列表
       ], // 课节列表
       videoType: "MP4",
       videoType: "MP4",
+      mediaNameAlias: '', // 任一视频重命名的名称（气泡框）
     }
     }
   }
   }
 
 
@@ -164,7 +165,6 @@ class AddVideoCourse extends React.Component {
 
 
       const _courseChapterVOList = courseChapterVOList.map(item => {
       const _courseChapterVOList = courseChapterVOList.map(item => {
         item.mediaName = item.name;
         item.mediaName = item.name;
-        item.mediaNameAlias = item.name;
         return item
         return item
       })
       })
 
 
@@ -325,7 +325,6 @@ class AddVideoCourse extends React.Component {
         contentType: 'SCHEDULE',
         contentType: 'SCHEDULE',
         mediaType: "VIDEO",
         mediaType: "VIDEO",
         mediaName: folderName.replace('.mp4',''),
         mediaName: folderName.replace('.mp4',''),
-        mediaNameAlias: folderName.replace('.mp4',''),
         videoDuration: videoDom.duration,
         videoDuration: videoDom.duration,
         id: resourceId,
         id: resourceId,
         mediaUrl: ossUrl,
         mediaUrl: ossUrl,
@@ -593,28 +592,33 @@ class AddVideoCourse extends React.Component {
     return new Blob([ab], { type: 'image/png' })
     return new Blob([ab], { type: 'image/png' })
   }
   }
 
 
-  handleRenameCourseChapter = (chapterId, isFromTextArea, value) => {
-    let val = value && value.trim();
+  handleRenameCourseChapter = (chapterId) => {
+    const { mediaNameAlias } = this.state;
 
 
-    this.handleValidateChapterName(val).then(res => {
+    this.handleValidateChapterName(mediaNameAlias).then(res => {
       // 校验不通过不能点确定保存修改课节名称
       // 校验不通过不能点确定保存修改课节名称
-      if (!res && !isFromTextArea) return;
+      if (!res) {
+        this.setState({
+          chapterNameValidateStatus: '',
+          chapterNameHelpMsg: '',
+          mediaNameAlias: '',
+        })
+        return message.warning('重命名失败');
+      }
 
 
       let { courseChapterList } = this.state; 
       let { courseChapterList } = this.state; 
       let  _courseChapterList = [];
       let  _courseChapterList = [];
       _courseChapterList = courseChapterList.map((item,index)=>{
       _courseChapterList = courseChapterList.map((item,index)=>{
         if(item.id === chapterId){
         if(item.id === chapterId){
-          // 若是文本框编辑则修改的是视频别名，否则是点击确认修改视频本名
-          if(isFromTextArea){
-            item.mediaNameAlias = val;
-          } else {
-            item.mediaName = item.mediaNameAlias;
-          }
+          item.mediaName = mediaNameAlias;
         }
         }
         return item
         return item
       })
       })
       this.setState({
       this.setState({
-        courseChapterList: _courseChapterList
+        courseChapterList: _courseChapterList,
+        chapterNameValidateStatus: '',
+        chapterNameHelpMsg: '',
+        mediaNameAlias: '',
       })
       })
     });
     });
 
 
@@ -642,13 +646,18 @@ class AddVideoCourse extends React.Component {
             help={chapterNameHelpMsg}
             help={chapterNameHelpMsg}
             >
             >
           <TextArea
           <TextArea
-            value={item.mediaNameAlias}
+            defaultValue={item.mediaName}
             placeholder="请输入课节名称"
             placeholder="请输入课节名称"
             maxLength={40}
             maxLength={40}
             autoSize
             autoSize
-            // autoSize={{ minRows: 1, maxRows: 3 }}
             style={{ width: '318px'}}
             style={{ width: '318px'}}
-            onChange={(e) => {this.handleRenameCourseChapter(item.id, true, e.target.value) }}
+            onChange={(e) => {
+              this.setState({
+                mediaNameAlias: e.target.value.trim()
+              }, () => {
+                this.handleValidateChapterName(this.state.mediaNameAlias)
+              })
+            }}
           />
           />
           </Form.Item>
           </Form.Item>
           </Form>
           </Form>
@@ -782,11 +791,18 @@ class AddVideoCourse extends React.Component {
                                     getPopupContainer={() =>
                                     getPopupContainer={() =>
                                       document.getElementById('course-chapter-list')
                                       document.getElementById('course-chapter-list')
                                     }
                                     }
-                                    onConfirm={() => this.handleRenameCourseChapter(item.id,false,item.mediaNameAlias)}
+                                    onConfirm={() => this.handleRenameCourseChapter(item.id)}
+                                    destroyTooltipOnHide={true}
                                     icon={null}
                                     icon={null}
-                                    maskClosable={false}
+                                    onVisibleChange={(visible)=>{
+                                      !visible && this.setState({
+                                        chapterNameValidateStatus: '',
+                                        chapterNameHelpMsg: '',
+                                        mediaNameAlias: '',
+                                      })
+                                    }}
                                     >
                                     >
-                                  <div className="rename">重命名</div>
+                                  <div className="rename" onClick={()=> {this.setState({mediaNameAlias: item.mediaName})}}>重命名</div>
                                     </Popconfirm>
                                     </Popconfirm>
                                 <div className="line">|</div>
                                 <div className="line">|</div>
                                 <div className="delete" onClick={()=>this.handleDeleteCourseChapter(item.id)}>移除</div>
                                 <div className="delete" onClick={()=>this.handleDeleteCourseChapter(item.id)}>移除</div>