弹窗与表单

这篇解决什么

新增 / 编辑弹窗怎么接到列表、schema 写在哪、提交前谁校验。读完用 useVbenModal + useVbenForm，不要在 index.vue 里堆一整页 a-form。

列表页只负责 setData().open()。弹窗组件用 connectedComponent 挂上。样例看组织：views/system/dept/。

示意图：按本仓库组织页画的开闭顺序。

从哪改

名称	说明	仓库路径
弹窗	connectedComponent、destroyOnClose	@vben/common-ui 的 useVbenModal
表单适配	v-model:value、必填文案走 $t	apps/web-antd/src/adapter/form.ts
列表挂载	FormModal @success="handleRefresh"	views/system/dept/index.vue
弹窗实现	onConfirm / onOpenChange	views/system/dept/modules/form.vue
schema	字段、组件、字典 options	同目录 data.ts
后端 VO	保存体与列表字段对齐	ruoyi-office/yudao-module-system/ 等模块 *SaveReqVO

列表：

const [FormModal, formModalApi] = useVbenModal({
  connectedComponent: Form,
  destroyOnClose: true,
});
formModalApi.setData(null).open(); // 新建
formModalApi.setData(row).open();  // 编辑

弹窗里 showDefaultActions: false，确认走 Modal 的 onConfirm：先 formApi.validate()，再 getValues()，modalApi.lock() 防连点，成功 close + emit('success')。

onOpenChange(false) 要清掉 formData。打开时用 modalApi.getData() 判断有没有 id，有 id 再请求详情，不要假设列表行字段齐全。

日期：纯日期 YYYY-MM-DD；日期时间时间戳 valueFormat: 'x'。规则见工作区日期强规则，不要把 Dayjs 直接提交。

独立整页表单（流程单据 info）不是这篇。弹窗 CRUD 用这套即可。

字段

名称	说明	仓库路径
schema	字段列表	useFormSchema()
commonConfig.labelWidth	标签宽	useVbenForm
lock / unlock	提交中禁用确定	modalApi

校验失败不要 lock

先 validate，不通过直接 return。先 lock 再校验失败，确定按钮会卡死。

字典 options 在 schema 里取

componentProps.options: getDictOptions(DICT_TYPE.xxx, 'number')。不要在弹窗再写一套 status 常量。

const [Form, formApi] = useVbenForm({
  schema: useFormSchema(),
  showDefaultActions: false,
});

摘自组织弹窗。useVbenForm 从 #/adapter/form 进，不是直接 @vben/common-ui。

相关篇

• 表格 VxeGrid
• 字典数据
• 请求封装
• 国际化