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