geg-gas/geg-gas-web
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
张福财
2025-12-05 16:40:17 +08:00
parent 7a8595bb4b
commit d4c07162d4
5 changed files with 95 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/api/system/file/index.ts
View File

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

17
src/components/Form/src/components/ErpUpload.vue
View File

@ -93,10 +93,9 @@
const previewImage = ref('');
const previewTitle = ref('');
watch(
() => props.value,
async (val) => {
if (val) {
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) => {
@ -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;

14
src/components/Form/src/components/Image.vue
View File

@ -75,9 +75,7 @@
visible.value = value;
};
watch(
() => props.value,
async (val) => {
const refreshList = async (val:any) => {
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);

43
src/components/Form/src/components/InputUpload.vue
View File

@ -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) {
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 = '';
}
await refreshList(val);
},
{
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: '删除成功！'

52
src/components/Form/src/components/Upload.vue
View File

@ -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(
() => props.value,
async (val) => {
if (val) {
fileList.value = await getFileList({ tableName: props.tableName, columnName: props.columnName,tableId: props.value });
const refreshList = async (val:any) => {
if (val) {
let _list = await getFileList({ tableName: props.tableName, columnName: props.columnName,tableId: props.value });
fileList.value = _list.filter((o) => !removeIds.value.includes(o.id));
if (fileList.value.length) {
fileList.value.forEach((x) => {
x.name = x.fileOrg;
@ -208,9 +209,15 @@
} else {
bindValues(undefined);
}
if (!val) {
fileList.value = [];
}
if (!val) {
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;
let fileFullUrl = fileUrl.includes('http://') || fileUrl.includes('https://') ? fileUrl : location.origin + getAppEnvConfig().VITE_GLOB_API_URL + fileUrl;
fileFullUrl+="&fullfilename="+fileName;
previewFile.value = getAppEnvConfig().VITE_GLOB_UPLOAD_PREVIEW + encodeURIComponent(Base64.encode(fileFullUrl));
const fileName = file.name || file.fileOrg;
const previewUrl = parsePreviewUrl(fileName, fileUrl);
previewFile.value = parsePreviewUrl(fileName, fileUrl);
previewVisible.value = true;
previewTitle.value = file.name || file.fileOrg;
console.log(fileFullUrl);
previewTitle.value = fileName;
console.log(previewUrl);
};
const handleCancel = () => {