Browse Source

fix: prevent duplicate submissions in forms by managing loading state

PIG AI 1 month ago
parent
commit
cee0f5afda
2 changed files with 10 additions and 5 deletions
  1. 5 2
      multiple/主子表单.vue
  2. 5 3
      single/表单.vue

+ 5 - 2
multiple/主子表单.vue

@@ -219,11 +219,14 @@ const openDialog = (id: string, isDetail: boolean) => {
 
 // 提交
 const onSubmit = async () => {
+  loading.value = true; // 防止重复提交
   const valid = await dataFormRef.value.validate().catch(() => {});
-  if (!valid) return false;
+  if (!valid) {
+    loading.value = false;
+    return false;
+  }
 
   try {
-    loading.value = true;
     form.${pk.attrName} ? await putObj(form) : await addObj(form);
     useMessage().success(form.${pk.attrName} ? '修改成功' : '添加成功');
     visible.value = false;

+ 5 - 3
single/表单.vue

@@ -97,7 +97,6 @@
     </el-col>
 #end
 #end
-#end
 			</el-row>
       </el-form>
       <template #footer>
@@ -186,11 +185,14 @@ const openDialog = (id: string) => {
 
 // 提交
 const onSubmit = async () => {
+	loading.value = true; // 防止重复提交
 	const valid = await dataFormRef.value.validate().catch(() => {});
-	if (!valid) return false;
+	if (!valid) {
+		loading.value = false;
+		return false;
+	}
 
 	try {
-    loading.value = true;
 		form.${pk.attrName} ? await putObj(form) : await addObj(form);
 		useMessage().success(form.${pk.attrName} ? '修改成功' : '添加成功');
 		visible.value = false;