文件上传

src/views/enterpriseLibrary/enterprise/components/EnterpriseForm.vue

@@ -1,6 +1,6 @@
 <!-- 企业主体库表单 -->
 <template>
-    <div class="app-container">
+    <div class="app-container" :class="{ 'no-pointer-events': showUploadAnimation }">
         <!-- 全局上传动画 -->
         <div v-if="showUploadAnimation" class="global-upload-animation">
             <div class="animation-mask"></div>
@@ -139,6 +139,24 @@ export default {
     min-height: 100vh;
     overflow-y: auto;
     position: relative;
+    
+    // 当显示动画时，禁用页面点击
+    &.no-pointer-events {
+        pointer-events: none;
+        
+        // 但允许滚动（如果需要）
+        // overflow-y: auto;
+        
+        // 子元素也继承禁用点击
+        * {
+            pointer-events: none;
+        }
+        
+        // 重新启用滚动条的点击事件（如果需要滚动）
+        // ::-webkit-scrollbar {
+        //     pointer-events: auto;
+        // }
+    }
 }
 
 // 全局上传动画样式
@@ -152,7 +170,9 @@ export default {
     display: flex;
     align-items: center;
     justify-content: center;
-    pointer-events: none;
+    
+    // 动画区域本身可以有点击事件（如果需要）
+    pointer-events: auto;
 
     .animation-mask {
         position: absolute;
@@ -160,8 +180,11 @@ export default {
         left: 0;
         right: 0;
         bottom: 0;
-        // background: rgba(255, 255, 255, 0.9);
+        background: rgba(255, 255, 255, 0.6); // 添加半透明背景
         backdrop-filter: blur(4px);
+        
+        // 遮罩层阻止点击
+        pointer-events: auto;
     }
 
     .animation-content {
@@ -177,6 +200,9 @@ export default {
         min-width: 280px;
         animation: slideInUp 0.3s ease-out;
         
+        // 动画内容可以有点击事件
+        pointer-events: auto;
+
         .spinner {
             width: 60px;
             height: 60px;
@@ -220,6 +246,19 @@ export default {
     }
 }
 
+// 或者使用更简单的方法：直接在动画显示时给body添加禁用样式
+// 在 mounted 和 beforeDestroy 中动态添加/移除样式
+.global-upload-animation-active {
+    .app-container {
+        pointer-events: none !important;
+        user-select: none !important;
+        
+        * {
+            pointer-events: none !important;
+        }
+    }
+}
+
 .content-body {
     margin-top: 20px;
 }