Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: form support reverse action buttons #5108

Merged
merged 2 commits into from
Dec 11, 2024
Merged

feat: form support reverse action buttons #5108

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
06968cd
feat: form support reverse action buttons
mynetfan Dec 11, 2024
f7dd1fe
fix: submit button class
mynetfan Dec 11, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions docs/src/components/common-ui/vben-form.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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` |
Expand Down
45 changes: 32 additions & 13 deletions packages/@core/ui-kit/form-ui/src/components/form-actions.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
4 changes: 4 additions & 0 deletions packages/@core/ui-kit/form-ui/src/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -307,6 +307,10 @@ export interface VbenFormProps<
FormRenderProps<T>,
'componentBindEventMap' | 'componentMap' | 'form'
> {
/**
* 操作按钮是否反转（提交按钮前置）
*/
actionButtonsReverse?: boolean;
/**
* 表单操作区域class
*/
Expand Down
16 changes: 16 additions & 0 deletions playground/src/views/examples/form/api.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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: {
// 所有表单项
Expand Down Expand Up @@ -83,6 +89,7 @@ function handleClick(
| 'labelWidth'
| 'resetDisabled'
| 'resetLabelWidth'
| 'reverseActionButtons'
| 'showAction'
| 'showResetButton'
| 'showSubmitButton'
Expand Down Expand Up @@ -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;
Expand All @@ -177,6 +189,7 @@ function handleClick(
});
break;
}

case 'updateResetButton': {
formApi.setState({
resetButtonOptions: { disabled: true },
Expand Down Expand Up @@ -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>
Expand Down
Loading