增加loading

src/views/construction-person/entry-and-exit-manage/person-entry/index.vue

@@ -1,6 +1,30 @@
 <template>
     <!-- 施工人员 ---- 出入场管理 ---- 人员入场 -->
     <div class="app-container">
+        <!-- 自定义全屏Loading -->
+        <div v-if="fullScreenLoading" class="custom-fullscreen-loading">
+            <div class="loading-content">
+                <div class="loading-icon-wrapper">
+                    <i class="el-icon-loading loading-icon"></i>
+                    <div class="loading-circle"></div>
+                </div>
+                <div class="loading-dots">
+                    <span class="dot dot-1"></span>
+                    <span class="dot dot-2"></span>
+                    <span class="dot dot-3"></span>
+                </div>
+                <p class="loading-text">
+                    <span
+                        class="text-char"
+                        v-for="(char, index) in loadingText"
+                        :key="index"
+                        :style="{ animationDelay: index * 0.1 + 's' }"
+                    >
+                        {{ char }}
+                    </span>
+                </p>
+            </div>
+        </div>
         <TableModel
             :formLabel="formLabel"
             :showOperation="true"
@@ -266,6 +290,8 @@ export default {
             idNumber: '', // 身份证号码
             getEntryPersonListAPI,
             loading: false,
+            fullScreenLoading: false, // 全屏loading状态
+            loadingText: '正在保存，请稍候...', // loading文字
             queryDownloadTask: {
                 proId: '',
                 subId: '',
@@ -355,6 +381,8 @@ export default {
 
         onHandleConfirmAddOrEdit() {
             return new Promise(async (resolve, reject) => {
+                // 显示全屏loading
+                this.fullScreenLoading = true
                 try {
                     await this.$refs.addOrEditFormContentRef.onHandleConfirmAddOrEditFun()
                     this.$refs.personEntryTableRef.getTableList()
@@ -362,11 +390,11 @@ export default {
                     resolve()
                 } catch (error) {
                     reject(error)
+                } finally {
+                    // 无论成功还是失败，都关闭loading
+                    this.fullScreenLoading = false
                 }
             })
-            // await this.$refs.addOrEditFormContentRef.onHandleConfirmAddOrEditFun()
-            // this.$refs.personEntryTableRef.getTableList()
-            // this.handleCloseDialogOuter()
         },
 
         // 关闭弹框
@@ -583,3 +611,188 @@ export default {
     },
 }
 </script>
+
+<style scoped lang="scss">
+.custom-fullscreen-loading {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(
+        135deg,
+        rgba(64, 158, 255, 0.1) 0%,
+        rgba(0, 0, 0, 0.7) 100%
+    );
+    backdrop-filter: blur(8px);
+    -webkit-backdrop-filter: blur(8px);
+    z-index: 9999;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    animation: fadeIn 0.3s ease-in-out;
+
+    .loading-content {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        background: linear-gradient(135deg, #ffffff 0%, #f5f7fa 100%);
+        padding: 50px 60px;
+        border-radius: 20px;
+        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3),
+            0 0 0 1px rgba(255, 255, 255, 0.1) inset;
+        position: relative;
+        overflow: hidden;
+
+        &::before {
+            content: '';
+            position: absolute;
+            top: -50%;
+            left: -50%;
+            width: 200%;
+            height: 200%;
+            background: linear-gradient(
+                45deg,
+                transparent 30%,
+                rgba(64, 158, 255, 0.1) 50%,
+                transparent 70%
+            );
+            animation: shine 3s infinite;
+        }
+    }
+
+    .loading-icon-wrapper {
+        position: relative;
+        width: 80px;
+        height: 80px;
+        margin-bottom: 30px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .loading-icon {
+        font-size: 48px;
+        color: #409eff;
+        animation: rotate 1.5s linear infinite;
+        z-index: 2;
+        position: relative;
+        text-shadow: 0 0 20px rgba(64, 158, 255, 0.5);
+    }
+
+    .loading-circle {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        border: 3px solid transparent;
+        border-top-color: #409eff;
+        border-right-color: #67c23a;
+        border-bottom-color: #e6a23c;
+        border-left-color: #f56c6c;
+        border-radius: 50%;
+        animation: rotate 2s linear infinite;
+        box-shadow: 0 0 30px rgba(64, 158, 255, 0.3);
+    }
+
+    .loading-dots {
+        display: flex;
+        gap: 8px;
+        margin-bottom: 30px;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .dot {
+        width: 12px;
+        height: 12px;
+        border-radius: 50%;
+        background: linear-gradient(135deg, #409eff 0%, #67c23a 100%);
+        animation: bounce 1.4s ease-in-out infinite;
+        box-shadow: 0 0 10px rgba(64, 158, 255, 0.5);
+
+        &.dot-1 {
+            animation-delay: 0s;
+        }
+
+        &.dot-2 {
+            animation-delay: 0.2s;
+        }
+
+        &.dot-3 {
+            animation-delay: 0.4s;
+        }
+    }
+
+    .loading-text {
+        color: #303133;
+        font-size: 18px;
+        font-weight: 500;
+        margin: 0;
+        letter-spacing: 2px;
+        display: flex;
+        gap: 2px;
+        position: relative;
+        z-index: 2;
+
+        .text-char {
+            display: inline-block;
+            animation: textWave 1.5s ease-in-out infinite;
+        }
+    }
+}
+
+@keyframes rotate {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
+@keyframes bounce {
+    0%,
+    80%,
+    100% {
+        transform: scale(0.8);
+        opacity: 0.5;
+    }
+    40% {
+        transform: scale(1.2);
+        opacity: 1;
+    }
+}
+
+@keyframes textWave {
+    0%,
+    100% {
+        transform: translateY(0);
+        opacity: 1;
+    }
+    50% {
+        transform: translateY(-5px);
+        opacity: 0.7;
+    }
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: scale(0.95) translateY(-20px);
+    }
+    to {
+        opacity: 1;
+        transform: scale(1) translateY(0);
+    }
+}
+
+@keyframes shine {
+    0% {
+        transform: translateX(-100%) translateY(-100%) rotate(45deg);
+    }
+    100% {
+        transform: translateX(100%) translateY(100%) rotate(45deg);
+    }
+}
+</style>