crud-page-react 0.0.4 → 0.0.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +50 -1
- package/dist/index.esm.js +71 -85
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +71 -85
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -848,8 +848,8 @@ const CrudPage = ({ schema, initialData = [], apiRequest: customApiRequest }) =>
|
|
|
848
848
|
const rowKey = schema.rowKey || 'id';
|
|
849
849
|
// 使用传入的apiRequest或默认的
|
|
850
850
|
const request = customApiRequest || apiRequest;
|
|
851
|
-
//
|
|
852
|
-
const
|
|
851
|
+
// 初始数据引用
|
|
852
|
+
const initialDataRef = react.useRef(initialData);
|
|
853
853
|
const [data, setData] = react.useState([]);
|
|
854
854
|
const [loading, setLoading] = react.useState(false);
|
|
855
855
|
const [total, setTotal] = react.useState(0);
|
|
@@ -858,33 +858,20 @@ const CrudPage = ({ schema, initialData = [], apiRequest: customApiRequest }) =>
|
|
|
858
858
|
const [pageSize, setPageSize] = react.useState(((_a = schema.pagination) === null || _a === void 0 ? void 0 : _a.pageSize) || 10);
|
|
859
859
|
const [modalState, setModalState] = react.useState({ open: false, mode: 'create' });
|
|
860
860
|
const [messageApi, contextHolder] = antd.message.useMessage();
|
|
861
|
-
// ----------
|
|
862
|
-
const
|
|
863
|
-
|
|
864
|
-
|
|
865
|
-
|
|
866
|
-
|
|
867
|
-
if (key.endsWith('_min'))
|
|
868
|
-
return Number(row[key.slice(0, -4)]) >= Number(val);
|
|
869
|
-
if (key.endsWith('_max'))
|
|
870
|
-
return Number(row[key.slice(0, -4)]) <= Number(val);
|
|
871
|
-
if (key.endsWith('_start') || key.endsWith('_end'))
|
|
872
|
-
return true;
|
|
873
|
-
const rowVal = row[key];
|
|
874
|
-
if (Array.isArray(rowVal)) {
|
|
875
|
-
return Array.isArray(val) ? val.some(v => rowVal.includes(v)) : rowVal.includes(val);
|
|
876
|
-
}
|
|
877
|
-
if (typeof val === 'string')
|
|
878
|
-
return String(rowVal).toLowerCase().includes(val.toLowerCase());
|
|
879
|
-
return rowVal === val;
|
|
880
|
-
});
|
|
881
|
-
});
|
|
882
|
-
const start = (p - 1) * ps;
|
|
883
|
-
setData(filtered.slice(start, start + ps));
|
|
884
|
-
setTotal(filtered.length);
|
|
861
|
+
// ---------- 初始化数据 ----------
|
|
862
|
+
const initializeData = react.useCallback(() => {
|
|
863
|
+
if (initialDataRef.current.length > 0) {
|
|
864
|
+
setData(initialDataRef.current);
|
|
865
|
+
setTotal(initialDataRef.current.length);
|
|
866
|
+
}
|
|
885
867
|
}, []);
|
|
886
868
|
// ---------- 获取列表 ----------
|
|
887
869
|
const fetchList = react.useCallback(async (params = filterParams, p = page, ps = pageSize) => {
|
|
870
|
+
if (!schema.api.list) {
|
|
871
|
+
// 没有配置 API,使用初始数据
|
|
872
|
+
initializeData();
|
|
873
|
+
return;
|
|
874
|
+
}
|
|
888
875
|
setLoading(true);
|
|
889
876
|
try {
|
|
890
877
|
const query = new URLSearchParams({ page: String(p), pageSize: String(ps) });
|
|
@@ -897,14 +884,22 @@ const CrudPage = ({ schema, initialData = [], apiRequest: customApiRequest }) =>
|
|
|
897
884
|
setData(list);
|
|
898
885
|
setTotal(tot);
|
|
899
886
|
}
|
|
900
|
-
catch (
|
|
901
|
-
|
|
902
|
-
|
|
887
|
+
catch (error) {
|
|
888
|
+
console.error('Failed to fetch list:', error);
|
|
889
|
+
messageApi.error('获取数据失败,请检查网络连接或联系管理员');
|
|
890
|
+
// 如果有初始数据,显示初始数据
|
|
891
|
+
if (initialDataRef.current.length > 0) {
|
|
892
|
+
initializeData();
|
|
893
|
+
}
|
|
894
|
+
else {
|
|
895
|
+
setData([]);
|
|
896
|
+
setTotal(0);
|
|
897
|
+
}
|
|
903
898
|
}
|
|
904
899
|
finally {
|
|
905
900
|
setLoading(false);
|
|
906
901
|
}
|
|
907
|
-
}, [request, schema.api.list, filterParams, page, pageSize,
|
|
902
|
+
}, [request, schema.api.list, filterParams, page, pageSize, initializeData, messageApi]);
|
|
908
903
|
// 初始加载 & 参数变化时重新请求
|
|
909
904
|
react.useEffect(() => {
|
|
910
905
|
fetchList(filterParams, page, pageSize);
|
|
@@ -922,22 +917,20 @@ const CrudPage = ({ schema, initialData = [], apiRequest: customApiRequest }) =>
|
|
|
922
917
|
}, []);
|
|
923
918
|
// ---------- 删除 ----------
|
|
924
919
|
const handleDelete = react.useCallback(async (record) => {
|
|
925
|
-
|
|
926
|
-
|
|
927
|
-
|
|
928
|
-
|
|
929
|
-
|
|
930
|
-
|
|
931
|
-
|
|
932
|
-
|
|
933
|
-
|
|
934
|
-
|
|
935
|
-
|
|
920
|
+
if (!schema.api.delete) {
|
|
921
|
+
messageApi.error('删除功能未配置');
|
|
922
|
+
return;
|
|
923
|
+
}
|
|
924
|
+
try {
|
|
925
|
+
await request(buildUrl(schema.api.delete, record), { method: 'DELETE' });
|
|
926
|
+
messageApi.success('删除成功');
|
|
927
|
+
fetchList();
|
|
928
|
+
}
|
|
929
|
+
catch (error) {
|
|
930
|
+
console.error('Delete failed:', error);
|
|
931
|
+
messageApi.error('删除失败,请稍后重试');
|
|
936
932
|
}
|
|
937
|
-
|
|
938
|
-
localFilter(filterParams, page, pageSize);
|
|
939
|
-
messageApi.success('删除成功(演示模式)');
|
|
940
|
-
}, [request, schema.api.delete, rowKey, fetchList, localFilter, filterParams, page, pageSize, messageApi]);
|
|
933
|
+
}, [request, schema.api.delete, fetchList, messageApi]);
|
|
941
934
|
// ---------- 操作列点击 ----------
|
|
942
935
|
const handleAction = react.useCallback(async (action, record) => {
|
|
943
936
|
if (action.type === 'view') {
|
|
@@ -1007,52 +1000,45 @@ const CrudPage = ({ schema, initialData = [], apiRequest: customApiRequest }) =>
|
|
|
1007
1000
|
const handleFormOk = react.useCallback(async (values) => {
|
|
1008
1001
|
const isCreate = modalState.mode === 'create';
|
|
1009
1002
|
if (isCreate) {
|
|
1010
|
-
if (schema.api.create) {
|
|
1011
|
-
|
|
1012
|
-
|
|
1013
|
-
|
|
1014
|
-
|
|
1015
|
-
|
|
1016
|
-
|
|
1017
|
-
|
|
1018
|
-
|
|
1019
|
-
|
|
1020
|
-
}
|
|
1021
|
-
|
|
1022
|
-
|
|
1023
|
-
|
|
1003
|
+
if (!schema.api.create) {
|
|
1004
|
+
messageApi.error('新增功能未配置');
|
|
1005
|
+
return;
|
|
1006
|
+
}
|
|
1007
|
+
try {
|
|
1008
|
+
await request(schema.api.create, {
|
|
1009
|
+
method: 'POST',
|
|
1010
|
+
body: JSON.stringify(values),
|
|
1011
|
+
});
|
|
1012
|
+
messageApi.success('新增成功');
|
|
1013
|
+
setModalState({ open: false, mode: 'create' });
|
|
1014
|
+
fetchList();
|
|
1015
|
+
}
|
|
1016
|
+
catch (error) {
|
|
1017
|
+
console.error('Create failed:', error);
|
|
1018
|
+
messageApi.error('新增失败,请稍后重试');
|
|
1024
1019
|
}
|
|
1025
|
-
const newRecord = Object.assign({ [rowKey]: `local-${Date.now()}` }, values);
|
|
1026
|
-
localDataRef.current = [newRecord, ...localDataRef.current];
|
|
1027
|
-
localFilter(filterParams, 1, pageSize);
|
|
1028
|
-
setPage(1);
|
|
1029
|
-
messageApi.success('新增成功(演示模式)');
|
|
1030
1020
|
}
|
|
1031
1021
|
else {
|
|
1032
|
-
|
|
1033
|
-
|
|
1034
|
-
|
|
1035
|
-
|
|
1036
|
-
|
|
1037
|
-
|
|
1038
|
-
|
|
1039
|
-
|
|
1040
|
-
|
|
1041
|
-
|
|
1042
|
-
|
|
1043
|
-
|
|
1044
|
-
|
|
1045
|
-
|
|
1046
|
-
|
|
1022
|
+
if (!schema.api.update) {
|
|
1023
|
+
messageApi.error('编辑功能未配置');
|
|
1024
|
+
return;
|
|
1025
|
+
}
|
|
1026
|
+
try {
|
|
1027
|
+
await request(buildUrl(schema.api.update, values), {
|
|
1028
|
+
method: 'PUT',
|
|
1029
|
+
body: JSON.stringify(values),
|
|
1030
|
+
});
|
|
1031
|
+
messageApi.success('编辑成功');
|
|
1032
|
+
setModalState({ open: false, mode: 'create' });
|
|
1033
|
+
fetchList();
|
|
1034
|
+
}
|
|
1035
|
+
catch (error) {
|
|
1036
|
+
console.error('Update failed:', error);
|
|
1037
|
+
messageApi.error('编辑失败,请稍后重试');
|
|
1047
1038
|
}
|
|
1048
|
-
localDataRef.current = localDataRef.current.map(r => r[rowKey] === id ? Object.assign(Object.assign({}, r), values) : r);
|
|
1049
|
-
localFilter(filterParams, page, pageSize);
|
|
1050
|
-
messageApi.success('编辑成功(演示模式)');
|
|
1051
1039
|
}
|
|
1052
|
-
setModalState({ open: false, mode: 'create' });
|
|
1053
1040
|
}, [
|
|
1054
|
-
request, modalState.mode, schema.api,
|
|
1055
|
-
fetchList, localFilter, filterParams, page, pageSize, messageApi,
|
|
1041
|
+
request, modalState.mode, schema.api, fetchList, messageApi,
|
|
1056
1042
|
]);
|
|
1057
1043
|
return (jsxRuntime.jsxs("div", { style: { padding: 24, background: '#f5f6fa', minHeight: '100vh' }, children: [contextHolder, jsxRuntime.jsxs("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }, children: [jsxRuntime.jsx(Title, { level: 4, style: { margin: 0 }, children: schema.title }), schema.api.create && (jsxRuntime.jsx(antd.Button, { type: "primary", icon: jsxRuntime.jsx(icons.PlusOutlined, {}), onClick: () => setModalState({ open: true, mode: 'create', record: undefined }), children: schema.createButtonLabel || '新增' }))] }), jsxRuntime.jsx(DynamicFilter, { schema: schema, onSearch: handleSearch, onReset: () => handleSearch({}) }), jsxRuntime.jsx(DynamicTable, { schema: schema, data: data, loading: loading, pagination: {
|
|
1058
1044
|
current: page,
|