@hzab/list-render 1.11.0 → 1.12.0

package/src/FormModal/index.tsx

@@ -1,210 +1,210 @@
-import { forwardRef, useEffect, useImperativeHandle, useRef, useState, useMemo } from "react";
-import _ from "lodash";
-
-import { Modal, Drawer, Button, message } from "antd";
-
-import FormRender from "@hzab/form-render";
-
-import "./index.less";
-
-let _formData = null;
-
-export interface IFormRender {
-  setValues: Function;
-  reset: Function;
-  validate: Function;
-  values: Object;
-}
-export interface IFormRef {
-  formRender: IFormRender;
-}
-
-/**
- * 表单弹层，包含弹窗、抽屉两种模式
- * @param props
- * @param parentRef
- * @returns
- */
-export function FormModal(props, parentRef) {
-  const { modalMode, Slots = {}, modalConf = {}, modalProps = {} } = props;
-  const [loading, setLoading] = useState(false);
-  const [title, setTitle] = useState("新增");
-  const [open, setOpen] = useState(false);
-  const formRef = useRef<IFormRef>();
-  const scenarioRef = useRef<string>("create");
-
-  const FormSlot = useMemo(() => props.Slots?.FormSlot, [props.Slots?.FormSlot]);
-
-  function show(formData = props.formInitialValues, title, scenario = "create") {
-    scenarioRef.current = scenario || "create";
-    setOpen(true);
-    // 处理 formRef.current 为 undefined 的问题
-    if (formRef.current?.formRender?.setValues) {
-      formRef.current?.formRender?.setValues(formData);
-      _formData = null;
-    } else {
-      _formData = formData;
-    }
-    setTitle(title || "新增");
-  }
-
-  function close() {
-    props.onClose && props.onClose();
-    setOpen(false);
-    formRef.current?.formRender?.reset();
-  }
-
-  useImperativeHandle(parentRef, () => ({
-    show,
-    close,
-    cancel: close,
-    onOk,
-    formRef,
-  }));
-
-  // Hack: 解决 FormModal DetailModal 相互影响的问题
-  if (!open) {
-    return null;
-  }
-
-  function onOk() {
-    validate().then(async () => {
-      const submitForm = _.cloneDeep(await formRef.current?.formRender?.values);
-      if (modalConf.beforeSubmit) {
-        const isContinue = await modalConf.beforeSubmit(submitForm, {
-          cancel: close,
-          formRef,
-          scenario: scenarioRef.current,
-        });
-        if (isContinue === false) {
-          return;
-        }
-      }
-
-      try {
-        setLoading(true);
-        await (props.onSubmit && props.onSubmit(submitForm));
-        close();
-      } catch (error) {
-        console.error(error);
-      }
-      setLoading(false);
-    });
-  }
-
-  /**
-   * 校验表单
-   * @returns
-   */
-  function validate(hideMessage = false) {
-    return new Promise((resolve, reject) => {
-      formRef.current?.formRender
-        ?.validate()
-        .then((values) => {
-          resolve(values);
-        })
-        .catch((err) => {
-          reject(err);
-          console.error("Error validate: ", err);
-          !hideMessage && message.error("输入有误！");
-        });
-    });
-  }
-
-  let footer = undefined;
-  const options = {
-    cancel: close,
-    onOk,
-    close,
-    formRef,
-    validate,
-    scenario: scenarioRef.current,
-  };
-  if (modalConf?.footer) {
-    footer = typeof modalConf?.footer === "function" ? modalConf.footer({ ...options, options }) : modalConf?.footer;
-  } else {
-    footer = [];
-
-    if (Slots.modalFooterPre) {
-      footer.push(<Slots.modalFooterPre key="pre" options={options} />);
-    }
-
-    footer.push(
-      <Button key="cancel" onClick={close}>
-        {modalConf.cancelText || "取 消"}
-      </Button>,
-    );
-
-    if (Slots.modalFooterCenter) {
-      footer.push(<Slots.modalFooterCenter key="center" options={options} />);
-    }
-
-    footer.push(
-      <Button key="confirm" type="primary" onClick={onOk} loading={loading}>
-        {modalConf.okText || "确 定"}
-      </Button>,
-    );
-
-    if (Slots.modalFooterSuffix) {
-      footer.push(<Slots.modalFooterSuffix key="suffix" options={options} />);
-    }
-  }
-
-  /**
-   * 解决 show 函数中 formRef.current 为 undefined 的问题
-   */
-  function didMount() {
-    props.modalFormMount && props.modalFormMount();
-    if (_formData) {
-      formRef.current?.formRender?.setValues(_formData);
-      _formData = null;
-    }
-  }
-
-  const CModal = modalMode === "drawer" ? Drawer : Modal;
-  const _modalProps = {
-    className: "form-modal",
-    wrapClassName: "form-modal",
-    title: title,
-    visible: open,
-    open: open,
-    onClose: close,
-    onCancel: close,
-    onOk: onOk,
-    footer: footer,
-    maskClosable: modalProps.maskClosable || false,
-    width: modalConf?.width ?? 720,
-    // 解决弹窗不销毁，表单远程数据没有更新的问题
-    destroyOnClose: true,
-    ...modalProps,
-  };
-
-  return (
-    <CModal {..._modalProps}>
-      {FormSlot ? (
-        <FormSlot {...props} formRef={formRef} scenario={scenarioRef.current} schema={props.schema} />
-      ) : (
-        <FormRender
-          {...props.formProps}
-          ref={formRef}
-          schema={props.schema}
-          schemaScope={{
-            scenario: scenarioRef.current,
-            ...(props.schemaScope || {}),
-          }}
-          components={props.components}
-        ></FormRender>
-      )}
-      <DidMount didMount={didMount} />
-    </CModal>
-  );
-}
-
-function DidMount(props) {
-  useEffect(() => {
-    props.didMount();
-  }, []);
-  return null;
-}
-
-export default forwardRef(FormModal);
+import { forwardRef, useEffect, useImperativeHandle, useRef, useState, useMemo } from "react";
+import _ from "lodash";
+
+import { Modal, Drawer, Button, message } from "antd";
+
+import FormRender from "@hzab/form-render";
+
+import "./index.less";
+
+let _formData = null;
+
+export interface IFormRender {
+  setValues: Function;
+  reset: Function;
+  validate: Function;
+  values: Object;
+}
+export interface IFormRef {
+  formRender: IFormRender;
+}
+
+/**
+ * 表单弹层，包含弹窗、抽屉两种模式
+ * @param props
+ * @param parentRef
+ * @returns
+ */
+export function FormModal(props, parentRef) {
+  const { modalMode, Slots = {}, modalConf = {}, modalProps = {} } = props;
+  const [loading, setLoading] = useState(false);
+  const [title, setTitle] = useState("新增");
+  const [open, setOpen] = useState(false);
+  const formRef = useRef<IFormRef>();
+  const scenarioRef = useRef<string>("create");
+
+  const FormSlot = useMemo(() => props.Slots?.FormSlot, [props.Slots?.FormSlot]);
+
+  function show(formData = props.formInitialValues, title, scenario = "create") {
+    scenarioRef.current = scenario || "create";
+    setOpen(true);
+    // 处理 formRef.current 为 undefined 的问题
+    if (formRef.current?.formRender?.setValues) {
+      formRef.current?.formRender?.setValues(formData);
+      _formData = null;
+    } else {
+      _formData = formData;
+    }
+    setTitle(title || "新增");
+  }
+
+  function close() {
+    props.onClose && props.onClose();
+    setOpen(false);
+    formRef.current?.formRender?.reset();
+  }
+
+  useImperativeHandle(parentRef, () => ({
+    show,
+    close,
+    cancel: close,
+    onOk,
+    formRef,
+  }));
+
+  // Hack: 解决 FormModal DetailModal 相互影响的问题
+  if (!open) {
+    return null;
+  }
+
+  function onOk() {
+    validate().then(async () => {
+      const submitForm = _.cloneDeep(await formRef.current?.formRender?.values);
+      if (modalConf.beforeSubmit) {
+        const isContinue = await modalConf.beforeSubmit(submitForm, {
+          cancel: close,
+          formRef,
+          scenario: scenarioRef.current,
+        });
+        if (isContinue === false) {
+          return;
+        }
+      }
+
+      try {
+        setLoading(true);
+        await (props.onSubmit && props.onSubmit(submitForm));
+        close();
+      } catch (error) {
+        console.error(error);
+      }
+      setLoading(false);
+    });
+  }
+
+  /**
+   * 校验表单
+   * @returns
+   */
+  function validate(hideMessage = false) {
+    return new Promise((resolve, reject) => {
+      formRef.current?.formRender
+        ?.validate()
+        .then((values) => {
+          resolve(values);
+        })
+        .catch((err) => {
+          reject(err);
+          console.error("Error validate: ", err);
+          !hideMessage && message.error("输入有误！");
+        });
+    });
+  }
+
+  let footer = undefined;
+  const options = {
+    cancel: close,
+    onOk,
+    close,
+    formRef,
+    validate,
+    scenario: scenarioRef.current,
+  };
+  if (modalConf?.footer) {
+    footer = typeof modalConf?.footer === "function" ? modalConf.footer({ ...options, options }) : modalConf?.footer;
+  } else {
+    footer = [];
+
+    if (Slots.modalFooterPre) {
+      footer.push(<Slots.modalFooterPre key="pre" options={options} />);
+    }
+
+    footer.push(
+      <Button key="cancel" onClick={close}>
+        {modalConf.cancelText || "取 消"}
+      </Button>,
+    );
+
+    if (Slots.modalFooterCenter) {
+      footer.push(<Slots.modalFooterCenter key="center" options={options} />);
+    }
+
+    footer.push(
+      <Button key="confirm" type="primary" onClick={onOk} loading={loading}>
+        {modalConf.okText || "确 定"}
+      </Button>,
+    );
+
+    if (Slots.modalFooterSuffix) {
+      footer.push(<Slots.modalFooterSuffix key="suffix" options={options} />);
+    }
+  }
+
+  /**
+   * 解决 show 函数中 formRef.current 为 undefined 的问题
+   */
+  function didMount() {
+    props.modalFormMount && props.modalFormMount();
+    if (_formData) {
+      formRef.current?.formRender?.setValues(_formData);
+      _formData = null;
+    }
+  }
+
+  const CModal = modalMode === "drawer" ? Drawer : Modal;
+  const _modalProps = {
+    className: "form-modal",
+    wrapClassName: "form-modal",
+    title: title,
+    visible: open,
+    open: open,
+    onClose: close,
+    onCancel: close,
+    onOk: onOk,
+    footer: footer,
+    maskClosable: modalProps.maskClosable || false,
+    width: modalConf?.width ?? 720,
+    // 解决弹窗不销毁，表单远程数据没有更新的问题
+    destroyOnClose: true,
+    ...modalProps,
+  };
+
+  return (
+    <CModal {..._modalProps}>
+      {FormSlot ? (
+        <FormSlot {...props} formRef={formRef} scenario={scenarioRef.current} schema={props.schema} />
+      ) : (
+        <FormRender
+          {...props.formProps}
+          ref={formRef}
+          schema={props.schema}
+          schemaScope={{
+            scenario: scenarioRef.current,
+            ...(props.schemaScope || {}),
+          }}
+          components={props.components}
+        ></FormRender>
+      )}
+      <DidMount didMount={didMount} />
+    </CModal>
+  );
+}
+
+function DidMount(props) {
+  useEffect(() => {
+    props.didMount();
+  }, []);
+  return null;
+}
+
+export default forwardRef(FormModal);

package/src/table-render/index.jsx

@@ -17,7 +17,7 @@ import { getVal, getFieldList } from "../common/utils";
 import { handleReactions } from "../common/handleReactions";
 
 import { useEditTable, EditableCell } from "../components/Formily/FormilyEditTable";
-import CellEditTable from "../components/CellEditTable"
+import CellEditTable from "@hzab/edit-table"
 import "./index.less";
 
 const scenario = "table-render";
@@ -99,12 +99,131 @@ const TableRender = forwardRef(function (props, tableRef) {
     topProps: props.topProps,
   });
 
+  /** 处理childrn */
+  const handleChildColumns = (childColumns) => {
+    const fieldSchemas = formilyRef.current?.fields;
+    const { Slots = {} } = props;
+    return childColumns?.map((field, colIndex) => {
+      if (!(field.inTable !== false)) return
+
+      const { name, title } = field;
+      const comName = field["x-component"];
+      let _colConf = {};
+      if (props.config?.colConf && props.config?.colConf[field?.name]) {
+        _colConf = props.config?.colConf[field?.name];
+      }
+
+      let colRender = undefined;
+      if (Slots && Slots[field?.name]) {
+        colRender = function (text, record, index) {
+          const Slot = Slots[field?.name];
+          const slotProps = {
+            text,
+            record,
+            index,
+            field: { ...field, ...fieldSchemas?.[field?.name] },
+            fieldSchema: fieldSchemas?.[field?.name],
+          };
+          return <Slot {...slotProps} />;
+        };
+      } else {
+        colRender = function (text, record, index, ...args) {
+          const { width, ellipsis, emptyValue, showTags, showPrefixNode, showMode, enumRenderProps } = _colConf || {};
+          const schemaDefaultValue = fieldSchemas[field?.name]?.componentProps?.emptyValue;
+          const defaultValue = emptyValue ?? schemaDefaultValue ?? tableEmptyValue ?? "";
+
+          let val = getVal({ ...field, ...fieldSchemas[field?.name] }, record, {
+            fieldSchema: fieldSchemas?.[field?.name],
+          });
+
+          if (val === "" || val === undefined || val === null) {
+            val = defaultValue;
+          }
+
+          const content = (
+            <span className="inline-block-max-w" style={{ width }} title={ellipsis?.showTitle ? val : ""}>
+              {val}
+            </span>
+          );
+          if (ellipsis === true || (ellipsis && ellipsis?.showTitle != true)) {
+            return (
+              <Tooltip className="table-cell-ellipsis" {...ellipsis} title={val}>
+                {content}
+              </Tooltip>
+            );
+          }
+
+          if (showMode || showTags || showPrefixNode || (showPrefixNode !== false && comName === "Switch")) {
+            // field 通过 fieldSchemas 获取最新的 field 数据
+            let _showMode = showMode;
+            if (showTags) {
+              _showMode = SHOW_MODE_TYPES.tags;
+            } else if (showPrefixNode) {
+              _showMode = SHOW_MODE_TYPES.prefixNode;
+            }
+
+            return (
+              <EnumRender
+                showMode={_showMode}
+                value={_.get(record, field?.name)}
+                field={{ ...field, ...fieldSchemas?.[field?.name] }}
+                {...enumRenderProps}
+              />
+            );
+          }
+
+          return content;
+        };
+      }
+
+
+      let _title = isFunction(title) ? title() : title;
+      if (_colConf?.title) {
+        _title = isFunction(_colConf?.title) ? _colConf?.title() : _colConf?.title;
+      }
+      const decoratorProps = field["x-decorator-props"] || {};
+      if (decoratorProps.tooltip) {
+        _title = (
+          <span className="col-title-tooltip-wrap inline-block-max-w">
+            {_title}
+            <Tooltip className="col-title-tooltip" title={decoratorProps.tooltip}>
+              <QuestionCircleOutlined className="col-title-tooltip-icon" />
+            </Tooltip>
+          </span>
+        );
+      }
+      const childSelectList = fieldSchemas?.[field?.name]?.dataSource?.map((el) => ({
+        ...el,
+        label: el?.[field?.["x-component-props"]?.["fieldNames"]?.["label"]] || el?.label,
+        value: el?.[field?.["x-component-props"]?.["fieldNames"]?.["value"]] || el?.value,
+      }))
+      return {
+        getField: () => field,
+        editable: true,
+        ..._colConf,
+        onCell: (record, rowIndex, ci) =>
+          _colConf?.onCell?.({ ...record, _field: { ...field, ...(fieldSchemas?.[field?.name] || {}) } }, rowIndex, ci) || {},
+        // 函数式传入，解决 title ReactNode 传入报错问题（table 组件内部对 columns 进行 lodash.deepClone 导致 ReactNode 变成对象无法正常渲染） Uncaught TypeError: this.queryFeedbacks is not a function
+        title: () => _title,
+        key: field?.name,
+        dataIndex: field?.name,
+        type: field["x-validator"] == "number" ? "Number" : comName,
+        validatorList: field["x-validator"] || [],
+        nonEditable: editMode != "cell",
+        values: field?.enum || childSelectList || [],
+        cellProps: field.cellProps,
+        children: handleChildColumns(field?.children),
+        render: getColRender(colRender),
+      }
+
+    })?.filter((el) => (el))
+  }
   useEffect(() => {
     if (!(props.schema && props.schema.properties)) {
       return;
     }
     const fieldList = getFieldList(props.schema, [], { ...props.getFieldListOpt, formilyRef }, isTableSortXIdex);
-    const columns = [];
+    let columns = [];
 
     // 序号列
     if (orderColType === "page") {
@@ -130,123 +249,7 @@ const TableRender = forwardRef(function (props, tableRef) {
       scope: props.schemaScope,
       formilyRef,
     });
-
-    _fieldList.forEach((field, colIndex) => {
-      const fieldSchemas = formilyRef.current?.fields;
-      if (field.inTable !== false) {
-        const { name, title } = field;
-        const comName = field["x-component"];
-
-        let _colConf = {};
-
-        if (props.config?.colConf && props.config?.colConf[name]) {
-          _colConf = props.config?.colConf[name];
-        }
-
-        let colRender = undefined;
-        if (Slots && Slots[name]) {
-          colRender = function (text, record, index) {
-            const Slot = Slots[name];
-            const slotProps = {
-              text,
-              record,
-              index,
-              field: { ...field, ...fieldSchemas?.[name] },
-              fieldSchema: fieldSchemas?.[name],
-            };
-            return <Slot {...slotProps} />;
-          };
-        } else {
-          colRender = function (text, record, index, ...args) {
-            const { width, ellipsis, emptyValue, showTags, showPrefixNode, showMode, enumRenderProps } = _colConf || {};
-            const schemaDefaultValue = fieldSchemas[name]?.componentProps?.emptyValue;
-            const defaultValue = emptyValue ?? schemaDefaultValue ?? tableEmptyValue ?? "";
-
-            let val = getVal({ ...field, ...fieldSchemas[name] }, record, {
-              fieldSchema: fieldSchemas?.[name],
-            });
-
-            if (val === "" || val === undefined || val === null) {
-              val = defaultValue;
-            }
-
-            const content = (
-              <span className="inline-block-max-w" style={{ width }} title={ellipsis?.showTitle ? val : ""}>
-                {val}
-              </span>
-            );
-            if (ellipsis === true || (ellipsis && ellipsis?.showTitle != true)) {
-              return (
-                <Tooltip className="table-cell-ellipsis" {...ellipsis} title={val}>
-                  {content}
-                </Tooltip>
-              );
-            }
-
-            if (showMode || showTags || showPrefixNode || (showPrefixNode !== false && comName === "Switch")) {
-              // field 通过 fieldSchemas 获取最新的 field 数据
-              let _showMode = showMode;
-              if (showTags) {
-                _showMode = SHOW_MODE_TYPES.tags;
-              } else if (showPrefixNode) {
-                _showMode = SHOW_MODE_TYPES.prefixNode;
-              }
-
-              return (
-                <EnumRender
-                  showMode={_showMode}
-                  value={_.get(record, name)}
-                  field={{ ...field, ...fieldSchemas?.[name] }}
-                  {...enumRenderProps}
-                />
-              );
-            }
-
-            return content;
-          };
-        }
-
-        let _title = isFunction(title) ? title() : title;
-        if (_colConf?.title) {
-          _title = isFunction(_colConf?.title) ? _colConf?.title() : _colConf?.title;
-        }
-        const decoratorProps = field["x-decorator-props"] || {};
-        if (decoratorProps.tooltip) {
-          _title = (
-            <span className="col-title-tooltip-wrap inline-block-max-w">
-              {_title}
-              <Tooltip className="col-title-tooltip" title={decoratorProps.tooltip}>
-                <QuestionCircleOutlined className="col-title-tooltip-icon" />
-              </Tooltip>
-            </span>
-          );
-        }
-        const selectList = fieldSchemas?.[name]?.dataSource?.map((el) => ({
-          ...el,
-          label: el?.[field?.["x-component-props"]?.["fieldNames"]?.["label"]] || el?.label,
-          value: el?.[field?.["x-component-props"]?.["fieldNames"]?.["value"]] || el?.value,
-        }))
-
-        columns.push({
-          // field, // HACK: 直接传入 field 在 title 传入 ReactNode，内部深克隆导致页面报错白屏。使用函数获取解决
-          getField: () => field,
-          editable: true,
-          ..._colConf,
-          onCell: (record, rowIndex, ci) =>
-            _colConf?.onCell?.({ ...record, _field: { ...field, ...(fieldSchemas?.[name] || {}) } }, rowIndex, ci) || {},
-          // 函数式传入，解决 title ReactNode 传入报错问题（table 组件内部对 columns 进行 lodash.deepClone 导致 ReactNode 变成对象无法正常渲染） Uncaught TypeError: this.queryFeedbacks is not a function
-          title: () => _title,
-          key: name,
-          dataIndex: name,
-          type: field["x-validator"] == "number" ? "Number" : comName,
-          nonEditable: editMode != "cell",
-          values: field?.enum || selectList || [],
-          cellProps: field.cellProps,
-          children: field?.children,
-          render: getColRender(colRender),
-        });
-      }
-    });
+    columns = columns.concat(handleChildColumns(_fieldList))
 
     if (props.hasAction !== false) {
       const { hasEdit, hasDel, hasDelTips, hasDetail = false } = props.config || {};
@@ -439,6 +442,7 @@ const TableRender = forwardRef(function (props, tableRef) {
         isCellEditTable ? <CellEditTable
           {...tableProps}
           {...cellEditTableProps}
+          {...props}
           onEditSubmit={props?.onEditSubmit}
           Slots={props?.Slots}
           rowSelection={config?.rowSelection}