文件上传

src/main.js

@@ -100,6 +100,9 @@ Vue.config.productionTip = false
   }
 }) */
 
+  // 创建全局事件总线 $bus
+Vue.prototype.$bus = new Vue()
+
 new Vue({
   el: '#app',
   router,

src/views/common/UploadFile.vue

@@ -130,26 +130,29 @@ export default {
                 
                 if(Object.keys(this.fileUploadRule).length !== 0){
                     // 文件需要ocr识别
-                    this.uploadFile(file);
+                    this.uploadFile(file,'识别中');
                 }else{
                     // 文件不需要ocr识别
-                    this.uploadFile(file);
+                    this.uploadFile(file,'上传中');
                 }
                 
             }
         },
 
         // 上传文件
-        uploadFile(file){
+        uploadFile(file,text){
             console.log(file);
+            this.$bus.$emit('startUpload', text);
             const formData = new FormData();
             formData.append('file', file.raw);
             formData.append('params', JSON.stringify(this.fileUploadRule));
             uploadSmallFileByOcr(formData).then(res => {
                 console.log(res);
                 this.$message.success(res.msg);
+                this.$bus.$emit('endUpload');
             }).catch(err => {
                 this.$message.error(err.msg);
+                this.$bus.$emit('endUpload');
             })
         },
         // 处理文件超出限制

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

@@ -1,6 +1,16 @@
 <!-- 企业主体库表单 -->
 <template>
     <div class="app-container">
+        <!-- 全局上传动画 -->
+        <div v-if="showUploadAnimation" class="global-upload-animation">
+            <div class="animation-mask"></div>
+            <div class="animation-content">
+                <div class="spinner"></div>
+                <div class="animation-text">{{ animationText }}</div>
+                <div class="animation-subtext">正在处理文件，请稍候...</div>
+            </div>
+        </div>
+
         <div class="content-header">
             <el-button class="reset-btn" @click="handleClose()">返回</el-button>
             <el-button class="search-btn" @click="handleSave()">保存</el-button>
@@ -23,11 +33,13 @@
         </div>
     </div>
 </template>
+
 <script>
 import { decryptWithSM4 } from '@/utils/sm'
 import BasicInfo from './child/BasicInfo.vue'
 import LegalPerson from './child/LegalPerson.vue'
 import AccountOpeningCertificate from './child/AccountOpeningCertificate.vue'
+
 export default {
     name: 'EnterpriseForm',
     components: {
@@ -39,6 +51,9 @@ export default {
         return {
             id: decryptWithSM4(this.$route.query.id),
             type: decryptWithSM4(this.$route.query.type),
+            showUploadAnimation: false,
+            uploadQueue: 0, // 上传队列计数器
+            animationText: '识别中'
         }
     },
     methods: {
@@ -48,7 +63,7 @@ export default {
             this.$tab.closeOpenPage(obj)
         },
         // 保存
-       async handleSave() {
+        async handleSave() {
             try {
                 // 并行校验所有表单
                 const [basicInfoData, legalPersonData, accountData] = await Promise.all([
@@ -74,9 +89,46 @@ export default {
                 // console.error('表单校验失败:', error)
                 this.$message.error(error.message || '请完善表单信息')
             }
-        }
+        },
-    }
+        // 开始上传
+        handleStartUpload(data) {
+            this.animationText = data
+            this.uploadQueue++
+            this.showUploadAnimation = true
 
+        },
+        // 结束上传
+        handleEndUpload(data) {
+            if (this.uploadQueue > 0) {
+                this.uploadQueue--
+            }
+
+            // 如果队列为空，隐藏动画
+            if (this.uploadQueue === 0) {
+                this.showUploadAnimation = false
+            }
+
+
+        }
+    },
+    mounted() {
+        // 监听上传开始事件
+        this.$bus.$on('startUpload', this.handleStartUpload)
+
+        // 监听上传结束事件
+        this.$bus.$on('endUpload', this.handleEndUpload)
+
+    },
+    beforeDestroy() {
+        // 移除所有事件监听
+        this.$bus.$off('startUpload', this.handleStartUpload)
+        this.$bus.$off('endUpload', this.handleEndUpload)
+
+        // 重置状态
+        this.showUploadAnimation = false
+        this.uploadQueue = 0
+        this.animationText = '识别中'
+    }
 }
 </script>
 
@@ -86,6 +138,86 @@ export default {
     background: linear-gradient(180deg, #F1F6FF 20%, #E5EFFF 100%);
     min-height: 100vh;
     overflow-y: auto;
+    position: relative;
+}
+
+// 全局上传动画样式
+.global-upload-animation {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 9999;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    pointer-events: none;
+
+    .animation-mask {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        // background: rgba(255, 255, 255, 0.9);
+        backdrop-filter: blur(4px);
+    }
+
+    .animation-content {
+        position: relative;
+        z-index: 10000;
+        text-align: center;
+        background: linear-gradient(135deg, #ffffff 0%, #f8faff 100%);
+        padding: 40px 50px;
+        border-radius: 20px;
+        box-shadow:
+            0 10px 40px rgba(31, 114, 234, 0.15),
+            0 0 0 1px rgba(31, 114, 234, 0.1);
+        min-width: 280px;
+        animation: slideInUp 0.3s ease-out;
+
+        .spinner {
+            width: 60px;
+            height: 60px;
+            border: 4px solid #f3f7ff;
+            border-top: 4px solid #1F72EA;
+            border-radius: 50%;
+            animation: spin 1.2s linear infinite;
+            margin: 0 auto 20px;
+            position: relative;
+
+            &::after {
+                content: '';
+                position: absolute;
+                top: -4px;
+                left: -4px;
+                right: -4px;
+                bottom: -4px;
+                border: 4px solid transparent;
+                border-top: 4px solid #4A8BFF;
+                border-radius: 50%;
+                animation: spin 0.8s linear infinite reverse;
+            }
+        }
+
+        .animation-text {
+            font-size: 20px;
+            font-weight: 600;
+            color: #1F72EA;
+            margin-bottom: 8px;
+            background: linear-gradient(135deg, #1F72EA 0%, #4A8BFF 100%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+        }
+
+        .animation-subtext {
+            font-size: 14px;
+            color: #666;
+            opacity: 0.8;
+        }
+    }
 }
 
 .content-body {
@@ -106,14 +238,12 @@ export default {
     border-radius: 16px 16px 16px 16px;
     min-height: 600px;
     box-shadow: 0px 4px 20px 0px rgba(31, 35, 55, 0.1);
-    // border: 1px solid #e8f4ff;
     padding: 0;
     margin-bottom: 20px;
     flex: 1;
     min-width: 0;
 }
 
-
 .content-header {
     display: flex;
     justify-content: flex-end;
@@ -156,4 +286,27 @@ export default {
         box-shadow: 0px 6px 12px 0px rgba(76, 76, 76, 0.3);
     }
 }
+
+// 动画定义
+@keyframes spin {
+    0% {
+        transform: rotate(0deg);
+    }
+
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
+@keyframes slideInUp {
+    from {
+        opacity: 0;
+        transform: translateY(30px) scale(0.9);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0) scale(1);
+    }
+}
 </style>