@hzab/list-render 1.10.12-beta3 → 1.10.12-beta5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hzab/list-render",
-  "version": "1.10.12-beta3",
+  "version": "1.10.12-beta5",
   "description": "",
   "main": "src",
   "scripts": {

package/src/list-render.jsx

@@ -4,7 +4,7 @@ model 不要定义在组件外部，避免出现 query 异常的情况。
 */
 import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from "react";
 import { Button, message } from "antd";
-import _ from "lodash";
+import _, { cloneDeep } from "lodash";
 import axios, { getCancelTokenSource } from "@hzab/data-model/src/axios";
 
 import QueryRender from "./query-render";
@@ -74,8 +74,8 @@ const ListRender = forwardRef(function (props, parentRef) {
   const formModalRef = useRef();
   const detailModalRef = useRef();
   const queryRef = useRef();
-  const modelQueryRef = useRef({});
-  const formQueryRef = useRef({});
+  // 缓存 query 表单数据，解决直接 form.values 取值时，form values 改变，即使不触发 onSearch 也会导致列表请求入参变化的问题
+  const formQueryRef = useRef({ ...(queryFormInitialValues || {}) });
   const paginationQueryRef = useRef({ pageNum: 1, pageSize: pageSizeOptions[0] });
   const useFormData = _useFormData ?? dialogConf.useFormData ?? modalConf?.useFormData;
   const getListSourceRef = useRef();
@@ -85,6 +85,7 @@ const ListRender = forwardRef(function (props, parentRef) {
   useImperativeHandle(parentRef, () => ({
     getList,
     onSearch,
+    onQueryFormSubmit,
     forceUpdate,
     formModalRef,
     formDialogRef: formModalRef,
@@ -111,7 +112,6 @@ const ListRender = forwardRef(function (props, parentRef) {
       } else {
         model.query.pageNum = 1;
 
-        modelQueryRef.current = model?.query;
         paginationQueryRef.current = {
           pageNum: getUrlQuery?.pageNum || model?.query?.pageNum || paginationQueryRef.current?.pageNum,
           pageSize: getUrlQuery?.pageSize || model?.query?.pageSize || paginationQueryRef.current?.pageSize,
@@ -121,25 +121,15 @@ const ListRender = forwardRef(function (props, parentRef) {
 
     // 延迟获取表单实例
     Promise.resolve().then(() => {
-      if (queryRef.current && queryRef.current?.formRef?.current?.formRender) {
+      if (queryRef.current && queryRef.current?.formRef?.current?.formRender && appendUrlQuery) {
         const extractValues = extractSplitDateRanges(filters, schema, getUrlQuery);
-
         queryRef.current.formRef.current.formRender?.setValues(extractValues);
-
-        formQueryRef.current = _.cloneDeep(getUrlQuery);
+        formQueryRef.current = _.cloneDeep(queryRef.current.formRef.current.formRender?.values);
       }
+      !props.closeAutoRequest && getList({});
     });
-
-    !props.closeAutoRequest && getList({ ...queryFormInitialValues, ...(modelQueryRef.current || {}), ...getUrlQuery });
   }, []);
 
-  useEffect(() => {
-    if (model && !model?.query) {
-      model.query = {};
-    }
-    modelQueryRef.current = model?.query;
-  }, [model?.query]);
-
   useEffect(() => {
     Array.isArray(props.list) && getList();
   }, [props.list]);
@@ -152,71 +142,69 @@ const ListRender = forwardRef(function (props, parentRef) {
     });
   };
 
-  function getList(query = modelQueryRef.current || {}) {
-    if (!model?.getList && Array.isArray(props.list)) {
+  function getList(query = {}) {
+    // Promise.resolve() 解决 首次加载，表单渲染晚于当前逻辑 导致表单默认值取值失败的问题
+    return Promise.resolve().then(() => {
+      if (!model?.getList && Array.isArray(props.list)) {
+        setListLoading(true);
+        const { list } = props;
+        const { pageNum = 1, pageSize = pageSizeOptions[0] } = paginationQueryRef.current || {};
+
+        setList(list.slice(pageSize * (pageNum - 1), pageNum * pageSize));
+        setTotal(list.length);
+        props.onGetListEnd && props.onGetListEnd({ list, pagination: { pageNum, pageSize } });
+        setListLoading(false);
+        return;
+      }
+      if (!model?.getList) {
+        return;
+      }
       setListLoading(true);
-      const { list } = props;
-      const { pageNum = 1, pageSize = pageSizeOptions[0] } = paginationQueryRef.current || {};
-
-      setList(list.slice(pageSize * (pageNum - 1), pageNum * pageSize));
-      setTotal(list.length);
-      props.onGetListEnd && props.onGetListEnd({ list, pagination: { pageNum, pageSize } });
-      setListLoading(false);
-      return;
-    }
-    if (!model?.getList) {
-      return;
-    }
-    setListLoading(true);
-
-    // remove $timerange
-    const _q = _.cloneDeep(query);
-    const _q1 = _.cloneDeep(modelQueryRef.current);
-    const _q2 = _.cloneDeep(formQueryRef.current);
-    const _q3 = _.cloneDeep(paginationQueryRef.current);
-
-    const mergedQueries = {
-      ..._q,
-      ..._q1,
-      ..._q2,
-      ..._q3,
-    };
-
-    if (mergedQueries.$timerange !== undefined) {
-      delete mergedQueries.$timerange;
-    }
 
-    // model.query = mergedQueries;
-    // 取消上一次请求
-    getListSourceRef.current?.cancel({ code: 601, message: "取消上一次请求" });
-
-    // 重新获取 source
-    getListSourceRef.current = getCancelTokenSource();
-
-    model
-      ?.getList(
-        mergedQueries,
-        {},
-        {
-          cancelToken: getListSourceRef.current?.token,
-        },
-      )
-      .then((res) => {
-        getListSourceRef.current = null;
-        setList(res.list);
-        setTotal(res.pagination?.total);
-        props.onGetListEnd && props.onGetListEnd(res);
-        setListLoading(false);
-      })
-      .catch((err) => {
-        if (axios.isCancel(err)) {
-          console.info(`请求已取消:`, "", err.message);
+      // remove $timerange
+
+      const mergedQueries = {
+        ...formQueryRef.current,
+        ...query,
+        ...paginationQueryRef.current,
+      };
+
+      if (mergedQueries.$timerange !== undefined) {
+        delete mergedQueries.$timerange;
+      }
+
+      // model.query = mergedQueries;
+      // 取消上一次请求
+      getListSourceRef.current?.cancel({ code: 601, message: "取消上一次请求" });
+
+      // 重新获取 source
+      getListSourceRef.current = getCancelTokenSource();
+
+      return model
+        ?.getList(
+          cloneDeep(mergedQueries),
+          {},
+          {
+            cancelToken: getListSourceRef.current?.token,
+          },
+        )
+        .then((res) => {
+          getListSourceRef.current = null;
+          setList(res.list);
+          setTotal(res.pagination?.total);
+          props.onGetListEnd && props.onGetListEnd(res);
+          setListLoading(false);
+        })
+        .catch((err) => {
+          if (axios.isCancel(err)) {
+            console.info(`请求已取消:`, "", err.message);
+            return Promise.reject(err);
+          }
+          handleMessage(err?._message);
+          setListLoading(false);
           return Promise.reject(err);
-        }
-        handleMessage(err?._message);
-        setListLoading(false);
-        return Promise.reject(err);
-      });
+        });
+    });
   }
 
   function onPageChange(page, size) {
@@ -234,11 +222,7 @@ const ListRender = forwardRef(function (props, parentRef) {
     getList();
   }
 
-  function onSearch(quer, source, isReset = false) {
-    const query = source === "queryRender" ? { ...quer } : { ...formQueryRef.current, ...quer };
-    // 重置操作时不赋值
-    if (source === "queryRender" && !isReset && appendUrlQuery) setURLObjectQueryParam(query, appendUrlQueryKey);
-
+  function onSearch(query, source, isReset = false) {
     if (model && !model.query) {
       model.query = {};
     }
@@ -248,13 +232,29 @@ const ListRender = forwardRef(function (props, parentRef) {
     if (model && model.query && !model.query.pageSize) {
       model.query.pageSize = pageSizeOptions[0];
     }
-    formQueryRef.current = query;
     // model.query = Object.assign(model.query, query);
     getList(query);
   }
 
-  function handleFormReset() {
-    appendUrlQuery && removeURLObjectQueryParam(appendUrlQueryKey, "", true);
+  /**
+   * query 表单提交回调
+   * @param {*} values
+   * @returns
+   */
+  function onQueryFormSubmit(values) {
+    formQueryRef.current = values;
+    // 重置操作时不赋值
+    if (appendUrlQuery) {
+      setURLObjectQueryParam(values, appendUrlQueryKey);
+    }
+    return onSearch(values);
+  }
+
+  function onReset(values) {
+    if (appendUrlQuery) {
+      removeURLObjectQueryParam(appendUrlQueryKey, "", true);
+    }
+    return onSearch(values);
   }
 
   function handleFieldValueChange(filed, form) {
@@ -446,8 +446,8 @@ const ListRender = forwardRef(function (props, parentRef) {
               ...queryFormInitialValues,
               ...(queryFormIsExtendModelQuery ? model.query : {}),
             }}
-            onSearch={onSearch}
-            onReset={handleFormReset}
+            onSearch={onQueryFormSubmit}
+            onReset={onReset}
             schemaScope={props.schemaScope}
             components={props.components}
             onFieldValueChange={handleFieldValueChange}

package/src/query-render/index.jsx

@@ -55,8 +55,7 @@ function QueryRender(props, parentRef) {
 
   function onReset() {
     formRef.current?.formRender?.reset();
-    props.onReset?.();
-    props.onSearch && props.onSearch(_.cloneDeep(formRef?.current?.formRender?.values), "queryRender", true);
+    props.onReset && props.onReset(_.cloneDeep(formRef?.current?.formRender?.values));
   }
 
   return (

package/src/table-render/index.jsx

@@ -136,7 +136,7 @@ const TableRender = forwardRef(function (props, tableRef) {
         const comName = field["x-component"];
 
         const decoratorProps = field["x-decorator-props"] || {};
-        let _title = title;
+        let _title = isFunction(title) ? title() : title;
         if (decoratorProps.tooltip) {
           _title = (
             <span className="col-title-tooltip-wrap inline-block-max-w">
@@ -428,9 +428,10 @@ const TableRender = forwardRef(function (props, tableRef) {
         <Table {...tableProps} />
       )}
       <FormilyField
-        schema={topProps.schema}
+        schema={props.schema}
         formilyRef={formilyRef}
         components={props.components}
+        topProps={topProps}
         schemaScope={{
           ...reactionOpts,
           ...props.schemaScope,