视频分类初始话

xiangpei

2024-05-13 ce1f77d4a12083a6f94324d764b46e085e90d36e

视频分类初始话

 src/api/video-type.js

New file
@@ -0,0 +1,8 @@
import { post, get } from '@/utils/request'

export default {
  page: query => get('/api/admin/study/type/page', query),
  add: data => post('/api/admin/study/type', data),
  update: data => post('/api/admin/study/type/edit', data),
  list: () => post('/api/admin/study/type/list')
}

 src/router.js

@@ -87,6 +87,25 @@
    ]
  },
  {
    path: '/online/study',
    component: Layout,
    name: 'OnLineStudy',
    meta: {
      title: '在线学习',
      icon: 'exam'
    },
    children: [
      {
        path: 'video/type',
        component: () => import('@/views/onlineStudy/video/type'),
        name: 'VideoType',
        meta: {
          title: '视频分类'
        }
      }
    ]
  },
  {
    path: '/exam',
    component: Layout,
    name: 'ExamPage',

 src/views/onlineStudy/video/type.vue

New file
@@ -0,0 +1,130 @@
<template>
  <div class="warp">
    <div class="search">
      <el-form :inline="true" :model="searchForm" class="demo-form-inline">
        <el-form-item label="分类名称">
          <el-input v-model="searchForm.typeName" size="small" placeholder="分类名称"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="page" size="small">查询</el-button>
        </el-form-item>
      </el-form>
      <div>
        <el-button type="primary" @click="handlerAdd" size="small">添加</el-button>
      </div>
    </div>
    <el-table
      :data="tableData"
      border
      style="width: 100%">
      <el-table-column
        fixed
        prop="typeName"
        label="分类名称">
      </el-table-column>
      <el-table-column
        prop="orderNum"
        label="排序值">
      </el-table-column>
      <el-table-column
        prop="createTime"
        label="创建时间">
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        width="140">
        <template slot-scope="scope">
          <el-button @click="handleUpdate(scope.row)" type="text" size="small">修改</el-button>
          <el-button type="text" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
      title="提示"
      :visible.sync="open"
      width="300"
      :before-close="handleClose">
      <el-form label-position="top" label-width="80px" :rules="rules" :model="form">
        <el-form-item label="分类名称" prop="typeName">
          <el-input v-model="form.typeName"></el-input>
        </el-form-item>
        <el-form-item label="排序值" prop="orderNum">
          <el-input v-model="form.orderNum" type="number" placeholder=""排序值></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="open = false">取 消</el-button>
        <el-button type="primary" @click="handlerSubmit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import VideoTypeAPI from '@/api/video-type'
export default {
  name: 'type',
  data () {
    return {
      searchForm: {
        pageNum: 1,
        pageSize: 10,
        typeName: ''
      },
      tableData: [],
      form: {
        typeName: '',
        orderNum: null,
        open: false
      },
      rules: {
        typeName: [
          { required: true, message: '请输入分类名称', trigger: 'blur' },
          { min: 0, max: 40, message: '长度在 0 到 40 个字符', trigger: 'blur' }
        ],
        orderNum: [
          { required: true, message: '请输入分类排序值', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    handlerSubmit () {

    },
    handleClose () {
      this.open = false
    },
    handlerAdd () {
      this.form = {}
      this.open = true
    },
    page () {
      VideoTypeAPI.page(this.searchForm).then(res => {
        if (res.code === 1) {
          this.tableData = res.response
        }
      })
    },
    handleUpdate (row) {
      this.form.typeName = row.typeName
      this.form.orderNum = row.orderNum
      this.open = true
    }
  },
  mounted () {
    this.page()
  }
}
</script>

<style scoped>
.warp {
  margin: 40px 10px;
}
.search {
  margin-top: 10px;
}
</style>