data.tsx 4.6 KB

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