57 lines
1.1 KiB
Vue
57 lines
1.1 KiB
Vue
<script setup lang="ts">
|
|
import type { Recordable } from '@vben/types';
|
|
|
|
import type { VbenFormSchema } from '@vben-core/form-ui';
|
|
|
|
import { computed, reactive } from 'vue';
|
|
|
|
import { useVbenForm } from '@vben-core/form-ui';
|
|
import { VbenButton } from '@vben-core/shadcn-ui';
|
|
|
|
interface Props {
|
|
formSchema?: VbenFormSchema[];
|
|
}
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
formSchema: () => [],
|
|
});
|
|
|
|
const emit = defineEmits<{
|
|
submit: [Recordable<any>];
|
|
}>();
|
|
|
|
const [Form, formApi] = useVbenForm(
|
|
reactive({
|
|
commonConfig: {
|
|
// 所有表单项
|
|
componentProps: {
|
|
class: 'w-full',
|
|
},
|
|
},
|
|
layout: 'horizontal',
|
|
schema: computed(() => props.formSchema),
|
|
showDefaultActions: false,
|
|
}),
|
|
);
|
|
|
|
async function handleSubmit() {
|
|
const { valid } = await formApi.validate();
|
|
const values = await formApi.getValues();
|
|
if (valid) {
|
|
emit('submit', values);
|
|
}
|
|
}
|
|
|
|
defineExpose({
|
|
getFormApi: () => formApi,
|
|
});
|
|
</script>
|
|
<template>
|
|
<div>
|
|
<Form />
|
|
<VbenButton type="submit" class="mt-4" @click="handleSubmit">
|
|
更新密码
|
|
</VbenButton>
|
|
</div>
|
|
</template>
|