| 提交 | 用户 | 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> | |
