预算和指标填报上传样式修改

2026-04-10 10:47:58 +08:00
parent bdd73b8868
commit 24102f0d0d
4 changed files with 156 additions and 32 deletions
--- a/.env.dev
+++ b/.env.dev
@@ -12,9 +12,9 @@ VUE_APP_TITLE = 洛玻集团驾驶舱
 # 杨姗姗
 # VUE_APP_BASE_API = 'http://172.16.20.218:7070'
 # 小田
-VUE_APP_BASE_API = 'http://172.16.19.232:7070'
+# VUE_APP_BASE_API = 'http://172.16.19.232:7070'
 # 测试
-# VUE_APP_BASE_API = 'http://192.168.0.35:8080'
+VUE_APP_BASE_API = 'http://192.168.0.35:8080'
 # 闫阳
 # VUE_APP_BASE_API = 'http://172.16.19.131:7070'

--- a/src/views/home/components/budgetDetails.vue
+++ b/src/views/home/components/budgetDetails.vue
@@ -75,8 +75,8 @@
            :key="tableKey"></base-table>
        </div>
      </div>
-      <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
-        <el-upload ref="upload" :limit="1" accept=".xlsx, .xls" action="#" :disabled="upload.isUploading"
+      <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body @close="handleImportDialogClose">
+        <el-upload ref="upload" :limit="1" accept=".xlsx, .xls" action="#" :disabled="upload.httpUploading"
          :on-change="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false" drag>
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
@@ -90,9 +90,15 @@
          </el-radio-group>
        </div>
        </el-upload>
+        <div v-if="upload.httpUploading" class="upload-progress-wrap">
+          <div class="upload-progress-track">
+            <div class="upload-progress-bar"></div>
+          </div>
+          <span class="upload-progress-text">正在上传</span>
+        </div>
        <div slot="footer" class="dialog-footer">
-          <el-button type="primary" @click="submitFileForm">确 定</el-button>
-          <el-button @click="cancelBtn">取 消</el-button>
+          <el-button type="primary" :loading="upload.httpUploading" :disabled="upload.httpUploading" @click="submitFileForm">确 定</el-button>
+          <el-button :disabled="upload.httpUploading" @click="cancelBtn">取 消</el-button>
        </div>
      </el-dialog>
    </Container>
@@ -134,11 +140,11 @@ export default {
        open: false,
        // 弹出层标题
        title: "预算填报导入",
-        // 是否禁用上传
-        isUploading: false,
        fileList:[],
        currentFile:null,
-        timeDim: 2
+        timeDim: 2,
+        // HTTP 上传中（点击确定后 axios 上传，展示不确定进度条）
+        httpUploading: false
      },
      getDataList: null, // 动态切换的查询接口
      updateData: null,  // 动态切换的更新接口
@@ -361,6 +367,8 @@ export default {
      });
    },
    handleLevelChange(id) {
+      this.form.levelId = id;
+      this.getDataPage()
      this.$emit('updateLevel', id)
    },
    // 表格单元格数据变更回调
@@ -457,9 +465,12 @@ export default {
      }
      // 计算选中日期对应的时间戳
      this.calculateTimeStamp(val);
+      // 重新请求数据
+      this.getDataPage();
    },
    // 导入
    importExcel() {
+      this.upload.httpUploading = false
      this.upload.open = true
    },
    downLoadExcel() {
@@ -500,7 +511,6 @@ export default {
    // 文件上传中处理
    handleFileUploadProgress(file, fileList) {
      console.log('文件上传中：',file, fileList)
-      this.upload.isUploading = true;
      this.upload.fileList = fileList;
      this.upload.currentFile = file.raw;
    },
@@ -508,10 +518,14 @@ export default {
    importTemplate() {},
    // 提交上传文件
    async submitFileForm() {
+      if (!this.upload.currentFile) {
+        return this.$message.error('请先选择要上传的文件！')
+      }
+      if (this.upload.httpUploading) {
+        return
+      }
+      this.upload.httpUploading = true
      try {
-        if (!this.upload.currentFile) {
-          return this.$message.error('请先选择要上传的文件！')
-        }
        const formData = new FormData()
        formData.append('file', this.upload.currentFile) // 文件字段
        formData.append('timeDim', this.upload.timeDim) // 年月维度字段
@@ -526,7 +540,7 @@ export default {
            'Authorization': "Bearer " + getAccessToken(),
            'tenant-id': getTenantId(),
          },
-          timeout: 30000
+          timeout: 300000
        })
        // 4. 处理响应结果
        if (response.data.code === 0) {
@@ -536,7 +550,6 @@ export default {
          this.upload.timeDim = 2
          this.upload.currentFile = null
          this.upload.open = false
-          this.upload.isUploading = false
          this.$refs.upload.clearFiles();
          this.getDataPage();
          this.$emit('updateLeft')
@@ -547,17 +560,66 @@ export default {
        // 5. 异常处理
        console.error('文件上传出错：', error)
        this.$message.error('上传失败！')
+      } finally {
+        this.upload.httpUploading = false
      }
    },
    cancelBtn() {
+      if (this.upload.httpUploading) {
+        return
+      }
      this.upload.open = false
-      this.$refs.upload.clearFiles();
+    },
+    handleImportDialogClose() {
+      this.upload.currentFile = null
+      this.upload.fileList = []
+      this.$nextTick(() => {
+        if (this.$refs.upload) {
+          this.$refs.upload.clearFiles()
+        }
+      })
    }
  }
 }
 </script>

 <style lang='scss' scoped>
+.upload-progress-wrap {
+  margin-top: 12px;
+}
+.upload-progress-track {
+  height: 8px;
+  border-radius: 4px;
+  background: rgba(11, 88, 255, 0.12);
+  overflow: hidden;
+  position: relative;
+}
+.upload-progress-bar {
+  position: absolute;
+  left: 0;
+  top: 0;
+  height: 100%;
+  width: 38%;
+  border-radius: 4px;
+  background: linear-gradient(90deg, #0b58ff, #5b9aff, #0b58ff);
+  animation: upload-indeterminate-slide 1.35s ease-in-out infinite;
+}
+@keyframes upload-indeterminate-slide {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(320%);
+  }
+}
+.upload-progress-text {
+  display: block;
+  margin-top: 8px;
+  font-size: 12px;
+  color: rgba(0, 0, 0, 0.55);
+  text-align: center;
+}
+
 // 月份列表容器样式（保留原有配置，若无使用可忽略）
 .month-list {
  // 内联样式已优化行间距，此处可留空或补充
--- a/src/views/home/components/indicatorDetails.vue
+++ b/src/views/home/components/indicatorDetails.vue
@@ -66,8 +66,8 @@ font-style: normal;">指标详情</div>
            ></base-table>
        </div>
      </div>
-      <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
-        <el-upload ref="upload" :limit="1" accept=".xlsx, .xls" action="#" :disabled="upload.isUploading"
+      <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body @close="handleImportDialogClose">
+        <el-upload ref="upload" :limit="1" accept=".xlsx, .xls" action="#" :disabled="upload.httpUploading"
          :on-change="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false" drag>
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
@@ -77,9 +77,15 @@ font-style: normal;">指标详情</div>
          <div class="el-upload__tip" slot="tip">
        </div>
        </el-upload>
+        <div v-if="upload.httpUploading" class="upload-progress-wrap">
+          <div class="upload-progress-track">
+            <div class="upload-progress-bar"></div>
+          </div>
+          <span class="upload-progress-text">正在上传</span>
+        </div>
        <div slot="footer" class="dialog-footer">
-          <el-button type="primary" @click="submitFileForm">确 定</el-button>
-          <el-button @click="cancelBtn">取 消</el-button>
+          <el-button type="primary" :loading="upload.httpUploading" :disabled="upload.httpUploading" @click="submitFileForm">确 定</el-button>
+          <el-button :disabled="upload.httpUploading" @click="cancelBtn">取 消</el-button>
        </div>
      </el-dialog>
    </Container>
@@ -122,10 +128,10 @@ export default {
        open: false,
        // 弹出层标题
        title: "指标填报导入",
-        // 是否禁用上传
-        isUploading: false,
        fileList:[],
-        currentFile:null
+        currentFile:null,
+        // HTTP 上传中（点击确定后 axios 上传，展示不确定进度条）
+        httpUploading: false
      }
    }
  },
@@ -277,6 +283,8 @@ export default {
      }
      // 计算选中月份的起止时间戳
      this.setMonthTimeStamp(val);
+      // 重新请求数据
+      this.getDataPage();
    },
    getUnitLabel(unitCode) {
      // 若字典为空或无匹配编码，返回原编码或空字符串
@@ -326,6 +334,8 @@ export default {
      
    },
    handleLevelChange(id) {
+      this.form.levelId = id;
+      this.getDataPage()
      this.$emit('updateLevel', id)
    },

@@ -339,6 +349,7 @@ export default {
    },
    // 导入
    importExcel() {
+      this.upload.httpUploading = false
      this.upload.open = true
    },
    downLoadExcel() {
@@ -371,7 +382,6 @@ export default {
    // 文件上传中处理
    handleFileUploadProgress(file, fileList) {
      console.log('文件上传中：',file, fileList)
-      this.upload.isUploading = true;
      this.upload.fileList = fileList;
      this.upload.currentFile = file.raw;
    },
@@ -379,10 +389,14 @@ export default {
    importTemplate() {},
    // 提交上传文件
    async submitFileForm() {
+      if (!this.upload.currentFile) {
+        return this.$message.error('请先选择要上传的文件！')
+      }
+      if (this.upload.httpUploading) {
+        return
+      }
+      this.upload.httpUploading = true
      try {
-        if (!this.upload.currentFile) {
-          return this.$message.error('请先选择要上传的文件！')
-        }
        const formData = new FormData()
        formData.append('file', this.upload.currentFile) // 文件字段
        formData.append('reportDate', this.form.endTime) // 时间维度字段
@@ -396,7 +410,7 @@ export default {
            'Authorization': "Bearer " + getAccessToken(),
            'tenant-id': getTenantId(),
          },
-          timeout: 30000
+          timeout: 300000
        })
        // 4. 处理响应结果
        if (response.data.code === 0) {
@@ -405,7 +419,6 @@ export default {
          this.upload.fileList = []
          this.upload.currentFile = null
          this.upload.open = false
-          this.upload.isUploading = false
          this.$refs.upload.clearFiles();
          this.getDataPage();
          this.$emit('updateLeft')
@@ -416,17 +429,66 @@ export default {
        // 5. 异常处理
        console.error('文件上传出错：', error)
        this.$message.error('上传失败！')
+      } finally {
+        this.upload.httpUploading = false
      }
    },
-    cancelBtn(){
+    cancelBtn() {
+      if (this.upload.httpUploading) {
+        return
+      }
      this.upload.open = false
-      this.$refs.upload.clearFiles();
+    },
+    handleImportDialogClose() {
+      this.upload.currentFile = null
+      this.upload.fileList = []
+      this.$nextTick(() => {
+        if (this.$refs.upload) {
+          this.$refs.upload.clearFiles()
+        }
+      })
    }
  }
 }
 </script>

 <style lang='scss' scoped>
+.upload-progress-wrap {
+  margin-top: 12px;
+}
+.upload-progress-track {
+  height: 8px;
+  border-radius: 4px;
+  background: rgba(11, 88, 255, 0.12);
+  overflow: hidden;
+  position: relative;
+}
+.upload-progress-bar {
+  position: absolute;
+  left: 0;
+  top: 0;
+  height: 100%;
+  width: 38%;
+  border-radius: 4px;
+  background: linear-gradient(90deg, #0b58ff, #5b9aff, #0b58ff);
+  animation: upload-indeterminate-slide 1.35s ease-in-out infinite;
+}
+@keyframes upload-indeterminate-slide {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(320%);
+  }
+}
+.upload-progress-text {
+  display: block;
+  margin-top: 8px;
+  font-size: 12px;
+  color: rgba(0, 0, 0, 0.55);
+  text-align: center;
+}
+
 // 月份列表容器样式（保留原有配置，若无使用可忽略）
 .month-list {
  // 内联样式已优化行间距，此处可留空或补充
--- a/src/views/home/components/keyWork.vue
+++ b/src/views/home/components/keyWork.vue
@@ -63,7 +63,7 @@ export default {
        return {
          ...item,
          id: index + 1,
-          status: (item.real > 0 && item.target > 0 && item.real / item.target >= 1 || item.real >= item.target) ? 'done' : 'pending'
+          status: (item.rate >= 100) ? 'done' : 'pending'
        };
      })  
    }