| 提交 | 用户 | age | ||
| bab28a | 1 | import type { BasicColumn, ActionItem } from '@/components/Table'; |
| dccc8f | 2 | import { FileBasicColumn, FileItem, PreviewFileItem, UploadResultStatus } from '../types/typing'; |
| Z | 3 | import { isImgTypeByName } from '../helper'; |
| 661db0 | 4 | import { Progress, Tag } from 'ant-design-vue'; |
| bab28a | 5 | import TableAction from '@/components/Table/src/components/TableAction.vue'; |
| bd6b20 | 6 | import ThumbUrl from './ThumbUrl.vue'; |
| bab28a | 7 | import { useI18n } from '@/hooks/web/useI18n'; |
| d9cdf3 | 8 | import { previewColumnsFnType } from '../props'; |
| 3f6920 | 9 | |
| 962f90 | 10 | const { t } = useI18n(); |
| dc09de | 11 | |
| 746d4a | 12 | // 文件上传列表 |
| e7fbd7 | 13 | export function createTableColumns(): FileBasicColumn[] { |
| 746d4a | 14 | return [ |
| J | 15 | { |
| 16 | dataIndex: 'thumbUrl', | |
| 962f90 | 17 | title: t('component.upload.legend'), |
| 746d4a | 18 | width: 100, |
| J | 19 | customRender: ({ record }) => { |
| bd6b20 | 20 | const { thumbUrl } = (record as FileItem) || {}; |
| V | 21 | return thumbUrl && <ThumbUrl fileUrl={thumbUrl} />; |
| 746d4a | 22 | }, |
| J | 23 | }, |
| 24 | { | |
| 25 | dataIndex: 'name', | |
| 962f90 | 26 | title: t('component.upload.fileName'), |
| 746d4a | 27 | align: 'left', |
| J | 28 | customRender: ({ text, record }) => { |
| 29 | const { percent, status: uploadStatus } = (record as FileItem) || {}; | |
| 661db0 | 30 | let status: 'normal' | 'exception' | 'active' | 'success' = 'normal'; |
| 746d4a | 31 | if (uploadStatus === UploadResultStatus.ERROR) { |
| J | 32 | status = 'exception'; |
| 33 | } else if (uploadStatus === UploadResultStatus.UPLOADING) { | |
| 34 | status = 'active'; | |
| 35 | } else if (uploadStatus === UploadResultStatus.SUCCESS) { | |
| 36 | status = 'success'; | |
| 37 | } | |
| 38 | return ( | |
| e7fbd7 | 39 | <div> |
| B | 40 | <p class="truncate mb-1 max-w-[280px]" title={text}> |
| 746d4a | 41 | {text} |
| J | 42 | </p> |
| 43 | <Progress percent={percent} size="small" status={status} /> | |
| e7fbd7 | 44 | </div> |
| 746d4a | 45 | ); |
| J | 46 | }, |
| 47 | }, | |
| 48 | { | |
| 49 | dataIndex: 'size', | |
| 962f90 | 50 | title: t('component.upload.fileSize'), |
| 746d4a | 51 | width: 100, |
| J | 52 | customRender: ({ text = 0 }) => { |
| 53 | return text && (text / 1024).toFixed(2) + 'KB'; | |
| 54 | }, | |
| 55 | }, | |
| 56 | { | |
| 57 | dataIndex: 'status', | |
| 962f90 | 58 | title: t('component.upload.fileStatue'), |
| 746d4a | 59 | width: 100, |
| J | 60 | customRender: ({ text }) => { |
| 61 | if (text === UploadResultStatus.SUCCESS) { | |
| 962f90 | 62 | return <Tag color="green">{() => t('component.upload.uploadSuccess')}</Tag>; |
| 746d4a | 63 | } else if (text === UploadResultStatus.ERROR) { |
| 962f90 | 64 | return <Tag color="red">{() => t('component.upload.uploadError')}</Tag>; |
| 746d4a | 65 | } else if (text === UploadResultStatus.UPLOADING) { |
| 962f90 | 66 | return <Tag color="blue">{() => t('component.upload.uploading')}</Tag>; |
| 746d4a | 67 | } |
| J | 68 | |
| e7fbd7 | 69 | return text || t('component.upload.pending'); |
| 746d4a | 70 | }, |
| J | 71 | }, |
| 72 | ]; | |
| 73 | } | |
| e7fbd7 | 74 | export function createActionColumn(handleRemove: Function): FileBasicColumn { |
| 746d4a | 75 | return { |
| J | 76 | width: 120, |
| 962f90 | 77 | title: t('component.upload.operating'), |
| 746d4a | 78 | dataIndex: 'action', |
| J | 79 | fixed: false, |
| 80 | customRender: ({ record }) => { | |
| 81 | const actions: ActionItem[] = [ | |
| 82 | { | |
| 962f90 | 83 | label: t('component.upload.del'), |
| 661db0 | 84 | color: 'error', |
| d9cdf3 | 85 | onClick: handleRemove.bind(null, { |
| E | 86 | record, |
| 87 | uidKey: 'uid', | |
| 88 | valueKey: 'url', | |
| 89 | }), | |
| 746d4a | 90 | }, |
| J | 91 | ]; |
| 18ad1b | 92 | return <TableAction actions={actions} outside={true} />; |
| 746d4a | 93 | }, |
| J | 94 | }; |
| 95 | } | |
| 96 | // 文件预览列表 | |
| 97 | export function createPreviewColumns(): BasicColumn[] { | |
| 98 | return [ | |
| 99 | { | |
| 100 | dataIndex: 'url', | |
| 962f90 | 101 | title: t('component.upload.legend'), |
| 746d4a | 102 | width: 100, |
| J | 103 | customRender: ({ record }) => { |
| bd6b20 | 104 | const { url } = (record as PreviewFileItem) || {}; |
| V | 105 | return isImgTypeByName(url) && <ThumbUrl fileUrl={url} />; |
| 746d4a | 106 | }, |
| J | 107 | }, |
| 108 | { | |
| 109 | dataIndex: 'name', | |
| 962f90 | 110 | title: t('component.upload.fileName'), |
| 746d4a | 111 | align: 'left', |
| J | 112 | }, |
| 113 | ]; | |
| 114 | } | |
| 115 | ||
| 116 | export function createPreviewActionColumn({ | |
| 117 | handleRemove, | |
| 118 | handleDownload, | |
| 119 | }: { | |
| d9cdf3 | 120 | handleRemove: previewColumnsFnType['handleRemove']; |
| 661db0 | 121 | handleDownload: Fn; |
| 746d4a | 122 | }): BasicColumn { |
| J | 123 | return { |
| 124 | width: 160, | |
| 962f90 | 125 | title: t('component.upload.operating'), |
| 746d4a | 126 | dataIndex: 'action', |
| J | 127 | fixed: false, |
| 128 | customRender: ({ record }) => { | |
| 129 | const actions: ActionItem[] = [ | |
| 130 | { | |
| 962f90 | 131 | label: t('component.upload.del'), |
| 661db0 | 132 | color: 'error', |
| d9cdf3 | 133 | onClick: handleRemove.bind(null, { |
| E | 134 | record, |
| 135 | uidKey: 'uid', | |
| 136 | valueKey: 'url', | |
| 137 | }), | |
| 746d4a | 138 | }, |
| J | 139 | { |
| 962f90 | 140 | label: t('component.upload.download'), |
| 746d4a | 141 | onClick: handleDownload.bind(null, record), |
| J | 142 | }, |
| 143 | ]; | |
| c9089c | 144 | |
| 91e004 | 145 | return <TableAction actions={actions} outside={true} />; |
| 746d4a | 146 | }, |
| J | 147 | }; |
| 148 | } | |
