切换 多组件表单 提交 暂存

<template> <div class="form-content"> <a-form ref="baseFormstep3" :model="formData" :rules="rules" :labelCol="{ style: { width: '120px' } }" layout="vertical" autocomplete="off" class="form-warp"> <a-row :gutter="20"> <a-col :span="12"> <a-form-item label="生成模板" name="templateType" required> <a-select v-model:value="formData.templateType" :options="t_generatetemplate_model" placeholder="请选择生成模板" allowClear /> </a-form-item> </a-col> <a-col :span="12"> <a-form-item label="前端类型" name="frontType" required> <a-select v-model:value="formData.frontType" :options="[{ label: 'Vben Ant Design Schema 模板', value: 50 }]" placeholder="请选择生成场景" allowClear /> </a-form-item> </a-col> <a-col :span="12"> <a-form-item label="生成场景" name="scene" required> <a-select v-model:value="formData.scene" :options="t_generatescene_model" placeholder="请选择生成场景" allowClear /> </a-form-item> </a-col> <a-col :span="12"> <a-form-item label="上级菜单" name="parentMenuId" > <a-tree-select v-model:value="formData.parentMenuId" :treeData="menuTree" placeholder="请选择上级菜单" allowClear treeDefaultExpandAll /> </a-form-item> </a-col> <a-col :span="12"> <a-form-item label="模块名" name="moduleName" required> <a-input v-model:value="formData.moduleName" placeholder="请输入模块名" allowClear /> </a-form-item> </a-col> <a-col :span="12"> <a-form-item label="业务名" name="businessName" required> <a-input v-model:value="formData.businessName" placeholder="请输入业务名" allowClear /> </a-form-item> </a-col> <a-col :span="12"> <a-form-item label="类名称" name="className" required> <a-input v-model:value="formData.className" placeholder="请输入类名称" allowClear /> </a-form-item> </a-col> <a-col :span="12"> <a-form-item label="类描述" name="classComment" required> <a-input v-model:value="formData.classComment" placeholder="请输入类描述" allowClear /> </a-form-item> </a-col> </a-row> </a-form> </div> </template> <script setup lang="ts"> import { ref, reactive, computed } from 'vue'; import { getMenuList } from '@/api/demo/system'; import { useDict } from '@/utils/dict'; import { transformMenuToTree, t_generatetemplate_model, } from './options'; const { t_generatetemplate_model, t_generatescene_model } = useDict('t_generatescene_model', 't_generatetemplate_model') as { t_generatetemplate_model: any; t_generatescene_model: any; }; const props = defineProps<{ formModel: Record<string, any>; }>(); const baseFormstep3 = ref(null); const emit = defineEmits(['update:formModel']); const formData = computed({ get: () => props.formModel, set: (val) => emit('update:formModel', val), }); // 菜单树 const menuTree = ref([]); const gettreeMenuList = async () => { try { const res = await getMenuList(); // 接口返回菜单树 menuTree.value = transformMenuToTree(res || []); } catch (error) { console.error('❌ 获取菜单树失败:', error); } }; gettreeMenuList() // 校验规则（除了 parentMenuId 都是必填） const rules = { templateType: [{ required: true, message: '请选择生成模板', trigger: 'change' }], frontendType: [{ required: true, message: '请输入前端类型', trigger: 'blur' }], sceneType: [{ required: true, message: '请选择生成场景', trigger: 'change' }], // parentMenuId: [{ required: true, message: '请选择上级菜单', trigger: 'change' }], moduleName: [{ required: true, message: '请输入模块名', trigger: 'blur' }], businessName: [{ required: true, message: '请输入业务名', trigger: 'blur' }], className: [{ required: true, message: '请输入类名称', trigger: 'blur' }], classComment: [{ required: true, message: '请输入类描述', trigger: 'blur' }], }; // 对外暴露方法 const validateItem = async () => { if (!baseFormstep3.value) return false; try { await baseFormstep3.value.validate(); return true; } catch { return false; } }; defineExpose({ validateItem, }); </script> <style scoped lang="less"></style>