feat(ProFormList):增加箭头上下排序功能

echoyl · echoyl · commit a21b416979c4 · 2025-03-01T16:40:32.000+08:00
diff --git a/packages/form/src/components/Group/demos/list-arrowsort.tsx b/packages/form/src/components/Group/demos/list-arrowsort.tsx
@@ -0,0 +1,50 @@
+﻿import {
+  ProForm,
+  ProFormGroup,
+  ProFormList,
+  ProFormText,
+} from '@ant-design/pro-components';
+
+const Demo = () => {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 16,
+      }}
+    >
+      <ProForm onFinish={async (e) => console.log(e)}>
+        <ProFormText name="name" label="姓名" />
+
+        <ProFormList
+          name="labels"
+          label="用户信息"
+          initialValue={[
+            {
+              value: '111',
+              label: '111',
+            },
+            {
+              value: '222',
+              label: '222',
+            },
+            {
+              value: '333',
+              label: '333',
+            },
+          ]}
+          arrowSort={true}
+          upIconProps={{ tooltipText: null }}
+        >
+          <ProFormGroup key="group">
+            <ProFormText name="value" label="值" />
+            <ProFormText name="label" label="显示名称" />
+          </ProFormGroup>
+        </ProFormList>
+      </ProForm>
+    </div>
+  );
+};
+
+export default Demo;
diff --git a/packages/form/src/components/Group/index.md b/packages/form/src/components/Group/index.md
@@ -70,6 +70,9 @@ ProFormList 与 [Form.List](https://ant.design/components/form-cn/#Form.List) AP
 | actionRender | 自定义操作按钮 | `(field,action,defaultActionDom,count)=>React.ReactNode[]` | - |
 | onAfterAdd | 新增数据后的钩子 | `(defaultValue: StoreValue, insertIndex: number, count: number) => void` | - |
 | onAfterRemove | 删除数据后的钩子 | `(index: number, count: number) => void` | - |
+| arrowSort | 是否开启箭头按钮排序 | `boolean` | - |
+| upIconProps | 向上排序按钮的配置，false 可以取消 | `{ Icon?: React.FC<any>; tooltipText?: string; } \| false` | - |
+| downIconProps | 向下排序按钮的配置，false 可以取消 | `{ Icon?: React.FC<any>; tooltipText?: string; } \| false` | - |
 
 ### actionRef 操作项目实例
 
@@ -362,12 +365,16 @@ name 参数必须要是一个数组，如果是嵌套的结构可以这样配置
 
 ### 行为守卫
 
-<code src="./demos/pro-form-list.tsx" title="行为守卫"></code>
+<code src="./demos/pro-form-list.tsx" ></code>
 
 ### 增删条目限制
 
-<code src="./demos/countLimit.tsx" title="增删条目限制"></code>
+<code src="./demos/countLimit.tsx" ></code>
 
 ### 横向布局
 
-<code src="./demos/horizontal-layout.tsx" title="横向布局" ></code>
+<code src="./demos/horizontal-layout.tsx" ></code>
+
+### 箭头排序
+
+<code src="./demos/list-arrowsort.tsx" ></code>
diff --git a/packages/form/src/components/List/ListItem.tsx b/packages/form/src/components/List/ListItem.tsx
@@ -2,6 +2,8 @@
   CopyOutlined,
   DeleteOutlined,
   LoadingOutlined,
+  ArrowUpOutlined,
+  ArrowDownOutlined
 } from '@ant-design/icons';
 import { ProProvider } from '@ant-design/pro-provider';
 import { SearchTransformKeyFn } from '@ant-design/pro-utils';
@@ -158,6 +160,24 @@ export type ProFromListCommonProps = {
    * @type {IconConfig|false}
    */
   deleteIconProps?: IconConfig | false;
+  /**
+   * @name 向上排序按钮的配置
+   * @description 可以自定义向上排序按钮的文案，图标，tooltip，设置为 false 就会消失
+   * @type {IconConfig|false}
+   */
+  upIconProps?: IconConfig | false;
+  /**
+   * @name 向下排序按钮的配置
+   * @description 可以自定义向下排序按钮的文案，图标，tooltip，设置为 false 就会消失
+   * @type {IconConfig|false}
+   */
+  downIconProps?: IconConfig | false;
+  /**
+   * @name 箭头排序是否开启开关
+   * @description 是否开启箭头排序 默认关闭
+   * @type {boolean}
+   */
+  arrowSort?: boolean;
 
   /**
    * @name 新建增加的默认数据
@@ -294,6 +314,9 @@ const ProFormListItem: React.FC<
     creatorButtonProps,
     deleteIconProps,
     copyIconProps,
+    arrowSort,
+    upIconProps,
+    downIconProps,
     itemContainerRender,
     itemRender,
     alwaysShowItemLabel,
@@ -458,13 +481,80 @@ const ProFormListItem: React.FC<
     action,
     field.name,
   ]);
+  const upIcon = useMemo(() => {
+    if(!arrowSort)
+    {
+      return null;
+    }
+    if (mode === 'read') return null;
+    if (upIconProps === false) return null;
+    const toIndex = index - 1;
+    if(toIndex < 0)
+    {
+      return null;
+    }
+    const { Icon = ArrowUpOutlined, tooltipText } = upIconProps!;
+    return (
+      <Tooltip title={tooltipText} key="up">
+        <Icon
+            className={classNames(
+              `${prefixCls}-action-icon action-up`,
+              hashId,
+            )}
+            onClick={async () => {
+              await action.move(index,toIndex);
+            }}
+          />
+      </Tooltip>
+    );
+  }, [
+    upIconProps,
+    prefixCls,
+    hashId,
+    action,
+    arrowSort
+  ]);
+
+  const downIcon = useMemo(() => {
+    if(!arrowSort)
+    {
+      return null;
+    }
+    if (mode === 'read') return null;
+    if (downIconProps === false) return null;
+    const toIndex = index + 1;
+    if(toIndex >= count)
+    {
+      return null;
+    }
+    const { Icon = ArrowDownOutlined, tooltipText } = downIconProps!;
+    return (
+      <Tooltip title={tooltipText} key="down">
+        <Icon
+            className={classNames(
+              `${prefixCls}-action-icon action-down`,
+              hashId,
+            )}
+            onClick={async () => {
+              await action.move(index,toIndex);
+            }}
+          />
+      </Tooltip>
+    );
+  }, [
+    upIconProps,
+    prefixCls,
+    hashId,
+    action,
+    arrowSort
+  ]);
 
   const defaultActionDom: React.ReactNode[] = useMemo(
     () =>
-      [copyIcon, deleteIcon].filter(
+      [copyIcon, deleteIcon, upIcon, downIcon].filter(
         (item) => item !== null && item !== undefined,
       ),
-    [copyIcon, deleteIcon],
+    [copyIcon, deleteIcon, upIcon, downIcon],
   );
 
   const actions =
diff --git a/packages/form/src/components/List/index.tsx b/packages/form/src/components/List/index.tsx
@@ -1,4 +1,4 @@
-﻿import { CopyOutlined, DeleteOutlined } from '@ant-design/icons';
+﻿import { CopyOutlined, DeleteOutlined, ArrowUpOutlined, ArrowDownOutlined } from '@ant-design/icons';
 import { useIntl } from '@ant-design/pro-provider';
 import { ProFormContext } from '@ant-design/pro-utils';
 import type { ColProps } from 'antd';
@@ -150,6 +150,15 @@ function ProFormList<T>(props: ProFormListProps<T>) {
       Icon: DeleteOutlined,
       tooltipText: intl.getMessage('deleteThisLine', '删除此项'),
     },
+    arrowSort,
+    upIconProps = {
+      Icon: ArrowUpOutlined,
+      tooltipText: intl.getMessage('sortUpThisLine', '向上排序'),
+    },
+    downIconProps = {
+      Icon: ArrowDownOutlined,
+      tooltipText: intl.getMessage('sortDownThisLine', '向下排序'),
+    },
     actionRef,
     style,
     prefixCls,
@@ -272,6 +281,9 @@ function ProFormList<T>(props: ProFormListProps<T>) {
                     originName={rest.name}
                     copyIconProps={copyIconProps}
                     deleteIconProps={deleteIconProps}
+                    arrowSort={arrowSort}
+                    upIconProps={upIconProps}
+                    downIconProps={downIconProps}
                     formInstance={proFormContext.formRef!.current!}
                     prefixCls={baseClassName}
                     meta={meta}
