@hzab/list-render 1.10.0-beta1 → 1.10.0-beta2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hzab/list-render",
-  "version": "1.10.0-beta1",
+  "version": "1.10.0-beta2",
   "description": "",
   "main": "src",
   "scripts": {

package/src/common/constant.ts

@@ -1,2 +1,4 @@
 // 设置url query参数时默认key名称
 export const URL_PARAM_NAME = "defaultSearchParams";
+
+export const CLEAR_LIST = ["Input", "Select", "DatePicker.RangePicker", "DatePicker"];

package/src/common/handleQuerySchema.ts

@@ -1,11 +1,16 @@
 import _ from "lodash";
 import { getFieldMap } from "./utils";
-import { isRunStr, handleSchemaStrVal, isScopeKey as formIsScopeKey, getScopeKeyVal } from '@hzab/form-render/src/common/schema-handler';
+import {
+  isRunStr,
+  handleSchemaStrVal,
+  isScopeKey as formIsScopeKey,
+  getScopeKeyVal,
+} from "@hzab/form-render/src/common/schema-handler";
 import { URL_PARAM_NAME } from "./constant";
 
 // ===================== 类型定义 =====================
 
-type AntdDateComponent = 'DatePicker' | 'DatePicker.RangePicker';
+type AntdDateComponent = "DatePicker" | "DatePicker.RangePicker";
 
 interface XComponentProps {
   isSplitTimes?: boolean;
@@ -17,13 +22,13 @@ interface XComponentProps {
 interface FormilyField {
   type?: string;
   title?: string;
-  'x-decorator'?: string;
-  'x-component'?: string;
-  'x-validator'?: unknown[];
-  'x-component-props'?: XComponentProps;
-  'x-decorator-props'?: Record<string, unknown>;
-  'x-designable-id'?: string;
-  'x-index'?: number;
+  "x-decorator"?: string;
+  "x-component"?: string;
+  "x-validator"?: unknown[];
+  "x-component-props"?: XComponentProps;
+  "x-decorator-props"?: Record<string, unknown>;
+  "x-designable-id"?: string;
+  "x-index"?: number;
   [k: string]: unknown;
 }
 
@@ -269,7 +274,6 @@ export const handleHoc = (source, cb, opt) => {
 
     let res = null;
     if (isRunStr(source)) {
-
       _source = handleSchemaStrVal(source, schemaScope);
     }
     if (formIsScopeKey(source, schemaScope)) {
@@ -354,6 +358,22 @@ export const getValByScope = (strKey, schemaScope = {}) => {
   }
 };
 
+function removeEmptyValues(obj) {
+  return _.pickBy(obj, (value) => {
+    // 排除 undefined 和 null
+    if (value == null) return false;
+
+    // 排除空字符串
+    if (_.isString(value) && value.trim() === "") return false;
+
+    // 排除空数组
+    if (_.isArray(value) && value.length === 0) return false;
+
+    // 保留其他值（包括 0、false、非空对象等）
+    return true;
+  });
+}
+
 /**
  * 将对象序列化后写入 URL query 中
  * @param obj 要存储的对象（保持原始类型）
@@ -367,7 +387,10 @@ export function setURLObjectQueryParam<T extends object>(obj: T, paramName = URL
     const [origin, hash = ""] = href.split("#");
     const [path, queryString = ""] = hash.split("?");
     const searchParams = new URLSearchParams(queryString);
-    const encoded = encodeURIComponent(JSON.stringify(obj));
+    // 指定的空值不设置
+    const copyObj = _.cloneDeep(removeEmptyValues(obj));
+
+    const encoded = encodeURIComponent(JSON.stringify(copyObj));
 
     searchParams.set(paramName, encoded);
 
@@ -380,11 +403,11 @@ export function setURLObjectQueryParam<T extends object>(obj: T, paramName = URL
 }
 
 /**
- * 从当前URL中删除指定的查询参数（不刷新页面）
- * 专门处理哈希路由中的查询参数
- * @param key 要删除的查询参数名称
+ * 从哈希路由的查询参数中，删除某个“对象型参数”下的指定属性（不刷新页面）
+ * @param parentKey  父级对象参数名
+ * @param childKey   要删除的对象属性名
  */
- export function removeURLObjectQueryParam(key: string): void {
+export function removeURLObjectQueryParam(parentKey: string, childKey: string, reset?: boolean): void {
   if (typeof window === "undefined") return;
 
   try {
@@ -393,21 +416,52 @@ export function setURLObjectQueryParam<T extends object>(obj: T, paramName = URL
     const [hashPath, queryString = ""] = hash.split("?");
     const searchParams = new URLSearchParams(queryString);
 
-    searchParams.delete(key);
+    const raw = searchParams.get(parentKey);
+    if (raw == null) return;
+
+    // URLSearchParams.get 已自动做了百分号解码，但是可能会遇到编码两次的情况，因此这里再尝试解码一次
+    let obj: unknown;
+    try {
+      obj = JSON.parse(decodeURIComponent(raw));
+    } catch {
+      // 若不是合法 JSON，就不处理该参数
+      console.error(`[removeURLObjectQueryParam] 序列化URL参数错误`);
+      return;
+    }
 
-    // 重建哈希部分
-    let newHash = hashPath;
-    if (searchParams.toString()) {
-      newHash += `?${searchParams.toString()}`;
+    // 如果是重置，直接清空整个parentKey
+    if (reset && parentKey) searchParams.delete(parentKey);
+    else {
+      if (obj && typeof obj === "object" && !Array.isArray(obj)) {
+        const record = obj as Record<string, unknown>;
+        // 删除空值key
+        if (childKey || record[childKey] === "" || record[childKey] === undefined || record[childKey] === null)
+          delete record[childKey];
+
+        // 如果对象被删空，则移除整个 parentKey；否则写回
+        if (Object.keys(record).length === 0) {
+          searchParams.delete(parentKey);
+        } else {
+          searchParams.set(parentKey, encodeURIComponent(JSON.stringify(record)));
+        }
+      } else {
+        // parentKey 的值不是对象，安全起见不处理
+        return;
+      }
     }
 
-    const newUrl = `${origin}${newHash ? `#${newHash}` : ''}`;
+    // 重建哈希部分
+    let newHash = hashPath;
+    const qs = searchParams.toString();
+    if (qs) newHash += `?${qs}`;
 
+    const newUrl = `${origin}${newHash ? `#${newHash}` : ""}`;
     window.history.replaceState({}, "", newUrl);
   } catch (e) {
     console.error(`[removeURLObjectQueryParam] 删除失败:`, e);
   }
 }
+
 /**
  * 从 URL 中解析序列化的对象
  * @param paramName query 参数名
@@ -433,14 +487,13 @@ export function getURLObjectQueryParam<T = any>(paramName = URL_PARAM_NAME): T |
   }
 }
 
-
 // ===================== 辅助函数 =====================
 
 const pickFormilyProperties = (schema: FormilyV1Schema): Record<string, FormilyField> =>
-  (schema?.schema?.properties ?? {});
+  schema?.schema?.properties ?? {};
 
 const isAntdDateComponent = (comp: unknown, whitelist: readonly string[]) =>
-  typeof comp === 'string' && whitelist.includes(comp);
+  typeof comp === "string" && whitelist.includes(comp);
 
 const filterKeys = (props: Record<string, FormilyField>, filters: readonly string[]) => {
   const filterSet = new Set(filters);
@@ -448,14 +501,10 @@ const filterKeys = (props: Record<string, FormilyField>, filters: readonly strin
 };
 
 const matchSplitFlag = (field: FormilyField, splitFlag: string, expected: unknown) =>
-  field?.['x-component-props']?.[splitFlag] === expected;
+  field?.["x-component-props"]?.[splitFlag] === expected;
 
 /** 两个值都缺失则返回 undefined；否则返回二元组 */
-const getRangeTupleOrUndefined = (
-  urlObj: URLQueryObject,
-  startKey: string,
-  endKey: string
-): [any, any] | undefined => {
+const getRangeTupleOrUndefined = (urlObj: URLQueryObject, startKey: string, endKey: string): [any, any] | undefined => {
   const obj = (urlObj ?? {}) as Record<string, any>;
   const hasStart = Object.prototype.hasOwnProperty.call(obj, startKey);
   const hasEnd = Object.prototype.hasOwnProperty.call(obj, endKey);
@@ -472,14 +521,14 @@ export function extractSplitDateRanges(
   filters: string[],
   formilySchema: FormilyV1Schema,
   urlObj: URLQueryObject,
-  options: ExtractOptions = {}
+  options: ExtractOptions = {},
 ): Record<string, any> {
   const {
-    splitFlag = 'isSplitTimes',
+    splitFlag = "isSplitTimes",
     splitFlagExpectedValue = true,
-    defaultStartKey = 'startTime',
-    defaultEndKey = 'endTime',
-    antdDateComponents = ['DatePicker', 'DatePicker.RangePicker'],
+    defaultStartKey = "startTime",
+    defaultEndKey = "endTime",
+    antdDateComponents = ["DatePicker", "DatePicker.RangePicker"],
     removeMatchedKeys = true,
   } = options;
 
@@ -494,10 +543,10 @@ export function extractSplitDateRanges(
 
   for (const [fieldKey, field] of candidates) {
     // 未命中则直接跳过本次循环
-    if (!isAntdDateComponent(field?.['x-component'], antdDateComponents)) continue;
+    if (!isAntdDateComponent(field?.["x-component"], antdDateComponents)) continue;
     if (!matchSplitFlag(field, splitFlag, splitFlagExpectedValue)) continue;
 
-    const props = field?.['x-component-props'] ?? {};
+    const props = field?.["x-component-props"] ?? {};
     const startKey = (props?.startKey as string) || defaultStartKey;
     const endKey = (props?.endKey as string) || defaultEndKey;
 

package/src/list-render.jsx

@@ -15,8 +15,13 @@ import FormModal from "./FormModal";
 import DetailModal from "./DetailModal";
 
 import { objToFormData } from "./common/utils";
-import { setURLObjectQueryParam, getURLObjectQueryParam, removeURLObjectQueryParam, extractSplitDateRanges } from "./common/handleQuerySchema";
-import { URL_PARAM_NAME } from "./common/constant";
+import {
+  setURLObjectQueryParam,
+  getURLObjectQueryParam,
+  removeURLObjectQueryParam,
+  extractSplitDateRanges,
+} from "./common/handleQuerySchema";
+import { CLEAR_LIST, URL_PARAM_NAME } from "./common/constant";
 
 import "./index.less";
 
@@ -54,7 +59,7 @@ const ListRender = forwardRef(function (props, parentRef) {
     /**
      * 自定义设置url query对象参数的key
      * */
-    appendUrlQueryKey = URL_PARAM_NAME
+    appendUrlQueryKey = URL_PARAM_NAME,
   } = props;
   const pageSizeOptions = props.paginationConf?.pageSizeOptions || pageSizeOptionMap[props.layout] || [10, 20, 50, 100];
   // const [pageSizeOptions, setPageSizeOptions] = useState(
@@ -119,11 +124,11 @@ const ListRender = forwardRef(function (props, parentRef) {
       if (queryRef.current && queryRef.current?.formRef?.current.formRender) {
         const extractValues = extractSplitDateRanges(filters, schema, getUrlQuery);
 
-        queryRef.current.formRef.current.formRender?.setValues(extractValues)
+        queryRef.current.formRef.current.formRender?.setValues(extractValues);
 
-        formQueryRef.current = _.cloneDeep(getUrlQuery)
+        formQueryRef.current = _.cloneDeep(getUrlQuery);
       }
-    })
+    });
 
     !props.closeAutoRequest && getList({ ...(modelQueryRef.current || {}), ...getUrlQuery });
   }, []);
@@ -224,7 +229,7 @@ const ListRender = forwardRef(function (props, parentRef) {
 
     if (appendUrlQuery) {
       const getUrlQuery = getURLObjectQueryParam(appendUrlQueryKey);
-      setURLObjectQueryParam({ ...getUrlQuery, ...paginationQueryRef.current }, appendUrlQueryKey)
+      setURLObjectQueryParam({ ...getUrlQuery, ...paginationQueryRef.current }, appendUrlQueryKey);
     }
     getList();
   }
@@ -249,7 +254,25 @@ const ListRender = forwardRef(function (props, parentRef) {
   }
 
   function handleFormReset() {
-    appendUrlQuery && removeURLObjectQueryParam(appendUrlQueryKey)
+    appendUrlQuery && removeURLObjectQueryParam(appendUrlQueryKey, "", true);
+  }
+
+  function handleFieldValueChange(filed, form) {
+    // props?.onFieldValueChange?.(filed, form);
+
+    if (!appendUrlQuery) return;
+
+    try {
+      const { componentType, value, path } = filed;
+      if (CLEAR_LIST.includes(componentType)) {
+        if (value === "" || value?.length === 0 || value === undefined) {
+          const key = path.entire;
+          key && removeURLObjectQueryParam(appendUrlQueryKey, key);
+        }
+      }
+    } catch (e) {
+      console.error("url参数清除失败", e);
+    }
   }
 
   function forceUpdate() {
@@ -409,6 +432,7 @@ const ListRender = forwardRef(function (props, parentRef) {
             onReset={handleFormReset}
             schemaScope={props.schemaScope}
             components={props.components}
+            onFieldValueChange={handleFieldValueChange}
             i18n={i18n}
           />
         ) : (

package/src/query-render/index.jsx

@@ -7,6 +7,7 @@ import FormRender from "@hzab/form-render";
 import { handleQuerySchema } from "../common/handleQuerySchema";
 
 import "./index.less";
+import { onFieldValueChange } from "@formily/core";
 
 function QueryRender(props, parentRef) {
   const [schema, setSchema] = useState({});
@@ -58,7 +59,6 @@ function QueryRender(props, parentRef) {
     props.onSearch && props.onSearch(_.cloneDeep(formRef?.current?.formRender?.values), "queryRender", true);
   }
 
-
   return (
     <div className="query-render">
       {Object.keys(schema?.schema?.properties || {}).length > 0 ? (
@@ -69,6 +69,7 @@ function QueryRender(props, parentRef) {
             schema={schema}
             schemaScope={{ scenario: "query", ...(props.schemaScope || {}) }}
             initialValues={props.queryFormInitialValues}
+            onFieldValueChange={props.onFieldValueChange}
             Slots={() => {
               return (
                 <div className="query-operation">