66 lines
1.4 KiB
Vue
66 lines
1.4 KiB
Vue
<script setup lang="ts">
|
|
import type { Recordable } from '@easyflow/types';
|
|
|
|
import type { EasyFlowFormSchema } from '@easyflow-core/form-ui';
|
|
|
|
import { computed, reactive } from 'vue';
|
|
|
|
import { useEasyFlowForm } from '@easyflow-core/form-ui';
|
|
import { EasyFlowButton } from '@easyflow-core/shadcn-ui';
|
|
|
|
interface Props {
|
|
formSchema?: EasyFlowFormSchema[];
|
|
buttonText?: string;
|
|
buttonLoading?: boolean;
|
|
}
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
formSchema: () => [],
|
|
buttonText: '更新密码',
|
|
buttonLoading: false,
|
|
});
|
|
|
|
const emit = defineEmits<{
|
|
submit: [Recordable<any>];
|
|
}>();
|
|
|
|
const [Form, formApi] = useEasyFlowForm(
|
|
reactive({
|
|
commonConfig: {
|
|
// 所有表单项
|
|
componentProps: {
|
|
class: 'w-full',
|
|
},
|
|
},
|
|
layout: 'vertical',
|
|
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 class="mx-auto max-w-[360px] pt-12">
|
|
<Form />
|
|
<EasyFlowButton
|
|
:loading="buttonLoading"
|
|
type="submit"
|
|
class="mx-auto mt-4 flex h-8 w-28 p-0"
|
|
@click="handleSubmit"
|
|
>
|
|
{{ buttonText }}
|
|
</EasyFlowButton>
|
|
</div>
|
|
</template>
|