Parcourir la source

✨ feat<数据录入>:防止重复创建

xinyan il y a 9 mois
Parent
commit
380af9bcf7

+ 28 - 17
src/views/reportManage/dataCenter/normalDisplay/components/TableDataEntry.vue

@@ -148,6 +148,7 @@ interface taskDataForm {
 }
 
 const formSize = ref<ComponentSize>('default');
+const isSubmitting = ref(false);
 const dayFormVisible = ref(false);
 const taskDataFormRef = ref<FormInstance>();
 const taskDataForm = reactive({
@@ -542,25 +543,29 @@ async function createMonthData() {
 
 //创建任务
 const submitForm = async (formEl: FormInstance | undefined) => {
-  if (!formEl) return;
+  if (!formEl || isSubmitting.value) return; // 防止重复提交
   await formEl.validate(async (valid, fields) => {
     if (valid) {
-      if (dateType === 'day') {
-        const fieldsToValidate = ['sales_original'];
-        if (!validateNumericFields(taskDataForm, fieldsToValidate)) return; // 验证字段
-        await createDayData();
-      }
-      if (dateType === 'week') {
-        const fieldsToValidate = ['sales_original', 'ad_sales_original', 'ad_cost_original', 'total_sales_current_monthly_original', 'impression', 'ad_click', 'ad_order', 'money_by_amazon', 'money_by_other', 'session', 'order', 'availableSalesDay', 'intransitInventory', 'overseasStorage', 'refundRate'];
-        if (!validateNumericFields(taskDataForm, fieldsToValidate)) return; // 验证字段
-        await createWeekData();
-      }
-      if (dateType === 'month') {
-        const fieldsToValidate = ['sales_original'];
-        if (!validateNumericFields(taskDataForm, fieldsToValidate)) return; // 验证字段
-        await createMonthData();
+      isSubmitting.value = true; // 表单开始提交,禁用按钮
+      try {
+        if (dateType === 'day') {
+          const fieldsToValidate = ['sales_original'];
+          if (!validateNumericFields(taskDataForm, fieldsToValidate)) return; // 验证字段
+          await createDayData();
+        }
+        if (dateType === 'week') {
+          const fieldsToValidate = ['sales_original', 'ad_sales_original', 'ad_cost_original', 'total_sales_current_monthly_original', 'impression', 'ad_click', 'ad_order', 'money_by_amazon', 'money_by_other', 'session', 'order', 'availableSalesDay', 'intransitInventory', 'overseasStorage', 'refundRate'];
+          if (!validateNumericFields(taskDataForm, fieldsToValidate)) return; // 验证字段
+          await createWeekData();
+        }
+        if (dateType === 'month') {
+          const fieldsToValidate = ['sales_original'];
+          if (!validateNumericFields(taskDataForm, fieldsToValidate)) return; // 验证字段
+          await createMonthData();
+        }
+      } finally {
+        isSubmitting.value = false; // 无论成功或失败,恢复按钮
       }
-      //taskDataFormRef.value.resetFields();
     }
   });
 };
@@ -919,7 +924,13 @@ onMounted(() => {
     <template #footer>
       <div class="dialog-footer">
         <el-button @click="dayFormVisible = false ;resetForm(taskDataFormRef)">取消</el-button>
-        <el-button type="primary" @click="submitForm(taskDataFormRef)"> 确认</el-button>
+        <el-button
+            type="primary"
+            :disabled="isSubmitting"
+            @click="submitForm(taskDataFormRef)"
+        >
+          {{ isSubmitting ? '提交中...' : '确认' }}
+        </el-button>
       </div>
     </template>
   </el-dialog>