---优化上传组件删除多次上传数据不展示问题

src/api/system/file/index.ts

@@ -2,6 +2,8 @@ import { defHttp } from '/@/utils/http/axios';
 
 import { ErrorMessageMode } from '/#/axios';
 import { FilePageListParams, FilePageListSearchModel, FilePageListResultModel, ZipFilesModel, FileModel } from './model';
+import { Base64 } from 'js-base64';
+import { getAppEnvConfig } from '/@/utils/env';
 
 import { useGlobSetting } from '/@/hooks/setting';
 const globSetting = useGlobSetting();
@@ -33,6 +35,12 @@ export function parseDownloadUrl(url:string,th?:boolean,full?:boolean) {
   return resultUrl;
 }
 
+export function parsePreviewUrl(fileName: string, fileUrl: string) {
+    let fileFullUrl = fileUrl.includes('http://') || fileUrl.includes('https://') ? fileUrl : location.origin + getAppEnvConfig().VITE_GLOB_API_URL + fileUrl;
+    fileFullUrl+="&fullfilename="+fileName;
+    return getAppEnvConfig().VITE_GLOB_UPLOAD_PREVIEW + encodeURIComponent(Base64.encode(fileFullUrl));
+}
+
 export async function getInfoByDownloadUrl(params: {id: string}, mode: ErrorMessageMode = 'modal') {
   return defHttp.get<FileModel>(
     {
@@ -132,3 +140,6 @@ export async function getAppToken(params, mode: ErrorMessageMode = 'modal') {
         },
     );
 }
+
+
+

src/components/Form/src/components/ErpUpload.vue

@@ -93,10 +93,9 @@
     const previewImage = ref('');
     const previewTitle = ref('');
 
-    watch(
+
-        () => props.value,
+    const refreshList = async (val:any) => {
-        async (val) => {
+        if (val) {
-            if (val) {
                 fileList.value = await getFileList({ tableName: props.tableName, columnName: props.columnName,tableId: props.value });
                 if (fileList.value.length) {
                     fileList.value.forEach((x) => {
@@ -111,6 +110,12 @@
                 fileList.value = [];
                 bindValues(undefined);
             }
+        };
+
+    watch(
+        () => props.value,
+        async (val) => {
+            await refreshList(val);
         },
         {
             immediate: true
@@ -133,6 +138,7 @@
                         },
                         tableId.value, tableName.value, columnName.value
                     );
+                    let tableIdValue = tableId.value;
                     bindValues(res[0]);
                     fileList.value.forEach((x) => {
                         x.status = 'done'; //没有则不会展示下载按钮
@@ -142,6 +148,9 @@
                     emit('update:tableName', tableName.value);
                     emit('update:columnName', columnName.value);
                     emit('change');
+                    if(tableIdValue==tableId.value){
+                        await refreshList(tableId.value);
+                    }
                     loading.value = false;
                 } catch (error) {
                     loading.value = false;

src/components/Form/src/components/Image.vue

@@ -75,9 +75,7 @@
         visible.value = value;
     };
 
-    watch(
+    const refreshList = async (val:any) => {
-        () => props.value,
-        async (val) => {
             if (val) {
                 let result = await getFileList({tableName: props.tableName, columnName: props.columnName,tableId: props.value});
                 if (result.length) {
@@ -93,6 +91,12 @@
             if (!val) {
                 fileList.value = '';
             }
+    };
+
+    watch(
+        () => props.value,
+        async (val) => {
+            await refreshList(val);
         },
         {
             immediate: true
@@ -115,6 +119,7 @@
                         },
                         tableId.value, tableName.value, columnName.value
                     );
+                    const tableIdValue = tableId.value;
                     bindValues(res[0]);
                     if (res.length) {
                         for (let i = 0; i < res.length; i++) {
@@ -130,6 +135,9 @@
                     emit('update:tableName', tableName.value);
                     emit('update:columnName', columnName.value);
                     emit('change');
+                    if(tableIdValue==tableId.value){
+                        await refreshList(tableId.value);
+                    }
                     loading.value = false;
                 } catch (error) {
                     console.error(error);

src/components/Form/src/components/InputUpload.vue

@@ -93,26 +93,29 @@
     const previewFile = ref('');
     const previewTitle = ref('');
 
+    const refreshList = async (val:any) => {
+        if (val) {
+            fileList.value = await getFileList({ tableName: props.tableName, columnName: props.columnName,tableId: props.value});
+            if (fileList.value.length) {
+                fileList.value.forEach((x) => {
+                    x.name = x.fileOrg;
+                    x.url = x.fileUrl;
+                    x.thumbUrl = x.thUrl;
+                    x.status = 'done'; //没有则不会展示下载按钮
+                });
+                bindValues(fileList.value[0]);
+                name.value = fileList.value[0].fileOrg;
+            }
+        } else {
+            fileList.value = [];
+            name.value = '';
+        }
+    };
+
     watch(
         () => props.value,
         async (val) => {
-            if (val) {
+            await refreshList(val);
-                fileList.value = await getFileList({ tableName: props.tableName, columnName: props.columnName,tableId: props.value});
-                if (fileList.value.length) {
-                    fileList.value.forEach((x) => {
-                        x.name = x.fileOrg;
-                        x.url = x.fileUrl;
-                        x.thumbUrl = x.thUrl;
-                        x.status = 'done'; //没有则不会展示下载按钮
-                    });
-                    bindValues(fileList.value[0]);
-                    name.value = fileList.value[0].fileOrg;
-                }
-            }
-            if (!val) {
-                fileList.value = [];
-                name.value = '';
-            }
         },
         {
             immediate: true
@@ -135,6 +138,7 @@
                         },
                         tableId.value, tableName.value, columnName.value
                     );
+                    const tableIdValue = tableId.value;
                     bindValues(res[0]);
                     fileList.value.forEach((x) => {
                         x.status = 'done'; //没有则不会展示下载按钮
@@ -146,6 +150,7 @@
                     emit('update:tableName', tableName.value);
                     emit('update:columnName', columnName.value);
                     emit('change');
+                    if(tableIdValue==tableId.value) await refreshList(tableId.value);
                     loading.value = false;
                 } catch (error) {
                     console.error(error);
@@ -183,6 +188,10 @@
             deleteFlag.value = true;
             const index = fileList.value.findIndex((x) => x.id === id);
             fileList.value.splice(index, 1);
+            emit('update:value', tableId.value);
+            emit('update:tableName', tableName.value);
+            emit('update:columnName', columnName.value);
+            emit('change');
             notification.success({
                 message: 'Tip',
                 description: '删除成功！'

src/components/Form/src/components/Upload.vue

@@ -110,7 +110,7 @@
     import { Upload } from 'ant-design-vue';
     import { UploadOutlined, PlusOutlined, DownloadOutlined, DeleteOutlined, EditOutlined, PaperClipOutlined } from '@ant-design/icons-vue';
     import { useMessage } from '/@/hooks/web/useMessage';
-    import { deleteFile, getAppToken, getFileList, getZipFiles,parseDownloadUrl } from '/@/api/system/file';
+    import { deleteFile, getAppToken, getFileList, getZipFiles,parseDownloadUrl,parsePreviewUrl} from '/@/api/system/file';
     import { downloadByUrl } from '/@/utils/file/download';
     import { uploadMultiApi } from '/@/api/sys/upload';
     import Icon from '/@/components/Icon/index';
@@ -119,6 +119,7 @@
     import WebOfficeSDK from '/@/assets/libs/open-jssdk-v0.1.3.es.js';
     import { getToken } from '/@/utils/auth';
     import { useRoute } from 'vue-router';
+import { methodOf } from 'lodash-es';
     const route = useRoute();
     const { VITE_GLOB_UPLOAD_ALERT_TIP } = getAppEnvConfig();
 
@@ -169,6 +170,7 @@
     const tableId = ref<string>('');
     const tableName = ref<string>('');
     const columnName = ref<string>('');
+    const removeIds = ref<string[]>([]);
 
     const bindValues = (data:any)=>{
         if(data){
@@ -191,11 +193,10 @@
     const previewFile = ref('');
     const previewTitle = ref('');
 
-    watch(
+    const refreshList = async (val:any) => {
-        () => props.value,
+         if (val) {
-        async (val) => {
+                let _list = await getFileList({ tableName: props.tableName, columnName: props.columnName,tableId: props.value });
-            if (val) {
+                fileList.value = _list.filter((o) => !removeIds.value.includes(o.id));
-                fileList.value = await getFileList({ tableName: props.tableName, columnName: props.columnName,tableId: props.value });
                 if (fileList.value.length) {
                     fileList.value.forEach((x) => {
                         x.name = x.fileOrg;
@@ -208,9 +209,15 @@
             } else {
                 bindValues(undefined);
             }
-            if (!val) {
+        if (!val) {
-                fileList.value = [];
+            fileList.value = [];
-            }
+        }
+    };
+
+    watch(
+        () => props.value,
+        async (val) => {
+            await refreshList(val);
         },
         {
             immediate: true
@@ -233,18 +240,22 @@
                         },
                         tableId.value, tableName.value, columnName.value
                     );
-                    bindValues(res[0]);
+                    
                     fileList.value.forEach((x) => {
                         x.status = 'done'; //没有则不会展示下载按钮
                         x.url = x.fileUrl;
                         x.thumbUrl = x.thUrl;
                         x.fileSize = x.fileSize
                     });
-
+                    let tableIdValue = tableId.value;
+                    bindValues(res[0]);
                     emit('update:value', tableId.value);
                     emit('update:tableName', tableName.value);
                     emit('update:columnName', columnName.value);
                     emit('change');
+                    if(tableIdValue==tableId.value){
+                        await refreshList(tableId.value);
+                    }
                     loading.value = false;
                 } catch (error) {
                     console.error(error);
@@ -284,9 +295,16 @@
         const id = info.response ? info.response.data.id : info.id;
         const status = await deleteFile([id]);
         if (status) {
+            removeIds.value.push(id);
             deleteFlag.value = true;
             const index = fileList.value.findIndex((x) => x.id === id);
             fileList.value.splice(index, 1);
+            
+            emit('update:value', tableId.value);
+            emit('update:tableName', tableName.value);
+            emit('update:columnName', columnName.value);
+            emit('change');
+            await refreshList(tableId.value);
             notification.success({
                 message: 'Tip',
                 description: '删除成功！'
@@ -342,15 +360,13 @@
 
     const handlePreview = async (file) => {
         const fileUrl = file.response?.data?.fileUrl || file.fileUrl;
-        const fileName = file.response?.data?.fileOrg || file.fileOrg;
+        const fileName = file.name || file.fileOrg;
-        let fileFullUrl = fileUrl.includes('http://') || fileUrl.includes('https://') ? fileUrl : location.origin + getAppEnvConfig().VITE_GLOB_API_URL + fileUrl;
+        const previewUrl = parsePreviewUrl(fileName, fileUrl);
-        fileFullUrl+="&fullfilename="+fileName;
+        previewFile.value = parsePreviewUrl(fileName, fileUrl);
-        previewFile.value = getAppEnvConfig().VITE_GLOB_UPLOAD_PREVIEW + encodeURIComponent(Base64.encode(fileFullUrl));
 
         previewVisible.value = true;
-        previewTitle.value = file.name || file.fileOrg;
+        previewTitle.value = fileName;
-
+        console.log(previewUrl);
-        console.log(fileFullUrl);
     };
 
     const handleCancel = () => {