1、左侧菜单树和按钮样式调整

2、上传文件夹逻辑调整
3、文档工具详情新增预览
4、所有的预览功能新增遮罩处理

src/components/FileUpload/optimizeToolUpload.vue

@@ -4,7 +4,7 @@
                :before-upload="beforeUpload"
                :on-change="onChange"
                :on-remove="handleRemove"
-               :multiple="isMultiple"
+               :multiple="false"
                :on-exceed="handleExceed"
                :accept="acceptType"
                :file-list="fileList"
@@ -18,11 +18,7 @@
       <!--    上传-->
       <input v-show="false" ref="fileRef" id="fileFolder" type="file" @change="handleFolderUpload" webkitdirectory
              multiple="multiple" />
-
-<!--      <input v-show="false" type="file" ref="fileRef" webkitdirectory @change="handleFolderUpload">
-      <el-button slot="trigger" size="small" type="primary">选取文件夹</el-button>-->
     </el-upload>
-<!--    <div slot="tip" class="el-upload__tip" >只能上传{{acceptType}}文件</div>-->
     <div v-show="progressFlag" class="head-img">
       <el-progress :text-inside="true" :stroke-width="14" :percentage="progressPercent" status="success"></el-progress>
     </div>
@@ -34,7 +30,6 @@ import axios from 'axios'
 import {
   getToken
 } from "@/utils/auth";
-import JSZip from 'jszip'
 
 export default {
   props: {
@@ -96,6 +91,8 @@ export default {
       uploadedNum: 0,
       _shardCount: null, //是否最后一片
       isFolder: false,
+      totalFiles: 0,    // 总文件数量
+      uploadedCount: 0, // 已上传文件数量
     };
   },
   watch: {
@@ -196,38 +193,42 @@ export default {
           });
         })
       } else {
-        self.uploadedNum = 0
+       self.uploadIdSharding(file);
-        file._shardCount = Math.ceil(file.size / this.partSize) //总片数
-        file.uploaded = 0
-        let formData = new FormData()
-        formData.append('fileName', file.name)
-        //大文件上传初始化,返回uploadId  initUpload(formData)
-        axios({
-          url: process.env.VUE_APP_BASE_API + "/common/initUpload",
-          method: 'post',
-          data: formData,
-          headers: {
-            'Authorization': 'Bearer ' + getToken(),
-            'Content-Type': 'multipart/form-data'
-          },
-        }).then(function (res) {
-          if (res.status == 200) {
-            //从第0块开始上传
-            file.uploadId = res.data.uploadId
-            file.objectKey = res.data
-            file.chunkId = 0
-            self.uploadByChunk(file)
-          } else {
-            this.progress--
-            self.$message.error(res.msg)
-          }
-        }).catch(error => {
-          self.progressPercent = 0
-          self.progressFlag = false;
-          console.error(error)
-        })
       }
+    },
 
+    uploadIdSharding(file){
+      let self = this
+      self.uploadedNum = 0
+      file._shardCount = Math.ceil(file.size / this.partSize) //总片数
+      file.uploaded = 0
+      let formData = new FormData()
+      formData.append('fileName', file.name)
+      //大文件上传初始化,返回uploadId  initUpload(formData)
+      axios({
+        url: process.env.VUE_APP_BASE_API + "/common/initUpload",
+        method: 'post',
+        data: formData,
+        headers: {
+          'Authorization': 'Bearer ' + getToken(),
+          'Content-Type': 'multipart/form-data'
+        },
+      }).then(function (res) {
+        if (res.status == 200) {
+          //从第0块开始上传
+          file.uploadId = res.data.uploadId
+          file.objectKey = res.data
+          file.chunkId = 0
+          self.uploadByChunk(file)
+        } else {
+          this.progress--
+          self.$message.error(res.msg)
+        }
+      }).catch(error => {
+        self.progressPercent = 0
+        self.progressFlag = false;
+        console.error(error)
+      })
     },
     //分片上传大文件
     uploadByChunk(file) {
@@ -254,7 +255,6 @@ export default {
           'Authorization': 'Bearer ' + getToken(),
           'Content-Type': 'multipart/form-data'
         },
-
       }).then(response => {
         if (response.status == 200) {
           //判断返回的MD5值是否一致，一致继续传下一块，否则重传本块（这里目前前后端MD5一直不一致，暂时先注释掉，有时间了我再研究一下）
@@ -327,6 +327,7 @@ export default {
         })
       }
     },
+
     resetData() {
       this.progress = 0;
     },
@@ -346,7 +347,6 @@ export default {
     },
     /** 清空文件 **/
     clearFile(){
-      this.progressFlag = false;
       if(this.$refs.upload){
         this.$refs.upload.clearFiles();
       }
@@ -357,7 +357,7 @@ export default {
       document.getElementById("fileFolder").value = null;
       this.$refs.fileRef.dispatchEvent(new MouseEvent("click"));
     },
-    async handleFolderUpload(event) {
+/*     async handleFolderUpload(event) {
       let self = this;
       self.isFolder = true
       const files = event.target.files;
@@ -376,17 +376,236 @@ export default {
         }
         await self.uploadFile(temp);
       }
-    /*   console.info("files=========", files)
+    }, */
-      let fileListTemp = []
+
-      for(let item of files){
+   /*  // 处理文件夹上传
-        fileListTemp.push(item);
+    async handleFolderUpload(event) {
+      const files = event.target.files;
+      this.isFolder = true;
+      this.progressFlag = true;
+
+      if (files.length === 0) {
+        this.$message.warning('没有选择文件');
+        return;
+      }
+
+      let successCount = 0;
+      let failCount = 0;
+      for (const file of files) {
+        try {
+          await this.uploadFolderFile({ file });
+          successCount++;
+        } catch (error) {
+          failCount++;
+        }
+      }
+
+      this.$message.success(`上传完成！成功：${successCount}，失败：${failCount}`);
+      this.progressFlag = false;
+      this.progressPercent = 0;
+    }, */
+    // 单个文件上传
+    uploadFolderFile({ data, file }) {
+      let self = this
+      //初始化参数
+      if (file.size < this.partSize) {
+        return new Promise((resolve, reject) => {
+          const formData = new FormData();
+          formData.append("file", file);
+          this.progressFlag = true;
+
+          axios({
+            url: self.uploadUrl,
+            method: 'post',
+            data: formData,
+            headers: {
+              'Authorization': 'Bearer ' + getToken(),
+              'Content-Type': 'multipart/form-data'
+            },
+           /*  onUploadProgress: progressEvent => {
+              this.progressPercent = ((progressEvent.loaded / progressEvent.total) * 100) | 0;
+            } */
+          }).then(res => {
+            setTimeout(() => {
+              if (res.data.code === 200) {
+                // self.progressFlag = false;
+                // self.progressPercent = 0;
+                self.handleResult(res,file);
+                resolve();  // 上传成功后，调用 resolve
+              } else {
+                // self.progressFlag = false;
+                self.$message.error(file.name + '上传失败！');
+                reject();  // 上传失败时调用 reject
+              }
+            }, 500);
+          }).catch(error => {
+            // self.progressFlag = false;
+            // self.progressPercent = 0;
+            self.$message.error(file.name + '上传失败！');
+            reject(error);  // 上传失败时调用 reject
+          });
+        });
+      }else{
+        return new Promise((resolve, reject) => {
+          self.uploadIdShardingFolder(file)
+            .then(() => {
+              resolve(); // 上传成功，继续下一个文件
+            })
+            .catch(error => {
+              reject(error); // 上传失败，触发 reject
+            });
+        });
       }
-      self.fileList = fileListTemp; */
-     /*  files.for()
-      self.onChange(null, files); */
-      // self.fileList = files;
-      // this.$refs.fileRef.value = null;
     },
+
+
+    async handleFolderUpload(event) {
+      const files = Array.from(event.target.files);
+      this.totalFiles = files.length;
+      this.uploadedCount = 0;
+      this.progressFlag = true;
+      let failCount = 0;
+      for (let i = 0; i < files.length; i++) {
+        try {
+          await this.uploadFolderFile(
+            {
+              data: null,
+              file: files[i]
+            }
+          );
+          this.uploadedCount++;
+          this.updateProgress();
+        } catch (error) {
+          failCount++;
+        }
+      }
+      this.$message.success('上传完成！成功：' + this.uploadedCount+'，失败：' + failCount);
+      this.progressFlag = false;
+      this.progressPercent = 0;
+    },
+    updateProgress() {
+      if (this.uploadedCount === this.totalFiles) {
+        this.progressPercent = 100;
+      } else {
+        this.progressPercent = Math.min(100, Math.floor((this.uploadedCount / this.totalFiles) * 100));
+      }
+/*
+      if (this.uploadedCount % 10 === 0 || this.uploadedCount === this.totalFiles) {
+        this.$message.success(`已上传 ${this.uploadedCount} 个文件`);
+      } */
+    },
+
+    // 初始化分片上传
+    uploadIdShardingFolder(file) {
+      let self = this
+      return new Promise((resolve, reject) => {
+        file._shardCount = Math.ceil(file.size / this.partSize); // 总片数
+        file.uploaded = 0;
+
+        const formData = new FormData();
+        formData.append('fileName', file.name);
+
+        // 大文件上传初始化, 返回 uploadId
+        axios({
+          url: process.env.VUE_APP_BASE_API + "/common/initUpload",
+          method: 'post',
+          data: formData,
+          headers: {
+            'Authorization': 'Bearer ' + getToken(),
+            'Content-Type': 'multipart/form-data'
+          },
+        }).then(res => {
+          if (res.status === 200) {
+            file.uploadId = res.data.uploadId;
+            file.chunkId = 0;
+            this.uploadByChunkFolder(file)
+              .then(() => resolve())  // 全部分片上传完成，返回 resolve
+              .catch(error => reject(error));  // 分片上传出错，返回 reject
+          } else {
+            reject(new Error('初始化上传失败'));
+          }
+        }).catch(error => {
+          reject(error);
+        });
+      });
+    },
+
+    // 分片上传逻辑
+    uploadByChunkFolder(file) {
+      let self = this
+      return new Promise((resolve, reject) => {
+        const uploadChunk = (chunkId) => {
+          const _start = chunkId * this.partSize;
+          const _end = Math.min(file.size, _start + this.partSize);
+          const fileData = file.slice(_start, _end);
+
+          const form1 = new FormData();
+          form1.append('chunkFile', fileData);
+          form1.append('uploadId', file.uploadId);
+          form1.append('chunkId', (chunkId + 1).toString());
+          form1.append('shardCount', file._shardCount.toString());
+
+          axios({
+            url: process.env.VUE_APP_BASE_API + "/common/uploadChunk",
+            method: 'post',
+            data: form1,
+            headers: {
+              'Authorization': 'Bearer ' + getToken(),
+              'Content-Type': 'multipart/form-data'
+            },
+          }).then(response => {
+            if (response.status === 200) {
+              file.uploadedNum++;
+              // const percent = Math.floor((file.uploadedNum / file._shardCount) * 100);
+              // this.percentageSend(file, percent);
+              if (chunkId + 1 < file._shardCount) {
+                // 继续上传下一片
+                uploadChunk(chunkId + 1);
+              } else {
+                // 所有分片上传完成，合并文件
+                this.mergeFileFolder(file).then(() => resolve()).catch(error => reject(error));
+              }
+            } else {
+              reject(new Error('分片上传失败'));
+            }
+          }).catch(error => {
+            reject(error);
+          });
+        };
+
+        // 从第0块开始上传
+        uploadChunk(0);
+      });
+    },
+
+    // 合并文件
+    mergeFileFolder(file) {
+      let self = this
+      return new Promise((resolve, reject) => {
+        const form2 = new FormData();
+        form2.append('uploadId', file.uploadId);
+        form2.append('fileName', file.name);
+
+        axios({
+          url: process.env.VUE_APP_BASE_API + "/common/mergeFile",
+          method: 'post',
+          data: form2,
+          headers: {
+            'Authorization': 'Bearer ' + getToken(),
+            'Content-Type': 'multipart/form-data'
+          },
+        }).then(res => {
+          if (res.status === 200) {
+            self.handleResult(res,file);
+            resolve(); // 合并成功
+          } else {
+            reject(new Error('文件合并失败'));
+          }
+        }).catch(error => {
+          reject(error);
+        });
+      });
+    }
   }
 };
 </script>

src/layout/components/Navbar.vue

@@ -97,9 +97,9 @@ export default {
         })
       }).catch(() => {});
     },
-    // 跳转到购物车
+    // 跳转到消息中心
     toMyCartPage() {
-      this.$router.push({ path: '/message' })
+      this.$router.push({ path: '/message', query: {'states':'1'} })
     },
   }
 }

src/views/document/detail.vue

@@ -18,7 +18,7 @@
             </el-form><!--el-form-->
           </div><!--el-form-border 表单-->
         </el-tab-pane><!--el-tab-pane-->
-        <el-tab-pane label="关联附件" name="second" v-loading="previewLoading" element-loading-text="加载中">
+        <el-tab-pane label="关联附件" name="second" v-loading="previewLoading" >
           <el-table :data="attachmentList" style="width: 100%">
             <el-table-column label="序号" width="60" type="index" align="center"></el-table-column>
             <el-table-column label="附件名称" prop="fileName" :show-overflow-tooltip="true" />
@@ -480,7 +480,6 @@
         this.isPreviewDisable = true
         this.previewLoading = true
         this.$nextTick(() => {
-          console.info("this.$refs.previewForm====999999=======", this.$refs.previewForm)
           this.$refs.previewForm.frontModulePreview(row)
         })
       },

src/views/document/downloadFileDetail.vue

@@ -2,7 +2,7 @@
   <div class="fbox1">
     <div class="fl">
       <el-tabs v-model="detailActiveName">
-        <el-tab-pane label="附件信息" name="first" v-loading="previewLoading" element-loading-text="加载中">
+        <el-tab-pane label="附件信息" name="first" v-loading="previewLoading" >
           <el-table :data="attachmentList" style="width: 100%">
             <el-table-column label="序号" width="60" align="center" type="index"></el-table-column>
             <el-table-column label="附件名称" prop="fileName" :show-overflow-tooltip="true" />

src/views/document/editDocument.vue

@@ -128,7 +128,7 @@
       <div class="tboper">
         <div class="tit">关联附件</div>
       </div>
-      <div class="el-form-border">
+      <div class="el-form-border"  v-loading="previewLoading" >
         <div class="operate">
           <template v-if="editStatus && !detailBoolean">
             <uploadVue
@@ -236,7 +236,7 @@
       </div>
     </div>
 
-    <preview-util v-if="isPreviewDisable" ref="previewForm" @previewClose="previewClose"></preview-util>
+    <preview-util v-if="isPreviewDisable" ref="previewForm" @previewClose="previewClose"  @previewLoadingClose="previewLoadingClose"></preview-util>
 
     <tool-selector ref="toolSelect" @selectHandle="selectHandle"></tool-selector>
     <bl-user-selector  ref="peopleSelect" :type="'single'" :isCheck="true" :open="toolPrincipalsChoose" :deptFilter="true" @cancel="toolPrincipalsChoose=false" @submit="submitPeople"></bl-user-selector>
@@ -387,7 +387,7 @@
         },
         currentPage: 1,     // 当前页
         pageSize: 10,       // 每页显示数量
-
+        previewLoading: false,
       }
     },
     computed: {
@@ -789,6 +789,7 @@
       },
       handlePreview(row){
         this.isPreviewDisable = true
+        this.previewLoading = true
         this.$nextTick(() => {
           this.$refs.previewForm.frontModulePreview(row)
         })
@@ -797,6 +798,10 @@
       previewClose(){
         this.isPreviewDisable = false
       },
+      /** 关闭预览遮罩 **/
+      previewLoadingClose(){
+        this.previewLoading = false
+      },
       /**
        * 处理下载
        * **/

src/views/filestatistic/index.vue

@@ -285,7 +285,6 @@ export default {
       let self = this
       this.downLoading = true
       listDocCount(this.addDateRange(this.queryParams, this.dateRange)).then(res => {
-        console.info("res.total=============", res.total)
         self.downTotal = res.total
         self.toolDownStatList = res?.rows || []
         self.downLoading = false

src/views/message/index.vue

@@ -196,8 +196,12 @@ export default {
     };
   },
   created() {
+    if(this.$route.query.states){
+      this.queryParams.states = this.$route.query.states
+    }
     this.getList();
     this.getDeptTree();
+
   },
   methods: {
     /** 查询部门下拉树结构 */

src/views/tool/downloadFileDetail.vue

@@ -2,7 +2,7 @@
   <div class="fbox1">
     <div class="fl">
       <el-tabs v-model="detailActiveName">
-        <el-tab-pane label="附件信息" name="first" v-loading="previewLoading" element-loading-text="加载中">
+        <el-tab-pane label="附件信息" name="first" v-loading="previewLoading" >
           <el-table :data="attachmentList" style="width: 100%">
             <el-table-column label="序号" width="60" align="center" type="index"></el-table-column>
             <el-table-column label="附件名称" prop="fileName" :show-overflow-tooltip="true" />
@@ -101,6 +101,7 @@
       },
       handlePreview(row){
         this.isPreviewDisable = true
+        this.previewLoading = true
         this.$nextTick(() => {
           this.$refs.previewForm.frontModulePreview(row)
         })

src/views/tool/toolDetail.vue

@@ -29,7 +29,7 @@
             </el-form><!--el-form-->
           </div><!--el-form-border 表单-->
         </el-tab-pane><!--el-tab-pane-->
-        <el-tab-pane label="关联附件" name="second" v-loading="previewLoading" element-loading-text="加载中">
+        <el-tab-pane label="关联附件" name="second" v-loading="previewLoading" >
           <el-table :data="attachmentList" style="width: 100%">
             <el-table-column label="附件名称" prop="fileName" :show-overflow-tooltip="true" />
 <!--            <el-table-column label="类别" prop="docType" :show-overflow-tooltip="true" width="80" >

src/views/workflowList/addWorkflow/tool_release.vue

@@ -225,7 +225,6 @@
     <div class="el-form-border">
       <div class="operate">
 <!--        <el-form-item label="文件" required>
-
         </el-form-item>
         <el-button type="primary" icon="el-icon-upload2" v-if="editStatus" @click="handleDocAdd">上传</el-button>-->
         <template v-if="editStatus">
@@ -244,7 +243,7 @@
         </template>
         <!--            <el-button icon="el-icon-delete">删除</el-button>-->
       </div><!--operate 操作按钮-->
-      <el-table :data="paginatedData" style="width: 100%">
+      <el-table :data="paginatedData" style="width: 100%" v-loading="previewLoading" >
         <!--            <el-table-column type="selection" width="50" align="center"> </el-table-column>-->
         <el-table-column label="序号" width="60" align="center" type="index"></el-table-column>
         <el-table-column label="附件名称" prop="fileName" :show-overflow-tooltip="true" />
@@ -311,7 +310,7 @@
     <tool-selector ref="toolSelect" @selectHandle="selectHandle"></tool-selector>
     <bl-user-selector  ref="peopleSelect" :type="'single'" :isCheck="true" :open="toolPrincipalsChoose" :deptFilter="true" @cancel="toolPrincipalsChoose=false" @submit="submitPeople"></bl-user-selector>
 
-    <preview-util v-if="isPreviewDisable" ref="previewForm" @previewClose="previewClose"></preview-util>
+    <preview-util v-if="isPreviewDisable" ref="previewForm" @previewClose="previewClose" @previewLoadingClose="previewLoadingClose"></preview-util>
 
     <el-dialog :title="viewDialogTitle" :visible.sync="viewDialogOpen" fullscreen width="500px" append-to-body :before-close="handleBeforeClose">
       <i-frame :src="previewUrl" v-if="viewDialogOpen"/>
@@ -339,7 +338,6 @@ import ToolSelector from '@/components/tool-selector/index.vue'
 import uploadVue from '@/components/FileUpload/optimizeToolUpload.vue'
 import { addCount } from "@/api/tool/downloadCount";
 import previewUtil from '@/components/PreviewUtil/previewUtil.vue'
-import store from "@/store";
 
 // PDF本地文件预览
 export default {
@@ -400,7 +398,8 @@ export default {
       viewShow: false,
       monitorDrawerVisible:false,
       form: {
-        toolRespDept: this.$store.getters.userInfo.deptId
+        toolRespDept: this.$store.getters.userInfo.deptId,
+        status: "zy"
       },
       rules: {
         toolCode: [
@@ -474,6 +473,7 @@ export default {
       title: '工具发布',
       currentPage: 1,     // 当前页
       pageSize: 10,       // 每页显示数量
+      previewLoading: false,
     };
   },
   computed: {
@@ -970,6 +970,7 @@ export default {
     },
     handlePreview(row){
       this.isPreviewDisable = true
+      this.previewLoading = true
       this.$nextTick(() => {
         this.$refs.previewForm.frontModulePreview(row)
       })
@@ -978,6 +979,10 @@ export default {
     previewClose(){
       this.isPreviewDisable = false
     },
+    /** 关闭预览遮罩 **/
+    previewLoadingClose(){
+      this.previewLoading = false
+    },
     /**
      * 处理下载
      * **/