招标解析

src/views/analysis/components/AnalysisForm.vue

@@ -1,6 +1,6 @@
 <template>
     <!-- 小型弹窗，用于完成，删除，保存等操作 -->
-    <el-dialog class="l-dialog" :class="lDialog" :title="title" :visible.sync="dialogVisible" :showClose="true"
+    <el-dialog class="l-dialog" :class="[lDialog, { 'no-pointer-events': showUploadAnimation }]" :title="title" :visible.sync="dialogVisible" :showClose="true"
         :closeOnClickModal="false" @close="handleClose" :append-to-body="true">
         <div>
             <!-- 全局上传动画 -->
@@ -16,7 +16,7 @@
 
                 <el-form-item v-for="(item, index) in uploadType" :key="index" :label="item"
                     :prop="`fileList${index + 1}`">
-                    <UploadMoreFile :fileList="form[`fileList${index + 1}`]" @file-change="handleFileChange"
+                    <UploadFile :fileList="form[`fileList${index + 1}`]" @file-change="handleFileChange"
                         @del-file="handleDelFile" :type="`fileList${index + 1}`" :uploadType="defaultParams.uploadType"
                         :maxFileTips="defaultParams.maxFileTips" :fileUploadRule="defaultParams.fileUploadRule"
                         :limitUploadNum="defaultParams.limitUploadNum" />
@@ -31,7 +31,7 @@
 </template>
 <script>
 import _ from 'lodash'
-import UploadMoreFile from '@/views/common/UploadMoreFile.vue'
+import UploadFile from '@/views/common/UploadFile.vue'
 import GlobalUploadAnimation from '@/views/common/GlobalUploadAnimation.vue'
 import { getAnalysisTemplateSelectApi } from '@/api/common/select'
 import { addDataAPI } from '@/api/analysis/analysis'
@@ -50,7 +50,7 @@ const defaultParams = {
 export default {
     name: 'AnalysisForm',
     components: {
-        UploadMoreFile,
+        UploadFile,
         GlobalUploadAnimation
     },
     props: ['width', 'rowData', 'title'],
@@ -61,6 +61,9 @@ export default {
             defaultParams,
             uploadType: [],
             modelList: [],
+            showUploadAnimation: false,
+            animationText: '识别中',
+            uploadQueue: 0, // 上传队列计数器
             form: {
                 templateId: null,
                 delFileList: [],
@@ -249,6 +252,40 @@ export default {
                 }
             })
         },
+        // 开始上传
+        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>
@@ -313,6 +350,17 @@ export default {
     text-align: center;
 }
 
+// 当显示动画时，禁用弹窗点击
+.w500 ::v-deep .el-dialog.no-pointer-events,
+.w700 ::v-deep .el-dialog.no-pointer-events {
+    pointer-events: none;
+
+    // 子元素也继承禁用点击
+    * {
+        pointer-events: none;
+    }
+}
+
 .yxq .el-range-separator {
     margin-right: 7px !important;
 }