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>

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>
         );
       };
     },

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,

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;

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} />;
     },
   };

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
@@ -37,19 +38,8 @@ 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';
 }

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", 

src/locales/lang/zh-CN/component.json

@@ -107,6 +107,7 @@
     "fileName": "文件名", 
     "fileSize": "文件大小", 
     "fileStatue": "状态", 
+    "pending": "待上传",
     "startUpload": "开始上传", 
     "uploadSuccess": "上传成功", 
     "uploadError": "上传失败",