front_library
/
zy-react-library
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

优化useDownloadBlob和FormItemsRenderer

master
LiuJiaNan 2025-10-28 08:48:18 +08:00
parent af0c6462bf
commit 3ba3a70a9e
4 changed files with 71 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
components/FormBuilder/FormItemsRenderer.d.ts vendored
View File

@ -15,12 +15,6 @@ export type FormItemRenderType
* 选项项数据类型
*/
export interface OptionItem {
/** 值字段 */
value?: any;
/** 标签字段 */
label?: string;
/** 字典ID */
dictionariesId?: any;
/** ID字段 */
id?: any;
/** 名称字段 */
@ -32,9 +26,9 @@ export interface OptionItem {
* 字段键配置
*/
export interface itemsFieldConfig {
/** 值字段的键名，默认为 'value' */
/** 值字段的键名，默认为 'id' */
valueKey?: string;
/** 标签字段的键名，默认为 'label' */
/** 标签字段的键名，默认为 'name' */
labelKey?: string;
}

16
components/FormBuilder/FormItemsRenderer.js
View File

@ -75,8 +75,8 @@ const FormItemsRenderer = ({
// 获取items里的value和label字段key
const getItemsFieldKey = (option) => {
return {
valueKey: option?.itemsField?.valueKey || "value",
labelKey: option?.itemsField?.labelKey || "label",
valueKey: option?.itemsField?.valueKey || "id",
labelKey: option?.itemsField?.labelKey || "name",
};
};
@ -144,8 +144,8 @@ const FormItemsRenderer = ({
return (
<Select placeholder={placeholder} {...componentProps}>
{(option.items || []).map((item) => {
const value = item[itemsFieldKey.valueKey] ?? item.dictionariesId ?? item.id;
const label = item[itemsFieldKey.labelKey] ?? item.name;
const value = item[itemsFieldKey.valueKey];
const label = item[itemsFieldKey.labelKey];
return (
<Select.Option key={value} value={value}>
{label}
@ -159,8 +159,8 @@ const FormItemsRenderer = ({
return (
<Radio.Group {...componentProps}>
{(option.items || []).map((item) => {
const value = item[itemsFieldKey.valueKey] ?? item.dictionariesId ?? item.id;
const label = item[itemsFieldKey.labelKey] ?? item.name;
const value = item[itemsFieldKey.valueKey];
const label = item[itemsFieldKey.labelKey];
return (
<Radio key={value} value={value}>
{label}
@ -174,8 +174,8 @@ const FormItemsRenderer = ({
return (
<Checkbox.Group {...componentProps}>
{(option.items || []).map((item) => {
const value = item[itemsFieldKey.valueKey] ?? item.dictionariesId ?? item.id;
const label = item[itemsFieldKey.labelKey] ?? item.name;
const value = item[itemsFieldKey.valueKey];
const label = item[itemsFieldKey.labelKey];
return (
<Checkbox key={value} value={value}>
{label}

12
hooks/useDownloadBlob/index.d.ts vendored
View File

@ -7,10 +7,14 @@ interface UseDownloadBlobOptions {
params?: Record<string, any>;
}
export interface downloadBlobOptions {
url: string;
options?: UseDownloadBlobOptions;
}
export type DeleteFileFunction = (options: downloadBlobOptions) => Promise<any>;
/**
* 下载Blob流文件
*/
export default function useDownloadBlob(
url: string,
options?: UseDownloadBlobOptions
): Promise<any>;
export default function useDownloadBlob(): [boolean, DeleteFileFunction];

96
hooks/useDownloadBlob/index.js
View File

@ -1,52 +1,62 @@
import { message } from "antd";
import dayjs from "dayjs";
import { useState } from "react";
import { getFileUrl } from "../../utils/index.js";
/**
* 下载Blob流文件
*/
export default function useDownloadBlob(
url,
options = { name: "", type: "", params: {} },
) {
const fileUrl = getFileUrl();
return new Promise((resolve, reject) => {
const finalUrl = !url.includes(fileUrl) ? fileUrl + url : url;
Object.entries(options.params).forEach(([key, value]) => {
finalUrl.searchParams.append(key, value);
});
fetch(finalUrl, {
method: "GET",
mode: "cors",
headers: {
"Content-Type": "application/json",
},
})
.then((response) => {
if (!response.ok) {
throw new Error("Network response was not ok");
}
return response.blob();
})
.then((blob) => {
const finalBlob = new Blob([blob], {
type: options.type || "application/vnd.ms-excel",
});
const downloadElement = document.createElement("a");
const href = window.URL.createObjectURL(finalBlob);
downloadElement.style.display = "none";
downloadElement.href = href;
downloadElement.download
= options.name || dayjs().format("YYYY-MM-DD HH:mm:ss");
document.body.appendChild(downloadElement);
downloadElement.click();
document.body.removeChild(downloadElement);
window.URL.revokeObjectURL(href);
resolve({ data: finalBlob });
})
.catch((err) => {
message.error("导出失败");
reject(err);
export default function useDownloadBlob() {
// loading状态
const [loading, setLoading] = useState(false);
// 下载Blob流文件
const downloadBlob = (url, options = { name: "", type: "", params: {} }) => {
setLoading(true);
const fileUrl = getFileUrl();
return new Promise((resolve, reject) => {
const finalUrl = !url.includes(fileUrl) ? fileUrl + url : url;
Object.entries(options.params).forEach(([key, value]) => {
finalUrl.searchParams.append(key, value);
});
});
fetch(finalUrl, {
method: "GET",
mode: "cors",
headers: {
"Content-Type": "application/json",
},
})
.then((response) => {
if (!response.ok) {
throw new Error("Network response was not ok");
}
return response.blob();
})
.then((blob) => {
const finalBlob = new Blob([blob], {
type: options.type || "application/vnd.ms-excel",
});
const downloadElement = document.createElement("a");
const href = window.URL.createObjectURL(finalBlob);
downloadElement.style.display = "none";
downloadElement.href = href;
downloadElement.download
= options.name || dayjs().format("YYYY-MM-DD HH:mm:ss");
document.body.appendChild(downloadElement);
downloadElement.click();
document.body.removeChild(downloadElement);
window.URL.revokeObjectURL(href);
resolve({ data: finalBlob });
})
.catch((err) => {
message.error("导出失败");
reject(err);
})
.finally(() => {
setLoading(false);
});
});
};
return [loading, downloadBlob];
}