From 9a64cd50822ea7f82fa3e4fb98626fc2a0edc5a6 Mon Sep 17 00:00:00 2001 From: xiangpei <xiangpei@timesnew.cn> Date: 星期四, 16 五月 2024 12:00:45 +0800 Subject: [PATCH] 在线学习基本功能 --- src/views/onlineStudy/type.vue | 10 +- src/api/online-study.js | 8 ++ src/api/study-type.js | 0 src/components/UploadC.vue | 81 ++++++++++++++++++++ src/views/onlineStudy/file.vue | 65 +++++++++++---- src/router.js | 17 ++- 6 files changed, 152 insertions(+), 29 deletions(-) diff --git a/src/api/online-study.js b/src/api/online-study.js new file mode 100644 index 0000000..406ddcd --- /dev/null +++ b/src/api/online-study.js @@ -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') +} diff --git a/src/api/video-type.js b/src/api/study-type.js similarity index 100% rename from src/api/video-type.js rename to src/api/study-type.js diff --git a/src/components/UploadC.vue b/src/components/UploadC.vue new file mode 100644 index 0000000..5367c15 --- /dev/null +++ b/src/components/UploadC.vue @@ -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銆乵p4銆乵p3銆乸ng銆乯pg銆乯pge鏂囦欢锛屼笖涓嶈秴杩噞{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> diff --git a/src/router.js b/src/router.js index ad19511..27b67f9 100644 --- a/src/router.js +++ b/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 } } ] }, diff --git a/src/views/onlineStudy/video/type.vue b/src/views/onlineStudy/file.vue similarity index 62% copy from src/views/onlineStudy/video/type.vue copy to src/views/onlineStudy/file.vue index ac9128f..6788707 100644 --- a/src/views/onlineStudy/video/type.vue +++ b/src/views/onlineStudy/file.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 } diff --git a/src/views/onlineStudy/video/type.vue b/src/views/onlineStudy/type.vue similarity index 94% rename from src/views/onlineStudy/video/type.vue rename to src/views/onlineStudy/type.vue index ac9128f..eb35af5 100644 --- a/src/views/onlineStudy/video/type.vue +++ b/src/views/onlineStudy/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 } -- Gitblit v1.8.0