From 4597a8919e98622ec943d6c94e87a41279967ad1 Mon Sep 17 00:00:00 2001
From: yujialong <479214531@qq.com>
Date: Thu, 23 Nov 2023 18:05:49 +0800
Subject: [PATCH] =?UTF-8?q?=E9=98=BF=E9=87=8C=E4=BA=91oss?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/upload/index.vue               |    4 +-
 src/views/course/contentSettings.vue          |  100 +-
 src/views/match/list/index.vue                |    3 +-
 .../contentSettings/index.vue                 | 1720 +++++++++--------
 4 files changed, 956 insertions(+), 871 deletions(-)

diff --git a/src/components/upload/index.vue b/src/components/upload/index.vue
index 8e3ae47..7493705 100644
--- a/src/components/upload/index.vue
+++ b/src/components/upload/index.vue
@@ -111,7 +111,7 @@ export default {
         });
 
         this.uploading = false
-        const url = 'http://huoran.oss-cn-shenzhen.aliyuncs.com/' + name
+        const url = 'https://huoran.oss-cn-shenzhen.aliyuncs.com/' + name
         this.changeFileList && this.$emit('update:fileList', [
           ...this.fileList,
           {
@@ -124,7 +124,7 @@ export default {
         this.$emit('onSuccess', {
           format: util.getFileExt(file.name),
           name: file.name,
-          url: url,
+          url,
           size: file.size,
         })
       } catch (error) { }
diff --git a/src/views/course/contentSettings.vue b/src/views/course/contentSettings.vue
index 6ec699e..48d5a48 100644
--- a/src/views/course/contentSettings.vue
+++ b/src/views/course/contentSettings.vue
@@ -169,25 +169,6 @@
                     <p>视频请上传MP4格式，大小不超过150M；office文件大小不要超过10M</p>
                   </template>
                 </Upload>
-                <!-- <el-upload :before-upload="beforeUpload"
-                           :on-remove="handleRemove"
-                           :on-error="uploadError"
-                           :before-remove="beforeRemove"
-                           :limit="1"
-                           :on-exceed="handleExceed"
-                           :action="this.api.fileupload"
-                           :file-list="uploadList"
-                           :headers="headers"
-                           :http-request="handleRequest"
-                           name="file">
-                  <el-button size="small"><img src="@/assets/img/upload.png"
-                         alt=""> 上传资源</el-button>
-                  <div slot="tip"
-                       class="el-upload__tip">视频请上传MP4格式，大小不超过150M；office文件大小不要超过10M</div>
-                </el-upload>
-                <el-progress v-if="showProgress"
-                             :stroke-width="3"
-                             :percentage="progressPercent"></el-progress> -->
               </el-form-item>
               <el-form-item label="小节名称">
                 <el-input placeholder="请输入小节名称"
@@ -216,24 +197,6 @@
                       @onSuccess="uploadSuccess">
                 <div slot="tip"></div>
               </Upload>
-
-              <!-- <el-upload :before-upload="beforeUpload"
-                         :on-remove="handleRemove"
-                         :on-error="uploadError"
-                         :before-remove="beforeRemove"
-                         :limit="1"
-                         :on-exceed="handleExceed"
-                         :action="this.api.fileupload"
-                         :file-list="uploadList"
-                         :headers="headers"
-                         :http-request="handleRequest"
-                         name="file">
-                <el-button size="small"><img src="@/assets/img/upload.png"
-                       alt=""> 上传资源</el-button>
-              </el-upload>
-              <el-progress v-if="showProgress"
-                           :stroke-width="3"
-                           :percentage="progressPercent"></el-progress> -->
             </div>
             <span slot="footer"
                   class="dialog-footer">
@@ -277,7 +240,7 @@
                    style="transform: scale(1) rotate(0deg);margin-top: -1px; max-height: 100%; max-width: 100%;">
             </div>
           </div>
-          <div v-show="iframeSrc"
+          <div v-show="iframeSrc || videoSrc"
                class="el-image-viewer__wrapper"
                :class="{active: iframeSrc}"
                style="z-index: 2000">
@@ -293,6 +256,16 @@
                       id="fileIframe"
                       :src="iframeSrc"
                       frameborder="0"></iframe>
+              <video v-if="videoSrc"
+                     class="video"
+                     width="1200"
+                     height="600"
+                     autoplay
+                     controls>
+                <source :src="videoSrc"
+                        type="video/mp4">
+                您的浏览器不支持 video 标签。
+              </video>
               <template v-if="showMask">
                 <div class="mask"
                      style="width: 200px;height: 30px;top: 53px;right: 320px"></div>
@@ -412,6 +385,7 @@ export default {
       fileUrl: "",
       originalFileName: "",
       fileType: "",
+      videoSrc: '',
       playAuth: "",
       player: null,
       previewImg: "",
@@ -548,6 +522,7 @@ export default {
     },
     uploadSuccess (file) {
       this.uploading = false
+      this.fileId = ''
       this.fileType = file.format
       this.fileUrl = file.url
       this.fileName = file.name
@@ -802,18 +777,18 @@ export default {
     },
     // 下载资源
     download (row) {
-      const { fileType } = row
+      const { fileType, fileId } = row
       // 下载ppt
       if (fileType === 'pptx') {
         this.downloadFile(row.name, row.fileUrl)
-      } else if (fileType === 'mp4') {
-        // 下载视频，先生成视频，再拿到视频地址去下载
-        this.$get(`${this.api.getPlayAuth}/${row.fileId}`).then(res => {
-          const player = new Aliplayer({
+      } else if (fileId) {
+        // 阿里云点播视频，先生成视频，再拿到视频地址去下载（现在已经去掉视频点播的方法，但是还需要兼容历史数据）
+        this.$get(`${this.api.getPlayAuth}/${fileId}`).then(res => {
+          new Aliplayer({
             id: "playerDownload",
             width: "100%",
             autoplay: false,
-            vid: row.fileId,
+            vid: fileId,
             playauth: res.data.playAuth,
             encryptType: 1 //当播放私有加密流时需要设置。
           }, player => {
@@ -826,22 +801,26 @@ export default {
     },
     preview (row) {
       if (this.transferType(row.fileType) == "视频") {
-        this.$get(`${this.api.getPlayAuth}/${row.fileId}`).then(res => {
-          this.playAuth = res.data.playAuth;
-          if (this.player) {
-            this.player.replayByVidAndPlayAuth(row.fileId, this.playAuth);
-          } else {
-            this.player = new Aliplayer({
-              id: "player",
-              width: "100%",
-              autoplay: false,
-              vid: row.fileId,
-              playauth: this.playAuth,
-              encryptType: 1 //当播放私有加密流时需要设置。
-            });
-          }
-        }).catch(res => {
-        });
+        // 阿里云视频点播
+        if (row.fileId) {
+          this.$get(`${this.api.getPlayAuth}/${row.fileId}`).then(res => {
+            this.playAuth = res.data.playAuth;
+            if (this.player) {
+              this.player.replayByVidAndPlayAuth(row.fileId, this.playAuth);
+            } else {
+              this.player = new Aliplayer({
+                id: "player",
+                width: "100%",
+                autoplay: false,
+                vid: row.fileId,
+                playauth: this.playAuth,
+                encryptType: 1 //当播放私有加密流时需要设置。
+              });
+            }
+          }).catch(res => { });
+        } else {
+          this.videoSrc = row.fileUrl
+        }
       } else if (this.transferType(row.fileType) == "图片") {
         this.previewImg = row.fileUrl;
       } else if (row.fileType == "pdf") {
@@ -984,6 +963,7 @@ export default {
     },
     closeIframe () {
       this.iframeSrc = "";
+      this.videoSrc = ''
       this.showMask = false;
       this.showMask1 = false;
       this.showMask2 = false;
diff --git a/src/views/match/list/index.vue b/src/views/match/list/index.vue
index a9930d9..b065f81 100644
--- a/src/views/match/list/index.vue
+++ b/src/views/match/list/index.vue
@@ -423,7 +423,8 @@ export default {
       })
       this.$post(this.api.editCompetitionContent, {
         competitionContents: data
-      }).then(res => {
+      }).then(async res => {
+        await this.$post(`${this.api.refreshPageNotification}?content=1`)
         util.successMsg('修改成功')
         this.modifyVisible = false
         this.getData()
diff --git a/src/views/theoreticalCourse/contentSettings/index.vue b/src/views/theoreticalCourse/contentSettings/index.vue
index 6f97f08..9ba2597 100644
--- a/src/views/theoreticalCourse/contentSettings/index.vue
+++ b/src/views/theoreticalCourse/contentSettings/index.vue
@@ -1,216 +1,335 @@
 <template>
-    <div>
-        <el-card shadow="hover" class="m-b-20">
-            <div class="flex-between">
-                <el-page-header @back="goBack" :content="'课程内容/' + (sorting ? '更改排序' : '内容设置')"></el-page-header>
+  <div>
+    <el-card shadow="hover"
+             class="m-b-20">
+      <div class="flex-between">
+        <el-page-header @back="goBack"
+                        :content="'课程内容/' + (sorting ? '更改排序' : '内容设置')"></el-page-header>
+      </div>
+    </el-card>
+    <!--内容设置-->
+    <el-card shadow="hover"
+             class="m-b-20">
+      <div class="page">
+        <div class="relative">
+          <div class="p-title">内容设置</div>
+          <div class="btns"
+               style="top: -10px">
+            <template v-if="!sorting">
+              <el-button type="primary"
+                         round
+                         @click="addChapter">添加章节</el-button>
+              <el-button type="primary"
+                         round
+                         @click="sort">编辑顺序</el-button>
+            </template>
+            <template v-else>
+              <el-button type="primary"
+                         round
+                         @click="move">批量移动</el-button>
+              <el-button type="primary"
+                         round
+                         @click="cancelSort">取消</el-button>
+              <el-button type="primary"
+                         round
+                         @click="saveSort">保存</el-button>
+            </template>
+          </div>
+        </div>
+        <el-divider></el-divider>
+        <div class="page-content">
+          <div class="m-b-20"
+               v-for="(chapter,index) in chapters"
+               :key="chapter.id">
+            <div class="flex j-between a-center m-b-10">
+              <div>{{ chapter.name }}</div>
+              <div>
+                <template v-if="!sorting">
+                  <el-button class="action-btn"
+                             type="primary"
+                             round
+                             @click="editChapter(chapter)">修改章节名称</el-button>
+                  <el-button class="action-btn"
+                             type="primary"
+                             round
+                             @click="addSection(chapter.id)">添加小节</el-button>
+                  <el-button class="action-btn"
+                             type="primary"
+                             round
+                             @click="delChapter(chapter.id)">删除</el-button>
+                </template>
+                <template v-else>
+                  <i class="el-icon-top sort-icon"
+                     :class="{disabled: index == 0}"
+                     style="margin-right: 5px"
+                     @click="sortChapter(chapter,'up',index == 0,index)"></i>
+                  <i class="el-icon-bottom sort-icon"
+                     :class="{disabled: index == chapters.length-1}"
+                     @click="sortChapter(chapter,'down',index == chapter.length-1,index)"></i>
+                </template>
+              </div>
             </div>
-        </el-card>
-        <!--内容设置-->
-        <el-card shadow="hover" class="m-b-20">
-            <div class="page">
-                <div class="relative">
-                    <div class="p-title">内容设置</div>
-                    <div class="btns" style="top: -10px">
-                        <template v-if="!sorting">
-                            <el-button type="primary" round @click="addChapter">添加章节</el-button>
-                            <el-button type="primary" round @click="sort">编辑顺序</el-button>
-                        </template>
-                        <template v-else>
-                            <el-button type="primary" round @click="move">批量移动</el-button>
-                            <el-button type="primary" round @click="cancelSort">取消</el-button>
-                            <el-button type="primary" round @click="saveSort">保存</el-button>
-                        </template>
-                    </div>
-                </div>
-                <el-divider></el-divider>
-                <div class="page-content">
-                    <div class="m-b-20" v-for="(chapter,index) in chapters" :key="chapter.id">
-                        <div class="flex j-between a-center m-b-10">
-                            <div>{{ chapter.name }}</div>
-                            <div>
-                                <template v-if="!sorting">
-                                    <el-button class="action-btn" type="primary" round @click="editChapter(chapter)">修改章节名称</el-button>
-                                    <el-button class="action-btn" type="primary" round @click="addSection(chapter.id)">添加小节</el-button>
-                                    <el-button class="action-btn" type="primary" round @click="delChapter(chapter.id)">删除</el-button>
-                                </template>
-                                <template v-else>
-                                    <i class="el-icon-top sort-icon" :class="{disabled: index == 0}" style="margin-right: 5px" @click="sortChapter(chapter,'up',index == 0,index)"></i>
-                                    <i class="el-icon-bottom sort-icon" :class="{disabled: index == chapters.length-1}" @click="sortChapter(chapter,'down',index == chapter.length-1,index)"></i>
-                                </template>
-                            </div>
-                        </div>
 
-                        <el-table :data="chapter.subsectionList" class="table" stripe header-align="center">
-                            <el-table-column v-if="sorting" width="55" align="center">
-                              <template slot-scope="scope">
-                                <el-checkbox v-model="scope.row.check"></el-checkbox>
-                              </template>
-                            </el-table-column>
-                            <el-table-column type="index" width="100" label="序号" align="center"></el-table-column>
-                            <el-table-column prop="name" label="资源名称" min-width="200">
-                            </el-table-column>
-                            <el-table-column prop="fileType" label="资源类型" min-width="120" align="center">
-                                <template slot-scope="scope">
-                                    {{ transferType(scope.row.fileType) }}
-                                </template>
-                            </el-table-column>
-                            <el-table-column prop="fileType" label="格式" min-width="120" align="center">
-                            </el-table-column>
-                            <el-table-column label="操作" align="center" width="300">
-                                <template slot-scope="scope">
-                                    <template v-if="!sorting">
-                                        <el-button type="text" @click="preview(scope.row)">查看</el-button>
-                                        <el-button type="text" @click="delSection(scope.row)">删除</el-button>
-                                        <el-button type="text" @click="editSectionName(scope.row,chapter.id)">修改小节名称</el-button>
-                                        <el-button type="text" @click="switchFile(scope.row,chapter.id)">更换文件</el-button>
-                                    </template>
-                                    <template v-else>
-                                        <i class="el-icon-top sort-icon" :class="{disabled: scope.$index == 0}" style="margin-right: 5px" @click="sortSection(index,'up',scope.$index == 0,scope.$index)"></i>
-                                        <i class="el-icon-bottom sort-icon" :class="{disabled: scope.$index == chapter.subsectionList.length-1}" @click="sortSection(index,'down',scope.$index == chapter.subsectionList.length-1,scope.$index)"></i>
-                                    </template>
-                                </template>
-                            </el-table-column>
-                        </el-table>
-                    </div>
+            <el-table :data="chapter.subsectionList"
+                      class="table"
+                      stripe
+                      header-align="center">
+              <el-table-column v-if="sorting"
+                               width="55"
+                               align="center">
+                <template slot-scope="scope">
+                  <el-checkbox v-model="scope.row.check"></el-checkbox>
+                </template>
+              </el-table-column>
+              <el-table-column type="index"
+                               width="100"
+                               label="序号"
+                               align="center"></el-table-column>
+              <el-table-column prop="name"
+                               label="资源名称"
+                               min-width="200">
+              </el-table-column>
+              <el-table-column prop="fileType"
+                               label="资源类型"
+                               min-width="120"
+                               align="center">
+                <template slot-scope="scope">
+                  {{ transferType(scope.row.fileType) }}
+                </template>
+              </el-table-column>
+              <el-table-column prop="fileType"
+                               label="格式"
+                               min-width="120"
+                               align="center">
+              </el-table-column>
+              <el-table-column label="操作"
+                               align="center"
+                               width="300">
+                <template slot-scope="scope">
+                  <template v-if="!sorting">
+                    <el-button type="text"
+                               @click="preview(scope.row)">查看</el-button>
+                    <el-button type="text"
+                               @click="delSection(scope.row)">删除</el-button>
+                    <el-button type="text"
+                               @click="editSectionName(scope.row,chapter.id)">修改小节名称</el-button>
+                    <el-button type="text"
+                               @click="switchFile(scope.row,chapter.id)">更换文件</el-button>
+                  </template>
+                  <template v-else>
+                    <i class="el-icon-top sort-icon"
+                       :class="{disabled: scope.$index == 0}"
+                       style="margin-right: 5px"
+                       @click="sortSection(index,'up',scope.$index == 0,scope.$index)"></i>
+                    <i class="el-icon-bottom sort-icon"
+                       :class="{disabled: scope.$index == chapter.subsectionList.length-1}"
+                       @click="sortSection(index,'down',scope.$index == chapter.subsectionList.length-1,scope.$index)"></i>
+                  </template>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
 
-                    <el-dialog :title="chapterId ? '编辑章节' : '新增章节'" :visible.sync="chapterVisible" width="540px" :close-on-click-modal="false">
-                        <el-form>
-                            <el-form-item>
-                                <el-input placeholder="请输入章节名称，便于对小节归类" v-model="chapterName" maxlength="50"></el-input>
-                            </el-form-item>
-                        </el-form>
-                        <span slot="footer" class="dialog-footer">
-                        <el-button @click="chapterVisible = false">取消</el-button>
-                        <el-button type="primary" @click="chapterSubmit">确定</el-button>
-                    </span>
-                    </el-dialog>
+          <el-dialog :title="chapterId ? '编辑章节' : '新增章节'"
+                     :visible.sync="chapterVisible"
+                     width="540px"
+                     :close-on-click-modal="false">
+            <el-form>
+              <el-form-item>
+                <el-input placeholder="请输入章节名称，便于对小节归类"
+                          v-model="chapterName"
+                          maxlength="50"></el-input>
+              </el-form-item>
+            </el-form>
+            <span slot="footer"
+                  class="dialog-footer">
+              <el-button @click="chapterVisible = false">取消</el-button>
+              <el-button type="primary"
+                         @click="chapterSubmit">确定</el-button>
+            </span>
+          </el-dialog>
 
-                    <el-dialog title="添加小节" :visible.sync="sectionVisible" width="540px" @close="closeSection" :close-on-click-modal="false">
-                        <el-form label-width="80px">
-                            <el-form-item label="资源添加">
-                                <el-upload
-                                    :before-upload="beforeUpload"
-                                    :on-remove="handleRemove"
-                                    :on-error="uploadError"
-                                    :on-success="uploadSuccess"
-                                    :before-remove="beforeRemove"
-                                    :limit="1"
-                                    :on-exceed="handleExceed"
-                                    :action="this.api.fileupload"
-                                    :file-list="uploadList"
-                                    :headers="headers"
-                                    :http-request="handleRequest"
-                                    name="file"
-                                >
-                                  <el-button size="small"><img src="@/assets/img/upload.png" alt=""> 上传资源</el-button>
-                                  <div slot="tip" class="el-upload__tip">视频请上传MP4格式</div>
-                                </el-upload>
-                                <el-progress v-if="showProgress" :stroke-width="3" :percentage="progressPercent"></el-progress>
-                            </el-form-item>
-                            <el-form-item label="小节名称">
-                                <el-input placeholder="请输入小节名称" v-model="sectionName" maxlength="50"></el-input>
-                            </el-form-item>
-                        </el-form>
-                        <span slot="footer" class="dialog-footer">
-                        <el-button @click="sectionVisible = false">取消</el-button>
-                        <el-button type="primary" @click="sectionSubmit">确定</el-button>
-                    </span>
-                    </el-dialog>
+          <el-dialog title="添加小节"
+                     :visible.sync="sectionVisible"
+                     width="540px"
+                     @close="closeSection"
+                     :close-on-click-modal="false">
+            <el-form label-width="80px">
+              <el-form-item label="资源添加">
+                <Upload :max-size="100000"
+                        @beforeUpload="beforeUpload"
+                        @onSuccess="uploadSuccess">
+                  <template slot="tip">
+                    <p>视频请上传MP4格式</p>
+                  </template>
+                </Upload>
+              </el-form-item>
+              <el-form-item label="小节名称">
+                <el-input placeholder="请输入小节名称"
+                          v-model="sectionName"
+                          maxlength="50"></el-input>
+              </el-form-item>
+            </el-form>
+            <span slot="footer"
+                  class="dialog-footer">
+              <el-button @click="sectionVisible = false">取消</el-button>
+              <el-button type="primary"
+                         @click="sectionSubmit">确定</el-button>
+            </span>
+          </el-dialog>
 
-                    <el-dialog title="更换文件" :visible.sync="switchVisible" width="540px" :close-on-click-modal="false" @close="closeSwitch">
-                        <div style="text-align: center">
-                            <el-upload
-                                :before-upload="beforeUpload"
-                                :on-remove="handleRemove"
-                                :on-error="uploadError"
-                                :on-success="uploadSuccess"
-                                :before-remove="beforeRemove"
-                                :limit="1"
-                                :on-exceed="handleExceed"
-                                :action="this.api.fileupload"
-                                :file-list="uploadList"
-                                :headers="headers"
-                                :http-request="handleRequest"
-                                name="file"
-                            >
-                                <el-button size="small"><img src="@/assets/img/upload.png" alt=""> 上传资源</el-button>
-                            </el-upload>
-                            <el-progress v-if="showProgress" :stroke-width="3" :percentage="progressPercent"></el-progress>
-                        </div>
-                        <span slot="footer" class="dialog-footer">
-                        <el-button @click="switchVisible = false">取消</el-button>
-                        <el-button type="primary" @click="switchSubmit">确定</el-button>
-                    </span>
-                    </el-dialog>
-
-                    <el-dialog title="修改小节名称" :visible.sync="sectionNameVisible" width="540px" :close-on-click-modal="false">
-                        <el-form>
-                            <el-form-item>
-                                <el-input placeholder="请输入小节名称" v-model="sectionName" maxlength="50"></el-input>
-                            </el-form-item>
-                        </el-form>
-                        <span slot="footer" class="dialog-footer">
-                        <el-button @click="sectionNameVisible = false">取消</el-button>
-                        <el-button type="primary" @click="sectionNameSubmit">确定</el-button>
-                    </span>
-                    </el-dialog>
+          <el-dialog title="更换文件"
+                     :visible.sync="switchVisible"
+                     width="540px"
+                     :close-on-click-modal="false"
+                     @close="closeSwitch">
+            <div style="text-align: center">
+              <Upload :max-size="100000"
+                      @beforeUpload="beforeUpload"
+                      @onSuccess="uploadSuccess">
+                <template slot="tip">
+                  <p>视频请上传MP4格式</p>
+                </template>
+              </Upload>
+            </div>
+            <span slot="footer"
+                  class="dialog-footer">
+              <el-button @click="switchVisible = false">取消</el-button>
+              <el-button type="primary"
+                         @click="switchSubmit">确定</el-button>
+            </span>
+          </el-dialog>
 
-                    <div v-show="previewImg" class="el-image-viewer__wrapper" :class="{active: previewImg}" style="z-index: 2000">
-                        <div class="el-image-viewer__mask"></div>
-                        <span class="el-image-viewer__btn el-image-viewer__close" @click="previewImg = ''"><i class="el-icon-circle-close" style="color: #fff"></i></span>
-                        <div class="el-image-viewer__canvas">
-                            <img :src="previewImg" class="el-image-viewer__img" style="transform: scale(1) rotate(0deg);margin-top: -1px; max-height: 100%; max-width: 100%;">
-                        </div>
-                    </div>
-                    <div v-show="iframeSrc" class="el-image-viewer__wrapper" :class="{active: iframeSrc}" style="z-index: 2000">
-                        <div class="el-image-viewer__mask"></div>
-                        <span class="el-image-viewer__btn el-image-viewer__close" :class="{'doc-close': isWord}" :style="{top: isWord ? '50px' : '5px'}" @click="closeIframe"><i class="el-icon-circle-close" style="color: #fff"></i></span>
-                        <div class="el-image-viewer__canvas">
-                            <iframe v-if="iframeSrc" class="fileIframe" id="fileIframe" :src="iframeSrc" frameborder="0"></iframe>
-                            <template v-if="showMask">
-                                <div class="mask" style="width: 200px;height: 30px;top: 53px;right: 320px"></div>
-                                <div class="mask" style="width: 175px;height: 30px;top: 53px;right: 5px"></div>
-                            </template>
-                            <template v-if="showMask1">
-                                <div class="word-mask1" style="width: 200px;height: 50px;"></div>
-                                <div class="word-mask" style="height: 40px;top: 48px;"></div>
-                                <div class="word-mask2" style="top: 55px;left: 28%;width: 44%;height: calc(100% - 80px);"></div>
-                            </template>
-                            <template v-if="showMask2 && iframeSrc">
-                                <div class="excel-mask1" style="height: 48px;"></div>
-                            </template>
-                        </div>
-                    </div>
-                    <div v-show="playAuth" class="el-image-viewer__wrapper" :class="{active: playAuth}" style="z-index: 2000">
-                        <div class="el-image-viewer__mask"></div>
-                        <span class="el-image-viewer__btn el-image-viewer__close" @click="closePlayer"><i class="el-icon-circle-close" style="color: #fff"></i></span>
-                        <div class="player" id="player"></div>
-                    </div>
+          <el-dialog title="修改小节名称"
+                     :visible.sync="sectionNameVisible"
+                     width="540px"
+                     :close-on-click-modal="false">
+            <el-form>
+              <el-form-item>
+                <el-input placeholder="请输入小节名称"
+                          v-model="sectionName"
+                          maxlength="50"></el-input>
+              </el-form-item>
+            </el-form>
+            <span slot="footer"
+                  class="dialog-footer">
+              <el-button @click="sectionNameVisible = false">取消</el-button>
+              <el-button type="primary"
+                         @click="sectionNameSubmit">确定</el-button>
+            </span>
+          </el-dialog>
 
-                    <pdf :visible.sync="pdfVisible" :src.sync="pdfSrc"></pdf>
-                </div>
+          <div v-show="previewImg"
+               class="el-image-viewer__wrapper"
+               :class="{active: previewImg}"
+               style="z-index: 2000">
+            <div class="el-image-viewer__mask"></div>
+            <span class="el-image-viewer__btn el-image-viewer__close"
+                  @click="previewImg = ''"><i class="el-icon-circle-close"
+                 style="color: #fff"></i></span>
+            <div class="el-image-viewer__canvas">
+              <img :src="previewImg"
+                   class="el-image-viewer__img"
+                   style="transform: scale(1) rotate(0deg);margin-top: -1px; max-height: 100%; max-width: 100%;">
             </div>
-        </el-card>
+          </div>
+          <div v-show="iframeSrc || videoSrc"
+               class="el-image-viewer__wrapper"
+               :class="{active: iframeSrc}"
+               style="z-index: 2000">
+            <div class="el-image-viewer__mask"></div>
+            <span class="el-image-viewer__btn el-image-viewer__close"
+                  :class="{'doc-close': isWord}"
+                  :style="{top: isWord ? '50px' : '5px'}"
+                  @click="closeIframe"><i class="el-icon-circle-close"
+                 style="color: #fff"></i></span>
+            <div class="el-image-viewer__canvas">
+              <iframe v-if="iframeSrc"
+                      class="fileIframe"
+                      id="fileIframe"
+                      :src="iframeSrc"
+                      frameborder="0"></iframe>
+              <video v-if="videoSrc"
+                     class="video"
+                     width="1200"
+                     height="600"
+                     autoplay
+                     controls>
+                <source :src="videoSrc"
+                        type="video/mp4">
+                您的浏览器不支持 video 标签。
+              </video>
+              <template v-if="showMask">
+                <div class="mask"
+                     style="width: 200px;height: 30px;top: 53px;right: 320px"></div>
+                <div class="mask"
+                     style="width: 175px;height: 30px;top: 53px;right: 5px"></div>
+              </template>
+              <template v-if="showMask1">
+                <div class="word-mask1"
+                     style="width: 200px;height: 50px;"></div>
+                <div class="word-mask"
+                     style="height: 40px;top: 48px;"></div>
+                <div class="word-mask2"
+                     style="top: 55px;left: 28%;width: 44%;height: calc(100% - 80px);"></div>
+              </template>
+              <template v-if="showMask2 && iframeSrc">
+                <div class="excel-mask1"
+                     style="height: 48px;"></div>
+              </template>
+            </div>
+          </div>
+          <div v-show="playAuth"
+               class="el-image-viewer__wrapper"
+               :class="{active: playAuth}"
+               style="z-index: 2000">
+            <div class="el-image-viewer__mask"></div>
+            <span class="el-image-viewer__btn el-image-viewer__close"
+                  @click="closePlayer"><i class="el-icon-circle-close"
+                 style="color: #fff"></i></span>
+            <div class="player"
+                 id="player"></div>
+          </div>
+
+          <pdf :visible.sync="pdfVisible"
+               :src.sync="pdfSrc"></pdf>
+        </div>
+      </div>
+    </el-card>
 
-        <el-dialog title="资源移动" :visible.sync="moveVisible" :close-on-click-modal="false" width="330px">
-          <el-form>
-            <el-form-item label="目标章节">
-              <el-select v-model="moveForm.id" placeholder="请选择目标章节" @change="chapterChange">
-                <el-option v-for="(item, i) in chapters" :key="i" :label="item.name" :value="item.id"></el-option>
-              </el-select>
-            </el-form-item>
-            <el-form-item label="目标排序">
-              <el-select v-model="moveForm.sort" placeholder="请选择目标排序">
-                <el-option v-for="(item, i) in sortList" :key="i" :label="item.name" :value="item.id"></el-option>
-              </el-select>
-            </el-form-item>
-          </el-form>
-          <span slot="footer" class="dialog-footer">
-            <el-button @click="moveVisible = false">取消</el-button>
-            <el-button type="primary" @click="moveConfirm">确定</el-button>
-          </span>
-        </el-dialog>
-    </div>
+    <el-dialog title="资源移动"
+               :visible.sync="moveVisible"
+               :close-on-click-modal="false"
+               width="330px">
+      <el-form>
+        <el-form-item label="目标章节">
+          <el-select v-model="moveForm.id"
+                     placeholder="请选择目标章节"
+                     @change="chapterChange">
+            <el-option v-for="(item, i) in chapters"
+                       :key="i"
+                       :label="item.name"
+                       :value="item.id"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="目标排序">
+          <el-select v-model="moveForm.sort"
+                     placeholder="请选择目标排序">
+            <el-option v-for="(item, i) in sortList"
+                       :key="i"
+                       :label="item.name"
+                       :value="item.id"></el-option>
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <span slot="footer"
+            class="dialog-footer">
+        <el-button @click="moveVisible = false">取消</el-button>
+        <el-button type="primary"
+                   @click="moveConfirm">确定</el-button>
+      </span>
+    </el-dialog>
+  </div>
 </template>
 
 <script>
@@ -218,619 +337,604 @@ import util from "@/libs/util";
 import Setting from "@/setting";
 import { Loading } from "element-ui";
 import pdf from "@/components/pdf";
+import Upload from '@/components/upload';
 import axios from 'axios'
 
 export default {
-    name: "contentSettings",
-    data() {
-        return {
-            headers: {
-                token: sessionStorage.getItem("token")
-            },
-            id: "",
-            originChapters: [],
-            chapters: [],
-            sorting: false,
-            uploading: false,
-            uploadList: [],
-            chapterVisible: false,
-            chapterId: "",
-            chapterName: "",
-            sectionVisible: false,
-            sectionName: "",
-            sectionId: "",
-            switchVisible: false,
-            sectionNameVisible: false,
-            fileId: "",
-            fileName: "",
-            fileUrl: "",
-            originalFileName: "",
-            fileType: "",
-            playAuth: "",
-            player: null,
-            previewImg: "",
-            iframeSrc: "",
-            curFile: {},
-            isAddSection: false,
-            isWord: false,
-            isPPT: false,
-            isExcel: false,
-            showMask: false,
-            showMask1: false,
-            showMask2: false,
-            loadIns: null,
-            pdfVisible: false,
-            pdfSrc: "",
-            showProgress: false,
-            progressPercent: 0,
-            previewing: false,
-            moveVisible: false,
-            checkList: [],
-            sortList: [
-              {
-                id: 'bottom',
-                name: '置末'
-              },
-              {
-                id: 'top',
-                name: '置顶'
-              }
-            ],
-            moveForm: {
-              id: '',
-              sort: 'bottom'
-            },
-            moved: false // 是否移动过
-        };
-    },
-    components: { pdf },
-    mounted() {
-        this.insertScript();
-        this.id = this.$route.query.id;
-        this.id && this.getData();
-        // 处理预览资源后返回弹框不会消失的问题
-        if (window.history && window.history.pushState) {
-            history.pushState(null, null, document.URL);
-            window.addEventListener("popstate", this.goBack, false);
+  name: "contentSettings",
+  data () {
+    return {
+      headers: {
+        token: sessionStorage.getItem("token")
+      },
+      id: "",
+      originChapters: [],
+      chapters: [],
+      sorting: false,
+      uploading: false,
+      uploadList: [],
+      chapterVisible: false,
+      chapterId: "",
+      chapterName: "",
+      sectionVisible: false,
+      sectionName: "",
+      sectionId: "",
+      switchVisible: false,
+      sectionNameVisible: false,
+      fileId: "",
+      fileName: "",
+      fileUrl: "",
+      originalFileName: "",
+      fileType: "",
+      videoSrc: '',
+      playAuth: "",
+      player: null,
+      previewImg: "",
+      iframeSrc: "",
+      curFile: {},
+      isAddSection: false,
+      isWord: false,
+      isPPT: false,
+      isExcel: false,
+      showMask: false,
+      showMask1: false,
+      showMask2: false,
+      loadIns: null,
+      pdfVisible: false,
+      pdfSrc: "",
+      showProgress: false,
+      progressPercent: 0,
+      previewing: false,
+      moveVisible: false,
+      checkList: [],
+      sortList: [
+        {
+          id: 'bottom',
+          name: '置末'
+        },
+        {
+          id: 'top',
+          name: '置顶'
         }
-    },
-    destroyed() {
-        window.removeEventListener("popstate", this.goBack, false);
-    },
-    methods: {
-        getData() {
-            this.$get(`${this.api.queryChaptersTheoretical}?courseId=${this.id}`)
-                .then(res => {
-                    this.chapters = res.chapterList;
-                })
-                .catch(err => {
+      ],
+      moveForm: {
+        id: '',
+        sort: 'bottom'
+      },
+      moved: false // 是否移动过
+    };
+  },
+  components: { pdf, Upload },
+  mounted () {
+    this.insertScript();
+    this.id = this.$route.query.id;
+    this.id && this.getData();
+    // 处理预览资源后返回弹框不会消失的问题
+    if (window.history && window.history.pushState) {
+      history.pushState(null, null, document.URL);
+      window.addEventListener("popstate", this.goBack, false);
+    }
+  },
+  destroyed () {
+    window.removeEventListener("popstate", this.goBack, false);
+  },
+  methods: {
+    getData () {
+      this.$get(`${this.api.queryChaptersTheoretical}?courseId=${this.id}`)
+        .then(res => {
+          this.chapters = res.chapterList;
+        })
+        .catch(err => {
 
-                });
-        },
-        goBack() {
-            // 如果是预览则关闭预览
-          if (this.previewing) {
-            this.closeIframe();
+        });
+    },
+    goBack () {
+      // 如果是预览则关闭预览
+      if (this.previewing) {
+        this.closeIframe();
+      } else {
+        // 排序中
+        if (this.sorting) {
+          // 已经移动了顺序
+          if (this.moved) {
+            this.$confirm(`编辑的内容未保存，是否保存？`, '提示', {
+              type: 'warning'
+            }).then(() => {
+              this.saveSort()
+              this.moved = false
+            }).catch(() => {
+              this.sorting = false
+              this.chapters = JSON.parse(JSON.stringify(this.originChapters))
+            })
           } else {
-            // 排序中
-            if (this.sorting) {
-              // 已经移动了顺序
-              if (this.moved) {
-                this.$confirm(`编辑的内容未保存，是否保存？`, '提示', {
-                  type: 'warning'
-                }).then(() => {
-                  this.saveSort()
-                  this.moved = false
-                }).catch(() => {
-                  this.sorting = false
-                  this.chapters = JSON.parse(JSON.stringify(this.originChapters))
-                })
-              } else {
-                this.sorting = false
-              }
-            } else {
-              this.$router.back()
-            }
+            this.sorting = false
           }
-        },
-        iframeOnload() {
-            document.querySelector("#fileIframe").onload = e => {
-                if (this.isPPT) {
-                    this.showMask = true;
-                } else {
-                    this.showMask = false;
-                }
-                if (this.isWord) {
-                    this.showMask1 = true;
-                } else {
-                    this.showMask1 = false;
-                }
-                if (this.isExcel) {
-                    this.showMask2 = true;
-                } else {
-                    this.showMask2 = false;
-                }
-                this.loadIns.close();
-            };
-        },
-        insertScript() {
-            const linkTag = document.createElement("link");
-            linkTag.rel = "stylesheet";
-            linkTag.href = "https://g.alicdn.com/de/prismplayer/2.8.2/skins/default/aliplayer-min.css";
-            document.body.appendChild(linkTag);
+        } else {
+          this.$router.back()
+        }
+      }
+    },
+    iframeOnload () {
+      document.querySelector("#fileIframe").onload = e => {
+        if (this.isPPT) {
+          this.showMask = true;
+        } else {
+          this.showMask = false;
+        }
+        if (this.isWord) {
+          this.showMask1 = true;
+        } else {
+          this.showMask1 = false;
+        }
+        if (this.isExcel) {
+          this.showMask2 = true;
+        } else {
+          this.showMask2 = false;
+        }
+        this.loadIns.close();
+      };
+    },
+    insertScript () {
+      const linkTag = document.createElement("link");
+      linkTag.rel = "stylesheet";
+      linkTag.href = "https://g.alicdn.com/de/prismplayer/2.8.2/skins/default/aliplayer-min.css";
+      document.body.appendChild(linkTag);
 
-            const scriptTag = document.createElement("script");
-            scriptTag.type = "text/javascript";
-            scriptTag.src = "https://g.alicdn.com/de/prismplayer/2.8.2/aliplayer-min.js";
-            document.body.appendChild(scriptTag);
-        },
-        // 上传文件
-        beforeUpload(file) {
-            // let type = this.transferType(file.name.substring(file.name.lastIndexOf(".") + 1));
-            // if (type != "视频" && type != "图片" && type != "pdf" && (file.size / 1024 / 1024) > 10) {
-            //     util.errorMsg("请上传10M以内的文件");
-            //     return false;
-            // }
-            // if (type == "视频" && (file.size / 1024 / 1024) > 30) {
-            //     util.errorMsg("请上传30M以内的视频");
-            //     return false;
-            // }
-            this.uploading = true;
-            this.originalFileName = file.name;
-            if (this.isAddSection) this.sectionName = file.name.substring(0, file.name.lastIndexOf("."));
-            this.fileType = file.name.substring(file.name.lastIndexOf(".") + 1);
-            this.showProgress = true
-        },
-        handleExceed(files, fileList) {
-            util.warningMsg(
-                `当前限制选择 1 个文件，如需更换，请删除上一个文件再重新选择！`
-            );
+      const scriptTag = document.createElement("script");
+      scriptTag.type = "text/javascript";
+      scriptTag.src = "https://g.alicdn.com/de/prismplayer/2.8.2/aliplayer-min.js";
+      document.body.appendChild(scriptTag);
+    },
+    // 上传文件
+    beforeUpload (file) {
+      this.uploading = true;
+      this.originalFileName = file.name;
+      if (this.isAddSection) this.sectionName = file.name.substring(0, file.name.lastIndexOf("."));
+      this.fileType = file.name.substring(file.name.lastIndexOf(".") + 1);
+      this.showProgress = true
+    },
+    handleExceed (files, fileList) {
+      util.warningMsg(
+        `当前限制选择 1 个文件，如需更换，请删除上一个文件再重新选择！`
+      );
+    },
+    // 自定义上传
+    handleRequest (data) {
+      const param = new FormData()
+      param.append('file', data.file)
+      const config = {
+        timeout: 10000000000,
+        headers: {
+          'Accept': '*/*',
+          'Content-Type': 'multipart/form-data',
+          token: sessionStorage.getItem("token")
         },
-        // 自定义上传
-        handleRequest(data) {
-          const param = new FormData()
-          param.append('file', data.file)
-          const config = {
-            timeout: 10000000000,
-            headers: {
-              'Accept': '*/*',
-              'Content-Type': 'multipart/form-data',
-              token: sessionStorage.getItem("token")
-            },
-            // 获取上传进度，自带的组件上传进度不准确
-            onUploadProgress: progressEvent => {
-              const per = Number((progressEvent.loaded / progressEvent.total * 100).toFixed(2))
-              console.log("🚀 ~ file: contentSettings.vue ~ line 329 ~ handleRequest ~ per", per, this.progressPercent)
-              if (this.progressPercent <= 80) this.progressPercent = (per > 80) ? (Math.random() * 10 + 80).toFixed(2) : per
-            }
+        // 获取上传进度，自带的组件上传进度不准确
+        onUploadProgress: progressEvent => {
+          const per = Number((progressEvent.loaded / progressEvent.total * 100).toFixed(2))
+          console.log("🚀 ~ file: contentSettings.vue ~ line 329 ~ handleRequest ~ per", per, this.progressPercent)
+          if (this.progressPercent <= 80) this.progressPercent = (per > 80) ? (Math.random() * 10 + 80).toFixed(2) : per
+        }
+      }
+      axios.post(this.api.fileupload, param, config).then(res => {
+        this.progressPercent = 100
+        this.showProgress = false
+        const { fileId, fileType, fileUrl, ossFileName } = res.data.data.filesResult
+        this.uploading = false
+        this.fileId = fileId
+        this.fileType = fileType
+        this.fileUrl = fileUrl
+        this.fileName = ossFileName
+      })
+    },
+    uploadSuccess (file) {
+      this.uploading = false;
+      this.fileId = ''
+      this.fileType = file.format;
+      this.fileUrl = file.url;
+      this.fileName = file.name;
+    },
+    uploadError (err, file, fileList) {
+      this.$message({
+        message: "上传出错，请重试！",
+        type: "error",
+        center: true
+      });
+    },
+    beforeRemove (file, fileList) {
+      if ((file.size / 1024 / 1024) < 10) {
+        return this.$confirm(`确定移除 ${file.name}？`);
+      }
+    },
+    handleRemove (file, fileList) {
+      this.uploadList = fileList;
+    },
+    uploadSure () {
+      this.importVisible = false;
+      this.pageNo = 1;
+      this.staffGradeId = "";
+      this.keyword = "";
+      this.getTeacher();
+    },
+    goback () {
+      this.$router.push("course");
+    },
+    transferType (ext) {
+      const suf = ext.toLowerCase()
+      if ("jpg,jpeg,png,gif,svg,psd".includes(suf)) return "图片";
+      if ("mp4,3gp,mov,m4v,avi,dat,mkv,flv,vob,rmvb,rm,qlv".includes(suf)) return "视频";
+      return suf;
+    },
+    addChapter () {
+      this.chapterName = "";
+      this.chapterId = "";
+      this.chapterVisible = true;
+    },
+    sort () {
+      this.originChapters = JSON.parse(JSON.stringify(this.chapters))
+      this.sorting = true;
+    },
+    // 批量移动
+    move () {
+      const list = this.chapters
+      const checkList = []
+      list.map(e => {
+        e.subsectionList.map(n => {
+          n.check && checkList.push(n)
+        })
+      })
+      this.checkList = checkList
+      if (checkList.length) {
+        this.moveForm = {
+          id: '',
+          sort: 'bottom'
+        }
+        this.sortList = [
+          {
+            id: 'bottom',
+            name: '置末'
+          },
+          {
+            id: 'top',
+            name: '置顶'
           }
-          axios.post(this.api.fileupload, param, config).then(res => {
-            this.progressPercent = 100
-            this.showProgress = false
-            const { fileId, fileType, fileUrl, ossFileName } = res.data.data.filesResult
-            this.uploading = false
-            this.fileId = fileId
-            this.fileType = fileType
-            this.fileUrl = fileUrl
-            this.fileName = ossFileName
-          })
-        },
-        uploadSuccess(res, file, fileList) {
-            this.uploading = false;
-            this.fileId = res.data.filesResult.fileId;
-            this.fileType = res.data.filesResult.fileType;
-            this.fileUrl = res.data.filesResult.fileUrl;
-            this.fileName = res.data.filesResult.ossFileName;
-        },
-        uploadError(err, file, fileList) {
-            this.$message({
-                message: "上传出错，请重试！",
-                type: "error",
-                center: true
-            });
-        },
-        beforeRemove(file, fileList) {
-            if ((file.size / 1024 / 1024) < 10) {
-                return this.$confirm(`确定移除 ${file.name}？`);
-            }
-        },
-        handleRemove(file, fileList) {
-            this.uploadList = fileList;
-        },
-        uploadSure() {
-            this.importVisible = false;
-            this.pageNo = 1;
-            this.staffGradeId = "";
-            this.keyword = "";
-            this.getTeacher();
-        },
-        goback() {
-            this.$router.push("course");
-        },
-        transferType(ext) {
-            const suf = ext.toLowerCase()
-            if ("jpg,jpeg,png,gif,svg,psd".includes(suf)) return "图片";
-            if ("mp4,3gp,mov,m4v,avi,dat,mkv,flv,vob,rmvb,rm,qlv".includes(suf)) return "视频";
-            return suf;
-        },
-        addChapter() {
-            this.chapterName = "";
-            this.chapterId = "";
-            this.chapterVisible = true;
-        },
-        sort() {
-          this.originChapters = JSON.parse(JSON.stringify(this.chapters))
-          this.sorting = true;
+        ]
+        this.moveVisible = true
+      } else {
+        this.$message.warning('请选择小节！')
+      }
+    },
+    // 目标章节选择回调
+    chapterChange (id) {
+      const list = []
+      // 获取多少个小节
+      this.chapters.find(e => e.id === id).subsectionList.map((e, i) => {
+        list.push({
+          id: i,
+          name: i + 1
+        })
+      })
+      // 置末和置顶写死
+      this.sortList = [
+        {
+          id: 'bottom',
+          name: '置末'
         },
-        // 批量移动
-        move() {
-          const list = this.chapters
-          const checkList = []
-          list.map(e => {
-            e.subsectionList.map(n => {
-              n.check && checkList.push(n)
-            })
-          })
-          this.checkList = checkList
-          if (checkList.length) {
-            this.moveForm = {
-              id: '',
-              sort: 'bottom'
-            }
-            this.sortList = [
-              {
-                id: 'bottom',
-                name: '置末'
-              },
-              {
-                id: 'top',
-                name: '置顶'
-              }
-            ]
-            this.moveVisible = true
-          } else {
-            this.$message.warning('请选择小节！')
+        ...list,
+        {
+          id: 'top',
+          name: '置顶'
+        }
+      ]
+    },
+    // 资源移动校验
+    moveConfirm () {
+      let { id, sort } = this.moveForm
+      if (!id) return this.$message.warning('请选择目标章节')
+      if (sort === '') return this.$message.warning('请选择目标排序')
+      if (typeof sort === 'string') sort = sort === 'top' ? 0 : this.sortList.length - 2 // 置顶和置末直接给排序
+      this.moveVisible = false
+      const list = this.checkList
+      list.map(e => e.check = false)
+      const ids = list.map(e => e.id)
+      const { chapters } = this
+      chapters.map(e => {
+        e.children = []
+        e.subsectionList.map(n => {
+          if (!ids.includes(n.id)) {
+            e.children.push(n)
           }
-        },
-        // 目标章节选择回调
-        chapterChange(id) {
-          const list = []
-          // 获取多少个小节
-          this.chapters.find(e => e.id === id).subsectionList.map((e, i) => {
-            list.push({
-              id: i,
-              name: i+1
-            })
-          })
-          // 置末和置顶写死
-          this.sortList = [
-            {
-              id: 'bottom',
-              name: '置末'
-            },
-            ...list,
-            {
-              id: 'top',
-              name: '置顶'
-            }
-          ]
-        },
-        // 资源移动校验
-        moveConfirm() {
-          let { id, sort } = this.moveForm
-          if (!id) return this.$message.warning('请选择目标章节')
-          if (sort === '') return this.$message.warning('请选择目标排序')
-          if (typeof sort === 'string') sort = sort === 'top' ? 0 : this.sortList.length - 2 // 置顶和置末直接给排序
-          this.moveVisible = false
-          const list = this.checkList
-          list.map(e => e.check = false)
-          const ids = list.map(e => e.id)
-          const { chapters } = this
-          chapters.map(e => {
-            e.children = []
-            e.subsectionList.map(n => {
-              if (!ids.includes(n.id)) {
-                e.children.push(n)
-              }
-            })
-            e.subsectionList = e.children
-            delete e.children
-            if (e.id === id) e.subsectionList.splice(sort, 0, ...list)
-          })
-          this.moved = true
-        },
-        cancelSort() {
-          this.chapters = JSON.parse(JSON.stringify(this.originChapters))
-          this.sorting = false;
-        },
-        saveSort() {
-            this.chapters.forEach((n, k) => {
-                n.sort = k + 1;
-                n.subsectionList.forEach((j, i) => {
-                    j.sort = i + 1
-                    j.chapterId = n.id
-                });
-            });
-            let data = {
-                chapterVOList: this.chapters
-            };
-            this.$post(this.api.reorderTheoretical, data).then(res => {
-                this.sorting = false;
-            }).catch(res => {
-            });
-        },
-        editChapter(item) {
-            this.chapterId = item.id;
-            this.chapterName = item.name;
-            this.chapterVisible = true;
-        },
-        delChapter(id) {
-            this.$confirm("此删除操作不可逆，是否确认删除选中项？", "提示", {
-                type: "warning"
-            })
-                .then(() => {
-                    this.$del(`${this.api.deleteChapterTheoretical}?chapterId=${id}`).then(res => {
-                        util.successMsg("删除成功");
-                        this.getData();
-                    }).catch(res => {
-                    });
-                })
-                .catch(() => {
-                });
-        },
-        closeSection() {
-            this.isAddSection = false;
-        },
-        addSection(id) {
-            this.chapterId = id;
-            this.sectionName = "";
-            this.fileUrl = "";
-            this.uploadList = [];
-            this.sectionId = "";
-            this.isAddSection = true;
-            this.sectionVisible = true;
-        },
-        chapterSubmit() {
-            if (!this.chapterName) return util.warningMsg("请填写章节名称");
-            let data = {
-                courseId: this.id,
-                name: this.chapterName
-            };
-            if (this.chapterId) {
-                data.id = this.chapterId;
-                this.$put(this.api.editChapterTheoretical, data).then(res => {
-                    util.successMsg("修改成功");
-                    this.chapterVisible = false;
-                    this.getData();
-                })
-                    .catch(err => {
-                    });
-            } else {
-                this.$post(this.api.addChapterTheoretical, data).then(res => {
-                    util.successMsg("添加成功");
-                    this.chapterVisible = false;
-                    this.getData();
-                })
-                    .catch(err => {
-                    });
-            }
-        },
-        sectionSubmit() {
-            if (!this.sectionName) return util.warningMsg("请填写小节名称");
-            if (this.uploading) return util.warningMsg("资源正在上传中，请稍候");
-            if (!this.fileUrl && !this.fileId) return util.warningMsg("请上传资源");
-            let data = {
-                id: this.sectionId,
-                courseId: this.id,
-                chapterId: this.chapterId,
-                name: this.sectionName,
-                fileId: this.fileId,
-                fileUrl: this.fileUrl,
-                fileName: this.fileName,
-                fileType: this.fileType,
-                originalFileName: this.originalFileName
-            };
-            this.$post(this.api.addSubsectionTheoretical, data).then(res => {
-                util.successMsg("添加成功");
-                this.sectionVisible = false;
-                this.getData();
-            })
-                .catch(err => {
-                });
-        },
-        closeSwitch() {
-            this.fileId = "";
-            this.fileName = "";
-            this.fileType = "";
-            this.fileUrl = "";
-            this.sectionId = "";
-        },
-        preview(row) {
-            if (this.transferType(row.fileType) == "视频") {
-                this.$get(`${this.api.getPlayAuth}/${row.fileId}`).then(res => {
-                    this.playAuth = res.data.playAuth;
-                    if (this.player) {
-                        this.player.replayByVidAndPlayAuth(row.fileId, this.playAuth);
-                    } else {
-                        this.player = new Aliplayer({
-                            id: "player",
-                            width: "100%",
-                            autoplay: false,
-                            vid: row.fileId,
-                            playauth: this.playAuth,
-                            encryptType: 1 //当播放私有加密流时需要设置。
-                        });
-                    }
-                }).catch(res => {
-                });
-            } else if (this.transferType(row.fileType) == "图片") {
-                this.previewImg = row.fileUrl;
-            } else if (row.fileType == "pdf") {
-                this.pdfSrc = row.fileUrl;
-                this.pdfVisible = true;
-            } else {
-                this.$get(`${this.api.getSubsectionTheoretical}?subsectionId=${row.id}`).then(res => {
-                    this.previewing = true;
-                    this.loadIns = Loading.service();
-                    this.$route.fullPath.includes("#file") || history.pushState({ file: true }, "文件预览", "#" + this.$route.fullPath + "#file");
-                    if (row.fileType == "pptx") {
-                        this.isPPT = true;
-                        this.isWord = false;
-                        this.isExcel = false;
-                    } else if (row.fileType == "doc" || row.fileType == "docx") {
-                        this.isPPT = false;
-                        this.isWord = true;
-                        this.isExcel = false;
-                    } else if (row.fileType == "xls" || row.fileType == "xlsx") {
-                        this.isExcel = true;
-                        this.isPPT = false;
-                        this.isWord = false;
-                    } else {
-                        this.isPPT = false;
-                        this.isWord = false;
-                        this.isExcel = false;
-                    }
-                    this.iframeSrc = res.previewUrl;
-                    this.$nextTick(() => {
-                        this.iframeOnload();
-                    });
-                })
-                    .catch(err => {
-                    });
-            }
-        },
-        editSectionName(row, chapterId) {
-            this.chapterId = chapterId;
-            this.sectionId = row.id;
-            this.sectionName = row.name;
-            this.sectionNameVisible = true;
-        },
-        switchFile(row, chapterId, sectionId) {
-            this.uploadList = [];
-            this.curFile = {
-                fileId: row.fileId,
-                fileName: row.fileName,
-                fileType: row.fileType,
-                fileUrl: row.fileUrl
-            };
-            this.chapterId = chapterId;
-            this.sectionId = row.id;
-            this.sectionName = row.sectionName;
-
-            this.switchVisible = true;
-        },
-        switchSubmitFile() {
-            let data = {
-                id: this.sectionId,
-                courseId: this.id,
-                chapterId: this.chapterId,
-                name: this.sectionName,
-                fileId: this.fileId,
-                fileName: this.fileName,
-                fileType: this.fileType,
-                fileUrl: this.fileUrl,
-                originalFileName: this.originalFileName
-            };
-            this.$put(this.api.editSubsectionTheoretical, data).then(res => {
-                util.successMsg("更换成功");
-                this.switchVisible = false;
-                this.getData();
-            })
-                .catch(err => {
-                });
-        },
-        switchSubmit() {
-            if (this.uploading) return util.warningMsg("资源正在上传中，请稍候");
-            if (!this.fileUrl && !this.fileId) return util.warningMsg("请上传资源");
-            if (this.transferType(this.curFile.fileType) == "视频") {
-                let data = {
-                    videoIdList: [this.sectionId]
-                };
-                this.$del(`${this.api.removeVideo}/${this.curFile.fileId}`).then(res => {
-                    this.switchSubmitFile();
-                }).catch(res => {
-                });
+        })
+        e.subsectionList = e.children
+        delete e.children
+        if (e.id === id) e.subsectionList.splice(sort, 0, ...list)
+      })
+      this.moved = true
+    },
+    cancelSort () {
+      this.chapters = JSON.parse(JSON.stringify(this.originChapters))
+      this.sorting = false;
+    },
+    saveSort () {
+      this.chapters.forEach((n, k) => {
+        n.sort = k + 1;
+        n.subsectionList.forEach((j, i) => {
+          j.sort = i + 1
+          j.chapterId = n.id
+        });
+      });
+      let data = {
+        chapterVOList: this.chapters
+      };
+      this.$post(this.api.reorderTheoretical, data).then(res => {
+        this.sorting = false;
+      }).catch(res => {
+      });
+    },
+    editChapter (item) {
+      this.chapterId = item.id;
+      this.chapterName = item.name;
+      this.chapterVisible = true;
+    },
+    delChapter (id) {
+      this.$confirm("此删除操作不可逆，是否确认删除选中项？", "提示", {
+        type: "warning"
+      })
+        .then(() => {
+          this.$del(`${this.api.deleteChapterTheoretical}?chapterId=${id}`).then(res => {
+            util.successMsg("删除成功");
+            this.getData();
+          }).catch(res => {
+          });
+        })
+        .catch(() => {
+        });
+    },
+    closeSection () {
+      this.isAddSection = false;
+    },
+    addSection (id) {
+      this.chapterId = id;
+      this.sectionName = "";
+      this.fileUrl = "";
+      this.uploadList = [];
+      this.sectionId = "";
+      this.isAddSection = true;
+      this.sectionVisible = true;
+    },
+    chapterSubmit () {
+      if (!this.chapterName) return util.warningMsg("请填写章节名称");
+      let data = {
+        courseId: this.id,
+        name: this.chapterName
+      };
+      if (this.chapterId) {
+        data.id = this.chapterId;
+        this.$put(this.api.editChapterTheoretical, data).then(res => {
+          util.successMsg("修改成功");
+          this.chapterVisible = false;
+          this.getData();
+        })
+          .catch(err => {
+          });
+      } else {
+        this.$post(this.api.addChapterTheoretical, data).then(res => {
+          util.successMsg("添加成功");
+          this.chapterVisible = false;
+          this.getData();
+        })
+          .catch(err => {
+          });
+      }
+    },
+    sectionSubmit () {
+      if (!this.sectionName) return util.warningMsg("请填写小节名称");
+      if (this.uploading) return util.warningMsg("资源正在上传中，请稍候");
+      if (!this.fileUrl && !this.fileId) return util.warningMsg("请上传资源");
+      let data = {
+        id: this.sectionId,
+        courseId: this.id,
+        chapterId: this.chapterId,
+        name: this.sectionName,
+        fileId: this.fileId,
+        fileUrl: this.fileUrl,
+        fileName: this.fileName,
+        fileType: this.fileType,
+        originalFileName: this.originalFileName
+      };
+      this.$post(this.api.addSubsectionTheoretical, data).then(res => {
+        util.successMsg("添加成功");
+        this.sectionVisible = false;
+        this.getData();
+      })
+        .catch(err => {
+        });
+    },
+    closeSwitch () {
+      this.fileId = "";
+      this.fileName = "";
+      this.fileType = "";
+      this.fileUrl = "";
+      this.sectionId = "";
+    },
+    preview (row) {
+      if (this.transferType(row.fileType) == "视频") {
+        // 阿里云视频点播
+        if (row.fileId) {
+          this.$get(`${this.api.getPlayAuth}/${row.fileId}`).then(res => {
+            this.playAuth = res.data.playAuth;
+            if (this.player) {
+              this.player.replayByVidAndPlayAuth(row.fileId, this.playAuth);
             } else {
-                this.$del(`${this.api.fileDeletion}?keys=${this.curFile.fileName}`).then(res => {
-                    this.switchSubmitFile();
-                }).catch(res => {
-                });
-            }
-        },
-        delSection(row) {
-            this.$confirm("此删除操作不可逆，是否确认删除选中项？", "提示", {
-                type: "warning"
-            })
-                .then(() => {
-                    this.$del(`${this.api.deleteSubsectionTheoretical}?subsectionId=${row.id}`).then(res => {
-                        util.successMsg("删除成功");
-                        this.getData();
-                    }).catch(res => {
-                    });
-                })
-                .catch(() => {
-                });
-        },
-        sortChapter(row, type, disabled, index) {
-            if (!disabled) {
-                if (type == "up") {
-                    let tempItem = this.chapters.splice(index - 1, 1)[0];
-                    this.chapters.splice(index, 0, tempItem);
-                } else {
-                    let tempItem = this.chapters.splice(index + 1, 1)[0];
-                    this.chapters.splice(index, 0, tempItem);
-                }
+              this.player = new Aliplayer({
+                id: "player",
+                width: "100%",
+                autoplay: false,
+                vid: row.fileId,
+                playauth: this.playAuth,
+                encryptType: 1 //当播放私有加密流时需要设置。
+              });
             }
-        },
-        sortSection(chapterIndex, type, disabled, index) {
-            if (!disabled) {
-                this.moved = true
-                let list = this.chapters[chapterIndex].subsectionList;
-                if (type == "up") {
-                    let tempItem = list.splice(index - 1, 1)[0];
-                    list.splice(index, 0, tempItem);
-                } else {
-                    let tempItem = list.splice(index + 1, 1)[0];
-                    list.splice(index, 0, tempItem);
-                }
-                this.chapters[chapterIndex].subsectionList = list;
+          }).catch(res => { });
+        } else {
+          this.videoSrc = row.fileUrl
+        }
+      } else if (this.transferType(row.fileType) == "图片") {
+        this.previewImg = row.fileUrl;
+      } else if (row.fileType == "pdf") {
+        this.pdfSrc = row.fileUrl;
+        this.pdfVisible = true;
+      } else {
+        this.$get(`${this.api.getSubsectionTheoretical}?subsectionId=${row.id}`).then(res => {
+          this.previewing = true;
+          this.loadIns = Loading.service();
+          this.$route.fullPath.includes("#file") || history.pushState({ file: true }, "文件预览", "#" + this.$route.fullPath + "#file");
+          if (row.fileType == "pptx") {
+            this.isPPT = true;
+            this.isWord = false;
+            this.isExcel = false;
+          } else if (row.fileType == "doc" || row.fileType == "docx") {
+            this.isPPT = false;
+            this.isWord = true;
+            this.isExcel = false;
+          } else if (row.fileType == "xls" || row.fileType == "xlsx") {
+            this.isExcel = true;
+            this.isPPT = false;
+            this.isWord = false;
+          } else {
+            this.isPPT = false;
+            this.isWord = false;
+            this.isExcel = false;
+          }
+          this.iframeSrc = res.previewUrl;
+          this.$nextTick(() => {
+            this.iframeOnload();
+          });
+        })
+          .catch(err => {
+          });
+      }
+    },
+    editSectionName (row, chapterId) {
+      this.chapterId = chapterId;
+      this.sectionId = row.id;
+      this.sectionName = row.name;
+      this.sectionNameVisible = true;
+    },
+    switchFile (row, chapterId, sectionId) {
+      this.uploadList = [];
+      this.curFile = {
+        fileId: row.fileId,
+        fileName: row.fileName,
+        fileType: row.fileType,
+        fileUrl: row.fileUrl
+      };
+      this.chapterId = chapterId;
+      this.sectionId = row.id;
+      this.sectionName = row.sectionName;
 
-            }
-        },
-        sectionNameSubmit() {
-            if (!this.sectionName) return util.warningMsg("请填写小节名称");
-            let data = {
-                id: this.sectionId,
-                courseId: this.id,
-                chapterId: this.chapterId,
-                name: this.sectionName
-            };
-            this.$put(this.api.editSubsectionTheoretical, data).then(res => {
-                util.successMsg("修改成功");
-                this.sectionNameVisible = false;
-                this.getData();
-            })
-                .catch(err => {
-                });
-        },
-        closePlayer() {
-            this.playAuth = "";
-            this.player.pause();
-        },
-        closeIframe() {
-            this.iframeSrc = "";
-            this.showMask = false;
-            this.showMask1 = false;
-            this.showMask2 = false;
-            this.previewing = false;
+      this.switchVisible = true;
+    },
+    switchSubmitFile () {
+      let data = {
+        id: this.sectionId,
+        courseId: this.id,
+        chapterId: this.chapterId,
+        name: this.sectionName,
+        fileId: this.fileId,
+        fileName: this.fileName,
+        fileType: this.fileType,
+        fileUrl: this.fileUrl,
+        originalFileName: this.originalFileName
+      };
+      this.$put(this.api.editSubsectionTheoretical, data).then(res => {
+        util.successMsg("更换成功");
+        this.switchVisible = false;
+        this.getData();
+      })
+        .catch(err => {
+        });
+    },
+    switchSubmit () {
+      if (this.uploading) return util.warningMsg("资源正在上传中，请稍候");
+      if (!this.fileUrl && !this.fileId) return util.warningMsg("请上传资源");
+      this.switchSubmitFile();
+    },
+    delSection (row) {
+      this.$confirm("此删除操作不可逆，是否确认删除选中项？", "提示", {
+        type: "warning"
+      })
+        .then(() => {
+          this.$del(`${this.api.deleteSubsectionTheoretical}?subsectionId=${row.id}`).then(res => {
+            util.successMsg("删除成功");
+            this.getData();
+          }).catch(res => {
+          });
+        })
+        .catch(() => {
+        });
+    },
+    sortChapter (row, type, disabled, index) {
+      if (!disabled) {
+        if (type == "up") {
+          let tempItem = this.chapters.splice(index - 1, 1)[0];
+          this.chapters.splice(index, 0, tempItem);
+        } else {
+          let tempItem = this.chapters.splice(index + 1, 1)[0];
+          this.chapters.splice(index, 0, tempItem);
+        }
+      }
+    },
+    sortSection (chapterIndex, type, disabled, index) {
+      if (!disabled) {
+        this.moved = true
+        let list = this.chapters[chapterIndex].subsectionList;
+        if (type == "up") {
+          let tempItem = list.splice(index - 1, 1)[0];
+          list.splice(index, 0, tempItem);
+        } else {
+          let tempItem = list.splice(index + 1, 1)[0];
+          list.splice(index, 0, tempItem);
         }
+        this.chapters[chapterIndex].subsectionList = list;
+
+      }
+    },
+    sectionNameSubmit () {
+      if (!this.sectionName) return util.warningMsg("请填写小节名称");
+      let data = {
+        id: this.sectionId,
+        courseId: this.id,
+        chapterId: this.chapterId,
+        name: this.sectionName
+      };
+      this.$put(this.api.editSubsectionTheoretical, data).then(res => {
+        util.successMsg("修改成功");
+        this.sectionNameVisible = false;
+        this.getData();
+      })
+        .catch(err => {
+        });
+    },
+    closePlayer () {
+      this.playAuth = "";
+      this.player.pause();
+    },
+    closeIframe () {
+      this.iframeSrc = "";
+      this.videoSrc = ''
+      this.showMask = false;
+      this.showMask1 = false;
+      this.showMask2 = false;
+      this.previewing = false;
     }
+  }
 };
 </script>
 
 <style scoped lang="scss">
 .relative {
-  position: relative;
+    position: relative;
 }
 .btns {
     position: absolute;
@@ -842,15 +946,15 @@ export default {
     }
 }
 /deep/.el-progress-bar {
-  padding-right: 70px;
-  margin-right: -70px;
+    padding-right: 70px;
+    margin-right: -70px;
 }
 .el-upload__tip {
-  position: absolute;
-  top: 4px;
-  right: 0;
-  width: 300px;
-  line-height: 1.4;
+    position: absolute;
+    top: 4px;
+    right: 0;
+    width: 300px;
+    line-height: 1.4;
 }
 .sort-icon {
     font-size: 24px;
@@ -858,15 +962,15 @@ export default {
 
     &.disabled {
         color: #ccc;
-        cursor: not-allowed
+        cursor: not-allowed;
     }
 }
 .el-image-viewer__wrapper {
     transform: translateY(-10px);
-    transition: transform .5s;
+    transition: transform 0.5s;
 
     &.active {
-        transform: translateY(0)
+        transform: translateY(0);
     }
 }
 
@@ -939,9 +1043,9 @@ export default {
     background-color: #107c41;
 }
 .el-button--primary.action-btn {
-  color: #9076FF !important;
-  font-size: 14px !important;
-  background-color: #fff !important;
-  border-radius: 4px !important;
+    color: #9076ff !important;
+    font-size: 14px !important;
+    background-color: #fff !important;
+    border-radius: 4px !important;
 }
 </style>
\ No newline at end of file