SkylerHu / antd-restful / #56

Committed 09 Sep 2025 06:37AM UTC coverage: 81.498% (+0.9%) from 80.648%

Build # #56

Build Type

push

Committed by

Commit Message

fix: 调整列表组件

- feat: 调整 RestTable 组件中 advancedSearch 参数控制搜索字段的展示
- fix: RouteBaseTable 需要透传 ref 参数，解决调用 RestTable 中组件方法的问题
- fix: 修复 RestTable 通过 ref 调用 refreshList 丢失参数的问题 (变个了函数顺序，依赖的函数放使用地方的上面)
- fix: RestTable 增加 `parseOptions` 和 `parseTypes` 可以配置处理 query 参数
    - query-string 在 本项目中默认设置了 `parseNumbers: true`
    - 虽然是 RestTable 增加的配置，但主要是在 RouteBaseTable 中用到将query参数转换成object
    - 在处理query中有超大数值会有溢出精度问题，可以设置为 False 当做字符串处理
- fix: RestTable 的 onFiltersChange 在处理回调值时`移除`跟 baseParams 和 forceParams 相同的值
    - 避免还原为原来值的情况下显示在路由上

Run Details

1284 of 1666 branches covered (77.07%)

Branch coverage included in aggregate %.

133 of 153 new or added lines in 7 files covered. (86.93%)

2 existing lines in 2 files now uncovered.

1698 of 1993 relevant lines covered (85.2%)

42.57 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

87.76

/src/components/RouteBaseTable.jsx

import React, { forwardRef, useCallback, useEffect, useRef, useState } from "react";
import PropTypes from "prop-types";
import { dequal as deepEqual } from "dequal";
import { parseQueryTypes, queryString } from "src/common/parser";
import { isEmpty, isFunction } from "src/common/typeTools";
import RestTable from "src/components/RestTable";
import { useDeepCompareMemoize } from "src/hooks";

// 因为兼容不了react-router v5和v6 版本，所以传递 location 进来，然后父类组件实现路由的变更
const RouteBaseTable = forwardRef(({ location, onSearchChange, restProps }, ref) => {
  const { parseOptions, parseTypes, onFiltersChange } = restProps;
  const searchRef = useRef(location.search);

  const memParseTypes = useDeepCompareMemoize(parseTypes);
  const memParseOptions = useDeepCompareMemoize(parseOptions);

  const [params, setParams] = useState();

  useEffect(() => {
    let query = queryString.parse(location.search, memParseOptions);
    if (memParseTypes) {
      // query-string > 9 支持直接 parasOptions 配置字段类型，但这个低版本node又不能使用
      // 主要是为了解决低版本 query参数中 超大int溢出 和 普通 int存在的场景，需要额外指定参数类型
      query = parseQueryTypes(query, memParseTypes);
    }
    setParams((oldV) => {
      const newV = { ...query };
      if (deepEqual(newV, oldV)) {
        return oldV;
      }
      return newV;
    });
  }, [location.search, memParseOptions, memParseTypes]);

  const onChange = useCallback(
    (values) => {
      const filters = { ...values };
      let changedSearch = queryString.stringify(filters, memParseOptions);
      if (isEmpty(changedSearch)) {
        changedSearch = "";
      } else {
        changedSearch = `?${changedSearch}`;
      }
      if (searchRef.current !== changedSearch) {
        searchRef.current = changedSearch;
        setParams(filters);
        if (isFunction(onSearchChange)) {
          onSearchChange(changedSearch);
        }
        if (isFunction(onFiltersChange)) {
          onFiltersChange(values);
        }
      }
    },
    [onFiltersChange, onSearchChange, memParseOptions]
  );

  if (params === undefined || params === null) {
    // 等待params根据search初始化完成
    return null;
  }

  return <RestTable ref={ref} {...restProps} routeParams={params} onFiltersChange={onChange} />;
});

RouteBaseTable.propTypes = {
  location: PropTypes.object,
  onSearchChange: PropTypes.func,
  restProps: PropTypes.object,
};

RouteBaseTable.displayName = "RouteBaseTable";

export default RouteBaseTable;

1	import React, { forwardRef, useCallback, useEffect, useRef, useState } from "react";
2	import PropTypes from "prop-types";
3	import { dequal as deepEqual } from "dequal";
4	import { parseQueryTypes, queryString } from "src/common/parser";
5	import { isEmpty, isFunction } from "src/common/typeTools";
6	import RestTable from "src/components/RestTable";
7	import { useDeepCompareMemoize } from "src/hooks";
8
9	// 因为兼容不了react-router v5和v6 版本，所以传递 location 进来，然后父类组件实现路由的变更
10	const RouteBaseTable = forwardRef(({ location, onSearchChange, restProps }, ref) => {	1✔
11	const { parseOptions, parseTypes, onFiltersChange } = restProps;	61✔
12	const searchRef = useRef(location.search);	61✔
13
14	const memParseTypes = useDeepCompareMemoize(parseTypes);	61✔
15	const memParseOptions = useDeepCompareMemoize(parseOptions);	61✔
16
17	const [params, setParams] = useState();	61✔
18
19	useEffect(() => {	61✔
20	let query = queryString.parse(location.search, memParseOptions);	27✔
21	if (memParseTypes) {	27!
22	// query-string > 9 支持直接 parasOptions 配置字段类型，但这个低版本node又不能使用
23	// 主要是为了解决低版本 query参数中超大int溢出和普通 int存在的场景，需要额外指定参数类型
NEW 24	query = parseQueryTypes(query, memParseTypes);	×
25	}
26	setParams((oldV) => {	27✔
27	const newV = { ...query };	27✔
28	if (deepEqual(newV, oldV)) {	27!
UNCOV 29	return oldV;	×
30	}
31	return newV;	27✔
32	});
33	}, [location.search, memParseOptions, memParseTypes]);
34
35	const onChange = useCallback(	61✔
36	(values) => {
37	const filters = { ...values };	6✔
38	let changedSearch = queryString.stringify(filters, memParseOptions);	6✔
39	if (isEmpty(changedSearch)) {	6!
40	changedSearch = "";	×
41	} else {
42	changedSearch = `?${changedSearch}`;	6✔
43	}
44	if (searchRef.current !== changedSearch) {	6✔
45	searchRef.current = changedSearch;	4✔
46	setParams(filters);	4✔
47	if (isFunction(onSearchChange)) {	4✔
48	onSearchChange(changedSearch);	3✔
49	}
50	if (isFunction(onFiltersChange)) {	4✔
51	onFiltersChange(values);	3✔
52	}
53	}
54	},
55	[onFiltersChange, onSearchChange, memParseOptions]
56	);
57
58	if (params === undefined \|\| params === null) {	61✔
59	// 等待params根据search初始化完成
60	return null;	26✔
61	}
62
63	return <RestTable ref={ref} {...restProps} routeParams={params} onFiltersChange={onChange} />;	35✔
64	});
65
66	RouteBaseTable.propTypes = {	1✔
67	location: PropTypes.object,
68	onSearchChange: PropTypes.func,
69	restProps: PropTypes.object,
70	};
71
72	RouteBaseTable.displayName = "RouteBaseTable";	1✔
73
74	export default RouteBaseTable;

SkylerHu / antd-restful / #56

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous