Merge branch 'main' of https://github.com/vbenjs/vue-vben-admin
This commit is contained in:
commit
037b118301
4
.vscode/extensions.json
vendored
4
.vscode/extensions.json
vendored
@ -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 冲突
|
||||||
|
@ -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'),
|
||||||
|
@ -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',
|
||||||
});
|
});
|
||||||
|
@ -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
|
||||||
|
@ -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<
|
||||||
|
@ -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);
|
||||||
},
|
},
|
||||||
|
@ -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"
|
||||||
|
@ -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"
|
||||||
|
@ -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);
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
@ -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
|
||||||
|
@ -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: [
|
||||||
{
|
{
|
||||||
|
@ -80,7 +80,7 @@ const [QueryForm] = useVbenForm({
|
|||||||
// 是否可展开
|
// 是否可展开
|
||||||
showCollapseButton: true,
|
showCollapseButton: true,
|
||||||
submitButtonOptions: {
|
submitButtonOptions: {
|
||||||
text: '查询',
|
content: '查询',
|
||||||
},
|
},
|
||||||
// 大屏一行显示3个,中屏一行显示2个,小屏一行显示1个
|
// 大屏一行显示3个,中屏一行显示2个,小屏一行显示1个
|
||||||
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: '查询',
|
||||||
},
|
},
|
||||||
// 大屏一行显示3个,中屏一行显示2个,小屏一行显示1个
|
// 大屏一行显示3个,中屏一行显示2个,小屏一行显示1个
|
||||||
wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3',
|
wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3',
|
||||||
|
@ -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>
|
||||||
|
Loading…
Reference in New Issue
Block a user