保存增加Loading效果

src/views/SchedulingPage/AnnualParamPage.vue

@@ -75,6 +75,7 @@ const rules = reactive({
 const energyTypeList = ref(['一步节能', '二步节能', '三步节能', '四步节能', '非节能']) // 节能等级列表
 const currentMonth = ref(0)
 const currentYear = ref(0)
+const addSaveBtnLoading = ref(false)
 const selectYearValue = computed(() => {
   if (currentMonth.value >= 7) {
     return currentYear.value + "年-" + (currentYear.value + 1) + "年"
@@ -132,6 +133,7 @@ function handleAdd() {
   resetInput()
   addWindowOpen.value = true
   formRef.value.resetFields()
+  addSaveBtnLoading.value = false
 } // 处理新增
 function handleSearch() {
   if (!searchKey.value) {
@@ -191,6 +193,7 @@ function onReviseSubmit() {
   })
 } // 提交修改
 function onAddSubmit() { // 提交新增
+  addSaveBtnLoading.value = true
   formRef.value.validate(valid => {
     if (valid) {
       if (addForm.value.year.trim().length > 4) {
@@ -200,6 +203,7 @@ function onAddSubmit() { // 提交新增
         if (String(item.year).trim() === String(addForm.value.year).trim()) {
           if (String(item.energyType).trim() === String(addForm.value.energyType).trim()) {
             ElMessage.error('该年该类型已存在.')
+            addSaveBtnLoading.value = false
             return
           }
         }
@@ -217,14 +221,19 @@ function onAddSubmit() { // 提交新增
             message: res.success,
             type: 'error',
           })
+          addSaveBtnLoading.value = false
         }
       }).catch(err => {
         ElMessage({
           message: '接口异常，新增失败.',
           type: 'error',
         })
+        addSaveBtnLoading.value = false
       })
     }
+    else {
+      addSaveBtnLoading.value = false
+    }
   })
 } // 提交新增
 function handleClose() {
@@ -507,7 +516,7 @@ function getOrganizationStructure() {
         </template>
         <template #footer>
           <div class="dialog-footer">
-            <el-button type="primary" @click="onAddSubmit">保存</el-button>
+            <el-button type="primary" :loading="addSaveBtnLoading" @click="onAddSubmit">保存</el-button>
             <el-button type="primary" @click="handleClose">关闭</el-button>
           </div>
         </template>

src/views/SchedulingPage/EnergyManagePage.vue

@@ -31,6 +31,7 @@ const reset = () => {
     "energyName": ''
   }
 }
+const addSaveBtnLoading = ref(false)
 const loading = ref(false)
 const energyForm = ref()
 const dialogVisible = ref(false)
@@ -159,6 +160,7 @@ const handleCancel = () => {
 const handleAdd = () => {
   action.value = "add",
     dialogVisible.value = true;
+  addSaveBtnLoading.value = false
   reset()
 }
 // 编辑
@@ -180,6 +182,7 @@ const handleEdit = (val) => {
 };
 
 const onSubmit = () => {
+  addSaveBtnLoading.value = true
   loading.value = true
   energyForm.value.validate((valid) => {
     if (valid) {
@@ -214,6 +217,7 @@ const onSubmit = () => {
         message: "请输入正确的内容",
         type: "error",
       });
+      addSaveBtnLoading.value = false
     }
   });
 };
@@ -409,7 +413,7 @@ onMounted(() => {
       </table>
       <div class="dialog-footer">
         <el-button type="primary" @click="handleCancel(energyForm)">关闭</el-button>
-        <el-button type="primary" @click="onSubmit()">保存</el-button>
+        <el-button type="primary" :loading="addSaveBtnLoading" @click="onSubmit()">保存</el-button>
       </div>
     </el-form>
   </el-dialog>

src/views/SchedulingPage/PhenomenonPage.vue

 <script setup>
-import {onMounted, ref, reactive} from "vue";
+import {onMounted, ref, reactive, onBeforeMount} from "vue";
 import {ElMessage, ElMessageBox} from "element-plus";
 import {getPhenomenon, addPhenomenon, alterPhenomenon, deletePhenomenon} from "@/api/scheduling.js"
 import {vFloatNumber} from "@/utils/directives.js";
@@ -11,6 +11,7 @@ const reviseWindowOpen = ref(false)
 const addWindowOpen = ref(false)
 const reviseForm = ref({}) // 修改表单
 const addForm = ref({}) // 新增表单
+const addSaveBtnLoading = ref(false)
 
 
 const formRef = ref()
@@ -32,6 +33,7 @@ const tableBodyClass = data => {   // 表体样式
 function add() {
   addWindowOpen.value = true
   formRef.value.resetFields()
+  addSaveBtnLoading.value = false
 }  // 新增按钮单击事件
 function revise(val) {
   reviseForm.value = {...val}
@@ -88,6 +90,13 @@ function handleClose() {
 function onReviseSubmit() {
   formRef.value.validate((valid) => {
     if (valid) {
+      if(Math.abs(Number(reviseForm.value.phenomenonTemp)) > 30){
+        ElMessage({
+          message: '对应温度不能大于30度或小于-30度',
+          type: 'error',
+        })
+        return
+      }
       if (reviseForm.value.phenomenonName === '晴天') {
         reviseForm.value.phenomenonType = 1
       } else if (reviseForm.value.phenomenonName === '多云') {
@@ -121,7 +130,16 @@ function onReviseSubmit() {
   })
 } // 修改表单提交
 function onAddSubmit() {
+  addSaveBtnLoading.value = true
   formRef.value.validate(valid => {
+    if(Math.abs(Number(addForm.value.phenomenonTemp)) > 30){
+      ElMessage({
+        message: '对应温度不能大于30度或小于-30度',
+        type: 'error',
+      })
+      addSaveBtnLoading.value = false
+      return
+    }
     if (valid) {
       if (addForm.value.phenomenonName === '晴天') {
         addForm.value.phenomenonType = 1
@@ -143,14 +161,19 @@ function onAddSubmit() {
             message: res.message,
             type: 'error',
           })
+          addSaveBtnLoading.value = false
         }
       }).catch(err => {
         ElMessage({
           message: '新增失败.',
           type: 'error',
         })
+        addSaveBtnLoading.value = false
       })
     }
+    else {
+      addSaveBtnLoading.value = false
+    }
   })
 } // 新增表单提交
 function resetInput() {
@@ -165,7 +188,6 @@ function resetSearch() {
   searchKey.value = ''
   getData()
 }
-
 onMounted(() => {
   getData()
 })
@@ -282,7 +304,7 @@ function customSort(a, b) {
         </template>
         <template #footer>
           <div class="dialog-footer">
-            <el-button type="primary" @click="onAddSubmit">保存</el-button>
+            <el-button type="primary" :loading="addSaveBtnLoading" @click="onAddSubmit">保存</el-button>
             <el-button type="primary" @click="handleClose">关闭</el-button>
           </div>
 

src/views/SchedulingPage/WindManagePage.vue

@@ -10,6 +10,8 @@ const dataBackup = ref([]);
 const searchKey = ref(""); // 查询参数
 const reviseWindowOpen = ref(false);
 const addWindowOpen = ref(false);
+const addSaveBtnLoading = ref(false);
+const reviseSaveBtnLoading = ref(false);
 // const reviseForm = ref({}); // 修改表单
 const addForm = ref({
   windLevel: "",
@@ -51,12 +53,14 @@ const rules = reactive({
 
 function add() {
   addWindowOpen.value = true;
+  addSaveBtnLoading.value = false
   formRef.value.resetFields()
 } // 新增按钮单击事件
 function revise(val) {
   reviseForm.value = { ...val };
   reviseForm.value.windLevel = Number(reviseForm.value.windLevel);
   reviseWindowOpen.value = true;
+  reviseSaveBtnLoading.value = false
   formRef.value.resetFields()
 } // 修改按钮单击事件
 function omit(val) {
@@ -106,8 +110,17 @@ function handleClose() {
   resetInput();
 } // 关闭弹窗
 function onReviseSubmit() {
+  reviseSaveBtnLoading.value = true
   formRef.value.validate(valid=>{
     if(valid){
+      if(Math.abs(Number(reviseForm.value.windTemp)) > 30){
+        ElMessage({
+          message: '对应温度不能大于30度或小于-30度',
+          type: 'error',
+        })
+        reviseSaveBtnLoading.value = false
+        return
+      }
       alterWind(reviseForm.value)
           .then((res) => {
             if (res.success) {
@@ -122,6 +135,7 @@ function onReviseSubmit() {
                 message: res.message,
                 type: "error",
               });
+              reviseSaveBtnLoading.value = false
             }
           })
           .catch((err) => {
@@ -129,13 +143,24 @@ function onReviseSubmit() {
               message: "修改失败.",
               type: "error",
             });
+            reviseSaveBtnLoading.value = false
           });
     }
+    reviseSaveBtnLoading.value = false
   })
 } // 修改表单提交
 function onAddSubmit() {
+  addSaveBtnLoading.value = true;
   formRef.value.validate(valid=>{
     if(valid){
+      if(Math.abs(Number(addForm.value.windTemp)) > 30){
+        ElMessage({
+          message: '对应温度不能大于30度或小于-30度',
+          type: 'error',
+        })
+        addSaveBtnLoading.value = false
+        return
+      }
       addWind(addForm.value)
           .then((res) => {
             if (res.success) {
@@ -150,16 +175,19 @@ function onAddSubmit() {
                 message: res.message,
                 type: "error",
               });
+              addSaveBtnLoading.value = false
             }
 
           })
-          .catch((err) => [
+          .catch((err) => {
             ElMessage({
               message: "新增失败.",
               type: "error",
-            }),
-          ]);
+            })
+            addSaveBtnLoading.value = false
+    });
     }
+    addSaveBtnLoading.value = false
   })
 
 } // 新增表单提交
@@ -253,7 +281,7 @@ function customSort(a, b) {
         </template>
         <template #footer>
           <div class="dialog-footer">
-            <el-button type="primary" @click="onReviseSubmit">保存</el-button>
+            <el-button type="primary" :loading="reviseSaveBtnLoading"  @click="onReviseSubmit">保存</el-button>
             <el-button type="primary" @click="handleClose">关闭</el-button>
           </div>
         </template>
@@ -290,7 +318,7 @@ function customSort(a, b) {
         </template>
         <template #footer>
           <div class="dialog-footer">
-            <el-button type="primary" @click="onAddSubmit">保存</el-button>
+            <el-button type="primary" :loading="addSaveBtnLoading"  @click="onAddSubmit">保存</el-button>
             <el-button type="primary" @click="handleClose">关闭</el-button>
           </div>
         </template>

src/views/SchedulingPage/weatherManageSub/AddWindow.vue

@@ -36,14 +36,18 @@ function handleClose() {
   emit('onCancel')
 }
 function handleConfirm() {
+  addSaveBtnLoading.value = true
   formRef.value.validate(valid=>{
     if(valid){
       addData.value.operateTime = getCurrentDateTime()
       emit('onConfirm', addData.value)
       resetInput()
+    }else {
+      addSaveBtnLoading.value = false
     }
   })
 }
+const addSaveBtnLoading = ref(false)
 function getCurrentDateTime() {
   const now = new Date();
   const year = now.getFullYear();
@@ -58,6 +62,7 @@ function getCurrentDateTime() {
 function onOpen() {
   resetInput()
   formRef.value.resetFields()
+  addSaveBtnLoading.value = false
 }
 function resetInput() {
   addData.value = {
@@ -201,7 +206,7 @@ const rules = reactive({
     </template>
     <template #footer>
       <div class="dialog-footer">
-        <el-button type="primary" @click="handleConfirm">保存</el-button>
+        <el-button type="primary" :loading="addSaveBtnLoading" @click="handleConfirm">保存</el-button>
         <el-button type="primary" @click="handleClose">关闭</el-button>
       </div>
     </template>