fix(Upload): The file name is too long bug (#3182)

* fix(Upload): The file name is too long bug * fix: preview upload result file name nowrap * chore: modify i18 to be uploaded * chore: typing & i18n --------- Co-authored-by: Li Kui <90845831+likui628@users.noreply.github.com>
2025-01-24 10:33:50 +08:00 · 2023-10-23 15:32:04 +08:00 · 2023-10-23 15:32:04 +08:00 · e7fbd74228
commit e7fbd74228
parent 87224715c3
7 changed files with 56 additions and 94 deletions
--- a/src/components/Upload/src/FileList.vue
+++ b/src/components/Upload/src/FileList.vue
@ -21,49 +21,52 @@
        const { columns, actionColumn, dataSource } = props;
        const columnList = [...columns, actionColumn];
        return (
-          <table class="file-table">
-            <colgroup>
-              {columnList.map((item) => {
-                const { width = 0, dataIndex } = item;
-                const style: CSSProperties = {
-                  width: `${width}px`,
-                  minWidth: `${width}px`,
-                };
-                return <col style={width ? style : {}} key={dataIndex} />;
-              })}
-            </colgroup>
-            <thead>
-              <tr class="file-table-tr">
+          // x scrollbar
+          <div class="overflow-x-auto">
+            <table class="file-table">
+              <colgroup>
                {columnList.map((item) => {
-                  const { title = '', align = 'center', dataIndex } = item;
+                  const { width = 0, dataIndex } = item;
+                  const style: CSSProperties = {
+                    width: `${width}px`,
+                    minWidth: `${width}px`,
+                  };
+                  return <col style={width ? style : {}} key={dataIndex} />;
+                })}
+              </colgroup>
+              <thead>
+                <tr class="file-table-tr">
+                  {columnList.map((item) => {
+                    const { title = '', align = 'center', dataIndex } = item;
+                    return (
+                      <th class={['file-table-th', align]} key={dataIndex}>
+                        {title}
+                      </th>
+                    );
+                  })}
+                </tr>
+              </thead>
+              <tbody>
+                {dataSource.map((record = {}, index) => {
                  return (
-                    <th class={['file-table-th', align]} key={dataIndex}>
-                      {title}
-                    </th>
+                    <tr class="file-table-tr" key={`${index + record.name || ''}`}>
+                      {columnList.map((item) => {
+                        const { dataIndex = '', customRender, align = 'center' } = item;
+                        const render = customRender && isFunction(customRender);
+                        return (
+                          <td class={['file-table-td break-all', align]} key={dataIndex}>
+                            {render
+                              ? customRender?.({ text: record[dataIndex], record })
+                              : record[dataIndex]}
+                          </td>
+                        );
+                      })}
+                    </tr>
                  );
                })}
-              </tr>
-            </thead>
-            <tbody>
-              {dataSource.map((record = {}, index) => {
-                return (
-                  <tr class="file-table-tr" key={`${index + record.name || ''}`}>
-                    {columnList.map((item) => {
-                      const { dataIndex = '', customRender, align = 'center' } = item;
-                      const render = customRender && isFunction(customRender);
-                      return (
-                        <td class={['file-table-td', align]} key={dataIndex}>
-                          {render
-                            ? customRender?.({ text: record[dataIndex], record })
-                            : record[dataIndex]}
-                        </td>
-                      );
-                    })}
-                  </tr>
-                );
-              })}
-            </tbody>
-          </table>
+              </tbody>
+            </table>
+          </div>
        );
      };
    },
--- a/src/components/Upload/src/UploadModal.vue
+++ b/src/components/Upload/src/UploadModal.vue
@ -46,7 +46,6 @@
  import { defineComponent, reactive, ref, toRefs, unref, computed, PropType } from 'vue';
  import { Upload, Alert } from 'ant-design-vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
-  //   import { BasicTable, useTable } from '/@/components/Table';
  // hooks
  import { useUploadType } from './useUpload';
  import { useMessage } from '/@/hooks/web/useMessage';
@ -165,14 +164,6 @@
        emit('delete', record);
      }

-      // 预览
-      // function handlePreview(record: FileItem) {
-      //   const { thumbUrl = '' } = record;
-      //   createImgPreview({
-      //     imageList: [thumbUrl],
-      //   });
-      // }
-
      async function uploadApiByItem(item: FileItem) {
        const { api } = props;
        if (!api || !isFunction(api)) {
@ -276,15 +267,14 @@
      }

      return {
-        columns: createTableColumns() as any[],
-        actionColumn: createActionColumn(handleRemove) as any,
+        columns: createTableColumns(),
+        actionColumn: createActionColumn(handleRemove),
        register,
        closeModal,
        getHelpText,
        getStringAccept,
        getOkButtonProps,
        beforeUpload,
-        // registerTable,
        fileListRef,
        state,
        isUploadingRef,
--- a/src/components/Upload/src/UploadPreviewModal.vue
+++ b/src/components/Upload/src/UploadPreviewModal.vue
@ -12,7 +12,6 @@
 </template>
 <script lang="ts">
  import { defineComponent, watch, ref } from 'vue';
-  //   import { BasicTable, useTable } from '/@/components/Table';
  import FileList from './FileList.vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { previewProps } from './props';
@ -61,14 +60,6 @@
        }
      }

-      // // 预览
-      // function handlePreview(record: PreviewFileItem) {
-      //   const { url = '' } = record;
-      //   createImgPreview({
-      //     imageList: [url],
-      //   });
-      // }
-
      // 下载
      function handleDownload(record: PreviewFileItem) {
        const { url = '' } = record;
--- a/src/components/Upload/src/data.tsx
+++ b/src/components/Upload/src/data.tsx
@ -1,9 +1,6 @@
 import type { BasicColumn, ActionItem } from '/@/components/Table';
-import { FileItem, PreviewFileItem, UploadResultStatus } from './typing';
-import {
-  // checkImgType,
-  isImgTypeByName,
-} from './helper';
+import { FileBasicColumn, FileItem, PreviewFileItem, UploadResultStatus } from './typing';
+import { isImgTypeByName } from './helper';
 import { Progress, Tag } from 'ant-design-vue';
 import TableAction from '/@/components/Table/src/components/TableAction.vue';
 import ThumbUrl from './ThumbUrl.vue';
@ -12,7 +9,7 @@ import { useI18n } from '/@/hooks/web/useI18n';
 const { t } = useI18n();

 // 文件上传列表
-export function createTableColumns(): BasicColumn[] {
+export function createTableColumns(): FileBasicColumn[] {
  return [
    {
      dataIndex: 'thumbUrl',
@ -38,12 +35,12 @@ export function createTableColumns(): BasicColumn[] {
          status = 'success';
        }
        return (
-          <span>
-            <p class="truncate mb-1" title={text}>
+          <div>
+            <p class="truncate mb-1 max-w-[280px]" title={text}>
              {text}
            </p>
            <Progress percent={percent} size="small" status={status} />
-          </span>
+          </div>
        );
      },
    },
@ -55,11 +52,6 @@ export function createTableColumns(): BasicColumn[] {
        return text && (text / 1024).toFixed(2) + 'KB';
      },
    },
-    // {
-    //   dataIndex: 'type',
-    //   title: '文件类型',
-    //   width: 100,
-    // },
    {
      dataIndex: 'status',
      title: t('component.upload.fileStatue'),
@ -73,12 +65,12 @@ export function createTableColumns(): BasicColumn[] {
          return <Tag color="blue">{() => t('component.upload.uploading')}</Tag>;
        }

-        return text;
+        return text || t('component.upload.pending');
      },
    },
  ];
 }
-export function createActionColumn(handleRemove: Function): BasicColumn {
+export function createActionColumn(handleRemove: Function): FileBasicColumn {
  return {
    width: 120,
    title: t('component.upload.operating'),
@ -92,12 +84,6 @@ export function createActionColumn(handleRemove: Function): BasicColumn {
          onClick: handleRemove.bind(null, record),
        },
      ];
-      // if (checkImgType(record)) {
-      //   actions.unshift({
-      //     label: t('component.upload.preview'),
-      //     onClick: handlePreview.bind(null, record),
-      //   });
-      // }
      return <TableAction actions={actions} outside={true} />;
    },
  };
--- a/src/components/Upload/src/typing.ts
+++ b/src/components/Upload/src/typing.ts
@ -1,3 +1,4 @@
+import { BasicColumn } from '../../Table';
 import { UploadApiResult } from '/@/api/sys/model/uploadModel';

 export enum UploadResultStatus {
@ -24,7 +25,7 @@ export interface PreviewFileItem {
  type: string;
 }

-export interface FileBasicColumn {
+export interface FileBasicColumn extends Omit<BasicColumn, 'customRender'> {
  /**
   * Renderer of the table cell. The return value should be a VNode, or an object for colSpan/rowSpan config
   * @type Function | ScopedSlot
@ -36,20 +37,9 @@ export interface FileBasicColumn {
   */
  title: string;

-  /**
-   * Width of this column
-   * @type string | number
-   */
-  width?: number;
  /**
   * Display field of the data record, could be set like a.b.c
   * @type string
   */
  dataIndex: string;
-  /**
-   * specify how content is aligned
-   * @default 'left'
-   * @type string
-   */
-  align?: 'left' | 'right' | 'center';
 }
--- a/src/locales/lang/en/component.json
+++ b/src/locales/lang/en/component.json
@ -107,6 +107,7 @@
    "fileName": "File name", 
    "fileSize": "File size", 
    "fileStatue": "File status", 
+    "pending": "Pendig",
    "startUpload": "Start upload", 
    "uploadSuccess": "Upload successfully", 
    "uploadError": "Upload failed", 
--- a/src/locales/lang/zh-CN/component.json
+++ b/src/locales/lang/zh-CN/component.json
@ -107,6 +107,7 @@
    "fileName": "文件名", 
    "fileSize": "文件大小", 
    "fileStatue": "状态", 
+    "pending": "待上传",
    "startUpload": "开始上传", 
    "uploadSuccess": "上传成功", 
    "uploadError": "上传失败",