feat: 保存按钮新增loading功能

张
1 parent 45055645
Showing 4 changed files with 86 additions and 59 deletions
src/views/project/finance/financeProfit/ProductProfit/InnerData/FinanceEdit.vue
src/views/project/finance/financeProfit/ProductProfit/InnerProduce/FinanceEdit.vue
src/views/project/finance/financeProfit/ServiceProfit/PackageProfit/FinanceEdit.vue
src/views/project/finance/financeProfit/ServiceProfit/ServiceProfit/FinanceEdit.vue
@@ -148,6 +148,7 @@
       input1.value = '';
     }
   });
+  const loading = ref(false);
   const [register, { setDrawerProps, closeDrawer }] = useDrawerInner((data) => {
     // 方式1
     if (data.data?.lockFields) {
@@ -162,6 +163,7 @@
     input3.value = data.data?.productionDepartmentPredictUnitPrice?.toFixed(2);
     resetFields();
     setDrawerProps({ confirmLoading: false });
+    loading.value = false;
     // setFieldsValue({
     //   ...toRaw(data.data),
     // });
@@ -169,24 +171,28 @@
   });
   //完成编辑
   async function handleSubmit() {
-    // const values = await validate();
-    // const updatedValues = {
-    //   ...values,
-    //   id: update.value.data.id,
-    //   bgUrl: update.value.data.bgUrl,
-    // };
+    if (loading.value) return;
+    loading.value = true;
+    setDrawerProps({ confirmLoading: true });
     if (!input1.value || !input2.value || !input3.value) {
       error('选项不能为空');
+      loading.value = false;
+      setDrawerProps({ confirmLoading: false });
     } else {
-      await getPackageEdit({
-        orderId: id.value,
-        productionDepartmentPredictPrice: input1.value,
-        productionActualPrice: input2.value,
-        orderCount: orderCount.value,
-        productionDepartmentPredictUnitPrice: input3.value,
-      });
-      emit('success');
-      closeDrawer();
+      try {
+        await getPackageEdit({
+          orderId: id.value,
+          productionDepartmentPredictPrice: input1.value,
+          productionActualPrice: input2.value,
+          orderCount: orderCount.value,
+          productionDepartmentPredictUnitPrice: input3.value,
+        });
+        emit('success');
+      } finally {
+        loading.value = false;
+        setDrawerProps({ confirmLoading: false });
+        closeDrawer();
+      }
     }
   }
   function handleShow(visible: boolean) {
@@ -202,24 +202,29 @@
     });
     update.value = data;
   });
+  const loading = ref(false);
   //完成编辑
   async function handleSubmit() {
-    // const values = await validate();
-    // const updatedValues = {
-    //   ...values,
-    //   id: update.value.data.id,
-    //   bgUrl: update.value.data.bgUrl,
-    // };
-    if (!input3.value || !input4.value) {
+    if (loading.value) return;
+    loading.value = true;
+    setDrawerProps({ confirmLoading: true });
+    if (!input1.value || !input2.value || !input3.value) {
       error('选项不能为空');
+      loading.value = false;
+      setDrawerProps({ confirmLoading: false });
     } else {
-      await getServiceEdit({
-        projectNoPrefix: id.value,
-        projectInnerProfitInfoStartTime: input3.value,
-        projectInnerProfitInfoEndTime: input4.value,
-      });
-      emit('success');
-      closeDrawer();
+      try {
+        await getServiceEdit({
+          projectNoPrefix: id.value,
+          projectInnerProfitInfoStartTime: input3.value,
+          projectInnerProfitInfoEndTime: input4.value,
+        });
+        emit('success');
+      } finally {
+        loading.value = false;
+        setDrawerProps({ confirmLoading: false });
+        closeDrawer();
+      }
     }
   }
   function handleShow(visible: boolean) {
@@ -128,6 +128,7 @@
   const input1 = ref();
   const input2 = ref();
   const id = ref();
+  const loading = ref(false);
   const [register, { setDrawerProps, closeDrawer }] = useDrawerInner((data) => {
     // 方式1
     if (data.data.lockFields) {
@@ -146,29 +147,33 @@
   });
   //完成编辑
   async function handleSubmit() {
-    // const values = await validate();
-    // const updatedValues = {
-    //   ...values,
-    //   id: update.value.data.id,
-    //   bgUrl: update.value.data.bgUrl,
-    // };
+    if (loading.value) return;
+    loading.value = true;
+    setDrawerProps({ confirmLoading: true });
     if (!input1.value) {
       error('包装费用实际金额不能为空');
-    } else{
-      if(!input2.value){
-        await getPackageEdit({
-          orderId: id.value,
-          packetActualRmbTotalPrice: input1.value,
-        });
-      }else{
-        await getPackageEdit({
-          orderId: id.value,
-          packetActualRmbTotalPrice: input1.value,
-          orderScore: Number(input2.value),
-        });
+      loading.value = false;
+      setDrawerProps({ confirmLoading: false });
+    } else {
+      try {
+        if (!input2.value) {
+          await getPackageEdit({
+            orderId: id.value,
+            packetActualRmbTotalPrice: input1.value,
+          });
+        } else {
+          await getPackageEdit({
+            orderId: id.value,
+            packetActualRmbTotalPrice: input1.value,
+            orderScore: Number(input2.value),
+          });
+        }
+        emit('success');
+      } finally {
+        loading.value = false;
+        setDrawerProps({ confirmLoading: false });
+        closeDrawer();
       }
-      emit('success');
-      closeDrawer();
     }
   }
 </script>
@@ -219,8 +219,12 @@
     });
     update.value = data;
   });
+  const loading = ref(false);
   //完成编辑
   async function handleSubmit() {
+    if (loading.value) return;
+    loading.value = true;
+    setDrawerProps({ confirmLoading: true });
     // const values = await validate();
     // const updatedValues = {
     //   ...values,
@@ -229,17 +233,24 @@
     // };
     if (!input1.value || !input2.value || !input3.value || !input4.value) {
       error('选项不能为空');
+      loading.value = false;
+      setDrawerProps({ confirmLoading: false });
     } else {
-      await getServiceEdit({
-        projectNoPrefix: id.value,
-        developmentCopyRmbTotalPrice: input1.value,
-        spainPaidRmbCommission: input2.value,
-        projectStartTime: input3.value,
-        projectEndTime: input4.value,
-        paidRmbCommission: input5.value,
-      });
-      emit('success');
-      closeDrawer();
+      try {
+        await getServiceEdit({
+          projectNoPrefix: id.value,
+          developmentCopyRmbTotalPrice: input1.value,
+          spainPaidRmbCommission: input2.value,
+          projectStartTime: input3.value,
+          projectEndTime: input4.value,
+          paidRmbCommission: input5.value,
+        });
+        emit('success');
+      } finally {
+        loading.value = false;
+        setDrawerProps({ confirmLoading: false });
+        closeDrawer();
+      }
     }
   }
   function handleShow(visible: boolean) {