在线学习基本功能

xiangpei

2024-05-16 9a64cd50822ea7f82fa3e4fb98626fc2a0edc5a6

在线学习基本功能

 src/api/online-study.js

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

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

 src/api/study-type.js

 src/components/UploadC.vue

New file
@@ -0,0 +1,81 @@
<template>
  <div>
    <el-upload
        :action="uploadUrl"
        :show-file-list="true"
        :limit="uploadNum"
        multiple
        :on-remove="handleRemove"
        :before-remove="beforeRemove"
        :on-success="handleUploadSuccess"
        :before-upload="beforeUpload">
      <el-button size="small" type="primary">点击上传</el-button>
      <div slot="tip" class="el-upload__tip">只能上传pdf、mp4、mp3、png、jpg、jpge文件，且不超过{{fileSizeLimitM}}M</div>
    </el-upload>
  </div>
</template>

<script>
export default {
  name: "UploadC",
  props: {
    uploadNum: {
      required: false,
      default: 1,
      type: Number
    },
    fileSizeLimitM: {
      required: false,
      default: 1,
      type: Number
    }
  },
  data() {
    return {
      uploadUrl: "http://localhost:8085/api/upload/upload",
      fileUrl: "",
    }
  },
  methods: {
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${ file.name }？`);
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handleUploadSuccess(res, file) {
      this.$emit('getUploadUrl', file.response);
    },
    beforeUpload(file) {
      const limit = file.size / 1024 / 1024 < this.fileSizeLimitM;

      if (!limit) {
        this.$message.error(`上传文件大小不能超过 ${this.fileSizeLimitM}MB!`);
      }
      return limit;
    },
  }
}
</script>

<style scoped>
.avatar-uploader {
  text-align: center;
  width: 100%
}
.avatar-uploader-icon:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  text-align: center;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;

}
.avatar {
  display: block;
}
</style>

 src/router.js

@@ -100,14 +100,19 @@
      title: '在线学习',
      icon: 'exam'
    },
    alwaysShow: true,
    children: [
      {
        path: 'video/type',
        component: () => import('@/views/onlineStudy/video/type'),
        name: 'VideoType',
        meta: {
          title: '视频分类', noCache: true
        }
        path: 'type',
        component: () => import('@/views/onlineStudy/type'),
        name: 'Type',
        meta: { title: '视频分类', noCache: true }
      },
      {
        path: 'file',
        component: () => import('@/views/onlineStudy/file'),
        name: 'File',
        meta: { title: '学习文件', noCache: true }
      }
    ]
  },

 src/views/onlineStudy/file.vue

copy from src/views/onlineStudy/video/type.vue
copy to src/views/onlineStudy/file.vue
File was copied from src/views/onlineStudy/video/type.vue
@@ -2,8 +2,8 @@
  <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="分类名称" clearable @clear="page"></el-input>
        <el-form-item label="主题">
          <el-input v-model="searchForm.typeName" size="small" placeholder="主题内容" clearable @clear="page"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="page" size="small">查询</el-button>
@@ -48,16 +48,25 @@
    </el-table>

    <el-dialog
      title="添加视频分类"
      title="添加文件"
      :visible.sync="open"
      width="300px"
      width="600px"
      :before-close="handleClose">
      <el-form label-position="top" label-width="80px" ref="form" :rules="rules" :model="form">
        <el-form-item label="分类名称" prop="typeName">
          <el-input v-model="form.typeName"></el-input>
        <el-form-item label="主题" prop="subject">
          <el-input v-model="form.subject" placeholder="主题内容"></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 label="所属类型" prop="belongType">
          <el-input v-model="form.belongType" placeholder="所属类型"></el-input>
        </el-form-item>
        <el-form-item label="文件类型" prop="contentType">
          <el-input v-model="form.contentType" placeholder="不同类型的文件阅览方式不同，多余文件请以附件形式上传"></el-input>
        </el-form-item>
        <el-form-item label="上传文件" prop="contentUrl">
          <upload :fileSizeLimitM="1024" :uploadNum="1" @getUploadUrl="getUploadUrl" />
        </el-form-item>
        <el-form-item label="附件" prop="attachment">
          <upload :fileSizeLimitM="1024" :uploadNum="3" @getUploadUrl="getUploadAttachmentUrl" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
@@ -69,11 +78,18 @@
</template>

<script>
import VideoTypeAPI from '@/api/video-type'
import OnlineStudyAPI from '@/api/online-study'
import Upload from '@/components/UploadC'
export default {
  name: 'type',
  components: {Upload},
  data () {
    return {
      uploadAttachmentData: [],
      uploadData: {
        url: '',
        originalFilename: ''
      },
      searchForm: {
        pageNum: 1,
        pageSize: 10,
@@ -86,19 +102,32 @@
        orderNum: null
      },
      rules: {
        typeName: [
          { required: true, message: '请输入分类名称', trigger: 'blur' },
          { min: 0, max: 40, message: '长度在 0 到 40 个字符', trigger: 'blur' }
        contentUrl: [
          { required: true, message: '请上传文件', trigger: 'blur' },
        ],
        orderNum: [
          { required: true, message: '请输入分类排序值', trigger: 'blur' }
        subject: [
          { required: true, message: '请输入主题内容', trigger: 'blur' },
        ],
        belongType: [
          { required: true, message: '请选择所属类型', trigger: 'change' }
        ],
        contentType: [
          { required: true, message: '请选择文件类型', trigger: 'change' }
        ]
      }
    }
  },
  methods: {
    getUploadAttachmentUrl (uploadData) {
      this.form.attachment = uploadData.url
      this.uploadAttachmentData = uploadData
    },
    getUploadUrl(uploadData) {
      this.form.contentUrl = uploadData.url
      this.uploadData = uploadData
    },
    remove (id) {
      VideoTypeAPI.remove(id).then(res => {
      OnlineStudyAPI.remove(id).then(res => {
        if (res.code === 1) {
          this.$message.success('删除成功')
        }
@@ -111,7 +140,7 @@
      this.$refs['form'].validate((valid) => {
        if (valid) {
          if (this.form.id) {
            VideoTypeAPI.update(this.form).then(res => {
            OnlineStudyAPI.update(this.form).then(res => {
              if (res.code === 1) {
                this.$message.success('修改成功')
                this.open = false
@@ -119,7 +148,7 @@
              }
            })
          } else {
            VideoTypeAPI.add(this.form).then(res => {
            OnlineStudyAPI.add(this.form).then(res => {
              if (res.code === 1) {
                this.$message.success('添加成功')
                this.open = false
@@ -138,7 +167,7 @@
      this.open = true
    },
    page () {
      VideoTypeAPI.page(this.searchForm).then(res => {
      OnlineStudyAPI.page(this.searchForm).then(res => {
        if (res.code === 1) {
          this.tableData = res.response
        }

 src/views/onlineStudy/type.vue

File was renamed from src/views/onlineStudy/video/type.vue
@@ -69,7 +69,7 @@
</template>

<script>
import VideoTypeAPI from '@/api/video-type'
import StudyTypeAPI from '@/api/study-type'
export default {
  name: 'type',
  data () {
@@ -98,7 +98,7 @@
  },
  methods: {
    remove (id) {
      VideoTypeAPI.remove(id).then(res => {
      StudyTypeAPI.remove(id).then(res => {
        if (res.code === 1) {
          this.$message.success('删除成功')
        }
@@ -111,7 +111,7 @@
      this.$refs['form'].validate((valid) => {
        if (valid) {
          if (this.form.id) {
            VideoTypeAPI.update(this.form).then(res => {
            StudyTypeAPI.update(this.form).then(res => {
              if (res.code === 1) {
                this.$message.success('修改成功')
                this.open = false
@@ -119,7 +119,7 @@
              }
            })
          } else {
            VideoTypeAPI.add(this.form).then(res => {
            StudyTypeAPI.add(this.form).then(res => {
              if (res.code === 1) {
                this.$message.success('添加成功')
                this.open = false
@@ -138,7 +138,7 @@
      this.open = true
    },
    page () {
      VideoTypeAPI.page(this.searchForm).then(res => {
      StudyTypeAPI.page(this.searchForm).then(res => {
        if (res.code === 1) {
          this.tableData = res.response
        }