提交 | 用户 | age
|
746d4a
|
1 |
<template> |
J |
2 |
<BasicModal |
661db0
|
3 |
width="800px" |
962f90
|
4 |
:title="t('component.upload.preview')" |
3fcfac
|
5 |
class="upload-preview-modal" |
746d4a
|
6 |
v-bind="$attrs" |
J |
7 |
@register="register" |
|
8 |
:showOkBtn="false" |
|
9 |
> |
815250
|
10 |
<FileList :dataSource="fileListRef" :columns="columns" :actionColumn="actionColumn" /> |
746d4a
|
11 |
</BasicModal> |
J |
12 |
</template> |
|
13 |
<script lang="ts"> |
437692
|
14 |
import { defineComponent, watch, ref } from 'vue'; |
815250
|
15 |
// import { BasicTable, useTable } from '/@/components/Table'; |
3f6920
|
16 |
import FileList from './FileList.vue'; |
746d4a
|
17 |
import { BasicModal, useModalInner } from '/@/components/Modal'; |
661db0
|
18 |
import { previewProps } from './props'; |
3f6920
|
19 |
import { PreviewFileItem } from './typing'; |
661db0
|
20 |
import { downloadByUrl } from '/@/utils/file/download'; |
V |
21 |
import { createPreviewColumns, createPreviewActionColumn } from './data'; |
dc09de
|
22 |
import { useI18n } from '/@/hooks/web/useI18n'; |
05329c
|
23 |
import { isArray } from '/@/utils/is'; |
3f6920
|
24 |
|
746d4a
|
25 |
export default defineComponent({ |
815250
|
26 |
components: { BasicModal, FileList }, |
661db0
|
27 |
props: previewProps, |
49e72a
|
28 |
emits: ['list-change', 'register', 'delete'], |
746d4a
|
29 |
setup(props, { emit }) { |
J |
30 |
const [register, { closeModal }] = useModalInner(); |
962f90
|
31 |
const { t } = useI18n(); |
dc09de
|
32 |
|
746d4a
|
33 |
const fileListRef = ref<PreviewFileItem[]>([]); |
J |
34 |
watch( |
|
35 |
() => props.value, |
|
36 |
(value) => { |
05329c
|
37 |
if (!isArray(value)) value = []; |
437692
|
38 |
fileListRef.value = value |
无 |
39 |
.filter((item) => !!item) |
|
40 |
.map((item) => { |
|
41 |
return { |
746d4a
|
42 |
url: item, |
J |
43 |
type: item.split('.').pop() || '', |
|
44 |
name: item.split('/').pop() || '', |
437692
|
45 |
}; |
无 |
46 |
}); |
746d4a
|
47 |
}, |
56a966
|
48 |
{ immediate: true }, |
746d4a
|
49 |
); |
661db0
|
50 |
|
746d4a
|
51 |
// 删除 |
J |
52 |
function handleRemove(record: PreviewFileItem) { |
|
53 |
const index = fileListRef.value.findIndex((item) => item.url === record.url); |
|
54 |
if (index !== -1) { |
49e72a
|
55 |
const removed = fileListRef.value.splice(index, 1); |
无 |
56 |
emit('delete', removed[0].url); |
746d4a
|
57 |
emit( |
661db0
|
58 |
'list-change', |
56a966
|
59 |
fileListRef.value.map((item) => item.url), |
746d4a
|
60 |
); |
J |
61 |
} |
|
62 |
} |
661db0
|
63 |
|
18ad1b
|
64 |
// // 预览 |
V |
65 |
// function handlePreview(record: PreviewFileItem) { |
|
66 |
// const { url = '' } = record; |
|
67 |
// createImgPreview({ |
|
68 |
// imageList: [url], |
|
69 |
// }); |
|
70 |
// } |
661db0
|
71 |
|
746d4a
|
72 |
// 下载 |
J |
73 |
function handleDownload(record: PreviewFileItem) { |
|
74 |
const { url = '' } = record; |
|
75 |
downloadByUrl({ url }); |
|
76 |
} |
661db0
|
77 |
|
746d4a
|
78 |
return { |
dc09de
|
79 |
t, |
746d4a
|
80 |
register, |
J |
81 |
closeModal, |
|
82 |
fileListRef, |
e15b4f
|
83 |
columns: createPreviewColumns() as any[], |
V |
84 |
actionColumn: createPreviewActionColumn({ handleRemove, handleDownload }) as any, |
746d4a
|
85 |
}; |
J |
86 |
}, |
|
87 |
}); |
|
88 |
</script> |
|
89 |
<style lang="less"> |
|
90 |
.upload-preview-modal { |
|
91 |
.ant-upload-list { |
|
92 |
display: none; |
|
93 |
} |
|
94 |
|
|
95 |
.ant-table-wrapper .ant-spin-nested-loading { |
|
96 |
padding: 0; |
|
97 |
} |
|
98 |
} |
|
99 |
</style> |