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