学习文件

xiangpei

2024-05-16 fc902d4ba26ebebf2de18ead235aaafa37f44fcc

学习文件

 src/api/online-study.js

@@ -4,5 +4,6 @@
  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')
  list: () => post('/api/admin/online/study/list'),
  remove: (data) => post('/api/admin/online/study/remove', data)
}

 src/components/UploadC.vue

@@ -5,12 +5,17 @@
        :show-file-list="true"
        :limit="uploadNum"
        multiple
        :file-list="fileUrl"
        :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>
      <div v-if="fileUrl && fileUrl.length > 0 && uploadNum === 1">
        <video class="returnShow" v-if="fileType === 'video'" :src="'/api/files/' + fileUrl[0].url"></video>
        <img class="returnShow" v-if="fileType === 'img'" :src="'/api/files/' + fileUrl[0].url"/>
      </div>
    </el-upload>
  </div>
</template>
@@ -24,31 +29,42 @@
      default: 1,
      type: Number
    },
    fileType: {
      required: false,
      type: String
    },
    fileSizeLimitM: {
      required: false,
      default: 1,
      type: Number
    },
    fileUrl: {
      required: true,
      default: [],
      type: Array
    }
  },
  data() {
    return {
      uploadUrl: "http://localhost:8085/api/upload/upload",
      fileUrl: "",
    }
  },
  methods: {
    clearFile() {
      this.fileUrl = []
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${ file.name }？`);
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
      this.$emit('removeFile', this.fileUrl, file.name);
    },
    handleUploadSuccess(res, file) {
      this.$emit('getUploadUrl', file.response);
      this.fileUrl.push(res.response)
      this.$emit('getUploadUrl', this.fileUrl);
    },
    beforeUpload(file) {
      const limit = file.size / 1024 / 1024 < this.fileSizeLimitM;

      if (!limit) {
        this.$message.error(`上传文件大小不能超过 ${this.fileSizeLimitM}MB!`);
      }
@@ -59,6 +75,10 @@
</script>

<style scoped>
.returnShow {
  width: 300px;
  height: 200px;
}
.avatar-uploader {
  text-align: center;
  width: 100%

 src/router.js

@@ -106,7 +106,7 @@
        path: 'type',
        component: () => import('@/views/onlineStudy/type'),
        name: 'Type',
        meta: { title: '视频分类', noCache: true }
        meta: { title: '学习类型', noCache: true }
      },
      {
        path: 'file',

 src/views/onlineStudy/file.vue

@@ -3,7 +3,17 @@
    <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-input v-model="searchForm.subject" size="small" placeholder="主题内容" clearable @clear="page"></el-input>
        </el-form-item>
        <el-form-item label="学习类型">
          <el-select v-model="searchForm.belongType" clearable @clear="page" @change="page" placeholder="学习类型">
            <el-option
              v-for="type in typeList"
              :key="type.id"
              :label="type.typeName"
              :value="type.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="page" size="small">查询</el-button>
@@ -11,24 +21,47 @@
      </el-form>
      <div>
        <el-button type="primary" @click="handlerAdd" size="small">添加</el-button>
        <el-button type="danger" @click="batchRemove" size="small" style="margin-left: 5px">删除</el-button>
      </div>
    </div>
    <el-table
      :data="tableData"
      border
      @selection-change="handleSelectionChange"
      style="width: 100%">
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column
        fixed
        prop="subject"
        label="主题 ">
      </el-table-column>
      <el-table-column
        prop="typeName"
        label="分类名称">
        label="学习类型">
      </el-table-column>
      <el-table-column
        prop="orderNum"
        label="排序值">
        prop="contentType"
        :formatter="typeFormatter"
        label="文件类型">
      </el-table-column>
      <el-table-column
        prop="createTime"
        label="创建时间">
        label="文件内容"
      >
        <template slot-scope="scope">
          <video v-if="scope.row.contentType === 'video'" :src="'/api/files/' + scope.row.contentUrl.url" class="showContent"/>
          <img v-if="scope.row.contentType === 'img'" :src="'/api/files/' + scope.row.contentUrl.url" class="showContent"/>
          <el-link type="primary" v-if="scope.row.contentType === 'pdf'" :src="'/api/files/' + scope.row.contentUrl.url" class="showContent">点击查看</el-link>
        </template>
      </el-table-column>
      <el-table-column
        prop="attachment"
        label="附件">
        <template slot-scope="scope">
          <el-link type="primary" v-for="item in scope.row.attachment">{{item.name}}</el-link>
        </template>
      </el-table-column>
      <el-table-column
        fixed="right"
@@ -46,60 +79,78 @@
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="searchForm.pageNum" :limit.sync="searchForm.pageSize"
                @pagination="page"/>

    <el-dialog
      title="添加文件"
      title="添加学习内容"
      :visible.sync="open"
      width="600px"
      :close-on-click-modal="false"
      :before-close="handleClose">
      <el-form label-position="top" label-width="80px" ref="form" :rules="rules" :model="form">
      <el-form label-position="left" label-width="120px" ref="form" :rules="rules" :model="form">
        <el-form-item label="主题" prop="subject">
          <el-input v-model="form.subject" placeholder="主题内容"></el-input>
        </el-form-item>
        <el-form-item label="所属类型" prop="belongType">
          <el-input v-model="form.belongType" placeholder="所属类型"></el-input>
        <el-form-item label="学习类型" prop="belongType">
          <el-select v-model="form.belongType" placeholder="学习类型">
            <el-option
              v-for="type in typeList"
              :key="type.id"
              :label="type.typeName"
              :value="type.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="文件类型" prop="contentType">
          <el-input v-model="form.contentType" placeholder="不同类型的文件阅览方式不同，多余文件请以附件形式上传"></el-input>
          <el-select v-model="form.contentType" placeholder="不同类型的文件阅览方式不同，多余文件请以附件形式上传">
            <el-option label="视频" value="video"></el-option>
            <el-option label="PDF" value="pdf"></el-option>
            <el-option label="图片" value="img"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="上传文件" prop="contentUrl">
          <upload :fileSizeLimitM="1024" :uploadNum="1" @getUploadUrl="getUploadUrl" />
        <el-form-item label="上传文件(一个)" prop="contentUrl">
          <upload v-show="form.contentType" ref="upload" :fileUrl="fileContentUrl" :fileType="form.contentType" :fileSizeLimitM="1024" :uploadNum="1" @getUploadUrl="getUploadUrl" @removeFile="removeFile"/>
        </el-form-item>
        <el-form-item label="附件" prop="attachment">
          <upload :fileSizeLimitM="1024" :uploadNum="3" @getUploadUrl="getUploadAttachmentUrl" />
        <el-form-item label="附件(最多3个)" prop="attachment">
          <upload :fileSizeLimitM="1024" :uploadNum="3" :fileUrl="form.attachment" @getUploadUrl="getUploadAttachmentUrl" @removeFile="removeAttachmentFile"/>
        </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>
        <el-button type="primary" @click="handlerSubmit">保 存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import OnlineStudyAPI from '@/api/online-study'
import StudyTypeAPI from '@/api/study-type'
import Upload from '@/components/UploadC'
export default {
  name: 'type',
  components: {Upload},
  components: {Upload, Pagination},
  computed: {
    fileContentUrl: function () {
      return this.form ? this.form.contentUrl ? [this.form.contentUrl] : [] : []
    }
  },
  data () {
    return {
      uploadAttachmentData: [],
      uploadData: {
        url: '',
        originalFilename: ''
      },
      ids: [],
      typeList: [],
      searchForm: {
        pageNum: 1,
        pageSize: 10,
        typeName: ''
      },
      total: 0,
      tableData: [],
      open: false,
      form: {
        typeName: '',
        orderNum: null
        contentType: 'video'
      },
      rules: {
        contentUrl: [
@@ -109,7 +160,7 @@
          { required: true, message: '请输入主题内容', trigger: 'blur' },
        ],
        belongType: [
          { required: true, message: '请选择所属类型', trigger: 'change' }
          { required: true, message: '请选择学习分类', trigger: 'change' }
        ],
        contentType: [
          { required: true, message: '请选择文件类型', trigger: 'change' }
@@ -118,23 +169,57 @@
    }
  },
  methods: {
    handleSelectionChange(val) {
      this.ids = val.map(item => item.id);
    },
    typeFormatter(row) {
      if (row.contentType === 'video') {
        return "视频"
      }
      if (row.contentType === 'img') {
        return "图片"
      }
      if (row.contentType === 'pdf') {
        return "PDF"
      }
    },
    clearFile() {
      this.form.contentUrl = null
      this.$refs.upload.clearFile()
    },
    removeFile() {
      this.form.contentUrl = null
    },
    removeAttachmentFile(fileList, fileName) {
      console.log(fileList, fileName, "dddddddd")
      this.form.attachment = fileList.filter(item => item.name !== fileName)
    },
    getUploadAttachmentUrl (uploadData) {
      this.form.attachment = uploadData.url
      this.uploadAttachmentData = uploadData
      this.form.attachment = uploadData
    },
    getUploadUrl(uploadData) {
      this.form.contentUrl = uploadData.url
      this.uploadData = uploadData
      this.form.contentUrl = uploadData[0]
    },
    remove (id) {
      OnlineStudyAPI.remove(id).then(res => {
      OnlineStudyAPI.remove([id]).then(res => {
        if (res.code === 1) {
          this.$message.success('删除成功')
        }
      })
    },
    batchRemove () {
      if (this.ids.length < 1) {
        this.$message.warning("请选择要删除的数据")
      }
      OnlineStudyAPI.remove(this.ids).then(res => {
        if (res.code === 1) {
          this.$message.success('删除成功')
          this.ids = []
        }
      })
    },
    getTitle (typeName) {
      return '确定要删除' + typeName + '这个分类吗？'
      return '确定要删除' + typeName + '这个文件吗？'
    },
    handlerSubmit () {
      this.$refs['form'].validate((valid) => {
@@ -161,6 +246,7 @@
    },
    handleClose () {
      this.open = false
      this.form = {}
    },
    handlerAdd () {
      this.form = {}
@@ -170,23 +256,37 @@
      OnlineStudyAPI.page(this.searchForm).then(res => {
        if (res.code === 1) {
          this.tableData = res.response
          this.total = res.total
        }
      })
    },
    handleUpdate (row) {
      this.form.typeName = row.typeName
      this.form.orderNum = row.orderNum
      this.form.id = row.id
      this.form.contentType = row.contentType
      this.form.contentUrl = row.contentUrl
      this.form.attachment = row.attachment
      this.form.subject = row.subject
      this.form.belongType = row.belongType
      console.log(row, "dfddddddd")
      this.open = true
    }
  },
  mounted () {
    this.page()
    StudyTypeAPI.list().then(res => {
      if (res.code === 1) {
        this.typeList = res.response
      }
    })
  }
}
</script>

<style scoped>
.showContent {
  width: 200px;
  height: 100px;
}
.warp {
  margin: 40px 10px;
}