From 78a7ecd845d349f87853cd9da8d6f1db0a962396 Mon Sep 17 00:00:00 2001
From: yujialong <479214531@qq.com>
Date: Tue, 17 Dec 2024 10:29:59 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A4=87=E8=AF=BE=E7=AE=A1=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/index.js                    |    5 +-
 src/assets/img/empty.svg            |    1 +
 src/layouts/home/index.vue          |    2 +-
 src/layouts/sidebar/index.vue       |    2 +-
 src/pages/lesson/content/index.vue  | 1001 +++++++++++++++++++++++
 src/pages/lesson/content/source.vue |  426 ++++++++++
 src/pages/lesson/detail/index.vue   | 1161 +++++++++++++++++++++++++++
 src/pages/lesson/list/index.vue     |  307 +++++++
 src/pages/workbench/list/index.vue  |    2 +-
 src/router/modules/lesson.js        |   35 +
 10 files changed, 2938 insertions(+), 4 deletions(-)
 create mode 100644 src/assets/img/empty.svg
 create mode 100644 src/pages/lesson/content/index.vue
 create mode 100644 src/pages/lesson/content/source.vue
 create mode 100644 src/pages/lesson/detail/index.vue
 create mode 100644 src/pages/lesson/list/index.vue
 create mode 100644 src/router/modules/lesson.js

diff --git a/src/api/index.js b/src/api/index.js
index 45c82a1..fa374ea 100644
--- a/src/api/index.js
+++ b/src/api/index.js
@@ -180,7 +180,6 @@ export default {
   detailsOfCompetitionStage: `competition/competition/management/detailsOfCompetitionStage`,
   entryInformation: `competition/competition/team/entryInformation`,
   getCustomerOrder: `nakadai/nakadai/valueModuleManagement/getCustomerOrder`,
-  curriculumList: `nakadai/nakadai/curriculum/schoolCourse`,
   queryCustomer: `nakadai/nakadai/customer/queryCustomer`,
   getSchoolsByProvince: `nakadai/nakadai/school/getSchoolsByProvince`,
   getRedisCacheCompetition: `competition/competition/management/getRedisCache`,
@@ -518,6 +517,10 @@ export default {
   submitTheExamPaperForPractice: `exam/exam/paper/submitTheExamPaperForPractice`,
   examPaperRecordCache: `exam/exam/paper/examPaperRecordCache`,
 
+  curriculumList: `nakadai/nakadai/curriculum/curriculumList`,
+  createCurriculum: `nakadai/nakadai/curriculum/createCurriculum`,
+  modifyCourse: `nakadai/nakadai/curriculum/modifyCourse`,
+
   // 教师评语
   addComment: `evaluation/cevaluation/comment/addComment`,
   queryComment: `evaluation/evaluation/ccomment/queryComment`,
diff --git a/src/assets/img/empty.svg b/src/assets/img/empty.svg
new file mode 100644
index 0000000..01ac22e
--- /dev/null
+++ b/src/assets/img/empty.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1724313471191" class="icon" viewBox="0 0 1219 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4474" width="142.8515625" height="120" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M138.808889 649.102222h17.540741c4.740741 0.094815 8.533333 3.982222 8.533333 8.628148 0 2.275556-0.853333 4.456296-2.465185 6.068149-1.611852 1.611852-3.792593 2.56-6.068148 2.56h-17.540741v17.54074c-0.094815 4.740741-3.982222 8.533333-8.628148 8.533334-2.275556 0-4.456296-0.853333-6.068148-2.465186-1.611852-1.611852-2.56-3.792593-2.56-6.068148v-17.54074h-17.540741c-4.740741-0.094815-8.533333-3.982222-8.533333-8.628149 0-4.740741 3.697778-8.628148 8.533333-8.628148h17.540741v-17.540741c0.094815-4.740741 3.982222-8.533333 8.628148-8.533333 4.740741 0 8.628148 3.697778 8.628148 8.533333v17.540741z m1040.213333-55.466666v-17.540741c0-2.275556-0.948148-4.456296-2.56-6.068148-1.611852-1.611852-3.792593-2.465185-6.068148-2.465186-4.740741 0-8.533333 3.792593-8.628148 8.533334v17.540741h-17.540741c-2.275556 0-4.456296 0.948148-6.068148 2.56-1.611852 1.611852-2.465185 3.792593-2.465185 6.068148 0 4.645926 3.792593 8.628148 8.533333 8.628148h17.540741v17.540741c0 4.740741 3.887407 8.533333 8.628148 8.533333s8.533333-3.792593 8.628148-8.533333v-17.540741h17.540741c4.740741 0 8.533333-3.887407 8.533333-8.628148s-3.792593-8.533333-8.533333-8.628148h-17.540741z m-572.681481 259.318518H208.308148c-4.171852 0-8.154074-1.611852-11.188148-4.645926-2.939259-2.939259-4.645926-6.921481-4.551111-11.093333 0.094815-8.722963 7.111111-15.644444 15.739259-15.739259h71.68c-5.499259-9.481481-8.438519-20.29037-8.438518-31.383704V334.411852c0-16.687407 6.731852-32.616296 18.583703-44.468148 11.946667-11.757037 27.97037-18.394074 44.752593-18.29926h47.407407v-15.834074c0-16.687407 6.731852-32.616296 18.583704-44.373333 11.946667-11.757037 27.97037-18.394074 44.752593-18.394074h379.354074c16.782222 0 32.805926 6.542222 44.752592 18.299259 11.851852 11.757037 18.583704 27.780741 18.583704 44.468148v455.774815c0 11.377778-3.034074 22.091852-8.438519 31.383704h87.514075c8.722963 0 15.834074 7.016296 15.834074 15.739259 0 8.722963-7.016296 15.739259-15.834074 15.739259H777.576296v15.834074c0 11.377778-3.034074 22.091852-8.438518 31.383704h8.438518c8.722963 0 15.739259 6.921481 15.73926 15.739259-0.094815 8.722963-7.111111 15.644444-15.73926 15.73926h-83.152592c7.395556 12.325926 5.404444 28.16-4.835556 38.21037-12.325926 12.325926-32.331852 12.325926-44.752592 0l-38.494815-38.4z m59.069629-35.745185H715.851852c17.445926 0 31.573333-14.222222 31.573333-32.047408V321.327407c0-17.256296-13.653333-31.099259-30.625185-31.099259H334.127407c-16.877037 0-30.625185 13.937778-30.625185 31.099259v463.928889c0 17.635556 14.317037 32.047407 31.573334 32.047408h240.64l-8.154075-8.248889c-8.059259-8.059259-11.188148-19.816296-8.248888-30.90963l-14.980741-15.075555C497.777778 798.056296 431.976296 790.755556 394.145185 746.571852c-38.020741-44.278519-35.745185-110.648889 5.214815-152.082963 40.96-41.623704 107.33037-43.994074 151.22963-5.594074 44.088889 38.4 51.105185 104.675556 16.118518 151.608889l14.980741 15.075555c10.998519-2.939259 22.660741 0.18963 30.625185 8.248889l53.096296 53.380741z m113.682963-69.30963H826.785185c17.540741-0.18963 31.573333-14.411852 31.573334-31.952592V252.776296c0-17.73037-14.127407-31.952593-31.573334-31.952592H446.008889c-17.540741 0.18963-31.573333 14.411852-31.573333 31.952592v16.023704h301.131851c16.877037 0 32.995556 6.637037 44.847408 18.583704 11.946667 12.041481 18.583704 28.254815 18.583704 45.131852l0.094814 415.383703zM211.626667 160.142222h24.082963c6.826667 0 12.325926 5.404444 12.325926 12.136297 0 3.223704-1.327407 6.352593-3.602963 8.628148-2.275556 2.275556-5.404444 3.508148-8.628149 3.508148h-24.082963v24.082963c0 6.826667-5.404444 12.325926-12.136296 12.325926-3.223704 0-6.352593-1.327407-8.628148-3.602963-2.275556-2.275556-3.508148-5.404444-3.508148-8.628148v-24.082963h-24.082963c-3.223704 0-6.352593-1.232593-8.722963-3.508149-2.275556-2.275556-3.602963-5.404444-3.602963-8.628148 0-3.223704 1.327407-6.352593 3.602963-8.628148 2.275556-2.275556 5.404444-3.508148 8.628148-3.508148h24.082963v-24.082963c0-6.826667 5.404444-12.325926 12.136296-12.325926 3.223704 0 6.352593 1.327407 8.628149 3.602963 2.275556 2.275556 3.508148 5.404444 3.508148 8.628148v24.082963zM26.074074 831.146667c0-7.68 7.111111-13.842963 15.54963-13.842963h93.677037c8.628148 0 15.54963 6.162963 15.549629 13.842963s-7.111111 13.842963-15.549629 13.842963H41.623704c-4.171852 0-8.059259-1.422222-10.998519-4.077037-2.844444-2.465185-4.551111-6.068148-4.551111-9.765926z m504.699259-105.623704c19.247407-19.247407 26.832593-47.407407 19.721482-73.671111-7.016296-26.358519-27.591111-46.933333-53.94963-53.94963-26.358519-7.016296-54.423704 0.474074-73.671111 19.721482-29.487407 29.866667-29.297778 77.842963 0.379259 107.52 29.677037 29.677037 77.748148 29.866667 107.52 0.379259z m-171.804444-365.985185c0-7.68 7.111111-13.842963 16.023704-13.842963h176.071111c8.817778 0 16.023704 6.257778 16.023703 13.842963 0 7.68-7.205926 13.842963-16.023703 13.842963H374.992593c-4.266667 0-8.343704-1.422222-11.282963-4.077037-2.939259-2.37037-4.645926-5.973333-4.740741-9.765926z m0 83.247407c0-7.68 7.205926-13.842963 16.118518-13.842963h259.128889c8.817778 0 16.023704 6.162963 16.023704 13.842963s-7.205926 13.842963-16.023704 13.842963H375.087407c-4.266667 0-8.343704-1.517037-11.377777-4.077037-2.939259-2.465185-4.740741-5.973333-4.740741-9.765926z m0 83.152593c0-7.68 6.921481-13.842963 15.36-13.842963h107.899259c8.533333 0 15.36 6.162963 15.36 13.842963s-6.921481 13.842963-15.36 13.842963H374.328889c-4.077037 0-7.964444-1.422222-10.903704-4.077037-2.74963-2.37037-4.456296-5.973333-4.456296-9.765926zM60.776296 428.847407c-26.832593 0-48.545185-21.712593-48.545185-48.545185 0-26.832593 21.712593-48.545185 48.545185-48.545185 26.832593 0 48.545185 21.712593 48.545185 48.545185 0 26.832593-21.712593 48.545185-48.545185 48.545185z m0-27.685926c11.472593 0 20.764444-9.291852 20.764445-20.764444 0-11.472593-9.291852-20.764444-20.764445-20.764444-11.472593 0-20.764444 9.291852-20.764444 20.764444 0 11.472593 9.291852 20.764444 20.764444 20.764444z m984.746667-69.404444c-26.832593 0-48.545185-21.712593-48.545185-48.545185 0-26.832593 21.712593-48.545185 48.545185-48.545185s48.545185 21.712593 48.545185 48.545185c0 26.832593-21.712593 48.545185-48.545185 48.545185z m0-27.685926c11.472593 0 20.764444-9.291852 20.764444-20.764444 0-11.472593-9.291852-20.764444-20.764444-20.764445-11.472593 0-20.764444 9.291852-20.764444 20.764445 0 11.472593 9.291852 20.764444 20.764444 20.764444z m0 0" fill="#bfbfbf" p-id="4475"></path></svg>
\ No newline at end of file
diff --git a/src/layouts/home/index.vue b/src/layouts/home/index.vue
index 50c574a..5121f7a 100644
--- a/src/layouts/home/index.vue
+++ b/src/layouts/home/index.vue
@@ -121,7 +121,7 @@ export default {
       handler (val) {
         this.path = val
         // 是否显示左侧导航
-        this.showSidebar = ['/assessment/list', '/achievement/list', '/evaluation/list', '/course/list', '/review/list', '/information/list', '/project/list', '/resourse/list', '/exam/list', '/review', '/theoreticalCourse', '/resourse'].includes(val)
+        this.showSidebar = ['/assessment/list', '/achievement/list', '/evaluation/list', '/course/list', '/review/list', '/information/list', '/project/list', '/resourse/list', '/exam/list', '/review/list', '/lesson/list', '/resourse/list'].includes(val)
       },
       immediate: true
     }
diff --git a/src/layouts/sidebar/index.vue b/src/layouts/sidebar/index.vue
index 38c7be9..d01905f 100644
--- a/src/layouts/sidebar/index.vue
+++ b/src/layouts/sidebar/index.vue
@@ -72,7 +72,7 @@ export default {
           title: '理论考试系统'
         },
         {
-          index: '/exam1/list',
+          index: '/lesson/list',
           title: '备课管理'
         },
       ],
diff --git a/src/pages/lesson/content/index.vue b/src/pages/lesson/content/index.vue
new file mode 100644
index 0000000..9c18a0d
--- /dev/null
+++ b/src/pages/lesson/content/index.vue
@@ -0,0 +1,1001 @@
+<template>
+  <div>
+    <el-card shadow="hover" class="mgb20">
+      <div class="flex-between">
+        <el-page-header @back="back" :content="name + '/' + (sorting ? '编辑排序' : '内容设置')"></el-page-header>
+      </div>
+    </el-card>
+
+    <div class="page">
+      <div class="left">
+        <div class="flex-between">
+          <h6 class="title">课程目录</h6>
+          <el-button type="primary" size="mini" @click="addChapter" v-auth="'/curriculum:内容设置:添加章节'">新增章节</el-button>
+        </div>
+        <ul class="chapters">
+          <li v-for="(chapter, i) in chapters" :key="i" :class="{ active: chapterId === chapter.id }">
+            <span class="name ellipsis" @click="chapterClick(chapter)">{{ chapter.name }}</span>
+            <el-link :underline="false" type="primary" @click="editChapter(chapter)">修改名称</el-link>
+            <el-link v-if="i" class="del" :underline="false" type="primary" @click="delChapter(chapter.id)">删除</el-link>
+          </li>
+        </ul>
+      </div>
+      <div class="right">
+        <div class="flex-between">
+          <el-input style="width: 300px" placeholder="请输入资源名称" prefix-icon="el-icon-search" v-model="keyword"
+            clearable></el-input>
+          <div>
+            <el-button class="action-btn" @click="showSource" v-auth="'/curriculum:内容设置:修改章节名称'">添加系统资源</el-button>
+            <el-button class="action-btn" @click="addSection" v-auth="'/curriculum:内容设置:添加小节'">本地上传</el-button>
+            <el-button class="action-btn" @click="move" v-auth="'/curriculum:内容设置:删除章节'">批量移动</el-button>
+            <el-button class="action-btn" v-auth="'/curriculum:内容设置:删除章节'" @click="batchDelSection">批量移除</el-button>
+          </div>
+        </div>
+
+        <ul class="sections">
+          <li v-for="(section, i) in sections" :key="i">
+            <div class="section-left">
+              <el-checkbox v-model="section.check"></el-checkbox>
+              <span class="serial">{{ i + 1 }}.</span>
+              <img v-if="section.fileType === 'pptx'" src="@/assets/img/exts/ppt.png" alt="">
+              <img v-else-if="section.fileType === 'mp4'" src="@/assets/img/exts/video.png" alt="">
+              <img v-else-if="section.fileType === 'doc' || section.fileType === 'docx'"
+                src="@/assets/img/exts/word.png" alt="">
+              <img v-else-if="section.fileType === 'xlsx' || section.fileType === 'xls'"
+                src="@/assets/img/exts/excel.png" alt="">
+              <img v-else-if="section.fileType === 'txt'" src="@/assets/img/exts/txt.png" alt="">
+              <img v-else-if="section.fileType === 'pdf'" src="@/assets/img/exts/pdf.png" alt="">
+              <img v-else src="@/assets/img/exts/pic.png" alt="">
+              <span class="name">{{ section.name }}</span>
+            </div>
+            <div class="section-actions">
+              <el-button type="text" @click="download(section)" v-auth="'/curriculum:内容设置:下载'">下载</el-button>
+              <el-button type="text" @click="preview(section)" v-auth="'/curriculum:内容设置:查看'">预览</el-button>
+              <el-button type="text" @click="editSectionName(section)"
+                v-auth="'/curriculum:内容设置:修改小节名称'">修改资源名称</el-button>
+              <el-button type="text" @click="switchFile(section)" v-auth="'/curriculum:内容设置:更换文件'">更换</el-button>
+              <el-button type="text" @click="delSection(section)" v-auth="'/curriculum:内容设置:删除小节'">移除</el-button>
+            </div>
+          </li>
+        </ul>
+      </div>
+    </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 ref="form" :model="sectionForm" label-width="80px" @submit.native.prevent>
+        <el-form-item label="资源添加">
+          <Upload :max-size="100000" :file-list="uploadList" :on-remove="handleRemove" @beforeUpload="beforeUpload"
+            @onSuccess="uploadSuccess">
+            <template slot="tip">
+              <p>视频请上传MP4格式，大小不超过150M；office文件大小不要超过10M</p>
+            </template>
+          </Upload>
+        </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">
+        <Upload :max-size="100000" :file-list="uploadList" :on-remove="handleRemove" @beforeUpload="beforeUpload"
+          @onSuccess="uploadSuccess">
+          <div slot="tip"></div>
+        </Upload>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="switchVisible = false">取消</el-button>
+        <el-button type="primary" @click="switchSubmit">确定</el-button>
+      </span>
+    </el-dialog>
+
+    <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 || videoSrc" class="el-image-viewer__wrapper" :class="{ active: iframeSrc }"
+      style="z-index: 2000">
+      <div class="el-image-viewer__mask"></div>
+      <span class="el-image-viewer__btn el-image-viewer__close" :class="{ 'doc-close': isWord }"
+        :style="{ top: isWord ? '50px' : '5px' }" @click="closeIframe"><i class="el-icon-circle-close"
+          style="color: #fff"></i></span>
+      <div class="el-image-viewer__canvas">
+        <iframe v-if="iframeSrc" class="fileIframe" id="fileIframe" :src="iframeSrc" frameborder="0"></iframe>
+        <video v-if="videoSrc" class="video" width="1200" height="600" autoplay controls>
+          <source :src="videoSrc" type="video/mp4">
+          您的浏览器不支持 video 标签。
+        </video>
+        <template v-if="showMask">
+          <div class="mask" style="width: 200px;height: 30px;top: 53px;right: 320px"></div>
+          <div class="mask" style="width: 175px;height: 30px;top: 53px;right: 5px"></div>
+        </template>
+        <template v-if="showMask1">
+          <div class="word-mask1" style="width: 200px;height: 50px;"></div>
+          <div class="word-mask" style="height: 40px;top: 48px;"></div>
+          <div class="word-mask2" style="top: 55px;left: 28%;width: 44%;height: calc(100% - 80px);"></div>
+        </template>
+        <template v-if="showMask2 && iframeSrc">
+          <div class="excel-mask1" style="height: 48px;"></div>
+        </template>
+      </div>
+    </div>
+    <div v-show="playAuth" class="el-image-viewer__wrapper" :class="{ active: playAuth }" style="z-index: 2000">
+      <div class="el-image-viewer__mask"></div>
+      <span class="el-image-viewer__btn el-image-viewer__close" @click="closePlayer"><i class="el-icon-circle-close"
+          style="color: #fff"></i></span>
+      <div class="player" id="player"></div>
+    </div>
+
+    <Pdf :visible.sync="pdfVisible" :src.sync="pdfSrc" />
+    <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>
+
+    <Source :visible.sync="sourceVisible" />
+  </div>
+</template>
+
+<script>
+import { Loading } from "element-ui";
+import Pdf from "@/components/pdf";
+import Upload from '@/components/upload';
+import Oss from '@/components/upload/upload.js'
+import Util from '@/libs/util'
+import Source from './source'
+
+export default {
+  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: ''
+      },
+      keyword: '',
+      searchTimer: null,
+      fileId: "",
+      fileName: "",
+      fileUrl: "",
+      originalFileName: "",
+      fileType: "",
+      videoSrc: '',
+      playAuth: "",
+      player: null,
+      previewImg: "",
+      iframeSrc: "",
+      curFile: {},
+      isAddSection: false,
+      isWord: false,
+      isPPT: false,
+      isExcel: false,
+      showMask: false,
+      showMask1: false,
+      showMask2: false,
+      loadIns: null,
+      pdfVisible: false,
+      pdfSrc: "",
+      previewing: false,
+      showProgress: false,
+      progressPercent: 0,
+      moveVisible: false,
+      checkList: [],
+      sortList: [
+        {
+          id: 'bottom',
+          name: '置末'
+        },
+        {
+          id: 'top',
+          name: '置顶'
+        }
+      ],
+      moveForm: {
+        id: '',
+        sort: 'bottom'
+      },
+      sourceVisible: false,
+      sections: []
+    };
+  },
+  components: { Pdf, Upload, Source },
+  mounted () {
+    this.insertScript();
+    this.id && this.getData();
+    // 处理预览资源后返回弹框不会消失的问题
+    if (window.history && window.history.pushState) {
+      history.pushState(null, null, document.URL);
+      window.addEventListener("popstate", this.back, false);
+    }
+  },
+  destroyed () {
+    window.removeEventListener("popstate", this.back, false);
+  },
+  methods: {
+    getData () {
+      this.$get(`${this.api.queryChaptersAndSubsections}/${this.id}`).then(res => {
+        const list = res.chapterList
+        if (list.length) {
+          list.forEach(e => {
+            e.subsectionList.forEach(n => {
+              n.check = false
+            })
+          })
+          if (this.chapterId) {
+            const cur = list.find(e => e.id === this.chapterId)
+            this.sections = cur ? cur.subsectionList : []
+          } else {
+            this.chapterClick(list[0])
+          }
+        }
+        this.chapters = list
+      }).catch(err => { })
+    },
+    // 处理多选
+    handleSelectionChange (val) {
+      this.multipleSelection = val
+    },
+    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) {
+      this.uploading = true;
+      this.originalFileName = file.name;
+      if (this.isAddSection) this.sectionForm.sectionName = file.name.substring(0, file.name.lastIndexOf("."));
+      this.fileType = Util.getFileExt(file.name)
+      this.showProgress = true
+    },
+    handleExceed (files, fileList) {
+      this.$message.warning(
+        `当前限制选择 1 个文件，如需更换，请删除上一个文件再重新选择！`
+      );
+    },
+    uploadSuccess (file) {
+      this.uploading = false
+      this.fileId = ''
+      this.fileType = file.format
+      this.fileUrl = file.url
+      this.fileName = file.name
+    },
+    uploadError (err, file, fileList) {
+      this.$message({
+        message: "上传出错，请重试！",
+        type: "error",
+        center: true
+      });
+    },
+    beforeRemove (file, fileList) {
+      if ((file.size / 1024 / 1024) < 10) {
+        return this.$confirm(`确定移除 ${file.name}？`);
+      }
+    },
+    handleRemove () {
+      Oss.del(this.fileUrl)
+      this.fileUrl = ''
+    },
+    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('请选择小节！')
+      }
+    },
+    // 批量移除小节
+    batchDelSection () {
+      const list = this.sections.filter(e => e.check)
+      this.$confirm(list.length ? '此删除操作不可逆，是否确认删除选中项？' : '此删除操作不可逆，是否确认全部资源？', "提示", {
+        type: "warning"
+      }).then(async () => {
+        await this.$post(this.api.deleteSubsectionBatch, {
+          chapterId: this.chapterId,
+          subsectionIds: list.map(e => e.id)
+        })
+        this.sections.forEach(e => {
+          e.check = false
+        })
+
+        this.$message.success("删除成功")
+        this.getData()
+      }).catch(() => { })
+    },
+    // 目标章节选择回调
+    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: '置顶'
+        }
+      ]
+    },
+    // 资源移动校验
+    async 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)
+      })
+
+      chapters.forEach((n, k) => {
+        n.sort = k + 1
+        n.subsectionList.forEach((j, i) => {
+          j.sort = i + 1
+          j.chapterId = n.id
+        })
+      })
+      await this.$post(this.api.reorder, {
+        chapterVOList: this.chapters
+      })
+      this.getData()
+    },
+    // 选中章节
+    chapterClick (row) {
+      row.subsectionList.map(e => this.$set(e, 'check', false))
+      this.sections = row.subsectionList
+      this.chapterId = row.id
+    },
+    // 编辑章节名称
+    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
+    },
+
+    // 添加系统资源
+    showSource () {
+      this.sourceVisible = true
+    },
+    addSection (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, fileId } = row
+      // 下载ppt
+      if (fileType === 'pptx') {
+        this.downloadFile(row.originalFileName || row.name, row.fileUrl)
+      } else if (fileId) {
+        // 阿里云点播视频，先生成视频，再拿到视频地址去下载（现在已经去掉视频点播的方法，但是还需要兼容历史数据）
+        this.$get(`${this.api.getPlayAuth}/${fileId}`).then(res => {
+          new Aliplayer({
+            id: "playerDownload",
+            width: "100%",
+            autoplay: false,
+            vid: fileId,
+            playauth: res.playAuth,
+            encryptType: 1 //当播放私有加密流时需要设置。
+          }, player => {
+            this.downloadFile(row.name, player._urls[0].Url)
+          })
+        }).catch(res => { })
+      } else {
+        this.downloadFile(row.name + '.' + row.fileType, row.fileUrl)
+      }
+    },
+    preview (row) {
+      if (this.transferType(row.fileType) == "视频") {
+        // 阿里云视频点播
+        if (row.fileId) {
+          this.$get(`${this.api.getPlayAuth}/${row.fileId}`).then(res => {
+            this.playAuth = res.playAuth;
+            if (this.player) {
+              this.player.replayByVidAndPlayAuth(row.fileId, this.playAuth);
+            } else {
+              this.player = new Aliplayer({
+                id: "player",
+                width: "100%",
+                autoplay: false,
+                vid: row.fileId,
+                playauth: this.playAuth,
+                encryptType: 1 //当播放私有加密流时需要设置。
+              });
+            }
+          }).catch(res => { });
+        } else {
+          this.videoSrc = row.fileUrl
+        }
+      } else if (this.transferType(row.fileType) == "图片") {
+        this.previewImg = row.fileUrl;
+      } else if (row.fileType == "pdf") {
+        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) {
+      this.sectionId = row.id;
+      this.sectionForm.sectionName = row.name;
+      this.sectionNameVisible = true;
+    },
+    switchFile (row) {
+      this.uploadList = []
+      this.curFile = {
+        fileId: row.fileId,
+        fileName: row.fileName,
+        fileType: row.fileType,
+        fileUrl: row.fileUrl
+      }
+      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("请上传资源");
+      this.switchSubmitFile();
+    },
+    delSection (row) {
+      this.$confirm("此删除操作不可逆，是否确认删除选中项？", "提示", {
+        type: "warning"
+      })
+        .then(() => {
+          this.$del(`${this.api.deleteSubsection}/${row.id}`).then(res => {
+            row.fileUrl && Oss.del(row.fileUrl)
+            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);
+        }
+      }
+    },
+    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.videoSrc = ''
+      this.showMask = false;
+      this.showMask1 = false;
+      this.showMask2 = false;
+      this.previewing = false;
+    },
+    back () {
+      // 如果是预览则关闭预览
+      if (this.previewing) {
+        this.closeIframe();
+      } else {
+        this.$router.push(this.$store.state.referrer || '/curriculum')
+      }
+    },
+  }
+};
+</script>
+
+<style scoped lang="scss">
+.page-content {
+  max-height: calc(100vh - 420px);
+  overflow: auto;
+}
+
+.action-btn {
+  color: #062c87;
+  font-size: 14px;
+  border: #062c87 1px solid;
+  background-color: #fff;
+  border-radius: 4px;
+}
+
+.btns {
+  position: absolute;
+  top: 12px;
+  right: 24px;
+
+  .el-button {
+    font-size: 14px;
+  }
+}
+
+.sort-icon {
+  font-size: 24px;
+  cursor: pointer;
+
+  &.disabled {
+    color: #ccc;
+    cursor: not-allowed;
+  }
+}
+
+/deep/.el-progress-bar {
+  padding-right: 70px;
+  margin-right: -70px;
+}
+
+.el-upload__tip {
+  position: absolute;
+  top: -4px;
+  right: 0;
+  width: 300px;
+  line-height: 1.4;
+}
+
+.el-image-viewer__wrapper {
+  transform: translateY(-10px);
+  transition: transform 0.5s;
+
+  &.active {
+    transform: translateY(0);
+  }
+}
+
+.el-image-viewer__close {
+  z-index: 10000;
+  top: 15px;
+  right: 15px;
+
+  &.doc-close {
+    i {
+      color: #000 !important;
+    }
+  }
+}
+
+.player {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 1200px !important;
+  height: 600px !important;
+}
+
+.player-download {
+  position: absolute;
+  top: -9999px;
+}
+
+.fileIframe {
+  z-index: 1;
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.mask {
+  z-index: 1000;
+  position: fixed;
+  background-color: rgb(57, 58, 61);
+}
+
+.word-mask {
+  z-index: 1000;
+  position: fixed;
+  right: 0;
+  width: 100%;
+  background-color: rgb(243, 242, 241);
+}
+
+.word-mask1 {
+  z-index: 1000;
+  position: fixed;
+  top: 0;
+  right: 0;
+  background-color: #2b579a;
+}
+
+.word-mask2 {
+  z-index: 1000;
+  position: fixed;
+  background-color: transparent;
+}
+
+.excel-mask1 {
+  z-index: 9;
+  position: absolute;
+  top: 0;
+  left: 20%;
+  width: 80%;
+  background-color: #107c41;
+}
+
+.page {
+  display: flex;
+
+  .left {
+    width: 400px;
+    height: calc(100vh - 247px);
+    padding: 0 15px 15px 0;
+    margin-right: 20px;
+    border-right: 1px solid #eee;
+    box-sizing: border-box;
+    overflow: auto;
+
+    .title {
+      font-size: 16px;
+    }
+
+    .chapters {
+      margin-top: 10px;
+    }
+
+    li {
+      display: flex;
+      padding: 5px 10px;
+
+      &.active {
+        background-color: #d5e7fb;
+      }
+    }
+
+    .name {
+      width: 68%;
+      margin-right: 20px;
+      font-size: 14px;
+      color: #333;
+      cursor: pointer;
+
+      &:hover {
+        color: #062c87;
+      }
+    }
+
+    .del {
+      margin-left: 10px;
+    }
+  }
+
+  .right {
+    flex: 1;
+
+    .sections {
+      margin-top: 20px;
+
+      li {
+        display: flex;
+        justify-content: space-between;
+        padding: 5px 10px;
+        margin-bottom: 10px;
+        background-color: #f9f9f9;
+      }
+
+      .section-left,
+      .section-right {
+        display: inline-flex;
+        align-items: center;
+      }
+
+      .serial {
+        margin: 0 8px;
+        font-size: 14px;
+        color: #858585;
+      }
+
+      .name {
+        margin-left: 10px;
+        font-size: 12px;
+        color: #333;
+
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/lesson/content/source.vue b/src/pages/lesson/content/source.vue
new file mode 100644
index 0000000..ab33339
--- /dev/null
+++ b/src/pages/lesson/content/source.vue
@@ -0,0 +1,426 @@
+<template>
+  <el-drawer title="添加系统资源" :visible.sync="sourceVisible" size="1200px" :close-on-click-modal="false"
+    custom-class="source-dia" @closed="closeDia">
+    <div class="overflow">
+      <div class="left">
+        <el-input style="width: 300px" placeholder="请输入资源名称" prefix-icon="el-icon-search" v-model="keyword"
+          clearable></el-input>
+        <div class="tabs mgb20">
+          <a class="item" v-for="(item, i) in tabs" :key="i" :class="{ active: i == active }" @click="tabChange(i)">{{
+            item
+          }}</a>
+        </div>
+
+        <div class="course">
+          <div v-for="(course, i) in course" :key="i" class="item">
+            <div class="line">
+              <i :class="`el-icon-caret-right arrow ${course.shrink ? 'active' : ''}`"
+                @click="course.shrink = !course.shrink"></i>
+              <el-checkbox class="check" v-model="course.check" @change="checkCourse(course)"></el-checkbox>
+              <img v-if="course.coverUrl" class="cover" :src="course.coverUrl" alt="">
+              <span class="course-name">{{ course.curriculumName }}</span>
+            </div>
+            <div v-if="course.shrink" class="chapters">
+              <!-- 章节 -->
+              <div v-for="(chapter, j) in course.chapters" :key="j" class="">
+                <div class="line">
+                  <i :class="`el-icon-caret-right arrow ${chapter.shrink ? 'active' : ''}`"
+                    @click="chapter.shrink = !chapter.shrink"></i>
+                  <el-checkbox class="check" v-model="chapter.check" @change="checkChapter(chapter, course)">{{
+                    chapter.name
+                  }}</el-checkbox>
+                </div>
+
+                <!-- 小节 -->
+                <div v-if="chapter.shrink" class="sections">
+                  <div v-for="(section, k) in chapter.subsections" :key="k" class="line">
+                    <img v-if="section.fileType === 'pptx'" src="@/assets/img/exts/ppt.png" alt="">
+                    <img v-else-if="section.fileType === 'mp4'" src="@/assets/img/exts/video.png" alt="">
+                    <img v-else-if="section.fileType === 'doc' || section.fileType === 'docx'"
+                      src="@/assets/img/exts/word.png" alt="">
+                    <img v-else-if="section.fileType === 'xlsx' || section.fileType === 'xls'"
+                      src="@/assets/img/exts/excel.png" alt="">
+                    <img v-else-if="section.fileType === 'txt'" src="@/assets/img/exts/txt.png" alt="">
+                    <img v-else-if="section.fileType === 'pdf'" src="@/assets/img/exts/pdf.png" alt="">
+                    <img v-else src="@/assets/img/exts/pic.png" alt="">
+                    <el-checkbox class="check" v-model="section.check" @change="checkSection(section, chapter)">{{
+                      section.name
+                    }}</el-checkbox>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="right">
+        <template v-if="checked.length">
+          <div class="flex-between m-b-10">
+            <p class="total">已选资源（共{{ checked.length }}个）</p>
+            <el-button type="text" @click="batchDelChecked">批量移除</el-button>
+          </div>
+
+          <el-input placeholder="请输入资源名称" prefix-icon="el-icon-search" v-model="checkedKeyword" clearable></el-input>
+
+          <div :class="['lines']">
+            <template v-for="(item, i) in checked">
+              <div v-if="item.name.includes(checkedKeyword)" :key="i" class="line">
+                <div class="check-left">
+                  <el-checkbox v-model="item.check"></el-checkbox>
+                  <span class="serial">{{ i + 1 }}</span>
+                  <el-tooltip effect="dark" :content="item.name" placement="top-start">
+                    <p class="checked-name ellipsis">{{ item.name }}</p>
+                  </el-tooltip>
+                </div>
+                <i class="el-icon-delete action-icon" @click="delChecked(item)"></i>
+              </div>
+            </template>
+          </div>
+        </template>
+        <div v-else class="empty">
+          <img class="icon" src="@/assets/img/empty.svg" alt="">
+          <p>暂无数据</p>
+        </div>
+
+      </div>
+    </div>
+
+    <div class="btns">
+      <el-button @click="sourceVisible = false">取消</el-button>
+      <el-button type="primary" :loading="submiting" @click="submit">确定</el-button>
+    </div>
+  </el-drawer>
+</template>
+<script>
+import Setting from '@/setting'
+import Util from '@/libs/util'
+import _ from 'lodash'
+export default {
+  props: ['visible'],
+  data () {
+    return {
+      sourceVisible: false,
+      active: 'tab1',
+      tabs: {
+        tab1: '教学课程',
+        tab2: '精品课程',
+        tab3: '文件素材',
+      },
+      keyword: '',
+      searchTimer: null,
+      checkedKeyword: '',
+
+      allSections: [],
+      course: [],
+
+      checked: [],
+      submiting: false,
+      loaded: 0,
+    };
+  },
+  watch: {
+    'keyword': function (val) {
+      clearTimeout(this.searchTimer)
+      this.searchTimer = setTimeout(this.getCourse, 500)
+    },
+    visible () {
+      this.sourceVisible = this.visible
+      this.visible && this.init()
+    }
+  },
+  mounted () {
+
+  },
+  methods: {
+    // 初始化
+    init () {
+      this.getCourse()
+    },
+    // 课程列表
+    async getCourse () {
+      const { list } = await this.$post(`${this.api[this.active === 'tab1' ? 'curriculumTree' : 'boutiqueCurriculumTree']}?name=${this.keyword}`)
+      if (list.length) {
+        const all = []
+        list.forEach(e => {
+          e.shrink = false
+          e.check = false
+          e.chapters.forEach(n => {
+            n.shrink = false
+            n.check = false
+            all.push(...n.subsections)
+            n.subsections.forEach(m => {
+              m.check = false
+            })
+          })
+        })
+        list[0].shrink = true
+        list[0].chapters[0].shrink = true
+        this.allSections = all
+      }
+      this.course = list
+    },
+    initData () {
+      this.page = 1;
+      this.getData();
+    },
+    tabChange (index) {
+      this.active = index
+      this.getCourse()
+    },
+    // 课程多选回调
+    checkCourse (row) {
+      const { check } = row
+      const { checked } = this
+      row.chapters.forEach(e => {
+        e.check = check
+        e.subsections.forEach(n => {
+          n.check = check
+          const cur = checked.findIndex(m => m.id === n.id)
+          if (check) {
+            if (cur === -1) {
+              const section = _.cloneDeep(n)
+              section.check = false
+              checked.push(section)
+            }
+          } else {
+            cur !== -1 && checked.splice(cur, 1)
+          }
+        })
+      })
+    },
+    // 章节多选回调
+    checkChapter (row, course) {
+      const { check } = row
+      const { checked } = this
+      row.subsections.forEach(n => {
+        n.check = check
+        const cur = checked.findIndex(m => m.id === n.id)
+        if (check) {
+          if (cur === -1) {
+            const section = _.cloneDeep(n)
+            section.check = false
+            checked.push(section)
+          }
+        } else {
+          cur !== -1 && checked.splice(cur, 1)
+        }
+      })
+      course.check = course.chapters.every(e => e.check)
+    },
+    // 小节多选回调
+    async checkSection (row, chapter) {
+      const { check } = row
+      const { checked } = this
+      const cur = checked.findIndex(m => m.id === row.id)
+      if (check) {
+        if (cur === -1) {
+          const section = _.cloneDeep(row)
+          section.check = false
+          this.checked.push(section)
+        }
+      } else {
+        cur !== -1 && this.checked.splice(cur, 1)
+      }
+      chapter.check = chapter.subsections.every(e => e.check)
+    },
+
+    // 批量移除
+    async batchDelChecked (val) {
+      try {
+        const checked = this.checked.filter(e => e.check)
+        if (checked.length) {
+          checked.map(e => {
+            const cur = this.allSections.find(n => n.id === e.id)
+            if (cur) {
+              cur.check = false
+            }
+          })
+          this.checked = this.checked.filter(e => !e.check)
+        } else {
+          Util.warningMsg('请选择数据')
+        }
+      } catch (e) { }
+    },
+    // 已选单个删除
+    async delChecked (item) {
+      try {
+        const cur = this.allSections.find(e => e.id === item.id)
+        if (cur) cur.check = false
+        this.checked.splice(this.checked.findIndex(e => e.id === item.id), 1)
+      } catch (e) { }
+    },
+    // 提交
+    async submit () {
+      try {
+        if (this.submiting) return false
+        this.submiting = true
+        const { checked } = this
+        const { chapterId, id } = this.$parent
+        const result = checked.map(e => {
+          return {
+            chapterId,
+            cid: id,
+            resourceId: e.id,
+            type: e.cid ? 0 : 1,
+          }
+        })
+        const res = await this.$post(this.api.combinationResource, result)
+        this.sourceVisible = false
+        this.$parent.getData()
+        this.submiting = false
+      } catch (e) {
+        this.submiting = false
+      }
+    },
+    // 弹框关闭回调
+    closeDia () {
+      this.$emit('update:visible', false)
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+/deep/.source-dia {
+  .el-drawer__header {
+    padding-bottom: 20px;
+    margin-bottom: 0;
+    border-bottom: 1px solid #eee;
+  }
+
+  .overflow {
+    display: flex;
+  }
+
+  .btns {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    padding: 14px 0;
+    text-align: center;
+    background-color: #fff;
+    box-shadow: 4px -2px 6px 0px rgba(198, 198, 198, 0.3500);
+  }
+
+
+  .empty {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+    font-size: 14px;
+    text-align: center;
+    color: #a3a3a3;
+  }
+
+  .left {
+    width: 700px;
+    padding: 0 20px;
+    padding: 15px;
+    border-right: 1px solid #eee;
+    box-sizing: border-box;
+
+    .course {
+      height: calc(100vh - 263px);
+      overflow: auto;
+
+      .item {
+        padding: 10px;
+        margin-bottom: 10px;
+        background-color: #f9f9f9;
+      }
+    }
+
+    .line {
+      display: flex;
+      align-items: center;
+    }
+
+    .arrow {
+      font-size: 16px;
+      color: #9f9f9f;
+      cursor: pointer;
+      transition: .3s;
+
+      &.active {
+        transform: rotate(90deg);
+      }
+    }
+
+    .check {
+      margin: 0 10px;
+    }
+
+    .cover {
+      width: 100px;
+      max-height: 80px;
+      margin-right: 15px;
+    }
+
+    .course-name {
+      font-size: 14px;
+      color: #333;
+    }
+
+    .chapters {
+      padding-left: 21px;
+      margin-top: 10px;
+
+      .line {
+        margin-bottom: 10px;
+      }
+    }
+
+    .chapter-name {
+      font-size: 13px;
+      color: #ccc;
+    }
+
+    .sections {
+      padding-left: 26px;
+    }
+  }
+
+  .right {
+    flex: 1;
+    padding: 15px;
+
+    .lines {
+      height: calc(100vh - 228px);
+      padding-right: 10px;
+      margin-top: 10px;
+      overflow: auto;
+    }
+
+    .line {
+      display: flex;
+      padding: 5px 0;
+      color: #333;
+    }
+
+    .serial {
+      width: 32px;
+      margin: 0 12px;
+      text-align: center;
+      white-space: nowrap;
+    }
+
+    .check-left {
+      display: inline-flex;
+      align-items: center;
+    }
+
+    .checked-name {
+      width: 360px;
+      margin-right: 20px;
+    }
+
+    .action-icon {
+      font-size: 14px;
+      cursor: pointer;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/lesson/detail/index.vue b/src/pages/lesson/detail/index.vue
new file mode 100644
index 0000000..f8f049b
--- /dev/null
+++ b/src/pages/lesson/detail/index.vue
@@ -0,0 +1,1161 @@
+<template>
+  <div class="wrap">
+    <el-card shadow="hover" class="m-b-20">
+      <div class="flex-between">
+        <el-page-header @back="back" :content="'新建课程'"></el-page-header>
+      </div>
+    </el-card>
+    <div class="page">
+      <div class="overflow">
+        <ul :class="['steps', { pointer: cid }]">
+          <li :class="{ active: step === 1, done: step > 1 }" @click="toStep(1)">
+            <span class="circle">1</span>
+            <p class="text">填写课程信息</p>
+          </li>
+          <li :class="{ active: step === 2, done: step > 2 }" @click="toStep(2)">
+            <span class="circle circle2">2</span>
+            <p class="text">设置练习项目</p>
+          </li>
+          <li :class="{ active: step === 3, done: step > 3 }" @click="toStep(3)">
+            <span class="circle circle3">3</span>
+            <p class="text">设置考核项目</p>
+          </li>
+          <li :class="{ done: step > 3 }">
+            <span class="circle circle4">4</span>
+            <p class="text">完成</p>
+          </li>
+        </ul>
+        <div class="page-content">
+          <!-- 第一步 -->
+          <el-form v-show="step === 1" class="form" :model="form" :rules="rules" ref="form" label-width="100px">
+            <el-form-item label="课程名称" prop="curriculumName">
+              <el-input class="w-input" id="focus-el" placeholder="请输入课程名称"
+                v-model.trim="form.curriculumName"></el-input>
+            </el-form-item>
+            <el-form-item label="课程类别" prop="curriculumType">
+              <el-select class="w-input" v-model="form.curriculumType" clearable placeholder="请选择课程类型">
+                <el-option label="实训课程" :value="1"></el-option>
+                <el-option label="理论课程" :value="0"></el-option>
+                <el-option label="理实课程" :value="2"></el-option>
+              </el-select>
+            </el-form-item>
+
+            <el-form-item class="req" label="适用专业" required>
+              <div class="subject">
+                <div v-for="(item, i) in form.curriculumDisciplines" :key="i" class="line">
+                  <el-form-item label="学科类别">
+                    <el-select v-model="item.categoryId" @change="getProfessionalClass(item)">
+                      <el-option v-for="(item, index) in subjectList" :key="index" :label="item.disciplineName"
+                        :value="item.disciplineId"></el-option>
+                    </el-select>
+                  </el-form-item>
+                  <el-form-item label="专业类">
+                    <el-select v-model="item.professionalCategoryId" :disabled="item.categoryId ? false : true"
+                      @change="getProfessional(item)">
+                      <el-option v-for="(item, index) in item.professionalClassList" :key="index"
+                        :label="item.professionalClassName" :value="item.professionalClassId"></el-option>
+                    </el-select>
+                  </el-form-item>
+                  <el-form-item label="专业">
+                    <el-select v-model="item.professionalId" :disabled="item.professionalCategoryId ? false : true">
+                      <el-option v-for="(item, index) in item.professionalList" :key="index"
+                        :label="item.professionalName" :value="item.professionalId"></el-option>
+                    </el-select>
+                  </el-form-item>
+                  <i v-if="i" class="del el-icon-delete" @click="form.curriculumDisciplines.splice(i, 1)"></i>
+                </div>
+              </div>
+              <div class="subject-plus" @click="addSubject">
+                <i class="el-icon-circle-plus-outline"></i>
+              </div>
+            </el-form-item>
+
+            <el-form-item label="预计课时" prop="expectedCourse">
+              <el-select class="w-input" v-model="form.expectedCourse" clearable placeholder="请选择预计课时">
+                <el-option label="32课时" value="32课时"></el-option>
+                <el-option label="64课时" value="64课时"></el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item label="课程封面">
+              <el-card shadow="hover">
+                <div class="cover-wrap">
+                  <el-upload name="file" accept=".jpg,.png,.jpeg,.gif" ref="upload" drag :on-remove="handleRemove"
+                    :on-error="uploadError" :before-remove="beforeRemove" :limit="1" :on-exceed="handleExceed" action=""
+                    :http-request="handleRequest">
+                    <i class="el-icon-upload"></i>
+                    <div class="el-upload__text">
+                      <p>将图片拖到此处，或<em>点击上传</em></p>
+                      <p style="font-size: 12px;color: #9f9f9f;line-height: 1.4;">建议上传484*278像素图片</p>
+                    </div>
+                  </el-upload>
+                  <div class="preview">
+                    <p class="preview-title">默认图片预览</p>
+                    <img class="preview-pic" :src="form.coverUrl" alt="">
+                  </div>
+                </div>
+              </el-card>
+            </el-form-item>
+
+            <el-form-item label="课程简介" prop="briefIntroduction">
+              <Editor api-key='rnk6zw9v267xqz7pf98twt1vmrvltmd436je7a642pckltda' v-model="form.briefIntroduction"
+                :init="editorConfig" />
+            </el-form-item>
+            <el-form-item label="详情介绍" prop="teachingObjectives">
+              <Editor api-key='rnk6zw9v267xqz7pf98twt1vmrvltmd436je7a642pckltda' v-model="form.teachingObjectives"
+                :init="editorConfig" />
+            </el-form-item>
+          </el-form>
+
+          <!-- 第二步 -->
+          <template v-if="step === 2">
+            <div class="tool">
+              <ul class="filter">
+                <!-- <li>
+                  <label>搜索：</label>
+                  <el-input placeholder="请输入实训项目名称、理论试卷名称" suffix-icon="el-icon-search" v-model="form.keyWord" clearable
+                    size="small" style="width: 300px"></el-input>
+                </li> -->
+              </ul>
+              <div>
+                <el-button @click="handleBatchDelete(0)">批量移除</el-button>
+                <el-button @click="handleConfig(0)" icon="el-icon-plus" circle></el-button>
+              </div>
+            </div>
+
+            <div>
+              <el-table :data="practiceData" class="table" header-align="center" max-height="400"
+                @selection-change="handleSelectionPractice">
+                <el-table-column type="selection" width="55" align="center"></el-table-column>
+                <el-table-column type="index" width="100" label="序号" align="center"></el-table-column>
+                <el-table-column prop="projectName" label="项目名称" align="center">
+                  <template slot-scope="scope">
+                    {{ scope.row.projectName || scope.row.paperName }}
+                  </template>
+                </el-table-column>
+                <el-table-column prop="remark" label="备注名称" align="center"></el-table-column>
+                <el-table-column prop="systemName" label="系统名称" align="center"></el-table-column>
+                <el-table-column label="排序" align="center" width="100">
+                  <template slot-scope="scope">
+                    <el-input v-model.trim="scope.row.sort"
+                      @input="practiceSortChange(scope.row, scope.$index)"></el-input>
+                  </template>
+                </el-table-column>
+                <el-table-column label="展示控制" align="center" width="100">
+                  <template slot-scope="scope">
+                    <el-switch v-model="scope.row.isShow" :active-value="0" :inactive-value="1"
+                      :disabled="scope.row.disabled">
+                    </el-switch>
+                  </template>
+                </el-table-column>
+                <el-table-column label="操作" align="center" width="100">
+                  <template slot-scope="scope">
+                    <el-button :disabled="scope.row.disabled"
+                      @click.native.prevent="handleDelete(scope.$index, practiceData)">移除
+                    </el-button>
+                  </template>
+                </el-table-column>
+              </el-table>
+            </div>
+          </template>
+
+          <!-- 第三步 -->
+          <template v-else-if="step === 3">
+            <div class="mgb20" style="text-align: right;">
+              <el-button @click="handleBatchDelete(1)">批量移除</el-button>
+              <el-button @click="handleConfig(1)" icon="el-icon-plus" circle></el-button>
+            </div>
+            <div>
+              <el-table :data="assessmentData" class="table" header-align="center" max-height="400"
+                @selection-change="handleSelectionAssessment">
+                <el-table-column type="selection" width="55" align="center"></el-table-column>
+                <el-table-column type="index" width="100" label="序号" align="center"></el-table-column>
+                <el-table-column prop="projectName" label="项目名称" align="center">
+                  <template slot-scope="scope">
+                    {{ scope.row.projectName || scope.row.paperName }}
+                  </template>
+                </el-table-column>
+                <el-table-column prop="remark" label="备注名称" align="center"></el-table-column>
+                <el-table-column prop="systemName" label="系统名称" align="center"></el-table-column>
+                <el-table-column label="排序" align="center" width="100">
+                  <template slot-scope="scope">
+                    <el-input v-model.trim="scope.row.sort"
+                      @input="assessmentSortChange(scope.row, scope.$index)"></el-input>
+                  </template>
+                </el-table-column>
+                <el-table-column label="展示控制" align="center" width="100">
+                  <template slot-scope="scope">
+                    <el-switch v-model="scope.row.isShow" :active-value="0" :inactive-value="1"
+                      :disabled="scope.row.disabled">
+                    </el-switch>
+                  </template>
+                </el-table-column>
+                <el-table-column label="操作" align="center" width="100">
+                  <template slot-scope="scope">
+                    <el-button :disabled="scope.row.disabled"
+                      @click.native.prevent="handleDelete(scope.$index, assessmentData)">移除</el-button>
+                  </template>
+                </el-table-column>
+              </el-table>
+            </div>
+          </template>
+
+          <div v-else-if="step === 4" class="modal">
+            <h1>课程已保存！</h1>
+            <div class="btns">
+              <el-button type="primary" @click="back">确定</el-button>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div v-if="step !== 4" class="btns">
+        <el-button v-if="step === 2 || step === 3" type="primary" @click="prev">上一步</el-button>
+        <el-button v-if="step < 3" type="primary" @click="save(1)">下一步</el-button>
+        <el-button type="primary" @click="save()">保存</el-button>
+        <el-button @click="back">返回</el-button>
+      </div>
+    </div>
+
+    <!-- 配置弹窗 -->
+    <el-dialog :visible.sync="configVisible" width="1200px" center custom-class="config-dia">
+      <div class="config-wrap">
+        <div class="item system">
+          <div class="title-wrap flex-center">
+            <p class="addhr_tag"></p>
+            <span>系统列表</span>
+          </div>
+          <el-input placeholder="请输入系统名称" prefix-icon="el-icon-search" v-model.trim="systemKeyword"
+            clearable></el-input>
+
+          <ul class="systems">
+            <li v-for="(item, i) in systems" :key="i" :title="item.systemName">
+              <el-checkbox v-model="item.check" @change="val => systemChange(val, item)"></el-checkbox>
+              <div :class="['name', { active: curSystem == item.systemId }]" @click="getProject(item)">
+                <span>{{ item.systemName }}</span>
+                <i class="el-icon-arrow-right"></i>
+              </div>
+            </li>
+          </ul>
+        </div>
+
+        <div class="item project">
+          <div class="title-wrap flex-center">
+            <p class="addhr_tag"></p>
+            <span>项目列表</span>
+          </div>
+          <el-input placeholder="请输入项目名称" prefix-icon="el-icon-search" v-model.trim="projectKeyword"
+            clearable></el-input>
+
+          <ul class="systems">
+            <el-checkbox v-if="projects.length" v-model="checkAll" label="全选"
+              @change="val => checkAllChange(val, projects[0].systemId)"></el-checkbox>
+            <li v-for="(item, i) in projects" :key="i" :title="item.projectName">
+              <el-checkbox v-model="item.check"
+                :label="item.remark ? item.remark + '(' + item.projectName + ')' : (item.projectName || item.paperName)"
+                @change="val => projectChange(val, item)"></el-checkbox>
+            </li>
+          </ul>
+        </div>
+
+        <div class="item checked">
+          <div class="title-wrap flex-center">
+            <p class="addhr_tag"></p>
+            <span>已选择项目（{{ checkeds.length }}个）</span>
+          </div>
+          <el-input style="width: 200px;margin-bottom: 20px;" placeholder="请输入项目名称" prefix-icon="el-icon-search"
+            v-model.trim="checkedKeyword" clearable></el-input>
+          <el-table :data="checkeds" class="table" header-align="center" max-height="470">
+            <el-table-column type="index" width="55" label="序号" align="center"></el-table-column>
+            <el-table-column prop="systemName" label="系统名称" align="center"></el-table-column>
+            <el-table-column prop="projectName" width="80" label="系统类型" align="center">
+              <template slot-scope="scope">
+                {{ scope.row.type === 1 ? '流程类' : scope.row.type === 3 ? '理论' : '编程类' }}
+              </template>
+            </el-table-column>
+            <el-table-column prop="remark" label="备注名称" align="center"></el-table-column>
+            <el-table-column prop="projectName" label="项目名称" align="center">
+              <template slot-scope="scope">
+                {{ scope.row.projectName || scope.row.paperName }}
+              </template>
+            </el-table-column>
+            <el-table-column label="操作" align="center" width="55">
+              <template slot-scope="scope">
+                <i :class="['el-icon-delete rm', { disabled: scope.row.disabled }]"
+                  @click="delProject(scope.$index, scope.row)"></i>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+      </div>
+
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="configVisible = false">取 消</el-button>
+        <el-button type="primary" @click="handleConfirm">确 定</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import Setting from '@/setting'
+import Util from '@/libs/util'
+import Editor from '@tinymce/tinymce-vue'
+import editorConfig from '@/components/editor'
+import Oss from '@/components/upload/upload.js'
+export default {
+  components: {
+    Editor,
+  },
+  data () {
+    return {
+      cid: this.$route.query.cid,
+      headers: {
+        token: sessionStorage.getItem("token")
+      },
+      editorConfig,
+      step: 1,
+      form: {
+        curriculumName: "",
+        curriculumType: '',
+        courseType: "",
+        categoryId: 1,
+        professionalCategoryId: 1,
+        professionalId: 1,
+        expectedCourse: "",
+        briefIntroduction: "",
+        teachingObjectives: "",
+        systemIdByAssessment: [],
+        systemIdByPractice: [],
+        supplier: [],
+        coverUrl: 'https://izhixinyun.com/images/course-cover.png',
+        curriculumDisciplines: [
+          {
+            professionalClassList: [],
+            professionalList: [],
+            categoryId: 1,
+            professionalCategoryId: 1,
+            professionalId: 1,
+          }
+        ],
+      },
+      rules: {
+        curriculumName: [
+          { required: true, message: "请输入课程名称", trigger: "blur" }
+        ],
+        curriculumType: [
+          { required: true, message: "请选择课程类别", trigger: "change" }
+        ],
+        categoryId: [
+          { required: true, message: "请选择学科类别", trigger: "change" }
+        ],
+        professionalId: [
+          { required: true, message: "请选择专业", trigger: "change" }
+        ],
+        supplier: [
+          { required: true, message: "请选择供应厂商", trigger: "change" }
+        ],
+        expectedCourse: [
+          { required: true, message: "请选择预计课时", trigger: "change" }
+        ],
+        professionalCategoryId: [
+          { required: true, message: "请选择专业类", trigger: "change" }
+        ],
+        courseType: [
+          { required: true, message: "请选择课程类别", trigger: "change" }
+        ],
+      },
+      subjectList: [],
+      ProfessionalClassList: [],
+      ProfessionalList: [],
+
+      pageNo: 1,
+      pageSize: 10,
+      multipleSelection: [],
+      systemKeyword: "",
+      searchTimer: null,
+      configVisible: false,// 配置弹框
+
+      permissions: "", // 练习：0；考核：1
+      practiceData: [],
+      practiceTotal: 0,
+      multiplePractice: [],
+
+      matches: [],
+      matcheTotal: 0,
+      multipleMatch: [],
+      submiting: false, // 新增编辑防抖标识
+      loadIns: null,
+      updateTime: 0,
+      systemAll: [],
+      systems: [],
+      systemsAll: [],
+      systemChecked: [],
+      curSystem: '',
+      projects: [],
+      projectKeyword: '',
+      checkedKeyword: '',
+      checkeds: [],
+      checkedAll: [],
+      checkAll: false,
+
+
+      status: [
+        {
+          id: 0,
+          name: '正常'
+        }
+      ],
+      practiceData: [],
+      practiceTotal: 0,
+      multiplePractice: [],
+
+      assessmentData: [],
+      assessmentTotal: 0,
+      multipleAssessment: [],
+    };
+  },
+  watch: {
+    // 监听信息是否有更改,有的话页面离开的时候要询问是否要保存
+    form: {
+      handler () {
+        this.updateTime++
+      },
+      deep: true
+    },
+    systemKeyword: function (val) {
+      clearTimeout(this.searchTimer);
+      this.searchTimer = setTimeout(() => {
+        this.getConfig();
+      }, 500);
+    },
+    projectKeyword: function (val) {
+      clearTimeout(this.searchTimer);
+      this.searchTimer = setTimeout(() => {
+        this.getProject();
+      }, 500);
+    },
+    checkedKeyword: function (val) {
+      clearTimeout(this.searchTimer);
+      this.searchTimer = setTimeout(() => {
+        this.filterChecked();
+      }, 500);
+    }
+  },
+  created () {
+
+  },
+  mounted () {
+    this.getSubject()
+    this.getConfig()
+    this.getSystem()
+    this.cid && this.getInfoData()
+  },
+  methods: {
+    getInfoData () {
+      this.$post(`${this.api.curriculumDetail}?cid=${this.cid}`).then(({ data }) => {
+        if (data.supplier) data.supplier = data.supplier.split(',').map(e => +e)
+        this.form = data
+        this.$nextTick(() => {
+          const pList = data.practiceConfig
+          const { systemsAll } = this
+          pList.map(e => {
+            if (!systemsAll.find(n => n.systemId == e.systemId)) e.disabled = true
+          })
+          this.practiceData = pList
+
+          const aList = data.assessmentConfig
+          aList.map(e => {
+            if (!systemsAll.find(n => n.systemId == e.systemId)) e.disabled = true
+          })
+          this.assessmentData = aList
+
+
+          this.form.curriculumDisciplines.forEach(e => {
+            this.$set(e, 'professionalClassList', [])
+            this.$set(e, 'professionalList', [])
+            e.categoryId && this.getProfessionalClassData(e)
+            e.professionalCategoryId && this.getProfessionalData(e)
+            if (!e.categoryId) this.$set(e, 'categoryId', '')
+            if (!e.professionalCategoryId) this.$set(e, 'professionalCategoryId', '')
+            if (!e.professionalId) this.$set(e, 'professionalId', '')
+          })
+        });
+      }).catch(err => {
+      });
+    },
+    // 获取系统
+    getSystem () {
+      const checked = this[!this.permissions ?
+        'practiceData' :
+        this.permissions == 1 ?
+          'assessmentData' :
+          'matches']
+      this.$post(this.api.queryServiceConfig, {
+        systemName: '',
+        pageNum: 1,
+        pageSize: 1000,
+        supplierId: ''
+      }).then(({ serviceList }) => {
+        this.systemsAll = serviceList.records
+      }).catch(err => { })
+    },
+
+    // 添加学科
+    addSubject () {
+      const e = {
+        professionalClassList: [],
+        professionalList: [],
+        categoryId: 1,
+        professionalCategoryId: 1,
+        professionalId: 1,
+      }
+      this.form.curriculumDisciplines.push(e)
+      this.getProfessionalClassData(e)
+    },
+    // 获取学科类别
+    getSubject () {
+      this.$get(this.api.courseDiscipline).then(res => {
+        this.subjectList = res.list
+        this.form.curriculumDisciplines.forEach(e => {
+          e.categoryId === 1 && this.getProfessionalClass(e)
+        })
+      }).catch(err => { })
+    },
+    // 清除学科类别
+    clearClass (item) {
+      item.professionalCategoryId = item.categoryId === 1 ? 1 : ''
+      item.professionalId = item.categoryId === 1 ? 1 : ''
+    },
+    // 获取专业类
+    getProfessionalClass (item) {
+      this.clearClass(item);
+      this.getProfessionalClassData(item);
+    },
+    getProfessionalClassData (item) {
+      this.$get(this.api.courseProfessionalClass, {
+        disciplineId: item.categoryId
+      }).then(res => {
+        item.professionalClassList = res.list
+        this.form.curriculumDisciplines.forEach(e => {
+          e.professionalCategoryId === 1 && this.getProfessional(e)
+        })
+      }).catch(err => { })
+    },
+    // 清除专业类
+    clearProfess (item) {
+      item.professionalId = item.professionalCategoryId === 1 ? 1 : ''
+    },
+    // 获取专业
+    getProfessional (item) {
+      this.clearProfess(item);
+      this.getProfessionalData(item);
+    },
+    getProfessionalData (item) {
+      this.$get(this.api.courseProfessional, {
+        professionalClassId: item.professionalCategoryId
+      }).then(res => {
+        item.professionalList = res.list
+      }).catch(err => { })
+    },
+
+
+    handleExceed (files, fileList) {
+      Util.warningMsg(`当前限制选择 1 个文件，如需更换，请删除上一个文件再重新选择！`);
+    },
+    // 封面自定义上传
+    async handleRequest ({ file }) {
+      Oss.upload(file).then(res => {
+        this.form.coverUrl = res.url
+      })
+    },
+    uploadError (err, file, fileList) {
+      this.$message({
+        message: "上传出错，请重试！",
+        type: "error",
+        center: true
+      })
+    },
+    beforeRemove (file, fileList) {
+      return this.$confirm(`确定移除 ${file.name}？`);
+    },
+    handleRemove () {
+      Oss.del(this.form.coverUrl)
+      this.form.coverUrl = ''
+    },
+
+    // 获取系统
+    getConfig () {
+      const checked = this[!this.permissions ?
+        'practiceData' :
+        this.permissions == 1 ?
+          'assessmentData' :
+          'matches']
+      this.$post(this.api.queryServiceConfig, {
+        systemName: this.systemKeyword,
+        pageNum: 1,
+        pageSize: 1000,
+        supplierId: ''
+      }).then(res => {
+        const list = res.serviceList.records
+        this.systemAll = JSON.parse(JSON.stringify(list)) // 全部系统，另外保存
+        const result = []
+        list.map(e => {
+          // 如果选中的项目里有该系统的项目，则隐藏
+          // if (!checked.find(n => n.systemId == e.systemId)) {
+          // e.check = !!checked.find(n => n.systemId == e.systemId)
+          e.check = false
+          result.push(e)
+          // }
+        })
+        this.systems = result
+        this.checkAll = !!checked.find(n => n.systemId == result[0].systemId) // 因为默认显示第一个系统的项目，所以如果系统默认选中，则全选也勾选上
+        result.length && this.getProject(result[0])
+      }).catch(err => { })
+    },
+    // 获取项目列表
+    async getProject (item, fromSystemChange) {
+      const checked = this.checkeds
+      if (item) this.curSystem = item.systemId
+      let res
+      if (!fromSystemChange) {
+        res = await this.$get(`${this.api.getInternalProjectBySystemId}?permissions=${this.permissions}&systemId=${this.curSystem}&keyword=${this.projectKeyword}`)
+      }
+      const result = []
+      const projects = fromSystemChange ? this.projects : res
+      projects.map(e => {
+        // 如果选择了该项目，则禁用并选中
+        const include = checked.some(n => (e.projectId && n.projectId == e.projectId && n.systemId == e.systemId) || (e.paperId && n.paperId == e.paperId))
+        e.check = include
+        result.push(e)
+      })
+      this.checkAll = !result.filter(e => !e.check).length
+      this.projects = result
+    },
+    // 系统选择回调
+    systemChange (val, item) {
+      // 项目列表选中状态同步
+      const { projects, checkeds } = this
+      if (projects.length && projects[0].systemId == item.systemId) {
+        projects.map(e => {
+          e.check = val
+        })
+      }
+      this.projectKeyword = ''
+      this.$get(`${this.api.getInternalProjectBySystemId}?permissions=${this.permissions}&systemId=${item.systemId}&keyword=${this.projectKeyword}`).then(res => {
+        if (val) {
+          // 如果不支持多选系统，选中后全部取消选中再选中当前系统
+          if (!this.mulSystem) {
+            this.systems.map(e => e.check = false)
+            item.check = true
+          }
+          res.map(e => {
+            if (!checkeds.find(n => (e.projectId && n.projectId == e.projectId && n.systemId == e.systemId) || (e.paperId && e.paperId == n.paperId))) {
+              checkeds.push(e)
+            }
+          })
+        } else {
+          res.map(e => {
+            const i = checkeds.findIndex(n => (e.projectId && n.projectId == e.projectId && n.systemId == e.systemId) || (e.paperId && e.paperId == n.paperId))
+            i === -1 || checkeds.splice(i, 1)
+          })
+        }
+        this.checkedAll = JSON.parse(JSON.stringify(checkeds)) // 全部已选项目，另外保存
+        this.getProject(item, 1)
+      }).catch(err => { })
+    },
+    // 项目全选回调
+    checkAllChange (val, systemId) {
+      this.systemChange(val, { systemId })
+      this.systems.map(e => {
+        if (e.systemId == systemId) e.check = val
+      })
+    },
+    // 项目选择回调
+    projectChange (val, item) {
+      const { systemId, paperId } = item
+      const i = this.checkeds.findIndex(e => (item.projectId && e.projectId == item.projectId && e.systemId == systemId) || (paperId && paperId == e.paperId))
+      // 选中，则push，否则移除
+      if (val) {
+        this.checkeds.push(item)
+      } else if (i !== -1) {
+        this.checkeds.splice(i, 1)
+      }
+      // 同步系统
+      this.systems.map(e => {
+        if (e.systemId == systemId) e.check = !this.projects.filter(n => !n.check).length
+      })
+      this.checkAll = !this.projects.find(e => !e.check) // 同步全选框
+      this.checkedAll = JSON.parse(JSON.stringify(this.checkeds)) // 全部已选项目，另外保存
+    },
+    // 已选择项目模糊查询
+    filterChecked () {
+      const val = this.checkedKeyword
+      this.checkeds = this.checkedAll.filter(e => (e.projectName && e.projectName.includes(val)) || (e.paperName && e.paperName.includes(val)))
+    },
+    // 删除已选项目
+    delProject (i, e) {
+      if (e.disabled) return
+      this.$confirm("确定要删除吗？", "提示", {
+        type: "warning"
+      }).then(() => {
+        this.checkeds.splice(i, 1)
+        // 如果当前展示的项目列表跟删掉的项目是同个系统，则找到项目列表里删掉的该项目，重置check和disabled
+        if (e.systemId == this.curSystem) {
+          const { projectId, paperId } = e
+          this.projects.map(n => {
+            if ((projectId && n.projectId == projectId) || (paperId && n.paperId == paperId)) {
+              n.check = false
+            }
+          })
+          this.checkAll = !this.projects.find(e => !e.check)
+        }
+        this.systems.map(n => {
+          if (n.systemId == e.systemId) n.check = false
+        })
+      }).catch(() => { })
+    },
+    // 确认系统
+    handleConfirm () {
+      const list = this.checkeds
+      if (!list.length) {
+        this.$message.warning("请选择系统！");
+      } else {
+        this.configVisible = false
+        list.map((e, i) => {
+          e.isShow = 0; // isShow是否展示(默认0:展示 1:不展示)
+          e.sort = i + 1; // 排序
+        });
+        if (!this.permissions) {
+          this.practiceData = JSON.parse(JSON.stringify(list))
+          this.practiceTotal = this.practiceData.length;
+        } else if (this.permissions == 1) {
+          this.assessmentData = JSON.parse(JSON.stringify(list))
+          this.assessmentTotal = this.assessmentData.length;
+        } else if (this.permissions == 2) {
+          this.matches = JSON.parse(JSON.stringify(list))
+          this.matchTotal = this.matches.length;
+        }
+      }
+    },
+    handleSelectionPractice (val) { // 多选练习项目
+      this.multiplePractice = val;
+    },
+    handleSelectionMatch (val) { // 多选竞赛项目
+      this.multipleMatch = val;
+    },
+
+    // 练习考核弹框
+    handleConfig (type) {
+      this.systemKeyword = ''
+      this.projectKeyword = ''
+      this.checkedKeyword = ''
+      this.permissions = type;
+      this.configVisible = true;
+      this.pageNo = 1;
+      this.getConfig();
+      this.checkeds = JSON.parse(JSON.stringify(type == 1 ? this.assessmentData : type == 2 ? this.matches : this.practiceData))
+      this.checkedAll = JSON.parse(JSON.stringify(this.checkeds))
+    },
+    handleBatchDelete (type) { // 批量移除
+      if (type == 1 && !this.multipleAssessment.length) {
+        this.$message.warning("请勾选考核项目！");
+        return;
+      } else if (!type && !this.multiplePractice.length) {
+        this.$message.warning("请勾选练习项目！");
+        return;
+      } else if (type == 2 && !this.multipleMatch.length) {
+        this.$message.warning("请勾选竞赛项目！");
+        return;
+      }
+      this.$confirm("此操作将批量移除项目, 是否继续?", "提示", {
+        type: "warning"
+      }).then(() => {
+        if (type == 1) {
+          let ids = this.multipleAssessment.map(i => i.projectId);
+          let tempArr = [];
+          for (let i = 0; i < this.assessmentData.length; i++) {
+            if (!ids.includes(this.assessmentData[i].projectId)) {
+              tempArr.push(this.assessmentData[i]);
+            }
+          }
+          this.assessmentData = tempArr;
+        } else if (!type) {
+          let ids = this.multiplePractice.map(i => i.projectId);
+          let tempArr = [];
+          for (let i = 0; i < this.practiceData.length; i++) {
+            if (!ids.includes(this.practiceData[i].projectId)) {
+              tempArr.push(this.practiceData[i]);
+            }
+          }
+          this.practiceData = tempArr;
+        } else {
+          let ids = this.multipleMatch.map(i => i.projectId);
+          let tempArr = [];
+          for (let i = 0; i < this.matches.length; i++) {
+            if (!ids.includes(this.matches[i].projectId)) {
+              tempArr.push(this.matches[i]);
+            }
+          }
+          this.matches = tempArr;
+        }
+        this.$message.success("批量移除成功");
+      }).catch(() => {
+        this.$message.info("已取消批量移除");
+      });
+    },
+    handleDelete (index, data) { // 移除
+      this.$confirm("此操作将移除该项目, 是否继续?", "提示", {
+        type: "warning"
+      }).then(() => {
+        data.splice(index, 1);
+        this.$message.success("移除成功");
+      }).catch(() => {
+        this.$message.info("已取消移除");
+      });
+    },
+    practiceSortChange (row, index) { // 处理排序
+      this.practiceData.splice(index, 1, row);
+    },
+
+    // 上一步
+    prev () {
+      this.step--
+    },
+    async save (next) {
+      const { step, cid } = this
+      // 第一步
+      if (step === 1) {
+        this.$refs.form.validate(async (valid) => {
+          if (valid) {
+            if (this.submiting) return false
+            const form = JSON.parse(JSON.stringify(this.form))
+            form.supplier = form.supplier.join()
+            form.platformId = Setting.platformId
+            this.submiting = true
+            this.loadIns = this.$loading({
+              lock: true,
+              text: 'Loading',
+              spinner: 'el-icon-loading',
+              background: 'rgba(0, 0, 0, 0.7)'
+            })
+            try {
+              const res = await this.$post(this.api[cid ? 'modifyCourse' : 'createCurriculum'], form)
+              this.loadIns.close()
+              if (next) {
+                this.step = 2
+                if (!cid) {
+                  this.cid = res.cid
+                  this.$router.replace('detail?cid=' + res.cid)
+                }
+              } else {
+                this.back()
+              }
+            } finally {
+              this.submiting = false
+              this.loadIns.close()
+            }
+          }
+        })
+      } else if (step === 2) {
+        // 添加练习项目
+        if (!this.practiceData.length) {
+          return this.$message.warning("请添加练习项目配置")
+        } else {
+          const list = this.practiceData.map(i => {
+            let obj = {
+              isShow: i.isShow,
+              projectId: i.projectId || '',
+              paperId: i.paperId || '',
+              sort: Number(i.sort),
+              systemId: i.systemId
+            }
+            return obj
+          });
+          list.sort((a, b) => a.sort - b.sort)
+          await this.$post(this.api.configureCourseProject, {
+            cid: this.cid,
+            systemIdByPractice: list
+          })
+          if (next) {
+            this.step = 3
+          } else {
+            this.back()
+          }
+        }
+      } else if (step === 3) {
+        // 添加考核项目
+        if (!this.assessmentData.length) {
+          return this.$message.warning("请添加考核项目配置")
+        } else {
+          const list = this.assessmentData.map(i => {
+            let obj = {
+              isShow: i.isShow,
+              projectId: i.projectId,
+              paperId: i.paperId || '',
+              sort: Number(i.sort),
+              systemId: i.systemId
+            };
+            return obj;
+          });
+          list.sort((a, b) => a.sort - b.sort)
+          await this.$post(this.api.configureCourseProject, {
+            cid: this.cid,
+            systemIdByAssessment: list
+          })
+          this.step = 4
+        }
+      }
+    },
+    // 返回上一页
+    back () {
+      this.loadIns && this.loadIns.close()
+      this.$router.push(this.$store.state.referrer || 'list')
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.wrap {
+  .steps {
+    display: flex;
+    justify-content: center;
+    margin-bottom: 20px;
+
+    &.pointer {
+      li {
+        cursor: pointer;
+      }
+    }
+
+    li {
+      position: relative;
+      margin-right: 100px;
+      text-align: center;
+    }
+
+    .circle {
+      display: inline-flex;
+      justify-content: center;
+      align-items: center;
+      width: 45px;
+      margin: 0 auto 10px;
+      line-height: 35px;
+      font-size: 18px;
+      color: #333;
+      background: #f9f9f9;
+      border: 5px solid #e1e1e1;
+      border-radius: 50%;
+
+      &:after {
+        content: '';
+        position: absolute;
+        left: 64px;
+        width: 146px;
+        height: 3px;
+        background: #e1e1e1;
+      }
+    }
+
+    .active {
+      .circle {
+        color: #fff;
+        border-color: #26499f;
+        background: #062c87;
+      }
+
+      .text {
+        color: #062c87;
+      }
+    }
+
+    .done {
+      .circle {
+        color: #fff;
+        background: #062c87;
+        border-color: #26499f;
+
+        &:after {
+          background: #062c87;
+        }
+      }
+
+      .text {
+        color: #062c87;
+      }
+    }
+
+    .circle2:after {
+      left: 71px;
+      width: 147px;
+    }
+
+    .circle4:after {
+      display: none;
+    }
+  }
+
+  .overflow {
+    height: calc(100vh - 342px);
+    margin-bottom: 20px;
+    overflow: auto;
+  }
+
+  .btns {
+    text-align: center;
+  }
+
+  .form {
+    width: 1000px;
+    margin: 0 auto;
+  }
+
+  /deep/.w-input {
+    width: 400px;
+  }
+
+  .cover-wrap {
+    display: flex;
+    justify-content: space-around;
+
+    .preview-title {
+      margin-bottom: 10px;
+      font-size: 16px;
+      color: #000;
+      text-align: center;
+    }
+
+    .preview-pic {
+      width: 220px;
+      max-height: 140px;
+    }
+  }
+
+  .subject {
+    padding: 10px;
+    border: 1px dashed #ccc;
+
+    .line {
+      position: relative;
+      display: flex;
+      padding-right: 50px;
+      margin-bottom: 10px;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+
+    .el-form-item {
+      margin-bottom: 0;
+    }
+
+    .del {
+      position: absolute;
+      top: 11px;
+      right: 20px;
+      cursor: pointer;
+    }
+  }
+
+  .subject-plus {
+    margin-top: 5px;
+    text-align: center;
+    font-size: 18px;
+    color: #062c87;
+    cursor: pointer;
+  }
+}
+
+.modal {
+  width: 500px;
+  padding-top: 150px;
+  margin: 0 auto;
+
+  h1 {
+    margin: 20px;
+    text-align: center;
+  }
+
+  .btns {
+    text-align: center;
+  }
+}
+
+/deep/.config-dia {
+  .config-wrap {
+    display: flex;
+  }
+
+  .title-wrap {
+    margin-bottom: 15px;
+  }
+
+  .item {
+    width: 250px;
+    max-height: 600px;
+    padding: 10px;
+    margin-right: 20px;
+    overflow: hidden;
+  }
+
+  .system {
+    background-color: #f9f9f9;
+  }
+
+  .systems {
+    margin-top: 10px;
+    max-height: 520px;
+    overflow: auto;
+
+    li {
+      display: flex;
+      align-items: center;
+      margin: 10px 0;
+    }
+
+    .name {
+      display: inline-flex;
+      flex: 1;
+      justify-content: space-between;
+      align-items: center;
+      margin-left: 5px;
+      cursor: pointer;
+
+      &.active,
+      &:hover {
+        color: #062c87;
+      }
+
+      span {
+        max-width: 200px;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+      }
+    }
+  }
+
+  .checked {
+    flex: 1;
+    width: auto;
+
+    .el-table .cell {
+      font-size: 12px;
+    }
+  }
+
+  .rm {
+    font-size: 14px;
+    cursor: pointer;
+
+    &.disabled {
+      color: #ccc;
+      cursor: not-allowed;
+    }
+
+    &:hover {
+      color: #17161f;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/lesson/list/index.vue b/src/pages/lesson/list/index.vue
new file mode 100644
index 0000000..70c3d10
--- /dev/null
+++ b/src/pages/lesson/list/index.vue
@@ -0,0 +1,307 @@
+<template>
+  <div>
+    <el-card shadow="hover" class="m-b-20">
+      <div>
+        <div class="flex-center m-b-20">
+          <p class="hr_tag"></p>
+          <span>筛选</span>
+        </div>
+        <div>
+          <el-form label-width="80px">
+            <el-col :span="4">
+              <el-form-item label="学科类别">
+                <el-select v-model="form.categoryId" clearable @change="getProfessionalClass()" @clear="clearClass()">
+                  <el-option v-for="(item, index) in subjectList" :key="index" :label="item.disciplineName"
+                    :value="item.disciplineId"></el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="4">
+              <el-form-item label="专业类">
+                <el-select v-model="form.professionalCategoryId" clearable :disabled="form.categoryId ? false : true"
+                  @change="getProfessional()" @clear="clearProfess()">
+                  <el-option v-for="(item, index) in ProfessionalClassList" :key="index"
+                    :label="item.professionalClassName" :value="item.professionalClassId"></el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="4">
+              <el-form-item label="专业">
+                <el-select v-model="form.professionalId" clearable
+                  :disabled="form.professionalCategoryId ? false : true" @change="getData()">
+                  <el-option v-for="(item, index) in ProfessionalList" :key="index" :label="item.professionalName"
+                    :value="item.professionalId"></el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="4">
+              <el-form-item label="课程类别">
+                <el-select v-model="form.curriculumType" clearable @change="getData()">
+                  <el-option label="理论课程" :value="0"></el-option>
+                  <el-option label="实训课程" :value="1"></el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item>
+                <el-input placeholder="请输入课程名称" prefix-icon="el-icon-search" v-model="form.curriculumName" clearable
+                  @keyup.enter.native="onSearch"></el-input>
+              </el-form-item>
+            </el-col>
+          </el-form>
+        </div>
+      </div>
+    </el-card>
+
+    <el-card shadow="hover" class="card">
+      <div class="flex-between m-b-20">
+        <div class="flex-center">
+          <p class="hr_tag"></p>
+          <span>课程列表</span>
+        </div>
+        <div>
+          <el-button type="primary" round @click="addcourse" v-auth>新建课程</el-button>
+          <el-button type="primary" round @click="delAllSelection" v-auth>批量删除</el-button>
+        </div>
+      </div>
+      <el-table v-loading="loading" :data="courseData" class="table" ref="table" header-align="center"
+        @selection-change="handleSelectionChange" :row-key="getRowKeys">
+        <el-table-column type="selection" width="55" align="center" :reserve-selection="true"></el-table-column>
+        <el-table-column type="index" width="70" label="序号" align="center"></el-table-column>
+        <el-table-column prop="curriculumName" label="课程名称" align="center"></el-table-column>
+        <el-table-column prop="curriculumType" label="课程类别" width="90" align="center">
+          <template slot-scope="scope">
+            <span class="ellipsis">{{ courseTypeStatus[scope.row.curriculumType] }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="配置的系统" align="center">
+          <template slot-scope="scope">
+            <span class="ellipsis">{{ scope.row.sysName }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="expectedCourse" label="预计课时" width="90" align="center"></el-table-column>
+        <el-table-column prop="orderVolume" label="上架范围" width="90" align="center"></el-table-column>
+        <el-table-column prop="userName" label="创建人" width="120" align="center"></el-table-column>
+        <el-table-column label="上架/下架" width="90" align="center">
+          <template slot-scope="scope">
+            <el-switch v-model="scope.row.isShelves" :active-value="1" :inactive-value="0"
+              @change="changeSwitch($event, scope.row)" v-auth="'/curriculum:上下架'">
+            </el-switch>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="150" align="center">
+          <template slot-scope="scope">
+            <el-button type="text" @click="edit(scope.row)" v-auth>编辑</el-button>
+            <el-button type="text" @click="config(scope.row)" v-auth>内容设置</el-button>
+            <el-button type="text" @click="handleDelete(scope.row)" v-auth>删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <div class="pagination">
+        <el-pagination background @current-change="handleCurrentChange" :current-page="page"
+          layout="total, prev, pager, next" :total="totals"></el-pagination>
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<script>
+import qs from 'qs'
+export default {
+  data () {
+    return {
+      courseTypeStatus: {
+        0: "理论课程",
+        1: "实训课程"
+      },
+      courseData: [],
+      form: {
+        categoryId: +this.$route.query.categoryId || '',
+        professionalCategoryId: +this.$route.query.professionalCategoryId || '',
+        professionalId: +this.$route.query.professionalId || '',
+        curriculumType: this.$route.query.curriculumType ? +this.$route.query.curriculumType : '',
+        curriculumName: this.$route.query.curriculumName || ''
+      },
+      page: +this.$route.query.page || 1,
+      pageSize: 10,
+      totals: 0,
+      subjectList: [], // 学科类别
+      ProfessionalClassList: [], // 专业类
+      ProfessionalList: [], // 专业
+      multipleSelection: [],
+      loading: false,
+      searchTimer: null
+    };
+  },
+  watch: {
+    "form.curriculumName": function (val) {
+      clearTimeout(this.searchTimer);
+      this.searchTimer = setTimeout(() => {
+        this.initData();
+      }, 500);
+    }
+  },
+  mounted () {
+    this.getSubject();
+    this.getData();
+  },
+  methods: {
+    getRowKeys (row) {
+      return row.cid;
+    },
+    // 获取列表数据
+    getData () {
+      this.$post(this.api.curriculumList, {
+        ...this.form,
+        pageNum: this.page,
+        pageSize: this.pageSize,
+        supplierId: ''
+      }).then(res => {
+        this.courseData = res.page.records;
+        this.totals = res.page.total
+        this.loading = false
+      }).catch(err => { })
+    },
+    initData () {
+      this.page = 1
+      this.getData()
+    },
+    // 获取学科类别
+    async getSubject () {
+      const { list } = await this.$get(this.api.courseDiscipline)
+      this.subjectList = list
+      this.form.professionalCategoryId && this.getProfessionalClassData()
+    },
+    // 清除学科类别
+    clearClass () {
+      this.form.professionalCategoryId = ''
+      this.form.professionalId = ''
+    },
+    // 获取专业类
+    getProfessionalClass () {
+      this.clearClass();
+      this.getProfessionalClassData();
+      this.page = 1;
+      this.getData();
+    },
+    async getProfessionalClassData () {
+      const { list } = await this.$get(this.api.courseProfessionalClass, {
+        disciplineId: this.form.categoryId
+      })
+      this.ProfessionalClassList = list
+      this.form.professionalId && this.getProfessionalData()
+    },
+    // 清除专业类
+    clearProfess () {
+      this.form.professionalId = ''
+    },
+    // 获取专业
+    getProfessional () {
+      this.clearProfess();
+      this.getProfessionalData();
+      this.page = 1;
+      this.getData();
+    },
+    async getProfessionalData () {
+      const { list } = await this.$get(this.api.courseProfessional, {
+        professionalClassId: this.form.professionalCategoryId
+      })
+      this.ProfessionalList = list
+    },
+    // 缓存当前页面和参数，详情页返回到列表的时候直接取该url
+    setReferrer () {
+      // this.$store.commit('setReferrer', `${this.$route.path}?${qs.stringify(this.form)}&page=${this.page}`)
+    },
+    // 新建课程
+    addcourse () {
+      this.setReferrer()
+      this.$router.push('detail')
+    },
+    // 编辑
+    edit (row) {
+      this.setReferrer()
+      this.$router.push(`detail?cid=${row.cid}`);
+    },
+    // 内容设置
+    config (row) {
+      this.setReferrer()
+      this.$router.push(`content?cid=${row.cid}&name=${row.curriculumName}`);
+    },
+    // 删除
+    handleDelete (row) {
+      this.$post(`${this.api.deleteCoursePrompt}?cids=${row.cid}`).then(({ status }) => {
+        if (status === 200) {
+          this.$confirm("确定要删除吗？", "提示", {
+            type: "warning"
+          }).then(() => {
+            this.$post(`${this.api.delCourse}?cids=${row.cid}`).then(res => {
+              this.getData();
+              this.$message.success("删除成功");
+            }).catch(err => { })
+          }).catch(() => {
+          });
+        }
+      }).catch(err => { })
+    },
+    // 处理多选
+    handleSelectionChange (val) {
+      this.multipleSelection = val;
+    },
+    // 批量删除
+    delAllSelection () {
+      if (this.multipleSelection.length) {
+        let cids = []
+        this.multipleSelection.forEach(i => {
+          cids.push('cids=' + i.cid)
+        });
+        this.$post(`${this.api.deleteCoursePrompt}?${cids.join('&')}`).then(({ status }) => {
+          if (status === 200) {
+            this.$confirm("确定要删除吗？", "提示", {
+              type: "warning"
+            }).then(() => {
+              let ids = this.multipleSelection.map(i => i.cid);
+              this.$post(`${this.api.delCourse}?cids=${ids.toString()}`).then(res => {
+                if (ids.length == this.courseData.length) {
+                  if (this.page > 1) {
+                    this.page = this.page - 1
+                  }
+                }
+                this.getData();
+                this.$message.success("删除成功");
+                this.$refs.table.clearSelection()
+              }).catch(err => { })
+            }).catch(() => { })
+          }
+        }).catch(err => { })
+      } else {
+        this.$message.warning("请先选择课程 ！");
+      }
+    },
+    // 处理页码切换
+    handleCurrentChange (val) {
+      this.page = val;
+      this.$router.push(`/curriculum?page=${val}`)
+      this.getData();
+    },
+    // 课程名称条件搜索
+    onSearch () {
+      this.page = 1;
+      this.getData();
+    },
+    // 上下架
+    changeSwitch (value, row) {
+      this.$post(`${this.api.isShelves}?cid=${row.cid}&isShelves=${value}`).then((res) => {
+        this.getData();
+        this.$message.success("修改上下架状态成功！");
+      }).catch((res) => {
+      });
+    }
+  }
+};
+</script>
+
+<style scoped>
+.card {
+  min-height: calc(100vh - 300px);
+}
+</style>
diff --git a/src/pages/workbench/list/index.vue b/src/pages/workbench/list/index.vue
index 3298a80..191be8f 100644
--- a/src/pages/workbench/list/index.vue
+++ b/src/pages/workbench/list/index.vue
@@ -45,7 +45,7 @@
           <img src="@/assets/img/workbench/9.png" alt="">
           <p class="name">理论考试系统</p>
         </div>
-        <div class="app" @click="to('/data')">
+        <div class="app" @click="to('/lesson')">
           <img src="@/assets/img/workbench/10.png" alt="">
           <p class="name">备课管理</p>
         </div>
diff --git a/src/router/modules/lesson.js b/src/router/modules/lesson.js
new file mode 100644
index 0000000..b39fa42
--- /dev/null
+++ b/src/router/modules/lesson.js
@@ -0,0 +1,35 @@
+import BasicLayout from "@/layouts/home";
+
+const meta = {};
+
+const pre = "lesson-";
+
+export default {
+  path: "/lesson",
+  name: "lesson",
+  redirect: {
+    name: `${pre}list`
+  },
+  meta,
+  component: BasicLayout,
+  children: [
+    {
+      name: `${pre}list`,
+      path: `list`,
+      component: () => import("@/pages/lesson/list"),
+      meta: { title: "备课管理" }
+    },
+    {
+      name: `${pre}detail`,
+      path: `detail`,
+      component: () => import("@/pages/lesson/detail"),
+      meta: { title: "新增课程" }
+    },
+    {
+      name: `${pre}content`,
+      path: `content`,
+      component: () => import("@/pages/lesson/content"),
+      meta: { title: "内容设置" }
+    }
+  ]
+};
\ No newline at end of file