1. 优化配置管理的 loading 设置

This commit is contained in:
YunaiV
2023-03-09 22:24:55 +08:00
parent d24d9e690a
commit 6f7a785c80

View File

@@ -32,7 +32,7 @@
</el-form> </el-form>
<template #footer> <template #footer>
<div class="dialog-footer"> <div class="dialog-footer">
<el-button type="primary" @click="submitForm"> </el-button> <el-button @click="submitForm" type="primary" :disabled="formLoading"> </el-button>
<el-button @click="colseForm(ruleFormRef)"> </el-button> <el-button @click="colseForm(ruleFormRef)"> </el-button>
</div> </div>
</template> </template>
@@ -48,9 +48,8 @@ const message = useMessage() // 消息弹窗
const modelVisible = ref(false) // 弹窗的是否展示 const modelVisible = ref(false) // 弹窗的是否展示
const modelTitle = ref('') // 弹窗的标题 const modelTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的数据 Loading 加载 const formLoading = ref(false) // 表单的 Loading 加载1修改时的数据加载2提交的按钮禁用
const formType = ref('') // 表单的类型create - 新增update - 修改 const formType = ref('') // 表单的类型create - 新增update - 修改
const submitLoading = ref(false) // 操作按钮的 Loading 加载:避免重复提交
// let formRef = ref() // 表单的 Ref // let formRef = ref() // 表单的 Ref
const formData = reactive({ const formData = reactive({
id: undefined, id: undefined,
@@ -95,13 +94,18 @@ defineExpose({ openModal }) // 提供 openModal 方法,用于打开弹窗
/** 提交表单 */ /** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件,用于操作成功后的回调 const emit = defineEmits(['success']) // 定义 success 事件,用于操作成功后的回调
const submitForm = async () => { const submitForm = async () => {
if (true) {
formLoading.value = true
console.log('1111')
return
}
const formRef = proxy.$refs['formRef'] const formRef = proxy.$refs['formRef']
// 校验表单 // 校验表单
if (!formRef) return if (!formRef) return
const valid = await formRef.validate() const valid = await formRef.validate()
if (!valid) return if (!valid) return
// 提交请求 // 提交请求
submitLoading.value = true formLoading.value = true
try { try {
const data = formData as ConfigApi.ConfigVO const data = formData as ConfigApi.ConfigVO
if (formType.value === 'create') { if (formType.value === 'create') {
@@ -114,7 +118,7 @@ const submitForm = async () => {
modelVisible.value = false modelVisible.value = false
emit('success') emit('success')
} finally { } finally {
submitLoading.value = false formLoading.value = false
} }
} }