<template> <BasicForm @register="registerForm" /> </template> <script lang="ts"> import { defineComponent, reactive } from 'vue'; import { basicFormSchema, genList } from './gen.detail.data'; import { BasicForm, useForm } from '/@/components/Form'; import { GenTableIM } from '/@/model/gen'; import { sourceCopy } from '/@/utils/xueyi'; export default defineComponent({ name: 'BasicFrom', components: { BasicForm }, emits: ['submit'], setup(_, { emit }) { const state = reactive<{ info: Nullable<GenTableIM>; }>({ info: null, }); const [registerForm, { setFieldsValue, validate }] = useForm({ labelWidth: 100, schemas: basicFormSchema, showActionButtonGroup: false, }); /** 数据初始化 */ function initialize(info: GenTableIM) { state.info = info; setFieldsValue({ ...state.info }); } /** 保存校验 */ async function submit() { try { sourceCopy(state.info, await validate()); return state.info; } catch { emit('submit', genList[0].key); } } return { registerForm, initialize, submit }; }, }); </script>这个页面是甚麽样的
时间: 2024-04-18 13:28:00 浏览: 14
这个页面是一个 Vue 组件,包含了一个 `<template>` 和一个 `<script>` 部分。
在 `<template>` 部分,使用了一个名为 `BasicForm` 的自定义组件,并通过 `@register` 事件监听器绑定了一个名为 `registerForm` 的方法。这个自定义组件可能是一个表单组件,根据 `@register` 事件的命名来推测。
在 `<script>` 部分,使用了 TypeScript 语言编写的脚本。首先导入了一些 Vue 的相关函数和组件,以及一些自定义的模块和工具函数。然后通过 `defineComponent` 函数定义了一个 Vue 组件。
在组件的 `setup` 函数中,使用了 `reactive` 函数创建了一个响应式对象 `state`,其中包含了一个名为 `info` 的可空对象。
接下来,通过 `[registerForm, { setFieldsValue, validate }] = useForm(...)` 的语法来创建了一个表单对象 `registerForm` 和一些表单相关的方法。
在 `initialize` 方法中,接收一个名为 `info` 的参数,并将其赋值给 `state.info`,然后使用 `setFieldsValue` 方法将 `state.info` 的值设置到表单中。
在 `submit` 方法中,通过调用 `validate()` 方法获取表单的验证结果,并将其通过 `sourceCopy` 方法深拷贝到 `state.info` 中。如果验证出错,则通过 `emit('submit', genList[0].key)` 触发了一个名为 `submit` 的自定义事件,并传递了 `genList[0].key` 作为参数。
最后,通过 `return { registerForm, initialize, submit }` 将 `registerForm`、`initialize` 和 `submit` 这三个方法暴露出去,以便在模板中使用或在其他地方访问。