优化FormItemsRenderer

components/FormBuilder/FormItemsRenderer.d.ts

@@ -32,6 +32,22 @@ export interface itemsFieldConfig {
  */
 export type FormValues = Record<string, any>;
 
+/**
+ * Form.List 操作项
+ */
+export interface FormListOperations {
+  /** 当前表单项的数据字段信息 */
+  field: FormListFieldData;
+  /** 当前项在列表中的索引位置 */
+  index: number;
+  /** 新增方法 */
+  add: (defaultValue?: FormValues, insertIndex?: number) => void;
+  /** 删除方法 */
+  remove: (index: number | number[]) => void;
+  /** 移动方法 */
+  move: (from: number, to: number) => void;
+}
+
 /**
  * Form.List 独有的属性
  */
@@ -45,7 +61,7 @@ export interface FormListUniqueProps {
   /** 删除按钮的文本，默认 '删除' */
   removeButtonText?: string;
   /** 表单配置项 */
-  options: (field: FormListFieldData, index: number) => FormOption[];
+  options: (operations: FormListOperations) => FormOption[];
   /** 点击新增按钮时的默认值 */
   addDefaultValue?: FormValues;
   /** 点击新增按钮时插入的索引位置 */

components/FormBuilder/FormItemsRenderer.js

@@ -223,9 +223,9 @@ const FormItemsRenderer = ({
   };
 
   // 获取 listOptions
-  const getListOptions = (listOptions, field, fieldIndex) => {
+  const getListOptions = (listOptions, field, fieldIndex, add, remove, move) => {
     return typeof listOptions === "function"
-      ? listOptions(field, fieldIndex)
+      ? listOptions(field, fieldIndex, add, remove, move)
       : (listOptions ?? []);
   };
 
@@ -453,10 +453,10 @@ const FormItemsRenderer = ({
     return (
       <Col key={getKey(option) || index} span={col.span} style={style}>
         <Form.List name={option.name} {...componentProps}>
-          {(fields, { add, remove }) => (
+          {(fields, { add, remove, move }) => (
             <>
               {fields.map((field, fieldIndex) => {
-                const listOptions = getListOptions(option.formListUniqueProps.options, field, fieldIndex);
+                const listOptions = getListOptions(option.formListUniqueProps.options, field, fieldIndex, add, remove, move);
                 return (
                   <Row gutter={gutter} key={field.key}>
                     {listOptions.map((listOption, listIndex) => {