'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/home1.vue

@@ -80,7 +80,7 @@
             class="secure-teach1-item1-wrapper"
             @click.stop="clickToSecureTeachItem1"
           >
-            <div class="secure-teach1-item1-sum">{{ trainimgEnterpriseNum }}</div>
+            <div class="secure-teach1-item1-sum">416</div>
             <div class="secure-teach1-enterprise1-sum">参加培训企业数量</div>
             <div
               class="secure-teach1-icon1"
@@ -91,7 +91,7 @@
             class="secure-teach1-item2-wrapper"
             @click.stop="clickToSecureTeachItem2"
           >
-            <div class="secure-teach1-item2-sum">{{ trainimgPeopleNum }}</div>
+            <div class="secure-teach1-item2-sum">2103</div>
             <div class="secure-teach1-enterprise2-sum">参加总人数</div>
             <div
               class="secure-teach1-icon2"
@@ -106,7 +106,7 @@
             class="secure-teach2-item1-wrapper"
             @click.stop="clickToSecureTeachItem3"
           >
-            <div class="secure-teach2-item1-sum">{{ trainimgTodayEnterpriseNum }}</div>
+            <div class="secure-teach2-item1-sum">0</div>
             <div class="secure-teach2-enterprise1-sum">
               今日参加培训企业数量
             </div>
@@ -119,7 +119,7 @@
             class="secure-teach2-item2-wrapper"
             @click.stop="clickToSecureTeachItem4"
           >
-            <div class="secure-teach2-item2-sum">{{ trainimgTodayPeopleNum }}</div>
+            <div class="secure-teach2-item2-sum">0</div>
             <div class="secure-teach2-enterprise2-sum">今日参加总人数</div>
             <div
               class="secure-teach2-icon2"
@@ -135,7 +135,7 @@
             class="certify-manage-item1-wrapper"
             @click.stop="clickToCertifyItem1"
           >
-            <div class="certify-manage-sum">{{dualSystemEnters.length}}</div>
+            <div class="certify-manage-sum">{{ dualSystemEnters.length }}</div>
             <div class="certify-manage-title">上传双体系企业数量</div>
             <div
               class="certify-manage-icon certify-icon1"
@@ -146,7 +146,7 @@
             class="certify-manage-item2-wrapper"
             @click.stop="clickToCertifyItem2"
           >
-            <div class="certify-manage-sum">{{emergencyPlanEnters.length}}</div>
+            <div class="certify-manage-sum">{{ emergencyPlanEnters.length }}</div>
             <div class="certify-manage-title">上传应急预案企业数量</div>
             <div
               class="certify-manage-icon certify-icon2"
@@ -157,7 +157,7 @@
             class="certify-manage-item3-wrapper"
             @click.stop="clickToCertifyItem3"
           >
-            <div class="certify-manage-sum">{{standardization.length}}</div>
+            <div class="certify-manage-sum">{{ standardization.length }}</div>
             <div class="certify-manage-title">上传标准化企业数量</div>
             <div
               class="certify-manage-icon certify-icon3"
@@ -479,41 +479,6 @@
             </div>
           </div>
         </div>
-        <!-- 培训影像列表 -->
-        <div v-show="isShowTrainImgList && mapActiveIndex === 3" class="trainimg-list-wrapper">
-          <div class="trainimg-list-title-wrapper">培训影像列表</div>
-          <div class="trainimg-list-content-wrapper">
-            <div
-              v-for="(item, index) in curTrainImages"
-              :key="item.id"
-              :class="{ active: index === curTrainImgIndex }"
-              class="trainimg-list-content-item"
-              @click.stop="trainimgClick(item, index)"
-            >
-              {{ item.briefIntroduction }}
-              <svg
-                class="arrow-to-right"
-                viewBox="0 0 1024 1024"
-                version="1.1"
-                xmlns="http://www.w3.org/2000/svg"
-                p-id="2070"
-                width="24"
-                height="24"
-              >
-                <path
-                  d="M698.181818 546.909091a35.141818 35.141818 0 0 1-24.669091-10.24l-372.363636-372.363636a34.909091 34.909091 0 0 1 49.338182-49.338182l372.363636 372.363636a34.676364 34.676364 0 0 1 0 49.338182 35.141818 35.141818 0 0 1-24.669091 10.24z"
-                  p-id="2071"
-                  fill="currentColor"
-                />
-                <path
-                  d="M325.818182 919.272727a35.141818 35.141818 0 0 1-24.669091-10.24 34.676364 34.676364 0 0 1 0-49.338182l372.363636-372.363636a34.909091 34.909091 0 0 1 49.338182 49.338182l-372.363636 372.363636a35.141818 35.141818 0 0 1-24.669091 10.24z"
-                  p-id="2072"
-                  fill="currentColor"
-                />
-              </svg>
-            </div>
-          </div>
-        </div>
         <!-- 重要工作部署 -->
         <div
           v-show="mapActiveIndex === 9"
@@ -1631,7 +1596,7 @@
             >
               生产责任清单
             </div>
-            <div
+            <!-- <div
               class="curSelect-enter-comprehensiveinfo-safetymanagement-stars-wrapper"
             >
               <div
@@ -1642,7 +1607,7 @@
                 v-for="(item, index) in 5 - curEnterStar2"
                 class="curSelect-enter-comprehensiveinfo-mainresposebilitylists-wstar"
               />
-            </div>
+            </div> -->
             <div
               class="curSelect-enter-comprehensiveinfo-mainresponsebilitylists-icon"
               @click.stop="
@@ -2596,7 +2561,7 @@
           @click.stop="enterDangerItemClose"
         />
         <div class="danger-record-wrapper">
-          <img class="img-record-wrapper" v-if="curSelectDangerIndex > -1 && dangers[curSelectDangerIndex].filePath" :src="dangers[curSelectDangerIndex].filePath" />
+          <img v-if="curSelectDangerIndex > -1 && dangers[curSelectDangerIndex].filePath" class="img-record-wrapper" :src="dangers[curSelectDangerIndex].filePath">
         </div>
         <!-- 作业名称 -->
         <!-- <div class="enter-info-child-item-title-wrapper">
@@ -2673,38 +2638,6 @@
           </div>
         </div>
       </div>
-      <!-- 安全教育培训 -->
-      <div
-        v-if="isShowTrainImgItem"
-        class="enter-trainimg-item-wrapper"
-      >
-        <!-- 关闭按钮 -->
-        <div
-          class="enter-trainimg-item-close"
-          @click.stop="enterTrainImgItemClose"
-        ></div>
-        <!-- 培训影像 -->
-        <div class="enter-trainimg-wrapper">
-          <div class="enter-trainimg-title">培训简介</div>
-          <div class="enter-trainimg-content" v-if="curTrainImgIndex > -1 && curTrainImages[curTrainImgIndex]">{{curTrainImages[curTrainImgIndex].briefIntroduction}}</div>
-          <div class="enter-trainimg-title">参与人数</div>
-          <div class="enter-trainImg-content" v-if="curTrainImgIndex > -1 && curTrainImages[curTrainImgIndex]">{{curTrainImages[curTrainImgIndex].peopleNum}}</div>
-          <div class="enter-trainimg-title">所在位置</div>
-          <div class="enter-trainImg-content" v-if="curTrainImgIndex > -1 && curTrainImages[curTrainImgIndex]">{{curTrainImages[curTrainImgIndex].location}}</div>
-          <div class="enter-trainimg-title">培训前照片</div>
-          <div class="enter-trainimg-img">
-            <img :src="curTrainImages[curTrainImgIndex].beforeImgPath" v-if="curTrainImgIndex > -1 && curTrainImages[curTrainImgIndex]"/>
-          </div>
-          <div class="enter-trainimg-title">培训中照片</div>
-          <div class="enter-trainimg-img">
-            <img :src="curTrainImages[curTrainImgIndex].trainingImgPath" v-if="curTrainImgIndex > -1 && curTrainImages[curTrainImgIndex]" />
-          </div>
-          <div class="enter-trainimg-title">培训后照片</div>
-          <div class="enter-trainimg-img">
-            <img :src="curTrainImages[curTrainImgIndex].afterImgPath" v-if="curTrainImgIndex > -1 && curTrainImages[curTrainImgIndex]" />
-          </div>
-        </div>
-      </div>
     </div>
     <!-- 青柠监控 -->
     <div v-show="qingning" class="qingning-wrapper">
@@ -2855,12 +2788,7 @@ import {
   findUploadedDangerJobReport,
   dangerJobReport } from '@/api/hwapproval.js'
 // import PDFViewer from 'pdf-viewer-vue';
-import { 
-  findTrainEnterprise, 
-  findTodayTrainEnterprise, 
-  searchTrainImage,
-  analyzeSafetyEducation } from '@/api/trainimage.js'
-
+import { findTrainEnterprise, findTodayTrainEnterprise } from '@/api/trainimage.js'
 export default {
   components: {
     LivePlayer,
@@ -2868,14 +2796,6 @@ export default {
   },
   data() {
     return {
-      trainimgEnterpriseNum: 0,
-      trainimgPeopleNum: 0,
-      trainimgTodayEnterpriseNum: 0,
-      trainimgTodayPeopleNum: 0,
-      isShowTrainImgList: false,
-      isShowTrainImgItem: false,
-      curTrainImgIndex: -1,
-      curTrainImages: [],
       trainEnterprises: [],
       todayTrainEnterprises: [],
       isCurCertifyPdfFile: false,
@@ -3702,30 +3622,12 @@ export default {
   },
   methods: {
     async initTrainEnterprises() {
-      await analyzeSafetyEducation().then(res => {
-        this.trainimgEnterpriseNum = res.enterpriseNum
-        this.trainimgPeopleNum = res.peopleNum
-        this.trainimgTodayEnterpriseNum = res.todayEnterpriseNum
-        this.trainimgTodayPeopleNum = res.todayPeopleNum
-      })
       await findTrainEnterprise().then(res => {
-        this.trainEnterprises = [...res.map(item => {
-          return {
-            ...item,
-            companyName: item.enterpriseName,
-            companyId: item.enterpriseId
-          }
-        })]
+        this.trainEnterprises = [...res]
         console.log(res, 'findTrainEnterprise findTrainEnterprise')
       })
       await findTodayTrainEnterprise().then(res => {
-        this.todayTrainEnterprises = [...res.map(item => {
-          return {
-            ...item,
-            companyName: item.enterpriseName,
-            companyId: item.enterpriseId
-          }
-        })]
+        this.todayTrainEnterprises = [...res]
         console.log(res, 'findTodayTrainEnterprise findTodayTrainEnterprise')
       })
     },
@@ -4020,7 +3922,6 @@ export default {
         this.isShowTeachChargeDepart = false;
         this.isShowTeachIndusTypes = false;
         this.isShowTeachEnterLists = false;
-        this.isShowTrainImgList = false;
         return;
       }
       // 补充当前企业到全局 管理局-行业-企业
@@ -4056,7 +3957,6 @@ export default {
         this.isShowTeachChargeDepart = false;
         this.isShowTeachIndusTypes = false;
         this.isShowTeachEnterLists = false;
-        this.isShowTrainImgList = false;
         return;
       }
       // 补充当前企业到全局 管理局-行业-企业
@@ -4092,7 +3992,6 @@ export default {
         this.isShowTeachChargeDepart = false;
         this.isShowTeachIndusTypes = false;
         this.isShowTeachEnterLists = false;
-        this.isShowTrainImgList = false;
         return;
       }
       // 补充当前企业到全局 管理局-行业-企业
@@ -4128,7 +4027,6 @@ export default {
         this.isShowTeachChargeDepart = false;
         this.isShowTeachIndusTypes = false;
         this.isShowTeachEnterLists = false;
-        this.isShowTrainImgList = false;
         return;
       }
       // 补充当前企业到全局 管理局-行业-企业
@@ -11180,11 +11078,6 @@ export default {
       this.isFilterPointer = true;
       this.isShowCertify = false;
     },
-    // 企业培训影响关闭
-    enterTrainImgItemClose() {
-      this.isFilterPointer = true;
-      this.isShowTrainImgItem = false;
-    },
     // 企业备案关闭
     enterDangerItemClose() {
       this.isFilterPointer = true;
@@ -12086,7 +11979,6 @@ export default {
       if (this.mapActiveIndex === 3) {
         this.isShowTeachIndusTypes = true;
         this.isShowTeachEnterLists = false;
-        this.isShowTrainImgList = false
         return;
       }
       if (this.mapActiveIndex === 7) {
@@ -12138,8 +12030,6 @@ export default {
       this.curSelectEnterIndex = -1;
       if (this.mapActiveIndex === 3) {
         this.isShowTeachEnterLists = true;
-        this.isShowTrainImgList = false;
-
         return;
       }
       if (this.mapActiveIndex === 5) {
@@ -12155,26 +12045,6 @@ export default {
     async enterClick(item, index) {
       this.curSelectEnterIndex = index;
       if (this.mapActiveIndex === 3) {
-        console.log(item, 'enterClick enterClick curSelectEnterIndex curSelectEnterIndex curSelectEnterIndex')
-        let params = {
-          page: 0,
-          size: 999,
-          sort: 'time,desc',
-          enterpriseId: item.enterpriseId
-        }
-        await searchTrainImage(params).then(res => {
-          this.isShowTrainImgList = true
-          this.curTrainImgIndex = -1
-          this.curTrainImages = [...res.content.map(item => {
-            return {
-              ...item,
-              beforeImgPath: '\\train-image\\' + item.beforeImgPath.split('\\train-image\\')[1],
-              trainingImgPath: '\\train-image\\' + item.trainingImgPath.split('\\train-image\\')[1],
-              afterImgPath: '\\train-image\\' + item.trainingImgPath.split('\\train-image\\')[1]
-            }
-          })]
-          console.log(res, 'searchTrainImage searchTrainImage searchTrainImage __________')
-        })
         return;
       }
       if (this.mapActiveIndex === 5) {
@@ -12454,11 +12324,6 @@ export default {
       this.isFilterPointer = false;
       this.isShowDanger = true;
     },
-    trainimgClick(item, index) {
-      this.curTrainImgIndex = index;
-      this.isFilterPointer = false;
-      this.isShowTrainImgItem = true
-    },
     searchEnterKeyUp(event) {
       if (event.key === "Enter") {
         event.preventDefault();
@@ -14567,7 +14432,6 @@ html {
           }
         }
       }
-      /* 隐患列表 */
       .danger-list-wrapper {
         position: absolute;
         top: 209px;
@@ -14619,58 +14483,6 @@ html {
           }
         }
       }
-      /* 培训影响列表 */
-      .trainimg-list-wrapper {
-        position: absolute;
-        top: 209px;
-        left: 1130px;
-        width: 300px;
-        height: 401px;
-        background: #020c39;
-        border: 1px solid #05f9fb;
-        padding: 8px;
-        .trainimg-list-title-wrapper {
-          width: 100%;
-          height: 43px;
-          background-image: url("../assets/home/矩形7拷贝5.png");
-          background-repeat: no-repeat;
-          font-family: "SourceHanSansCN-Bold";
-          font-weight: Bold;
-          color: #dfeef3;
-          font-size: 18px;
-          line-height: 43px;
-          text-indent: 2em;
-        }
-        .trainimg-list-content-wrapper {
-          width: 100%;
-          height: 600px;
-          overflow-y: scroll;
-          &::-webkit-scrollbar {
-            display: none;
-          }
-          .trainimg-list-content-item {
-            width: 100%;
-            padding: 6px;
-            font-family: "SourceHanSansCN-Medium";
-            color: #05f9fb;
-            font-size: 20px;
-            white-space: nowrap;
-            overflow-x: hidden;
-            text-overflow: ellipsis;
-            position: relative;
-            &.active {
-              color: #ffe13e;
-            }
-            .arrow-to-right {
-              background: #020c39;
-              position: absolute;
-              right: 10px;
-              top: 50%;
-              transform: translateY(-50%);
-            }
-          }
-        }
-      }
       /* 重要工作部署 */
       .import-work-deployment-wrapper {
         position: absolute;
@@ -18188,60 +18000,6 @@ html {
         }
       }
     }
-    /* 企业培训影像 */
-    .enter-trainimg-item-wrapper {
-      position: absolute;
-      left: 50%;
-      top: 50%;
-      transform: translate(-50%, -50%);
-      width: 1109px;
-      height: 874px;
-      background-image: url("../assets/home/安全措施大图.png");
-      background-position: center;
-      background-repeat: no-repeat;
-      padding: 5px;
-      /* 关闭按钮 */
-      .enter-trainimg-item-close {
-        position: absolute;
-        right: 1px;
-        top: 27px;
-        width: 42px;
-        height: 42px;
-        background-image: url("../assets/home/关闭.png");
-        background-position: center;
-        background-repeat: no-repeat;
-        cursor: pointer;
-      }
-      /* 培训影像 */
-      .enter-trainimg-wrapper {
-        font-family: "SourceHanSansCN-Medium";
-        color: #fff;
-        font-size: 28px;
-        padding: 4px;
-        text-indent: 1.5em;
-        height: 750px;
-        overflow-y: scroll;
-        &::-webkit-scrollbar {
-          display: none;
-        }
-        .enter-trainimg-title {
-          font-family: "SourceHanSansCN-Medium";
-          color: #07c1f7;
-          font-size: 34px;
-          text-indent: 0.5em;
-          margin-top: 22px;
-          margin-bottom: 13px;
-        }
-        .enter-trainimg-content {
-          margin-top: 22px;
-          margin-bottom: 13px;
-        }
-        .enter-trainimg-img {
-          display: flex;
-          justify-content: center;
-        }
-      }
-    }
   }
   /** 青柠监控 */
   .qingning-wrapper {

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>

src/views/teach/cousehour.vue

 <template>
-  <div>
+  <div class="coursehour-total-wrapper">
     <div class="tools-wrapper">
       <el-button type="primary" @click="addClass">新增课时</el-button>
       <el-button type="warning" :disabled="isEditable" @click="editClass">编辑课时</el-button>
       <el-button type="danger" :disabled="isDeleteable" @click="deleteClass">删除课时</el-button>
     </div>
-    <div class="table-wrpaper">
+    <div class="table-wrapper">
       <el-table
         :data="tableData"
         @selection-change="handleSelectionChange"
@@ -29,6 +29,7 @@
       :visible.sync="addDialogFormVisible"
     >
       <el-form
+        v-if="addDialogFormVisible"
         ref="addform"
         :model="formInfo"
         label-width="120px"
@@ -42,6 +43,7 @@
         </el-form-item>
         <el-form-item
           label="导入视频文件"
+          prop="fileUrl"
         >
           <div class="import-file-total-wrapper">
             <div class="import-file-wrapper">
@@ -54,11 +56,11 @@
               <el-progress :percentage="importfilePercentage" />
             </div>
           </div>
-          <div v-if="fileName">{{ fileName }}</div>
+          <div v-if="formInfo.fileUrl">{{ formInfo.fileUrl.name }}</div>
         </el-form-item>
       </el-form>
       <div slot="footer">
-        <el-button type="success" @click="submitFileName">提交</el-button>
+        <el-button type="primary" @click="submitFileName">提交</el-button>
       </div>
     </el-dialog>
     <el-dialog
@@ -69,7 +71,7 @@
         ref="editform"
         :model="editFormInfo"
         label-width="120px"
-        :rules="rules"
+        :rules="editrules"
       >
         <el-form-item
           label="课时名称"
@@ -79,6 +81,7 @@
         </el-form-item>
         <el-form-item
           label="导入视频文件"
+          prop="fileUrl"
         >
           <div class="import-file-total-wrapper">
             <div class="import-file-wrapper">
@@ -91,17 +94,28 @@
               <el-progress :percentage="editImportantPercentage" />
             </div>
           </div>
-          <div v-if="editFileName">{{ editFileName }}</div>
+          <div v-if="(!editFormInfo.fileUrl && editFormInfo.lessonFilePath)">{{ editFormInfo.lessonFilePath }}</div>
+          <div v-if="( editFormInfo.fileUrl && editFormInfo.lessonFilePath )">{{ editFormInfo.fileUrl.name }}</div>
+          <!-- <div v-else-if="(editFormInfo.fileUrl instanceof String)">{{ editFormInfo.fileUrl }}</div> -->
+          <!-- <div v-if="editFileName">{{ editFileName }}</div> -->
         </el-form-item>
       </el-form>
       <div slot="footer">
         <el-button type="success" @click="editSubmitClass">提交</el-button>
       </div>
     </el-dialog>
+    <video :src="curAddFilePath" style="display:none" @loadeddata="addvideoLoadData" />
+    <video :src="curUpdateFilePath" style="display: none" @loadeddata="editvideoLoadData" />
   </div>
 </template>
 
 <script>
+import {
+  onlineTraining,
+  createLesson,
+  updateLesson,
+  findLesson
+} from '@/api/course.js'
 export default {
   data() {
     return {
@@ -127,7 +141,8 @@ export default {
       addDialogFormVisible: false,
       formInfo: {
         title: '',
-        fileUrl: ''
+        fileUrl: '',
+        lessonDuration: ''
       },
       formLabelWidth: '120px',
       fileName: '',
@@ -136,26 +151,62 @@ export default {
         title: [
           {
             required: true,
-            message: '请输入课程名称',
+            message: '请输入课时名称',
             trigger: 'blur'
           }
+        ],
+        fileUrl: [
+          {
+            required: true,
+            message: '请选择课时文件',
+            trigger: 'change'
+          }
         ]
       },
+      isLoadingAdd: false,
+      isLoadingEdit: false,
+      curAddFilePath: '',
+      curUpdateFilePath: '',
       editDialogFormVisible: false,
       editFormInfo: {
         title: '',
         fileUrl: ''
       },
+      editrules: {
+        title: [
+          {
+            required: true,
+            message: '请输入课时名称',
+            trigger: 'blur'
+          }
+        ]
+      },
       editFileName: '',
       editImportantPercentage: 0,
       isEditable: true,
-      isDeleteable: true
+      isDeleteable: true,
+      curFilePath: ''
     }
   },
   mounted() {
     // alert(this.$route.params.name)
+    this.initTableData()
   },
   methods: {
+    async initTableData() {
+      const params = {
+        pid: this.$route.params.name
+      }
+      await findLesson(params).then(res => {
+        this.tableData = [...res.map(item => {
+          return {
+            title: item.lessonTitle,
+            time: item.lessonDuration,
+            ...item
+          }
+        })]
+      })
+    },
     handleSelectionChange(val) {
       this.multipleSelection = val
       this.isEditable = true
@@ -170,10 +221,18 @@ export default {
     addClass() {
       // 新增课程
       this.addDialogFormVisible = true
+      this.formInfo.title = ''
+      this.formInfo.fileUrl = null
+      this.formInfo.lessonDuration = '00:00:00'
+      this.importfilePercentage = 0
     },
     editClass() {
       // 赋值当前
-      this.editFormInfo.title = this.multipleSelection[0].title
+      this.editFormInfo = {
+        fileUrl: '',
+        title: this.multipleSelection[0].lessonTitle,
+        ...this.multipleSelection[0]
+      }
       this.editDialogFormVisible = true
     },
     deleteClass() {
@@ -182,9 +241,14 @@ export default {
         cancelButtonText: '取消',
         type: 'warning'
       }).then(() => {
-        this.$message({
-          type: 'success',
-          message: '删除成功'
+        onlineTraining(this.multipleSelection.map(item => item.id)).then(res => {
+          this.initTableData()
+          this.$message({
+            type: 'success',
+            message: '删除成功'
+          })
+        }).catch(() => {
+          this.$message.error('删除失败')
         })
       }).catch(() => {
         this.$message({
@@ -195,11 +259,16 @@ export default {
     },
     importFile() {
       if (this.$refs.importfile.files.length > 0) {
-        // alert(this.$refs.importfile.files[0])
-        // console.log(this.$refs.importfile.files[0].name)
-        this.fileName = this.$refs.importfile.files[0].name
+        this.formInfo.fileUrl = this.$refs.importfile.files[0]
+        if (this.formInfo.fileUrl.name.endsWith('.mp4')) {
+          this.isLoadingAdd = false
+          this.curAddFilePath = window.URL.createObjectURL(this.formInfo.fileUrl)
+        } else if (this.formInfo.fileUrl.name.endsWith('.pdf')) {
+          this.isLoadingAdd = true
+          this.formInfo.lessonDuration = '00:00:00'
+        }
       } else {
-        this.fileName = ''
+        this.formInfo.fileUrl = null
       }
     },
     submitFileName() {
@@ -207,32 +276,183 @@ export default {
       this.$refs.addform.validate((valid) => {
         if (valid) {
           // ..
+          if (!(this.formInfo.fileUrl.name.endsWith('.mp4') || this.formInfo.fileUrl.name.endsWith('.pdf'))) {
+            this.$message.error('支持mp4、pdf等文件格式')
+            return
+          }
+          if (this.isLoadingAdd === true) {
+            const formData = new FormData()
+            const data = {
+              pid: this.$route.params.name,
+              lessonTitle: this.formInfo.title,
+              lessonFile: this.formInfo.fileUrl,
+              lessonDuration: this.formInfo.lessonDuration
+            }
+            for (const key in data) {
+              formData.append(key, data[key])
+            }
+            const updateFunc = (progressEvent) => {
+              this.importfilePercentage = parseInt('' + progressEvent.loaded / progressEvent.total)
+            }
+            createLesson(formData, updateFunc).then(res => {
+              console.log(res, 'createLesson createLesson createLesson')
+              this.$message({
+                type: 'success',
+                message: '添加成功'
+              })
+              this.initTableData()
+              this.addDialogFormVisible = false
+            }).catch(() => {
+              this.$message.error('添加失败')
+            })
+          } else {
+            this.$message.error('视频获取失败')
+          }
         } else {
           // ..
         }
       })
     },
     editImportFile() {
-      if (this.$refs.editImportFile.files.length > 0) {
-        this.editFileName = this.$refs.editImportFile.files[0].name
+      if (this.$refs.editImportfile.files.length > 0) {
+        console.log(this.$refs.editImportfile.files, 'this.$refs.editImportfile.files')
+        this.editFormInfo.fileUrl = this.$refs.editImportfile.files[0]
+        if (this.editFormInfo.fileUrl.name.endsWith('.mp4')) {
+          this.isLoadingEdit = false
+          this.curUpdateFilePath = window.URL.createObjectURL(this.editFormInfo.fileUrl)
+        } else if (this.editFormInfo.fileUrl.name.endsWith('.pdf')) {
+          this.isLoadingEdit = true
+        }
       } else {
-        this.editFileName = ''
+        this.editFormInfo.fileUrl = null
       }
     },
     editSubmitClass() {
       this.$refs.editform.validate((valid) => {
         if (valid) {
           // ..
+          if (this.editFormInfo.fileUrl) {
+            if (!(this.editFormInfo.fileUrl.name.endsWith('.mp4') || this.editFormInfo.fileUrl.name.endsWith('.pdf'))) {
+              this.$message.error('支持mp4、pdf等文件格式')
+              return
+            }
+            if (this.isLoadingEdit === true) {
+              const formData = new FormData()
+              const data = {
+                pid: this.$route.params.name,
+                lessonTitle: this.editFormInfo.title,
+                lessonFile: this.editFormInfo.fileUrl,
+                lessonDuration: this.editFormInfo.lessonDuration,
+                id: this.editFormInfo.id
+              }
+              for (const key in data) {
+                formData.append(key, data[key])
+              }
+              const updateFunc = (progressEvent) => {
+                this.editImportantPercentage = parseInt('' + progressEvent.loaded / progressEvent.total)
+              }
+              updateLesson(formData, updateFunc).then(res => {
+                console.log(res, 'createLesson createLesson createLesson')
+                this.$message({
+                  type: 'success',
+                  message: '添加成功'
+                })
+                this.initTableData()
+                this.editDialogFormVisible = false
+              }).catch(() => {
+                this.$message.error('添加失败')
+              })
+            }
+          } else {
+            const formData = new FormData()
+            const data = {
+              pid: this.$route.params.name,
+              lessonTitle: this.editFormInfo.title,
+              lessonDuration: this.editFormInfo.lessonDuration,
+              id: this.editFormInfo.id
+            }
+            for (const key in data) {
+              formData.append(key, data[key])
+            }
+            const updateFunc = (progressEvent) => {
+              this.editImportantPercentage = parseInt('' + progressEvent.loaded / progressEvent.total)
+            }
+            updateLesson(formData, updateFunc).then(res => {
+              this.$message({
+                type: 'success',
+                message: '添加成功'
+              })
+              this.initTableData()
+              this.editDialogFormVisible = false
+            }).catch(() => {
+              this.$message.error('添加失败')
+            })
+          }
         } else {
           // ..
         }
       })
+    },
+    addvideoLoadData(event) {
+      const seconds = parseInt('' + event.target.duration)
+      let hour = parseInt('' + seconds / 3600)
+      let minute = parseInt('' + (seconds - hour * 3600) / 60)
+      let second = parseInt('' + (seconds - 3600 * hour - 60 * minute))
+      if (hour < 10) {
+        hour = '0' + hour
+      }
+      if (minute < 10) {
+        minute = '0' + minute
+      }
+      if (second < 10) {
+        second = '0' + second
+      }
+      this.formInfo.lessonDuration = hour + ':' + minute + ':' + second
+      this.isLoadingAdd = true
+    },
+    editvideoLoadData(event) {
+      const seconds = parseInt('' + event.target.duration)
+      let hour = parseInt('' + seconds / 3600)
+      let minute = parseInt('' + (seconds - hour * 3600) / 60)
+      let second = parseInt('' + (seconds - 3600 * hour - 60 * minute))
+      if (hour < 10) {
+        hour = '0' + hour
+      }
+      if (minute < 10) {
+        minute = '0' + minute
+      }
+      if (second < 10) {
+        second = '0' + second
+      }
+      this.editFormInfo.lessonDuration = hour + ':' + minute + ':' + second
+      this.isLoadingEdit = true
     }
   }
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
+  .coursehour-total-wrapper {
+    width: 80%;
+    padding: 30px;
+    border-radius: 30px;
+    box-shadow: 0 0 9px 1px #eee;
+    margin: 30px auto;
+    .tools-wrapper {
+      padding: 20px;
+      border-radius: 20px;
+      margin: 20px auto;
+      box-shadow: 0 0 9px 1px #eee;
+      width: 80%;
+    }
+    .table-wrapper {
+      width: 80%;
+      padding: 20px;
+      border-radius: 20px;
+      margin: 20px auto;
+      box-shadow: 0 0 9px 1px #eee;
+    }
+  }
   .import-file-total-wrapper {
     display: flex;
     width: 100%;

src/views/teach/editcourse.vue

 <template>
   <div class="edit-course-wrapper">
     <el-form
-      ref="addcourse"
+      ref="editcourse"
       :model="formInfo"
       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="subTitle"
+      >
+        <el-input v-model="formInfo.subTitle" />
+      </el-form-item>
       <el-form-item label="课程类型" prop="type">
         <treeselect v-model="formInfo.type" :options="typeOptions" style="width: 120px;margin-left: 20px;" />
       </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="封面图片">
         <div class="tool-import-cover-wrapper">
           <div class="import-cover-wrapper">
@@ -24,8 +42,9 @@
             <el-progress :percentage="progressPercent" />
           </div>
         </div>
-        <img v-if="fileUrl" style="width: 400px;" :src="fileUrl" alt="没有导入图片">
-        <img v-if="formInfo.cover" :src="formInfo.cover" alt="没有导入图片">
+        <div>{{ formInfo.coverName }}</div>
+        <!-- <img v-if="fileUrl" style="width: 400px;" :src="fileUrl" alt="没有导入图片"> -->
+        <!-- <img v-if="formInfo.cover" :src="formInfo.cover" alt="没有导入图片"> -->
       </el-form-item>
       <el-form-item label="课程简介" prop="introduce">
         <el-input
@@ -37,7 +56,7 @@
       </el-form-item>
     </el-form>
     <div class="submit-course-wrapper">
-      <el-button size="medium">提交</el-button>
+      <el-button size="medium" type="primary" @click="submitEditCourse">提交</el-button>
     </div>
   </div>
 </template>
@@ -45,6 +64,8 @@
 <script>
 import Treeselect from '@riophae/vue-treeselect'
 import '@riophae/vue-treeselect/dist/vue-treeselect.css'
+import { getOnlineTrainingCategory } from '@/api/coursecategory.js'
+import { updateCourse } from '@/api/course.js'
 export default {
   components: {
     Treeselect
@@ -53,6 +74,7 @@ export default {
     return {
       formInfo: {
         title: '',
+        subTitle: '',
         type: '1',
         cover: '',
         introduce: ''
@@ -64,47 +86,212 @@ 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'
+          }
         ]
       },
       progressPercent: 0,
       typeOptions: [
+      ],
+      fileUrl: '',
+      courseStates: [
         {
-          id: 1,
-          label: 'a',
-          children: [
-            {
-              id: 12,
-              label: 'aa'
-            },
-            {
-              id: 13,
-              label: 'ab'
-            }
-          ]
-        }, {
-          id: 2,
-          label: 'b',
-          children: []
+          label: '未发布',
+          value: '未发布'
         },
         {
-          id: 3,
-          label: 'c',
-          children: []
+          label: '已发布',
+          value: '已发布'
+        },
+        {
+          label: '已关闭',
+          value: '已关闭'
         }
-      ],
-      fileUrl: ''
+      ]
     }
   },
-  mounted() {
+  async mounted() {
     // alert(this.$route.params.name)
+    // alert(this.$store.getters.course)
+    console.log(this.$store.getters.course, 'this.$store.getters.course')
+    await this.getCourseCategory()
+    // console.log(), 'this.$store.setCourse this.$store.setCourse')
+    this.formInfo = {
+      title: this.$store.getters.course.courseTitle,
+      subTitle: this.$store.getters.course.courseSubTitle,
+      type: this.$store.getters.course.categoryId,
+      state: this.$store.getters.course.courseStatus,
+      cover: null,
+      coverName: this.$store.getters.course.courseCoverFilePath,
+      introduce: this.$store.getters.course.courseBriefIntroduction,
+      ...this.$store.getters.course
+    }
   },
   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]
+      })
+    },
     importFile() {
       if (this.$refs.importfile.files.length === 0) {
-        this.fileUrl = ''
+        // this.fileUrl = ''
+        if (this.formInfo.cover) {
+          this.formInfo.cover = null
+          this.formInfo.coverName = ''
+        }
       } else {
-        this.fileUrl = URL.createObjectURL(this.$refs.importfile.files[0])
+        // this.fileUrl = URL.createObjectURL(this.$refs.importfile.files[0])
+        console.log(this.formInfo.coverName, 'this.formInfo.coverNamethis.formInfo.coverName')
+        this.formInfo.cover = this.$refs.importfile.files[0]
+        console.log(this.formInfo.cover, 'this.formInfo.cover this.formInfo.cover')
+        this.formInfo.coverName = this.$refs.importfile.files[0].name
       }
+    },
+    submitEditCourse() {
+      this.$refs.editcourse.validate((valid) => {
+        if (valid) {
+          const updateFunc = (progressEvent) => {
+            this.progressPercent = parseInt('' + progressEvent.loaded / progressEvent.total)
+          }
+          const data = {
+            categoryId: this.formInfo.type,
+            courseBriefIntroduction: this.formInfo.introduce,
+            courseStatus: this.formInfo.state,
+            courseSubTitle: this.formInfo.subTitle,
+            courseTitle: this.formInfo.title,
+            id: this.formInfo.id
+          }
+          const formData = new FormData()
+          for (const key in data) {
+            formData.append(key, data[key])
+          }
+          // if (this.formInfo.coverName && this.formInfo.cover) {
+          //   data.courseCoverFile = this.formInfo.cover
+          // }
+          if (this.formInfo.cover) {
+            formData.append('courseCoverFile', this.formInfo.cover)
+          }
+          updateCourse(formData, updateFunc).then(res => {
+            console.log(res, 'updateCourse')
+            this.$message({
+              type: 'success',
+              message: '修改成功'
+            })
+          }).catch(() => {
+            this.$message.error('修改失败')
+          })
+        }
+      })
     }
   }
 }
@@ -112,8 +299,12 @@ export default {
 
 <style lang="scss">
   .edit-course-wrapper {
-    padding-top: 30px;
-    width: 800px;
+    padding: 30px;
+    width: 80%;
+    border-radius: 30px;
+    padding: 0 0 9px 1px #eee;
+    box-shadow: 0 0 9px 1px #eee;
+    margin: 30px auto;
     .submit-course-wrapper {
       display: flex;
       justify-content: flex-end;

src/views/teach/index.vue

@@ -5,7 +5,7 @@
     </div>
     <div class="teach-search-wrapper">
       <el-input v-model="inputSearchName" style="width: 280px;" placeholder="请输入课程名称" />
-      <treeSelect v-model="inputChosenType" style="width: 120px;margin-left: 20px;" :options="typeOptions" />
+      <treeSelect v-model="inputChosenType" style="width: 260px;margin-left: 20px;" :options="typeOptions" />
       <el-select v-model="inputChosenState" style="margin-left: 20px;" placeholder="课程状态">
         <el-option v-for="item in courseStateList" :key="item.value" :label="item.label" :value="item.value" />
       </el-select>
@@ -17,8 +17,8 @@
         end-placeholder="结束日期"
         style="margin-left: 20px;"
       />
-      <el-input v-model="inputCreator" style="width: 180px;margin-left: 20px;" />
-      <el-button style="margin-left: 20px;" type="success">查询</el-button>
+      <el-input v-model="inputCreator" style="width: 180px;margin-left: 20px;" placeholder="请输入发布人" />
+      <el-button style="margin-left: 20px;" type="success" @click="getAllCourse">查询</el-button>
     </div>
     <div class="table-wraperr">
       <el-table
@@ -66,25 +66,24 @@
             <div class="tool-manage-wrapper">
               <el-button size="medium" @click="manageCourse(scope.row)">管理</el-button>
               <div class="other-manage-wrapper">
-                <el-button size="medium">发布课程</el-button>
-                <el-button size="medium" @click="deleteCourse">删除课程</el-button>
-                <el-button size="medium">关闭课程</el-button>
+                <el-button size="medium" @click="publicCourse(scope.row)">发布课程</el-button>
+                <el-button size="medium" @click="deleteCourse(scope.row)">删除课程</el-button>
+                <el-button size="medium" @click="closeCourse(scope.row)">关闭课程</el-button>
                 <el-button size="medium" @click="manageStu">学生管理</el-button>
               </div>
-              <!-- <div class="course-manage-btn-wrapper">
-                <div class="down-triangle">
-                  <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1814" width="16" height="16"><path d="M1024 255.996 511.971 767.909 0 255.996 1024 255.996z" p-id="1815" /></svg>
-                </div>
-                <div class="course-manage-down-select">
-                  <div>发布课程</div>
-                  <div>删除课程</div>
-                  <div>关闭课程</div>
-                </div>
-              </div> -->
             </div>
           </template>
         </el-table-column>
       </el-table>
+      <el-pagination
+        :current-page="currentPage"
+        :page-sizes="[10, 20, 30, 40]"
+        :page-size="curPageSize"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="totalElement"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+      />
     </div>
   </div>
 </template>
@@ -92,6 +91,14 @@
 <script>
 import TreeSelect from '@riophae/vue-treeselect'
 import '@riophae/vue-treeselect/dist/vue-treeselect.css'
+import { getOnlineTrainingCategory } from '@/api/coursecategory.js'
+import {
+  findCourse,
+  updateCourse,
+  onlineTraining
+} from '@/api/course.js'
+import { parseTime } from '../../utils'
+import { } from '@/api/course.js'
 export default {
   name: 'Teach',
   components: {
@@ -104,29 +111,6 @@ export default {
       // 选择的分类
       inputChosenType: '1',
       typeOptions: [
-        {
-          id: 1,
-          label: 'a',
-          children: [
-            {
-              id: 12,
-              label: 'aa'
-            },
-            {
-              id: 13,
-              label: 'ab'
-            }
-          ]
-        }, {
-          id: 2,
-          label: 'b',
-          children: []
-        },
-        {
-          id: 3,
-          label: 'c',
-          children: []
-        }
       ],
       courseStateList: [
         {
@@ -166,10 +150,146 @@ export default {
           createDateTime: '2021-03-31 14:42:32',
           courseState: '已发布'
         }
-      ]
+      ],
+      // 当前页码
+      currentPage: 1,
+      curPageSize: 10,
+      totalElement: 10
     }
   },
+  async mounted() {
+    await this.getCourseCategory()
+    await this.getAllCourse()
+  },
   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.inputChosenType = this.typeOptions[0].id
+        }
+      })
+    },
+    async getAllCourse() {
+      const params = {
+        page: this.currentPage - 1,
+        size: this.curPageSize
+      }
+      if (this.inputSearchName) {
+        params.courseTitle = this.inputSearchName
+      }
+      if (this.inputChosenType) {
+        params.categoryId = this.inputChosenType
+      }
+      if (this.inputChosenState) {
+        params.courseStatus = this.inputChosenState
+      }
+      if (this.inputCreator) {
+        params.courseTeacher = this.inputCreator
+      }
+      if (this.inputChosenDate instanceof Array) {
+        params.courseStartCreateTime = parseTime(this.inputChosenDate[0])
+        params.courseEndCreateTime = parseTime(this.inputChosenDate[1])
+      }
+      findCourse(params).then(res => {
+        console.log(res, 'findCourse findCourse')
+        this.courseList = [...res.content.map(item => {
+          return {
+            ...item,
+            courseName: item.courseTitle,
+            creator: item.courseTeacher,
+            createDateTime: item.courseCreateTime,
+            courseState: item.courseStatus
+          }
+        })]
+        this.totalElement = res.totalElements
+      })
+    },
+    handleSizeChange(val) {
+      this.curPageSize = val
+      this.getAllCourse()
+    },
+    handleCurrentChange(val) {
+      this.currentPage = val
+      this.getAllCourse()
+    },
     addCoure() {
       // 新增课程
       // 跳转到新增课程的网页
@@ -179,20 +299,30 @@ export default {
     },
     manageCourse(row) {
       // 跳转到管理课程页面
-      this.$router.push({
-        path: '/train/teach/editcourse/1111111'
+      row.categoryId = this.inputChosenType
+      const newObj = { ...row }
+      console.log(newObj, 'newObj newObj newObj')
+      this.$store.dispatch('setCourse', newObj).then(() => {
+        this.$router.push({
+          path: '/train/teach/editcourse/' + row.id
+        })
       })
     },
     // 删除课程
-    deleteCourse() {
+    deleteCourse(row) {
       this.$confirm('此操作将永久删除该课程, 是否继续?', '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'warning'
       }).then(() => {
-        this.$message({
-          type: 'success',
-          message: '删除成功'
+        onlineTraining([row.id]).then(res => {
+          this.getAllCourse()
+          this.$message({
+            type: 'success',
+            message: '删除成功'
+          })
+        }).catch(() => {
+          this.$message.error('删除失败')
         })
       }).catch(() => {
         this.$message({
@@ -201,10 +331,57 @@ export default {
         })
       })
     },
+    publicCourse(row) {
+      const formData = new FormData()
+      const data = {
+        categoryId: this.inputChosenType,
+        courseBriefIntroduction: row.courseBriefIntroduction,
+        courseStatus: '已发布',
+        courseSubTitle: row.courseSubTitle,
+        courseTitle: row.courseTitle,
+        id: row.id
+      }
+      for (const key in data) {
+        formData.append(key, data[key])
+      }
+      updateCourse(formData, () => {}).then(res => {
+        this.$message({
+          type: 'success',
+          message: '修改成功'
+        })
+        this.getAllCourse()
+      }).catch(() => {
+        this.$message.error('修改失败')
+      })
+    },
+    closeCourse(row) {
+      const formData = new FormData()
+      const data = {
+        categoryId: this.inputChosenType,
+        courseBriefIntroduction: row.courseBriefIntroduction,
+        courseStatus: '已关闭',
+        courseSubTitle: row.courseSubTitle,
+        courseTitle: row.courseTitle,
+        id: row.id
+      }
+      for (const key in data) {
+        formData.append(key, data[key])
+      }
+      updateCourse(formData, () => {}).then(res => {
+        this.$message({
+          type: 'success',
+          message: '修改成功'
+        })
+        this.getAllCourse()
+      }).catch(() => {
+        this.$message.error('修改失败')
+      })
+    },
     jumpToClassHour(row) {
       // row
+      console.log(row.id, 'row.id row.id')
       this.$router.push({
-        path: '/train/teach/addcoursehour/22222222'
+        path: '/train/teach/addcoursehour/' + row.id
       })
     },
     manageStu() {
@@ -217,6 +394,34 @@ export default {
 </script>
 
 <style lang="scss">
+  .total-wrapper {
+    width: 80%;
+    padding: 30px;
+    border-radius: 30px;
+    box-shadow: 0 0 9px 1px #eee;
+    margin: 30px auto;
+    .teach-tools-add-wrapper {
+      width: 80%;
+      padding: 20px;
+      border-radius: 20px;
+      box-shadow: 0 0 9px 1px #eee;
+      margin: 20px auto;
+    }
+    .teach-search-wrapper {
+      width: 80%;
+      padding: 20px;
+      border-radius: 20px;
+      box-shadow: 0 0 9px 1px #eee;
+      margin: 20px auto;
+    }
+    .table-wraperr {
+      width: 80%;
+      padding: 20px;
+      border-radius: 20px;
+      box-shadow: 0 0 9px 1px #eee;
+      margin: 20px auto;
+    }
+  }
   .teach-search-wrapper {
     margin: 15px 0;
     display: flex;

src/views/warn/index.vue

 <template>
   <el-tabs v-model="activeName">
     <el-tab-pane label="警示资料管理" name="datamanage">
-      <div>
+      <div class="datamanage-wrapper">
         <div class="tool-wrapper">
           <el-button type="primary" @click="addDialogData">新增</el-button>
           <el-button type="warning" :disabled="isEditable" @click="editDialogData">编辑</el-button>
@@ -19,64 +19,68 @@
           <el-input v-model="searchTitle" style="width: 180px;margin-left: 20px;" placeholder="请输入题目" />
           <el-select v-model="searchType" placeholder="请选择类别" style="margin-left: 20px;">
             <el-option
-              v-for="item in typeList"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value"
+              v-for="item in category"
+              :key="item"
+              :label="item"
+              :value="item"
             />
           </el-select>
           <el-input v-model="searchPerson" style="width: 180px;margin-left: 20px;" placeholder="请输入上传人" />
-          <el-button type="success" style="margin-left: 20px;">查询</el-button>
+          <el-button type="success" style="margin-left: 20px;" @click="initWarning">查询</el-button>
         </div>
-        <el-table
-          :data="warnList"
-          style="width: 100%"
-          @selection-change="handleSelectionChange"
-        >
-          <el-table-column
-            type="selection"
-            width="55"
-          />
-          <el-table-column
-            prop="type"
-            label="类别"
-            width="180"
-          />
-          <el-table-column
-            prop="title"
-            label="标题"
-            width="180"
-          />
-          <el-table-column
-            prop="introduce"
-            label="简介"
-            width="180"
-          />
-          <el-table-column
-            prop="uploader"
-            label="上传人"
-            width="180"
-          />
-          <el-table-column
-            prop="uploadtime"
-            label="上传时间"
-            width="180"
+        <div class="table-wrapper">
+          <el-table
+            v-loading="isLoadingWarning"
+            :data="warnList"
+            style="width: 100%"
+            @selection-change="handleSelectionChange"
+          >
+            <el-table-column
+              type="selection"
+              width="55"
+            />
+            <el-table-column
+              prop="type"
+              label="类别"
+              width="180"
+            />
+            <el-table-column
+              prop="title"
+              label="标题"
+              width="180"
+            />
+            <el-table-column
+              prop="introduce"
+              label="简介"
+              width="180"
+            />
+            <el-table-column
+              prop="uploader"
+              label="上传人"
+              width="180"
+            />
+            <el-table-column
+              prop="uploadtime"
+              label="上传时间"
+              width="180"
+            />
+          </el-table>
+          <el-pagination
+            :current-page="currentPage"
+            :page-sizes="[10, 20, 30, 40]"
+            :page-size="curPageSize"
+            layout="total, sizes, prev, pager, next, jumper"
+            :total="totalColumn"
+            @size-change="handleSizeChange"
+            @current-change="handleCurrentChange"
           />
-        </el-table>
-        <el-pagination
-          :current-page="currentPage"
-          :page-sizes="[10, 20, 30, 40]"
-          :page-size="curPageSize"
-          layout="total, sizes, prev, pager, next, jumper"
-          :total="totalColumn"
-          @size-change="handleSizeChange"
-          @current-change="handleCurrentChange"
-        />
+        </div>
         <el-dialog
           title="新增警示教育"
           :visible.sync="addDialogFormVisible"
         >
           <el-form
+            v-if="addDialogFormVisible"
             ref="addDataForm"
             :model="addFormInfo"
             :rules="rules"
@@ -86,15 +90,19 @@
               label="类别"
               :label-width="'120px'"
             >
-              <el-select v-model="addFormInfo.type" placeholder="请选择类别">
+              <el-select
+                v-model="addFormInfo.type"
+                placeholder="请选择类别"
+                filterable
+                allow-create
+              >
                 <el-option
-                  v-for="item in typeList"
-                  :key="item.value"
-                  :label="item.label"
-                  :value="item.value"
+                  v-for="item in category"
+                  :key="item"
+                  :label="item"
+                  :value="item"
                 />
               </el-select>
-              <el-button type="info" @click="addType">新增类别</el-button>
             </el-form-item>
             <el-form-item
               prop="title"
@@ -108,17 +116,25 @@
               label="简介"
               :label-width="'120px'"
             >
-              <el-input v-model="addFormInfo.introduce" :maxlength="50" />
+              <el-input v-model="addFormInfo.introduce" :maxlength="200" />
             </el-form-item>
-            <div class="upload-file-wrapper">
-              <div class="file-wrapper">
-                <label style="width: 100%; height: 100%;">
-                  选择要上传的文件
-                  <input ref="addDataFileRef" type="file" hidden>
-                </label>
+            <el-form-item
+              prop="fileName"
+              label="文件名称"
+              :label-width="'120px'"
+            >
+              <div class="upload-file-wrapper">
+                <div class="file-wrapper">
+                  <label style="width: 100%; height: 100%;display: flex;align-items: center;justify-content: center;">
+                    选择要上传的文件
+                    <input ref="addDataFileRef" type="file" hidden @change="chosenAddFile">
+                  </label>
+                  <div>{{ addFormInfo.fileName }}</div>
+                </div>
+                <el-progress :percentage="addFormUploadPercentage" />
               </div>
-              <el-progress :percentage="addFormUploadPercentage" />
-            </div>
+            </el-form-item>
+
           </el-form>
           <div slot="footer">
             <el-button @click="cancelAddForm">取消</el-button>
@@ -130,8 +146,9 @@
           :visible.sync="editDialogFormVisible"
         >
           <el-form
+            v-if="editDialogFormVisible"
             ref="editDataForm"
-            :model="addFormInfo"
+            :model="editFormInfo"
             :rules="rules"
           >
             <el-form-item
@@ -139,12 +156,17 @@
               label="类别"
               :label-width="'120px'"
             >
-              <el-select v-model="editFormInfo.type" placeholder="请选择类别">
+              <el-select
+                v-model="editFormInfo.type"
+                placeholder="请选择类别"
+                filterable
+                allow-create
+              >
                 <el-option
-                  v-for="item in typeList"
-                  :key="item.value"
-                  :label="item.label"
-                  :value="item.value"
+                  v-for="item in category"
+                  :key="item"
+                  :label="item"
+                  :value="item"
                 />
               </el-select>
             </el-form-item>
@@ -160,17 +182,24 @@
               label="简介"
               :label-width="'120px'"
             >
-              <el-input v-model="editFormInfo.introduce" :maxlength="50" />
+              <el-input v-model="editFormInfo.introduce" :maxlength="200" />
             </el-form-item>
-            <div class="upload-file-wrapper">
-              <div class="file-wrapper">
-                <label style="width: 100%; height: 100%;">
-                  选择要上传的文件
-                  <input ref="editDataFileRef" type="file" hidden>
-                </label>
+            <el-form-item
+              prop="fileName"
+              label="上传文件"
+              :label-width="'120px'"
+            >
+              <div class="upload-file-wrapper">
+                <div class="file-wrapper">
+                  <label style="width: 100%; height: 100%;display: flex;align-items:center;justify-content: center;">
+                    选择要上传的文件
+                    <input ref="editDataFileRef" type="file" hidden @change="chosenEditFile">
+                  </label>
+                  <div>{{ editFormInfo.fileName }}</div>
+                </div>
+                <el-progress :percentage="editFormUploadPercentage" />
               </div>
-              <el-progress :percentage="editFormUploadPercentage" />
-            </div>
+            </el-form-item>
           </el-form>
           <div slot="footer">
             <el-button @click="cancelEditForm">取消</el-button>
@@ -247,24 +276,30 @@
 </template>
 
 <script>
+import {
+  deleteWarnTeach,
+  getWranTeach,
+  getWarnTeachCategory
+} from '@/api/warnteach.js'
+import axiosFile from '@/utils/requestfile'
+import { parseTime } from '../../utils'
+/**
+ * axiosFile({
+        url: '/api/thRisk/create',
+        method: 'POST',
+        data: mForm,
+        onUploadProgress: progressEvent => {
+          // progressEvent.loaded
+          // progressEvent.total
+          this.curUploadProgress = ((progressEvent.loaded / progressEvent.total) * 100).toFixed(0)
+        }
+      })
+ */
 export default {
   data() {
     return {
+      category: [],
       warnList: [
-        {
-          type: '不知道1',
-          title: '不知道2',
-          introduce: '不知道3',
-          uploader: '不知道4',
-          uploadtime: '不知道5'
-        },
-        {
-          type: 'unknow1',
-          title: 'unknow2',
-          introduce: 'unknow3',
-          uploader: 'unknow4',
-          uploadtime: 'unknow5'
-        }
       ],
       multipleSelection: [],
       typeList: [
@@ -281,12 +316,13 @@ export default {
         uploader: '',
         uploadTime: ''
       },
+      isLoadingWarning: false,
       currentPage: 1,
       curPageSize: 10,
       totalColumn: 40,
-      activeName: 'recordmanage',
-      isEditable: false,
-      isDeleteable: false,
+      activeName: 'datamanage',
+      isEditable: true,
+      isDeleteable: true,
       recordSearchTime: '',
       recordSearchUser: '',
       recordSearchEnter: '',
@@ -319,17 +355,17 @@ export default {
         title: '', // 标题
         introduce: '', // 简介
         fileName: '', // 文件名
-        userId: 1 // 上传人
+        file: null
       },
       rules: {
         type: [
-          { required: true, message: '请输入类别', trigger: 'change' }
+          { required: true, message: '请输入类别', trigger: 'blur' }
         ],
         title: [
           { required: true, message: '请输入标题', trigger: 'blur' }
         ],
-        introduce: [
-          { required: true, message: '请输入简介', trigger: 'blur' }
+        fileName: [
+          { required: true, message: '请选择文件', trigger: 'change' }
         ]
       },
       addFormUploadPercentage: 0,
@@ -340,18 +376,72 @@ export default {
         title: '',
         introduce: '',
         fileName: '',
+        file: null,
         userId: 1
       }
     }
   },
+  async mounted() {
+    await getWarnTeachCategory().then(res => {
+      this.category = [...res]
+    })
+    await this.initWarning()
+  },
   methods: {
+    async initWarning() {
+      this.isLoadingWarning = true
+      const params = {
+        page: this.currentPage - 1,
+        size: this.curPageSize
+      }
+      // 类别
+      if (this.searchType) {
+        params.category = this.searchType
+      }
+      // 题目
+      if (this.searchTitle) {
+        params.title = this.searchTitle
+      }
+      // 时间
+      if (this.searchTime instanceof Array) {
+        params.uploadStartTime = parseTime(new Date(this.searchTime[0]))
+        params.uploadEndTime = parseTime(new Date(this.searchTime[1]))
+      }
+      // 上传人
+      if (this.searchPerson) {
+        params.uploader = this.searchPerson
+      }
+      await getWranTeach(params).then(res => {
+        this.warnList = [...res.content.map(item => {
+          return {
+            ...item,
+            type: item.category,
+            title: item.title,
+            introduce: item.briefIntroduction,
+            uploader: item.uploader,
+            uploadtime: item.uploadTime
+          }
+        })]
+        this.totalColumn = res.totalElements
+        this.isLoadingWarning = false
+      }, () => {
+        this.isLoadingWarning = false
+      })
+    },
+    async initCategory() {
+      await getWarnTeachCategory().then(res => {
+        this.category = [...res]
+      })
+    },
     handleSizeChange(val) {
       // 每页多少条
       this.curPageSize = val
+      this.initWarning()
     },
     handleCurrentChange(val) {
       // 当前是多少页
       this.currentPage = val
+      this.initWarning()
     },
     exportFile() {
       // 导出文件
@@ -367,6 +457,7 @@ export default {
       this.addFormInfo.title = ''
       this.addFormInfo.introduce = ''
       this.addFormInfo.fileName = ''
+      this.addFormInfo.file = null
       this.addFormInfo.userId = ''
       this.addDialogFormVisible = false
     },
@@ -374,12 +465,49 @@ export default {
       // formData
       // multipart/formdata
       //
+      this.$refs.addDataForm.validate((valid) => {
+        if (valid) {
+          if (!(this.addFormInfo.file.name.endsWith('.mp4') || this.addFormInfo.file.name.endsWith('.m3u8') || this.addFormInfo.file.name.endsWith('.pdf'))) {
+            this.$message.error('只支持mp4、m3u8、pdf类型的文件')
+            return
+          }
+          const mForm = new FormData()
+          mForm.append('briefIntroduction', this.addFormInfo.introduce)
+          mForm.append('category', this.addFormInfo.type)
+          mForm.append('file', this.addFormInfo.file)
+          mForm.append('title', this.addFormInfo.title)
+          axiosFile({
+            url: '/api/warningEducation',
+            method: 'POST',
+            data: mForm,
+            onUploadProgress: progressEvent => {
+              // progressEvent. loaded
+              // progressEvent. total
+              // this.curUploadProgress = (())
+              console.log(progressEvent, 'progressEvent, progressEvent, progressEvent')
+              this.addFormUploadPercentage = parseInt('' + progressEvent.loaded / progressEvent.total)
+            }
+          }).then(res => {
+            this.addDialogFormVisible = false
+            this.initCategory()
+            this.$message({
+              type: 'success',
+              message: '添加成功'
+            })
+            this.initWarning()
+          }).catch(() => {
+            this.$message.error('添加失败')
+          })
+        }
+      })
     },
     addDialogData() {
       this.addFormInfo.type = ''
       this.addFormInfo.title = ''
       this.addFormInfo.introduce = ''
       this.addFormInfo.fileName = ''
+      this.addFormInfo.file = null
+      this.addFormUploadPercentage = 0
       // 获取用户id
       this.addFormInfo.userId = 0
       this.addDialogFormVisible = true
@@ -389,18 +517,29 @@ export default {
       //
       // editDialog
       this.editDialogFormVisible = true
+      this.editFormInfo.type = this.multipleSelection[0].type
+      this.editFormInfo.title = this.multipleSelection[0].title
+      this.editFormInfo.introduce = this.multipleSelection[0].introduce
+      this.editFormInfo.fileName = this.multipleSelection[0].filePath
+      this.editFormInfo.id = this.multipleSelection[0].id
     },
     // 删除对话框
     deleteDialogData() {
-      //
+      console.log(this.multipleSelection, 'this.multipleSelection this.multipleSelection this.multipleSelection')
       this.$confirm('此操作将删除选中项, 是否继续', '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'warning'
       }).then(() => {
-        this.$message({
-          type: 'success',
-          message: '删除成功!'
+        deleteWarnTeach(this.multipleSelection.map(item => item.id)).then(res => {
+          this.$message({
+            type: 'success',
+            message: '删除成功!'
+          })
+          this.initWarning()
+          this.initCategory
+        }, () => {
+          this.$message.error('删除失败!')
         })
       }).catch(() => {
         this.$message({
@@ -431,6 +570,60 @@ export default {
     },
     uploadEditForm() {
       // formdata axios
+      this.$refs.editDataForm.validate((valid) => {
+        if (valid) {
+          if (!(this.editFormInfo.fileName.endsWith('.mp4') || this.editFormInfo.fileName.endsWith('.m3u8') || this.editFormInfo.fileName.endsWith('.pdf'))) {
+            this.$message.error('只支持mp4、m3u8、pdf类型的文件')
+            return
+          }
+          const mForm = new FormData()
+          mForm.append('briefIntroduction', this.editFormInfo.introduce)
+          mForm.append('category', this.editFormInfo.type)
+          mForm.append('id', this.editFormInfo.id)
+          mForm.append('title', this.editFormInfo.title)
+          if (this.editFormInfo.fileName && this.editFormInfo.file) {
+            mForm.append('file', this.editFormInfo.file)
+          }
+          axiosFile({
+            url: '/api/warningEducation/update',
+            method: 'POST',
+            data: mForm,
+            onUploadProgress: progressEvent => {
+              console.log(progressEvent,)
+              this.editFormUploadPercentage = parseInt('' + progressEvent.loaded / progressEvent.total)
+            }
+          }).then(res => {
+            console.log(res, 'axiosFile axiosFile axiosFile')
+            this.$message({
+              type: 'success',
+              message: '修改成功'
+            })
+            this.editDialogFormVisible = false
+            this.initCategory()
+            this.initWarning()
+          }).catch(() => {
+            this.$message.error('修改失败')
+          })
+        }
+      })
+    },
+    chosenAddFile() {
+      console.log(this.$refs.addDataFileRef.files, 'this.$refs.addDataFileRef this.$refs.addDataFileRef')
+      // this.$refs.addDataFileRef.files
+      this.addFormInfo.fileName = ''
+      this.addFormInfo.file = null
+      if (this.$refs.addDataFileRef.files.length) {
+        this.addFormInfo.fileName = this.$refs.addDataFileRef.files[0].name
+        this.addFormInfo.file = this.$refs.addDataFileRef.files[0]
+      }
+    },
+    chosenEditFile() {
+      // this.editFormInfo.fileName = ''
+      // this.editFormInfo.file = null
+      if (this.$refs.editDataFileRef.files.length > 0) {
+        this.editFormInfo.fileName = this.$refs.editDataFileRef.files[0].name
+        this.editFormInfo.file = this.$refs.editDataFileRef.files[0]
+      }
     }
   }
 }
@@ -453,4 +646,33 @@ export default {
       background: aliceblue;
     }
   }
+  .datamanage-wrapper {
+    width: 80%;
+    padding: 30px;
+    border-radius: 30px;
+    box-shadow: 0 0 9px 1px #eee;
+    margin: 30px auto;
+    .tool-wrapper {
+      width: 80%;
+      padding: 20px;
+      border-radius: 20px;
+      box-shadow: 0 0 9px 1px #eee;
+      margin: 20px auto;
+    }
+    .search-wrapper {
+      width: 80%;
+      padding: 20px;
+      border-radius: 20px;
+      box-shadow: 0 0 9px 1px #eee;
+      margin: 20px auto;
+    }
+    .table-wrapper {
+      width: 80%;
+      padding: 20px;
+      border-radius: 20px;
+      box-shadow: 0 0 9px 1px #eee;
+      margin: 20px auto;
+    }
+  }
+
 </style>