@hzab/list-render 1.10.12-beta2 → 1.10.12-beta4

package/CHANGELOG.md

@@ -1,5 +1,6 @@
 # @hzab/list-render@1.10.12
 
+fix: 首次列表加载携带queryFormInitialValues的参数
 feat: schema title 支持传入 ReactNode，支持通过 schemaScope 传入
 fix: table 响应数据 去除 inTable == false 的字段
 fix: table 响应表单 FormilyField 环境变量 scenario: "tableReactionsForm"

package/package.json

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

package/src/common/formily-utils.jsx

@@ -1,174 +1,174 @@
-import { observer } from "@formily/react";
-import { autorun, observable } from "@formily/reactive";
-
-export function handleTableProps(field, { scope, value, record }) {
-  if (!field) {
-    return field;
-  }
-  const opt = {
-    scope: scope,
-    $self: field,
-    $values: value,
-    $deps: record,
-  };
-  // inTable
-  // x-table-props
-  if (typeof field.inTable === "string") {
-    field.inTable = getStateFunc(field.inTable, opt)(opt);
-  }
-  const tableProps = field["x-table-props"];
-  if (tableProps) {
-    if (typeof tableProps === "string") {
-      field["x-table-props"] = getStateFunc(field.inTable, opt)(opt);
-    } else if (tableProps && typeof tableProps === "object") {
-      Object.keys(tableProps).forEach((key) => {
-        if (typeof field["x-table-props"][key] === "string") {
-          field["x-table-props"][key] = getStateFunc(field["x-table-props"][key], opt)(opt);
-        }
-      });
-    }
-  }
-  return field;
-}
-
-/**
- * 解决 render 中无法响应数据的情况
- * @param {Function} render
- * @returns
- */
-export function getColRender(render) {
-  return function (...args) {
-    const Observer = observer(function () {
-      return render(...args);
-    });
-    return <Observer />;
-  };
-}
-
-/**
- * 根据 formily 函数字符串 {{xxx}}，获取变量或可执行函数
- * @param {*} funcStr
- * @param {*} opt
- * @returns
- */
-export const getScopeVal = function (funcStr = "", opt = {}) {
-  if (typeof funcStr !== "string" || !funcStr.startsWith("{{")) {
-    return funcStr;
-  }
-  const stateStr = funcStr.replace(/^\{\{/, "").replace(/\}\}$/, "");
-  const res = opt?.scope?.[stateStr];
-  // 存在对应变量直接返回
-  if (res) {
-    return res;
-  }
-  return getFunc(stateStr, opt);
-};
-
-/**
- * 根据 formily 函数字符串 {{xxx}}，获取可执行函数
- * @param {string} funcStr
- * @param {Object} opt
- * @returns
- */
-export function getStateFunc(funcStr = "", opt) {
-  if (typeof funcStr !== "string" || !funcStr.startsWith("{{")) {
-    return funcStr;
-  }
-  const stateStr = funcStr.replace(/^\{\{/, "").replace(/\}\}$/, "");
-  return getFunc(stateStr, opt);
-}
-
-/**
- * 根据函数字符串，获取可执行函数
- * @param {string} funcStr
- * @param {Object} opt
- * @returns
- */
-export function getFunc(
-  funcStr = "",
-  // opt = {"scope", "$self", "$values"},
-  opt = {},
-) {
-  const _opt = {
-    // opt = ["scope", "$self", "$deps", "$values", "$observable", "$memo", "$effect"],
-    $observable: observable,
-    $memo: autorun.memo,
-    $effect: autorun.effect,
-    scope: {},
-    ...opt,
-  };
-  const fn = new Function(
-    "opt",
-    `const { ${Object.keys(_opt).join(", ")} } = opt || {}; const {${Object.keys(_opt.scope || {}).join(
-      ", ",
-    )}} = scope || {}; return ${funcStr}; `,
-  );
-
-  return function (opt) {
-    return fn.call(this, {
-      // opt = ["scope", "$self", "$deps", "$values", "$observable", "$memo", "$effect"],
-      $observable: observable,
-      $memo: autorun.memo,
-      $effect: autorun.effect,
-      ...opt,
-    });
-  };
-}
-
-/**
- * 根据 formily 函数字符串 {{xxx}}，获取可执行的异步函数
- * @param {string} funcStr
- * @param {Object} opt
- * @returns
- */
-export function getStateSyncFunc(funcStr = "", opt) {
-  if (typeof funcStr !== "string" || !funcStr.startsWith("{{")) {
-    return funcStr;
-  }
-  const stateStr = funcStr.replace(/^\{\{/, "").replace(/\}\}$/, "");
-  return getFuncSync(stateStr, opt);
-}
-
-/**
- * 根据函数字符串，获取可执行的异步函数
- * @param {string} funcStr
- * @param {Object} opt
- * @returns
- */
-export function getFuncSync(
-  funcStr = "",
-  // opt = {"scope", "$self", "$values"},
-  opt = {},
-) {
-  const _opt = {
-    // opt = ["scope", "$self", "$deps", "$values", "$observable", "$memo", "$effect"],
-    $observable: observable,
-    $memo: autorun.memo,
-    $effect: autorun.effect,
-    scope: {},
-    ...opt,
-  };
-
-  // 把 effectFn 字符串转为可执行函数，并传入所需的参数，支持异步
-  const getAsyncFunction = new Function(`return Object.getPrototypeOf(async function(){}).constructor;`);
-  const AsyncFunction = getAsyncFunction();
-  // 只能这样拿到 AsyncFunction
-  // 直接写 Object.getPrototypeOf(async function(){}).constructor
-  // 会被 babel 转成 Function
-  const asyncFunc = new AsyncFunction(
-    "opt",
-    `try {const {${Object.keys(_opt).join(", ")}} = opt || {};  const {${Object.keys(_opt.scope || {}).join(
-      ", ",
-    )}} = scope || {}; return ${funcStr}; } catch(err) {console.error("Error Formily Reactive Function: ", err);}`,
-  );
-
-  return function (opt) {
-    return asyncFunc.call(this, {
-      // opt = ["scope", "$self", "$deps", "$values", "$observable", "$memo", "$effect"],
-      $observable: observable,
-      $memo: autorun.memo,
-      $effect: autorun.effect,
-      ...opt,
-    });
-  };
-}
+import { observer } from "@formily/react";
+import { autorun, observable } from "@formily/reactive";
+
+export function handleTableProps(field, { scope, value, record }) {
+  if (!field) {
+    return field;
+  }
+  const opt = {
+    scope: scope,
+    $self: field,
+    $values: value,
+    $deps: record,
+  };
+  // inTable
+  // x-table-props
+  if (typeof field.inTable === "string") {
+    field.inTable = getStateFunc(field.inTable, opt)(opt);
+  }
+  const tableProps = field["x-table-props"];
+  if (tableProps) {
+    if (typeof tableProps === "string") {
+      field["x-table-props"] = getStateFunc(field.inTable, opt)(opt);
+    } else if (tableProps && typeof tableProps === "object") {
+      Object.keys(tableProps).forEach((key) => {
+        if (typeof field["x-table-props"][key] === "string") {
+          field["x-table-props"][key] = getStateFunc(field["x-table-props"][key], opt)(opt);
+        }
+      });
+    }
+  }
+  return field;
+}
+
+/**
+ * 解决 render 中无法响应数据的情况
+ * @param {Function} render
+ * @returns
+ */
+export function getColRender(render) {
+  return function (...args) {
+    const Observer = observer(function () {
+      return render(...args);
+    });
+    return <Observer />;
+  };
+}
+
+/**
+ * 根据 formily 函数字符串 {{xxx}}，获取变量或可执行函数
+ * @param {*} funcStr
+ * @param {*} opt
+ * @returns
+ */
+export const getScopeVal = function (funcStr = "", opt = {}) {
+  if (typeof funcStr !== "string" || !funcStr.startsWith("{{")) {
+    return funcStr;
+  }
+  const stateStr = funcStr.replace(/^\{\{/, "").replace(/\}\}$/, "");
+  const res = opt?.scope?.[stateStr];
+  // 存在对应变量直接返回
+  if (res) {
+    return res;
+  }
+  return getFunc(stateStr, opt);
+};
+
+/**
+ * 根据 formily 函数字符串 {{xxx}}，获取可执行函数
+ * @param {string} funcStr
+ * @param {Object} opt
+ * @returns
+ */
+export function getStateFunc(funcStr = "", opt) {
+  if (typeof funcStr !== "string" || !funcStr.startsWith("{{")) {
+    return funcStr;
+  }
+  const stateStr = funcStr.replace(/^\{\{/, "").replace(/\}\}$/, "");
+  return getFunc(stateStr, opt);
+}
+
+/**
+ * 根据函数字符串，获取可执行函数
+ * @param {string} funcStr
+ * @param {Object} opt
+ * @returns
+ */
+export function getFunc(
+  funcStr = "",
+  // opt = {"scope", "$self", "$values"},
+  opt = {},
+) {
+  const _opt = {
+    // opt = ["scope", "$self", "$deps", "$values", "$observable", "$memo", "$effect"],
+    $observable: observable,
+    $memo: autorun.memo,
+    $effect: autorun.effect,
+    scope: {},
+    ...opt,
+  };
+  const fn = new Function(
+    "opt",
+    `const { ${Object.keys(_opt).join(", ")} } = opt || {}; const {${Object.keys(_opt.scope || {}).join(
+      ", ",
+    )}} = scope || {}; return ${funcStr}; `,
+  );
+
+  return function (opt) {
+    return fn.call(this, {
+      // opt = ["scope", "$self", "$deps", "$values", "$observable", "$memo", "$effect"],
+      $observable: observable,
+      $memo: autorun.memo,
+      $effect: autorun.effect,
+      ...opt,
+    });
+  };
+}
+
+/**
+ * 根据 formily 函数字符串 {{xxx}}，获取可执行的异步函数
+ * @param {string} funcStr
+ * @param {Object} opt
+ * @returns
+ */
+export function getStateSyncFunc(funcStr = "", opt) {
+  if (typeof funcStr !== "string" || !funcStr.startsWith("{{")) {
+    return funcStr;
+  }
+  const stateStr = funcStr.replace(/^\{\{/, "").replace(/\}\}$/, "");
+  return getFuncSync(stateStr, opt);
+}
+
+/**
+ * 根据函数字符串，获取可执行的异步函数
+ * @param {string} funcStr
+ * @param {Object} opt
+ * @returns
+ */
+export function getFuncSync(
+  funcStr = "",
+  // opt = {"scope", "$self", "$values"},
+  opt = {},
+) {
+  const _opt = {
+    // opt = ["scope", "$self", "$deps", "$values", "$observable", "$memo", "$effect"],
+    $observable: observable,
+    $memo: autorun.memo,
+    $effect: autorun.effect,
+    scope: {},
+    ...opt,
+  };
+
+  // 把 effectFn 字符串转为可执行函数，并传入所需的参数，支持异步
+  const getAsyncFunction = new Function(`return Object.getPrototypeOf(async function(){}).constructor;`);
+  const AsyncFunction = getAsyncFunction();
+  // 只能这样拿到 AsyncFunction
+  // 直接写 Object.getPrototypeOf(async function(){}).constructor
+  // 会被 babel 转成 Function
+  const asyncFunc = new AsyncFunction(
+    "opt",
+    `try {const {${Object.keys(_opt).join(", ")}} = opt || {};  const {${Object.keys(_opt.scope || {}).join(
+      ", ",
+    )}} = scope || {}; return ${funcStr}; } catch(err) {console.error("Error Formily Reactive Function: ", err);}`,
+  );
+
+  return function (opt) {
+    return asyncFunc.call(this, {
+      // opt = ["scope", "$self", "$deps", "$values", "$observable", "$memo", "$effect"],
+      $observable: observable,
+      $memo: autorun.memo,
+      $effect: autorun.effect,
+      ...opt,
+    });
+  };
+}

package/src/index.js

@@ -1,5 +1,5 @@
-import ListRender from "./list-render.jsx";
-
-export * from "@hzab/data-model";
-
-export default ListRender;
+import ListRender from "./list-render.jsx";
+
+export * from "@hzab/data-model";
+
+export default ListRender;

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,
@@ -123,23 +123,14 @@ const ListRender = forwardRef(function (props, parentRef) {
     Promise.resolve().then(() => {
       if (queryRef.current && queryRef.current?.formRef?.current?.formRender) {
         const extractValues = extractSplitDateRanges(filters, schema, getUrlQuery);
-
         queryRef.current.formRef.current.formRender?.setValues(extractValues);
 
         formQueryRef.current = _.cloneDeep(getUrlQuery);
       }
+      !props.closeAutoRequest && getList({});
     });
-
-    !props.closeAutoRequest && getList({ ...(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 +143,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 +223,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 +233,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 +447,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,