فهرست منبع

```
feat: 添加防重复提交功能

- 在评论组件中添加提交加载状态,防止重复点击发送按钮
- 在学习笔记组件中添加提交加载状态,防止重复点击编辑按钮
- 在工作流添加页面中添加提交加载状态,防止重复点击发布按钮
- 在工作流交易添加页面中添加提交加载状态,防止重复点击发布按钮
- 所有提交操作完成后通过setTimeout重置加载状态
```

zhangningning 1 ماه پیش
والد
کامیت
512d7dd40e

+ 13 - 1
src/pages/LearningSystem/components/pinglun.vue

@@ -6,7 +6,11 @@
       <div class="page-add flex_1">
         <div class="flex-center-between">
           <el-input v-model="comments" placeholder="请输入"  maxlength="500" style="width: 100%;flex:1"/>
-          <el-button type="primary" size="large" @click="handleSend" style="height:44px" class="gradient">{{$t('common.send')}}</el-button>
+          <el-button type="primary" size="large" 
+          :loading="isSubmiting"
+          @click="handleSend" style="height:44px" class="gradient">
+          {{$t('common.send')}}
+          </el-button>
         </div>
       </div>
     </div>
@@ -49,6 +53,8 @@ const props = defineProps({
     default: () => ({})
   }
 })
+// 防止重复提交的加载状态
+const isSubmiting = ref(false)
 
 //监听props.info.courseId变化
 watch(() => props.info.courseId, (newVal, oldVal) => {
@@ -98,6 +104,8 @@ const handleSend = async () => {
     DGTMessage.warning(t('common.pleaseInputCommentContent'))
     return
   }
+  // 设置提交状态为true,禁用按钮
+  isSubmiting.value = true
   const res = await commentAdd({
     courseId: props.info.courseId,
     content: comments.value
@@ -107,6 +115,10 @@ const handleSend = async () => {
     comments.value = ''
     getList();
   }
+  // 提交完成后,将提交状态设置为false,启用按钮
+  setTimeout(() => {
+    isSubmiting.value = false
+  }, 1000)
 };
 
 

+ 13 - 1
src/pages/LearningSystem/components/xuxibiji.vue

@@ -17,7 +17,9 @@
         <div class="gray999 mt5">{{$t('common.genxinyu')}} {{item.updateTime || item.createTime}}</div>
       </div>
       <div>
-        <el-button type="primary" plain size="large" @click="openAddDialog(item)">
+        <el-button type="primary" plain size="large" 
+        :loading="isSubmiting"
+        @click="openAddDialog(item)">
           <el-icon><EditPen /></el-icon>
           <span class="ml10">{{$t('common.edit')}}</span>
         </el-button>
@@ -54,6 +56,9 @@ const props =defineProps({
     default: () => ({})
   }
 })
+// 防止重复提交的加载状态
+const isSubmiting = ref(false)
+
 
 //监听props.info.courseId变化
 watch(() => props.info.courseId, (newVal, oldVal) => {
@@ -113,12 +118,19 @@ const submit = (form) => {
   if(form.noteId){
     req = noteEdit
   }
+  // 设置提交状态为true,禁用按钮
+  isSubmiting.value = true
   req(params).then(res => {
     console.log(res)
     if(res.code === 200){
       DGTMessage.success(t('workflowTrade.publishSuccess'))
       getList('init');
     }
+  }).finally(() => {
+    // 提交完成后,将提交状态设置为false,启用按钮
+    setTimeout(() => {
+      isSubmiting.value = false
+    }, 1000)
   })
 };
 // 删除笔记

+ 13 - 1
src/pages/WorkflowAdd.vue

@@ -116,7 +116,9 @@
         </el-form-item>
       </div>
       <div class="mt20">
-        <el-button type="primary" class="font_size16 gradient" @click="submitForm"  size="large">
+        <el-button type="primary" class="font_size16 gradient" 
+        :loading="isSubmiting"
+        @click="submitForm"  size="large">
           <el-icon><Promotion /></el-icon>
           <span class="ml10">{{$t('common.publishWorkflow')}}</span>
         </el-button>
@@ -144,6 +146,9 @@ import { publishAdd, getPublishDetail,publishEdit } from '@/api/publish.js'
 import { useI18n } from 'vue-i18n' 
 const { t } = useI18n()
 
+// 防止重复提交的加载状态
+const isSubmiting = ref(false)
+
 // 从路由参数中获取 activePlatform
 const activePlatform = ref(route.query.activePlatform || '');
 // 从路由参数中获取 publishId
@@ -250,6 +255,8 @@ const submitForm = async () => {
     if(publishId.value){
       req = publishEdit;
     }
+    // 设置提交状态为true,禁用按钮
+    isSubmiting.value = true
     req(ruleForm).then(res => {
       console.log(res)
       if(res.code === 200){
@@ -258,6 +265,11 @@ const submitForm = async () => {
           goBack();
         }, 2000);
       }
+    }).finally(() => {
+      // 提交完成后,将提交状态设置为false,启用按钮
+      setTimeout(() => {
+        isSubmiting.value = false
+      }, 1000)
     })
   })
 }

+ 15 - 4
src/pages/workflowTrade/workflowTradeAdd.vue

@@ -121,7 +121,9 @@
             </div>
           </div>
           <div class="mt20">
-            <el-button type="primary" class="font_size16 gradient" @click="submitForm" size="large">
+            <el-button type="primary" class="font_size16 gradient" 
+             :loading="isSubmiting"
+            @click="submitForm" size="large">
               <el-icon><Promotion /></el-icon>
               <span class="ml10">{{$t('common.fabuxuqiu')}}</span>
             </el-button>
@@ -189,7 +191,8 @@ console.log(router,route)
 import { ref, computed, reactive, onMounted, watchEffect } from 'vue'
 import { useAppStore } from '@/pinia/appStore'
 const appStore = useAppStore()
-
+// 防止重复提交的加载状态
+const isSubmiting = ref(false)
 //获取参数
 const query = route.query;
 // 分类列表树
@@ -263,7 +266,7 @@ onMounted(() => {
 
 // 提交表单
 const submitForm = async () => {
-  await ruleFormRef.value.validate((valid, fields,name) => {
+  await ruleFormRef.value.validate(async(valid, fields,name) => {
     console.log(valid, fields,name)
     if (!valid) {
       //报错第一个key
@@ -271,14 +274,22 @@ const submitForm = async () => {
       DGTMessage.warning(fields[firstKey][0].message)
       return
     }
+    // 设置加载状态为true,禁用按钮
+    isSubmiting.value = true
     // 新增需求工作流
-    questAdd(ruleForm).then(res => {
+    await questAdd(ruleForm).then(res => {
       console.log(res)
       if(res.code === 200){
         DGTMessage.success(t('workflowTrade.publishSuccess'))
         goBack();
       }
+    }).finally(() => {
+      // 提交完成后,将加载状态设置为false,启用按钮
+      setTimeout(() => {
+        isSubmiting.value = false
+      }, 1000)
     })
+    
   })
 };
 const goBack = () => {