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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hzab/list-render",
-  "version": "1.10.0-beta",
+  "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,8 +1,67 @@
 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";
+
+interface XComponentProps {
+  isSplitTimes?: boolean;
+  startKey?: string;
+  endKey?: string;
+  [k: string]: unknown;
+}
+
+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;
+  [k: string]: unknown;
+}
+
+interface FormilyV1SchemaNode {
+  type?: string;
+  properties?: Record<string, FormilyField>;
+  [k: string]: unknown;
+}
+
+interface FormilyV1Schema {
+  form?: Record<string, unknown>;
+  schema: FormilyV1SchemaNode;
+}
+
+type URLQueryObject = Record<string, any> | null | undefined;
+
+interface ExtractOptions {
+  /** 分拆开关字段名，位于 x-component-props；默认 'isSplitTimes' */
+  splitFlag?: string;
+  /** 分拆开关的期望值；默认 true */
+  splitFlagExpectedValue?: unknown;
+  /** 默认开始/结束键名（当 schema 未显式配置时），默认 'startTime' / 'endTime' */
+  defaultStartKey?: string;
+  defaultEndKey?: string;
+  /** 认为是 antd 日期组件的名单，默认 DatePicker / DatePicker.RangePicker */
+  antdDateComponents?: readonly AntdDateComponent[];
+  /**
+   * 命中并成功赋值后，是否从返回对象中删除对应的 startKey / endKey
+   * 默认 true（删除）
+   */
+  removeMatchedKeys?: boolean;
+}
+
 export const handleQuerySchema = (opt) => {
   const { schema, search, filters, onSearch, replaceComList, schemaScope } = opt || {};
   const queryProperties = {};
@@ -215,7 +274,6 @@ export const handleHoc = (source, cb, opt) => {
 
     let res = null;
     if (isRunStr(source)) {
-
       _source = handleSchemaStrVal(source, schemaScope);
     }
     if (formIsScopeKey(source, schemaScope)) {
@@ -300,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 要存储的对象（保持原始类型）
@@ -313,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);
 
@@ -326,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 {
@@ -339,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 参数名
@@ -379,4 +487,90 @@ export function getURLObjectQueryParam<T = any>(paramName = URL_PARAM_NAME): T |
   }
 }
 
+// ===================== 辅助函数 =====================
+
+const pickFormilyProperties = (schema: FormilyV1Schema): Record<string, FormilyField> =>
+  schema?.schema?.properties ?? {};
+
+const isAntdDateComponent = (comp: unknown, whitelist: readonly string[]) =>
+  typeof comp === "string" && whitelist.includes(comp);
+
+const filterKeys = (props: Record<string, FormilyField>, filters: readonly string[]) => {
+  const filterSet = new Set(filters);
+  return Object.entries(props).filter(([k]) => filterSet.has(k));
+};
+
+const matchSplitFlag = (field: FormilyField, splitFlag: string, expected: unknown) =>
+  field?.["x-component-props"]?.[splitFlag] === expected;
+
+/** 两个值都缺失则返回 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);
+  if (!hasStart && !hasEnd) return undefined;
+  return [obj[startKey], obj[endKey]];
+};
+
+// ===================== 主函数 =====================
+/**
+ * 根据formilySchema配置逆解析表单key并将url query赋值
+ * 三层筛选：根据filters + splitFlag + antdDateComponents 提取formilySchema配置项然后通过配置的key赋值并返回
+ * */
+export function extractSplitDateRanges(
+  filters: string[],
+  formilySchema: FormilyV1Schema,
+  urlObj: URLQueryObject,
+  options: ExtractOptions = {},
+): Record<string, any> {
+  const {
+    splitFlag = "isSplitTimes",
+    splitFlagExpectedValue = true,
+    defaultStartKey = "startTime",
+    defaultEndKey = "endTime",
+    antdDateComponents = ["DatePicker", "DatePicker.RangePicker"],
+    removeMatchedKeys = true,
+  } = options;
+
+  const properties = pickFormilyProperties(formilySchema);
+  const candidates = filterKeys(properties, filters);
+
+  // 保持不变性
+  const base = _.cloneDeep(urlObj) as Record<string, any>;
+
+  // 统一延迟删除，避免顺序影响
+  const keysToDelete = new Set<string>();
+
+  for (const [fieldKey, field] of candidates) {
+    // 未命中则直接跳过本次循环
+    if (!isAntdDateComponent(field?.["x-component"], antdDateComponents)) continue;
+    if (!matchSplitFlag(field, splitFlag, splitFlagExpectedValue)) continue;
+
+    const props = field?.["x-component-props"] ?? {};
+    const startKey = (props?.startKey as string) || defaultStartKey;
+    const endKey = (props?.endKey as string) || defaultEndKey;
+
+    const tuple = getRangeTupleOrUndefined(base, startKey, endKey);
+    if (!tuple) continue; // 两个值都没有则不赋值、不删除
+
+    // 命中，给 fieldKey 赋值
+    base[fieldKey] = tuple;
+
+    // 按需记录要删除的键（只删除“命中的”）
+    if (removeMatchedKeys) {
+      if (Object.prototype.hasOwnProperty.call(base, startKey)) keysToDelete.add(startKey);
+      if (Object.prototype.hasOwnProperty.call(base, endKey)) keysToDelete.add(endKey);
+    }
+  }
+
+  // 统一执行删除，保证无顺序副作用
+  if (removeMatchedKeys) {
+    for (const k of keysToDelete) {
+      delete base[k];
+    }
+  }
+
+  return base;
+}
+
 export default handleQuerySchema;

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 } 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(
@@ -89,7 +94,7 @@ const ListRender = forwardRef(function (props, parentRef) {
     onDel,
   }));
 
-  const { schema = {}, config = {}, model = {}, msgConf = {} } = props;
+  const { schema = {}, config = {}, model = {}, msgConf = {}, filters } = props;
 
   // useEffect(() => {
   //   const list = props.paginationConf?.pageSizeOptions || pageSizeOptionMap[props.layout] || [10, 20, 50, 100];
@@ -117,9 +122,13 @@ const ListRender = forwardRef(function (props, parentRef) {
     // 延迟获取表单实例
     Promise.resolve().then(() => {
       if (queryRef.current && queryRef.current?.formRef?.current.formRender) {
-        queryRef.current.formRef.current.formRender?.setValues(getUrlQuery)
+        const extractValues = extractSplitDateRanges(filters, schema, getUrlQuery);
+
+        queryRef.current.formRef.current.formRender?.setValues(extractValues);
+
+        formQueryRef.current = _.cloneDeep(getUrlQuery);
       }
-    })
+    });
 
     !props.closeAutoRequest && getList({ ...(modelQueryRef.current || {}), ...getUrlQuery });
   }, []);
@@ -177,7 +186,7 @@ const ListRender = forwardRef(function (props, parentRef) {
       delete mergedQueries.$timerange;
     }
 
-    model.query = mergedQueries;
+    // model.query = mergedQueries;
     // 取消上一次请求
     getListSourceRef.current?.cancel({ code: 601, message: "取消上一次请求" });
 
@@ -220,16 +229,15 @@ const ListRender = forwardRef(function (props, parentRef) {
 
     if (appendUrlQuery) {
       const getUrlQuery = getURLObjectQueryParam(appendUrlQueryKey);
-      setURLObjectQueryParam({ ...getUrlQuery, ...paginationQueryRef.current }, appendUrlQueryKey)
+      setURLObjectQueryParam({ ...getUrlQuery, ...paginationQueryRef.current }, appendUrlQueryKey);
     }
     getList();
   }
 
   function onSearch(quer, source, isReset = false) {
     const query = source === "queryRender" ? { ...quer } : { ...formQueryRef.current, ...quer };
-
     // 重置操作时不赋值
-    if (!isReset && appendUrlQuery) setURLObjectQueryParam(query, appendUrlQueryKey);
+    if (source === "queryRender" && !isReset && appendUrlQuery) setURLObjectQueryParam(query, appendUrlQueryKey);
 
     if (model && !model.query) {
       model.query = {};
@@ -246,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() {
@@ -406,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">