feat: form support reverse action buttons (#5108)

* feat: form support reverse action buttons * fix: submit button class
vbenjs · Dec 11, 2024 · 7c4dfdc · 7c4dfdc
1 parent 991ada3
commit 7c4dfdc
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 13 deletions.
diff --git a/docs/src/components/common-ui/vben-form.md b/docs/src/components/common-ui/vben-form.md
@@ -307,6 +307,7 @@ useVbenForm 返回的第二个参数，是一个对象，包含了一些表单
 | handleReset | 表单重置回调 | `(values: Record<string, any>,) => Promise<void> \| void` | - |
 | handleSubmit | 表单提交回调 | `(values: Record<string, any>,) => Promise<void> \| void` | - |
 | handleValuesChange | 表单值变化回调 | `(values: Record<string, any>,) => void` | - |
+| actionButtonsReverse | 调换操作按钮位置 | `boolean` | `false` |
 | resetButtonOptions | 重置按钮组件参数 | `ActionButtonOptions` | - |
 | submitButtonOptions | 提交按钮组件参数 | `ActionButtonOptions` | - |
 | showDefaultActions | 是否显示默认操作按钮 | `boolean` | `true` |

diff --git a/packages/@core/ui-kit/form-ui/src/components/form-actions.vue b/packages/@core/ui-kit/form-ui/src/components/form-actions.vue
@@ -142,32 +142,51 @@ defineExpose({
     "
     :style="queryFormStyle"
   >
+    <template v-if="rootProps.actionButtonsReverse">
+      <!-- 提交按钮前 -->
+      <slot name="submit-before"></slot>
+
+      <component
+        :is="COMPONENT_MAP.PrimaryButton"
+        v-if="submitButtonOptions.show"
+        class="ml-3"
+        type="button"
+        @click="handleSubmit"
+        v-bind="submitButtonOptions"
+      >
+        {{ submitButtonOptions.content }}
+      </component>
+    </template>
+
     <!-- 重置按钮前 -->
     <slot name="reset-before"></slot>
 
     <component
       :is="COMPONENT_MAP.DefaultButton"
       v-if="resetButtonOptions.show"
-      class="mr-3"
+      class="ml-3"
       type="button"
       @click="handleReset"
       v-bind="resetButtonOptions"
     >
       {{ resetButtonOptions.content }}
     </component>
 
-    <!-- 提交按钮前 -->
-    <slot name="submit-before"></slot>
-
-    <component
-      :is="COMPONENT_MAP.PrimaryButton"
-      v-if="submitButtonOptions.show"
-      type="button"
-      @click="handleSubmit"
-      v-bind="submitButtonOptions"
-    >
-      {{ submitButtonOptions.content }}
-    </component>
+    <template v-if="!rootProps.actionButtonsReverse">
+      <!-- 提交按钮前 -->
+      <slot name="submit-before"></slot>
+
+      <component
+        :is="COMPONENT_MAP.PrimaryButton"
+        v-if="submitButtonOptions.show"
+        class="ml-3"
+        type="button"
+        @click="handleSubmit"
+        v-bind="submitButtonOptions"
+      >
+        {{ submitButtonOptions.content }}
+      </component>
+    </template>
 
     <!-- 展开按钮前 -->
     <slot name="expand-before"></slot>

diff --git a/packages/@core/ui-kit/form-ui/src/types.ts b/packages/@core/ui-kit/form-ui/src/types.ts
@@ -307,6 +307,10 @@ export interface VbenFormProps<
     FormRenderProps<T>,
     'componentBindEventMap' | 'componentMap' | 'form'
   > {
+  /**
+   * 操作按钮是否反转（提交按钮前置）
+   */
+  actionButtonsReverse?: boolean;
   /**
    * 表单操作区域class
    */

diff --git a/playground/src/views/examples/form/api.vue b/playground/src/views/examples/form/api.vue
@@ -1,11 +1,17 @@
 <script lang="ts" setup>
+import { ref } from 'vue';
+
 import { Page } from '@vben/common-ui';
 
 import { Button, Card, message, Space } from 'ant-design-vue';
 
 import { useVbenForm } from '#/adapter/form';
 
+const isReverseActionButtons = ref(false);
+
 const [BaseForm, formApi] = useVbenForm({
+  // 翻转操作按钮的位置
+  actionButtonsReverse: isReverseActionButtons.value,
   // 所有表单项共用，可单独在表单内覆盖
   commonConfig: {
     // 所有表单项
@@ -83,6 +89,7 @@ function handleClick(
     | 'labelWidth'
     | 'resetDisabled'
     | 'resetLabelWidth'
+    | 'reverseActionButtons'
     | 'showAction'
     | 'showResetButton'
     | 'showSubmitButton'
@@ -158,6 +165,11 @@ function handleClick(
       });
       break;
     }
+    case 'reverseActionButtons': {
+      isReverseActionButtons.value = !isReverseActionButtons.value;
+      formApi.setState({ actionButtonsReverse: isReverseActionButtons.value });
+      break;
+    }
     case 'showAction': {
       formApi.setState({ showDefaultActions: true });
       break;
@@ -177,6 +189,7 @@ function handleClick(
       });
       break;
     }
+
     case 'updateResetButton': {
       formApi.setState({
         resetButtonOptions: { disabled: true },
@@ -226,6 +239,9 @@ function handleClick(
       <Button @click="handleClick('resetLabelWidth')">还原labelWidth</Button>
       <Button @click="handleClick('disabled')">禁用表单</Button>
       <Button @click="handleClick('resetDisabled')">解除禁用</Button>
+      <Button @click="handleClick('reverseActionButtons')">
+        翻转操作按钮位置
+      </Button>
       <Button @click="handleClick('hiddenAction')">隐藏操作按钮</Button>
       <Button @click="handleClick('showAction')">显示操作按钮</Button>
       <Button @click="handleClick('hiddenResetButton')">隐藏重置按钮</Button>