3.24

src/views/video/api/index.js

@@ -0,0 +1,56 @@
+/*
+ * @Description:
+ * @version:
+ * @Author: King
+ * @Date: 2022-02-14 10:45:11
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2022-02-16 14:17:07
+ */
+import request from '@/utils/request'
+// 课程列表
+export function courseList(params) {
+  return request({
+    url: '/course/info',
+    method: 'get',
+    params,
+  })
+}
+//课程添加
+export function doAdd(data) {
+  return request({
+    url: '/course/info',
+    method: 'post',
+    data,
+  })
+}
+//课程修改 -->此处data需要穿一个id
+export function doEdit(data) {
+  return request({
+    url: '/course/info/' + data.id,
+    method: 'put',
+    data,
+  })
+}
+//课程详情 -->此处params需要穿一个id
+export function doDetail(params) {
+  return request({
+    url: '/course/info/' + params.id,
+    method: 'get',
+  })
+}
+// 课程删除 --》此处data需要穿一个id
+export function doDelete(data) {
+  return request({
+    url: '/course/info/' + data.id,
+    method: 'delete',
+  })
+}
+// 分类模块接口----------------------------------------------------------
+// 课程分类tree列表
+export function doTree(params) {
+  return request({
+    url: '/course/category-tree',
+    method: 'get',
+    params,
+  })
+}

src/views/video/components/CourseManage.vue

@@ -0,0 +1,404 @@
+<template>
+  <el-dialog
+    :close-on-click-modal="false"
+    style="padding: 0 50px"
+    :title="title"
+    :visible.sync="dialogFormVisible"
+    width="1000px"
+    @close="close"
+  >
+    <el-form
+      ref="form"
+      label-width="80px"
+      :model="form"
+      :rules="rules"
+      style="width: 80%; margin: 0 auto"
+    >
+      <el-form-item label="课程分类" prop="category">
+        <el-select
+          v-model="form.category.id"
+          placeholder="请选择课程分类"
+          style="width: 90%"
+        >
+          <el-option
+            v-for="(item, index) in treeData"
+            :key="index"
+            :label="item.name"
+            style="height: auto; padding: 0 10px"
+            :value="item.id"
+          />
+        </el-select>
+        <el-button style="margin-left: 10px" type="text" @click="courseSort">
+          分类管理
+        </el-button>
+      </el-form-item>
+      <el-form-item label="课程名称" prop="title">
+        <el-input v-model="form.title" />
+      </el-form-item>
+      <el-form-item label="课程标签" prop="labels">
+        <el-select
+          v-model="form.labels"
+          allow-create
+          default-first-option
+          filterable
+          multiple
+          placeholder="请选择课程标签"
+          style="width: 100%"
+        >
+          <el-option
+            v-for="item in form.labels"
+            :key="item"
+            :label="item"
+            :value="item"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="课程封面" prop="thumb">
+        <el-upload
+          accept=".png,.jpg"
+          :action="action"
+          class="upload-demo"
+          :data="uploadData"
+          :file-list="fileList"
+          :limit="limit"
+          list-type="picture"
+          multiple
+          :on-success="uploadSuccess"
+        >
+          <el-button size="small" type="primary" @click="clearFile">
+            {{
+              title == '添加'
+                ? '上传照片'
+                : '重新上传'
+            }}
+          </el-button>
+          <div slot="tip" class="el-upload__tip">
+            只能上传jpg/png文件，且不超过500kb
+          </div>
+        </el-upload>
+      </el-form-item>
+      <el-form-item
+        v-if="title == '编辑' && imageUrl"
+        label=""
+        prop="thumb"
+      >
+        <div class="ref-image">
+          <img :src="imageUrl" />
+        </div>
+      </el-form-item>
+      <el-form-item label="课程描述" prop="description">
+        <tiny-mce
+          :content="form.intro"
+          :tiny-height="300"
+          @childByValue="getTnyMac"
+        />
+      </el-form-item>
+      <el-form-item label="发布时间" prop="published_at">
+        <!-- <el-input v-model="form.published_at" /> -->
+        <el-date-picker
+          v-model="form.published_at"
+          format="yyyy-MM-dd HH:mm:ss"
+          placeholder="选择日期时间"
+          style="width: 100%"
+          type="datetime"
+          value-format="yyyy-MM-dd HH:mm:ss"
+        />
+      </el-form-item>
+      <el-form-item label="是否推荐" prop="is_rec">
+        <el-radio-group v-model="form.is_rec">
+          <el-radio :label="1">是</el-radio>
+          <el-radio :label="0">否</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="评论" prop="comment_status">
+        <el-radio-group v-model="form.comment_status">
+          <el-radio :label="1">开启评论</el-radio>
+          <el-radio :label="0">关闭评论</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="课程排序" prop="sort">
+        <el-input v-model="form.sort" type="number" />
+      </el-form-item>
+      <el-form-item label="课程状态" prop="status">
+        <el-radio-group v-model="form.status">
+          <el-radio :label="1">正常</el-radio>
+          <el-radio :label="0">禁用</el-radio>
+        </el-radio-group>
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button @click="close">取消</el-button>
+      <el-button v-if="title == '编辑'" type="primary" @click="save">
+        确定
+      </el-button>
+      <el-button v-if="title == '添加'" type="primary" @click="add">
+        添加
+      </el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script>
+  import { doEdit, doTree, doAdd } from '../api/index'
+  // import { baseURL } from '@/config'
+
+  export default {
+    name: 'DepartmentManagementEdit',
+    data() {
+      return {
+        // treeData: [{ id: 0, name: '全部' }],   由于请求的数组里边有多个字段没有进行处理暂时不拼接全部
+        treeData: [],
+        defaultProps: {
+          children: 'children',
+          label: 'name',
+          leaf: true,
+        },
+        form: {
+          category: { id: '' },
+          title: '',
+          labels: [],
+          thumb: '',
+          short_description: '',
+          description: '',
+          published_at: '',
+          is_rec: 1,
+          comment_status: 1,
+          status: 1,
+          sort: 0,
+        },
+        action: '', //图片上传地址
+        uploadShow: true,
+        uploadData: { file_type: 'img', type: 'course' },
+        fileList: [],
+        limit: 1,
+        imageUrl: '', //已上传视频链接
+        rules: {
+          category: [
+            { required: true, trigger: 'change', message: '请选择课程类型' },
+          ],
+          title: [
+            { required: true, trigger: 'blur', message: '请输入课程名称' },
+          ],
+          labels: [
+            { required: true, trigger: 'blur', message: '请输入课程描述' },
+          ],
+          thumb: [
+            { required: true, trigger: 'blur', message: '请上传课程封面' },
+          ],
+          short_description: [
+            { required: true, trigger: 'blur', message: '请输入课程段介绍' },
+          ],
+          // published_at: [
+          //   {
+          //     required: true,
+          //     trigger: 'change',
+          //     message: '请选择课程发布时间',
+          //   },
+          // ],
+          is_rec: [
+            {
+              required: true,
+              trigger: 'change',
+              message: '请选择是否推荐',
+            },
+          ],
+          comment_status: [
+            {
+              required: true,
+              trigger: 'change',
+              message: '请选择是否开启评论',
+            },
+          ],
+          sort: [
+            { required: true, trigger: 'blur', message: '请输入课程排序' },
+          ],
+        },
+        title: '',
+        dialogFormVisible: false,
+      }
+    },
+    watch: {
+      $route: 'getTree',
+    },
+    created() {
+      this.getTree()
+      // this.action = baseURL + '/common/upload'
+      this.fileList = []
+    },
+    methods: {
+      //富文本编辑器
+      getTnyMac(res) {
+        this.form.intro = res
+      },
+      //跳转课程分类管理
+      courseSort() {
+        this.$router.push('/course/coursesort')
+      },
+      //上传成功
+      uploadSuccess(response) {
+        console.log(response, '图片上传成功')
+        this.form.thumb = response.data.id
+        this.$refs.form.validateField('thumb')
+      },
+      clearFile() {
+        console.log('上传之前')
+        this.imageUrl = ''
+      },
+      // 分类列表数据
+      async getTree() {
+        const { data } = await doTree()
+        console.log(data, '课程分类列表数据0000')
+        // this.treeData = this.treeData.concat(data)
+        this.treeData = data
+      },
+      // handleNodeClick(node) {
+      //   this.form.category_name = node.name
+      //   this.form.category_id = node.id
+      // },
+      showEdit(row) {
+        console.log(row, '点击按钮传过来的数据')
+        if (row) {
+          this.title = '编辑'
+          this.form = Object.assign({}, row)
+          if (this.form.thumb_resource) {
+            this.imageUrl = this.form.thumb_resource.url
+          }
+          // if (this.form.category) {
+          //   this.category_id = this.form.category.id
+          // }
+        } else {
+          this.title = '添加'
+        }
+        this.dialogFormVisible = true
+      },
+      close() {
+        this.$refs['form'].resetFields()
+        this.form = this.$options.data().form
+        this.fileList = []
+        this.dialogFormVisible = false
+      },
+      //编辑保存
+      save() {
+        this.form.labels = this.form.labels.toString()
+        this.$refs['form'].validate(async (valid) => {
+          if (valid) {
+            const { message } = await doEdit(this.form)
+            this.$baseMessage(
+              message,
+              'success',
+              false,
+              'vab-hey-message-success'
+            )
+            this.$emit('fetch-data')
+            this.fileList = []
+            this.close()
+          }
+        })
+      },
+      //添加
+      add() {
+        this.form.labels = this.form.labels.toString()
+        this.$refs['form'].validate(async (valid) => {
+          if (valid) {
+            const { message } = await doAdd(this.form)
+            this.$baseMessage(
+              message,
+              'success',
+              false,
+              'vab-hey-message-success'
+            )
+            this.$emit('fetch-data')
+            this.fileList = []
+
+            this.close()
+          }
+        })
+      },
+    },
+  }
+</script>
+<style lang="scss">
+  .ref-image {
+    height: 150px;
+    overflow: hidden;
+    border: solid 1px #eee;
+    border-radius: 8px;
+  }
+  .ref-image img {
+    width: auto;
+    height: 150px;
+  }
+  .foot {
+    width: 50%;
+    margin-top: 50px;
+    text-align: center;
+  }
+  p {
+    margin: 10px;
+  }
+
+  .edit_container,
+  .quill-editor {
+    height: 300px;
+  }
+
+  .ql-snow .ql-picker.ql-size .ql-picker-label::before,
+  .ql-snow .ql-picker.ql-size .ql-picker-item::before {
+    content: '14px';
+  }
+
+  .ql-snow .ql-picker.ql-size .ql-picker-label[data-value='small']::before,
+  .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='small']::before {
+    content: '10px';
+  }
+  .ql-snow .ql-picker.ql-size .ql-picker-label[data-value='large']::before,
+  .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='large']::before {
+    content: '18px';
+  }
+  .ql-snow .ql-picker.ql-size .ql-picker-label[data-value='huge']::before,
+  .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='huge']::before {
+    content: '32px';
+  }
+
+  .ql-snow .ql-picker.ql-header .ql-picker-label::before,
+  .ql-snow .ql-picker.ql-header .ql-picker-item::before {
+    content: '文本';
+  }
+  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value='1']::before,
+  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value='1']::before {
+    content: '标题1';
+  }
+  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value='2']::before,
+  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value='2']::before {
+    content: '标题2';
+  }
+  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value='3']::before,
+  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value='3']::before {
+    content: '标题3';
+  }
+  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value='4']::before,
+  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value='4']::before {
+    content: '标题4';
+  }
+  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value='5']::before,
+  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value='5']::before {
+    content: '标题5';
+  }
+  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value='6']::before,
+  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value='6']::before {
+    content: '标题6';
+  }
+
+  .ql-snow .ql-picker.ql-font .ql-picker-label::before,
+  .ql-snow .ql-picker.ql-font .ql-picker-item::before {
+    content: '标准字体';
+  }
+  .ql-snow .ql-picker.ql-font .ql-picker-label[data-value='serif']::before,
+  .ql-snow .ql-picker.ql-font .ql-picker-item[data-value='serif']::before {
+    content: '衬线字体';
+  }
+  .ql-snow .ql-picker.ql-font .ql-picker-label[data-value='monospace']::before,
+  .ql-snow .ql-picker.ql-font .ql-picker-item[data-value='monospace']::before {
+    content: '等宽字体';
+  }
+</style>

src/views/video/index.vue

@@ -0,0 +1,370 @@
+<template>
+  <div class="department-management-container">
+    <vab-query-form>
+      <vab-query-form-left-panel :span="12">
+        <!-- 添加暂时不要求 -->
+        <el-button icon="el-icon-plus" type="primary" @click="handleEdit">
+          添加
+        </el-button>
+      </vab-query-form-left-panel>
+      <vab-query-form-right-panel :span="12">
+        <el-form :inline="true" :model="queryForm" @submit.native.prevent>
+          <el-form-item>
+            <el-input
+              v-model.trim="queryForm.title"
+              clearable
+              placeholder="请输入课程名称"
+              @keyup.enter.native="queryData"
+            />
+          </el-form-item>
+          <el-form-item>
+            <el-button icon="el-icon-search" type="primary" @click="queryData">
+             搜索
+            </el-button>
+          </el-form-item>
+        </el-form>
+      </vab-query-form-right-panel>
+    </vab-query-form>
+    <!-- 列表表格 -->
+    <el-table v-loading="listLoading" border :data="list" default-expand-all>
+      <el-table-column
+        align="center"
+        label="序号"
+        show-overflow-tooltip
+        type="index"
+        width="60"
+      />
+      <el-table-column align="center" label="图片">
+        <template #default="{ row }">
+          <el-image
+            v-if="row.thumb_resource != null"
+            :src="row.thumb_resource.url"
+          />
+          <div v-else>--</div>
+        </template>
+      </el-table-column>
+      <el-table-column
+        align="center"
+        label="课程名称"
+        min-width="120"
+        prop="title"
+        show-overflow-tooltip
+      />
+      <el-table-column
+        align="center"
+        label="标签"
+        prop="labels"
+        show-overflow-tooltip
+      >
+        <template #default="{ row }">
+          <span v-if="row.labels.length == 0">--</span>
+          <el-tag
+            v-for="(item, index) in row.labels"
+            :key="index"
+            type="success"
+          >
+            {{ item }}
+          </el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column
+        align="center"
+        label="课程类型"
+        show-overflow-tooltip
+      >
+        <template #default="{ row }">
+          <el-tag v-if="row.category != null">{{ row.category.name }}</el-tag>
+          <span v-else>--</span>
+        </template>
+      </el-table-column>
+      <el-table-column
+        align="center"
+        label="视频数量"
+        prop="video_nums"
+        show-overflow-tooltip
+      />
+      <el-table-column
+        align="center"
+        label="是否推荐"
+        min-width="80"
+        prop="status"
+        show-overflow-tooltip
+      >
+        <template #default="{ row }">
+          <el-tag v-if="row.is_rec_text == '推荐'">
+            推荐
+          </el-tag>
+          <el-tag v-if="row.is_rec_text == '普通'" type="warning">
+            普通
+          </el-tag>
+        </template>
+      </el-table-column>
+      <!-- 可修改排序 -->
+      <!-- <el-table-column
+        align="center"
+        label="排序"
+        prop="sort"
+        show-overflow-tooltip
+      >
+        <template #default="{ row }">
+          <div class="edit">
+            <i
+              v-if="editForm.id == row.id && editStatus == 1"
+              class="el-icon-circle-close"
+              @click.stop="cancelSort(row)"
+            ></i>
+            <span
+              v-if="editForm.id !== row.id || editStatus == 0"
+              class="sort-num"
+            >
+              {{ row.sort }}
+            </span>
+
+            <el-input
+              v-if="editForm.id == row.id && editStatus == 1"
+              ref="getFocus"
+              v-model="row.sort"
+              class="input-sort"
+              @input="inputSort"
+            />
+
+            <i
+              v-if="editForm.id !== row.id || editStatus == 0"
+              class="el-icon-edit"
+              @click="changeSort(row)"
+            ></i>
+            <i
+              v-if="editForm.id == row.id && editStatus == 1"
+              class="el-icon-circle-check"
+              @click.stop="sureChange"
+            ></i>
+          </div>
+        </template>
+      </el-table-column> -->
+      <el-table-column
+        align="center"
+        label="创建时间"
+        min-width="100"
+        prop="created_at"
+        show-overflow-tooltip
+      />
+      <el-table-column
+        align="center"
+        label="状态"
+        min-width="80"
+        prop="status"
+        show-overflow-tooltip
+      >
+        <template #default="{ row }">
+          <el-tag v-if="row.status == 1">
+           正常
+          </el-tag>
+          <el-tag v-if="row.status == 0" type="danger">
+            禁用
+          </el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column
+        align="center"
+        fixed="right"
+        label="操作"
+        min-width="200"
+      >
+        <template #default="{ row }">
+          <el-button type="text" @click="courseVideo(row)">
+            视频管理
+          </el-button>
+          <!-- <el-button type="text" @click="handleEdit(row)">
+            编辑
+          </el-button> -->
+          <el-button type="text" @click="courseDetail(row)">
+            详情
+          </el-button>
+          <el-button type="text" @click="handleDelete(row)">
+            删除
+          </el-button>
+        </template>
+      </el-table-column>
+      <template #empty>
+        <!-- <el-image
+          class="vab-data-empty"
+          :src="require('@/assets/empty_images/data_empty.png')"
+        /> -->
+      </template>
+    </el-table>
+    <el-pagination
+      background
+      :current-page="queryForm.page"
+      :layout="layout"
+      :page-size="queryForm.per_page"
+      :page-sizes="[15, 20, 30, 40, 50, 100]"
+      :total="total"
+      @current-change="handleCurrentChange"
+      @size-change="handleSizeChange"
+    />
+    <edit ref="edit" @fetch-data="getCourseList" />
+  </div>
+</template>
+
+<script>
+  import { courseList, doDelete, doEdit } from './api/index'
+  import Edit from './components/CourseManage.vue'
+
+  export default {
+    name: 'CourseManage',
+    components: { Edit },
+    data() {
+      return {
+        //修改排序
+        editForm: {},
+        oldSort: 0,
+        editStatus: 0, //排序编辑状态 0为正常 1显示输入框
+        //课程列表数组
+        list: [],
+        listLoading: true,
+        layout: 'total, sizes, prev, pager, next, jumper',
+        total: 0,
+        queryForm: {
+          page: 1,
+          per_page: 15,
+          title: '',
+        },
+      }
+    },
+    created() {
+      this.getCourseList()
+    },
+    methods: {
+      //修改排序事件
+      cancelSort(row) {
+        this.editStatus = 0
+        row.sort = this.oldSort
+      },
+      //修改排序事件
+      async changeSort(row) {
+        console.log('1111111111')
+        this.editStatus = 1
+        this.editForm = row
+        this.oldSort = row.sort
+        this.$nextTick(() => {
+          this.$refs['getFocus'].focus()
+        })
+        //await doEdit(this.editForm)
+      },
+      //修改排序
+      inputSort(e) {
+        console.log(e, '000000000')
+        this.editForm.sort = e
+      },
+      // 修改排序报错
+      async sureChange() {
+        this.editStatus = 0
+        console.log(this.editForm, '课程列表中修改排序传递参数')
+        if (this.oldSort !== this.editForm.sort) {
+          const { message } = await doEdit(this.editForm)
+          console.log(message, 'message')
+          // location.reload()
+          this.$baseMessage(
+            message,
+            'success',
+            false,
+            'vab-hey-message-success'
+          )
+          this.getList()
+        } else {
+          return
+        }
+      },
+      //跳转视频列表页面
+      courseVideo(row) {
+        console.log(row.id, '课程列表页跳转到视频列表页row.id就是课程id')
+        this.$router.push({
+          path: '/course/video',
+          query: {
+            id: row.id,
+          },
+        })
+      },
+      // 跳转到课程详情页面
+      courseDetail(row) {
+        console.log(row.id, '课程列表页跳转到课程详情页row.id就是课程id')
+        this.$router.push({
+          path: '/course/detail',
+          query: {
+            id: row.id,
+          },
+        })
+      },
+      // 打开到添加编辑弹窗--》并传递参数到编辑中  暂时不要求有
+      handleEdit(row) {
+        console.log(row, row.id, '点击000')
+        if (row.id) {
+          this.$refs['edit'].showEdit(row)
+        } else {
+          this.$refs['edit'].showEdit()
+        }
+      },
+      // 删除
+      handleDelete(row) {
+        if (row.id) {
+          this.$baseConfirm('你确定要删除当前项吗', null, async () => {
+            const { message } = await doDelete({ id: row.id })
+            this.$baseMessage(
+              message,
+              'success',
+              false,
+              'vab-hey-message-success'
+            )
+            await this.getCourseList()
+          })
+        }
+      },
+      handleSizeChange(val) {
+        this.queryForm.per_page = val
+        this.getCourseList()
+      },
+      handleCurrentChange(val) {
+        this.queryForm.page = val
+        this.getCourseList()
+      },
+      queryData() {
+        this.queryForm.page = 1
+        this.getCourseList()
+      },
+      // 获取课程列表数据
+      async getCourseList() {
+        this.listLoading = true
+        const { data } = await courseList(this.queryForm)
+        console.log(data, '课程列表信息')
+        const { list, meta } = data
+        this.list = list
+        this.total = meta.pagination.total
+        this.listLoading = false
+      },
+    },
+  }
+</script>
+<style scoped lang="scss">
+  /* 修改排序样式 */
+  .edit {
+    display: inline-block;
+    width: 110px;
+  }
+  .input-sort {
+    display: inline-block;
+    width: 80px;
+    margin-right: 10px;
+    margin-left: 10px;
+    border: none;
+  }
+  .sort-num {
+    display: inline-block;
+    margin-right: 10px;
+  }
+  .el-icon-edit,
+  .el-icon-circle-check,
+  .el-icon-circle-close {
+    color: #1890ff;
+    cursor: pointer;
+  }
+</style>