<script lang="ts" setup>
|
import { ref } from 'vue';
|
|
import { useMessage } from '@jnpf/hooks';
|
import { BasicTitle, ScrollContainer } from '@jnpf/ui';
|
import { BasicForm, useForm } from '@jnpf/ui/form';
|
|
import { Space as ASpace } from 'ant-design-vue';
|
|
import { getDictionaryType } from '#/api/systemData/dictionary';
|
import { $t } from '#/locales';
|
|
import { getFormSchema } from './schemaData';
|
|
defineOptions({ name: 'ExtendFormDemoFieldForm1' });
|
|
const { createMessage } = useMessage();
|
const loading = ref(false);
|
const btnLoading = ref(false);
|
const [registerForm, { resetFields, validate, updateSchema }] = useForm({
|
labelWidth: 100,
|
labelAlign: 'right',
|
schemas: getFormSchema(),
|
});
|
|
function initData() {
|
getDictionaryType().then((res) => {
|
const treeData = res.data.list;
|
updateSchema({ field: 'fieldTreeSelect', componentProps: { options: treeData } });
|
updateSchema({ field: 'fieldCascader', componentProps: { options: treeData } });
|
});
|
}
|
async function handleSubmit() {
|
const values = await validate();
|
if (!values) return;
|
btnLoading.value = true;
|
setTimeout(() => {
|
btnLoading.value = false;
|
}, 1000);
|
createMessage.success('请在控制台查看！');
|
}
|
|
initData();
|
</script>
|
<template>
|
<div class="jnpf-content-wrapper jnpf-content-wrapper-form">
|
<div class="jnpf-common-page-header">
|
<BasicTitle>表单示例</BasicTitle>
|
<ASpace>
|
<a-button :loading="btnLoading" type="primary" @click="handleSubmit">{{ $t('common.okText') }}</a-button>
|
<a-button @click="resetFields">{{ $t('common.resetText') }}</a-button>
|
</ASpace>
|
</div>
|
<div class="jnpf-content-wrapper-form-body">
|
<ScrollContainer v-loading="loading">
|
<div class="p-[10px]">
|
<BasicForm @register="registerForm" />
|
</div>
|
</ScrollContainer>
|
</div>
|
</div>
|
</template>
|
