32
32
</el-form >
33
33
<template #footer >
34
34
<div class =" dialog-footer" >
35
- <el-button type =" primary" @click = " submitForm " >确 定</el-button >
35
+ <el-button @click = " submitForm " type =" primary" :disabled = " formLoading " >确 定</el-button >
36
36
<el-button @click =" colseForm(ruleFormRef)" >取 消</el-button >
37
37
</div >
38
38
</template >
@@ -48,9 +48,8 @@ const message = useMessage() // 消息弹窗
48
48
49
49
const modelVisible = ref (false ) // 弹窗的是否展示
50
50
const modelTitle = ref (' ' ) // 弹窗的标题
51
- const formLoading = ref (false ) // 表单的数据 Loading 加载
51
+ const formLoading = ref (false ) // 表单的 Loading 加载:1)修改时的数据加载;2)提交的按钮禁用
52
52
const formType = ref (' ' ) // 表单的类型:create - 新增;update - 修改
53
- const submitLoading = ref (false ) // 操作按钮的 Loading 加载:避免重复提交
54
53
// let formRef = ref() // 表单的 Ref
55
54
const formData = reactive ({
56
55
id: undefined ,
@@ -95,13 +94,18 @@ defineExpose({ openModal }) // 提供 openModal 方法,用于打开弹窗
95
94
/** 提交表单 */
96
95
const emit = defineEmits ([' success' ]) // 定义 success 事件,用于操作成功后的回调
97
96
const submitForm = async () => {
97
+ if (true ) {
98
+ formLoading .value = true
99
+ console .log (' 1111' )
100
+ return
101
+ }
98
102
const formRef = proxy .$refs [' formRef' ]
99
103
// 校验表单
100
104
if (! formRef ) return
101
105
const valid = await formRef .validate ()
102
106
if (! valid ) return
103
107
// 提交请求
104
- submitLoading .value = true
108
+ formLoading .value = true
105
109
try {
106
110
const data = formData as ConfigApi .ConfigVO
107
111
if (formType .value === ' create' ) {
@@ -114,7 +118,7 @@ const submitForm = async () => {
114
118
modelVisible .value = false
115
119
emit (' success' )
116
120
} finally {
117
- submitLoading .value = false
121
+ formLoading .value = false
118
122
}
119
123
}
120
124
0 commit comments