优化FormItemsRenderer和Table

components/FormBuilder/FormBuilder.js

@@ -38,6 +38,7 @@ const FormBuilder = (props) => {
       onFinish={onFinish}
       initialValues={values}
       form={form}
+      style={{ width: `calc(100% - ${gutter * 2}px)`, margin: `0 auto` }}
       {...restProps}
     >
       <Row gutter={gutter}>

components/Table/index.js

@@ -6,6 +6,7 @@ function TablePro(props) {
     columns = [],
     showIndex = true,
     useAlignCenter = true,
+    rowKey = 'id',
     ...restProps
   } = props;
   const storeIndex = props.storeIndex || `${window.process.env.app.antd["ant-prefix"]}_${Math.random().toString(36).substring(2)}`;
@@ -13,7 +14,7 @@ function TablePro(props) {
     showIndex && columns.unshift(getIndexColumn(props.pagination));
     return columns.map(item => ({ align: useAlignCenter ? "center" : "left", ...item }));
   }
-  return <Table storeIndex={storeIndex} columns={calcColumns()} {...restProps} />;
+  return <Table rowKey={rowKey} storeIndex={storeIndex} columns={calcColumns()} {...restProps} />;
 }
 
 export default TablePro;

package.json

@@ -24,6 +24,7 @@
     "@ant-design/icons": "^6.1.0",
     "@ant-design/pro-components": "^2.8.10",
     "@cqsjjb/jjb-common-lib": "latest",
+    "@cqsjjb/jjb-react-admin-component": "latest",
     "ahooks": "^3.9.5",
     "antd": "^5.27.6",
     "dayjs": "^1.11.18",

todo/hooks/useDeleteFile/index.d.ts

@@ -0,0 +1,19 @@
+export interface DeleteFileItem {
+  /** 文件ID */
+  id: string;
+  [key: string]: any;
+}
+
+export interface DeleteFileOptions {
+  /** 要删除的文件列表 */
+  files: DeleteFileItem[];
+  /** 额外的参数 */
+  params?: Record<string, any>;
+}
+
+export type DeleteFileFunction = (options: DeleteFileOptions) => Promise<any>;
+
+/**
+ * 删除文件
+ */
+export default function useDeleteFile(): [boolean, DeleteFileFunction];

todo/hooks/useDeleteFile/index.js

@@ -0,0 +1,41 @@
+import { request } from "@cqsjjb/jjb-common-lib/http";
+import { useState } from "react";
+
+/**
+ * 删除文件 TODO
+ */
+function useDeleteFile() {
+  // loading状态
+  const [loading, setLoading] = useState(false);
+
+  // 删除文件
+  const deleteFile = (options) => {
+    setLoading(true);
+
+    return new Promise((resolve, reject) => {
+      const { files = [], params = {} } = options;
+
+      // 构建参数
+      const actualParams = {
+        id: files.map(file => file.id),
+        ...params,
+      };
+
+      // 发送请求
+      request("", "post", actualParams)
+        .then((res) => {
+          resolve(res.data);
+        })
+        .catch((err) => {
+          reject(err);
+        })
+        .finally(() => {
+          setLoading(false);
+        });
+    });
+  };
+
+  return [loading, deleteFile];
+}
+
+export default useDeleteFile;

todo/hooks/useUploadFile/index.d.ts

@@ -0,0 +1,41 @@
+export interface UploadFile {
+  /** 原始文件对象 */
+  originFileObj?: File;
+  [key: string]: any;
+}
+
+export interface SingleUploadFileOptions {
+  /** 要上传的文件 */
+  files: UploadFile;
+  /** 是否单文件上传 */
+  single?: true;
+  /** 上传的参数 */
+  params?: Record<string, string | number>;
+}
+
+export interface MultipleUploadFileOptions {
+  /** 要上传的文件 */
+  files: UploadFile[];
+  /** 是否单文件上传 */
+  single: false;
+  /** 上传的参数 */
+  params?: Record<string, string | number>;
+}
+
+export interface MultipleFileResponse {
+  /** 文件列表 */
+  files: string[];
+  /** 文件ID */
+  id: string;
+  [key: string]: any;
+}
+
+export interface UploadFileFunction {
+  (options: SingleUploadFileOptions): Promise<string>;
+  (options: MultipleUploadFileOptions): Promise<MultipleFileResponse>;
+}
+
+/**
+ * 上传文件
+ */
+export default function useUploadFile(): [boolean, UploadFileFunction];

todo/hooks/useUploadFile/index.js

@@ -0,0 +1,67 @@
+import { request } from "@cqsjjb/jjb-common-lib/http";
+import { useState } from "react";
+
+/**
+ * 上传文件 TODO
+ */
+function useUploadFile() {
+  // loading状态
+  const [loading, setLoading] = useState(false);
+
+  // 上传文件
+  const uploadFile = (options) => {
+    setLoading(true);
+
+    return new Promise((resolve, reject) => {
+      const { files = [], single = true, params = {} } = options;
+      const formData = new FormData();
+
+      // 将文件添加到formData中
+      files.forEach((f) => {
+        f.originFileObj && formData.append("files", f.originFileObj);
+      });
+
+      // 将额外携带的参数添加到formData中
+      Object.keys(params).forEach((key) => {
+        formData.append(key, params[key]);
+      });
+
+      // 获取待上传的文件
+      const filesLength = formData.getAll("files").length;
+
+      // 如果没有文件则返回老文件
+      if (filesLength === 0) {
+        setLoading(false);
+        resolve(
+          single
+            ? files?.[0]?.url || ""
+            : { files: files.map(f => f.url), id: "" },
+        );
+        return;
+      }
+
+      // 发送请求
+      request(single ? "单文件上传的接口" : "多文件上传的接口", "post", formData, { "Content-Type": "multipart/form-data" })
+        .then((res) => {
+          resolve(
+            single
+              ? res.data.url
+              : {
+                  files: [...res.data.files.map(f => f.url), ...files.filter(f => !f.originFileObj).map(f => f.url)],
+                  id: res.data.id,
+                },
+          );
+        })
+        .catch((err) => {
+          reject(err);
+        })
+        .finally(() => {
+          setLoading(false);
+        });
+    });
+  };
+
+  return [loading, uploadFile];
+}
+
+export default useUploadFile;