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

72.73

/src/components/FieldsSetting.jsx

import React, { useEffect, useMemo } from "react";
import PropTypes from "prop-types";
import { Button, Checkbox, Space, Tooltip } from "antd";
import { QuestionCircleOutlined, SettingOutlined } from "@ant-design/icons";
import { dequal as deepEqual } from "dequal";
import { genColumnKey, genFields } from "src/common/parser";
import { isFunction } from "src/common/typeTools";
import { useSettingsStorage } from "src/hooks/index";

const FieldsSetting = ({ style, className, title, storageKey, value, onChange, children }) => {
  const { keys, setKeys, allKeys } = useSettingsStorage(storageKey, value);

  // 全选
  const checkAll = useMemo(() => deepEqual(keys, allKeys), [keys, allKeys]);
  // 部分选中
  const checkIndeterminate = useMemo(() => keys.length > 0 && !checkAll, [keys, checkAll]);

  const data = useMemo(() => {
    const options = value.map((column) => {
      const key = genColumnKey(column);
      return {
        label: (
          <div style={{ width: 100 }}>
            {column.label || column.title || key}
            &nbsp;&nbsp;
            {column.tip && (
              <Tooltip title={column.tip}>
                <QuestionCircleOutlined />
              </Tooltip>
            )}
          </div>
        ),
        value: key,
        // 如果强制设置的 false，则禁止配置
        disabled: column.hidden === false,
      };
    });
    const forceChecks = options.filter((option) => option.disabled).map((option) => option.value);
    return {
      options,
      forceChecks,
    };
  }, [value]);

  useEffect(() => {
    const _columns = genFields(value, keys);
    if (isFunction(onChange)) {
      onChange(_columns, keys);
    }
  }, [value, keys, onChange]);

  return (
    <Tooltip
      style={style}
      className={className}
      trigger="click"
      color="white"
      title={
        <Space direction="vertical" style={{ width: 400 }}>
          <div style={{ color: "black" }}>{title || "设置"}</div>
          <Checkbox
            indeterminate={checkIndeterminate}
            checked={checkAll}
            onChange={(e) => {
              setKeys(e.target.checked ? allKeys : data.forceChecks);
            }}
          >
            全选
          </Checkbox>
          <Checkbox.Group
            value={keys}
            options={data.options}
            onChange={(value) => {
              setKeys(value);
            }}
          />
        </Space>
      }
    >
      {children || <Button icon={<SettingOutlined />} />}
    </Tooltip>
  );
};

FieldsSetting.propTypes = {
  style: PropTypes.object,
  className: PropTypes.string,

  title: PropTypes.string,
  storageKey: PropTypes.string.isRequired,
  // 字段配置，key为字段名，label为字段名，hidden为是否隐藏
  value: PropTypes.arrayOf(
    PropTypes.shape({
      key: PropTypes.string,
      label: PropTypes.string,
      hidden: PropTypes.bool,
    })
  ),

  onChange: PropTypes.func,
  children: PropTypes.node,
};

export default FieldsSetting;

1	import React, { useEffect, useMemo } from "react";
2	import PropTypes from "prop-types";
3	import { Button, Checkbox, Space, Tooltip } from "antd";
4	import { QuestionCircleOutlined, SettingOutlined } from "@ant-design/icons";
5	import { dequal as deepEqual } from "dequal";
6	import { genColumnKey, genFields } from "src/common/parser";
7	import { isFunction } from "src/common/typeTools";
8	import { useSettingsStorage } from "src/hooks/index";
9
10	const FieldsSetting = ({ style, className, title, storageKey, value, onChange, children }) => {	2✔
11	const { keys, setKeys, allKeys } = useSettingsStorage(storageKey, value);	198✔
12
13	// 全选
14	const checkAll = useMemo(() => deepEqual(keys, allKeys), [keys, allKeys]);	198✔
15	// 部分选中
16	const checkIndeterminate = useMemo(() => keys.length > 0 && !checkAll, [keys, checkAll]);	198✔
17
18	const data = useMemo(() => {	198✔
19	const options = value.map((column) => {	52✔
20	const key = genColumnKey(column);	66✔
21	return {	66✔
22	label: (
23	<div style={{ width: 100 }}>
24	{column.label \|\| column.title \|\| key}	127!
25
26	{column.tip && (	66!
27	<Tooltip title={column.tip}>
28	<QuestionCircleOutlined />
29	</Tooltip>
30	)}
31	</div>
32	),
33	value: key,
34	// 如果强制设置的 false，则禁止配置
35	disabled: column.hidden === false,
36	};
37	});
38	const forceChecks = options.filter((option) => option.disabled).map((option) => option.value);	66✔
39	return {	52✔
40	options,
41	forceChecks,
42	};
43	}, [value]);
44
45	useEffect(() => {	198✔
46	const _columns = genFields(value, keys);	52✔
47	if (isFunction(onChange)) {	52!
48	onChange(_columns, keys);	52✔
49	}
50	}, [value, keys, onChange]);
51
52	return (	198✔
53	<Tooltip
54	style={style}
55	className={className}
56	trigger="click"
57	color="white"
58	title={
59	<Space direction="vertical" style={{ width: 400 }}>
60	<div style={{ color: "black" }}>{title \|\| "设置"}</div>	198!
61	<Checkbox
62	indeterminate={checkIndeterminate}
63	checked={checkAll}
64	onChange={(e) => {
NEW 65	setKeys(e.target.checked ? allKeys : data.forceChecks);	×
66	}}
67	>
68	全选
69	</Checkbox>
70	<Checkbox.Group
71	value={keys}
72	options={data.options}
73	onChange={(value) => {
NEW 74	setKeys(value);	×
75	}}
76	/>
77	</Space>
78	}
79	>
80	{children \|\| <Button icon={<SettingOutlined />} />}	198!
81	</Tooltip>
82	);
83	};
84
85	FieldsSetting.propTypes = {	2✔
86	style: PropTypes.object,
87	className: PropTypes.string,
88
89	title: PropTypes.string,
90	storageKey: PropTypes.string.isRequired,
91	// 字段配置，key为字段名，label为字段名，hidden为是否隐藏
92	value: PropTypes.arrayOf(
93	PropTypes.shape({
94	key: PropTypes.string,
95	label: PropTypes.string,
96	hidden: PropTypes.bool,
97	})
98	),
99
100	onChange: PropTypes.func,
101	children: PropTypes.node,
102	};
103
104	export default FieldsSetting;

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