DeductShow.vue
3.44 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<template>
<BasicModal
v-bind="$attrs"
@register="register"
title="扣款单"
width="700px"
:bodyStyle="{ height: '240px' }"
@ok="handleOk"
>
<a-list item-layout="horizontal" :data-source="itemArray">
<template #renderItem="{ item }">
<a-list-item>
<a-list-item-meta>
<template #title>
<!-- <a :href="item.url" target="_blank" rel="noopener noreferrer">{{ item.name }}</a> -->
<!-- <a @click="openPic(item.url)">{{ item.name }}</a> -->
<a
v-if="isImageUrl(item.url)"
@click="openPic(item.url)"
style="display: flex; align-items: center"
>
<img
:src="item.url"
alt="Image"
style="max-width: 150px; max-height: 150px; margin-right: 10px"
/>
{{ item.name }}
</a>
<a v-else @click="openPic(item.url)">{{ item.name }}</a>
</template>
</a-list-item-meta>
</a-list-item>
</template>
</a-list>
</BasicModal>
</template>
<script lang="ts" setup>
import { BasicModal, useModalInner } from '@/components/Modal';
import { computed, ref } from 'vue';
import type { UploadProps, UploadChangeParam } from 'ant-design-vue';
import { InboxOutlined } from '@ant-design/icons-vue';
import { message } from 'ant-design-vue';
import { getInvoiceDeductUrlById } from '@/api/project/invoice';
import { view } from '@/utils/pdfShow';
interface Item {
name: string;
url: string;
}
const list = ref();
const id = ref();
const itemArray = ref<Item[]>([]);
const [register, { closeModal }] = useModalInner(async (data) => {
itemArray.value = [];
const res = await getInvoiceDeductUrlById({ id: data.data.id });
for (let item in res) {
const url = res[item];
const name = item;
// 将 name 和 url 放入对象并添加到数组中
itemArray.value.push({ name, url });
}
});
async function handleOk() {
itemArray.value = [];
closeModal();
}
// function openPic(url) {
// window.open('', '', '').document.write(`<!DOCTYPE html>
// <html>
// <body
// style="display: flex;
// justify-content: center;
// align-items: center;">
// <img src='${url}' width="500px" height="500px"/>
// </body>
// </html>`);
// }
// 新增的函数：判断 URL 是否为图片格式
function isImageUrl(url: string): boolean {
const imageExtensions = ['png', 'jpg', 'jpeg', 'gif', 'bmp', 'svg'];
const baseUrl = url.split('?')[0];
return imageExtensions.some((ext) => baseUrl.toLowerCase().endsWith(ext));
}
// 检查 URL 是否为 PDF 格式
function isPdfUrl(url: string): boolean {
return url.toLowerCase().endsWith('.pdf');
}
// 打开图片或 PDF
function openPic(url: string) {
const baseUrl = url.split('?')[0]; // 获取问号前的部分
if (isImageUrl(baseUrl)) {
window.open('', '', '').document.write(`<!DOCTYPE html>
<html>
<body style="display: flex; justify-content: center; align-items: center;">
<img src='${url}' width="500px" height="500px"/>
</body>
</html>`);
} else if (isPdfUrl(baseUrl)) {
view(url); // 新标签页打开 PDF
} else {
console.log('不支持的文件类型');
}
}
</script>