From 8c3eaeddeff2c9c5a92352e6bf830e5000ff5882 Mon Sep 17 00:00:00 2001
From: xiangpei <xiangpei@timesnew.cn>
Date: 星期二, 03 十二月 2024 12:16:11 +0800
Subject: [PATCH] 附件最多上传10个
---
src/views/onlineStudy/file.vue | 80 ++++++++++++++++++++++++++++------------
1 files changed, 56 insertions(+), 24 deletions(-)
diff --git a/src/views/onlineStudy/file.vue b/src/views/onlineStudy/file.vue
index 9acc54a..77cd704 100644
--- a/src/views/onlineStudy/file.vue
+++ b/src/views/onlineStudy/file.vue
@@ -31,26 +31,29 @@
</el-table-column>
<el-table-column prop="contentType" :formatter="typeFormatter" label="鏂囦欢绫诲瀷">
</el-table-column>
- <el-table-column label="鏂囦欢鍐呭">
- <template slot-scope="scope">
+ <el-table-column label="鏂囦欢鍐呭" width="240">
+ <template slot-scope="scope" v-if="scope.row.contentUrl">
<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-image v-if="scope.row.contentType === 'img'" :src="'/api/files/' + scope.row.contentUrl.url"
+ class="showContent"></el-image>
+ <!-- <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'" class="showContent"
+ @click="checkPdf('/api/files/' + scope.row.contentUrl.url)">鐐瑰嚮鏌ョ湅</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>
+ <div v-for="item in scope.row.attachment" :key="item.url">
+ <el-link type="primary" :href="'/api/upload/download?url=' + item.url +'&fileName=' + item.name" >{{ item.name }}</el-link>
+ </div>
</template>
</el-table-column>
<el-table-column fixed="right" label="鎿嶄綔" width="140">
<template slot-scope="scope">
<el-button @click="handleUpdate(scope.row)" type="primary" size="small"
style="margin-right: 5px">淇敼</el-button>
-
<el-popconfirm :title="getTitle(scope.row.typeName)" @confirm="remove(scope.row.id)">
<el-button slot="reference" type="danger" size="small">鍒犻櫎</el-button>
</el-popconfirm>
@@ -81,11 +84,11 @@
</el-select>
</el-form-item>
<el-form-item label="涓婁紶鏂囦欢(涓�涓�)" prop="contentUrl">
- <upload v-show="form.contentType" ref="upload" :fileUrl="form.contentUrl" :fileType="form.contentType"
- :fileSizeLimitM="1024" :uploadNum="1" @getUploadUrl="getUploadUrl" @removeFile="removeFile" />
+ <upload v-if="form.contentType" ref="upload" :fileUrl="form.contentUrl" :fileType="form.contentType"
+ :fileSizeLimitM="10" :uploadNum="1" @getUploadUrl="getUploadUrl" @removeFile="removeFile" />
</el-form-item>
- <el-form-item label="闄勪欢(鏈�澶�3涓�)" prop="attachment">
- <upload :fileSizeLimitM="1024" :uploadNum="3" :fileUrl="form.attachment"
+ <el-form-item label="闄勪欢(鏈�澶�10涓�)" prop="attachment">
+ <upload :fileSizeLimitM="10" :uploadNum="10" :fileUrl="form.attachment"
@getUploadUrl="getUploadAttachmentUrl" @removeFile="removeAttachmentFile" />
</el-form-item>
</el-form>
@@ -93,6 +96,10 @@
<el-button @click="open = false">鍙� 娑�</el-button>
<el-button type="primary" @click="handlerSubmit">淇� 瀛�</el-button>
</span>
+ </el-dialog>
+
+ <el-dialog title="PDF鏌ョ湅" :visible.sync="pdfDialog" width="80%" :before-close="closePdfDialog">
+ <vue-office-pdf :src="pdf" @rendered="rendered" style="min-height: 400px; max-height: 800px;"/>
</el-dialog>
</div>
</template>
@@ -102,9 +109,11 @@
import OnlineStudyAPI from '@/api/online-study';
import StudyTypeAPI from '@/api/study-type';
import Upload from '@/components/UploadC';
+
+import VueOfficePdf from '@vue-office/pdf';
export default {
name: 'type',
- components: { Upload, Pagination },
+ components: { Upload, Pagination, VueOfficePdf },
computed: {
fileContentUrl: () => {
return this.form ? this.form.contentUrl ? [this.form.contentUrl] : [] : [];
@@ -112,17 +121,19 @@
},
data() {
return {
+ pdf: '',
dialogTitle: '娣诲姞瀛︿範鍐呭',
ids: [],
typeList: [],
searchForm: {
pageNum: 1,
- pageSize: 10,
+ pageSize: 5,
typeName: ''
},
total: 0,
tableData: [],
open: false,
+ pdfDialog: false,
form: {
contentType: 'video',
subject: '',
@@ -132,9 +143,9 @@
temp: []
},
rules: {
- contentUrl: [
- { required: true, message: '璇蜂笂浼犳枃浠�', trigger: 'blur' },
- ],
+ // contentUrl: [
+ // { required: true, message: '璇蜂笂浼犳枃浠�', trigger: 'blur' },
+ // ],
subject: [
{ required: true, message: '璇疯緭鍏ヤ富棰樺唴瀹�', trigger: 'blur' },
],
@@ -148,8 +159,17 @@
};
},
methods: {
+ checkPdf(url) {
+ this.pdf = url;
+ this.pdfDialog = true;
+ },
+ closePdfDialog() {
+ this.pdfDialog = false;
+ },
+ rendered() {
+
+ },
fileChange() {
- console.log(1111111)
this.form.contentUrl = [];
},
handleSelectionChange(val) {
@@ -177,15 +197,21 @@
this.form.attachment = fileList.filter(item => item.name !== fileName);
},
getUploadAttachmentUrl(uploadData) {
- this.form.attachment = uploadData;
+ if (uploadData) {
+ this.form.attachment = uploadData;
+ }
},
getUploadUrl(uploadData) {
- this.form.contentUrl = uploadData;
+ console.log("鏀跺埌锛�", uploadData)
+ if (uploadData) {
+ this.form.contentUrl = uploadData;
+ }
},
remove(id) {
OnlineStudyAPI.remove([id]).then(res => {
if (res.code === 1) {
this.$message.success('鍒犻櫎鎴愬姛');
+ this.page()
}
});
},
@@ -237,7 +263,7 @@
contentUrl: [],
attachment: [],
temp: []
- }
+ };
},
handleClose() {
this.open = false;
@@ -259,7 +285,7 @@
handleUpdate(row) {
this.form.id = row.id;
this.form.contentType = row.contentType;
- this.form.contentUrl = [row.contentUrl] || [];
+ this.form.contentUrl = row.contentUrl ? [row.contentUrl] : [];
this.form.attachment = row.attachment || [];
this.form.subject = row.subject;
this.form.belongType = row.belongType;
@@ -280,8 +306,9 @@
<style scoped>
.showContent {
- width: 200px;
- height: 100px;
+ width: 100%;
+ min-height: 80px;
+ object-fit: contain;
}
.warp {
@@ -291,4 +318,9 @@
.search {
margin-top: 10px;
}
+::v-deep .el-image__error {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+}
</style>
--
Gitblit v1.8.0