视频

.env.development

@@ -2,7 +2,7 @@
 ENV = 'development'
 
 # 若依管理系统/开发环境
-VUE_APP_BASE_API = 'https://jsjp-admin1.zzxcx.net/jsjp-admin'
-
+VUE_APP_BASE_API = 'https://jsjp-admin.zzxcx.net/jsjp-admin'
+# https://jsjp-admin1.zzxcx.net/jsjp-admin
 # 路由懒加载
 VUE_CLI_BABEL_TRANSPILE_MODULES = true

package.json

@@ -47,18 +47,19 @@
     "echarts": "4.2.1",
     "element-ui": "2.13.2",
     "file-saver": "2.0.1",
-    "js-beautify": "1.10.2",
     "fuse.js": "3.4.4",
+    "js-beautify": "1.10.2",
     "js-cookie": "2.2.0",
     "jsencrypt": "3.0.0-rc.1",
     "normalize.css": "7.0.0",
     "nprogress": "0.2.0",
     "path-to-regexp": "2.4.0",
+    "quill": "1.3.7",
     "screenfull": "4.2.0",
     "sortablejs": "1.8.4",
+    "vod-js-sdk-v6": "^1.7.1-beta.1",
     "vue": "2.6.10",
     "vue-count-to": "1.0.13",
-    "quill": "1.3.7",
     "vue-cropper": "0.4.9",
     "vue-router": "3.0.2",
     "vue-splitpane": "1.0.4",

src/api/stortVideo/index.js

@@ -0,0 +1,96 @@
+import request from '@/utils/request'
+
+class ShortVideoApi {
+  /** 查询短视频列表 */
+  getList(query) {
+    return request({
+      url: 'pc/teachingDsp/dsp/list',
+      method: 'get',
+      params: {
+        status: 0,
+        ...query,
+      },
+    })
+  }
+
+  /** 查询短视频详情 */
+  getVideoInfo(Id) {
+    return request({
+      url: 'pc/teachingDsp/dsp/' + Id,
+      method: 'get',
+    })
+  }
+
+  /** 新增短视频 */
+  addVideo(data) {
+    return request({
+      url: 'pc/teachingDsp/dsp',
+      method: 'post',
+      data: data,
+    })
+  }
+
+  /** 修改短视频信息 */
+  updateVideo(data) {
+    return request({
+      url: 'pc/teachingDsp/dsp',
+      method: 'put',
+      data: data,
+    })
+  }
+
+  /** 删除短视频 */
+  delVideo(ids) {
+    return request({
+      url: 'pc/teachingDsp/dsp/' + ids,
+      method: 'put',
+    })
+  }
+
+  /** 上传视频封面 */
+  uploadCover(data, fn) {
+    return request({
+      url: 'pc/teachingDsp/dsp/coverUp',
+      method: 'put',
+      headers: {
+        'content-type': 'multipart/form-data',
+      },
+      data,
+      onUploadProgress: fn,
+      timeout: 0,
+    })
+  }
+
+  /** 修改上架状态 */
+  changeUserStatus(id, shelfStatus) {
+    if (shelfStatus != 0) {
+      return request({
+        url: 'pc/teachingDsp/dsp/offShelf/' + id,
+        method: 'put',
+      })
+    } else {
+      return request({
+        url: 'pc/teachingDsp/dsp/putShelf/' + id,
+        method: 'put',
+      })
+    }
+  }
+
+  /**下架短视频 */
+  offShelf(ids) {
+    return request({
+      url: 'pc/teachingDsp/dsp/offShelf/' + ids,
+      method: 'put',
+    })
+  }
+
+  /**上架短视频 */
+  putShelf(ids) {
+    return request({
+      url: 'pc/teachingDsp/dsp/putShelf/' + ids,
+      method: 'put',
+    })
+  }
+}
+
+export default new ShortVideoApi()

src/api/teachingVideo/index.js

@@ -0,0 +1,92 @@
+import request from '@/utils/request'
+import { praseStrEmpty } from '@/utils/ruoyi'
+
+// 查询用户列表
+export function listUser(query) {
+  return request({
+    url: 'pc/teachingVideo/info/list',
+    method: 'get',
+    params: {
+      status: 0,
+      ...query,
+    },
+  })
+}
+
+// 查询用户详细
+export function getUser(userId) {
+  return request({
+    url: 'pc/teachingVideo/info/' + userId,
+    method: 'get',
+  })
+}
+
+// 新增用户
+export function addUser(data) {
+  return request({
+    url: 'pc/teachingVideo/info',
+    method: 'post',
+    data: data,
+  })
+}
+
+// 修改用户
+export function updateUser(data) {
+  return request({
+    url: 'pc/teachingVideo/info',
+    method: 'put',
+    data: data,
+  })
+}
+
+// 删除用户
+export function delVideo(userId) {
+  return request({
+    url: 'pc/teachingVideo/info/' + userId,
+    method: 'put',
+  })
+}
+
+// 上传视频封面
+export function uploadCover(data, fn) {
+  return request({
+    url: 'pc/teachingVideo/info/coverUp',
+    method: 'put',
+    headers: {
+      'content-type': 'multipart/form-data',
+    },
+    data,
+    onUploadProgress: fn,
+    timeout: 0,
+  })
+}
+
+export function changeUserStatus(id, shelfStatus) {
+  if (shelfStatus != 0) {
+    return request({
+      url: 'pc/teachingVideo/info/offShelf/' + id,
+      method: 'put',
+    })
+  } else {
+    return request({
+      url: 'pc/teachingVideo/info/putShelf/' + id,
+      method: 'put',
+    })
+  }
+}
+
+/**下架短视频 */
+export function offShelf(ids) {
+  return request({
+    url: 'pc/teachingVideo/info/offShelf/' + ids,
+    method: 'put',
+  })
+}
+
+/**上架短视频 */
+export function putShelf(ids) {
+  return request({
+    url: 'pc/teachingVideo/info/putShelf/' + ids,
+    method: 'put',
+  })
+}

src/api/upload/index.js

@@ -0,0 +1,18 @@
+import request from '@/utils/request'
+
+// // 查询生成表数据
+// export async function vodSignature() {
+//   let { data } = await request({
+//     url: 'open-api/common/vodSignature'
+//   })
+//   return data
+// }
+
+// 查询生成表数据
+export function vodSignature() {
+  return request({
+    url: 'open-api/common/vodSignature'
+  }).then(res => {
+    return res.data
+  })
+}

src/api/videoType/index.js

@@ -0,0 +1,108 @@
+import request from '@/utils/request'
+
+// // 查询部门列表
+// export async function listDept(query) {
+//   let data = await request({
+//     url: 'pc/videoType/info/list',
+//     method: 'get',
+//     params: {
+//       ...query,
+//       status: query.status == '1' ? '1' : '0'
+//     }
+//   })
+//   if (data.code == 200) {
+//     let tree = data.rows.filter(val => {
+//       return val.pid == 0
+//     })
+//     tree = tree.map(f => {
+//       f.children = data.rows.filter(val => {
+//         return val.pid == f.id
+//       })
+//       return f
+//     })
+//     data.data = tree
+//     console.log(data)
+//     return data
+//   } else {
+//     return {}
+//   }
+// }
+
+// 查询部门列表
+export async function listDept(query) {
+  let data = await request({
+    url: 'pc/videoType/info/treeList',
+    method: 'get'
+  })
+  if (!query.typeName) {
+    return data
+  } else {
+    data.data = data.data.filter(val => {
+      return (
+        val.typeName.indexOf(query.typeName) !== -1 ||
+        val.children.filter(val => {
+          return val.typeName.indexOf(query.typeName) !== -1
+        }).length > 0
+      )
+    })
+    return data
+  }
+}
+
+// // 查询部门列表（排除节点）
+// export function listDeptExcludeChild(deptId) {
+//   return request({
+//     url: '/system/dept/list/exclude/' + deptId,
+//     method: 'get'
+//   })
+// }
+
+// 查询部门详细
+export function getDept(deptId) {
+  return request({
+    url: 'pc/videoType/info/' + deptId,
+    method: 'get'
+  })
+}
+
+// 查询部门下拉树结构
+export function treeselect() {
+  return request({
+    url: 'pc/videoType/info/treeList',
+    method: 'get'
+  })
+}
+
+// // 根据角色ID查询部门树结构
+// export function roleDeptTreeselect(roleId) {
+//   return request({
+//     url: '/system/dept/roleDeptTreeselect/' + roleId,
+//     method: 'get'
+//   })
+// }
+
+// 新增部门
+export function addDept(data) {
+  return request({
+    url: 'pc/videoType/info',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改部门
+export function updateDept(data) {
+  return request({
+    url: 'pc/videoType/info',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除部门
+export function delDept(deptId) {
+  return request({
+    url: 'pc/videoType/info/' + deptId,
+    method: 'put'
+  })
+}

src/components/VideoPreview/index.js

@@ -0,0 +1,15 @@
+import Vue from 'vue'
+import main from './src'
+
+const testComponent = Vue.extend(main)
+
+export default function (src) {
+  const extendComponent = new testComponent({
+    data() {
+      return {
+        src,
+      }
+    },
+  }).$mount()
+  document.body.appendChild(extendComponent.$el)
+}

src/components/VideoPreview/src/index.vue

@@ -0,0 +1,55 @@
+<template>
+  <div class="background-box">
+    <div class="video-box">
+      <el-button type="primary" class="close-icon" @click="destroyElement">关闭</el-button>
+      <video :src="src" class="video" controls autoplay></video>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      src: ''
+    }
+  },
+  methods: {
+    destroyElement() {
+      this.$destroy(true)
+      this.$el.parentNode.removeChild(this.$el)
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.background-box {
+  position: fixed;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  background-color: rgba($color: #000000, $alpha: 0.325);
+  z-index: 9999;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  .video-box {
+    width: 50%;
+    height: 50%;
+    position: relative;
+    .close-icon {
+      position: absolute;
+      margin: auto;
+      right: 0;
+      top: -50px;
+    }
+    .video {
+      width: 100%;
+      height: 100%;
+      background-color: #000000;
+    }
+  }
+}
+</style>

src/views/driver/report/index.vue

@@ -50,10 +50,9 @@
           size="small"
           @keyup.enter.native="handleQuery"
         >
-          <el-option key="1" label="全部" value=""></el-option>
-          <el-option key="2" label="福州" value="3501"></el-option>
-          <el-option key="3" label="厦门" value="3502"></el-option>
-          <el-option key="4" label="莆田" value="3503"></el-option>
+          <el-option :key="1" label="全部" value=""></el-option>
+          <el-option v-for="(item,index) in coachCity" :key="(index+2)" :label="item.dictLabel" :value="item.dictValue"></el-option>
+        
         </el-select>
       </el-form-item>
       <el-form-item label="是否合作" label-width="120px" prop="isShare">
@@ -260,6 +259,7 @@ export default {
   name: "Report",
   data() {
     return {
+      coachCity:[],
       defaultStartTime: defaultStartTime,
       defaultEndTime: defaultEndTime,
       // 遮罩层
@@ -307,9 +307,14 @@ export default {
     };
   },
   created() {
+    let that =this
     this.queryParams.startTime = this.defaultStartTime;
     this.queryParams.endTime = this.defaultEndTime;
     this.getList();
+    this.getDicts("coach_city").then(res=>{
+      // console.log(res)
+      that.coachCity = res.data
+    })
   },
   methods: {
     /** 查询错题列表 */

src/views/shortVideo/index.vue

@@ -0,0 +1,441 @@
+<template>
+  <div class="app-container">
+    <el-row :gutter="20">
+      <el-col :span="24" :xs="24">
+        <!--搜索模块-->
+        <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
+          <el-form-item label="视频标题" prop="title">
+            <el-input
+              v-model="queryParams.title"
+              placeholder="请输入视频标题"
+              clearable
+              size="small"
+              style="width: 240px"
+              @keyup.enter.native="handleQuery"
+            />
+          </el-form-item>
+          <el-form-item label="上架状态" prop="title">
+            <el-select v-model="queryParams.shelfStatus" placeholder="请选择状态">
+              <el-option label="全部" :value="null"> </el-option>
+              <el-option label="已上架" :value="0"> </el-option>
+              <el-option label="未上架" :value="1"> </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="删除状态" prop="title">
+            <el-select v-model="queryParams.status" placeholder="请选择状态">
+              <el-option label="全部" :value="null"> </el-option>
+              <el-option label="未删除" :value="0"> </el-option>
+              <el-option label="已删除" :value="1"> </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+          </el-form-item>
+        </el-form>
+
+        <!--全局按钮模块-->
+        <el-row :gutter="10" class="mb8">
+          <el-col :span="1.5">
+            <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['system:user:add']">新增</el-button>
+          </el-col>
+          <el-col :span="1.5">
+            <el-button type="danger" icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete" v-hasPermi="['system:role:remove']"
+              >删除</el-button
+            >
+          </el-col>
+          <el-col :span="1.5">
+            <el-button type="primary" size="mini" :disabled="multiple" @click="putShelf" v-hasPermi="['system:role:remove']">批量上架</el-button>
+          </el-col>
+          <el-col :span="1.5">
+            <el-button type="primary" size="mini" :disabled="multiple" @click="offShelf" v-hasPermi="['system:role:remove']">批量下架</el-button>
+          </el-col>
+          <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+        </el-row>
+
+        <!--列表数据模块-->
+        <el-table v-loading="loading" :data="userList" @selection-change="handleSelectionChange">
+          <el-table-column type="selection" width="55" align="center" />
+          <el-table-column label="ID" align="center" prop="id" />
+          <el-table-column label="视频标题" align="center" prop="title" />
+          <el-table-column label="视频描述" align="center" prop="videoDescribe" />
+          <!-- <el-table-column label="视频预览" align="center" width="300px">
+            <template slot-scope="scope">
+              <video :src="scope.row.fileUrl" class="videoPreview" :poster="scope.row.coverFileUrl" controls preload="meta"></video>
+            </template>
+          </el-table-column> -->
+          <el-table-column label="视频封面" align="center" width="200px">
+            <template slot-scope="scope">
+              <div>
+                <el-card :body-style="{ padding: '0 0 5px' }">
+                  <img :src="scope.row.coverFileUrl" class="imgPreview" />
+                  <el-button type="primary" size="mini" @click="videoPreview(scope.row.fileUrl)" :disabled="!scope.row.fileUrl">预览视频</el-button>
+                </el-card>
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column label="视频时长" align="center" prop="videoDuration">
+            <template slot-scope="scope">
+              <span>{{ new Date(scope.row.videoDuration * 1000).toISOString().slice(11, 19) }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="视频顺序" align="center" prop="sort" />
+          <el-table-column label="上架状态" align="center">
+            <template slot-scope="scope">
+              <el-switch v-model="scope.row.shelfStatus" :active-value="0" :inactive-value="1" @change="handleStatusChange(scope.row)"></el-switch>
+            </template>
+          </el-table-column>
+          <el-table-column label="创建时间" align="center" prop="createTime" width="160">
+            <template slot-scope="scope">
+              <span>{{ parseTime(scope.row.createTime) }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="操作" align="center" width="160" class-name="small-padding fixed-width" fixed="right">
+            <template slot-scope="scope">
+              <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:user:edit']"
+                >修改</el-button
+              >
+              <el-button
+                v-if="scope.row.userId !== 1"
+                size="mini"
+                type="text"
+                icon="el-icon-delete"
+                @click="handleDelete(scope.row)"
+                v-hasPermi="['system:user:remove']"
+                >删除</el-button
+              >
+            </template>
+          </el-table-column>
+        </el-table>
+
+        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
+      </el-col>
+    </el-row>
+
+    <!-- 添加或修改参数配置对话框 -->
+    <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body :close-on-click-modal="false">
+      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+        <el-row>
+          <el-col :span="24">
+            <el-form-item label="视频标题" prop="title">
+              <el-input v-model="form.title" placeholder="请输入视频标题" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="24">
+            <el-form-item label="视频描述">
+              <el-input v-model="form.videoDescribe" type="textarea" placeholder="请输入内容"></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="24">
+            <el-form-item label="视频顺序">
+              <el-input v-model="form.sort" type="number" placeholder="请输入数值"></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="视频文件">
+              <input type="file" accept="video/*" ref="videoFile" @change="fileUpload" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="上传进度">
+              <el-progress
+                :text-inside="true"
+                :stroke-width="24"
+                :percentage="videoPercentage"
+                :status="form.vodVideoFileId ? 'success' : ''"
+              ></el-progress>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row v-if="form.vodVideoFileId">
+          <el-col :span="12">
+            <el-form-item label="视频封面">
+              <input type="file" accept="image/*" ref="coverFile" @change="coverUpload" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="上传进度">
+              <el-progress
+                :text-inside="true"
+                :stroke-width="24"
+                :percentage="imagePercentage"
+                :status="form.coverFileId ? 'success' : ''"
+              ></el-progress>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm" :disabled="!form.coverFileId && !form.coverFileUrl">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import shortVideoApi from '@/api/stortVideo/index'
+import { vodSignature } from '@/api/upload'
+import TcVod from 'vod-js-sdk-v6'
+import VideoPreview from '@/components/VideoPreview/index'
+
+export default {
+  name: 'stortVideo',
+  data() {
+    return {
+      videoPercentage: 0,
+      imagePercentage: 0,
+      mediaFile: null,
+      coverFile: null,
+      tcVod: null,
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 用户表格数据
+      userList: null,
+      // 弹出层标题
+      title: '',
+      // 部门树选项
+      deptOptions: undefined,
+      // 是否显示弹出层
+      open: false,
+      // 部门名称
+      deptName: undefined,
+      // 日期范围
+      dateRange: [],
+      // 状态数据字典
+      statusOptions: [],
+      // 表单参数
+      form: {},
+      defaultProps: {
+        children: 'children',
+        label: 'typeName',
+      },
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+      },
+      // 表单校验
+      rules: {
+        userName: [{ required: true, message: '用户名称不能为空', trigger: 'blur' }],
+      },
+    }
+  },
+  async created() {
+    this.tcVod = new TcVod({
+      getSignature: vodSignature,
+    })
+    this.getList()
+    this.getDicts('sys_normal_disable').then((response) => {
+      this.statusOptions = response.data
+    })
+  },
+  methods: {
+    videoPreview(videoSrc) {
+      VideoPreview(videoSrc)
+    },
+    /** 查询短视频列表 */
+    async getList() {
+      this.loading = true
+      const params = this.addDateRange(this.queryParams, this.dateRange)
+      const res = await shortVideoApi.getList(params)
+      this.userList = res.rows
+      this.total = res.total
+      this.loading = false
+    },
+    //上传视频
+    async fileUpload(e) {
+      this.mediaFile = e.target.files[0]
+      if (!this.mediaFile.type.includes('video')) {
+        this.msgError('请选择视频文件')
+        return false
+      }
+      this.videoPercentage = 0
+      const uploader = this.tcVod.upload({
+        mediaFile: this.mediaFile, // 媒体文件（视频或音频或图片），类型为 File
+      })
+      uploader.on('media_progress', (info) => {
+        this.videoPercentage = Math.floor(info.percent * 100 * 100) / 100
+      })
+      uploader.done().then((doneResult) => {
+        this.$set(this.form, 'vodVideoFileId', doneResult.fileId)
+      })
+    },
+    //上传封面
+    async coverUpload(e) {
+      this.coverFile = e.target.files[0]
+      if (!this.coverFile.type.includes('image')) {
+        this.msgError('请选择图片文件')
+        return false
+      }
+      this.imagePercentage = 0
+      let formData = new FormData()
+      formData.append('coverFile', this.coverFile)
+      formData.append('fileId', this.form.vodVideoFileId)
+      const { data } = await shortVideoApi.uploadCover(formData, (e) => {
+        this.imagePercentage = Math.floor((e.loaded / e.total) * 100 * 100) / 100
+      })
+      this.$set(this.form, 'coverFileId', data.fileId)
+    },
+    /** 视频状态修改 */
+    async handleStatusChange(row) {
+      const text = row.shelfStatus === 0 ? '上架' : '下架'
+      try {
+        await this.$confirm(`确认要 ${text} ${row.title}吗?`, '警告', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning',
+        })
+        await shortVideoApi.changeUserStatus(row.id, row.shelfStatus)
+      } catch (error) {
+        console.log(error)
+        row.shelfStatus = row.shelfStatus === 0 ? 1 : 0
+      }
+    },
+    /** 取消按钮,关闭修改窗口 */
+    cancel() {
+      this.open = false
+      this.reset()
+    },
+    /** 表单重置 */
+    reset() {
+      this.form = {}
+      this.videoPercentage = 0
+      this.imagePercentage = 0
+      this.resetForm('form')
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.page = 1
+      this.getList()
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.dateRange = []
+      this.resetForm('queryForm')
+      this.handleQuery()
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.ids = selection.map((item) => item.id)
+      this.single = selection.length != 1
+      this.multiple = !selection.length
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.reset()
+      this.open = true
+      this.title = '添加视频'
+    },
+    /** 修改按钮操作 */
+    async handleUpdate(row) {
+      this.reset()
+      const res = await shortVideoApi.getVideoInfo(row.id)
+      this.form = res.data
+      this.open = true
+      this.title = '修改视频信息'
+    },
+    /** 提交按钮 */
+    async submitForm() {
+      this.$refs['form'].validate((valid) => {
+        if (valid) {
+          if (this.form.id != undefined) {
+            const data = {
+              id: this.form.id,
+              title: this.form.title,
+              sort: this.form.sort,
+              videoDescribe: this.form.videoDescribe,
+              videoFileId: this.form.vodVideoFileId,
+              coverFileId: this.form.coverFileId,
+            }
+            shortVideoApi.updateVideo(data).then((response) => {
+              this.msgSuccess('修改成功')
+              this.open = false
+              this.getList()
+            })
+          } else {
+            const data = {
+              id: this.form.id,
+              sort: this.form.sort,
+              title: this.form.title,
+              videoDescribe: this.form.videoDescribe,
+              videoFileId: this.form.vodVideoFileId,
+              coverFileId: this.form.coverFileId,
+            }
+            shortVideoApi.addVideo(data).then((response) => {
+              this.msgSuccess('新增成功')
+              this.open = false
+              this.getList()
+            })
+          }
+        }
+      })
+    },
+    /** 删除按钮操作 */
+    async handleDelete(row) {
+      try {
+        const ids = row.id || this.ids
+        await this.$confirm(`是否删除ID为${ids}的短视频`, '警告', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning',
+        })
+        await shortVideoApi.delVideo(ids)
+        this.getList()
+      } catch (error) {}
+    },
+    /**批量下架 */
+    async offShelf() {
+      try {
+        const ids = this.ids
+        await this.$confirm(`是否下架ID为${ids}的短视频`, '警告', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning',
+        })
+        await shortVideoApi.offShelf(ids)
+        this.getList()
+      } catch (error) {}
+    },
+    /**批量上架 */
+    async putShelf() {
+      try {
+        const ids = this.ids
+        await this.$confirm(`是否上架ID为${ids}的短视频`, '警告', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning',
+        })
+        await shortVideoApi.putShelf(ids)
+        this.getList()
+      } catch (error) {}
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.videoPreview {
+  object-fit: contain;
+  height: 180px;
+}
+.imgPreview {
+  width: 100%;
+}
+</style>

src/views/teachingVideo/info/index.vue

@@ -0,0 +1,531 @@
+<template>
+  <div class="app-container">
+    <el-row :gutter="20">
+      <!--视频类型-->
+      <el-col :span="4" :xs="24">
+        <div class="head-container">
+          <el-input v-model="deptName" placeholder="请输入部门名称" clearable size="small" prefix-icon="el-icon-search" style="margin-bottom: 20px" />
+        </div>
+        <div class="head-container">
+          <el-tree
+            :data="deptOptions"
+            :props="defaultProps"
+            :expand-on-click-node="false"
+            :filter-node-method="filterNode"
+            ref="tree"
+            default-expand-all
+            highlight-current
+            @node-click="handleNodeClick"
+          />
+        </div>
+      </el-col>
+      <!--视频数据-->
+      <el-col :span="20" :xs="24">
+        <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
+          <el-form-item label="视频标题" prop="title">
+            <el-input
+              v-model="queryParams.title"
+              placeholder="请输入视频标题"
+              clearable
+              size="small"
+              style="width: 240px"
+              @keyup.enter.native="handleQuery"
+            />
+          </el-form-item>
+          <el-form-item label="上架状态" prop="title">
+            <el-select v-model="queryParams.shelfStatus" placeholder="请选择状态">
+              <el-option label="全部" :value="null"> </el-option>
+              <el-option label="已上架" :value="0"> </el-option>
+              <el-option label="未上架" :value="1"> </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="删除状态" prop="title">
+            <el-select v-model="queryParams.status" placeholder="请选择状态">
+              <el-option label="全部" :value="null"> </el-option>
+              <el-option label="未删除" :value="0"> </el-option>
+              <el-option label="已删除" :value="1"> </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+          </el-form-item>
+        </el-form>
+
+        <el-row :gutter="10" class="mb8">
+          <el-col :span="1.5">
+            <el-button v-if="pid != 0" type="primary" icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['system:user:add']"
+              >新增</el-button
+            >
+          </el-col>
+          <el-col :span="1.5">
+            <el-button type="primary" size="mini" :disabled="multiple" @click="putShelf" v-hasPermi="['system:role:remove']">批量上架</el-button>
+          </el-col>
+          <el-col :span="1.5">
+            <el-button type="primary" size="mini" :disabled="multiple" @click="offShelf" v-hasPermi="['system:role:remove']">批量下架</el-button>
+          </el-col>
+          <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+        </el-row>
+
+        <el-table v-loading="loading" :data="userList" @selection-change="handleSelectionChange">
+          <el-table-column type="selection" width="55" align="center" />
+          <el-table-column label="视频id" align="center" prop="id" />
+          <el-table-column label="视频标题" align="center" prop="title" />
+          <el-table-column label="视频描述" align="center" prop="videoDescribe" />
+          <el-table-column label="视频封面" align="center" width="200px">
+            <template slot-scope="scope">
+              <div>
+                <el-card :body-style="{ padding: '0 0 5px' }">
+                  <img :src="scope.row.coverFileUrl" class="imgPreview" />
+                  <el-button type="primary" size="mini" @click="videoPreview(scope.row.fileUrl)" :disabled="!scope.row.fileUrl">预览视频</el-button>
+                </el-card>
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column label="视频时长" align="center">
+            <template slot-scope="scope">
+              <span>{{ new Date(scope.row.videoDuration * 1000).toISOString().slice(11, 19) }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="视频分类" align="center" prop="teachingVideoTypeName" :show-overflow-tooltip="true" />
+          <el-table-column label="视频顺序" align="center" prop="sort" :show-overflow-tooltip="true" />
+          <el-table-column label="播放权限" align="center" prop="permission" :show-overflow-tooltip="true" :formatter="permissionFormatter" />
+          <el-table-column label="上架状态" align="center">
+            <template slot-scope="scope">
+              <el-switch v-model="scope.row.shelfStatus" :active-value="0" :inactive-value="1" @change="handleStatusChange(scope.row)"></el-switch>
+            </template>
+          </el-table-column>
+          <el-table-column label="创建时间" align="center" prop="createTime" width="160">
+            <template slot-scope="scope">
+              <span>{{ parseTime(scope.row.createTime) }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="操作" align="center" width="160" class-name="small-padding fixed-width">
+            <template slot-scope="scope">
+              <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:user:edit']"
+                >修改</el-button
+              >
+              <el-button
+                v-if="scope.row.userId !== 1"
+                size="mini"
+                type="text"
+                icon="el-icon-delete"
+                @click="handleDelete(scope.row)"
+                v-hasPermi="['system:user:remove']"
+                >删除</el-button
+              >
+            </template>
+          </el-table-column>
+        </el-table>
+
+        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
+      </el-col>
+    </el-row>
+
+    <!-- 添加或修改参数配置对话框 -->
+    <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+        <el-row>
+          <el-col :span="24">
+            <el-form-item label="视频标题" prop="title">
+              <el-input v-model="form.title" placeholder="请输入视频标题" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="24">
+            <el-form-item label="视频描述">
+              <el-input v-model="form.videoDescribe" type="textarea" placeholder="请输入内容"></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="视频顺序">
+              <el-input v-model="form.sort" type="number" placeholder="请输入数值"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="播放权限">
+              <el-select v-model="form.permission" placeholder="请选择状态">
+                <el-option label="正常" :value="0"> </el-option>
+                <el-option label="播放15秒" :value="1"> </el-option>
+                <el-option label="无法播放" :value="2"> </el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="视频文件">
+              <input type="file" accept="video/*" ref="videoFile" @change="fileUpload" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item v-if="form.userId == undefined" label="上传进度">
+              <el-progress
+                :text-inside="true"
+                :stroke-width="24"
+                :percentage="videoPercentage"
+                :status="form.vodVideoFileId ? 'success' : ''"
+              ></el-progress>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="视频封面">
+              <input type="file" accept="image/*" ref="coverFile" @change="coverUpload" :disabled="form.vodVideoFileId == null" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item v-if="form.userId == undefined" label="上传进度">
+              <el-progress
+                :text-inside="true"
+                :stroke-width="24"
+                :percentage="imagePercentage"
+                :status="form.coverFileId ? 'success' : ''"
+              ></el-progress>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { listUser, getUser, delVideo, addUser, updateUser, changeUserStatus, uploadCover, offShelf, putShelf } from '@/api/teachingVideo/index'
+import { treeselect } from '@/api/videoType'
+import Treeselect from '@riophae/vue-treeselect'
+import '@riophae/vue-treeselect/dist/vue-treeselect.css'
+import { vodSignature } from '@/api/upload'
+import TcVod from 'vod-js-sdk-v6'
+import VideoPreview from '@/components/VideoPreview/index'
+
+export default {
+  name: 'User',
+  components: { Treeselect },
+  data() {
+    return {
+      pid: 0,
+      teachingVideoTypeId: 0,
+      videoPercentage: 0,
+      imagePercentage: 0,
+      mediaFile: null,
+      coverFile: null,
+      tcVod: null,
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 用户表格数据
+      userList: null,
+      // 弹出层标题
+      title: '',
+      // 部门树选项
+      deptOptions: undefined,
+      // 是否显示弹出层
+      open: false,
+      // 部门名称
+      deptName: undefined,
+      // 日期范围
+      dateRange: [],
+      // 状态数据字典
+      statusOptions: [],
+      // 表单参数
+      form: {},
+      defaultProps: {
+        children: 'children',
+        label: 'typeName',
+      },
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+      },
+      // 表单校验
+      rules: {
+        userName: [{ required: true, message: '用户名称不能为空', trigger: 'blur' }],
+      },
+    }
+  },
+  watch: {
+    // 根据名称筛选部门树
+    deptName(val) {
+      this.$refs.tree.filter(val)
+    },
+  },
+  async created() {
+    this.tcVod = new TcVod({
+      getSignature: vodSignature,
+    })
+    this.getList()
+    this.getTreeselect()
+    this.getDicts('sys_normal_disable').then((response) => {
+      this.statusOptions = response.data
+    })
+  },
+  methods: {
+    permissionFormatter: (row) => {
+      const permissionMap = new Map([
+        [0, '正常'],
+        [1, '播放15秒'],
+        [2, '无法播放'],
+      ])
+      return permissionMap.get(row.permission)
+    },
+    /**视频预览 */
+    videoPreview: VideoPreview,
+    //上传视频
+    fileUpload(e) {
+      this.mediaFile = e.target.files[0]
+      if (!this.mediaFile.type.includes('video')) {
+        this.msgError('请选择视频文件')
+        return false
+      }
+      this.videoPercentage = 0
+      const uploader = this.tcVod.upload({
+        mediaFile: this.mediaFile, // 媒体文件（视频或音频或图片），类型为 File
+      })
+      uploader.on('media_progress', (info) => {
+        this.videoPercentage = Math.floor(info.percent * 100 * 100) / 100
+      })
+      uploader.done().then((doneResult) => {
+        this.$set(this.form, 'vodVideoFileId', doneResult.fileId)
+      })
+    },
+    //上传封面
+    async coverUpload(e) {
+      this.coverFile = e.target.files[0]
+      if (!this.coverFile.type.includes('image')) {
+        this.msgError('请选择视频文件')
+        return false
+      }
+      this.imagePercentage = 0
+      let formData = new FormData()
+      formData.append('coverFile', this.coverFile)
+      formData.append('fileId', this.form.vodVideoFileId)
+      let { data } = await uploadCover(formData, (e) => {
+        this.imagePercentage = Math.floor((e.loaded / e.total) * 100 * 100) / 100
+      })
+      this.$set(this.form, 'coverFileId', data.fileId)
+    },
+    /** 查询用户列表 */
+    getList() {
+      this.loading = true
+      listUser(this.addDateRange(this.queryParams, this.dateRange)).then((response) => {
+        this.userList = response.rows
+        this.total = response.total
+        this.loading = false
+      })
+    },
+    /** 查询部门下拉树结构 */
+    getTreeselect() {
+      treeselect().then((response) => {
+        this.deptOptions = response.data
+      })
+    },
+    // 筛选节点
+    filterNode(value, data) {
+      if (!value) return true
+      return data.typeName.indexOf(value) !== -1
+    },
+    // 节点单击事件
+    handleNodeClick(data) {
+      this.queryParams.teachingVideoTypeId = data.id
+      this.teachingVideoTypeId = data.id
+      this.pid = data.pid
+      this.getList()
+    },
+    // 用户状态修改
+    handleStatusChange(row) {
+      let text = row.shelfStatus === 0 ? '上架' : '下架'
+      this.$confirm('确认要"' + text + '""' + row.title + '"视频吗?', '警告', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning',
+      })
+        .then(() => {
+          return changeUserStatus(row.id, row.shelfStatus)
+        })
+        .then(() => {
+          this.msgSuccess(text + '成功')
+        })
+        .catch(() => {
+          row.shelfStatus = row.shelfStatus === '0' ? '1' : '0'
+        })
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false
+      this.reset()
+    },
+    // 表单重置
+    reset() {
+      this.form = {}
+      // this.$refs.videoFile.resetFields()
+      // this.$refs.coverFile.resetFields()
+      this.videoPercentage = 0
+      this.imagePercentage = 0
+      this.resetForm('form')
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.page = 1
+      this.getList()
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.dateRange = []
+      this.resetForm('queryForm')
+      this.handleQuery()
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.ids = selection.map((item) => item.id)
+      this.single = selection.length != 1
+      this.multiple = !selection.length
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.reset()
+      this.getTreeselect()
+      this.open = true
+      this.title = '添加视频'
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset()
+      this.getTreeselect()
+      const userId = row.id || this.ids
+      getUser(userId).then((response) => {
+        this.form = response.data
+        this.open = true
+        this.title = '修改视频信息'
+      })
+    },
+    /**校验form */
+    validate: function (form) {
+      console.log(form)
+      if (!form.title) {
+        this.msgError('标题必填')
+        return false
+      }
+      if (!form.vodVideoFileId) {
+        this.msgError('视频未上传成功')
+        return false
+      }
+      if (!form.coverFileId) {
+        this.msgError('封面未上传成功')
+        return false
+      }
+      return true
+    },
+    /** 提交按钮 */
+    submitForm: function () {
+      if (this.form.id != undefined) {
+        let data = {
+          teachingVideoTypeId: this.form.teachingVideoTypeId,
+          id: this.form.id,
+          title: this.form.title,
+          sort: this.form.sort,
+          videoDescribe: this.form.videoDescribe,
+          videoFileId: this.form.vodVideoFileId,
+          coverFileId: this.form.coverFileId,
+          permission: this.form.permission,
+        }
+        updateUser(data).then((response) => {
+          this.msgSuccess('修改成功')
+          this.open = false
+          this.getList()
+        })
+      } else {
+        let data = {
+          teachingVideoTypeId: this.teachingVideoTypeId,
+          id: this.form.id,
+          title: this.form.title,
+          sort: this.form.sort,
+          videoDescribe: this.form.videoDescribe,
+          videoFileId: this.form.vodVideoFileId,
+          coverFileId: this.form.coverFileId,
+          permission: this.form.permission,
+        }
+        addUser(data).then((response) => {
+          this.msgSuccess('新增成功')
+          this.open = false
+          this.getList()
+        })
+      }
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      console.log(row)
+      const userIds = row.id
+      this.$confirm('是否确认删除id为"' + userIds + '"的数据项?', '警告', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning',
+      })
+        .then(function () {
+          console.log('确定')
+          return delVideo(userIds)
+        })
+        .then(() => {
+          this.getList()
+          this.msgSuccess('删除成功')
+        })
+    },
+    /**批量下架 */
+    async offShelf() {
+      try {
+        const ids = this.ids
+        await this.$confirm(`是否下架ID为${ids}的短视频`, '警告', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning',
+        })
+        await offShelf(ids)
+        this.getList()
+      } catch (error) {}
+    },
+    /**批量上架 */
+    async putShelf() {
+      try {
+        const ids = this.ids
+        console.log(ids)
+        await this.$confirm(`是否上架ID为${ids}的短视频`, '警告', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning',
+        })
+        await putShelf(ids)
+        this.getList()
+      } catch (error) {}
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.videoPreview {
+  object-fit: contain;
+  height: 180px;
+}
+.imgPreview {
+  object-fit: contain;
+  width: 200px;
+}
+</style>

src/views/videoType/info/index.vue

@@ -0,0 +1,248 @@
+<template>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch">
+      <el-form-item label="分类名称" prop="deptName">
+        <el-input v-model="queryParams.typeName" placeholder="请输入分类名称" clearable size="small" @keyup.enter.native="handleQuery" />
+      </el-form-item>
+      <!-- <el-form-item label="状态" prop="status">
+        <el-select v-model="queryParams.status" placeholder="分类状态" clearable size="small">
+          <el-option v-for="dict in statusOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" />
+        </el-select>
+      </el-form-item> -->
+      <el-form-item>
+        <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['system:dept:add']">新增</el-button>
+      </el-col>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <el-table v-loading="loading" :data="deptList" row-key="id" default-expand-all :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
+      <el-table-column prop="typeName" label="分类名称" width="260"></el-table-column>
+      <el-table-column prop="typeSort" label="排序" width="200"></el-table-column>
+      <el-table-column prop="status" label="状态" :formatter="statusFormat" width="100"></el-table-column>
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template slot-scope="scope">
+          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:dept:edit']">修改</el-button>
+          <el-button size="mini" type="text" icon="el-icon-plus" @click="handleAdd(scope.row)" v-hasPermi="['system:dept:add']">新增</el-button>
+          <el-button
+            v-if="scope.row.parentId != 0"
+            size="mini"
+            type="text"
+            icon="el-icon-delete"
+            @click="handleDelete(scope.row)"
+            v-hasPermi="['system:dept:remove']"
+            >删除</el-button
+          >
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <!-- 添加或修改部门对话框 -->
+    <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+        <el-row>
+          <!-- <el-col :span="24">
+            <el-form-item label="分类菜单" prop="pid">
+              <treeselect v-model="form.pid" :options="deptOptions" :normalizer="normalizer" placeholder="选择分类菜单" />
+            </el-form-item>
+          </el-col> -->
+          <el-col :span="12">
+            <el-form-item label="分类名称" prop="typeName">
+              <el-input v-model="form.typeName" placeholder="请输入分类名称" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="科目" prop="typeName">
+              <el-select v-model="form.subject" placeholder="请选择科目">
+                <el-option label="科目一" :value="1"> </el-option>
+                <el-option label="科目二" :value="2"> </el-option>
+                <el-option label="科目三" :value="3"> </el-option>
+                <el-option label="科目四" :value="4"> </el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="显示排序" prop="typeSort">
+              <el-input-number v-model="form.typeSort" controls-position="right" :min="0" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="分类状态">
+              <el-radio-group v-model="form.status">
+                <el-radio v-for="dict in statusOptions" :key="dict.dictValue" :label="dict.dictValue">{{ dict.dictLabel }}</el-radio>
+              </el-radio-group>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { listDept, getDept, delDept, addDept, updateDept } from '@/api/videoType'
+import Treeselect from '@riophae/vue-treeselect'
+import '@riophae/vue-treeselect/dist/vue-treeselect.css'
+
+export default {
+  name: 'Dept',
+  components: { Treeselect },
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 表格树数据
+      deptList: [],
+      // 部门树选项
+      deptOptions: [],
+      // 弹出层标题
+      title: '',
+      // 是否显示弹出层
+      open: false,
+      // 状态数据字典
+      statusOptions: [],
+      // 查询参数
+      queryParams: {
+        typeName: undefined,
+        status: undefined,
+      },
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {
+        parentId: [{ required: true, message: '上级部门不能为空', trigger: 'blur' }],
+      },
+    }
+  },
+  created() {
+    this.getList()
+    this.getDicts('sys_normal_disable').then((response) => {
+      this.statusOptions = response.data
+    })
+  },
+  methods: {
+    /** 查询部门列表 */
+    getList() {
+      this.loading = true
+      listDept(this.queryParams).then((response) => {
+        this.deptList = this.handleTree(response.data, 'id')
+        this.loading = false
+      })
+    },
+    /** 转换部门数据结构 */
+    normalizer(node) {
+      if (node.children && !node.children.length) {
+        delete node.children
+      }
+      return {
+        id: node.id,
+        label: node.typeName,
+        children: node.children,
+      }
+    },
+    // 字典状态字典翻译
+    statusFormat(row, column) {
+      return this.selectDictLabel(this.statusOptions, row.status)
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false
+      this.reset()
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        id: undefined,
+        pid: undefined,
+        typeName: undefined,
+        typeSort: undefined,
+        status: '0',
+      }
+      this.resetForm('form')
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.getList()
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm('queryForm')
+      this.handleQuery()
+    },
+    /** 新增按钮操作 */
+    handleAdd(row) {
+      this.reset()
+      if (row != undefined) {
+        this.form.pid = row.id
+        if (row.id == undefined) {
+          this.form.pid = 0
+        }
+      }
+      this.open = true
+      this.title = '添加分类'
+      listDept().then((response) => {
+        this.deptOptions = this.handleTree(response.data, 'id', 'pid')
+      })
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset()
+      getDept(row.id).then((response) => {
+        this.form = response.data
+        this.open = true
+        this.title = '修改分类'
+      })
+      listDept().then((response) => {
+        this.deptOptions = this.handleTree(response.data, 'id', 'pid')
+      })
+    },
+    /** 提交按钮 */
+    submitForm: function () {
+      this.$refs['form'].validate((valid) => {
+        if (valid) {
+          if (this.form.id != undefined) {
+            updateDept(this.form).then((response) => {
+              this.msgSuccess('修改成功')
+              this.open = false
+              this.getList()
+            })
+          } else {
+            addDept(this.form).then((response) => {
+              this.msgSuccess('新增成功')
+              this.open = false
+              this.getList()
+            })
+          }
+        }
+      })
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      this.$confirm('是否确认删除名称为"' + row.typeName + '"的数据项?', '警告', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning',
+      })
+        .then(function () {
+          return delDept(row.id)
+        })
+        .then(() => {
+          this.getList()
+          this.msgSuccess('删除成功')
+        })
+    },
+  },
+}
+</script>