From 5c124cdf26e4d749eae1e7fc9df366e9a5f4d259 Mon Sep 17 00:00:00 2001
From: liu <2021943741@qq.com>
Date: 星期二, 18 八月 2026 15:04:09 +0800
Subject: [PATCH] 选择采购订单修改列表宽度设置
---
src/components/upload/file-upload.vue | 92 ++++++++++++++++++++++-----------------------
1 files changed, 45 insertions(+), 47 deletions(-)
diff --git a/src/components/upload/file-upload.vue b/src/components/upload/file-upload.vue
index 8f78d2f..3692d2e 100644
--- a/src/components/upload/file-upload.vue
+++ b/src/components/upload/file-upload.vue
@@ -35,6 +35,8 @@
returnText: false,
showDescription: false,
showDownloadIcon: true,
+ valueKey: 'url',
+ valuePrefix: '',
});
const emit = defineEmits([
'change',
@@ -53,22 +55,20 @@
maxSizeRef: maxSize,
});
-/** 璁＄畻褰撳墠缁戝畾鐨勫�硷紝浼樺厛浣跨敤 modelValue */
const currentValue = computed(() => {
return props.modelValue === undefined ? props.value : props.modelValue;
});
-/** 鍒ゆ柇鏄惁浣跨敤 modelValue */
const isUsingModelValue = computed(() => {
return props.modelValue !== undefined;
});
const fileList = ref<UploadProps['fileList']>([]);
-const isLtMsg = ref<boolean>(true); // 鏂囦欢澶у皬閿欒鎻愮ず
-const isActMsg = ref<boolean>(true); // 鏂囦欢绫诲瀷閿欒鎻愮ず
-const isFirstRender = ref<boolean>(true); // 鏄惁绗竴娆℃覆鏌�
-const uploadNumber = ref<number>(0); // 涓婁紶鏂囦欢璁℃暟鍣�
-const uploadList = ref<any[]>([]); // 涓存椂涓婁紶鍒楄〃
+const isLtMsg = ref<boolean>(true);
+const isActMsg = ref<boolean>(true);
+const isFirstRender = ref<boolean>(true);
+const uploadNumber = ref<number>(0);
+const uploadList = ref<any[]>([]);
watch(
currentValue,
@@ -84,17 +84,31 @@
} else {
value.push(v);
}
+ const existingMap = new Map<string | number, UploadFile>();
+ for (const f of fileList.value ?? []) {
+ const id = (f as any)?.response?.[props.valueKey] ?? (f as any)?.[props.valueKey] ?? f?.uid;
+ if (id != null) existingMap.set(id, f);
+ }
fileList.value = value
.map((item, i) => {
if (item && isString(item)) {
- return {
+ return existingMap.get(item) ?? {
uid: `${-i}`,
name: item.slice(Math.max(0, item.lastIndexOf('/') + 1)),
status: UploadResultStatus.DONE,
url: item,
};
} else if (item && isObject(item)) {
- return item;
+ const key = item[props.valueKey] ?? item.uid;
+ return (key != null && existingMap.get(key)) || { ...item, url: String((item as any).url ?? '') };
+ } else if (item && (typeof item === 'number' || typeof item === 'string')) {
+ return existingMap.get(item) ?? {
+ uid: `${-i}`,
+ name: `鏂囦欢 ${String(item)}`,
+ status: UploadResultStatus.DONE,
+ url: String(item),
+ response: { [props.valueKey]: item },
+ } as UploadFile;
}
return null;
})
@@ -127,6 +141,12 @@
/** 澶勭悊鏂囦欢棰勮 */
function handlePreview(file: UploadFile) {
+ const url = (file as any)?.url || (file as any)?.response?.url || (file as any)?.response;
+ if (!url) {
+ message.warning('鏂囦欢鍦板潃涓嶅瓨鍦紝鏃犳硶棰勮');
+ return;
+ }
+ window.open(url, '_blank');
emit('preview', file);
}
@@ -139,17 +159,10 @@
function handleUploadError(error: any) {
console.error('涓婁紶閿欒:', error);
message.error($t('ui.upload.uploadError'));
- // 涓婁紶澶辫触鏃跺噺灏戣鏁板櫒
uploadNumber.value = Math.max(0, uploadNumber.value - 1);
}
-/**
- * 涓婁紶鍓嶆牎楠�
- * @param file 寰呬笂浼犵殑鏂囦欢
- * @returns 鏄惁鍏佽涓婁紶
- */
async function beforeUpload(file: File) {
- // 妫�鏌ユ枃浠舵暟閲忛檺鍒�
if (fileList.value!.length >= props.maxNumber) {
message.error($t('ui.upload.maxNumber', [props.maxNumber]));
return Upload.LIST_IGNORE;
@@ -160,7 +173,6 @@
if (!isAct) {
message.error($t('ui.upload.acceptUpload', [accept]));
isActMsg.value = false;
- // 闃叉寮瑰嚭澶氫釜閿欒鎻愮ず
setTimeout(() => (isActMsg.value = true), 1000);
return Upload.LIST_IGNORE;
}
@@ -168,12 +180,10 @@
if (isLt) {
message.error($t('ui.upload.maxSizeMultiple', [maxSize]));
isLtMsg.value = false;
- // 闃叉寮瑰嚭澶氫釜閿欒鎻愮ず
setTimeout(() => (isLtMsg.value = true), 1000);
return Upload.LIST_IGNORE;
}
- // 鍙湁鍦ㄩ獙璇侀�氳繃鍚庢墠澧炲姞璁℃暟鍣�
uploadNumber.value++;
if (props.returnText) {
const fileContent = await file.text();
@@ -182,23 +192,18 @@
return true;
}
-/** 鑷畾涔変笂浼犺姹� */
async function customRequest(info: UploadRequestOption) {
let { api } = props;
if (!api || !isFunction(api)) {
api = useUpload(props.directory).httpRequest;
}
try {
- // 涓婁紶鏂囦欢
const progressEvent: AxiosProgressEvent = (e) => {
const percent = Math.trunc((e.loaded / e.total!) * 100);
info.onProgress!({ percent });
};
const res = await api?.(info.file as File, progressEvent);
-
- // 澶勭悊涓婁紶鎴愬姛鍚庣殑閫昏緫
handleUploadSuccess(res, info.file as File);
-
info.onSuccess!(res);
message.success($t('ui.upload.uploadSuccess'));
} catch (error: any) {
@@ -208,34 +213,27 @@
}
}
-/**
- * 澶勭悊涓婁紶鎴愬姛
- * @param res 涓婁紶鍝嶅簲缁撴灉
- * @param file 涓婁紶鐨勬枃浠�
- */
function handleUploadSuccess(res: any, file: File) {
- // 鍒犻櫎涓存椂鏂囦欢
const index = fileList.value?.findIndex((item) => item.name === file.name);
if (index !== -1) {
fileList.value?.splice(index!, 1);
}
- // 娣诲姞鍒颁复鏃朵笂浼犲垪琛�
- const fileUrl = res?.url || res?.data || res;
+ const fileUrl = res?.url || res?.data || (typeof res === 'string' ? res : '');
uploadList.value.push({
- name: file.name,
+ name: res?.name || file.name,
url: fileUrl,
+ id: res?.id,
+ response: res,
status: UploadResultStatus.DONE,
uid: file.name + Date.now(),
});
- // 妫�鏌ユ槸鍚︽墍鏈夋枃浠堕兘涓婁紶瀹屾垚
if (uploadList.value.length >= uploadNumber.value) {
fileList.value?.push(...uploadList.value);
uploadList.value = [];
uploadNumber.value = 0;
- // 鏇存柊鍊�
const value = getValue();
isInnerOperate.value = true;
emit('update:value', value);
@@ -244,10 +242,6 @@
}
}
-/**
- * 鑾峰彇褰撳墠鏂囦欢鍒楄〃鐨勫��
- * @returns 鏂囦欢 URL 鍒楄〃鎴栧瓧绗︿覆
- */
function getValue() {
const list = (fileList.value || [])
.filter((item) => item?.status === UploadResultStatus.DONE)
@@ -255,13 +249,17 @@
if (item?.response && props?.resultField) {
return item?.response;
}
- return item?.url || item?.response?.url || item?.response;
+ const val =
+ item?.response?.[props.valueKey] ??
+ item?.[props.valueKey] ??
+ item?.url ??
+ item?.response?.url ??
+ item?.response;
+ return props.valuePrefix ? `${props.valuePrefix}${val}` : val;
});
- // 鍗曚釜鏂囦欢鐨勬儏鍐碉紝鏍规嵁杈撳叆鍙傛暟绫诲瀷鍐冲畾杩斿洖鏍煎紡
if (props.maxNumber === 1) {
const singleValue = list.length > 0 ? list[0] : '';
- // 濡傛灉鍘熷鍊兼槸瀛楃涓叉垨 modelValue 鏄瓧绗︿覆锛岃繑鍥炲瓧绗︿覆
if (
isString(props.value) ||
(isUsingModelValue.value && isString(props.modelValue))
@@ -271,7 +269,6 @@
return singleValue;
}
- // 澶氭枃浠舵儏鍐碉紝鏍规嵁杈撳叆鍙傛暟绫诲瀷鍐冲畾杩斿洖鏍煎紡
if (isUsingModelValue.value) {
return Array.isArray(props.modelValue) ? list : list.join(',');
}
@@ -295,14 +292,14 @@
:progress="{ showInfo: true }"
:show-upload-list="{
showPreviewIcon: true,
- showRemoveIcon: true,
+ showRemoveIcon: !disabled,
showDownloadIcon,
}"
@remove="handleRemove"
@preview="handlePreview"
@reject="handleExceed"
>
- <div v-if="drag" class="upload-drag-area">
+ <div v-if="drag && !disabled" class="upload-drag-area">
<p class="ant-upload-drag-icon">
<IconifyIcon icon="lucide:cloud-upload" />
</p>
@@ -311,7 +308,9 @@
鏀寔{{ accept.join('/') }}鏍煎紡鏂囦欢锛屼笉瓒呰繃{{ maxSize }}MB
</p>
</div>
- <div v-else-if="fileList && fileList.length < maxNumber">
+ <div
+ v-else-if="!disabled && fileList && fileList.length < maxNumber"
+ >
<Button>
<IconifyIcon icon="lucide:cloud-upload" />
{{ $t('ui.upload.upload') }}
@@ -364,7 +363,6 @@
</style>
<style>
-/* 鏂囦欢涓婁紶鍒楄〃鏄剧ず鎵嬪瀷鍏夋爣鏍峰紡澶辨晥銆備笉鐭ラ亾涓哄暐. 鍏堣繖閲屽姞涓� */
.ant-upload-list-text .ant-upload-list-item {
cursor: pointer;
}
--
Gitblit v1.9.3