fix:解决新增视频唯一标识的冲突

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

@@ -2,7 +2,7 @@
  * @Author: 吴文洁
  * @Date: 2020-08-05 10:07:47
  * @LastEditors: yuananting
- * @LastEditTime: 2021-07-09 17:44:34
+ * @LastEditTime: 2021-07-09 18:03:45
  * @Description: 线上课新增/编辑页
  * @Copyright: 杭州杰竞科技有限公司 版权所有
  */
@@ -643,6 +643,119 @@ class AddVideoCourse extends React.Component {
       coverId: coverId
     })
   }
+  // base64转换成blob
+  convertBase64UrlToBlob = (urlData) => {
+    const bytes = window.atob(urlData.split(',')[1])
+    const ab = new ArrayBuffer(bytes.length)
+    const ia = new Uint8Array(ab)
+    for (let i = 0; i < bytes.length; i++) {
+      ia[i] = bytes.charCodeAt(i)
+    }
+    return new Blob([ab], { type: 'image/png' })
+  }
+
+  handleRenameCourseChapter = (chapterId) => {
+    const { mediaNameAlias } = this.state;
+
+    this.handleValidateChapterName(mediaNameAlias).then(res => {
+      // 校验不通过不能点确定保存修改课节名称
+      if (!res) {
+        this.setState({
+          chapterNameValidateStatus: '',
+          chapterNameHelpMsg: '',
+          mediaNameAlias: '',
+        })
+        return message.warning('重命名失败');
+      }
+
+      let { courseChapterList } = this.state; 
+      let  _courseChapterList = [];
+      _courseChapterList = courseChapterList.map((item,index)=>{
+        if(item.resourceId === chapterId){
+          item.mediaName = mediaNameAlias;
+        }
+        return item
+      })
+      this.setState({
+        courseChapterList: _courseChapterList,
+        chapterNameValidateStatus: '',
+        chapterNameHelpMsg: '',
+        mediaNameAlias: '',
+      })
+    });
+
+  }
+
+  handleDeleteCourseChapter = (chapterId) => {
+    console.log('chapterId---',chapterId);
+    let { courseChapterList } = this.state; 
+    let _courseChapterList = courseChapterList.filter((item,index) => {
+        return item.resourceId !== chapterId
+    })
+    this.setState({
+      courseChapterList :_courseChapterList
+    })
+  }
+
+  renderChapterTitle = (item) => {
+    const { chapterNameValidateStatus, chapterNameHelpMsg} = this.state;
+
+    return <div className="course-chapter-title-popover">
+      <div className="tag-title">课节名称</div>
+        <Form>
+          <Form.Item
+            validateStatus={chapterNameValidateStatus}
+            help={chapterNameHelpMsg}
+            >
+          <TextArea
+            defaultValue={item.mediaName}
+            placeholder="请输入课节名称"
+            maxLength={40}
+            autoSize
+            style={{ width: '318px'}}
+            onChange={(e) => {
+              this.setState({
+                mediaNameAlias: e.target.value.trim()
+              }, () => {
+                this.handleValidateChapterName(this.state.mediaNameAlias)
+              })
+            }}
+          />
+          </Form.Item>
+          </Form>
+      </div>
+  }
+
+    // 上下移动
+    handleChangeIndex = (isUp, sortIndex) => {
+      const { courseChapterList} = this.state;
+  
+      // 第一个上移和最后一个下移不能使用
+      if((isUp && sortIndex === 0) || (!isUp && sortIndex === (courseChapterList.length -1))){
+        return;
+      }
+  
+      let _courseChapterList = [...courseChapterList];
+      const temp =  courseChapterList[sortIndex];
+  
+      // 若上移
+      if(isUp){
+        _courseChapterList[sortIndex -1] = temp;
+        _courseChapterList[sortIndex -1].sort = sortIndex -1;
+        _courseChapterList[sortIndex] = courseChapterList[sortIndex - 1];
+        _courseChapterList[sortIndex].sort = sortIndex;
+      } else { // 若下移
+        _courseChapterList[sortIndex + 1] = temp;
+        _courseChapterList[sortIndex + 1].sort = sortIndex + 1;
+        _courseChapterList[sortIndex] = courseChapterList[sortIndex + 1];
+        _courseChapterList[sortIndex].sort = sortIndex;
+      }
+  
+      this.setState({
+        courseChapterList: _courseChapterList
+      })
+    }
+
   render() {
     const {
       pageType,
@@ -726,10 +839,10 @@ class AddVideoCourse extends React.Component {
                               <div className="course-ware__index">{index < 9 ? `0${index + 1 } ` : `${index + 1 } `}</div>
                               <img className='course-ware__img' src={courseWareIcon} alt='' />
                               <div className='course-ware__name'>{item.mediaName && item.mediaName.length > 24 ? <Tooltip title={item.mediaName}>{item.mediaName}</Tooltip>:item.mediaName}</div>
-                              <div className="course-chapter__opt" id={item.id}>
-                                  <div className={`up ${Number(index) === 0 ? 'disabled':''}`} onClick={()=> this.handleChangeIndex(true,item.sort,item.id)}>上移</div>
+                              <div className="course-chapter__opt" id={item.resourceId}>
+                                  <div className={`up ${Number(index) === 0 ? 'disabled':''}`} onClick={()=> this.handleChangeIndex(true,item.sort,item.resourceId)}>上移</div>
                                   <div className="line">|</div>
-                                  <div className={`down ${Number(index) === (courseChapterList.length - 1) ? 'disabled':''}`} onClick={()=> this.handleChangeIndex(false,item.sort,item.id)}>下移</div>
+                                  <div className={`down ${Number(index) === (courseChapterList.length - 1) ? 'disabled':''}`} onClick={()=> this.handleChangeIndex(false,item.sort,item.resourceId)}>下移</div>
                                   <div className="line">|</div>
                                   <Popconfirm  
                                     placement="topLeft"
@@ -740,7 +853,7 @@ class AddVideoCourse extends React.Component {
                                     getPopupContainer={() =>
                                       document.getElementById('course-chapter-list')
                                     }
-                                    onConfirm={() => this.handleRenameCourseChapter(item.id)}
+                                    onConfirm={() => this.handleRenameCourseChapter(item.resourceId)}
                                     destroyTooltipOnHide={true}
                                     icon={null}
                                     onVisibleChange={(visible)=>{
@@ -754,7 +867,7 @@ class AddVideoCourse extends React.Component {
                                   <div className="rename" onClick={()=> {this.setState({mediaNameAlias: item.mediaName})}}>重命名</div>
                                     </Popconfirm>
                                 <div className="line">|</div>
-                                <div className="delete" onClick={()=>this.handleDeleteCourseChapter(item.id)}>移除</div>
+                                <div className="delete" onClick={()=>this.handleDeleteCourseChapter(item.resourceId)}>移除</div>
                               </div>
                         </div>
                       })