From f2dcf2c87b8b6c5d6c1333b5993b4c3fa05dd47c Mon Sep 17 00:00:00 2001 From: LiuJiaNan <15703339975@163.com> Date: Tue, 28 Oct 2025 11:28:18 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96FormItemsRenderer=E5=92=8CTab?= =?UTF-8?q?le?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/FormBuilder/FormBuilder.js | 1 + components/Table/index.js | 3 +- package.json | 1 + todo/hooks/useDeleteFile/index.d.ts | 19 ++++++++ todo/hooks/useDeleteFile/index.js | 41 ++++++++++++++++ todo/hooks/useUploadFile/index.d.ts | 41 ++++++++++++++++ todo/hooks/useUploadFile/index.js | 67 +++++++++++++++++++++++++++ 7 files changed, 172 insertions(+), 1 deletion(-) create mode 100644 todo/hooks/useDeleteFile/index.d.ts create mode 100644 todo/hooks/useDeleteFile/index.js create mode 100644 todo/hooks/useUploadFile/index.d.ts create mode 100644 todo/hooks/useUploadFile/index.js diff --git a/components/FormBuilder/FormBuilder.js b/components/FormBuilder/FormBuilder.js index c800e6e..e797297 100644 --- a/components/FormBuilder/FormBuilder.js +++ b/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} > diff --git a/components/Table/index.js b/components/Table/index.js index 45fe129..9acc08c 100644 --- a/components/Table/index.js +++ b/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 ; + return
; } export default TablePro; diff --git a/package.json b/package.json index c0be15e..a36eb51 100644 --- a/package.json +++ b/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", diff --git a/todo/hooks/useDeleteFile/index.d.ts b/todo/hooks/useDeleteFile/index.d.ts new file mode 100644 index 0000000..f5854f2 --- /dev/null +++ b/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; +} + +export type DeleteFileFunction = (options: DeleteFileOptions) => Promise; + +/** + * 删除文件 + */ +export default function useDeleteFile(): [boolean, DeleteFileFunction]; diff --git a/todo/hooks/useDeleteFile/index.js b/todo/hooks/useDeleteFile/index.js new file mode 100644 index 0000000..6d4ba8a --- /dev/null +++ b/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; diff --git a/todo/hooks/useUploadFile/index.d.ts b/todo/hooks/useUploadFile/index.d.ts new file mode 100644 index 0000000..7a0b207 --- /dev/null +++ b/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; +} + +export interface MultipleUploadFileOptions { + /** 要上传的文件 */ + files: UploadFile[]; + /** 是否单文件上传 */ + single: false; + /** 上传的参数 */ + params?: Record; +} + +export interface MultipleFileResponse { + /** 文件列表 */ + files: string[]; + /** 文件ID */ + id: string; + [key: string]: any; +} + +export interface UploadFileFunction { + (options: SingleUploadFileOptions): Promise; + (options: MultipleUploadFileOptions): Promise; +} + +/** + * 上传文件 + */ +export default function useUploadFile(): [boolean, UploadFileFunction]; diff --git a/todo/hooks/useUploadFile/index.js b/todo/hooks/useUploadFile/index.js new file mode 100644 index 0000000..4294065 --- /dev/null +++ b/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;