@hzab/form-render 1.6.1 → 1.6.3

package/CHANGELOG.md

@@ -1,3 +1,7 @@
+# @hzab/form-render@1.6.2
+
+feat:自增列表组件新增删除二次确认功能
+
 # @hzab/form-render@1.6.1
 
 fix:列表新增-上传组件删除后清除对应的值

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hzab/form-render",
-  "version": "1.6.1",
+  "version": "1.6.3",
   "description": "",
   "main": "src",
   "scripts": {

package/src/components/ArrayBase/index.tsx

@@ -0,0 +1,349 @@
+import { CopyOutlined, DeleteOutlined, DownOutlined, MenuOutlined, PlusOutlined, UpOutlined } from "@ant-design/icons";
+import { ArrayField } from "@formily/core";
+import { JSXComponent, Schema, useField, useFieldSchema } from "@formily/react";
+import { clone, isUndef, isValid } from "@formily/shared";
+import { Button, Popconfirm } from "antd";
+import { ButtonProps } from "antd/lib/button";
+import cls from "classnames";
+import React, { createContext, ReactNode, useContext } from "react";
+import { SortableHandle, usePrefixCls } from "c-formily-antd/lib/__builtins__";
+
+export interface IArrayBaseAdditionProps extends ButtonProps {
+  title?: string;
+  method?: "push" | "unshift";
+  defaultValue?: any;
+}
+export interface IArrayBaseOperationProps extends ButtonProps {
+  title?: string;
+  index?: number;
+  ref?: React.Ref<HTMLElement>;
+}
+
+export interface IArrayBaseContext {
+  props: IArrayBaseProps;
+  field: ArrayField;
+  schema: Schema;
+}
+
+export interface IArrayBaseItemProps {
+  index: number;
+  record: ((index: number) => Record<string, any>) | Record<string, any>;
+}
+
+export type ArrayBaseMixins = {
+  Addition?: React.FC<React.PropsWithChildren<IArrayBaseAdditionProps>>;
+  Copy?: React.FC<React.PropsWithChildren<IArrayBaseOperationProps & { index?: number }>>;
+  Remove?: React.FC<React.PropsWithChildren<IArrayBaseOperationProps & { index?: number }>>;
+  MoveUp?: React.FC<React.PropsWithChildren<IArrayBaseOperationProps & { index?: number }>>;
+  MoveDown?: React.FC<React.PropsWithChildren<IArrayBaseOperationProps & { index?: number }>>;
+  SortHandle?: React.FC<React.PropsWithChildren<IArrayBaseOperationProps & { index?: number }>>;
+  Index?: React.FC;
+  useArray?: () => IArrayBaseContext;
+  useIndex?: (index?: number) => number;
+  useRecord?: (record?: number) => any;
+  deletePopconfirmTitle?: ReactNode;
+  deletePopconfirm?: boolean;
+};
+
+export interface IArrayBaseProps {
+  disabled?: boolean;
+  onAdd?: (index: number) => void;
+  onCopy?: (index: number) => void;
+  onRemove?: (index: number) => void;
+  onMoveDown?: (index: number) => void;
+  onMoveUp?: (index: number) => void;
+  deletePopconfirmTitle?: () => ReactNode;
+  deletePopconfirm?: boolean;
+}
+
+type ComposedArrayBase = React.FC<React.PropsWithChildren<IArrayBaseProps>> &
+  ArrayBaseMixins & {
+    Item?: React.FC<React.PropsWithChildren<IArrayBaseItemProps>>;
+    mixin?: <T extends JSXComponent>(target: T) => T & ArrayBaseMixins;
+  };
+
+const ArrayBaseContext = createContext<IArrayBaseContext>(null);
+
+const ItemContext = createContext<IArrayBaseItemProps>(null);
+
+const takeRecord = (val: any, index?: number) => (typeof val === "function" ? val(index) : val);
+
+const useArray = () => {
+  return useContext(ArrayBaseContext);
+};
+
+const useIndex = (index?: number) => {
+  const ctx = useContext(ItemContext);
+  return ctx ? ctx.index : index;
+};
+
+const useRecord = (record?: number) => {
+  const ctx = useContext(ItemContext);
+  return takeRecord(ctx ? ctx.record : record, ctx?.index);
+};
+
+const getSchemaDefaultValue = (schema: Schema) => {
+  if (schema?.type === "array") return [];
+  if (schema?.type === "object") return {};
+  if (schema?.type === "void") {
+    for (let key in schema.properties) {
+      const value = getSchemaDefaultValue(schema.properties[key]);
+      if (isValid(value)) return value;
+    }
+  }
+};
+
+const getDefaultValue = (defaultValue: any, schema: Schema) => {
+  if (isValid(defaultValue)) return clone(defaultValue);
+  if (Array.isArray(schema?.items)) return getSchemaDefaultValue(schema?.items[0]);
+  return getSchemaDefaultValue(schema?.items);
+};
+
+export const ArrayBase: ComposedArrayBase = (props: any) => {
+  const field = useField<ArrayField>();
+  const schema = useFieldSchema();
+  return <ArrayBaseContext.Provider value={{ field, schema, props }}>{props.children}</ArrayBaseContext.Provider>;
+};
+
+ArrayBase.Item = ({ children, ...props }) => {
+  return <ItemContext.Provider value={props}>{children}</ItemContext.Provider>;
+};
+
+const SortHandle = SortableHandle((props: any) => {
+  const prefixCls = usePrefixCls("formily-array-base");
+  return (
+    <MenuOutlined {...props} className={cls(`${prefixCls}-sort-handle`, props.className)} style={{ ...props.style }} />
+  );
+}) as any;
+
+ArrayBase.SortHandle = (props) => {
+  const array = useArray();
+  if (!array) return null;
+  if (array.field?.pattern !== "editable") return null;
+  return <SortHandle {...props} />;
+};
+
+ArrayBase.Index = (props) => {
+  const index = useIndex();
+  const prefixCls = usePrefixCls("formily-array-base");
+  return (
+    <span {...props} className={`${prefixCls}-index`}>
+      #{index + 1}.
+    </span>
+  );
+};
+
+ArrayBase.Addition = (props) => {
+  const self = useField();
+  const array = useArray();
+  const prefixCls = usePrefixCls("formily-array-base");
+  if (!array) return null;
+  if (array.field?.pattern !== "editable" && array.field?.pattern !== "disabled") return null;
+  return (
+    <Button
+      type="dashed"
+      block
+      {...props}
+      disabled={self?.disabled}
+      className={cls(`${prefixCls}-addition`, props.className)}
+      onClick={(e) => {
+        if (array.props?.disabled) return;
+        if (props.onClick) {
+          props.onClick(e);
+          if (e.defaultPrevented) return;
+        }
+        const defaultValue = getDefaultValue(props.defaultValue, array.schema);
+        if (props.method === "unshift") {
+          array.field?.unshift?.(defaultValue);
+          array.props?.onAdd?.(0);
+        } else {
+          array.field?.push?.(defaultValue);
+          array.props?.onAdd?.(array?.field?.value?.length - 1);
+        }
+      }}
+      icon={isUndef(props.icon) ? <PlusOutlined /> : props.icon}
+    >
+      {props.title || self.title}
+    </Button>
+  );
+};
+
+ArrayBase.Copy = React.forwardRef((props, ref) => {
+  const self = useField();
+  const array = useArray();
+  const index = useIndex(props.index);
+  const prefixCls = usePrefixCls("formily-array-base");
+  if (!array) return null;
+  if (array.field?.pattern !== "editable") return null;
+  return (
+    <Button
+      type="text"
+      {...props}
+      disabled={self?.disabled}
+      className={cls(`${prefixCls}-copy`, self?.disabled ? `${prefixCls}-copy-disabled` : "", props.className)}
+      ref={ref}
+      onClick={(e) => {
+        if (self?.disabled) return;
+        e.stopPropagation();
+        if (array.props?.disabled) return;
+        if (props.onClick) {
+          props.onClick(e);
+          if (e.defaultPrevented) return;
+        }
+        const value = clone(array?.field?.value[index]);
+        const distIndex = index + 1;
+        array.field?.insert?.(distIndex, value);
+        array.props?.onCopy?.(distIndex);
+      }}
+      icon={isUndef(props.icon) ? <CopyOutlined /> : props.icon}
+    >
+      {props.title || self.title}
+    </Button>
+  );
+});
+
+ArrayBase.Remove = React.forwardRef((props, ref) => {
+  const index = useIndex(props.index);
+  const self = useField();
+  const array = useArray();
+  const prefixCls = usePrefixCls("formily-array-base");
+  if (!array) return null;
+  if (array.field?.pattern !== "editable") return null;
+
+  return (
+    <>
+      {array.props?.deletePopconfirm && !self?.disabled ? (
+        <Popconfirm
+          {...array.props}
+          title={array.props?.deletePopconfirmTitle() || null}
+          onConfirm={() => {
+            if (self?.disabled) return;
+            array.field?.remove?.(index);
+            array.props?.onRemove?.(index);
+          }}
+        >
+          <Button
+            type="text"
+            {...props}
+            disabled={self?.disabled}
+            className={cls(
+              `${prefixCls}-remove`,
+              self?.disabled ? `${prefixCls}-remove-disabled` : "",
+              props.className,
+            )}
+            ref={ref}
+            icon={isUndef(props.icon) ? <DeleteOutlined /> : props.icon}
+          >
+            {props.title || self.title}
+          </Button>
+        </Popconfirm>
+      ) : (
+        <Button
+          type="text"
+          {...props}
+          disabled={self?.disabled}
+          className={cls(`${prefixCls}-remove`, self?.disabled ? `${prefixCls}-remove-disabled` : "", props.className)}
+          ref={ref}
+          onClick={(e) => {
+            if (self?.disabled) return;
+            e.stopPropagation();
+            if (props.onClick) {
+              props.onClick(e);
+              if (e.defaultPrevented) return;
+            }
+            array.field?.remove?.(index);
+            array.props?.onRemove?.(index);
+          }}
+          icon={isUndef(props.icon) ? <DeleteOutlined /> : props.icon}
+        >
+          {props.title || self.title}
+        </Button>
+      )}
+    </>
+  );
+});
+
+ArrayBase.MoveDown = React.forwardRef((props, ref) => {
+  const index = useIndex(props.index);
+  const self = useField();
+  const array = useArray();
+  const prefixCls = usePrefixCls("formily-array-base");
+  if (!array) return null;
+  if (array.field?.pattern !== "editable") return null;
+  return (
+    <Button
+      type="text"
+      {...props}
+      disabled={self?.disabled}
+      className={cls(
+        `${prefixCls}-move-down`,
+        self?.disabled ? `${prefixCls}-move-down-disabled` : "",
+        props.className,
+      )}
+      ref={ref}
+      onClick={(e) => {
+        if (self?.disabled) return;
+        e.stopPropagation();
+        if (props.onClick) {
+          props.onClick(e);
+          if (e.defaultPrevented) return;
+        }
+        array.field?.moveDown?.(index);
+        array.props?.onMoveDown?.(index);
+      }}
+      icon={isUndef(props.icon) ? <DownOutlined /> : props.icon}
+    >
+      {props.title || self.title}
+    </Button>
+  );
+});
+
+ArrayBase.MoveUp = React.forwardRef((props, ref) => {
+  const index = useIndex(props.index);
+  const self = useField();
+  const array = useArray();
+  const prefixCls = usePrefixCls("formily-array-base");
+  if (!array) return null;
+  if (array.field?.pattern !== "editable") return null;
+  return (
+    <Button
+      type="text"
+      {...props}
+      disabled={self?.disabled}
+      className={cls(`${prefixCls}-move-up`, self?.disabled ? `${prefixCls}-move-up-disabled` : "", props.className)}
+      ref={ref}
+      onClick={(e) => {
+        if (self?.disabled) return;
+        e.stopPropagation();
+        if (props.onClick) {
+          props.onClick(e);
+          if (e.defaultPrevented) return;
+        }
+        array?.field?.moveUp(index);
+        array?.props?.onMoveUp?.(index);
+      }}
+      icon={isUndef(props.icon) ? <UpOutlined /> : props.icon}
+    >
+      {props.title || self.title}
+    </Button>
+  );
+});
+
+ArrayBase.useArray = useArray;
+ArrayBase.useIndex = useIndex;
+ArrayBase.useRecord = useRecord;
+ArrayBase.mixin = (target: any) => {
+  target.Index = ArrayBase.Index;
+  target.SortHandle = ArrayBase.SortHandle;
+  target.Addition = ArrayBase.Addition;
+  target.Copy = ArrayBase.Copy;
+  target.Remove = ArrayBase.Remove;
+  target.MoveDown = ArrayBase.MoveDown;
+  target.MoveUp = ArrayBase.MoveUp;
+  target.useArray = ArrayBase.useArray;
+  target.useIndex = ArrayBase.useIndex;
+  target.useRecord = ArrayBase.useRecord;
+  return target;
+};
+
+export default ArrayBase;

package/src/components/ArrayBase/style.less

@@ -0,0 +1,91 @@
+@root-entry-name: 'default';
+@import (reference) '~antd/es/style/themes/index.less';
+
+@array-base-prefix-cls: ~'@{ant-prefix}-formily-array-base';
+
+.@{array-base-prefix-cls}-remove,
+.@{array-base-prefix-cls}-copy {
+  transition: all 0.25s ease-in-out;
+  color: @text-color;
+  font-size: 14px;
+  margin-left: 6px;
+  padding: 0;
+  border: none;
+  width: auto;
+  height: auto;
+
+  &:hover {
+    color: @primary-5;
+  }
+
+  &-disabled {
+    color: @disabled-color;
+    cursor: not-allowed !important;
+
+    &:hover {
+      color: @disabled-color;
+    }
+  }
+}
+
+.@{array-base-prefix-cls}-sort-handle {
+  cursor: move;
+  color: #888 !important;
+
+  // overrid iconfont.less .anticon[tabindex] cursor
+  &.anticon[tabindex] {
+    cursor: move;
+  }
+}
+
+.@{array-base-prefix-cls}-addition {
+  transition: all 0.25s ease-in-out;
+}
+
+.@{array-base-prefix-cls}-move-down {
+  transition: all 0.25s ease-in-out;
+  color: @text-color;
+  font-size: 14px;
+  margin-left: 6px;
+  padding: 0;
+  border: none;
+  width: auto;
+  height: auto;
+
+  &:hover {
+    color: @primary-5;
+  }
+
+  &-disabled {
+    color: @disabled-color;
+    cursor: not-allowed !important;
+
+    &:hover {
+      color: @disabled-color;
+    }
+  }
+}
+
+.@{array-base-prefix-cls}-move-up {
+  transition: all 0.25s ease-in-out;
+  color: @text-color;
+  font-size: 14px;
+  margin-left: 6px;
+  padding: 0;
+  border: none;
+  width: auto;
+  height: auto;
+
+  &:hover {
+    color: @primary-5;
+  }
+
+  &-disabled {
+    color: @disabled-color;
+    cursor: not-allowed !important;
+
+    &:hover {
+      color: @disabled-color;
+    }
+  }
+}

package/src/components/ArrayBase/style.ts

@@ -0,0 +1,2 @@
+import 'antd/lib/button/style/index'
+import './style.less'

package/src/components/ArrayCards/index.tsx

@@ -0,0 +1,149 @@
+import React from "react";
+import { Card, Empty } from "antd";
+import { CardProps } from "antd/lib/card";
+import { ArrayField } from "@formily/core";
+import { useField, observer, useFieldSchema, RecursionField } from "@formily/react";
+import cls from "classnames";
+import { ISchema } from "@formily/json-schema";
+import { usePrefixCls } from "c-formily-antd/lib/__builtins__";
+import { ArrayBase, ArrayBaseMixins, IArrayBaseProps } from "../ArrayBase";
+
+type ComposedArrayCards = React.FC<React.PropsWithChildren<CardProps & IArrayBaseProps>> & ArrayBaseMixins;
+
+const isAdditionComponent = (schema: ISchema) => {
+  return schema["x-component"]?.indexOf("Addition") > -1;
+};
+
+const isIndexComponent = (schema: ISchema) => {
+  return schema["x-component"]?.indexOf?.("Index") > -1;
+};
+
+const isRemoveComponent = (schema: ISchema) => {
+  return schema["x-component"]?.indexOf?.("Remove") > -1;
+};
+
+const isCopyComponent = (schema: ISchema) => {
+  return schema["x-component"]?.indexOf?.("Copy") > -1;
+};
+
+const isMoveUpComponent = (schema: ISchema) => {
+  return schema["x-component"]?.indexOf?.("MoveUp") > -1;
+};
+
+const isMoveDownComponent = (schema: ISchema) => {
+  return schema["x-component"]?.indexOf?.("MoveDown") > -1;
+};
+
+const isOperationComponent = (schema: ISchema) => {
+  return (
+    isAdditionComponent(schema) ||
+    isRemoveComponent(schema) ||
+    isCopyComponent(schema) ||
+    isMoveDownComponent(schema) ||
+    isMoveUpComponent(schema)
+  );
+};
+
+export const ArrayCards: ComposedArrayCards = observer((props: any) => {
+  const field = useField<ArrayField>();
+  const schema = useFieldSchema();
+  const dataSource = Array.isArray(field.value) ? field.value : [];
+  const prefixCls = usePrefixCls("formily-array-cards", props);
+  const { onAdd, onCopy, onRemove, onMoveDown, onMoveUp, deletePopconfirm, deletePopconfirmTitle } = props;
+  if (!schema) throw new Error("can not found schema object");
+
+  const renderItems = () => {
+    return dataSource?.map((item, index) => {
+      const items = Array.isArray(schema.items) ? schema.items[index] || schema.items[0] : schema.items;
+      const title = (
+        <span>
+          <RecursionField
+            schema={items}
+            name={index}
+            filterProperties={(schema) => {
+              if (!isIndexComponent(schema)) return false;
+              return true;
+            }}
+            onlyRenderProperties
+          />
+          {props.title || field.title}
+        </span>
+      );
+      const extra = (
+        <span>
+          <RecursionField
+            schema={items}
+            name={index}
+            filterProperties={(schema) => {
+              if (!isOperationComponent(schema)) return false;
+              return true;
+            }}
+            onlyRenderProperties
+          />
+          {props.extra}
+        </span>
+      );
+      const content = (
+        <RecursionField
+          schema={items}
+          name={index}
+          filterProperties={(schema) => {
+            if (isIndexComponent(schema)) return false;
+            if (isOperationComponent(schema)) return false;
+            return true;
+          }}
+        />
+      );
+      return (
+        <ArrayBase.Item key={index} index={index} record={() => field.value?.[index]}>
+          <Card
+            {...props}
+            onChange={() => {}}
+            className={cls(`${prefixCls}-item`, props.className)}
+            title={title}
+            extra={extra}
+          >
+            {content}
+          </Card>
+        </ArrayBase.Item>
+      );
+    });
+  };
+
+  const renderAddition = () => {
+    return schema.reduceProperties((addition, schema, key) => {
+      if (isAdditionComponent(schema)) {
+        return <RecursionField schema={schema} name={key} />;
+      }
+      return addition;
+    }, null);
+  };
+
+  const renderEmpty = () => {
+    if (dataSource?.length) return;
+    return (
+      <Card
+        {...props}
+        onChange={() => {}}
+        className={cls(`${prefixCls}-item`, props.className)}
+        title={props.title || field.title}
+      >
+        <Empty />
+      </Card>
+    );
+  };
+
+  return (
+    <ArrayBase {...props} onAdd={onAdd} onCopy={onCopy} onRemove={onRemove} onMoveUp={onMoveUp} onMoveDown={onMoveDown}>
+      {renderEmpty()}
+      {renderItems()}
+      {renderAddition()}
+    </ArrayBase>
+  );
+});
+
+ArrayCards.displayName = "ArrayCards";
+
+ArrayBase.mixin(ArrayCards);
+
+export default ArrayCards;

package/src/components/ArrayCards/style.less

@@ -0,0 +1,15 @@
+@root-entry-name: 'default';
+@import (reference) '~antd/es/style/themes/index.less';
+
+@array-base-prefix-cls: ~'@{ant-prefix}-formily-array-base';
+@array-cards-prefix-cls: ~'@{ant-prefix}-formily-array-cards';
+
+.@{array-cards-prefix-cls}-item {
+  margin-bottom: 10px !important;
+}
+
+.ant-card-extra {
+  .@{array-base-prefix-cls}-copy {
+    margin-left: 6px;
+  }
+}

package/src/components/ArrayCards/style.ts

@@ -0,0 +1,4 @@
+import 'antd/lib/card/style/index'
+import 'antd/lib/empty/style/index'
+import 'antd/lib/button/style/index'
+import './style.less'

package/src/components/ArrayTable/index.tsx

@@ -0,0 +1,411 @@
+import React, { Fragment, useState, useRef, useEffect, createContext, useContext, useCallback } from "react";
+import { Table, Pagination, Space, Select, Badge } from "antd";
+import { PaginationProps } from "antd/lib/pagination";
+import { TableProps, ColumnProps } from "antd/lib/table";
+import { SelectProps } from "antd/lib/select";
+import cls from "classnames";
+import { GeneralField, FieldDisplayTypes, ArrayField } from "@formily/core";
+import { useField, observer, useFieldSchema, RecursionField, ReactFC } from "@formily/react";
+import { isArr, isBool, isFn } from "@formily/shared";
+import { Schema } from "@formily/json-schema";
+import { usePrefixCls, SortableContainer, SortableElement } from "c-formily-antd/lib/__builtins__";
+import { ArrayBase, ArrayBaseMixins, IArrayBaseProps } from "../ArrayBase";
+
+interface ObservableColumnSource {
+  field: GeneralField;
+  columnProps: ColumnProps<any>;
+  schema: Schema;
+  display: FieldDisplayTypes;
+  name: string;
+}
+interface IArrayTablePaginationProps extends PaginationProps {
+  dataSource?: any[];
+  showPagination?: boolean;
+  children?: (
+    dataSource: any[],
+    pagination: React.ReactNode,
+    options: {
+      startIndex: number;
+    },
+  ) => React.ReactElement;
+}
+
+interface IStatusSelectProps extends SelectProps<any> {
+  pageSize?: number;
+}
+
+type ComposedArrayTable = React.FC<React.PropsWithChildren<TableProps<any> & IArrayBaseProps>> &
+  ArrayBaseMixins & {
+    Column?: React.FC<React.PropsWithChildren<ColumnProps<any>>>;
+  };
+
+interface PaginationAction {
+  totalPage?: number;
+  pageSize?: number;
+  showPagination?: boolean;
+  changePage?: (page: number) => void;
+}
+
+const SortableRow = SortableElement((props: any) => <tr {...props} />);
+const SortableBody = SortableContainer((props: any) => <tbody {...props} />);
+
+const isColumnComponent = (schema: Schema) => {
+  return schema["x-component"]?.indexOf("Column") > -1;
+};
+
+const isOperationsComponent = (schema: Schema) => {
+  return schema["x-component"]?.indexOf("Operations") > -1;
+};
+
+const isAdditionComponent = (schema: Schema) => {
+  return schema["x-component"]?.indexOf("Addition") > -1;
+};
+
+const useArrayTableSources = () => {
+  const arrayField = useField();
+  const schema = useFieldSchema();
+  const parseSources = (schema: Schema): ObservableColumnSource[] => {
+    if (isColumnComponent(schema) || isOperationsComponent(schema) || isAdditionComponent(schema)) {
+      if (!schema["x-component-props"]?.["dataIndex"] && !schema["name"]) return [];
+      const name = schema["x-component-props"]?.["dataIndex"] || schema["name"];
+      const field = arrayField.query(arrayField.address.concat(name)).take();
+      const columnProps = field?.component?.[1] || schema["x-component-props"] || {};
+      const display = field?.display || schema["x-display"] || "visible";
+      return [
+        {
+          name,
+          display,
+          field,
+          schema,
+          columnProps,
+        },
+      ];
+    } else if (schema.properties) {
+      return schema.reduceProperties((buf, schema) => {
+        return buf.concat(parseSources(schema));
+      }, []);
+    }
+  };
+
+  const parseArrayItems = (schema: Schema["items"]) => {
+    if (!schema) return [];
+    const sources: ObservableColumnSource[] = [];
+    const items = isArr(schema) ? schema : [schema];
+    return items.reduce((columns, schema) => {
+      const item = parseSources(schema);
+      if (item) {
+        return columns.concat(item);
+      }
+      return columns;
+    }, sources);
+  };
+
+  if (!schema) throw new Error("can not found schema object");
+
+  return parseArrayItems(schema.items);
+};
+
+const useArrayTableColumns = (
+  dataSource: any[],
+  field: ArrayField,
+  sources: ObservableColumnSource[],
+): TableProps<any>["columns"] => {
+  return sources.reduce((buf, { name, columnProps, schema, display }, key) => {
+    if (display !== "visible") return buf;
+    if (!isColumnComponent(schema)) return buf;
+    return buf.concat({
+      ...columnProps,
+      key,
+      dataIndex: name,
+      render: (value: any, record: any) => {
+        const index = dataSource?.indexOf(record);
+        const children = (
+          <ArrayBase.Item index={index} record={() => field?.value?.[index]}>
+            <RecursionField schema={schema} name={index} onlyRenderProperties />
+          </ArrayBase.Item>
+        );
+        return children;
+      },
+    });
+  }, []);
+};
+
+const useAddition = () => {
+  const schema = useFieldSchema();
+  return schema.reduceProperties((addition, schema, key) => {
+    if (isAdditionComponent(schema)) {
+      return <RecursionField schema={schema} name={key} />;
+    }
+    return addition;
+  }, null);
+};
+
+const schedulerRequest = {
+  request: null,
+};
+
+const StatusSelect: ReactFC<IStatusSelectProps> = observer(
+  (props) => {
+    const field = useField<ArrayField>();
+    const prefixCls = usePrefixCls("formily-array-table");
+    const errors = field.errors;
+    const parseIndex = (address: string) => {
+      return Number(address.slice(address.indexOf(field.address.toString()) + 1).match(/(\d+)/)?.[1]);
+    };
+    const options = props.options?.map(({ label, value }) => {
+      const val = Number(value);
+      const hasError = errors.some(({ address }) => {
+        const currentIndex = parseIndex(address);
+        const startIndex = (val - 1) * props.pageSize;
+        const endIndex = val * props.pageSize;
+        return currentIndex >= startIndex && currentIndex <= endIndex;
+      });
+      return {
+        label: hasError ? <Badge dot>{label}</Badge> : label,
+        value,
+      };
+    });
+
+    const width = String(options?.length).length * 15;
+
+    return (
+      <Select
+        value={props.value}
+        onChange={props.onChange}
+        options={options}
+        virtual
+        style={{
+          width: width < 60 ? 60 : width,
+        }}
+        className={cls(`${prefixCls}-status-select`, {
+          "has-error": errors?.length,
+        })}
+      />
+    );
+  },
+  {
+    scheduler: (update) => {
+      clearTimeout(schedulerRequest.request);
+      schedulerRequest.request = setTimeout(() => {
+        update();
+      }, 100);
+    },
+  },
+);
+
+const PaginationContext = createContext<PaginationAction>({});
+const usePagination = () => {
+  return useContext(PaginationContext);
+};
+
+const ArrayTablePagination: ReactFC<IArrayTablePaginationProps> = (props) => {
+  const [current, setCurrent] = useState(1);
+  const prefixCls = usePrefixCls("formily-array-table");
+  const showPagination = props.showPagination ?? true;
+  const pageSize = props.pageSize || 10;
+  const size = props.size || "default";
+  const dataSource = props.dataSource || [];
+  const startIndex = (current - 1) * pageSize;
+  const endIndex = startIndex + pageSize - 1;
+  const total = dataSource?.length || 0;
+  const totalPage = Math.ceil(total / pageSize);
+  const pages = Array.from(new Array(totalPage)).map((_, index) => {
+    const page = index + 1;
+    return {
+      label: page,
+      value: page,
+    };
+  });
+  const handleChange = (current: number) => {
+    setCurrent(current);
+  };
+
+  useEffect(() => {
+    if (totalPage > 0 && totalPage < current) {
+      handleChange(totalPage);
+    }
+  }, [totalPage, current]);
+
+  const renderPagination = () => {
+    if (totalPage <= 1 || !showPagination) return;
+    return (
+      <div className={`${prefixCls}-pagination`}>
+        <Space>
+          <StatusSelect
+            value={current}
+            pageSize={pageSize}
+            onChange={handleChange}
+            options={pages}
+            notFoundContent={false}
+          />
+          <Pagination
+            {...props}
+            pageSize={pageSize}
+            current={current}
+            total={dataSource.length}
+            size={size}
+            showSizeChanger={false}
+            onChange={handleChange}
+          />
+        </Space>
+      </div>
+    );
+  };
+
+  return (
+    <Fragment>
+      <PaginationContext.Provider
+        value={{
+          totalPage,
+          pageSize,
+          changePage: handleChange,
+          showPagination,
+        }}
+      >
+        {props.children?.(
+          showPagination ? dataSource?.slice(startIndex, endIndex + 1) : dataSource,
+          renderPagination(),
+          { startIndex },
+        )}
+      </PaginationContext.Provider>
+    </Fragment>
+  );
+};
+
+const RowComp: ReactFC<React.HTMLAttributes<HTMLTableRowElement>> = (props) => {
+  const prefixCls = usePrefixCls("formily-array-table");
+  const index = props["data-row-key"] || 0;
+  return (
+    <SortableRow
+      lockAxis="y"
+      {...props}
+      index={index}
+      className={cls(props.className, `${prefixCls}-row-${index + 1}`)}
+    />
+  );
+};
+
+export const ArrayTable: ComposedArrayTable = observer((props) => {
+  const ref = useRef<HTMLDivElement>();
+  const field = useField<ArrayField>();
+  const prefixCls = usePrefixCls("formily-array-table");
+  const dataSource = Array.isArray(field.value) ? field.value.slice() : [];
+  const sources = useArrayTableSources();
+  const columns = useArrayTableColumns(dataSource, field, sources);
+  const pagination = isBool(props.pagination) ? { showPagination: props.pagination } : props.pagination;
+  const addition = useAddition();
+  const { onAdd, onCopy, onRemove, onMoveDown, onMoveUp, deletePopconfirm, deletePopconfirmTitle } = props;
+  const defaultRowKey = (record: any) => {
+    return dataSource.indexOf(record);
+  };
+  const addTdStyles = (id: number) => {
+    const node = ref.current?.querySelector(`.${prefixCls}-row-${id}`);
+    const helper = document.body.querySelector(`.${prefixCls}-sort-helper`);
+    if (!helper) return;
+    const tds = node?.querySelectorAll("td");
+    if (!tds) return;
+    requestAnimationFrame(() => {
+      helper.querySelectorAll("td").forEach((td, index) => {
+        if (tds[index]) {
+          td.style.width = getComputedStyle(tds[index]).width;
+        }
+      });
+    });
+  };
+  const getWrapperComp = useCallback(
+    (dataSource: any[], start: number) => (props: any) =>
+      (
+        <SortableBody
+          {...props}
+          start={start}
+          list={dataSource.slice()}
+          accessibility={{
+            container: ref.current || undefined,
+          }}
+          onSortStart={(event) => {
+            addTdStyles(event.active.id as number);
+          }}
+          onSortEnd={({ oldIndex, newIndex }) => {
+            field.move(oldIndex, newIndex);
+          }}
+          className={cls(`${prefixCls}-sort-helper`, props.className)}
+        />
+      ),
+    [field],
+  );
+
+  return (
+    <ArrayTablePagination {...pagination} dataSource={dataSource}>
+      {(dataSource, pager, { startIndex }) => (
+        <div ref={ref} className={prefixCls}>
+          <ArrayBase
+            {...props}
+            onAdd={onAdd}
+            onCopy={onCopy}
+            onRemove={onRemove}
+            onMoveUp={onMoveUp}
+            onMoveDown={onMoveDown}
+          >
+            <Table
+              size="small"
+              bordered
+              rowKey={defaultRowKey}
+              {...props}
+              onChange={() => {}}
+              pagination={false}
+              columns={columns}
+              dataSource={dataSource}
+              components={{
+                body: {
+                  wrapper: getWrapperComp(dataSource, startIndex),
+                  row: RowComp,
+                },
+              }}
+            />
+            <div style={{ marginTop: 5, marginBottom: 5 }}>{pager}</div>
+            {sources.map((column, key) => {
+              //专门用来承接对Column的状态管理
+              if (!isColumnComponent(column.schema)) return;
+              return React.createElement(RecursionField, {
+                name: column.name,
+                schema: column.schema,
+                onlyRenderSelf: true,
+                key,
+              });
+            })}
+            {addition}
+          </ArrayBase>
+        </div>
+      )}
+    </ArrayTablePagination>
+  );
+});
+
+ArrayTable.displayName = "ArrayTable";
+
+ArrayTable.Column = () => {
+  return <Fragment />;
+};
+
+ArrayBase.mixin(ArrayTable);
+
+const Addition: ArrayBaseMixins["Addition"] = (props) => {
+  const array = ArrayBase.useArray();
+  const { totalPage = 0, pageSize = 10, changePage, showPagination } = usePagination();
+  return (
+    <ArrayBase.Addition
+      {...props}
+      onClick={(e) => {
+        // 如果添加数据后将超过当前页，则自动切换到下一页
+        const total = array?.field?.value.length || 0;
+        if (showPagination && total === totalPage * pageSize + 1 && isFn(changePage)) {
+          changePage(totalPage + 1);
+        }
+        props.onClick?.(e);
+      }}
+    />
+  );
+};
+ArrayTable.Addition = Addition;
+
+export default ArrayTable;

package/src/components/ArrayTable/style.less

@@ -0,0 +1,53 @@
+@root-entry-name: 'default';
+@import (reference) '~antd/es/style/themes/index.less';
+
+@array-table-prefix-cls: ~'@{ant-prefix}-formily-array-table';
+
+.@{array-table-prefix-cls} {
+  .@{array-table-prefix-cls}-pagination {
+    display: flex;
+    justify-content: center;
+
+    .@{array-table-prefix-cls}-status-select.has-error {
+      .@{ant-prefix}-select-selector {
+        border-color: @error-color !important;
+      }
+    }
+  }
+
+  .@{ant-prefix}-table {
+    table {
+      overflow: hidden;
+    }
+
+    td {
+      visibility: visible;
+
+      .@{ant-prefix}-formily-item:not(.@{ant-prefix}-formily-item-feedback-layout-popover) {
+        margin-bottom: 0 !important;
+
+        .@{ant-prefix}-formily-item-help {
+          position: absolute;
+          font-size: 12px;
+          top: 100%;
+          background: #fff;
+          width: 100%;
+          margin-top: 3px;
+          padding: 3px;
+          z-index: 1;
+          border-radius: 3px;
+          box-shadow: 0 0 10px #eee;
+          animation: none;
+          transform: translateY(0);
+          opacity: 1;
+        }
+      }
+    }
+  }
+
+  .@{array-table-prefix-cls}-sort-helper {
+    background: #fff;
+    border: 1px solid #eee;
+    z-index: 10;
+  }
+}

package/src/components/ArrayTable/style.ts

@@ -0,0 +1,7 @@
+import 'antd/lib/table/style/index'
+import 'antd/lib/button/style/index'
+import 'antd/lib/select/style/index'
+import 'antd/lib/space/style/index'
+import 'antd/lib/badge/style/index'
+import 'antd/lib/pagination/style/index'
+import './style.less'

package/src/components/LocationListPicker/components/Popup/index.less

@@ -1,7 +1,10 @@
 .popup-box {
-  position: fixed;
+  position: absolute;
   z-index: 9;
   min-width: 200px;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
   padding: 20px;
   border-radius: 4px;
   background-color: #fff;

package/src/components/LocationListPicker/components/Popup/index.tsx

@@ -1,4 +1,4 @@
-import { useRef, forwardRef, useImperativeHandle, useState } from "react";
+import { useRef, forwardRef, useImperativeHandle, useState, useEffect } from "react";
 import { createPortal } from "react-dom";
 import { Button } from "antd";
 
@@ -15,6 +15,7 @@ export interface IPopupProps {
     schema;
     initialValues?: Object;
   };
+  mountElement?: HTMLElement;
 }
 
 export interface IData {
@@ -24,7 +25,7 @@ export interface IData {
 }
 
 export const Popup = forwardRef((props: IPopupProps, parentRef) => {
-  const { formProps = { schema: RangeSchema } } = props;
+  const { formProps = { schema: RangeSchema }, mountElement } = props;
 
   const [data, setData] = useState<IData>();
 
@@ -62,9 +63,10 @@ export const Popup = forwardRef((props: IPopupProps, parentRef) => {
 
   const schema = mergeSchema(AddressSchema, formProps?.schema ?? RangeSchema);
 
+
   return data
     ? createPortal(
-        <div className="popup-box" style={{ top: data?.top, left: data?.left }}>
+        <div className="popup-box">
           <div className="popup-body">
             {/* TODO: schema 中插入地址字段 text 格式 */}
             <div>地址：{data?.address}</div>
@@ -82,7 +84,7 @@ export const Popup = forwardRef((props: IPopupProps, parentRef) => {
             <Button onClick={onCancel}>取消</Button>
           </div>
         </div>,
-        document.body,
+      mountElement || document.body,
       )
     : null;
 });

package/src/components/LocationListPicker/index.tsx

@@ -48,6 +48,7 @@ export const LocationListPicker = observer((props) => {
   const currentItemRef = useRef();
   const popupRef = useRef();
   const isEditingRef = useRef();
+  const mapBoxRef = useRef(null)
 
   useEffect(() => {
     return () => {
@@ -469,7 +470,7 @@ export const LocationListPicker = observer((props) => {
 
   return (
     <div className="location-list-picker">
-      <div className="map-box">
+      <div className="map-box" ref={mapBoxRef}>
         <AMapCom init={mapInit} loading={loading} markerIconConf={markerIconConf} />
         {!readOnly && !disabled && <MapSearch setPoint={setPoint} isAutoSearch={isAutoSearch} />}
         {showTip && (
@@ -485,7 +486,7 @@ export const LocationListPicker = observer((props) => {
             新增地址
           </Button>
         )}
-        <Popup ref={popupRef} {...popupProps} />
+        <Popup ref={popupRef} mountElement={mapBoxRef.current} {...popupProps} />
       </div>
       <AddrList
         {...listProps}

package/src/components/index.tsx

@@ -1,4 +1,6 @@
 import Text from "./Text";
+export * from "./ArrayCards";
+export * from "./ArrayTable";
 
 export * from "./Upload";