|
|
@@ -26,42 +26,80 @@
|
|
|
<div class="image-panel panel">
|
|
|
<a-image
|
|
|
v-if="fileType(record) == '图片'"
|
|
|
- :width="40"
|
|
|
- :height="40"
|
|
|
+ :width="80"
|
|
|
+ :height="80"
|
|
|
:src="record.url"
|
|
|
/>
|
|
|
<PlayCircleFilled style="font-size: 30px;" v-else-if="fileType(record) == '视频'"/>
|
|
|
<FileTextFilled style="font-size: 30px;" v-else-if="fileType(record) == '文本'"/>
|
|
|
<FileWordFilled style="font-size: 30px;" v-else-if="fileType(record) == 'office'"/>
|
|
|
+ <FilePdfFilled style="font-size: 30px;" v-else-if="fileType(record) == 'pdf'"/>
|
|
|
<FileUnknownFilled style="font-size: 30px;" v-else/>
|
|
|
</div>
|
|
|
- <span>{{record.document}}{{fileType(record)}}</span>
|
|
|
+ <span>{{record.document}}</span>
|
|
|
</a-space>
|
|
|
</template>
|
|
|
<template v-if="column.key === 'op'">
|
|
|
<a-space :size="[10,10]">
|
|
|
- <a :href="record.url" target="_blank">预览</a>
|
|
|
+ <a target="_blank" v-if="fileType(record) !== '图片' && fileType(record) !== '其他'" @click="showModal(record,fileType(record))">预览</a>
|
|
|
+ <a :href="record.url" target="_blank">下载</a>
|
|
|
<a type="link" v-if="isShow" @click="deleteFiledeleteFileLink(record)">删除</a>
|
|
|
</a-space>
|
|
|
</template>
|
|
|
</template>
|
|
|
</a-table>
|
|
|
</div>
|
|
|
+ <a-modal v-model:open="open" title="预览" @ok="handleOk" :width="900">
|
|
|
+ <iframe
|
|
|
+ :src="`https://view.officeapps.live.com/op/view.aspx?src=${encodeURIComponent(at_url)}`"
|
|
|
+ frameborder="0"
|
|
|
+ style="height: 100vh; width: 100%"
|
|
|
+ ></iframe>
|
|
|
+ </a-modal>
|
|
|
+ <a-modal v-model:open="videoOpen" title="预览" @ok="handleOk" :width="900">
|
|
|
+ <video :src="at_url" style="width: 100%;" controls></video>
|
|
|
+ </a-modal>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script setup>
|
|
|
-import { PlayCircleFilled, FileTextFilled,FileWordFilled,FileUnknownFilled } from '@ant-design/icons-vue';
|
|
|
+
|
|
|
+import { PlayCircleFilled, FileTextFilled,FileWordFilled,FileUnknownFilled,FilePdfFilled } from '@ant-design/icons-vue';
|
|
|
import upload from '@/components/upload/index.vue'
|
|
|
import {defineProps, ref,onMounted,computed} from 'vue'
|
|
|
|
|
|
import { useRouter } from "vue-router";
|
|
|
import Api from '@/api/api'
|
|
|
import utils from '@/utils/utils'
|
|
|
+const open = ref(false);
|
|
|
+const videoOpen = ref(false);
|
|
|
+const at_url = ref('');
|
|
|
+const showModal = (record,type) => {
|
|
|
+ at_url.value = record.url;
|
|
|
+ switch (type) {
|
|
|
+ case 'office':
|
|
|
+ open.value = true;
|
|
|
+ break;
|
|
|
+ case 'pdf':
|
|
|
+ open.value = true;
|
|
|
+ break;
|
|
|
+ case '视频':
|
|
|
+ videoOpen.value = true;
|
|
|
+ break;
|
|
|
+ default:
|
|
|
+ break;
|
|
|
+ }
|
|
|
+
|
|
|
+};
|
|
|
+const handleOk = e => {
|
|
|
+ open.value = false;
|
|
|
+};
|
|
|
const fileType = (item)=>{
|
|
|
const isImage = item.url.match(/\.(jpg|jpeg|png|gif|svg)$/i) !== null;
|
|
|
const isVideo = item.url.match(/\.(mp4|avi|mkv|flv|mov)$/i) !== null;
|
|
|
const isText = item.url.match(/\.(txt|md|csv|xml)$/i) !== null;
|
|
|
const isOffice = item.url.match(/\.(doc|docx|xls|xlsx|ppt|pptx)$/i) !== null;
|
|
|
+ const isPdf = item.url.match(/\.(pdf)$/i) !== null;
|
|
|
+
|
|
|
if (isImage) {
|
|
|
return '图片';
|
|
|
} else if (isVideo) {
|
|
|
@@ -70,6 +108,8 @@ const fileType = (item)=>{
|
|
|
return '文本';
|
|
|
} else if (isOffice) {
|
|
|
return 'office';
|
|
|
+ }else if (isPdf) {
|
|
|
+ return 'pdf';
|
|
|
} else {
|
|
|
return '其他';
|
|
|
}
|
|
|
@@ -157,14 +197,14 @@ onMounted(()=>{
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
- width: 40px;
|
|
|
- height: 40px;
|
|
|
+ width: 80px;
|
|
|
+ height: 80px;
|
|
|
overflow: hidden;
|
|
|
|
|
|
}
|
|
|
.file-panel{
|
|
|
- height:40px;
|
|
|
- width: 40px;
|
|
|
+ height:80px;
|
|
|
+ width: 80px;
|
|
|
font-size: 12px;
|
|
|
}
|
|
|
</style>
|
