diff --git a/package-lock.json b/package-lock.json
index 196af4d..62eb8c2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3474,6 +3474,11 @@
       "integrity": "sha512-MsCAG1z9lPdoO/IUMLSBWBSVxVtJ1395VGIQ+Fc2gNdkQ1hNDnQdw3YhA71WJCBW1vdwA0cAnk/DnW6bqoEUYg==",
       "dev": true
     },
+    "cssfilter": {
+      "version": "0.0.10",
+      "resolved": "https://registry.npmjs.org/cssfilter/-/cssfilter-0.0.10.tgz",
+      "integrity": "sha512-FAaLDaplstoRsDR8XGYH51znUN0UY7nMc6Z9/fvE8EXGwvJE9hu7W2vHwx1+bd6gCYnln9nLbzxFTrcO9YQDZw=="
+    },
     "cssnano": {
       "version": "4.1.10",
       "resolved": "https://registry.npmjs.org/cssnano/-/cssnano-4.1.10.tgz",
@@ -6680,12 +6685,8 @@
     "highlight.js": {
       "version": "9.16.2",
       "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-9.16.2.tgz",
-      "integrity": "sha512-feMUrVLZvjy0oC7FVJQcSQRqbBq9kwqnYE4+Kj9ZjbHh3g+BisiPgF49NyQbVLNdrL/qqZr3Ca9yOKwgn2i/tw=="
-    },
-    "highlight.js-async-webpack": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/highlight.js-async-webpack/-/highlight.js-async-webpack-1.0.4.tgz",
-      "integrity": "sha1-wGtnv5nwSQRdYrdW5YVbCRLsYWw="
+      "integrity": "sha512-feMUrVLZvjy0oC7FVJQcSQRqbBq9kwqnYE4+Kj9ZjbHh3g+BisiPgF49NyQbVLNdrL/qqZr3Ca9yOKwgn2i/tw==",
+      "dev": true
     },
     "hmac-drbg": {
       "version": "1.0.1",
@@ -8086,12 +8087,11 @@
       }
     },
     "mavon-editor": {
-      "version": "2.7.7",
-      "resolved": "https://registry.npmjs.org/mavon-editor/-/mavon-editor-2.7.7.tgz",
-      "integrity": "sha512-lXnYe+dztKepbv8bi2nedRqG/AwyUDF8gmkv9lHD3fpVJ1+pzAS6YILRIryKCvO9qPIOPEThHsda2DxtlzRsZA==",
+      "version": "2.10.4",
+      "resolved": "https://registry.npmjs.org/mavon-editor/-/mavon-editor-2.10.4.tgz",
+      "integrity": "sha512-CFsBLkgt/KZBDg+SJYe2fyYv4zClY149PiwpH0rDAiiP4ae1XNs0GC8nBsoTeipsHcebDLN1QMkt3bUsnMDjQw==",
       "requires": {
-        "highlight.js": "^9.11.0",
-        "highlight.js-async-webpack": "^1.0.4"
+        "xss": "^1.0.6"
       }
     },
     "md5.js": {
@@ -13455,6 +13455,15 @@
         "async-limiter": "~1.0.0"
       }
     },
+    "xss": {
+      "version": "1.0.14",
+      "resolved": "https://registry.npmjs.org/xss/-/xss-1.0.14.tgz",
+      "integrity": "sha512-og7TEJhXvn1a7kzZGQ7ETjdQVS2UfZyTlsEdDOqvQF7GoxNfY+0YLCzBy1kPdsDDx4QuNAonQPddpsn6Xl/7sw==",
+      "requires": {
+        "commander": "^2.20.3",
+        "cssfilter": "0.0.10"
+      }
+    },
     "xtend": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
diff --git a/package.json b/package.json
index 3f0f969..82256e1 100644
--- a/package.json
+++ b/package.json
@@ -19,7 +19,7 @@
     "file-saver": "^2.0.5",
     "image-conversion": "^2.1.1",
     "js-cookie": "^3.0.1",
-    "mavon-editor": "^2.6.17",
+    "mavon-editor": "^2.10.4",
     "postcss-px2rem": "^0.3.0",
     "px2rem-loader": "^0.1.9",
     "qs": "^6.11.2",
diff --git a/src/assets/img/mini.jpg b/src/assets/img/mini.jpg
index 94253d2..5ed371d 100644
Binary files a/src/assets/img/mini.jpg and b/src/assets/img/mini.jpg differ
diff --git a/src/components/quill/index.vue b/src/components/quill/index.vue
index ad02ce0..6a6349c 100644
--- a/src/components/quill/index.vue
+++ b/src/components/quill/index.vue
@@ -1,253 +1,322 @@
 <template>
-    <div class="quill" ref="quill" :class="classes">
-        <div ref="editor" :style="styles" v-loading="loading"></div>
-        <el-upload
-            :headers="headers"
-            :action="this.api.fileupload"
-            :before-upload="beforeUpload"
-            :on-success="editorUploadSuccess"
-            style="display: none">
-            <el-button class="editorUpload" type="primary">点击上传</el-button>
-        </el-upload>
+  <div>
+    <el-radio-group class="type-radio"
+                    v-model="type"
+                    @change="typeChange">
+      <el-radio :label="0">富文本</el-radio>
+      <el-radio :label="1">markdown</el-radio>
+    </el-radio-group>
+
+    <div v-show="!type"
+         class="quill"
+         ref="quill"
+         :class="classes">
+      <div ref="editor"
+           :style="styles"
+           v-loading="loading"></div>
+      <el-upload :headers="headers"
+                 :action="this.api.fileupload"
+                 :before-upload="beforeUpload"
+                 :on-success="editorUploadSuccess"
+                 style="display: none">
+        <el-button class="editorUpload"
+                   type="primary">点击上传</el-button>
+      </el-upload>
     </div>
+    <mavon-editor class="md"
+                  v-model="mdVal"
+                  v-show="type"
+                  ref="md"
+                  :ishljs="true"
+                  @change="mdChange"
+                  @imgAdd="imgAdd" />
+  </div>
 </template>
 
 <script>
-    import Quill from 'quill';
-    import 'quill/dist/quill.core.css';
-    import 'quill/dist/quill.snow.css';
-    import 'quill/dist/quill.bubble.css';
-    import toolbarOptions from './options'
+import Quill from 'quill';
+import 'quill/dist/quill.core.css';
+import 'quill/dist/quill.snow.css';
+import 'quill/dist/quill.bubble.css';
+import toolbarOptions from './options'
+import axios from 'axios'
+import { mavonEditor } from 'mavon-editor'
+import 'mavon-editor/dist/css/index.css'
 
-    export default {
-        name: 'quill',
-        props: {
-            value: {
-                type: String,
-                default: ''
-            },
-            readonly: {
-                type: Boolean,
-                default:false
-            },
-            toTop: {
-                type: Boolean,
-                default:true
-            },
-            border: {
-                type: Boolean,
-                default:false
-            },
-            height: {
-                type: Number
-            },
-            minHeight: {
-                type: Number
-            },
-            /* 
-             * 原本的readOnly失效,对比其他项目，发现是quill版本不同导致，
-             * 使用props传入elseRead = 'true'，手动隐藏工具栏
-             */
-            elseRead:{
-                type:String,default:'false'
-            }
-        },
-        data () {
-            return {
-                headers: {
-                    token: sessionStorage.getItem('token')
-                },
-                Quill: null,
-                currentValue: '',
-                options: {
-                    theme: 'snow',
-                    bounds: document.body,
-                    debug: 'warn',
-                    modules: {
-                        toolbar: {
-                            container: toolbarOptions,
-                            handlers: {
-                                'image': function (value) {
-                                    if (value) {
-                                        // 调用iview图片上传
-                                        document.querySelector('.editorUpload').click()
-                                    } else {
-                                        this.Quill.format('image', false);
-                                    }
-                                }
-                            }
-                        }
-                    },
-                    placeholder: '',
-                    readOnly: this.readonly
-                },
-                loading: false
-            }
-        },
-        computed: {
-            classes () {
-                return [
-                    {
-                        'quill-no-border': !this.border
-                    }
-                ];
-            },
-            styles () {
-                let style = {};
-                if (this.minHeight) {
-                    style.minHeight = `${this.minHeight}px`;
-                }
-                if (this.height) {
-                    style.height = `${this.height}px`;
+export default {
+  name: 'quill',
+  components: {
+    mavonEditor
+  },
+  props: {
+    value: {
+      type: String,
+      default: ''
+    },
+    readonly: {
+      type: Boolean,
+      default: false
+    },
+    toTop: {
+      type: Boolean,
+      default: true
+    },
+    border: {
+      type: Boolean,
+      default: false
+    },
+    height: {
+      type: Number
+    },
+    minHeight: {
+      type: Number
+    },
+    /* 
+     * 原本的readOnly失效,对比其他项目，发现是quill版本不同导致，
+     * 使用props传入elseRead = 'true'，手动隐藏工具栏
+     */
+    elseRead: {
+      type: String, default: 'false'
+    }
+  },
+  data () {
+    return {
+      headers: {
+        token: sessionStorage.getItem('token')
+      },
+      type: 0,
+      mdVal: '',
+      Quill: null,
+      currentValue: '',
+      options: {
+        theme: 'snow',
+        bounds: document.body,
+        debug: 'warn',
+        modules: {
+          toolbar: {
+            container: toolbarOptions,
+            handlers: {
+              'image': function (value) {
+                if (value) {
+                  // 调用iview图片上传
+                  document.querySelector('.editorUpload').click()
+                } else {
+                  this.Quill.format('image', false);
                 }
-                return style;
-            },
-            
-        },
-        watch: {
-            value: {
-                handler (val) {
-                    if (val !== this.currentValue) {
-                        this.currentValue = val;
-                        if (this.Quill) {
-                            this.Quill.pasteHTML(this.value);
-                        }
-                    }
-                },
-                immediate: true
+              }
             }
+          }
         },
-        created(){
-        },
-        mounted () {
-            this.init();
-            // 处理工具栏隐藏样式
-            if(this.elseRead==='true'){
-                let children = this.$refs.quill.children[0].style
-                children.padding = '0'
-                children.overflow = 'hidden'
-                children.height = '0'
-                children.borderTop = '0'
+        placeholder: '',
+        readOnly: this.readonly
+      },
+      loading: false
+    }
+  },
+  computed: {
+    classes () {
+      return [
+        {
+          'quill-no-border': !this.border
+        }
+      ];
+    },
+    styles () {
+      let style = {};
+      if (this.minHeight) {
+        style.minHeight = `${this.minHeight}px`;
+      }
+      if (this.height) {
+        style.height = `${this.height}px`;
+      }
+      return style;
+    },
+
+  },
+  watch: {
+    value: {
+      handler (val) {
+        if (!this.type) {
+          if (val !== this.currentValue) {
+            this.currentValue = val;
+            if (this.Quill) {
+              this.Quill.pasteHTML(this.value);
             }
-        },
-        beforeDestroy () {
-            // 在组件销毁后销毁实例
-            this.Quill = null;
-        },
-        methods: {
-            init () {
-                const editor = this.$refs.editor;
-                // 初始化编辑器
-                this.Quill = new Quill(editor, this.options);
-                const ins = this.Quill
-                // 默认值
-                ins.pasteHTML(this.currentValue);
-                if(this.toTop){
-                    this.$nextTick(() => {
-                        window.scrollTo(0,0)
-                    })
-                }
-                // 绑定事件
-                ins.on('text-change', (delta, oldDelta, source) => {
-                    const html = this.$refs.editor.children[0].innerHTML;
-                    const text = ins.getText();
-                    const quill = this.Quill;
-                    // 更新内部的值
-                    this.currentValue = html;
-                    // 发出事件 v-model
-                    this.$emit('input', html);
-                    // 发出事件
-                    this.$emit('on-change', { html, text, quill });
-                });
-                // 将一些 quill 自带的事件传递出去
-                ins.on('text-change', (delta, oldDelta, source) => {
-                    this.$emit('on-text-change', delta, oldDelta, source);
-                });
-                ins.on('selection-change', (range, oldRange, source) => {
-                    this.$emit('on-selection-change', range, oldRange, source);
-                });
-                ins.on('editor-change', (eventName, ...args) => {
-                    this.$emit('on-editor-change', eventName, ...args);
-                });
-                // 监听粘贴事件
-                ins.root.addEventListener('paste', evt => {
-                    if (evt.clipboardData && evt.clipboardData.files && evt.clipboardData.files.length) {
-                        evt.preventDefault();
-                        // 检测是否粘贴的是图片
-                        [].forEach.call(evt.clipboardData.files, file => {
-                            if (!file.type.match(/^image\/(gif|jpe?g|a?png|bmp)/i)) {
-                                return
-                            }
-                            const param = new FormData()
-                            param.append('file', file)
-                            // 把图片上传到服务器，不然会直接把base64存到数据库
-                            this.$post(this.api.fileupload, param, {
-                                headers: { "Content-Type": "multipart/form-data" }
-                            }).then(res => {
-                                var range = ins.getSelection()
-                                if (range) {
-                                    //  在当前光标位置插入图片
-                                    ins.insertEmbed(range.index, 'image', res.data.filesResult.fileUrl)
-                                    //  将光标移动到图片后面
-                                    ins.setSelection(range.index + 1)
-                                }
-                            }).catch(res => {})
-                        });
-                    }
-                }, false)
-            },
-            beforeUpload(file){
-                this.loading = true
-            },
-            editorUploadSuccess (res) {
-                // 获取富文本组件实例
-                let quill = this.Quill
-                // 如果上传成功
-                if (res.data.filesResult.fileUrl) {
-                    // 获取光标所在位置
-                    let lengths;
-                    if ( quill.getSelection() == null){
-                        lengths = 1
-                    }else{
-                        lengths = quill.getSelection().index;
-                    }
-                    // 插入图片，res为服务器返回的图片链接地址
-                    quill.insertEmbed(lengths, 'image', res.data.filesResult.fileUrl)
-                    // 调整光标到最后
-                    quill.setSelection(lengths + 1)
-                } else {
-                    this.$message.success('图片插入失败')
-                }
-                this.loading = false
-            },
+          }
+          if (!this.mdVal) this.mdVal = val
         }
+      },
+      immediate: true
     }
-</script>
-<style lang="scss" scoped>
-    .quill-no-border{
-        .ql-toolbar.ql-snow{
-            border: none;
-            border-bottom: 1px solid #e8eaec;
+  },
+  mounted () {
+    this.init();
+    // 处理工具栏隐藏样式
+    if (this.elseRead === 'true') {
+      let children = this.$refs.quill.children[0].style
+      children.padding = '0'
+      children.overflow = 'hidden'
+      children.height = '0'
+      children.borderTop = '0'
+    }
+  },
+  beforeDestroy () {
+    // 在组件销毁后销毁实例
+    this.Quill = null;
+  },
+  methods: {
+    // 富文本切换
+    typeChange (val) {
+      if (!this.mdVal) this.mdVal = this.value
+    },
+
+    init () {
+      const editor = this.$refs.editor;
+      // 初始化编辑器
+      this.Quill = new Quill(editor, this.options);
+      const ins = this.Quill
+      // 默认值
+      ins.pasteHTML(this.currentValue);
+      if (this.toTop) {
+        this.$nextTick(() => {
+          window.scrollTo(0, 0)
+        })
+      }
+      // 绑定事件
+      ins.on('text-change', (delta, oldDelta, source) => {
+        const html = this.$refs.editor.children[0].innerHTML;
+        const text = ins.getText();
+        const quill = this.Quill;
+        // 更新内部的值
+        this.currentValue = html;
+        // 发出事件 v-model
+        this.$emit('input', html);
+        // 发出事件
+        this.$emit('on-change', { html, text, quill });
+      });
+      // 将一些 quill 自带的事件传递出去
+      ins.on('text-change', (delta, oldDelta, source) => {
+        this.$emit('on-text-change', delta, oldDelta, source);
+      });
+      ins.on('selection-change', (range, oldRange, source) => {
+        this.$emit('on-selection-change', range, oldRange, source);
+      });
+      ins.on('editor-change', (eventName, ...args) => {
+        this.$emit('on-editor-change', eventName, ...args);
+      });
+      // 监听粘贴事件
+      ins.root.addEventListener('paste', evt => {
+        if (evt.clipboardData && evt.clipboardData.files && evt.clipboardData.files.length) {
+          evt.preventDefault();
+          // 检测是否粘贴的是图片
+          [].forEach.call(evt.clipboardData.files, file => {
+            if (!file.type.match(/^image\/(gif|jpe?g|a?png|bmp)/i)) {
+              return
+            }
+            const param = new FormData()
+            param.append('file', file)
+            // 把图片上传到服务器，不然会直接把base64存到数据库
+            this.$post(this.api.fileupload, param, {
+              headers: { "Content-Type": "multipart/form-data" }
+            }).then(res => {
+              var range = ins.getSelection()
+              if (range) {
+                //  在当前光标位置插入图片
+                ins.insertEmbed(range.index, 'image', res.data.filesResult.fileUrl)
+                //  将光标移动到图片后面
+                ins.setSelection(range.index + 1)
+              }
+            }).catch(res => { })
+          });
         }
-        .ql-container.ql-snow{
-            border: none;
+      }, false)
+    },
+    beforeUpload (file) {
+      this.loading = true
+    },
+    // quill图片上传
+    editorUploadSuccess (res) {
+      // 获取富文本组件实例
+      let quill = this.Quill
+      // 如果上传成功
+      if (res.data.filesResult.fileUrl) {
+        // 获取光标所在位置
+        let lengths;
+        if (quill.getSelection() == null) {
+          lengths = 1
+        } else {
+          lengths = quill.getSelection().index;
         }
+        // 插入图片，res为服务器返回的图片链接地址
+        quill.insertEmbed(lengths, 'image', res.data.filesResult.fileUrl)
+        // 调整光标到最后
+        quill.setSelection(lengths + 1)
+      } else {
+        this.$message.success('图片插入失败')
+      }
+      this.loading = false
+    },
+
+    // 类型切换回调
+    mdChange (val) {
+      this.$emit('input', val)
+    },
+    // markdown图片上传
+    imgAdd (pos, $file) {
+      let $vm = this.$refs.md
+      // 第一步.将图片上传到服务器.
+      const formData = new FormData();
+      formData.append('file', $file);
+      axios({
+        url: this.api.fileupload,
+        method: 'post',
+        data: formData,
+        headers: {
+          token: this.token,
+          'Content-Type': 'multipart/form-data'
+        },
+      }).then((res) => {
+        $vm.$img2Url(pos, res.data.data.filesResult.fileUrl);
+      })
+    },
+
+  }
+}
+</script>
+<style lang="scss" scoped>
+.type-radio {
+    margin-bottom: 20px;
+}
+.quill-no-border {
+    .ql-toolbar.ql-snow {
+        border: none;
+        border-bottom: 1px solid #e8eaec;
     }
-    .else{
-        .ql-toolbar.ql-snow{
-            height: 0;
-            overflow: hidden;
-            padding: 0;
-            border-top: 0;
-        }
+    .ql-container.ql-snow {
+        border: none;
     }
-    /deep/.ql-snow {
-        position: relative;
-        .ql-tooltip {
-            position: absolute !important;
-            top: 0 !important;
-            left: -100px !important;
-            transform: translateY(10px);
-        }
+}
+.else {
+    .ql-toolbar.ql-snow {
+        height: 0;
+        overflow: hidden;
+        padding: 0;
+        border-top: 0;
+    }
+}
+/deep/.ql-snow {
+    position: relative;
+    .ql-tooltip {
+        position: absolute !important;
+        top: 0 !important;
+        left: -100px !important;
+        transform: translateY(10px);
     }
+}
+.md {
+    max-height: 300px;
+}
+/deep/.v-note-wrapper .v-note-panel {
+    min-height: 200px;
+}
 </style>
diff --git a/src/setting.js b/src/setting.js
index b8f4811..2e098f1 100644
--- a/src/setting.js
+++ b/src/setting.js
@@ -11,7 +11,7 @@ if (isDev) {
   jumpPath = 'http://192.168.31.125:8087/' // 本地调试-需要启动本地判分点系统
   host = 'http://121.37.12.51/'
   // host = 'https://huorantech.cn/'
-  host = 'http://192.168.31.217:9000/'// 榕
+  // host = 'http://192.168.31.217:9000/'// 榕
   // host = 'http://192.168.31.51:9000/'// 赓
 } else if (isPro) {
   jumpPath = 'https://www.huorantech.cn/judgmentPoint/'
diff --git a/src/views/course/contentSettings.vue b/src/views/course/contentSettings.vue
index 638a00a..a5dfa1a 100644
--- a/src/views/course/contentSettings.vue
+++ b/src/views/course/contentSettings.vue
@@ -1,214 +1,356 @@
 <template>
-    <div>
-        <el-card shadow="hover" class="mgb20">
-            <div class="flex-between">
-                <el-page-header @back="goBack" :content="name + '/' + (sorting? '编辑排序' : '内容设置')"></el-page-header>
+  <div>
+    <el-card shadow="hover"
+             class="mgb20">
+      <div class="flex-between">
+        <el-page-header @back="goBack"
+                        :content="name + '/' + (sorting? '编辑排序' : '内容设置')"></el-page-header>
+      </div>
+    </el-card>
+    <!--内容设置-->
+    <el-card shadow="hover"
+             class="mgb20">
+      <div class="page">
+        <div class="relative">
+          <div class="p-title">内容设置</div>
+          <div class="btns">
+            <template v-if="!sorting">
+              <el-button type="primary"
+                         round
+                         @click="addChapter"
+                         v-auth="'/curriculum:内容设置:添加章节'">添加章节</el-button>
+              <el-button type="primary"
+                         round
+                         @click="sort"
+                         v-auth="'/curriculum:内容设置:编辑排序'">编辑顺序</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="mgb20"
+               v-for="(chapter,index) in chapters"
+               :key="chapter.id">
+            <div class="flex-between mgb10">
+              <div>{{ chapter.name }}</div>
+              <div>
+                <template v-if="!sorting">
+                  <el-button class="action-btn"
+                             plain
+                             @click="editChapter(chapter)"
+                             v-auth="'/curriculum:内容设置:修改章节名称'">修改章节名称</el-button>
+                  <el-button class="action-btn"
+                             plain
+                             @click="addSection(chapter.id)"
+                             v-auth="'/curriculum:内容设置:添加小节'">添加小节</el-button>
+                  <el-button class="action-btn"
+                             plain
+                             @click="delChapter(chapter.id)"
+                             v-auth="'/curriculum:内容设置:删除章节'">删除</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="mgb20">
-            <div class="page">
-                <div class="relative">
-                    <div class="p-title">内容设置</div>
-                    <div class="btns">
-                        <template v-if="!sorting">
-                            <el-button type="primary" round @click="addChapter" v-auth="'/curriculum:内容设置:添加章节'">添加章节</el-button>
-                            <el-button type="primary" round @click="sort" v-auth="'/curriculum:内容设置:编辑排序'">编辑顺序</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="mgb20" v-for="(chapter,index) in chapters" :key="chapter.id">
-                        <div class="flex-between mgb10">
-                            <div>{{ chapter.name }}</div>
-                            <div>
-                                <template v-if="!sorting">
-                                    <el-button class="action-btn" plain @click="editChapter(chapter)" v-auth="'/curriculum:内容设置:修改章节名称'">修改章节名称</el-button>
-                                    <el-button class="action-btn" plain @click="addSection(chapter.id)" v-auth="'/curriculum:内容设置:添加小节'">添加小节</el-button>
-                                    <el-button class="action-btn" plain @click="delChapter(chapter.id)" v-auth="'/curriculum:内容设置:删除章节'">删除</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" row-key="id">
-                            <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="资源名称">
-                            </el-table-column>
-                            <el-table-column prop="fileType" label="资源类型" align="center">
-                                <template slot-scope="scope">
-                                    {{ transferType(scope.row.fileType) }}
-                                </template>
-                            </el-table-column>
-                            <el-table-column label="操作" align="center" width="300">
-                                <template slot-scope="scope">
-                                    <template v-if="!sorting">
-                                        <el-button type="text" @click="download(scope.row)" v-auth="'/curriculum:内容设置:下载'">下载</el-button>
-                                        <el-button type="text" @click="preview(scope.row)" v-auth="'/curriculum:内容设置:查看'">查看</el-button>
-                                        <el-button type="text" @click="delSection(scope.row)" v-auth="'/curriculum:内容设置:删除小节'">删除</el-button>
-                                        <el-button type="text" @click="editSectionName(scope.row,chapter.id)" v-auth="'/curriculum:内容设置:修改小节名称'">修改小节名称</el-button>
-                                        <el-button type="text" @click="switchFile(scope.row,chapter.id)" v-auth="'/curriculum:内容设置:更换文件'">更换文件</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="添加小节" :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"
-                                    :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格式，大小不超过30M；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="请输入小节名称" 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"
-                                :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>
-
-                    <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>
-
-                    <pdf :visible.sync="pdfVisible" :src.sync="pdfSrc"></pdf>
-                </div>
+
+            <el-table :data="chapter.subsectionList"
+                      class="table"
+                      stripe
+                      header-align="center"
+                      row-key="id">
+              <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="资源名称">
+              </el-table-column>
+              <el-table-column prop="fileType"
+                               label="资源类型"
+                               align="center">
+                <template slot-scope="scope">
+                  {{ transferType(scope.row.fileType) }}
+                </template>
+              </el-table-column>
+              <el-table-column label="操作"
+                               align="center"
+                               width="300">
+                <template slot-scope="scope">
+                  <template v-if="!sorting">
+                    <el-button type="text"
+                               @click="download(scope.row)"
+                               v-auth="'/curriculum:内容设置:下载'">下载</el-button>
+                    <el-button type="text"
+                               @click="preview(scope.row)"
+                               v-auth="'/curriculum:内容设置:查看'">查看</el-button>
+                    <el-button type="text"
+                               @click="delSection(scope.row)"
+                               v-auth="'/curriculum:内容设置:删除小节'">删除</el-button>
+                    <el-button type="text"
+                               @click="editSectionName(scope.row,chapter.id)"
+                               v-auth="'/curriculum:内容设置:修改小节名称'">修改小节名称</el-button>
+                    <el-button type="text"
+                               @click="switchFile(scope.row,chapter.id)"
+                               v-auth="'/curriculum:内容设置:更换文件'">更换文件</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="添加小节1"
+                     :visible.sync="sectionVisible"
+                     width="540px"
+                     @close="closeSection"
+                     :close-on-click-modal="false">
+            <el-form ref="form"
+                     :model="sectionForm"
+                     label-width="80px"
+                     @submit.native.prevent>
+              <el-form-item label="资源添加">
+                <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格式，大小不超过30M；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="请输入小节名称"
+                          v-model.trim="sectionForm.sectionName"
+                          maxlength="50"
+                          @keyup.enter.native="sectionSubmit()"></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"
+                         :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>
-        </el-card>
-        <div class="player-download" id="playerDownload"></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>
+            <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 @submit.native.prevent>
+              <el-form-item>
+                <el-input placeholder="请输入小节名称"
+                          v-model="sectionForm.sectionName"
+                          maxlength="50"
+                          @keyup.enter.native="sectionNameSubmit()"></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>
+
+          <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>
+
+          <pdf :visible.sync="pdfVisible"
+               :src.sync="pdfSrc"></pdf>
+        </div>
+      </div>
+    </el-card>
+    <div class="player-download"
+         id="playerDownload"></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>
@@ -216,639 +358,648 @@ import { Loading } from "element-ui";
 import pdf from "@/components/pdf";
 import axios from 'axios'
 export default {
-    name: "contentSettings",
-    data() {
-        return {
-            name: this.$route.query.name,
-            headers: {
-                token: sessionStorage.getItem('token')
-            },
-            id: this.$route.query.cid,
-            originChapters: [],
-            chapters: [],
-            multipleSelection: [],
-            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: "",
-            previewing: false,
-            showProgress: false,
-            progressPercent: 0,
-            moveVisible: false,
-            checkList: [],
-            sortList: [
-              {
-                id: 'bottom',
-                name: '置末'
-              },
-              {
-                id: 'top',
-                name: '置顶'
-              }
-            ],
-            moveForm: {
-              id: '',
-              sort: 'bottom'
-            },
-            moved: false // 是否移动过
-        };
+  name: "contentSettings",
+  data () {
+    return {
+      name: this.$route.query.name,
+      headers: {
+        token: sessionStorage.getItem('token')
+      },
+      id: this.$route.query.cid,
+      originChapters: [],
+      chapters: [],
+      multipleSelection: [],
+      sorting: false,
+      uploading: false,
+      uploadList: [],
+      chapterVisible: false,
+      chapterId: "",
+      chapterName: "",
+      sectionVisible: false,
+      sectionName: "",
+      sectionId: "",
+      switchVisible: false,
+      sectionNameVisible: false,
+
+      rules: {
+        sectionName: [
+          { required: true, message: "请输入小节名称", trigger: "blur" }
+        ],
+      },
+      sectionForm: {
+        sectionName: ''
+      },
+      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: "",
+      previewing: false,
+      showProgress: false,
+      progressPercent: 0,
+      moveVisible: false,
+      checkList: [],
+      sortList: [
+        {
+          id: 'bottom',
+          name: '置末'
+        },
+        {
+          id: 'top',
+          name: '置顶'
+        }
+      ],
+      moveForm: {
+        id: '',
+        sort: 'bottom'
+      },
+      moved: false // 是否移动过
+    };
+  },
+  components: { pdf },
+  mounted () {
+    this.insertScript();
+    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.queryChaptersAndSubsections}/${this.id}`)
+        .then(res => {
+          this.chapters = res.chapterList;
+        })
+        .catch(err => {
+
+        });
+    },
+    // 处理多选
+    handleSelectionChange (val) {
+      this.multipleSelection = val
     },
-    components: { pdf },
-    mounted() {
-        this.insertScript();
-        this.id && this.getData();
-        // 处理预览资源后返回弹框不会消失的问题
-        if (window.history && window.history.pushState) {
-            history.pushState(null, null, document.URL);
-            window.addEventListener("popstate", this.goBack, false);
+    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 {
+            this.sorting = false
+          }
+        } else {
+          this.$router.back()
         }
+      }
     },
-    destroyed() {
-        window.removeEventListener("popstate", this.goBack, 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();
+      };
     },
-    methods: {
-        getData() {
-            this.$get(`${this.api.queryChaptersAndSubsections}/${this.id}`)
-                .then(res => {
-                    this.chapters = res.chapterList;
-                })
-                .catch(err => {
+    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);
 
-                });
-        },
-        // 处理多选
-        handleSelectionChange(val) {
-          this.multipleSelection = val
+      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) {
+      //     this.$message.error("请上传10M以内的文件");
+      //     return false;
+      // }
+      // if (type == "视频" && (file.size / 1024 / 1024) > 30) {
+      //     this.$message.warning('请上传30M以内的视频')
+      //     return false;
+      // }
+      this.uploading = true;
+      this.originalFileName = file.name;
+      if (this.isAddSection) this.sectionForm.sectionName = file.name.substring(0, file.name.lastIndexOf("."));
+      this.fileType = file.name.substring(file.name.lastIndexOf(".") + 1);
+      this.showProgress = true
+    },
+    handleExceed (files, fileList) {
+      this.$message.warning(
+        `当前限制选择 1 个文件，如需更换，请删除上一个文件再重新选择！`
+      );
+    },
+    // 自定义上传
+    handleRequest (data) {
+      const param = new FormData()
+      param.append('file', data.file)
+      const config = {
+        timeout: 10000000000,
+        headers: {
+          'Accept': '*/*',
+          'Content-Type': 'multipart/form-data'
         },
-        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 {
-                this.sorting = false
-              }
-            } else {
-              this.$router.back()
-            }
+        // 获取上传进度，自带的组件上传进度不准确
+        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
+      })
+    },
+    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();
+    },
+    transferType (ext) {
+      if ("jpg,jpeg,png,gif,svg,psd".includes(ext)) return "图片";
+      if ("mp4,3gp,mov,m4v,avi,dat,mkv,flv,vob,rmvb,rm,qlv".includes(ext)) return "视频";
+      return ext;
+    },
+    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: '置顶'
           }
+        ]
+        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: '置末'
         },
-        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) {
-            //     this.$message.error("请上传10M以内的文件");
-            //     return false;
-            // }
-            // if (type == "视频" && (file.size / 1024 / 1024) > 30) {
-            //     this.$message.warning('请上传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) {
-            this.$message.warning(
-                `当前限制选择 1 个文件，如需更换，请删除上一个文件再重新选择！`
-            );
-        },
-        // 自定义上传
-        handleRequest(data) {
-          const param = new FormData()
-          param.append('file', data.file)
-          const config = {
-            timeout: 10000000000,
-            headers: {
-              'Accept': '*/*',
-              'Content-Type': 'multipart/form-data'
-            },
-            // 获取上传进度，自带的组件上传进度不准确
-            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
-            }
+        ...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)
           }
-          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
-          })
-        },
-        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();
-        },
-        transferType(ext) {
-            if ("jpg,jpeg,png,gif,svg,psd".includes(ext)) return "图片";
-            if ("mp4,3gp,mov,m4v,avi,dat,mkv,flv,vob,rmvb,rm,qlv".includes(ext)) return "视频";
-            return ext;
-        },
-        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)
-            })
+        })
+        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.reorder, 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.deleteChapter}/${id}`).then(res => {
+            this.$message.success("删除成功");
+            this.getData();
+          }).catch(res => {
+          });
+        })
+        .catch(() => {
+        });
+    },
+    closeSection () {
+      this.isAddSection = false;
+      this.progressPercent = 0
+    },
+    addSection (id) {
+      this.chapterId = id;
+      this.sectionForm.sectionName = "";
+      this.fileUrl = "";
+      this.uploadList = [];
+      this.sectionId = "";
+      this.isAddSection = true;
+      this.sectionVisible = true;
+    },
+    chapterSubmit () {
+      if (!this.chapterName) return this.$message.warning("请填写章节名称");
+      let data = {
+        cid: this.id,
+        name: this.chapterName
+      };
+      if (this.chapterId) {
+        data.id = this.chapterId;
+        this.$put(this.api.editChapter, data).then(res => {
+          this.$message.success("修改成功");
+          this.chapterVisible = false;
+          this.getData();
+        })
+          .catch(err => {
+          });
+      } else {
+        this.$post(this.api.addChapter, data).then(res => {
+          this.$message.success("添加成功");
+          this.chapterVisible = false;
+          this.getData();
+        })
+          .catch(err => {
+          });
+      }
+    },
+    sectionSubmit (e) {
+      if (!this.sectionForm.sectionName) return this.$message.warning("请填写小节名称");
+      if (this.uploading) return this.$message.warning("资源正在上传中，请稍候");
+      if (!this.fileUrl && !this.fileId) return this.$message.warning("请上传资源");
+      let data = {
+        id: this.sectionId,
+        cid: this.id,
+        chapterId: this.chapterId,
+        name: this.sectionForm.sectionName,
+        fileId: this.fileId,
+        fileUrl: this.fileUrl,
+        fileName: this.fileName,
+        fileType: this.fileType,
+        originalFileName: this.originalFileName
+      };
+      this.$post(this.api.addSubsection, data).then(res => {
+        this.$message.success("添加成功");
+        this.sectionVisible = false;
+        this.getData();
+      })
+        .catch(err => {
+        })
+    },
+    closeSwitch () {
+      this.fileId = "";
+      this.fileName = "";
+      this.fileType = "";
+      this.fileUrl = "";
+      this.sectionId = "";
+      this.progressPercent = 0
+    },
+    // 下载资源
+    download (row) {
+      const { fileType } = 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({
+            id: "playerDownload",
+            width: "100%",
+            autoplay: false,
+            vid: row.fileId,
+            playauth: res.data.playAuth,
+            encryptType: 1 //当播放私有加密流时需要设置。
+          }, player => {
+            this.downloadFile(row.name, player._urls[0].Url)
           })
-          this.checkList = checkList
-          if (checkList.length) {
-            this.moveForm = {
-              id: '',
-              sort: 'bottom'
-            }
-            this.sortList = [
-              {
-                id: 'bottom',
-                name: '置末'
-              },
-              {
-                id: 'top',
-                name: '置顶'
-              }
-            ]
-            this.moveVisible = true
+        }).catch(res => { })
+      } else {
+        this.downloadFile(row.name + '.' + row.fileType, row.fileUrl)
+      }
+    },
+    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.$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: '置末'
-            },
-            ...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
-                });
+            this.player = new Aliplayer({
+              id: "player",
+              width: "100%",
+              autoplay: false,
+              vid: row.fileId,
+              playauth: this.playAuth,
+              encryptType: 1 //当播放私有加密流时需要设置。
             });
-            let data = {
-                chapterVOList: this.chapters
-            };
-            this.$post(this.api.reorder, 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.deleteChapter}/${id}`).then(res => {
-                        this.$message.success("删除成功");
-                        this.getData();
-                    }).catch(res => {
-                    });
-                })
-                .catch(() => {
-                });
-        },
-        closeSection() {
-            this.isAddSection = false;
-            this.progressPercent = 0
-        },
-        addSection(id) {
-            this.chapterId = id;
-            this.sectionName = "";
-            this.fileUrl = "";
-            this.uploadList = [];
-            this.sectionId = "";
-            this.isAddSection = true;
-            this.sectionVisible = true;
-        },
-        chapterSubmit() {
-            if (!this.chapterName) return this.$message.warning("请填写章节名称");
-            let data = {
-                cid: this.id,
-                name: this.chapterName
-            };
-            if (this.chapterId) {
-                data.id = this.chapterId;
-                this.$put(this.api.editChapter, data).then(res => {
-                    this.$message.success("修改成功");
-                    this.chapterVisible = false;
-                    this.getData();
-                })
-                    .catch(err => {
-                    });
-            } else {
-                this.$post(this.api.addChapter, data).then(res => {
-                    this.$message.success("添加成功");
-                    this.chapterVisible = false;
-                    this.getData();
-                })
-                    .catch(err => {
-                    });
-            }
-        },
-        sectionSubmit() {
-            if (!this.sectionName) return this.$message.warning("请填写小节名称");
-            if (this.uploading) return this.$message.warning("资源正在上传中，请稍候");
-            if (!this.fileUrl && !this.fileId) return this.$message.warning("请上传资源");
-            let data = {
-                id: this.sectionId,
-                cid: 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.addSubsection, data).then(res => {
-                this.$message.success("添加成功");
-                this.sectionVisible = false;
-                this.getData();
-            })
-                .catch(err => {
-                });
-        },
-        closeSwitch() {
-            this.fileId = "";
-            this.fileName = "";
-            this.fileType = "";
-            this.fileUrl = "";
-            this.sectionId = "";
-            this.progressPercent = 0
-        },
-        // 下载资源
-        download(row) {
-          const { fileType } = 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({
-                id: "playerDownload",
-                width: "100%",
-                autoplay: false,
-                vid: row.fileId,
-                playauth: res.data.playAuth,
-                encryptType: 1 //当播放私有加密流时需要设置。
-              }, player => {
-                this.downloadFile(row.name, player._urls[0].Url)
-              })
-            }).catch(res => {})
+          }
+        }).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.getSubsection}/${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.downloadFile(row.name + '.' + row.fileType, row.fileUrl)
+            this.isPPT = false;
+            this.isWord = false;
+            this.isExcel = false;
           }
-        },
-        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.getSubsection}/${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,
-                cid: 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.editSubsection, data).then(res => {
-                this.$message.success("更换成功");
-                this.switchVisible = false;
-                this.getData();
-            })
-                .catch(err => {
-                });
-        },
-        switchSubmit() {
-            if (this.uploading) return this.$message.warning("资源正在上传中，请稍候");
-            if (!this.fileUrl && !this.fileId) return this.$message.warning("请上传资源");
-            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 => {
-                });
-            } 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.deleteSubsection}/${row.id}`).then(res => {
-                        this.$message.success("删除成功");
-                        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 this.$message.warning("请填写小节名称");
-            let data = {
-                id: this.sectionId,
-                cid: this.id,
-                chapterId: this.chapterId,
-                name: this.sectionName
-            };
-            this.$put(this.api.editSubsection, data).then(res => {
-                this.$message.success("修改成功");
-                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.iframeSrc = res.previewUrl;
+          this.$nextTick(() => {
+            this.iframeOnload();
+          });
+        })
+          .catch(err => {
+          });
+      }
+    },
+    editSectionName (row, chapterId) {
+      this.chapterId = chapterId;
+      this.sectionId = row.id;
+      this.sectionForm.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.sectionForm.sectionName = row.sectionName;
+
+      this.switchVisible = true;
+    },
+    switchSubmitFile () {
+      let data = {
+        id: this.sectionId,
+        cid: this.id,
+        chapterId: this.chapterId,
+        name: this.sectionForm.sectionName,
+        fileId: this.fileId,
+        fileName: this.fileName,
+        fileType: this.fileType,
+        fileUrl: this.fileUrl,
+        originalFileName: this.originalFileName
+      };
+      this.$put(this.api.editSubsection, data).then(res => {
+        this.$message.success("更换成功");
+        this.switchVisible = false;
+        this.getData();
+      })
+        .catch(err => {
+        });
+    },
+    switchSubmit () {
+      if (this.uploading) return this.$message.warning("资源正在上传中，请稍候");
+      if (!this.fileUrl && !this.fileId) return this.$message.warning("请上传资源");
+      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 => {
+        });
+      } 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.deleteSubsection}/${row.id}`).then(res => {
+            this.$message.success("删除成功");
+            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.sectionForm.sectionName) return this.$message.warning("请填写小节名称");
+      let data = {
+        id: this.sectionId,
+        cid: this.id,
+        chapterId: this.chapterId,
+        name: this.sectionForm.sectionName
+      };
+      this.$put(this.api.editSubsection, data).then(res => {
+        this.$message.success("修改成功");
+        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;
     }
+  }
 };
 </script>
 
 <style scoped lang="scss">
 .page-content {
-  max-height: calc(100vh - 420px);
-  overflow: auto;
+    max-height: calc(100vh - 420px);
+    overflow: auto;
 }
-.action-btn{
-    color: #9076FF;
+.action-btn {
+    color: #9076ff;
     font-size: 14px;
-    border: #9076FF 1px solid;
+    border: #9076ff 1px solid;
     background-color: #fff;
     border-radius: 4px;
 }
@@ -869,26 +1020,26 @@ export default {
 
     &.disabled {
         color: #ccc;
-        cursor: not-allowed
+        cursor: not-allowed;
     }
 }
 /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;
 }
 .el-image-viewer__wrapper {
     transform: translateY(-10px);
-    transition: transform .5s;
+    transition: transform 0.5s;
 
     &.active {
-        transform: translateY(0)
+        transform: translateY(0);
     }
 }
 
@@ -913,8 +1064,8 @@ export default {
     height: 600px !important;
 }
 .player-download {
-  position: absolute;
-  top: -9999px;
+    position: absolute;
+    top: -9999px;
 }
 
 .fileIframe {
@@ -991,7 +1142,7 @@ export default {
                     margin-right: 6px;
                     font-size: 14px;
                     line-height: 14px;
-                    color: rgba(0, 0, 0, .65);
+                    color: rgba(0, 0, 0, 0.65);
                     white-space: nowrap;
                 }
             }
diff --git a/src/views/shop/addProduct/index.vue b/src/views/shop/addProduct/index.vue
index 1b47c22..001d65d 100644
--- a/src/views/shop/addProduct/index.vue
+++ b/src/views/shop/addProduct/index.vue
@@ -889,6 +889,8 @@ export default {
         if (e.typeIds && e.typeIds.length) e.typeIds = e.typeIds[0]
         e.mall.interfaceDiagrams = e.mall.interfaceDiagram ? e.mall.interfaceDiagram.split(',') : []
         e.mallAnnex.forEach(e => e.name = e.fileName)
+        if (e.systemId && e.systemId.split(',').filter(e => e != 12 && e != 13).length) this.isPython = true // 选择了python，则可选择主题
+        if (!e.mall.themeId) e.mall.themeId = ''
         if (e.mall.appletIcon) this.appletList = [
           {
             name: e.mall.appletIcon,