crud-page-react 0.0.5 → 0.0.7

package/dist/index.d.ts

@@ -150,6 +150,7 @@ interface ActionSchema {
         content?: string;
     };
     api?: ActionApiConfig;
+    apiKey?: string;
 }
 interface PaginationConfig {
     pageSize?: number;
@@ -160,11 +161,12 @@ 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[];
     actions?: ActionSchema[];

package/dist/index.esm.js

@@ -810,12 +810,40 @@ 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 = {};
+    for (const [key, value] of Object.entries(data)) {
+        if (typeof value === 'string' && value.includes('{{') && value.includes('}}')) {
+            // 替换模板变量 {{fieldName}}
+            result[key] = value.replace(/\{\{(\w+)\}\}/g, (match, fieldName) => {
+                const fieldValue = record[fieldName];
+                return fieldValue !== undefined ? String(fieldValue) : match;
+            });
+        }
+        else {
+            result[key] = value;
+        }
+    }
+    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) {
@@ -865,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);
@@ -915,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();
         }
@@ -928,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') {
@@ -940,31 +1005,55 @@ const CrudPage = ({ schema, initialData = [], apiRequest: customApiRequest }) =>
         else if (action.type === 'delete') {
             handleDelete(record);
         }
-        else if (action.type === 'custom' && action.api) {
+        else if (action.type === 'custom') {
             // 处理自定义 action 的 API 调用
+            let apiConfig;
+            // 优先使用 apiKey 引用统一配置，向后兼容 api 直接配置
+            if (action.apiKey) {
+                const apiDef = schema.api[action.apiKey];
+                if (typeof apiDef === 'string') {
+                    // 简单字符串 URL 配置
+                    apiConfig = {
+                        url: apiDef,
+                        method: 'GET',
+                        responseType: 'json'
+                    };
+                }
+                else if (apiDef && typeof apiDef === 'object') {
+                    // 完整的 API 配置对象
+                    apiConfig = apiDef;
+                }
+            }
+            else if (action.api) {
+                // 向后兼容：使用 action.api 配置
+                apiConfig = action.api;
+            }
+            if (!apiConfig) {
+                messageApi.error(`${action.label}未配置 API`);
+                return;
+            }
             try {
                 // 构建 URL，动态替换占位符
-                let url = action.api.url;
-                // 替换所有 :fieldName 格式的占位符
+                let url = apiConfig.url;
                 url = url.replace(/:(\w+)/g, (match, fieldName) => {
                     const value = record[fieldName];
                     return value !== undefined ? String(value) : match;
                 });
                 // 构建请求选项
                 const options = {
-                    method: action.api.method,
-                    headers: Object.assign({ 'Content-Type': 'application/json' }, action.api.headers)
+                    method: apiConfig.method || 'GET',
+                    headers: Object.assign({ 'Content-Type': 'application/json' }, apiConfig.headers)
                 };
-                // 添加请求体数据
-                if (action.api.data && ['POST', 'PUT', 'PATCH'].includes(action.api.method)) {
-                    options.body = JSON.stringify(Object.assign(Object.assign({}, action.api.data), { 
-                        // 可以添加动态数据
-                        recordId: record[rowKey], timestamp: new Date().toISOString() }));
+                // 处理请求体数据
+                if (apiConfig.data && ['POST', 'PUT', 'PATCH'].includes(apiConfig.method || 'GET')) {
+                    // 支持模板变量替换
+                    const processedData = processTemplateData(apiConfig.data, record);
+                    options.body = JSON.stringify(Object.assign(Object.assign({}, processedData), { recordId: record[rowKey], timestamp: new Date().toISOString() }));
                 }
                 // 调用 API
                 const response = await request(url, options);
                 // 处理特殊响应类型
-                if (action.api.responseType === 'blob') {
+                if (apiConfig.responseType === 'blob') {
                     // 处理文件下载
                     const blob = new Blob([response]);
                     const downloadUrl = URL.createObjectURL(blob);
@@ -998,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();
@@ -1017,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();