新增视频类型管理,视频管理

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.4.12",
     "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/teachingVideo/index.js

@@ -0,0 +1,74 @@
+import request from '@/utils/request'
+import { praseStrEmpty } from '@/utils/ruoyi'
+
+// 查询用户列表
+export function listUser(query) {
+  return request({
+    url: 'pc/teachingVideo/info/list',
+    method: 'get',
+    params: 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 delUser(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) {
+  console.log(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'
+    })
+  }
+}

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/views/teachingVideo/info/index.vue

@@ -0,0 +1,410 @@
+<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>
+            <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>
+          <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+        </el-row>
+
+        <el-table v-loading="loading" :data="userList" @selection-change="handleSelectionChange">
+          <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" 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="teachingVideoTypeName" :show-overflow-tooltip="true" />
+          <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-col :span="12">
+            <el-form-item label="视频类别" prop="teachingVideoTypeId">
+              <treeselect v-model="form.teachingVideoTypeId" :options="deptOptions" :show-count="true" 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="视频文件">
+              <input type="file" 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="success"></el-progress>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="视频封面">
+              <input type="file" ref="coverFile"  @change="coverUpload" />
+            </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="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, delUser, addUser, updateUser,  changeUserStatus,  uploadCover } 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'
+
+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: {
+    //上传视频
+    fileUpload(e) {
+      this.mediaFile = e.target.files[0]
+      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.form.vodVideoFileId = doneResult.fileId
+      })
+    },
+    //上传封面
+    async coverUpload(e) {
+      this.coverFile = e.target.files[0]
+      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.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 === '1' ? '上架' : '下架'
+      this.$confirm('确认要"' + text + '""' + row.title + '"视频吗?', '警告', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      })
+        .then(function() {
+          return changeUserStatus(row.id, row.shelfStatus)
+        })
+        .then(() => {
+          this.msgSuccess(text + '成功')
+        })
+        .catch(function() {
+          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.userId)
+      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 = '修改视频信息'
+      })
+    },
+    /** 提交按钮 */
+    submitForm: function() {
+      this.$refs['form'].validate(valid => {
+        if (valid) {
+          if (this.form.id != undefined) {
+            let data = {
+              teachingVideoTypeId: this.form.teachingVideoTypeId,
+              id: this.form.id,
+              title: this.form.title,
+              videoDescribe: this.form.videoDescribe,
+              videoFileId: this.form.vodVideoFileId,
+              coverFileId: this.form.coverFileId
+            }
+            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,
+              videoDescribe: this.form.videoDescribe,
+              videoFileId: this.form.vodVideoFileId,
+              coverFileId: this.form.coverFileId
+            }
+            addUser(data).then(response => {
+              this.msgSuccess('新增成功')
+              this.open = false
+              this.getList()
+            })
+          }
+        }
+      })
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const userIds = row.userId || this.ids
+      this.$confirm('是否确认删除用户编号为"' + userIds + '"的数据项?', '警告', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      })
+        .then(function() {
+          return delUser(userIds)
+        })
+        .then(() => {
+          this.getList()
+          this.msgSuccess('删除成功')
+        })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.videoPreview {
+  object-fit: contain;
+  height: 180px;
+}
+</style>

src/views/teachingVideo/profile/index.vue

@@ -0,0 +1,92 @@
+<template>
+  <div class="app-container">
+    <el-row :gutter="20">
+      <el-col :span="6" :xs="24">
+        <el-card class="box-card">
+          <div slot="header" class="clearfix">
+            <span>个人信息</span>
+          </div>
+          <div>
+            <div class="text-center">
+              <userAvatar :user="user" />
+            </div>
+            <ul class="list-group list-group-striped">
+              <li class="list-group-item">
+                <svg-icon icon-class="user" />用户名称
+                <div class="pull-right">{{ user.userName }}</div>
+              </li>
+              <li class="list-group-item">
+                <svg-icon icon-class="phone" />手机号码
+                <div class="pull-right">{{ user.phonenumber }}</div>
+              </li>
+              <li class="list-group-item">
+                <svg-icon icon-class="email" />用户邮箱
+                <div class="pull-right">{{ user.email }}</div>
+              </li>
+              <li class="list-group-item">
+                <svg-icon icon-class="tree" />所属部门
+                <div class="pull-right" v-if="user.dept">{{ user.dept.deptName }} / {{ postGroup }}</div>
+              </li>
+              <li class="list-group-item">
+                <svg-icon icon-class="peoples" />所属角色
+                <div class="pull-right">{{ roleGroup }}</div>
+              </li>
+              <li class="list-group-item">
+                <svg-icon icon-class="date" />创建日期
+                <div class="pull-right">{{ user.createTime }}</div>
+              </li>
+            </ul>
+          </div>
+        </el-card>
+      </el-col>
+      <el-col :span="18" :xs="24">
+        <el-card>
+          <div slot="header" class="clearfix">
+            <span>基本资料</span>
+          </div>
+          <el-tabs v-model="activeTab">
+            <el-tab-pane label="基本资料" name="userinfo">
+              <userInfo :user="user" />
+            </el-tab-pane>
+            <el-tab-pane label="修改密码" name="resetPwd">
+              <resetPwd :user="user" />
+            </el-tab-pane>
+          </el-tabs>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import userAvatar from "./userAvatar";
+import userInfo from "./userInfo";
+import resetPwd from "./resetPwd";
+import { getUserProfile } from "@/api/system/user";
+
+export default {
+  name: "Profile",
+  components: { userAvatar, userInfo, resetPwd },
+  data() {
+    return {
+      user: {},
+      roleGroup: {},
+      postGroup: {},
+      activeTab: "userinfo"
+    };
+  },
+  created() {
+    this.getUser();
+  },
+  methods: {
+    getUser() {
+      getUserProfile().then(response => {
+        var data = response.data;
+        this.user = data.user;
+        this.roleGroup = data.roleGroup;
+        this.postGroup = data.postGroup;
+      });
+    }
+  }
+};
+</script>

src/views/teachingVideo/profile/resetPwd.vue

@@ -0,0 +1,72 @@
+<template>
+  <el-form ref="form" :model="user" :rules="rules" label-width="80px">
+    <el-form-item label="旧密码" prop="oldPassword">
+      <el-input v-model="user.oldPassword" placeholder="请输入旧密码" type="password" />
+    </el-form-item>
+    <el-form-item label="新密码" prop="newPassword">
+      <el-input v-model="user.newPassword" placeholder="请输入新密码" type="password" />
+    </el-form-item>
+    <el-form-item label="确认密码" prop="confirmPassword">
+      <el-input v-model="user.confirmPassword" placeholder="请确认密码" type="password" />
+    </el-form-item>
+    <el-form-item>
+      <el-button type="primary" size="mini" @click="submit">保存</el-button>
+      <el-button type="danger" size="mini" @click="close">关闭</el-button>
+    </el-form-item>
+  </el-form>
+</template>
+
+<script>
+import { updateUserPwd } from "@/api/system/user";
+
+export default {
+  data() {
+    const equalToPassword = (rule, value, callback) => {
+      if (this.user.newPassword !== value) {
+        callback(new Error("两次输入的密码不一致"));
+      } else {
+        callback();
+      }
+    };
+    return {
+      test: "1test",
+      user: {
+        oldPassword: undefined,
+        newPassword: undefined,
+        confirmPassword: undefined
+      },
+      // 表单校验
+      rules: {
+        oldPassword: [
+          { required: true, message: "旧密码不能为空", trigger: "blur" }
+        ],
+        newPassword: [
+          { required: true, message: "新密码不能为空", trigger: "blur" },
+          { min: 6, max: 20, message: "长度在 6 到 20 个字符", trigger: "blur" }
+        ],
+        confirmPassword: [
+          { required: true, message: "确认密码不能为空", trigger: "blur" },
+          { required: true, validator: equalToPassword, trigger: "blur" }
+        ]
+      }
+    };
+  },
+  methods: {
+    submit() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          updateUserPwd(this.user.oldPassword, this.user.newPassword).then(
+            response => {
+              this.msgSuccess("修改成功");
+            }
+          );
+        }
+      });
+    },
+    close() {
+      this.$store.dispatch("tagsView/delView", this.$route);
+      this.$router.push({ path: "/index" });
+    }
+  }
+};
+</script>

src/views/teachingVideo/profile/userAvatar.vue

@@ -0,0 +1,142 @@
+<template>
+  <div>
+    <img v-bind:src="options.img" @click="editCropper()" title="点击上传头像" class="img-circle img-lg" />
+    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body @opened="modalOpened">
+      <el-row>
+        <el-col :xs="24" :md="12" :style="{height: '350px'}">
+          <vue-cropper
+            ref="cropper"
+            :img="options.img"
+            :info="true"
+            :autoCrop="options.autoCrop"
+            :autoCropWidth="options.autoCropWidth"
+            :autoCropHeight="options.autoCropHeight"
+            :fixedBox="options.fixedBox"
+            @realTime="realTime"
+            v-if="visible"
+          />
+        </el-col>
+        <el-col :xs="24" :md="12" :style="{height: '350px'}">
+          <div class="avatar-upload-preview">
+            <img :src="previews.url" :style="previews.img" />
+          </div>
+        </el-col>
+      </el-row>
+      <br />
+      <el-row>
+        <el-col :lg="2" :md="2">
+          <el-upload action="#" :http-request="requestUpload" :show-file-list="false" :before-upload="beforeUpload">
+            <el-button size="small">
+              上传
+              <i class="el-icon-upload el-icon--right"></i>
+            </el-button>
+          </el-upload>
+        </el-col>
+        <el-col :lg="{span: 1, offset: 2}" :md="2">
+          <el-button icon="el-icon-plus" size="small" @click="changeScale(1)"></el-button>
+        </el-col>
+        <el-col :lg="{span: 1, offset: 1}" :md="2">
+          <el-button icon="el-icon-minus" size="small" @click="changeScale(-1)"></el-button>
+        </el-col>
+        <el-col :lg="{span: 1, offset: 1}" :md="2">
+          <el-button icon="el-icon-refresh-left" size="small" @click="rotateLeft()"></el-button>
+        </el-col>
+        <el-col :lg="{span: 1, offset: 1}" :md="2">
+          <el-button icon="el-icon-refresh-right" size="small" @click="rotateRight()"></el-button>
+        </el-col>
+        <el-col :lg="{span: 2, offset: 6}" :md="2">
+          <el-button type="primary" size="small" @click="uploadImg()">提 交</el-button>
+        </el-col>
+      </el-row>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import store from "@/store";
+import { VueCropper } from "vue-cropper";
+import { uploadAvatar } from "@/api/system/user";
+
+export default {
+  components: { VueCropper },
+  props: {
+    user: {
+      type: Object
+    }
+  },
+  data() {
+    return {
+      // 是否显示弹出层
+      open: false,
+      // 是否显示cropper
+      visible: false,
+      // 弹出层标题
+      title: "修改头像",
+      options: {
+        img: store.getters.avatar, //裁剪图片的地址
+        autoCrop: true, // 是否默认生成截图框
+        autoCropWidth: 200, // 默认生成截图框宽度
+        autoCropHeight: 200, // 默认生成截图框高度
+        fixedBox: true // 固定截图框大小 不允许改变
+      },
+      previews: {}
+    };
+  },
+  methods: {
+    // 编辑头像
+    editCropper() {
+      this.open = true;
+    },
+    // 打开弹出层结束时的回调
+    modalOpened() {
+      this.visible = true;
+    },
+    // 覆盖默认的上传行为
+    requestUpload() {
+    },
+    // 向左旋转
+    rotateLeft() {
+      this.$refs.cropper.rotateLeft();
+    },
+    // 向右旋转
+    rotateRight() {
+      this.$refs.cropper.rotateRight();
+    },
+    // 图片缩放
+    changeScale(num) {
+      num = num || 1;
+      this.$refs.cropper.changeScale(num);
+    },
+    // 上传预处理
+    beforeUpload(file) {
+      if (file.type.indexOf("image/") == -1) {
+        this.msgError("文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件。");
+      } else {
+        const reader = new FileReader();
+        reader.readAsDataURL(file);
+        reader.onload = () => {
+          this.options.img = reader.result;
+        };
+      }
+    },
+    // 上传图片
+    uploadImg() {
+      this.$refs.cropper.getCropBlob(data => {
+        let formData = new FormData();
+        formData.append("avatarfile", data);
+        uploadAvatar(formData).then(response => {
+          this.open = false;
+          this.options.img = process.env.VUE_APP_BASE_API + response.data;
+          store.commit('SET_AVATAR', this.options.img);
+          this.msgSuccess("修改成功");
+          this.visible = false;
+        });
+      });
+    },
+    // 实时预览
+    realTime(data) {
+      this.previews = data;
+    }
+  }
+};
+</script>

src/views/teachingVideo/profile/userInfo.vue

@@ -0,0 +1,76 @@
+<template>
+  <el-form ref="form" :model="user" :rules="rules" label-width="80px">
+    <el-form-item label="用户昵称" prop="nickName">
+      <el-input v-model="user.nickName" />
+    </el-form-item> 
+    <el-form-item label="手机号码" prop="phonenumber">
+      <el-input v-model="user.phonenumber" maxlength="11" />
+    </el-form-item>
+    <el-form-item label="邮箱" prop="email">
+      <el-input v-model="user.email" maxlength="50" />
+    </el-form-item>
+    <el-form-item label="性别">
+      <el-radio-group v-model="user.sex">
+        <el-radio label="0">男</el-radio>
+        <el-radio label="1">女</el-radio>
+      </el-radio-group>
+    </el-form-item>
+    <el-form-item>
+      <el-button type="primary" size="mini" @click="submit">保存</el-button>
+      <el-button type="danger" size="mini" @click="close">关闭</el-button>
+    </el-form-item>
+  </el-form>
+</template>
+
+<script>
+import { updateUserProfile } from "@/api/system/user";
+
+export default {
+  props: {
+    user: {
+      type: Object
+    }
+  },
+  data() {
+    return {
+      // 表单校验
+      rules: {
+        nickName: [
+          { required: true, message: "用户昵称不能为空", trigger: "blur" }
+        ],
+        email: [
+          { required: true, message: "邮箱地址不能为空", trigger: "blur" },
+          {
+            type: "email",
+            message: "'请输入正确的邮箱地址",
+            trigger: ["blur", "change"]
+          }
+        ],
+        phonenumber: [
+          { required: true, message: "手机号码不能为空", trigger: "blur" },
+          {
+            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
+            message: "请输入正确的手机号码",
+            trigger: "blur"
+          }
+        ]
+      }
+    };
+  },
+  methods: {
+    submit() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          updateUserProfile(this.user).then(response => {
+            this.msgSuccess("修改成功");
+          });
+        }
+      });
+    },
+    close() {
+      this.$store.dispatch("tagsView/delView", this.$route);
+      this.$router.push({ path: "/index" });
+    }
+  }
+};
+</script>

src/views/videoType/info/index.vue

@@ -0,0 +1,238 @@
+<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" v-if="form.pid !== 0">
+            <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="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>