'3'

src/api/course.js

+import request from '@/utils/request'
+import requestFile from '@/utils/requestfile'
+import qs from 'qs'
+
+/**
+ * ids []
+ * 删除课时
+ */
+export function onlineTraining(data) {
+  return request({
+    url: 'api/onlineTraining',
+    method: 'DELETE',
+    data
+  })
+}
+
+/**
+ * pid 课程id
+ * 查询课时
+ */
+export function findLesson(params) {
+  return request({
+    url: 'api/onlineTraining/findLesson',
+    method: 'GET',
+    params
+  })
+}
+
+/**
+ * categoryId 分类Id
+ * courseEndCreateTime 课程截止创建时间 格式: yyyy-MM-dd HH:mm:ss
+ * courseStartCreateTime 课程起始创建时间 格式: yyyy-MM-dd HH:mm:ss
+ * courseStatus 课程状态[已发布|已关闭]
+ * courseTeacher 创建人
+ * courseTitle 课程标题
+ * page 页码(0...N)
+ * size 每页显示的数目
+ * sort
+ * 查询课程
+ */
+export function findCourse(params) {
+  return request({
+    url: 'api/onlineTraining/pageCourse',
+    method: 'GET',
+    params
+  })
+}
+
+/**
+ * categoryId 分类Id
+ * courseBriefIntroductoin 课程简介
+ * courseCoverFile 课程封面文件
+ * courseStatus 课程状态[已发布|已关闭] 默认已关闭
+ * courseSubTitle 课程副标题
+ * courseTitle 课程标题
+ * 创建课程
+ */
+export function createCourse(data, updateFunc) {
+  return requestFile({
+    url: 'api/onlineTraining/saveCourse',
+    method: 'POST',
+    onUploadProgress: updateFunc,
+    data
+  })
+}
+
+/**
+ * lessonDuration 课程时长
+ * lessonFile 课程文件
+ * lessonTitle 课时标题
+ * pid 课程id
+ * 创建课时
+ */
+export function createLesson(data, updateFunc) {
+  return requestFile({
+    url: 'api/onlineTraining/saveLesson',
+    method: 'POST',
+    onUploadProgress: updateFunc,
+    data
+  })
+}
+
+/**
+ * categoryId 分类Id
+ * courseBriefIntroduction 课程简介
+ * courseCoverFile 课程封面文件 修改封面文件时传该参数，否则不传
+ * courseStatus 课程状态[已发布|已关闭]
+ * courseSubTitle 课程副标题
+ * courseTitle 课程标题
+ * id
+ * 修改课程
+ */
+export function updateCourse(data, updateFunc) {
+  return requestFile({
+    url: 'api/onlineTraining/updateCourse',
+    method: 'POST',
+    onUploadProgress: updateFunc,
+    data
+  })
+}
+
+/**
+ * id
+ * lessonDuration 课程时长
+ * lessonFile 课程文件
+ * lessonTitle 课时标题
+ * pid 课程id
+ * 修改课时
+ */
+export function updateLesson(data) {
+  return requestFile({
+    url: 'api/onlineTraining/updateLesson',
+    method: 'POST',
+    data
+  })
+}

src/api/coursecategory.js

+import request from '@/utils/request'
+import requestFile from '@/utils/requestfile'
+import qs from 'qs'
+
+/**
+ * page
+ * size
+ * 查询在线培训课程分类
+ * @returns Promise
+ */
+export function getOnlineTrainingCategory(params) {
+  return request({
+    url: 'api/onlineTrainingCategory',
+    method: 'GET',
+    params
+  })
+}
+
+/**
+ * name
+ * description
+ * id
+ * pid
+ * 新增在线培训课程分类
+ */
+export function postOnlineTrainingCategory(data) {
+  return request({
+    url: 'api/onlineTrainingCategory',
+    method: 'post',
+    data
+  })
+}
+
+/**
+ * description
+ * name
+ * id
+ * pid
+ * 修改在线培训课程分类
+ */
+export function putOnlineTrainingCategory(data) {
+  return request({
+    url: 'api/onlineTrainingCategory',
+    method: 'PUT',
+    data
+  })
+}
+
+/**
+ * ids []
+ * 删除在线培训课程分类
+ */
+export function deleteOnlineTrainingCategory(data) {
+  return request({
+    url: 'api/onlineTrainingCategory',
+    method: 'DELETE',
+    data
+  })
+}

src/api/test.js

+import request from '@/utils/request'
+import requestFile from '@/utils/requestfile'
+import qs from 'qs'
+
+/**
+ * 在线考试试卷管理
+ */
+
+/**
+ * page
+ * size
+ * 查询考试题库分类管理
+ */
+export function getExamLibraryCategory(params) {
+  return request({
+    url: 'api/onlineExamLibraryCategory',
+    method: 'get',
+    params
+  })
+}
+
+/**
+ * name     string
+ * 在线考试题库分类
+ */
+export function postExamLibraryCategory(data) {
+  return request({
+    url: 'api/onlineExamLibraryCategory',
+    method: 'post',
+    data
+  })
+}
+
+/**
+ * name     string
+ * 在线考试题库分类
+ */
+export function putExamLibraryCategory(data) {
+  return request({
+    url: 'api/onlineExamLibraryCategory',
+    method: 'put',
+    data
+  })
+}
+
+/**
+ * ids   []
+ * 删除在线试题库分类
+ */
+export function deleteExamLibraryCategory(data) {
+  return request({
+    url: 'api/onlineExamLibraryCategory',
+    method: 'delete',
+    data
+  })
+}
+
+/**
+ * 题库管理
+ */
+
+/**
+ * page
+ * size
+ * sort
+ * 获取题库
+ */
+export function getExamLibrary(params) {
+  return request({
+    url: 'api/onlineExamLibrary',
+    method: 'get',
+    params
+  })
+}
+
+/**
+ * categoryId,
+ * id: '',
+ * name: '',
+ * 新增题库
+ */
+export function postExamLibrary(data) {
+  return request({
+    url: 'api/onlineExamLibrary',
+    method: 'post',
+    data
+  })
+}
+
+/**
+ * categoryId,
+ * id
+ * name
+ * 修改题库
+ */
+export function putExamLibrary(data) {
+  return request({
+    url: 'api/onlineExamLibrary',
+    method: 'put',
+    data
+  })
+}
+
+/**
+ * ids
+ * 删除题库
+ */
+export function deleteExamLibrary(data) {
+  return request({
+    url: 'api/onlineExamLibrary',
+    method: 'delete',
+    data
+  })
+}

src/api/trainimage.js

@@ -126,11 +126,3 @@ export function findTodayTrainEnterprise() {
     method: 'get'
   })
 }
-
-// 安全教育培训统计
-export function analyzeSafetyEducation() {
-  return request({
-    url: 'api/trainImage/analyzeSafetyEducation',
-    method: 'get'
-  })
-}
\ No newline at end of file

src/api/warnteach.js

+import request from '@/utils/request'
+import requestFile from '@/utils/requestfile'
+import qs from 'qs'
+
+// 上传警示教育资料
+/**
+ * brefIntroduction  简介
+ * category  类别
+ * file  文件
+ * link  链接
+ * title  题目
+ */
+export function postWarnTeach(data) {
+  return requestFile({
+    url: 'api/warningEducation',
+    method: 'post',
+    data
+  })
+}
+
+// 删除警示教育资料
+/**
+ * ids [0]
+ */
+export function deleteWarnTeach(data) {
+  return request({
+    url: 'api/warningEducation',
+    method: 'delete',
+    data
+  })
+}
+
+// 查询警示教育资料
+/**
+ * category  类别
+ * page 页码
+ * size 每页显示的数目
+ * sort 排序顺序
+ * title 题目
+ * uploadEndTime 上传截止日期: yyyy-MM-dd
+ * uploadStartTime 上传起始日期: yyyy-MM-dd
+ * uploader 上传人
+ */
+export function getWranTeach(params) {
+  return request({
+    url: 'api/warningEducation/page',
+    method: 'get',
+    params
+  })
+}
+
+// 修改警示资料
+/**
+ * brefIntroduction  简介
+ * category  类别
+ * file  文件
+ * link  链接
+ * title  题目
+ */
+export function putWarnTeach(data) {
+  return requestFile({
+    url: 'api/warningEducation',
+    method: 'post',
+    data
+  })
+}
+
+/**
+ * 获取所有类别
+ */
+export function getWarnTeachCategory() {
+  return request({
+    url: 'api/warningEducation/findCategory',
+    method: 'get'
+  })
+}

src/store/getters.js

@@ -22,6 +22,7 @@ const getters = {
   swaggerApi: state => state.api.swaggerApi,
   sidebarRouters: state => state.permission.sidebarRouters,
   curLawItem: state => state.law.curLawItem,
-  curAdviceItem: state => state.advice.curAdviceItem
+  curAdviceItem: state => state.advice.curAdviceItem,
+  course: state => state.course.course
 }
 export default getters

src/store/modules/course.js

+
+const course = {
+  state: {
+    course: {}
+  },
+  mutations: {
+    SET_COURSE: (state, course) => {
+      state.course = course
+    }
+  },
+  actions: {
+    setCourse({ commit }, course) {
+      commit('SET_COURSE', course)
+    }
+  }
+}
+
+export default course

src/views/advice/index.vue

@@ -10,7 +10,6 @@
         :data="tableData"
         style="width:100%;"
         border
-        v-loading="isLoadingAdvice"
         @selection-change="handleSelectionChange"
       >
         <el-table-column
@@ -128,8 +127,7 @@ export default {
       },
       currentPage: 1,
       curPageSize: 10,
-      totalColumn: 40,
-      isLoadingAdvice: false
+      totalColumn: 40
     }
   },
   mounted() {
@@ -198,15 +196,12 @@ export default {
     handleSizeChange(val) {
       // 每页多少条
       this.curPageSize = val
-      this.initAllNotices()
     },
     handleCurrentChange(val) {
       // 当前是多少页
       this.currentPage = val
-      this.initAllNotices()
     },
     initAllNotices() {
-      this.isLoadingAdvice = true
       getNotice({
         page: this.currentPage - 1,
         size: this.curPageSize,
@@ -220,11 +215,7 @@ export default {
           item.content = item.noticeContent
         })
         this.tableData = [...res.content]
-        this.totalColumn = res.totalElements
-        this.isLoadingAdvice = false
-      }).catch(() => {
-        this.isLoadingAdvice = false
-      })
+      }).catch(() => {})
     }
   }
 }

src/views/components/coursetype.vue

@@ -14,12 +14,14 @@
         <el-button type="primary" icon="el-icon-plus" size="mini" @click="editChildType">添加子分类</el-button>
       </div>
     </div>
-    <coursetype v-for="item in coursetypes.children" v-show="coursetypes.isShow" :coursetypes="item" />
+    <coursetype v-for="item in coursetypes.children" v-show="coursetypes.isShow" :coursetypes="item" :refresh="refresh" />
     <el-dialog
-      title="编辑课程名称"
+      title="编辑课程分类名称"
       :visible.sync="editNameShow"
     >
       <el-form
+        v-if="editNameShow"
+        ref="editform"
         :model="editFormInfo"
         label-width="120px"
         :rules="rules"
@@ -30,10 +32,21 @@
         >
           <el-input v-model="editFormInfo.title" />
         </el-form-item>
+        <el-form-item
+          prop="description"
+          label="描述"
+        >
+          <el-input
+            v-model="editFormInfo.description"
+            type="textarea"
+            :autosize="{ minRows: 2, maxRows: 4}"
+            placeholder="请输入内容"
+          />
+        </el-form-item>
       </el-form>
       <div slot="footer">
-        <el-button type="info">取消</el-button>
-        <el-button type="primary">提交</el-button>
+        <el-button type="info" @click="editNameShow = false">取消</el-button>
+        <el-button type="primary" @click="submitEditFormInfo">提交</el-button>
       </div>
     </el-dialog>
     <el-dialog
@@ -41,6 +54,8 @@
       :visible.sync="addTypeShow"
     >
       <el-form
+        v-if="addTypeShow"
+        ref="addform"
         :model="addTypeFormInfo"
         label-width="120px"
         :rules="addTypeRules"
@@ -51,10 +66,21 @@
         >
           <el-input v-model="addTypeFormInfo.type" />
         </el-form-item>
+        <el-form-item
+          prop="description"
+          label="类别描述"
+        >
+          <el-input
+            v-model="addTypeFormInfo.description"
+            type="textarea"
+            :autosize="{ minRows: 2, maxRows: 4 }"
+            placeholder="请输入内容"
+          />
+        </el-form-item>
       </el-form>
       <div slot="footer">
-        <el-button type="info">取消</el-button>
-        <el-button type="primary">提交</el-button>
+        <el-button type="info" @click="cancelAddType">取消</el-button>
+        <el-button type="primary" @click="submitAddType">提交</el-button>
       </div>
     </el-dialog>
   </div>
@@ -62,6 +88,10 @@
 </template>
 
 <script>
+import {
+  postOnlineTrainingCategory,
+  putOnlineTrainingCategory
+} from '@/api/coursecategory.js'
 export default {
   name: 'Coursetype',
   components: {
@@ -85,16 +115,24 @@ export default {
             }
           ],
           isShow: false,
-          level: 1
+          level: 1,
+          pid: null
         }
       }
+    },
+    refresh: {
+      type: Function,
+      required: true
     }
   },
   data() {
     return {
       editNameShow: false,
       editFormInfo: {
-        title: this.coursetypes.name
+        title: this.coursetypes.name,
+        description: this.coursetypes.description,
+        id: this.coursetypes.id,
+        pid: this.coursetypes.pid
       },
       rules: {
         title: [
@@ -107,7 +145,9 @@ export default {
       },
       addTypeShow: false,
       addTypeFormInfo: {
-        type: ''
+        type: '',
+        description: '',
+        pid: -1
       },
       addTypeRules: {
         type: [
@@ -119,9 +159,64 @@ export default {
   methods: {
     editCourseName() {
       this.editNameShow = true
+      this.editFormInfo = {
+        title: this.coursetypes.name,
+        description: this.coursetypes.description,
+        id: this.coursetypes.id,
+        pid: this.coursetypes.pid
+      }
     },
     editChildType() {
       this.addTypeShow = true
+      this.addTypeFormInfo.type = ''
+      this.addTypeFormInfo.description = ''
+      this.addTypeFormInfo.pid = this.coursetypes.id
+    },
+    submitEditFormInfo() {
+      this.$refs.editform.validate((valid) => {
+        if (valid) {
+          const data = {
+            name: this.editFormInfo.title,
+            description: this.editFormInfo.description,
+            id: this.editFormInfo.id,
+            pid: this.editFormInfo.pid
+          }
+          putOnlineTrainingCategory(data).then(res => {
+            this.$message({
+              type: 'success',
+              message: '修改成功'
+            })
+            this.refresh()
+            this.editNameShow = false
+          }).catch(() => {
+            this.$message.error('修改失败')
+          })
+        }
+      })
+    },
+    cancelAddType() {
+      this.addTypeShow = false
+    },
+    submitAddType() {
+      this.$refs.addform.validate((valid) => {
+        if (valid) {
+          const data = {
+            name: this.addTypeFormInfo.type,
+            description: this.addTypeFormInfo.description,
+            pid: this.addTypeFormInfo.pid
+          }
+          postOnlineTrainingCategory(data).then(res => {
+            this.addTypeShow = false
+            this.$message({
+              type: 'success',
+              message: '添加成功'
+            })
+            this.refresh()
+          }).catch(() => {
+            this.$message.error('添加失败')
+          })
+        }
+      })
     }
   }
 }

src/views/exam/index.vue

@@ -18,7 +18,7 @@
             />
           </el-select>
           <el-input v-model="inputSearchName" style="width: 480px;margin-left: 20px;" placeholder="请输入名称" />
-          <el-button style="margin-left: 20px;">搜索</el-button>
+          <el-button style="margin-left: 20px;" type="success">搜索</el-button>
         </div>
         <div class="table-wrapper">
           <el-table
@@ -65,30 +65,32 @@
               prop="title"
               label="名称"
             />
-            <el-table-column
+            <!-- <el-table-column
               label="包含内容"
             >
               <template slot-scope="scope">
                 <div>题库:&nbsp;{{ scope.row.questionSum }}</div>
               </template>
-            </el-table-column>
+            </el-table-column> -->
             <el-table-column
               label="操作"
             >
               <template slot-scope="scope">
-                <el-button @click="showEditTypeDialog">编辑</el-button>
-                <el-button @click="deleteType(scope.row)">删除</el-button>
+                <el-button type="warning" @click="showEditTypeDialog(scope.row)">编辑</el-button>
+                <el-button type="danger" @click="deleteType(scope.row)">删除</el-button>
               </template>
             </el-table-column>
           </el-table>
         </div>
       </el-tab-pane>
+      <el-tab-pane label="试卷管理" name="试卷管理" />
     </el-tabs>
     <el-dialog
       title="创建题库"
       :visible.sync="addFormDialogShow"
     >
       <el-form
+        v-if="addFormDialogShow"
         ref="addform"
         :model="formInfo"
         label-width="120px"
@@ -112,7 +114,7 @@
         </el-form-item>
       </el-form>
       <div slot="footer">
-        <el-button type="info" @click="cancelAddForm">取消</el-button>
+        <el-button type="info" @click="addFormDialogShow = false">取消</el-button>
         <el-button type="success" @click="submitAddForm">提交</el-button>
       </div>
     </el-dialog>
@@ -153,18 +155,19 @@
       :visible.sync="addTypeFormDialog"
     >
       <el-form
+        v-if="addTypeFormDialog"
         ref="addTypeform"
         :model="typeFormInfo"
         label-width="120px"
-        :rules="rules"
+        :rules="typeRules"
       >
         <el-form-item label="名称" prop="title">
           <el-input v-model="typeFormInfo.title" />
         </el-form-item>
       </el-form>
       <div slot="footer">
-        <el-button>取消</el-button>
-        <el-button>提交</el-button>
+        <el-button type="info" @click="addTypeFormDialog = false">取消</el-button>
+        <el-button type="primary" @click="submitAddType">提交</el-button>
       </div>
     </el-dialog>
     <el-dialog
@@ -172,6 +175,7 @@
       :visible.sync="editTypeFormDialog"
     >
       <el-form
+        v-if="editTypeFormDialog"
         ref="editTypeform"
         :model="editTypeFormInfo"
         label-width="120px"
@@ -182,8 +186,8 @@
         </el-form-item>
       </el-form>
       <div slot="footer">
-        <el-button @click="cancelEditType">取消</el-button>
-        <el-button @click="submitEditType">提交</el-button>
+        <el-button type="info" @click="cancelEditType">取消</el-button>
+        <el-button type="primary" @click="submitEditType">提交</el-button>
       </div>
     </el-dialog>
   </div>
@@ -191,6 +195,16 @@
 
 <script>
 // import axiosFile from '@/utils/requestfile.js'
+import {
+  getExamLibrary,
+  postExamLibrary,
+  putExamLibrary,
+  deleteExamLibrary,
+  getExamLibraryCategory,
+  postExamLibraryCategory,
+  putExamLibraryCategory,
+  deleteExamLibraryCategory
+} from '@/api/test.js'
 export default {
   data() {
     return {
@@ -290,7 +304,31 @@ export default {
       }
     }
   },
+  mounted() {
+    this.initExamLibraryCategory()
+  },
   methods: {
+    async initExamLibraryCategory() {
+      const params = {
+        page: 0,
+        size: 9999
+      }
+      await getExamLibraryCategory(params).then(res => {
+        console.log(res, 'getExamLibraryCategory getExamLibraryCategory')
+        this.tableTypeData = [...res.content.map(item => {
+          return {
+            title: item.name,
+            ...item
+          }
+        })]
+        this.questionTypeOption = [...res.content.map(item => {
+          return {
+            label: item.name,
+            value: item.id
+          }
+        })]
+      })
+    },
     addQuestionBank() {
       this.addFormDialogShow = true
     },
@@ -336,9 +374,14 @@ export default {
         cancelButtonText: '取消',
         type: 'warning'
       }).then(() => {
-        this.$message({
-          type: 'message',
-          message: '删除成功'
+        deleteExamLibraryCategory([row.id]).then(res => {
+          this.$message({
+            type: 'message',
+            message: '删除成功'
+          })
+          this.initExamLibraryCategory()
+        }).catch(() => {
+          this.$message.error('删除失败')
         })
       }).catch(() => {
         this.$message({
@@ -353,27 +396,115 @@ export default {
     submitEditType() {
       // 提交编辑类型
       //
+      this.$refs.editTypeform.validate((valid) => {
+        if (valid) {
+          console.log('editTypeform editTypeform editTypeform ')
+          const data = {
+            name: this.editTypeFormInfo.title,
+            id: this.editTypeFormInfo.id
+          }
+          putExamLibraryCategory(data).then(res => {
+            this.$message({
+              type: 'success',
+              message: '修改成功'
+            })
+            this.initExamLibraryCategory()
+            this.editTypeFormDialog = false
+          }).catch(() => {
+            this.$message.error('修改失败')
+          })
+        }
+      })
     },
-    showEditTypeDialog() {
+    showEditTypeDialog(row) {
       //
       this.editTypeFormDialog = true
+      //
+      this.editTypeFormInfo = {
+        ...row
+      }
+      // console.log(row, 'showEditTypeDialog showEditTypeDialog')
     },
     addTypeDialog() {
       // 添加分类对话框
       this.addTypeFormDialog = true
+      this.typeFormInfo.title = ''
     },
     jumpToManage(row) {
       // console.log(row)
       this.$router.push({
         path: '/train/exam/manage/44444'
       })
+    },
+    submitAddType() {
+      this.$refs.addTypeform.validate((valid) => {
+        if (valid) {
+          // submitAddType
+          const data = {
+            name: this.typeFormInfo.title
+          }
+          postExamLibraryCategory(data).then(res => {
+            console.log(res, 'postExamLibraryCategory postExamLibraryCategory')
+            this.$message({
+              type: 'success',
+              message: '添加成功'
+            })
+            this.initExamLibraryCategory()
+            this.addTypeFormDialog = false
+          }).catch(() => {
+            this.$message.error('添加失败')
+          })
+        }
+      })
     }
   }
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
+  .exam-wrapper {
+    padding: 30px;
+    margin: 30px auto;
+    border-radius: 30px;
+    box-shadow: 0 0 9px 1px #eee;
+    width: 80%;
+  }
   .add-question-bank-wrapper {
+    padding: 20px;
+    margin: 20px auto;
+    border-radius: 20px;
+    box-shadow: 0 0 9px 1px #eee;
+    width: 80%;
+  }
+  .tools-search-question-bank-wrapper {
+    padding: 20px;
+    margin: 20px auto;
+    border-radius: 20px;
+    box-shadow: 0 0 9px 1px #eee;
+    width: 80%;
+  }
+  .table-wrapper {
+    padding: 20px;
+    margin: 20px auto;
+    border-radius: 20px;
+    box-shadow: 0 0 9px 1px #eee;
+    width: 80%;
+  }
+  .edit-question-bank-wrapper {
+    padding: 20px;
+    margin: 20px auto;
+    border-radius: 20px;
+    box-shadow: 0 0 9px 1px #eee;
+    width: 80%;
+  }
+  .edit-type-table-wrapper {
+    padding: 20px;
+    margin: 20px auto;
+    border-radius: 20px;
+    box-shadow: 0 0 9px 1px #eee;
+    width: 80%;
+  }
+  /* .add-question-bank-wrapper {
     position: absolute;
     right: 20px;
     top: 0;
@@ -387,5 +518,5 @@ export default {
     display: flex;
     justify-content: flex-end;
     padding-right: 20px;
-  }
+  } */
 </style>

src/views/teach/addcourse.vue

@@ -6,13 +6,28 @@
       label-width="120px"
       :rules="rules"
     >
-      <el-form-item label="课程名称" prop="title">
+      <el-form-item label="课程标题" prop="title">
         <el-input v-model="formInfo.title" />
       </el-form-item>
       <el-form-item label="课程类型" prop="type">
-        <treeselect v-model="formInfo.type" :options="typeOptions" style="width: 120px;margin-left: 20px;" />
+        <treeselect v-model="formInfo.type" :options="typeOptions" style="width: 320px;" />
       </el-form-item>
-      <el-form-item label="封面图片">
+      <el-form-item label="课程副标题" prop="subTitle">
+        <el-input v-model="formInfo.subTitle" />
+      </el-form-item>
+      <el-form-item label="课程状态" prop="state">
+        <el-select
+          v-model="formInfo.state"
+        >
+          <el-option
+            v-for="item in courseStates"
+            :key="item.label"
+            :value="item.value"
+            :label="item.label"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="封面图片" prop="coverName">
         <div class="tool-import-cover-wrapper">
           <div class="import-cover-wrapper">
             <label style="width: 100%; height: 100%;">
@@ -36,7 +51,7 @@
       </el-form-item>
     </el-form>
     <div class="submit-course-wrapper">
-      <el-button size="medium">提交</el-button>
+      <el-button size="medium" type="primary" @click="submitCourse">提交</el-button>
     </div>
   </div>
 </template>
@@ -44,6 +59,10 @@
 <script>
 import Treeselect from '@riophae/vue-treeselect'
 import '@riophae/vue-treeselect/dist/vue-treeselect.css'
+import { getOnlineTrainingCategory } from '@/api/coursecategory.js'
+import {
+  createCourse
+} from '@/api/course.js'
 export default {
   name: 'Addcourse',
   components: {
@@ -53,9 +72,12 @@ export default {
     return {
       formInfo: {
         title: '',
-        type: '1',
-        cover: '',
-        introduce: ''
+        type: '',
+        coverName: '',
+        cover: null,
+        introduce: '',
+        state: '已关闭',
+        subTitle: ''
       },
       rules: {
         title: [
@@ -64,8 +86,57 @@ export default {
             message: '请输入标题',
             trigger: 'blur'
           }
+        ],
+        type: [
+          {
+            required: true,
+            message: '请输入类型',
+            trigger: 'blur'
+          }
+        ],
+        coverName: [
+          {
+            required: true,
+            message: '请选择封面图片',
+            trigger: 'change'
+          }
+        ],
+        introduce: [
+          {
+            required: true,
+            message: '请选择课程简介',
+            trigger: 'blur'
+          }
+        ],
+        state: [
+          {
+            required: true,
+            message: '请选择课程状态',
+            trigger: 'change'
+          }
+        ],
+        subTitle: [
+          {
+            required: true,
+            message: '请输入课程副标题',
+            trigger: 'blur'
+          }
         ]
       },
+      courseStates: [
+        {
+          label: '未发布',
+          value: '未发布'
+        },
+        {
+          label: '已发布',
+          value: '已发布'
+        },
+        {
+          label: '已关闭',
+          value: '已关闭'
+        }
+      ],
       progressPercent: 0,
       typeOptions: [
         {
@@ -95,7 +166,95 @@ export default {
       fileUrl: ''
     }
   },
+  async mounted() {
+    await this.getCourseCategory()
+  },
   methods: {
+    async getCourseCategory() {
+      const params = {
+        page: 0,
+        size: 99999
+      }
+      await getOnlineTrainingCategory(params).then(res => {
+        console.log(res, 'getOnlineTrainingCategory getOnlineTrainingCategory')
+        res.content.forEach(item => {
+          item.children = []
+          item.isShow = false
+          item.level = 1
+          item.label = item.name
+        })
+        const category = []
+        // 给指定父 id 元素添加元素
+        function addType(item) {
+          const pid = item.pid
+          const id = item.id
+          // 判断自己是否已经添加过
+          let isAdded = false
+          function isAddElement(item1) {
+            if (item1.id === id) {
+              isAdded = true
+            }
+            for (const item2 of item1.children) {
+              isAddElement(item2)
+            }
+          }
+
+          function addElement(item1) {
+            if (item1.id === pid) {
+              item1.children.push(item)
+              item.level = item1.level + 1
+              return
+            }
+            for (const item2 of item1.children) {
+              addElement(item2)
+            }
+          }
+          for (const ele of category) {
+            isAddElement(ele)
+          }
+          if (isAdded === false) {
+            for (const ele of category) {
+              addElement(ele)
+            }
+          }
+        }
+        function composeCategory(pid) {
+          if (!pid) {
+            for (let i = 0; i < res.content.length; i++) {
+              if (res.content[i].pid) {
+                composeCategory(res.content[i].pid)
+                addType(res.content[i])
+              }
+            }
+          }
+          if (pid) {
+            for (let i = 0; i < res.content.length; i++) {
+              if (res.content[i].id === pid && res.content[i].pid) {
+                composeCategory(res.content[i].pid)
+                addType(res.content[i])
+                // res.content[i].level = category[category.length - 1].level + 1
+                // category[category.length - 1].children.push(res.content[i])
+              } else if (res.content[i].id === pid && !res.content[i].pid) {
+                if (!category.filter(item => item.id === pid).length) {
+                  category.push(res.content[i])
+                }
+              }
+            }
+          }
+        }
+        composeCategory()
+        for (let i = 0; i < res.content.length; i++) {
+          const pArray = category.filter(item => item.id === res.content[i].id)
+          if (!pArray.length && !res.content[i].pid) {
+            category.push(res.content[i])
+          }
+        }
+        this.typeOptions = [...category]
+        if (this.typeOptions.length > 0) {
+          this.formInfo.type = this.typeOptions[0].id
+        }
+      })
+    },
     // 导入图片
     importFile($event) {
       console.log($event)
@@ -103,9 +262,47 @@ export default {
       console.log(this.$refs.importfile.files, 'files')
       if (this.$refs.importfile.files.length === 0) {
         this.fileUrl = ''
+        this.formInfo.coverName = ''
+        this.formInfo.cover = null
       } else {
         this.fileUrl = URL.createObjectURL(this.$refs.importfile.files[0])
+        this.formInfo.coverName = this.$refs.importfile.files[0].name
+        this.formInfo.cover = this.$refs.importfile.files[0]
       }
+    },
+    // 提交课程
+    submitCourse() {
+      this.$refs.addcourse.validate((valid) => {
+        if (valid) {
+          // this.$refs.addcourse
+          const data = {
+            categoryId: this.formInfo.type,
+            courseBriefIntroduction: this.formInfo.introduce,
+            courseStatus: this.formInfo.state,
+            courseSubTitle: this.formInfo.subTitle,
+            courseTitle: this.formInfo.title,
+            courseCoverFile: this.formInfo.cover
+          }
+          const formData = new FormData()
+          for (const key in data) {
+            formData.append(key, data[key])
+          }
+          const updateFunc = (progressEvent) => {
+            this.progressPercent = parseInt('' + progressEvent.loaded / progressEvent.total)
+          }
+          createCourse(formData, updateFunc).then(res => {
+            this.$message.success({
+              type: 'success',
+              message: '添加成功'
+            })
+            this.formInfo.title = ''
+            this.formInfo.introduce = ''
+            this.formInfo.subTitle = ''
+          }).catch(() => {
+            this.$message.error('添加失败')
+          })
+        }
+      })
     }
   }
 }
@@ -113,8 +310,11 @@ export default {
 
 <style lang="scss">
   .add-course-wrapper {
-    padding-top: 30px;
-    width: 800px;
+    padding: 30px;
+    width: 80%;
+    margin: 30px auto;
+    box-shadow: 0 0 9px 1px #eee;
+    border-radius: 30px;
     .submit-course-wrapper {
       display: flex;
       justify-content: flex-end;
@@ -124,7 +324,7 @@ export default {
     display: flex;
     align-items: center;
     justify-content: flex-start;
-    width: 600px;
+    /* width: 600px; */
     .import-cover-wrapper {
       width: 200px;
       height: 100px;

src/views/teach/addtype.vue

 <template>
-  <div>
-    <div class="type-title-wrapper">
-      <div style="margin-left: 40px;">课程名称</div>
-      <div style="margin-right:80px;">操作</div>
+  <div class="type-total-wrapper">
+    <div class="tools-wrapper">
+      <el-button type="primary" @click="addCourseTypeShow">新增课程分类</el-button>
     </div>
-    <coursetype v-for="item in courseList" :coursetypes="item" />
+    <div class="table-total-wrapper">
+      <div class="type-title-wrapper">
+        <div style="margin-left: 40px;">课程分类名称</div>
+        <div style="margin-right:80px;">操作</div>
+      </div>
+      <coursetype v-for="item in courseList" :coursetypes="item" :refresh="initCourseType" />
+    </div>
+    <el-dialog
+      title="新增课程分类"
+      :visible.sync="addCourseType"
+      width="70%"
+    >
+      <el-form
+        v-if="addCourseType"
+        ref="addform"
+        :model="addCourseFormInfo"
+        :rules="rules"
+        label-width="120px"
+      >
+        <el-form-item
+          prop="name"
+          label="课程分类名称"
+        >
+          <el-input
+            v-model="addCourseFormInfo.name"
+          />
+        </el-form-item>
+        <el-form-item
+          prop="description"
+          label="课程分类描述"
+        >
+          <el-input
+            v-model="addCourseFormInfo.description"
+            type="textarea"
+            :autosize="{ minRows: 2, maxRows: 4}"
+          />
+        </el-form-item>
+      </el-form>
+      <div slot="footer">
+        <el-button type="info" @click="addCourseType = false">取消</el-button>
+        <el-button type="primary" @click="submitCourseType">提交</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
 <script>
 import coursetype from '../components/coursetype.vue'
+import {
+  getOnlineTrainingCategory,
+  postOnlineTrainingCategory,
+  putOnlineTrainingCategory,
+  deleteOnlineTrainingCategory
+} from '@/api/coursecategory.js'
 export default {
   components: {
     coursetype
@@ -53,13 +100,148 @@ export default {
           isShow: false,
           level: 1
         }
-      ]
+      ],
+      addCourseType: false,
+      addCourseFormInfo: {
+        name: '',
+        description: ''
+      },
+      rules: {
+        name: [
+          {
+            required: true,
+            message: '请输入课程分类名称',
+            trigger: 'blur'
+          }
+        ],
+        description: [
+          {
+            required: true,
+            message: '请输入课程分类描述',
+            trigger: 'blur'
+          }
+        ]
+      }
+    }
+  },
+  mounted() {
+    this.initCourseType()
+  },
+  methods: {
+    async initCourseType() {
+      const params = {
+        page: 0,
+        size: 9999
+      }
+      await getOnlineTrainingCategory(params).then(res => {
+        res.content.forEach(item => {
+          item.children = []
+          item.isShow = false
+          item.level = 1
+        })
+        const category = []
+        // 给指定父 id 元素添加元素
+        function addType(item) {
+          const pid = item.pid
+          const id = item.id
+          // 判断自己是否已经添加过
+          let isAdded = false
+          function isAddElement(item1) {
+            if (item1.id === id) {
+              isAdded = true
+            }
+            for (const item2 of item1.children) {
+              isAddElement(item2)
+            }
+          }
+
+          function addElement(item1) {
+            if (item1.id === pid) {
+              item1.children.push(item)
+              item.level = item1.level + 1
+              return
+            }
+            for (const item2 of item1.children) {
+              addElement(item2)
+            }
+          }
+          for (const ele of category) {
+            isAddElement(ele)
+          }
+          if (isAdded === false) {
+            for (const ele of category) {
+              addElement(ele)
+            }
+          }
+        }
+        function composeCategory(pid) {
+          if (!pid) {
+            for (let i = 0; i < res.content.length; i++) {
+              if (res.content[i].pid) {
+                composeCategory(res.content[i].pid)
+                addType(res.content[i])
+              }
+            }
+          }
+          if (pid) {
+            for (let i = 0; i < res.content.length; i++) {
+              if (res.content[i].id === pid && res.content[i].pid) {
+                composeCategory(res.content[i].pid)
+                addType(res.content[i])
+                // res.content[i].level = category[category.length - 1].level + 1
+                // category[category.length - 1].children.push(res.content[i])
+              } else if (res.content[i].id === pid && !res.content[i].pid) {
+                if (!category.filter(item => item.id === pid).length) {
+                  category.push(res.content[i])
+                }
+              }
+            }
+          }
+        }
+        composeCategory()
+        for (let i = 0; i < res.content.length; i++) {
+          const pArray = category.filter(item => item.id === res.content[i].id)
+          if (!pArray.length && !res.content[i].pid) {
+            category.push(res.content[i])
+          }
+        }
+        this.courseList = [...category]
+      })
+    },
+    addCourseTypeShow() {
+      // addCourseTypeShow
+      this.addCourseType = true
+      this.addCourseFormInfo = {
+        name: '',
+        description: ''
+      }
+    },
+    submitCourseType() {
+      this.$refs.addform.validate((valid) => {
+        if (valid) {
+          //
+          const params = {
+            name: this.addCourseFormInfo.name,
+            description: this.addCourseFormInfo.description
+          }
+          postOnlineTrainingCategory(params).then(res => {
+            console.log('postOnlineTrainingCategory poseOnlineTrainingCategory poseOnlineTrainingCategory')
+            this.$message({
+              type: 'success',
+              message: '添加成功'
+            })
+            this.addCourseType = false
+          }).catch(() => {
+            this.$message.error('添加失败')
+          })
+        }
+      })
     }
   }
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
   .type-title-wrapper{
     margin-top: 20px;
     display: flex;
@@ -67,4 +249,25 @@ export default {
     border-bottom: 3px solid #eee;
     padding-bottom: 18px;
   }
+  .type-total-wrapper {
+    width: 80%;
+    padding: 30px;
+    border-radius: 30px;
+    box-shadow: 0 0 9px 1px #eee;
+    margin: 30px auto;
+    .tools-wrapper {
+      width: 80%;
+      padding: 20px;
+      border-radius: 20px;
+      box-shadow: 0 0 9px 1px #eee;
+      margin: 20px auto;
+    }
+    .table-total-wrapper {
+      width: 80%;
+      padding: 20px;
+      border-radius: 20px;
+      box-shadow: 0 0 9px 1px #eee;
+      margin: 20px auto;
+    }
+  }
 </style>