From e7fbd742287928112b318bf966e57c74f6a8ee72 Mon Sep 17 00:00:00 2001
From: bowen <54492610+jiaowoxiaobala@users.noreply.github.com>
Date: 星期一, 23 十月 2023 15:32:04 +0800
Subject: [PATCH] fix(Upload): The file name is too long bug (#3182)
---
src/components/Upload/src/UploadModal.vue | 14 ----
src/locales/lang/zh-CN/component.json | 1
src/components/Upload/src/typing.ts | 14 ----
src/components/Upload/src/data.tsx | 30 ++-------
src/locales/lang/en/component.json | 1
src/components/Upload/src/FileList.vue | 81 ++++++++++++++-------------
src/components/Upload/src/UploadPreviewModal.vue | 9 ---
7 files changed, 56 insertions(+), 94 deletions(-)
diff --git a/src/components/Upload/src/FileList.vue b/src/components/Upload/src/FileList.vue
index ddb087e..c3b6534 100644
--- 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>
);
};
},
diff --git a/src/components/Upload/src/UploadModal.vue b/src/components/Upload/src/UploadModal.vue
index 268e560..528b034 100644
--- 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,
diff --git a/src/components/Upload/src/UploadPreviewModal.vue b/src/components/Upload/src/UploadPreviewModal.vue
index bc4091b..b66c777 100644
--- 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';
@@ -60,14 +59,6 @@
);
}
}
-
- // // 棰勮
- // function handlePreview(record: PreviewFileItem) {
- // const { url = '' } = record;
- // createImgPreview({
- // imageList: [url],
- // });
- // }
// 涓嬭浇
function handleDownload(record: PreviewFileItem) {
diff --git a/src/components/Upload/src/data.tsx b/src/components/Upload/src/data.tsx
index 8e08833..d84cf7a 100644
--- 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 @@
const { t } = useI18n();
// 鏂囦欢涓婁紶鍒楄〃
-export function createTableColumns(): BasicColumn[] {
+export function createTableColumns(): FileBasicColumn[] {
return [
{
dataIndex: 'thumbUrl',
@@ -38,12 +35,12 @@
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 @@
return text && (text / 1024).toFixed(2) + 'KB';
},
},
- // {
- // dataIndex: 'type',
- // title: '鏂囦欢绫诲瀷',
- // width: 100,
- // },
{
dataIndex: 'status',
title: t('component.upload.fileStatue'),
@@ -73,12 +65,12 @@
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 @@
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} />;
},
};
diff --git a/src/components/Upload/src/typing.ts b/src/components/Upload/src/typing.ts
index c630110..2ca5d4e 100644
--- 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 @@
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 @@
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';
}
diff --git a/src/locales/lang/en/component.json b/src/locales/lang/en/component.json
index 48e9ea9..9d4951c 100644
--- 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",
diff --git a/src/locales/lang/zh-CN/component.json b/src/locales/lang/zh-CN/component.json
index 7af7df1..5d8a658 100644
--- 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": "涓婁紶澶辫触",
--
Gitblit v1.8.0