优化useDownloadBlob和FormItemsRenderer

components/FormBuilder/FormItemsRenderer.d.ts

@@ -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;
 }
 

components/FormBuilder/FormItemsRenderer.js

@@ -75,8 +75,8 @@ const FormItemsRenderer = ({
   // 获取items里的value和label字段key
   const getItemsFieldKey = (option) => {
     return {
-      valueKey: option?.itemsField?.valueKey || "value",
+      valueKey: option?.itemsField?.valueKey || "id",
-      labelKey: option?.itemsField?.labelKey || "label",
+      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 value = item[itemsFieldKey.valueKey];
-              const label = item[itemsFieldKey.labelKey] ?? item.name;
+              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 value = item[itemsFieldKey.valueKey];
-              const label = item[itemsFieldKey.labelKey] ?? item.name;
+              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 value = item[itemsFieldKey.valueKey];
-              const label = item[itemsFieldKey.labelKey] ?? item.name;
+              const label = item[itemsFieldKey.labelKey];
               return (
                 <Checkbox key={value} value={value}>
                   {label}

hooks/useDownloadBlob/index.d.ts

@@ -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(
+export default function useDownloadBlob(): [boolean, DeleteFileFunction];
-  url: string,
-  options?: UseDownloadBlobOptions
-): Promise<any>;

hooks/useDownloadBlob/index.js

@@ -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(
+export default function useDownloadBlob() {
-  url,
+  // loading状态
-  options = { name: "", type: "", params: {} },
+  const [loading, setLoading] = useState(false);
-) {
+
-  const fileUrl = getFileUrl();
+  // 下载Blob流文件
-  return new Promise((resolve, reject) => {
+  const downloadBlob = (url, options = { name: "", type: "", params: {} }) => {
-    const finalUrl = !url.includes(fileUrl) ? fileUrl + url : url;
+    setLoading(true);
-    Object.entries(options.params).forEach(([key, value]) => {
+    const fileUrl = getFileUrl();
-      finalUrl.searchParams.append(key, value);
+    return new Promise((resolve, reject) => {
-    });
+      const finalUrl = !url.includes(fileUrl) ? fileUrl + url : url;
-    fetch(finalUrl, {
+      Object.entries(options.params).forEach(([key, value]) => {
-      method: "GET",
+        finalUrl.searchParams.append(key, value);
-      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);
       });
-  });
+      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];
 }