This commit is contained in:
dap 2024-10-07 20:23:55 +08:00
commit 037b118301
13 changed files with 44 additions and 37 deletions

View File

@ -19,7 +19,9 @@
// i18n // i18n
"Lokalise.i18n-ally", "Lokalise.i18n-ally",
// CSS // CSS
"vunguyentuan.vscode-css-variables" "vunguyentuan.vscode-css-variables",
// package.json PNPM catalog
"antfu.pnpm-catalog-lens"
], ],
"unwantedRecommendations": [ "unwantedRecommendations": [
// volar // volar

View File

@ -62,15 +62,11 @@ setupVbenForm<FormComponentType>({
DatePicker: NDatePicker, DatePicker: NDatePicker,
// 自定义默认的重置按钮 // 自定义默认的重置按钮
DefaultResetActionButton: (props, { attrs, slots }) => { DefaultResetActionButton: (props, { attrs, slots }) => {
return h(NButton, { ...props, attrs, text: false, type: 'info' }, slots); return h(NButton, { ...props, attrs, type: 'info' }, slots);
}, },
// 自定义默认的提交按钮 // 自定义默认的提交按钮
DefaultSubmitActionButton: (props, { attrs, slots }) => { DefaultSubmitActionButton: (props, { attrs, slots }) => {
return h( return h(NButton, { ...props, attrs, type: 'primary' }, slots);
NButton,
{ ...props, attrs, text: false, type: 'primary' },
slots,
);
}, },
Divider: NDivider, Divider: NDivider,
Input: withDefaultPlaceholder(NInput, 'input'), Input: withDefaultPlaceholder(NInput, 'input'),

View File

@ -78,7 +78,7 @@ const [QueryForm] = useVbenForm({
// //
showCollapseButton: true, showCollapseButton: true,
submitButtonOptions: { submitButtonOptions: {
text: '查询', content: '查询',
}, },
wrapperClass: 'grid-cols-1 md:grid-cols-2', wrapperClass: 'grid-cols-1 md:grid-cols-2',
}); });

View File

@ -16,16 +16,16 @@ const collapsed = defineModel({ default: false });
const resetButtonOptions = computed(() => { const resetButtonOptions = computed(() => {
return { return {
content: `${$t.value('reset')}`,
show: true, show: true,
text: `${$t.value('reset')}`,
...unref(rootProps).resetButtonOptions, ...unref(rootProps).resetButtonOptions,
}; };
}); });
const submitButtonOptions = computed(() => { const submitButtonOptions = computed(() => {
return { return {
content: `${$t.value('submit')}`,
show: true, show: true,
text: `${$t.value('submit')}`,
...unref(rootProps).submitButtonOptions, ...unref(rootProps).submitButtonOptions,
}; };
}); });
@ -78,7 +78,9 @@ watch(
</script> </script>
<template> <template>
<div <div
:class="cn('col-span-full w-full text-right', rootProps.actionWrapperClass)" :class="
cn('col-span-full w-full pb-6 text-right', rootProps.actionWrapperClass)
"
:style="queryFormStyle" :style="queryFormStyle"
> >
<component <component
@ -89,7 +91,7 @@ watch(
@click="handleReset" @click="handleReset"
v-bind="resetButtonOptions" v-bind="resetButtonOptions"
> >
{{ resetButtonOptions.text }} {{ resetButtonOptions.content }}
</component> </component>
<component <component
@ -99,7 +101,7 @@ watch(
@click="handleSubmit" @click="handleSubmit"
v-bind="submitButtonOptions" v-bind="submitButtonOptions"
> >
{{ submitButtonOptions.text }} {{ submitButtonOptions.content }}
</component> </component>
<VbenExpandableArrow <VbenExpandableArrow

View File

@ -289,8 +289,8 @@ export interface FormRenderProps<
} }
export interface ActionButtonOptions extends VbenButtonProps { export interface ActionButtonOptions extends VbenButtonProps {
content?: string;
show?: boolean; show?: boolean;
text?: string;
} }
export interface VbenFormProps< export interface VbenFormProps<

View File

@ -26,6 +26,7 @@ export function useVbenForm<
onBeforeUnmount(() => { onBeforeUnmount(() => {
api.unmount(); api.unmount();
}); });
api.setState({ ...props, ...attrs });
return () => return () =>
h(VbenUseForm, { ...props, ...attrs, formApi: extendedApi }, slots); h(VbenUseForm, { ...props, ...attrs, formApi: extendedApi }, slots);
}, },

View File

@ -34,23 +34,12 @@ props.formApi?.mount?.(form);
const handleUpdateCollapsed = (value: boolean) => { const handleUpdateCollapsed = (value: boolean) => {
props.formApi?.setState({ collapsed: !!value }); props.formApi?.setState({ collapsed: !!value });
}; };
// if (isFunction(forward.value.handleValuesChange)) {
// watch(
// () => form.values,
// (val) => {
// forward.value.handleValuesChange?.(toRaw(val));
// },
// {
// deep: true,
// immediate: true,
// },
// );
// }
</script> </script>
<template> <template>
<Form <Form
v-bind="forward" v-bind="forward"
:collapsed="state.collapsed"
:component-bind-event-map="COMPONENT_BIND_EVENT_MAP" :component-bind-event-map="COMPONENT_BIND_EVENT_MAP"
:component-map="COMPONENT_MAP" :component-map="COMPONENT_MAP"
:form="form" :form="form"

View File

@ -189,7 +189,7 @@ if (enableShortcutKey.value) {
</div> </div>
</div> </div>
</DropdownMenuLabel> </DropdownMenuLabel>
<DropdownMenuSeparator /> <DropdownMenuSeparator v-if="menus?.length" />
<DropdownMenuItem <DropdownMenuItem
v-for="menu in menus" v-for="menu in menus"
:key="menu.text" :key="menu.text"

View File

@ -20,6 +20,7 @@ export function useVbenVxeGrid(options: VxeGridProps) {
onBeforeUnmount(() => { onBeforeUnmount(() => {
api.unmount(); api.unmount();
}); });
api.setState({ ...props, ...attrs });
return () => h(VxeGrid, { ...props, ...attrs, api: extendedApi }, slots); return () => h(VxeGrid, { ...props, ...attrs, api: extendedApi }, slots);
}, },
{ {

View File

@ -154,7 +154,7 @@ const vbenFormOptions = computed(() => {
}, },
showCollapseButton: true, showCollapseButton: true,
submitButtonOptions: { submitButtonOptions: {
text: $t('common.query'), content: $t('common.query'),
}, },
wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3', wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3',
}; };
@ -215,7 +215,6 @@ async function init() {
); );
} }
} }
onMounted(() => { onMounted(() => {
props.api?.mount?.(gridRef.value, formApi); props.api?.mount?.(gridRef.value, formApi);
init(); init();
@ -246,7 +245,7 @@ onMounted(() => {
<slot :name="slotName" v-bind="slotProps"></slot> <slot :name="slotName" v-bind="slotProps"></slot>
</template> </template>
<template #form> <template #form>
<div v-if="formOptions" class="relative rounded py-3 pb-6"> <div v-if="formOptions" class="relative rounded py-3 pb-4">
<slot name="form"> <slot name="form">
<Form v-bind="vbenFormOptions"> <Form v-bind="vbenFormOptions">
<template <template

View File

@ -46,7 +46,7 @@ const [FirstForm, firstFormApi] = useVbenForm({
}, },
], ],
submitButtonOptions: { submitButtonOptions: {
text: '下一步', content: '下一步',
}, },
wrapperClass: 'grid-cols-1 md:grid-cols-1 lg:grid-cols-1', wrapperClass: 'grid-cols-1 md:grid-cols-1 lg:grid-cols-1',
}); });
@ -60,7 +60,7 @@ const [SecondForm, secondFormApi] = useVbenForm({
handleSubmit: onSecondSubmit, handleSubmit: onSecondSubmit,
layout: 'horizontal', layout: 'horizontal',
resetButtonOptions: { resetButtonOptions: {
text: '上一步', content: '上一步',
}, },
schema: [ schema: [
{ {

View File

@ -80,7 +80,7 @@ const [QueryForm] = useVbenForm({
// //
showCollapseButton: true, showCollapseButton: true,
submitButtonOptions: { submitButtonOptions: {
text: '查询', content: '查询',
}, },
// 321 // 321
wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3', wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3',
@ -119,7 +119,7 @@ const [QueryForm1] = useVbenForm({
// //
showCollapseButton: true, showCollapseButton: true,
submitButtonOptions: { submitButtonOptions: {
text: '查询', content: '查询',
}, },
// 321 // 321
wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3', wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3',

View File

@ -3,7 +3,7 @@ import type { VbenFormProps, VxeGridProps } from '#/adapter';
import { Page } from '@vben/common-ui'; import { Page } from '@vben/common-ui';
import { message } from 'ant-design-vue'; import { Button, message } from 'ant-design-vue';
import { useVbenVxeGrid } from '#/adapter'; import { useVbenVxeGrid } from '#/adapter';
import { getExampleTableApi } from '#/api'; import { getExampleTableApi } from '#/api';
@ -92,11 +92,28 @@ const gridOptions: VxeGridProps<RowType> = {
}, },
}; };
const [Grid] = useVbenVxeGrid({ formOptions, gridOptions }); const [Grid, gridApi] = useVbenVxeGrid({ formOptions, gridOptions });
function toggleFormCollspae() {
gridApi.formApi.resetForm();
gridApi.setState({
formOptions: {
showCollapseButton: !(
gridApi.state?.formOptions?.showCollapseButton ?? true
),
},
});
}
</script> </script>
<template> <template>
<Page auto-content-height> <Page auto-content-height>
<Grid /> <Grid>
<template #toolbar-tools>
<Button type="primary" @click="toggleFormCollspae">
切换表单折叠按钮
</Button>
</template>
</Grid>
</Page> </Page>
</template> </template>