| | |
| | | </BasicModal> |
| | | </template> |
| | | <script lang="ts"> |
| | | import { defineComponent, watch, ref, unref } from 'vue'; |
| | | |
| | | import { defineComponent, watch, ref } from 'vue'; |
| | | // import { BasicTable, useTable } from '/@/components/Table'; |
| | | import FileList from './FileList'; |
| | | |
| | | import FileList from './FileList.vue'; |
| | | import { BasicModal, useModalInner } from '/@/components/Modal'; |
| | | import { previewProps } from './props'; |
| | | import { PreviewFileItem } from './types'; |
| | | import { PreviewFileItem } from './typing'; |
| | | import { downloadByUrl } from '/@/utils/file/download'; |
| | | |
| | | import { createPreviewColumns, createPreviewActionColumn } from './data'; |
| | | |
| | | import { useI18n } from '/@/hooks/web/useI18n'; |
| | | import { isArray } from '/@/utils/is'; |
| | | |
| | | export default defineComponent({ |
| | | components: { BasicModal, FileList }, |
| | | props: previewProps, |
| | | emits: ['list-change', 'register', 'delete'], |
| | | setup(props, { emit }) { |
| | | const [register, { closeModal }] = useModalInner(); |
| | | const { t } = useI18n(); |
| | |
| | | watch( |
| | | () => props.value, |
| | | (value) => { |
| | | fileListRef.value = []; |
| | | value.forEach((item) => { |
| | | fileListRef.value = [ |
| | | ...unref(fileListRef), |
| | | { |
| | | if (!isArray(value)) value = []; |
| | | fileListRef.value = value |
| | | .filter((item) => !!item) |
| | | .map((item) => { |
| | | return { |
| | | url: item, |
| | | type: item.split('.').pop() || '', |
| | | name: item.split('/').pop() || '', |
| | | }, |
| | | ]; |
| | | }); |
| | | }; |
| | | }); |
| | | }, |
| | | { immediate: true } |
| | | { immediate: true }, |
| | | ); |
| | | |
| | | // 删除 |
| | | function handleRemove(record: PreviewFileItem) { |
| | | const index = fileListRef.value.findIndex((item) => item.url === record.url); |
| | | if (index !== -1) { |
| | | fileListRef.value.splice(index, 1); |
| | | const removed = fileListRef.value.splice(index, 1); |
| | | emit('delete', removed[0].url); |
| | | emit( |
| | | 'list-change', |
| | | fileListRef.value.map((item) => item.url) |
| | | fileListRef.value.map((item) => item.url), |
| | | ); |
| | | } |
| | | } |
| | |
| | | register, |
| | | closeModal, |
| | | fileListRef, |
| | | columns: createPreviewColumns(), |
| | | actionColumn: createPreviewActionColumn({ handleRemove, handleDownload }), |
| | | columns: createPreviewColumns() as any[], |
| | | actionColumn: createPreviewActionColumn({ handleRemove, handleDownload }) as any, |
| | | }; |
| | | }, |
| | | }); |