优化FormBuilder

优化hooks中loading状态
master
LiuJiaNan 2025-11-12 15:11:36 +08:00
parent 77df957b7b
commit 6a920f9161
9 changed files with 127 additions and 22 deletions

View File

@ -1,4 +1,4 @@
import { Button, Col, Form, Row, Space, Spin } from "antd";
import { Button, Col, Form, Row, Space, Spin, message } from "antd";
import FormItemsRenderer from "./FormItemsRenderer";
/**
@ -34,6 +34,9 @@ const FormBuilder = (props) => {
scrollToFirstError
wrapperCol={{ span: 24 - labelCol.span }}
initialValues={values}
onFinishFailed={() => {
message.error("请补全必填项");
}}
style={{ width: `calc(100% - ${gutter * 2}px)`, margin: `0 auto` }}
{...restProps}
>

View File

@ -7,13 +7,19 @@ import { useState } from "react";
function useDeleteFile(returnType = "object") {
// loading状态
const [loading, setLoading] = useState(false);
// 用于跟踪进行中的请求数量(不暴露给外部)
let requestCount = 0;
// 删除文件
const deleteFile = (options) => {
if (!options)
throw new Error("请传入 options");
setLoading(true);
// 增加请求数量并设置loading状态
requestCount++;
if (requestCount > 0) {
setLoading(true);
}
return new Promise((resolve, reject) => {
const { files = [], single = true } = options;
@ -25,7 +31,10 @@ function useDeleteFile(returnType = "object") {
// 如果没有文件则直接返回
if (files.length === 0) {
setLoading(false);
requestCount--;
if (requestCount <= 0) {
setLoading(false);
}
resolve();
return;
}
@ -34,7 +43,10 @@ function useDeleteFile(returnType = "object") {
if (single) {
const firstFile = files[0];
if (!firstFile.filePath) {
setLoading(false);
requestCount--;
if (requestCount <= 0) {
setLoading(false);
}
resolve();
return;
}
@ -43,7 +55,10 @@ function useDeleteFile(returnType = "object") {
else {
const validFiles = files.filter(f => f.id);
if (validFiles.length === 0) {
setLoading(false);
requestCount--;
if (requestCount <= 0) {
setLoading(false);
}
resolve();
return;
}
@ -63,7 +78,11 @@ function useDeleteFile(returnType = "object") {
reject(err);
})
.finally(() => {
setLoading(false);
// 减少请求数量并在没有进行中的请求时设置loading为false
requestCount--;
if (requestCount <= 0) {
setLoading(false);
}
});
});
};

View File

@ -8,13 +8,19 @@ import { DICTIONARY_APP_KEY_ENUM } from "../../enum/dictionary";
function useDictionary(returnType = "object") {
// loading状态
const [loading, setLoading] = useState(false);
// 用于跟踪进行中的请求数量(不暴露给外部)
let requestCount = 0;
// 获取数据字典
const getDictionary = (options) => {
if (!options)
throw new Error("请传入 options");
setLoading(true);
// 增加请求数量并设置loading状态
requestCount++;
if (requestCount > 0) {
setLoading(true);
}
return new Promise((resolve, reject) => {
const { appKey = DICTIONARY_APP_KEY_ENUM.DEFAULT, dictValue } = options;
@ -37,7 +43,11 @@ function useDictionary(returnType = "object") {
reject(err);
})
.finally(() => {
setLoading(false);
// 减少请求数量并在没有进行中的请求时设置loading为false
requestCount--;
if (requestCount <= 0) {
setLoading(false);
}
});
});
};

View File

@ -8,10 +8,16 @@ import { useState } from "react";
export default function useDownloadBlob(returnType = "object") {
// loading状态
const [loading, setLoading] = useState(false);
// 用于跟踪进行中的请求数量(不暴露给外部)
let requestCount = 0;
// 下载Blob流文件
const downloadBlob = (url, options) => {
setLoading(true);
// 增加请求数量并设置loading状态
requestCount++;
if (requestCount > 0) {
setLoading(true);
}
return new Promise((resolve, reject) => {
if (!url)
@ -57,7 +63,11 @@ export default function useDownloadBlob(returnType = "object") {
reject(err);
})
.finally(() => {
setLoading(false);
// 减少请求数量并在没有进行中的请求时设置loading为false
requestCount--;
if (requestCount <= 0) {
setLoading(false);
}
});
});
};

View File

@ -8,10 +8,16 @@ import { getFileName, getFileSuffix, getFileUrl } from "../../utils";
export default function useDownloadFile(returnType = "object") {
// loading状态
const [loading, setLoading] = useState(false);
// 用于跟踪进行中的请求数量(不暴露给外部)
let requestCount = 0;
// 下载文件
const downloadFile = (options) => {
setLoading(true);
// 增加请求数量并设置loading状态
requestCount++;
if (requestCount > 0) {
setLoading(true);
}
const { url, name: fileName } = options;
if (!url)
@ -50,9 +56,20 @@ export default function useDownloadFile(returnType = "object") {
message.error("下载失败");
})
.finally(() => {
setLoading(false);
// 减少请求数量并在没有进行中的请求时设置loading为false
requestCount--;
if (requestCount <= 0) {
setLoading(false);
}
});
},
onCancel: () => {
// 减少请求数量并在没有进行中的请求时设置loading为false
requestCount--;
if (requestCount <= 0) {
setLoading(false);
}
},
});
};

View File

@ -9,13 +9,19 @@ import { addingPrefixToFile } from "../../utils";
function useGetFile(returnType = "object") {
// loading状态
const [loading, setLoading] = useState(false);
// 用于跟踪进行中的请求数量(不暴露给外部)
let requestCount = 0;
// 获取文件
const getFile = (options) => {
if (!options)
throw new Error("请传入 options");
setLoading(true);
// 增加请求数量并设置loading状态
requestCount++;
if (requestCount > 0) {
setLoading(true);
}
return new Promise((resolve, reject) => {
const { eqType, eqForeignKey } = options;
@ -43,7 +49,11 @@ function useGetFile(returnType = "object") {
reject(err);
})
.finally(() => {
setLoading(false);
// 减少请求数量并在没有进行中的请求时设置loading为false
requestCount--;
if (requestCount <= 0) {
setLoading(false);
}
});
});
};

View File

@ -7,10 +7,16 @@ import { useState } from "react";
function useGetUserInfo(returnType = "object") {
// loading状态
const [loading, setLoading] = useState(false);
// 用于跟踪进行中的请求数量(不暴露给外部)
let requestCount = 0;
// 获取用户信息
const getUserInfo = () => {
setLoading(true);
// 增加请求数量并设置loading状态
requestCount++;
if (requestCount > 0) {
setLoading(true);
}
return new Promise((resolve, reject) => {
// 发送请求
@ -26,7 +32,11 @@ function useGetUserInfo(returnType = "object") {
reject(err);
})
.finally(() => {
setLoading(false);
// 减少请求数量并在没有进行中的请求时设置loading为false
requestCount--;
if (requestCount <= 0) {
setLoading(false);
}
});
});
};

View File

@ -7,10 +7,16 @@ import { useState } from "react";
export default function useImportFile(returnType = "object") {
// loading状态
const [loading, setLoading] = useState(false);
// 用于跟踪进行中的请求数量(不暴露给外部)
let requestCount = 0;
// 导入文件
const importFile = (url, options) => {
setLoading(true);
// 增加请求数量并设置loading状态
requestCount++;
if (requestCount > 0) {
setLoading(true);
}
return new Promise((resolve, reject) => {
if (!url)
@ -38,7 +44,11 @@ export default function useImportFile(returnType = "object") {
reject(err);
})
.finally(() => {
setLoading(false);
// 减少请求数量并在没有进行中的请求时设置loading为false
requestCount--;
if (requestCount <= 0) {
setLoading(false);
}
});
});
};

View File

@ -8,13 +8,19 @@ import { UPLOAD_FILE_PATH_ENUM, UPLOAD_FILE_TYPE_ENUM } from "../../enum/uploadF
function useUploadFile(returnType = "object") {
// loading状态
const [loading, setLoading] = useState(false);
// 用于跟踪进行中的请求数量(不暴露给外部)
let requestCount = 0;
// 上传文件
const uploadFile = (options) => {
if (!options)
throw new Error("请传入 options");
setLoading(true);
// 增加请求数量并设置loading状态
requestCount++;
if (requestCount > 0) {
setLoading(true);
}
return new Promise((resolve, reject) => {
const { files = [], single = true, params } = options;
@ -48,7 +54,10 @@ function useUploadFile(returnType = "object") {
// 如果没有文件则直接返回
if (files.length === 0) {
setLoading(false);
requestCount--;
if (requestCount <= 0) {
setLoading(false);
}
resolve(
single
? { filePath: "" }
@ -77,7 +86,10 @@ function useUploadFile(returnType = "object") {
// 如果没有文件则返回老文件
if (filesLength === 0) {
setLoading(false);
requestCount--;
if (requestCount <= 0) {
setLoading(false);
}
resolve(
single
? { filePath: files[0].filePath }
@ -104,7 +116,11 @@ function useUploadFile(returnType = "object") {
reject(err);
})
.finally(() => {
setLoading(false);
// 减少请求数量并在没有进行中的请求时设置loading为false
requestCount--;
if (requestCount <= 0) {
setLoading(false);
}
});
});
};