@hzab/list-render 1.10.2 → 1.10.5

package/src/components/Formily/FormilyEditTable.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useCallback, useRef } from "react";
+import React, { useState, useCallback, useRef, useEffect } from "react";
 import { Card, Slider, Rate, Form, Button } from "antd";
 import { EditOutlined, CheckOutlined, CloseOutlined } from "@ant-design/icons";
 import { createSchemaField, FormProvider, FormConsumer } from "@formily/react";
@@ -26,7 +26,7 @@ export interface EditableCellProps extends React.HTMLAttributes<HTMLElement> {
   record: Item;
   index: number;
   editable: boolean;
-  onEdit: (record: Partial<Item> & { key: React.Key }, dataIndex: string) => void;
+  onEdit: (record: Partial<Item> & { key: React.Key }, dataIndex: string, opt: Object) => void;
   onSave: () => void;
   onCancel: () => void;
   topProps: {
@@ -57,6 +57,7 @@ export const EditableCell: React.FC<EditableCellProps> = ({
   const fDisplay = field?.["x-display"];
   const { editMode = "modal" } = topProps || {};
   const { hasEdit } = topProps?.config || {};
+  const fieldRef = useRef();
 
   // 弹窗编辑模式
   if (editMode === "modal") {
@@ -79,7 +80,21 @@ export const EditableCell: React.FC<EditableCellProps> = ({
             schema={{
               type: "object",
               properties: {
-                [field.name]: { ...field, title: "" },
+                [field.name]: {
+                  ...field,
+                  title: "",
+                  ["x-component-props"]: {
+                    ...field["x-component-props"],
+                    ref: (ref) => {
+                      if (field["x-component-props"] && typeof field["x-component-props"].ref === "function") {
+                        field["x-component-props"].ref(ref);
+                      }
+                      if (ref) {
+                        fieldRef.current = ref;
+                      }
+                    },
+                  },
+                },
               },
             }}
           />
@@ -104,7 +119,7 @@ export const EditableCell: React.FC<EditableCellProps> = ({
           onDoubleClick={(e) => {
             e?.preventDefault();
             e?.stopPropagation();
-            onEdit(record, dataIndex);
+            onEdit(record, dataIndex, { field, fieldRef });
           }}
         >
           {children}
@@ -113,7 +128,7 @@ export const EditableCell: React.FC<EditableCellProps> = ({
             onClick={(e) => {
               e?.preventDefault();
               e?.stopPropagation();
-              onEdit(record, dataIndex);
+              onEdit(record, dataIndex, { field, fieldRef });
             }}
           />
         </div>
@@ -162,21 +177,32 @@ export const useEditTable = (props) => {
   const isEditing = (record: Item) => record[idKey] === editingId;
   /** 判断当前 单元格 是否处于编辑状态 */
   const isEditingCell = (key) => key === editingKey;
+  const editingFiledRef = useRef(null);
+
+  useEffect(() => {
+    if (editingId || editingKey) {
+      editingFiledRef.current?.current?.focus?.();
+    }
+  }, [editingId, editingKey]);
 
   /**
    * 点击编辑按钮
    * @param record
    */
-  const onEdit = async (record: Partial<Item> & { key: React.Key }, key) => {
+  const onEdit = async (record: Partial<Item> & { key: React.Key }, key, opt = { fieldRef: null }) => {
+    const { fieldRef } = opt || {};
+    editingFiledRef.current = fieldRef;
+
     const value = await (props.onEdit && props.onEdit(record));
     formRender?.setValues(value);
     setEditingId(record[idKey]);
-    editMode === "cell" && setEditingKey(key);
+    setEditingKey(key);
   };
 
   const onCancel = () => {
     setEditingId("");
     setEditingKey("");
+    editingFiledRef.current = null;
   };
 
   /**

package/src/components/Formily/FormilyField.tsx

@@ -1,68 +1,68 @@
-import { memo, useEffect, useState, useMemo, useCallback, useRef } from "react";
-import { createForm } from "@formily/core";
-import { createSchemaField, useField, useFieldSchema, observer, FormProvider, Schema } from "@formily/react";
-import { Form } from "c-formily-antd";
-import { handleReaction } from "../../common/handleReactions";
-
-import { antdComponents, customComponents } from "@hzab/form-render";
-
-type formilyFieldPropsT = {
-  schema: Schema;
-  formilyRef: any;
-  schemaScope: Object;
-  components: Object;
-  reactionOpts?: Object;
-};
-
-// TODO: 借住 formily 核心代码实现相关数据响应
-// 页面中加载 formily，以此获取到 field、fieldSchema 等数据
-export const FormilyField = memo(function (props: formilyFieldPropsT) {
-  const { schema, formilyRef, schemaScope, components, reactionOpts } = props;
-  const { fields, fieldSchemas } = formilyRef.current || {};
-  const SchemaField = useCallback(
-    createSchemaField({
-      // @ts-ignore
-      components: {
-        ...antdComponents,
-        ...customComponents,
-        ...components,
-        FormItem(props) {
-          const field = useField();
-          const fieldSchema = useFieldSchema();
-          const { name } = fieldSchema;
-          fields[name] = field;
-          fieldSchemas[name] = fieldSchema;
-          // 处理自定义的变量
-          handleReaction(fieldSchema, { ...reactionOpts, scope: schemaScope });
-          const Com = antdComponents?.FormItem;
-          return Com && <Com {...props} />;
-        },
-      },
-      scope: { ...schemaScope },
-    }),
-    [],
-  );
-
-  const formRender = useMemo(
-    () =>
-      createForm({
-        initialValues: {},
-        // 禁用状态（注意，自定义组件组件自行获取对应的状态）
-        readOnly: true,
-        disabled: true,
-      }),
-    [],
-  );
-
-  return (
-    <Form
-      className={`hidden-table-form-render`}
-      style={{ display: "none", width: 0, height: 0, overflow: "hidden" }}
-      form={formRender}
-    >
-      <SchemaField schema={schema}></SchemaField>
-    </Form>
-  );
-});
-
-export default FormilyField;
+import { memo, useEffect, useState, useMemo, useCallback, useRef } from "react";
+import { createForm } from "@formily/core";
+import { createSchemaField, useField, useFieldSchema, observer, FormProvider, Schema } from "@formily/react";
+import { Form } from "c-formily-antd";
+import { handleReaction } from "../../common/handleReactions";
+
+import { antdComponents, customComponents } from "@hzab/form-render";
+
+type formilyFieldPropsT = {
+  schema: Schema;
+  formilyRef: any;
+  schemaScope: Object;
+  components: Object;
+  reactionOpts?: Object;
+};
+
+// TODO: 借住 formily 核心代码实现相关数据响应
+// 页面中加载 formily，以此获取到 field、fieldSchema 等数据
+export const FormilyField = memo(function (props: formilyFieldPropsT) {
+  const { schema, formilyRef, schemaScope, components, reactionOpts } = props;
+  const { fields, fieldSchemas } = formilyRef.current || {};
+  const SchemaField = useCallback(
+    createSchemaField({
+      // @ts-ignore
+      components: {
+        ...antdComponents,
+        ...customComponents,
+        ...components,
+        FormItem(props) {
+          const field = useField();
+          const fieldSchema = useFieldSchema();
+          const { name } = fieldSchema;
+          fields[name] = field;
+          fieldSchemas[name] = fieldSchema;
+          // 处理自定义的变量
+          handleReaction(fieldSchema, { ...reactionOpts, scope: schemaScope });
+          const Com = antdComponents?.FormItem;
+          return Com && <Com {...props} />;
+        },
+      },
+      scope: { ...schemaScope },
+    } as any),
+    [],
+  );
+
+  const formRender = useMemo(
+    () =>
+      createForm({
+        initialValues: {},
+        // 禁用状态（注意，自定义组件组件自行获取对应的状态）
+        readOnly: true,
+        disabled: true,
+      }),
+    [],
+  );
+
+  return (
+    <Form
+      className={`hidden-table-form-render`}
+      style={{ display: "none", width: 0, height: 0, overflow: "hidden" }}
+      form={formRender}
+    >
+      <SchemaField schema={schema}></SchemaField>
+    </Form>
+  );
+});
+
+export default FormilyField;

package/src/list-render.jsx

@@ -15,6 +15,13 @@ import FormModal from "./FormModal";
 import DetailModal from "./DetailModal";
 
 import { objToFormData } from "./common/utils";
+import {
+  setURLObjectQueryParam,
+  getURLObjectQueryParam,
+  removeURLObjectQueryParam,
+  extractSplitDateRanges,
+} from "./common/handleQuerySchema";
+import { CLEAR_LIST, URL_PARAM_NAME } from "./common/constant";
 
 import "./index.less";
 
@@ -43,6 +50,16 @@ const ListRender = forwardRef(function (props, parentRef) {
      * 表单提交是否使用 FormData 格式
      */
     useFormData: _useFormData,
+
+    /**
+     * 筛选条件改变时是否将参数（对象形式）设置到url query中
+     * */
+    appendUrlQuery = false,
+
+    /**
+     * 自定义设置url query对象参数的key
+     * */
+    appendUrlQueryKey = URL_PARAM_NAME,
   } = props;
   const pageSizeOptions = props.paginationConf?.pageSizeOptions || pageSizeOptionMap[props.layout] || [10, 20, 50, 100];
   // const [pageSizeOptions, setPageSizeOptions] = useState(
@@ -77,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];
@@ -86,20 +103,34 @@ const ListRender = forwardRef(function (props, parentRef) {
   // }, [layout]);
 
   useEffect(() => {
+    const getUrlQuery = appendUrlQuery ? getURLObjectQueryParam(appendUrlQueryKey) : {};
+
     if (model) {
       if (!model.query) {
         model.query = {};
       } else {
+        model.query.pageNum = 1;
+
         modelQueryRef.current = model?.query;
         paginationQueryRef.current = {
-          pageNum: model?.query?.pageNum ?? paginationQueryRef.current?.pageNum,
-          pageSize: model?.query?.pageSize ?? paginationQueryRef.current?.pageSize,
+          pageNum: getUrlQuery?.pageNum || model?.query?.pageNum || paginationQueryRef.current?.pageNum,
+          pageSize: getUrlQuery?.pageSize || model?.query?.pageSize || paginationQueryRef.current?.pageSize,
         };
       }
-      model.query.pageNum = 1;
     }
-    // 首次自动请求，取 筛选表单的默认值 进行请求
-    !props.closeAutoRequest && onSearch(queryFormInitialValues);
+
+    // 延迟获取表单实例
+    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({ ...(modelQueryRef.current || {}), ...getUrlQuery });
   }, []);
 
   useEffect(() => {
@@ -156,7 +187,6 @@ const ListRender = forwardRef(function (props, parentRef) {
     }
 
     // model.query = mergedQueries;
-
     // 取消上一次请求
     getListSourceRef.current?.cancel({ code: 601, message: "取消上一次请求" });
 
@@ -196,11 +226,19 @@ const ListRender = forwardRef(function (props, parentRef) {
     // model.query.pageNum = page;
     // model.query.pageSize = size;
     paginationQueryRef.current = { pageNum: page, pageSize: size };
+
+    if (appendUrlQuery) {
+      const getUrlQuery = getURLObjectQueryParam(appendUrlQueryKey);
+      setURLObjectQueryParam({ ...getUrlQuery, ...paginationQueryRef.current }, appendUrlQueryKey);
+    }
     getList();
   }
 
-  function onSearch(quer, source) {
+  function onSearch(quer, source, isReset = false) {
     const query = source === "queryRender" ? { ...quer } : { ...formQueryRef.current, ...quer };
+    // 重置操作时不赋值
+    if (source === "queryRender" && !isReset && appendUrlQuery) setURLObjectQueryParam(query, appendUrlQueryKey);
+
     if (model && !model.query) {
       model.query = {};
     }
@@ -215,6 +253,28 @@ const ListRender = forwardRef(function (props, parentRef) {
     getList(query);
   }
 
+  function handleFormReset() {
+    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() {
     setList((l) => _.cloneDeep(l));
   }
@@ -375,17 +435,15 @@ const ListRender = forwardRef(function (props, parentRef) {
             search={props.search}
             filters={props.filters}
             config={props.queryConf}
-            queryFormInitialValues={
-              queryFormIsExtendModelQuery
-                ? {
-                    ...queryFormInitialValues,
-                    ...model.query,
-                  }
-                : queryFormInitialValues
-            }
+            queryFormInitialValues={{
+              ...queryFormInitialValues,
+              ...(queryFormIsExtendModelQuery ? model.query : {}),
+            }}
             onSearch={onSearch}
+            onReset={handleFormReset}
             schemaScope={props.schemaScope}
             components={props.components}
+            onFieldValueChange={handleFieldValueChange}
             i18n={i18n}
           />
         ) : (

package/src/query-render/index.jsx

@@ -1,92 +1,95 @@
-import { useState, useRef, useEffect, useImperativeHandle, forwardRef } from "react";
-import { Button } from "antd";
-import dayjs from "dayjs";
-import _ from "lodash";
-
-import FormRender from "@hzab/form-render";
-import { handleQuerySchema } from "../common/handleQuerySchema";
-
-import "./index.less";
-
-function QueryRender(props, parentRef) {
-  const [schema, setSchema] = useState({});
-  const formRef = useRef();
-
-  useImperativeHandle(parentRef, () => ({ formRef }));
-
-  useEffect(() => {
-    setSchema(
-      handleQuerySchema({
-        ...props?.config,
-        schemaScope: { ...props.schemaScope, scenario: "query" },
-        schema: _.cloneDeep(props.schema),
-        search: props.search,
-        filters: _.cloneDeep(props.filters),
-        onSearch,
-      }),
-    );
-  }, [props.search, props.filters, props.schema, props.schema?.schema]);
-
-  async function onSearch() {
-    let query = _.cloneDeep(formRef?.current?.formRender?.values);
-    if (props.filters?.includes("$timerange")) {
-      if (query.$timerange?.[0] instanceof dayjs) {
-        query.beginTime = query.$timerange?.[0]?.format("YYYY-MM-DD HH:mm:ss");
-        query.endTime = query.$timerange?.[1]?.format("YYYY-MM-DD HH:mm:ss");
-      } else {
-        query.beginTime = query.$timerange?.[0];
-        query.endTime = query.$timerange?.[1];
-      }
-      delete query.$timerange;
-    }
-    if (props.config?.queryMap) {
-      query = props.config?.queryMap(query);
-    }
-
-    if (props.config?.beforeQuerySearch && typeof props.config?.beforeQuerySearch === "function") {
-      // 处理 beforeQuerySearch 为同步或者异步函数的情况
-      const beforeQuerySearchResult = await Promise.resolve(props.config?.beforeQuerySearch?.(query));
-
-      if (!beforeQuerySearchResult) return;
-    }
-    return props.onSearch && props.onSearch(query, "queryRender");
-  }
-
-  function onReset() {
-    formRef.current?.formRender?.reset();
-    props.onSearch && props.onSearch(_.cloneDeep(formRef?.current?.formRender?.values), "queryRender");
-  }
-
-  return (
-    <div className="query-render">
-      {Object.keys(schema?.schema?.properties || {}).length > 0 ? (
-        <>
-          <FormRender
-            ref={formRef}
-            layout="inline"
-            schema={schema}
-            schemaScope={{ scenario: "query", ...(props.schemaScope || {}) }}
-            initialValues={props.queryFormInitialValues}
-            Slots={() => {
-              return (
-                <div className="query-operation">
-                  <Button className="query-btn" type="primary" onClick={onSearch}>
-                    搜索
-                  </Button>
-                  {props.config?.hasReset && (
-                    <Button className="query-btn" onClick={onReset}>
-                      重置
-                    </Button>
-                  )}
-                </div>
-              );
-            }}
-            components={props.components}
-          ></FormRender>
-        </>
-      ) : null}
-    </div>
-  );
-}
-
-export default forwardRef(QueryRender);
+import { useState, useRef, useEffect, useImperativeHandle, forwardRef } from "react";
+import { Button } from "antd";
+import dayjs from "dayjs";
+import _ from "lodash";
+
+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({});
+  const formRef = useRef();
+
+  useImperativeHandle(parentRef, () => ({ formRef }));
+
+  useEffect(() => {
+    setSchema(
+      handleQuerySchema({
+        ...props?.config,
+        schemaScope: { ...props.schemaScope, scenario: "query" },
+        schema: _.cloneDeep(props.schema),
+        search: props.search,
+        filters: _.cloneDeep(props.filters),
+        onSearch,
+      }),
+    );
+  }, [props.search, props.filters, props.schema, props.schema?.schema]);
+
+  async function onSearch() {
+    let query = _.cloneDeep(formRef?.current?.formRender?.values);
+    if (props.filters?.includes("$timerange")) {
+      if (query.$timerange?.[0] instanceof dayjs) {
+        query.beginTime = query.$timerange?.[0]?.format("YYYY-MM-DD HH:mm:ss");
+        query.endTime = query.$timerange?.[1]?.format("YYYY-MM-DD HH:mm:ss");
+      } else {
+        query.beginTime = query.$timerange?.[0];
+        query.endTime = query.$timerange?.[1];
+      }
+      delete query.$timerange;
+    }
+    if (props.config?.queryMap) {
+      query = props.config?.queryMap(query);
+    }
+
+    if (props.config?.beforeQuerySearch && typeof props.config?.beforeQuerySearch === "function") {
+      // 处理 beforeQuerySearch 为同步或者异步函数的情况
+      const beforeQuerySearchResult = await Promise.resolve(props.config?.beforeQuerySearch?.(query));
+
+      if (!beforeQuerySearchResult) return;
+    }
+    return props.onSearch && props.onSearch(query, "queryRender");
+  }
+
+  function onReset() {
+    formRef.current?.formRender?.reset();
+    props.onReset?.();
+    props.onSearch && props.onSearch(_.cloneDeep(formRef?.current?.formRender?.values), "queryRender", true);
+  }
+
+  return (
+    <div className="query-render">
+      {Object.keys(schema?.schema?.properties || {}).length > 0 ? (
+        <>
+          <FormRender
+            ref={formRef}
+            layout="inline"
+            schema={schema}
+            schemaScope={{ scenario: "query", ...(props.schemaScope || {}) }}
+            initialValues={props.queryFormInitialValues}
+            onFieldValueChange={props.onFieldValueChange}
+            Slots={() => {
+              return (
+                <div className="query-operation">
+                  <Button className="query-btn" type="primary" onClick={onSearch}>
+                    搜索
+                  </Button>
+                  {props.config?.hasReset && (
+                    <Button className="query-btn" onClick={onReset}>
+                      重置
+                    </Button>
+                  )}
+                </div>
+              );
+            }}
+            components={props.components}
+          ></FormRender>
+        </>
+      ) : null}
+    </div>
+  );
+}
+
+export default forwardRef(QueryRender);