zy-react-library 1.0.103 → 1.0.104
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.
|
@@ -5,7 +5,7 @@ type FormValues = Record<string, any>;
|
|
|
5
5
|
/**
|
|
6
6
|
* useTable 钩子的选项参数
|
|
7
7
|
*/
|
|
8
|
-
export interface UseTableOptions<TData extends Data, TParams extends Params> extends Omit<AntdTableOptions<TData, TParams>, "defaultParams" | "form"> {
|
|
8
|
+
export interface UseTableOptions<TData extends Data, TParams extends Params> extends Omit<AntdTableOptions<TData, TParams>, "defaultParams" | "form" | "defaultType"> {
|
|
9
9
|
/** 是否使用分页，默认是 */
|
|
10
10
|
usePagination?: boolean;
|
|
11
11
|
/** 默认分页参数，默认 { current: 1; pageSize: 10 } */
|
|
@@ -69,7 +69,7 @@ export interface UseTableResult<TData extends Data, TParams extends Params> exte
|
|
|
69
69
|
*/
|
|
70
70
|
declare function useTable<TData extends Data, TParams extends Params>(
|
|
71
71
|
service: Service<TData, TParams>,
|
|
72
|
-
options?: UseTableOptions<TData, TParams
|
|
72
|
+
options?: UseTableOptions<TData, TParams>,
|
|
73
73
|
): UseTableResult<TData, TParams>;
|
|
74
74
|
|
|
75
75
|
export default useTable;
|
package/hooks/useTable/index.js
CHANGED
|
@@ -1,8 +1,5 @@
|
|
|
1
|
-
import { tools } from "@cqsjjb/jjb-common-lib";
|
|
2
1
|
import { useAntdTable } from "ahooks";
|
|
3
|
-
import
|
|
4
|
-
|
|
5
|
-
const { query } = tools.router;
|
|
2
|
+
import useUrlQueryCriteria from "../useUrlQueryCriteria";
|
|
6
3
|
|
|
7
4
|
/**
|
|
8
5
|
* 获取数据
|
|
@@ -38,67 +35,6 @@ function getService(service, getExtraParams = {}, transform) {
|
|
|
38
35
|
};
|
|
39
36
|
}
|
|
40
37
|
|
|
41
|
-
/**
|
|
42
|
-
* 将搜索表单项和分页参数保存到 URL 中
|
|
43
|
-
*/
|
|
44
|
-
function setQuery(searchForm, pagination) {
|
|
45
|
-
// 将对象转换为键值对字符串格式
|
|
46
|
-
const getJoinString = (data) => {
|
|
47
|
-
const keys = [];
|
|
48
|
-
const values = [];
|
|
49
|
-
Object.entries(data).forEach(([key, value]) => {
|
|
50
|
-
if (value) {
|
|
51
|
-
keys.push(key);
|
|
52
|
-
if (Array.isArray(value)) {
|
|
53
|
-
// 数组值使用方括号包裹，并用竖线分隔
|
|
54
|
-
values.push(`[${value.join("|")}]`);
|
|
55
|
-
}
|
|
56
|
-
else {
|
|
57
|
-
values.push(value);
|
|
58
|
-
}
|
|
59
|
-
}
|
|
60
|
-
});
|
|
61
|
-
return { keys: keys.join(","), values: values.join(",") };
|
|
62
|
-
};
|
|
63
|
-
|
|
64
|
-
// 获取搜索表单和分页数据的键值对字符串
|
|
65
|
-
const searchFormData = getJoinString(searchForm);
|
|
66
|
-
const paginationData = getJoinString(pagination);
|
|
67
|
-
|
|
68
|
-
// 将数据存储到 URL 查询参数中
|
|
69
|
-
query.searchFormKeys = searchFormData.keys;
|
|
70
|
-
query.searchFormValues = searchFormData.values;
|
|
71
|
-
query.paginationKeys = paginationData.keys;
|
|
72
|
-
query.paginationValues = paginationData.values;
|
|
73
|
-
}
|
|
74
|
-
|
|
75
|
-
/**
|
|
76
|
-
* 从 URL 中获取查询参数
|
|
77
|
-
*/
|
|
78
|
-
function getQuery(keysStr, valuesStr) {
|
|
79
|
-
const query = useGetUrlQuery();
|
|
80
|
-
// 将键值字符串分割为数组
|
|
81
|
-
const keys = query[keysStr] ? query[keysStr].split(",") : [];
|
|
82
|
-
const values = query[valuesStr] ? query[valuesStr].split(",") : [];
|
|
83
|
-
|
|
84
|
-
// 构建结果对象
|
|
85
|
-
const resultMap = {};
|
|
86
|
-
keys.forEach((key, index) => {
|
|
87
|
-
if (values[index]) {
|
|
88
|
-
// 处理数组值（方括号包裹的值）
|
|
89
|
-
if (values[index].startsWith("[") && values[index].endsWith("]")) {
|
|
90
|
-
const arrayContent = values[index].substring(1, values[index].length - 1);
|
|
91
|
-
resultMap[key] = arrayContent ? arrayContent.split("|") : [];
|
|
92
|
-
}
|
|
93
|
-
else {
|
|
94
|
-
// 处理普通值
|
|
95
|
-
resultMap[key] = values[index];
|
|
96
|
-
}
|
|
97
|
-
}
|
|
98
|
-
});
|
|
99
|
-
return resultMap;
|
|
100
|
-
}
|
|
101
|
-
|
|
102
38
|
/**
|
|
103
39
|
* 自定义 useTable，继承 ahooks 的 useAntdTable，根据需求进行扩展
|
|
104
40
|
*/
|
|
@@ -120,9 +56,11 @@ function useTable(service, options) {
|
|
|
120
56
|
...restRestOptions
|
|
121
57
|
} = restOptions;
|
|
122
58
|
|
|
59
|
+
const { setUrlCriteriaQuery, getUrlCriteriaQuery } = useUrlQueryCriteria();
|
|
60
|
+
|
|
123
61
|
// 获取存储的查询条件
|
|
124
|
-
const storageQueryCriteriaSearchForm = useStorageQueryCriteria ?
|
|
125
|
-
const storageQueryCriteriaPagination = useStorageQueryCriteria && usePagination ?
|
|
62
|
+
const storageQueryCriteriaSearchForm = useStorageQueryCriteria ? getUrlCriteriaQuery("searchFormKeys", "searchFormValues") : {};
|
|
63
|
+
const storageQueryCriteriaPagination = useStorageQueryCriteria && usePagination ? getUrlCriteriaQuery("paginationKeys", "paginationValues") : {};
|
|
126
64
|
|
|
127
65
|
// 确定实际使用的搜索表单和分页参数
|
|
128
66
|
const actualSearchForm = Object.keys(storageQueryCriteriaSearchForm).length > 0 ? storageQueryCriteriaSearchForm : {};
|
|
@@ -140,7 +78,7 @@ function useTable(service, options) {
|
|
|
140
78
|
// 执行成功回调，为了保留 ahooks 的 onSuccess 回调
|
|
141
79
|
restOptions.onSuccess && restOptions.onSuccess(data, params);
|
|
142
80
|
// 存储查询条件和分页到 URL
|
|
143
|
-
useStorageQueryCriteria &&
|
|
81
|
+
useStorageQueryCriteria && setUrlCriteriaQuery(
|
|
144
82
|
params[1] ?? {},
|
|
145
83
|
usePagination
|
|
146
84
|
? { current: res.tableProps.pagination.current, pageSize: res.tableProps.pagination.pageSize }
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
export type SetUrlCriteriaQueryFunction = (searchForm: Record<string, any>, pagination: Record<string, any>) => void;
|
|
2
|
+
|
|
3
|
+
export type GetUrlCriteriaQueryFunction = (keysStr: string, valuesStr: string) => Record<string, any>;
|
|
4
|
+
|
|
5
|
+
/**
|
|
6
|
+
* 处理搜索条件缓存到 URL
|
|
7
|
+
*/
|
|
8
|
+
export default function useUrlQueryCriteria(): { setUrlCriteriaQuery: SetUrlCriteriaQueryFunction; getUrlCriteriaQuery: GetUrlCriteriaQueryFunction };
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
import { tools } from "@cqsjjb/jjb-common-lib";
|
|
2
|
+
import useGetUrlQuery from "../useGetUrlQuery";
|
|
3
|
+
|
|
4
|
+
const { query } = tools.router;
|
|
5
|
+
|
|
6
|
+
/**
|
|
7
|
+
* 处理搜索条件缓存到 URL
|
|
8
|
+
*/
|
|
9
|
+
export default function useUrlQueryCriteria() {
|
|
10
|
+
/**
|
|
11
|
+
* 将搜索表单项和分页参数缓存到 URL 中
|
|
12
|
+
*/
|
|
13
|
+
function setUrlCriteriaQuery(searchForm, pagination) {
|
|
14
|
+
// 将对象转换为键值对字符串格式
|
|
15
|
+
const getJoinString = (data) => {
|
|
16
|
+
const keys = [];
|
|
17
|
+
const values = [];
|
|
18
|
+
Object.entries(data).forEach(([key, value]) => {
|
|
19
|
+
if (value) {
|
|
20
|
+
keys.push(key);
|
|
21
|
+
if (Array.isArray(value)) {
|
|
22
|
+
// 数组值使用方括号包裹，并用竖线分隔
|
|
23
|
+
values.push(`[${value.join("|")}]`);
|
|
24
|
+
}
|
|
25
|
+
else {
|
|
26
|
+
values.push(value);
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
});
|
|
30
|
+
return { keys: keys.join(","), values: values.join(",") };
|
|
31
|
+
};
|
|
32
|
+
|
|
33
|
+
// 获取搜索表单和分页数据的键值对字符串
|
|
34
|
+
const searchFormData = getJoinString(searchForm);
|
|
35
|
+
const paginationData = getJoinString(pagination);
|
|
36
|
+
|
|
37
|
+
// 将数据存储到 URL 查询参数中
|
|
38
|
+
query.searchFormKeys = searchFormData.keys;
|
|
39
|
+
query.searchFormValues = searchFormData.values;
|
|
40
|
+
query.paginationKeys = paginationData.keys;
|
|
41
|
+
query.paginationValues = paginationData.values;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
/**
|
|
45
|
+
* 从 URL 中获取缓存的查询参数
|
|
46
|
+
*/
|
|
47
|
+
function getUrlCriteriaQuery(keysStr, valuesStr) {
|
|
48
|
+
const query = useGetUrlQuery();
|
|
49
|
+
// 将键值字符串分割为数组
|
|
50
|
+
const keys = query[keysStr] ? query[keysStr].split(",") : [];
|
|
51
|
+
const values = query[valuesStr] ? query[valuesStr].split(",") : [];
|
|
52
|
+
|
|
53
|
+
// 构建结果对象
|
|
54
|
+
const resultMap = {};
|
|
55
|
+
keys.forEach((key, index) => {
|
|
56
|
+
if (values[index]) {
|
|
57
|
+
// 处理数组值（方括号包裹的值）
|
|
58
|
+
if (values[index].startsWith("[") && values[index].endsWith("]")) {
|
|
59
|
+
const arrayContent = values[index].substring(1, values[index].length - 1);
|
|
60
|
+
resultMap[key] = arrayContent ? arrayContent.split("|") : [];
|
|
61
|
+
}
|
|
62
|
+
else {
|
|
63
|
+
// 处理普通值
|
|
64
|
+
resultMap[key] = values[index];
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
});
|
|
68
|
+
return resultMap;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
return { setUrlCriteriaQuery, getUrlCriteriaQuery };
|
|
72
|
+
}
|