From b60049c4fd341d6a0d109408aa998e02528fc6d6 Mon Sep 17 00:00:00 2001 From: xiangpei <xiangpei@timesnew.cn> Date: 星期五, 17 五月 2024 14:49:48 +0800 Subject: [PATCH] pdf --- src/views/onlineStudy/file.vue | 77 +++++++++++++++++++++++++++----------- 1 files changed, 55 insertions(+), 22 deletions(-) diff --git a/src/views/onlineStudy/file.vue b/src/views/onlineStudy/file.vue index 38764a1..609f826 100644 --- a/src/views/onlineStudy/file.vue +++ b/src/views/onlineStudy/file.vue @@ -7,7 +7,7 @@ </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 v-for="item in typeList" :key="item.id" :label="item.typeName" :value="item.id"> </el-option> </el-select> </el-form-item> @@ -20,6 +20,8 @@ <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> @@ -31,12 +33,12 @@ </el-table-column> <el-table-column label="鏂囦欢鍐呭"> <template slot-scope="scope"> - <video v-if="scope.row.contentType === 'video'" :src="'/api/files/' + scope.row.contentUrl.url" + <video controls 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> + <el-link type="primary" v-if="scope.row.contentType === 'pdf'" + class="showContent" @click="checkPdf('/api/files/' + scope.row.contentUrl.url)">鐐瑰嚮鏌ョ湅</el-link> </template> </el-table-column> <el-table-column prop="attachment" label="闄勪欢"> @@ -55,10 +57,11 @@ </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="娣诲姞瀛︿範鍐呭" :visible.sync="open" width="600px" :close-on-click-modal="false" + <el-dialog :title="dialogTitle" :visible.sync="open" width="600px" :close-on-click-modal="false" :before-close="handleClose"> <el-form label-position="left" label-width="120px" ref="form" :rules="rules" :model="form"> <el-form-item label="涓婚" prop="subject"> @@ -66,19 +69,19 @@ </el-form-item> <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 v-for="item in typeList" :key="item.id" :label="item.typeName" :value="item.id"> </el-option> </el-select> </el-form-item> <el-form-item label="鏂囦欢绫诲瀷" prop="contentType"> - <el-select v-model="form.contentType" placeholder="涓嶅悓绫诲瀷鐨勬枃浠堕槄瑙堟柟寮忎笉鍚岋紝澶氫綑鏂囦欢璇蜂互闄勪欢褰㈠紡涓婁紶"> + <el-select v-model="form.contentType" placeholder="涓嶅悓绫诲瀷鐨勬枃浠堕槄瑙堟柟寮忎笉鍚岋紝澶氫綑鏂囦欢璇蜂互闄勪欢褰㈠紡涓婁紶" @change="fileChange"> <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 v-show="form.contentType" ref="upload" :fileUrl="fileContentUrl" :fileType="form.contentType" + <upload v-show="form.contentType" ref="upload" :fileUrl="form.contentUrl" :fileType="form.contentType" :fileSizeLimitM="1024" :uploadNum="1" @getUploadUrl="getUploadUrl" @removeFile="removeFile" /> </el-form-item> <el-form-item label="闄勪欢(鏈�澶�3涓�)" prop="attachment"> @@ -99,6 +102,7 @@ import OnlineStudyAPI from '@/api/online-study'; import StudyTypeAPI from '@/api/study-type'; import Upload from '@/components/UploadC'; + export default { name: 'type', components: { Upload, Pagination }, @@ -109,18 +113,25 @@ }, data() { return { + dialogTitle: '娣诲姞瀛︿範鍐呭', ids: [], typeList: [], searchForm: { pageNum: 1, - pageSize: 10, + pageSize: 5, typeName: '' }, total: 0, tableData: [], open: false, + pdfDialog: false, form: { - contentType: 'video' + contentType: 'video', + subject: '', + belongType: 2, + contentUrl: [], + attachment: [], + temp: [] }, rules: { contentUrl: [ @@ -139,6 +150,15 @@ }; }, methods: { + checkPdf(url) { + window.open('/#/online/study/pdf/view?pdfUrl=' + url, '_blank') + }, + closePdfDialog() { + this.pdfDialog = false; + }, + fileChange() { + this.form.contentUrl = []; + }, handleSelectionChange(val) { this.ids = val.map(item => item.id); }, @@ -154,21 +174,20 @@ } }, clearFile() { - this.form.contentUrl = null; + this.form.contentUrl = []; this.$refs.upload.clearFile(); }, removeFile() { - this.form.contentUrl = null; + this.form.contentUrl = []; }, removeAttachmentFile(fileList, fileName) { - console.log(fileList, fileName, "dddddddd"); this.form.attachment = fileList.filter(item => item.name !== fileName); }, getUploadAttachmentUrl(uploadData) { this.form.attachment = uploadData; }, getUploadUrl(uploadData) { - this.form.contentUrl = uploadData[0]; + this.form.contentUrl = uploadData; }, remove(id) { OnlineStudyAPI.remove([id]).then(res => { @@ -194,8 +213,11 @@ handlerSubmit() { this.$refs['form'].validate((valid) => { if (valid) { - if (this.form.id) { - OnlineStudyAPI.update(this.form).then(res => { + const temp = JSON.parse(JSON.stringify(this.form)); + // this.form.contentUrl = this.form.contentUrl[0] + temp.contentUrl = temp.contentUrl[0]; + if (temp.id) { + OnlineStudyAPI.update(temp).then(res => { if (res.code === 1) { this.$message.success('淇敼鎴愬姛'); this.open = false; @@ -203,7 +225,7 @@ } }); } else { - OnlineStudyAPI.add(this.form).then(res => { + OnlineStudyAPI.add(temp).then(res => { if (res.code === 1) { this.$message.success('娣诲姞鎴愬姛'); this.open = false; @@ -214,13 +236,24 @@ } }); }, + resetForm() { + this.form = { + contentType: 'video', + subject: '', + belongType: 2, + contentUrl: [], + attachment: [], + temp: [] + }; + }, handleClose() { this.open = false; - this.form = {}; + this.resetForm(); }, handlerAdd() { - this.form = {}; + this.resetForm(); this.open = true; + this.dialogTitle = '娣诲姞瀛︿範鍐呭'; }, page() { OnlineStudyAPI.page(this.searchForm).then(res => { @@ -233,11 +266,11 @@ handleUpdate(row) { this.form.id = row.id; this.form.contentType = row.contentType; - this.form.contentUrl = row.contentUrl; - this.form.attachment = row.attachment; + 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.dialogTitle = '淇敼瀛︿範鍐呭'; this.open = true; } }, -- Gitblit v1.8.0