crud-page-react 0.0.6 → 0.0.7

package/dist/index.d.ts

@@ -161,11 +161,11 @@ interface CrudPageSchema {
     id: string;
     title: string;
     api: {
-        list: string;
-        create?: string;
-        update?: string;
-        delete?: string;
-        detail?: string;
+        list: string | ActionApiConfig;
+        create?: string | ActionApiConfig;
+        update?: string | ActionApiConfig;
+        delete?: string | ActionApiConfig;
+        detail?: string | ActionApiConfig;
         [key: string]: string | ActionApiConfig | undefined;
     };
     fields: FieldSchema[];

package/dist/index.esm.js

@@ -810,13 +810,6 @@ function DynamicForm({ schema, mode, visible, initialValues, onSubmit, onCancel,
 }
 
 const { Title } = Typography;
-/** 动态替换 URL 模板中的占位符 */
-function buildUrl(template, record) {
-    return template.replace(/:(\w+)/g, (match, fieldName) => {
-        const value = record[fieldName];
-        return value !== undefined ? String(value) : match;
-    });
-}
 /** 处理模板数据，支持 {{fieldName}} 格式的变量替换 */
 function processTemplateData(data, record) {
     const result = {};
@@ -834,6 +827,24 @@ function processTemplateData(data, record) {
     }
     return result;
 }
+/** 解析 API 配置，支持字符串和对象两种格式 */
+function parseApiConfig(apiDef) {
+    if (!apiDef)
+        return undefined;
+    if (typeof apiDef === 'string') {
+        // 简单字符串 URL 配置
+        return {
+            url: apiDef,
+            method: 'GET',
+            responseType: 'json'
+        };
+    }
+    else if (typeof apiDef === 'object') {
+        // 完整的 API 配置对象
+        return apiDef;
+    }
+    return undefined;
+}
 /** 通用请求封装 */
 async function apiRequest(url, options) {
     const res = await fetch(url, Object.assign({ headers: { 'Content-Type': 'application/json' } }, options));
@@ -882,19 +893,39 @@ const CrudPage = ({ schema, initialData = [], apiRequest: customApiRequest }) =>
     }, []);
     // ---------- 获取列表 ----------
     const fetchList = useCallback(async (params = filterParams, p = page, ps = pageSize) => {
-        if (!schema.api.list) {
+        const listApiConfig = parseApiConfig(schema.api.list);
+        if (!listApiConfig) {
             // 没有配置 API，使用初始数据
             initializeData();
             return;
         }
         setLoading(true);
         try {
+            // 构建查询参数
             const query = new URLSearchParams({ page: String(p), pageSize: String(ps) });
             Object.entries(params).forEach(([k, v]) => {
                 if (v !== undefined && v !== null && v !== '')
                     query.set(k, String(v));
             });
-            const json = await request(`${schema.api.list}?${query}`);
+            // 构建请求选项
+            const options = {
+                method: listApiConfig.method || 'GET',
+                headers: Object.assign({ 'Content-Type': 'application/json' }, listApiConfig.headers)
+            };
+            // 如果是 POST 请求，将查询参数放到请求体中
+            let url = listApiConfig.url;
+            if (listApiConfig.method === 'POST') {
+                const queryParams = {};
+                query.forEach((value, key) => {
+                    queryParams[key] = value;
+                });
+                const requestData = Object.assign(Object.assign({}, queryParams), listApiConfig.data);
+                options.body = JSON.stringify(requestData);
+            }
+            else {
+                url = `${url}?${query}`;
+            }
+            const json = await request(url, options);
             const { list, total: tot } = extractListResponse(json);
             setData(list);
             setTotal(tot);
@@ -932,12 +963,29 @@ const CrudPage = ({ schema, initialData = [], apiRequest: customApiRequest }) =>
     }, []);
     // ---------- 删除 ----------
     const handleDelete = useCallback(async (record) => {
-        if (!schema.api.delete) {
+        const deleteApiConfig = parseApiConfig(schema.api.delete);
+        if (!deleteApiConfig) {
             messageApi.error('删除功能未配置');
             return;
         }
         try {
-            await request(buildUrl(schema.api.delete, record), { method: 'DELETE' });
+            // 构建 URL，动态替换占位符
+            let url = deleteApiConfig.url;
+            url = url.replace(/:(\w+)/g, (match, fieldName) => {
+                const value = record[fieldName];
+                return value !== undefined ? String(value) : match;
+            });
+            // 构建请求选项
+            const options = {
+                method: deleteApiConfig.method || 'DELETE',
+                headers: Object.assign({ 'Content-Type': 'application/json' }, deleteApiConfig.headers)
+            };
+            // 处理请求体数据
+            if (deleteApiConfig.data && ['POST', 'PUT', 'PATCH', 'DELETE'].includes(deleteApiConfig.method || 'DELETE')) {
+                const processedData = processTemplateData(deleteApiConfig.data, record);
+                options.body = JSON.stringify(Object.assign(Object.assign({}, processedData), { recordId: record[rowKey], timestamp: new Date().toISOString() }));
+            }
+            await request(url, options);
             messageApi.success('删除成功');
             fetchList();
         }
@@ -945,7 +993,7 @@ const CrudPage = ({ schema, initialData = [], apiRequest: customApiRequest }) =>
             console.error('Delete failed:', error);
             messageApi.error('删除失败，请稍后重试');
         }
-    }, [request, schema.api.delete, fetchList, messageApi]);
+    }, [request, schema.api.delete, fetchList, messageApi, rowKey]);
     // ---------- 操作列点击 ----------
     const handleAction = useCallback(async (action, record) => {
         if (action.type === 'view') {
@@ -1039,15 +1087,25 @@ const CrudPage = ({ schema, initialData = [], apiRequest: customApiRequest }) =>
     const handleFormOk = useCallback(async (values) => {
         const isCreate = modalState.mode === 'create';
         if (isCreate) {
-            if (!schema.api.create) {
+            const createApiConfig = parseApiConfig(schema.api.create);
+            if (!createApiConfig) {
                 messageApi.error('新增功能未配置');
                 return;
             }
             try {
-                await request(schema.api.create, {
-                    method: 'POST',
-                    body: JSON.stringify(values),
-                });
+                // 构建请求选项
+                const options = {
+                    method: createApiConfig.method || 'POST',
+                    headers: Object.assign({ 'Content-Type': 'application/json' }, createApiConfig.headers)
+                };
+                // 处理请求体数据
+                let requestData = Object.assign({}, values);
+                if (createApiConfig.data) {
+                    const processedData = processTemplateData(createApiConfig.data, values);
+                    requestData = Object.assign(Object.assign(Object.assign({}, requestData), processedData), { timestamp: new Date().toISOString() });
+                }
+                options.body = JSON.stringify(requestData);
+                await request(createApiConfig.url, options);
                 messageApi.success('新增成功');
                 setModalState({ open: false, mode: 'create' });
                 fetchList();
@@ -1058,15 +1116,31 @@ const CrudPage = ({ schema, initialData = [], apiRequest: customApiRequest }) =>
             }
         }
         else {
-            if (!schema.api.update) {
+            const updateApiConfig = parseApiConfig(schema.api.update);
+            if (!updateApiConfig) {
                 messageApi.error('编辑功能未配置');
                 return;
             }
             try {
-                await request(buildUrl(schema.api.update, values), {
-                    method: 'PUT',
-                    body: JSON.stringify(values),
+                // 构建 URL，动态替换占位符
+                let url = updateApiConfig.url;
+                url = url.replace(/:(\w+)/g, (match, fieldName) => {
+                    const value = values[fieldName];
+                    return value !== undefined ? String(value) : match;
                 });
+                // 构建请求选项
+                const options = {
+                    method: updateApiConfig.method || 'PUT',
+                    headers: Object.assign({ 'Content-Type': 'application/json' }, updateApiConfig.headers)
+                };
+                // 处理请求体数据
+                let requestData = Object.assign({}, values);
+                if (updateApiConfig.data) {
+                    const processedData = processTemplateData(updateApiConfig.data, values);
+                    requestData = Object.assign(Object.assign(Object.assign({}, requestData), processedData), { timestamp: new Date().toISOString() });
+                }
+                options.body = JSON.stringify(requestData);
+                await request(url, options);
                 messageApi.success('编辑成功');
                 setModalState({ open: false, mode: 'create' });
                 fetchList();