src/components/FileUpload/optimizeUpload.vue

@@ -1,27 +1,5 @@
 <template>
   <div>
-  <div class="container">
-    <div class="item">
-      <el-upload  action="#"
-                  ref="uploadFolder"
-                  :on-change="onChange"
-                  :on-remove="handleRemove"
-                  :show-file-list="false"
-                  :headers="headers"
-                  :accept="accept"
-                  :file-list="fileList"
-                  :before-upload="beforeUploadsg"
-                  :on-success="uploadSuccess"
-                  :on-error="uploadError"
-                  :on-exceed="exceed"
-                  :auto-upload="true"
-                  :http-request="uploadFile"
-                  :multiple="true">
-        <el-button slot="trigger" id="myButton"  size="small" type="primary" @click="uploadBtn.click()">选取文件夹</el-button>
-      </el-upload>
-    </div>
-    <div></div>
-    <div class="item">
     <el-upload class="upload-demo" ref="upload" action="#"
                :before-upload="beforeUpload"
                :on-change="onChange"
@@ -34,29 +12,32 @@
                :auto-upload="true"
                :http-request="uploadFile"
                show-file-list>
-        <el-button id="myButton" slot="trigger" size="small" type="primary">选取文件</el-button>
-        <div slot="tip" class="el-upload__tip">只能上传{{acceptType}}文件</div>
+      <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
+      <el-button size="small" type="primary" @click="handleUploadFile">
+        上传文件夹
+      </el-button>
+      <!--    上传-->
+      <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>
   </div>
-  </div>
-</div>
 </template>
 
 <script>
 import axios from 'axios'
-import sgUploadTray from "./sgUploadTray"
 import {
   getToken
 } from "@/utils/auth";
+import JSZip from 'jszip'
 
 export default {
-
-  components: {
-    sgUploadTray,
-  },
   props: {
     uploadUrl: {
       type: String,
@@ -104,22 +85,8 @@ export default {
       progressFlag: false, //进度条初始值隐藏
       progressPercent: 0, //进度条初始值
       partSize: 5 * 1024 * 1024,
-            headers: { kkToken: localStorage.token, }, //获取token(注意仔细看后端接受token的字段名是不是叫做“token”)
-            accept:`.${["png", "jpg", "jpeg", "bmp", "gif"].join(",.")}`,//允许上传的后缀名
-            actionURL: process.env.VUE_APP_BASE_API + "/common/initUpload",
-            dur: 100,
-            percent: 100,
-            uploadBtn: null,//上传按钮
-            uploadList: [],
-            showUploadTray: false,
     };
   },
-    mounted(d) {
-      this.$nextTick(() => {
-        this.uploadBtn = this.$refs.uploadFolder.$children[0].$refs.input;
-        this.uploadBtn.webkitdirectory = true;//让el-upload支持上传文件夹
-      })
-    },
   watch: {
     dataFile: {
       handler(newValue, oldValue) {
@@ -133,98 +100,6 @@ export default {
     }
   },
   methods: {
-      showFakeLoading(file) {
-        file = this.uploadList.find(v => v.uid == file.uid);
-        clearInterval(file.interval);
-        file.percent = 0;
-        file.interval = setInterval(() => {
-          file.percent++;
-          file.percent >= 99 && this.hideFakeLoading(file);
-        }, this.dur);
-      },
-      hideFakeLoading(file, { type, tip, color } = {}) {
-        console.log('file======>');
-        console.log(file)
-        file = this.uploadList.find(v => v.uid == file.uid);
-        clearInterval(file.interval);
-        switch (type) {
-          case 'error':
-            file.percent = 0;
-            break;
-          case 'success':
-          default:
-            file.percent = 100;
-        }
-        type && (file.type = type);
-        tip && (file.tip = tip);
-        color && (file.color = color);
-      },
-      exceed(file, fileList) {
-        this.$message.error("上传文件数量太大，分散上传吧！");
-      },
-      stopUpload(d) {
-        this.$refs.uploadFolder.abort();
-        //console.log(`取消上传`, d);
-      },
-      beforeUploadsg(file, id) {
-        console.log(this.uploadList)
-        this.uploadList = []
-        console.info("this.uploadList==", JSON.stringify(this.uploadList))
-        this.uploadList.unshift({
-          interval: false,
-          uid: file.uid,
-          percent: 0,//加载进度
-          name: file.name,
-          size: file.size,
-          type: file.type,
-          webkitRelativePath: file.webkitRelativePath,
-          tip: '',
-          color: '',
-        });
-        this.showUploadTray = true;
-        this.accept = ["png", "jpg", "jpeg", "bmp", "gif", "txt", "json", "pdf"]
-        // 判断是不是特定的格式________________________
-        let isFile = this.accept.includes(file.name.toLocaleLowerCase().split(".").pop());
-        const maxSize = 50; //限制大小
-        const isAllowSize = file.size / 1024 / 1024 <= maxSize;
-        isFile || this.$message.error("上传文件只能是" + this.accept+ "格式");
-        isAllowSize || this.$message.error("上传文件大小不能超过" + maxSize + "MB");
-        let allowUpload = isFile && isAllowSize;
-        return allowUpload; //若返回false则停止上传
-      },
-
-      uploadSuccess(response, file, fileList) {
-        if (response.data && response.data.key) {
-          // 下载失败原因的描述文件
-          this.$d.customer_downloadImportCustomerExcel({ key: response.data.key }, {
-            s: (d) => {
-              this.hideFakeLoading(file, { type: 'error', tip: "上传失败", color: "red" });
-              this.$g.downloadFile(d, `${file.name}-上传失败原因`, '.xls');
-              this.$message.error(`${file.name}-上传失败，请查看失败原因`);
-              // this.initList();//刷新列表
-              //console.log('上传失败', response, file, fileList);
-            }
-          });
-        } else if (response.success) {
-          // 上传成功了
-          this.hideFakeLoading(file, { type: 'success', tip: "上传成功", color: "green" });
-          this.$message.success(`“${file.name}上传成功`);
-          // this.initList();//刷新列表
-          //console.log('上传成功', response, file, fileList);
-        } else {
-          // 其他失败原因
-          this.hideFakeLoading(file, { type: 'error', tip: "上传失败", color: "red" });
-          this.$message.error(response.msg);
-          //console.log('上传失败', response, file, fileList);
-        }
-      },
-      //上传失败
-      uploadError(err, file, fileList) {
-        this.hideFakeLoading(file, { type: 'error', tip: "上传失败", color: "red" });
-        this.$message.error("上传失败");
-        //console.log('上传失败', err, file, fileList);
-      },
-
     // 上传前
     beforeUpload(file) {
       /* const fileType = file.type.toLowerCase()
@@ -252,7 +127,6 @@ export default {
     async uploadFile({ data, file }) {
       let self = this
       //初始化参数
-        this.progress++
       if (file.size < this.partSize) {
         let formData = new FormData()
         formData.append("file", file)
@@ -310,7 +184,6 @@ export default {
         let formData = new FormData()
         formData.append('fileName', file.name)
         let self = this
-
         //大文件上传初始化,返回uploadId  initUpload(formData)
         axios({
           url: process.env.VUE_APP_BASE_API + "/common/initUpload",
@@ -343,6 +216,7 @@ export default {
     uploadByChunk(file) {
       this._start = file.chunkId * this.partSize
       this._end = Math.min(file.size, this._start + this.partSize)//结束时总大小，和 开始的大小+之前的大小比较
+
       let self = this
       let fileData = file.slice(this._start, this._end)
       //获取文件块MD5
@@ -450,22 +324,141 @@ export default {
         fileNewName: res.data.newFileName,
         suffixType: res.data.suffixType
       }
+      console.info("data===========", data)
       self.$emit("handleSuccess", data)
     },
     /** 清空文件 **/
     clearFile(){
       this.$refs.upload.clearFiles();
       this.fileList = []
+    },
+    handleUploadFile() {
+      document.getElementById("fileFolder").value = null;
+      this.$refs.fileRef.dispatchEvent(new MouseEvent("click"));
+    },
+    async handleFolderUpload(event) {
+      let self = this;
+      const files = event.target.files;
+      this.fileslength = files.length;
+
+      // 获取文件夹名称
+      let folderName = "";
+      if (files.length > 0) {
+        let relativePath = files[0].webkitRelativePath;
+        folderName = relativePath.split("/")[0];
       }
+
+      const zip = new JSZip();
+
+      // 将文件夹及其内容添加到 ZIP 中
+      Array.from(files).forEach(file => {
+        zip.file(file.webkitRelativePath, file);
+      });
+
+      // 生成 ZIP 文件
+      const zipBlob = await zip.generateAsync({ type: "blob" });
+
+      // 创建 FormData 对象
+     /* const formData = new FormData();
+      formData.append("file", zipBlob, folderName + ".zip");*/
+      let formData = new FormData()
+      formData.append('fileName', folderName + ".zip")
+
+      // 计算 shardCount
+      const _shardCount = Math.ceil(zipBlob.size / this.partSize);
+      const fileObj = {
+        _shardCount,
+        size: zipBlob.size,
+        file: zipBlob              // 将 zipBlob 添加到 fileObj 中
+      };
+      self.$set(fileObj.file, '_shardCount', _shardCount);
+      self.$set(fileObj.file, 'uploaded', 0);
+      self.$set(fileObj.file, 'name', folderName + ".zip");
+      self.fileList.push(fileObj.file)
+
+      if (zipBlob.size < this.partSize) {
+        let formDataSign = new FormData()
+        formDataSign.append("file", zipBlob, folderName + ".zip")
+        self.progressFlag = true;
+        axios({
+          url: self.uploadUrl,
+          method: 'post',
+          data: formDataSign,
+          headers: {
+            'Authorization': 'Bearer ' + getToken(),
+            'Content-Type': 'multipart/form-data'
+          },
+          onUploadProgress: progressEvent => {
+            // progressEvent.loaded:已上传文件大小
+            // progressEvent.total:被上传文件的总大小
+            //进度条
+            self.progressPercent = ((progressEvent.loaded / progressEvent.total) * 100) | 0;
+          }
+        }).then(res => {
+          setTimeout(() => {
+            if (res.data.code == 200 && self.progressPercent === 100) {
+              setTimeout(function () {
+                self.$message({
+                  message: '上传成功！',
+                  type: 'success',
+                  duration: '2000'
+                });
+                self.progressFlag = false;
+                self.progressPercent = 0
+                self.handleResult(res,fileObj.file);
+              }, 500);
+            } else {
+              self.$message({
+                message: '上传失败！',
+                type: 'error',
+                duration: '2000'
+              });
+            }
+          }, 1000);
+
+        }).catch(error => {
+          console.error(error)
+          self.progressFlag = false;
+          self.progressPercent = 0
+          self.$refs.upload.clearFiles();
+          self.$message({
+            message: '上传失败！',
+            type: 'error',
+            duration: '2000'
+          });
+        })
+      } else {
+        // 初始化上传，获取 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(function (res) {
+          if (res.status === 200) {
+            self.$set(fileObj.file, 'uploadId', res.data.uploadId);
+            self.$set(fileObj.file, 'chunkId', 0);
+            self.$set(fileObj.file, 'objectKey', res.data);
+
+            /*//从第0块开始上传
+            fileObj.uploadId = res.data.uploadId;
+            fileObj.chunkId = 0;
+            fileObj.objectKey = res.data*/
+            self.uploadByChunk(fileObj.file);
+          } else {
+            self.progress--;
+            self.$message.error(res.msg);
+          }
+        }).catch(error => {
+          self.progressPercent = 0;
+          self.progressFlag = false;
+          console.error(error);
+        });
+      }
+    },
   }
 };
 </script>
-<style>
-#myButton {
-  width: 90px; /* 设置按钮长度为200像素 */
-}
-.container {
-  display: flex; /* 设定为flex布局 */
-}
-</style>
-

src/views/tool/index.vue

@@ -107,6 +107,15 @@
               <dict-tag :options="dict.type.tool_status" :value="scope.row.status"/>
             </template>
           </el-table-column>
+
+          <el-table-column label="关联工具" align="center" :show-overflow-tooltip="true">
+            <template slot-scope="scope">
+              <span v-if="handleRelationTool(scope.row.relationToolList)">
+                  <el-link target="_blank" v-for="assItem in scope.row.relationToolList" :key="assItem.id" @click="handleToolDetail(assItem)">{{assItem.toolName}}</el-link>
+              </span>
+            </template>
+          </el-table-column>
+
           <el-table-column label="创建时间" align="center" prop="createTime" v-if="columns[6].visible" width="160">
             <template slot-scope="scope">
               <span>{{ parseTime(scope.row.createTime) }}</span>
@@ -362,6 +371,12 @@ export default {
       this.loading = true;
       listTool(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
           this.toolList = response.rows;
+          for(let itemData of this.toolList){
+            this.$set(itemData, "relationToolList", [])
+            if(itemData.association != null && itemData.association != '' && itemData.association != undefined){
+              itemData.relationToolList = JSON.parse(itemData.association)
+            }
+          }
           this.total = response.total;
           this.loading = false;
         }
@@ -575,7 +590,26 @@ export default {
       this.$nextTick(() => {
         this.$refs.downloadFileDetailRef = null; // 清空引用
       });
+    },
+    /** 详情 **/
+    handleToolDetail(row){
+      this.detailDrawerOpen = true
+      this.detailOpen = true
+      let data = {
+        "toolId": row.toolId
       }
+      this.toolDetail = data
+    },
+    /** association **/
+    handleRelationTool(value){
+      if(value == null || value == '' || value == undefined){
+        return false
+      }
+      if(value.length > 0){
+        return true
+      }
+    }
+
   }
 };
 </script>

src/views/tool/toolDetail.vue

@@ -1,26 +1,28 @@
 <template>
   <div class="fbox1">
-    <div class="fl">
+    <div class="fl" v-loading="detailLoading">
       <el-tabs v-model="detailActiveName">
         <el-tab-pane label="基本信息" name="first">
           <div class="el-form-border">
             <el-form ref="form" label-width="150px">
               <el-row>
-                <el-col :span="12"> <el-form-item label="工具名称">{{toolDetail.toolName}}</el-form-item> </el-col>
-                <el-col :span="12"> <el-form-item label="工具类别"><dict-tag :options="dict.type.tool_type" :value="toolDetail.toolType"/></el-form-item> </el-col>
-                <el-col :span="12"> <el-form-item label="工具来源"><dict-tag :options="dict.type.tool_source" :value="toolDetail.toolSource"/></el-form-item> </el-col>
-                <el-col :span="12"> <el-form-item label="负责人">{{toolDetail.toolPrincipalsName}}</el-form-item> </el-col>
-                <el-col :span="12"> <el-form-item label="归属单位">{{toolDetail.toolRespDeptName}}</el-form-item> </el-col>
-                <el-col :span="12"> <el-form-item label="状态"><dict-tag :options="dict.type.tool_status" :value="toolDetail.status"/></el-form-item> </el-col>
-                <el-col :span="12"> <el-form-item label="工具用途">{{toolDetail.toolUse}}</el-form-item> </el-col>
-                <el-col :span="12"> <el-form-item label="测评情况">{{toolDetail.testSituation}}</el-form-item> </el-col>
-                <el-col :span="12"> <el-form-item label="功能描述">{{toolDetail.functionDesc}}</el-form-item> </el-col>
-                <el-col :span="12"> <el-form-item label="适用条件">{{toolDetail.applyCondition}}</el-form-item> </el-col>
-                <el-col :span="12"> <el-form-item label="操作说明">{{toolDetail.operateExplain}}</el-form-item> </el-col>
-                <el-col :span="12"> <el-form-item label="备注">{{toolDetail.remark}}</el-form-item> </el-col>
+                <el-col :span="12"> <el-form-item label="工具名称">{{detailData.toolName}}</el-form-item> </el-col>
+                <el-col :span="12"> <el-form-item label="工具类别"><dict-tag :options="dict.type.tool_type" :value="detailData.toolType"/></el-form-item> </el-col>
+                <el-col :span="12"> <el-form-item label="工具来源"><dict-tag :options="dict.type.tool_source" :value="detailData.toolSource"/></el-form-item> </el-col>
+                <el-col :span="12"> <el-form-item label="负责人">{{detailData.toolPrincipalsName}}</el-form-item> </el-col>
+                <el-col :span="12"> <el-form-item label="归属单位">{{detailData.toolRespDeptName}}</el-form-item> </el-col>
+                <el-col :span="12"> <el-form-item label="状态"><dict-tag :options="dict.type.tool_status" :value="detailData.status"/></el-form-item> </el-col>
+                <el-col :span="12"> <el-form-item label="工具用途">{{detailData.toolUse}}</el-form-item> </el-col>
+                <el-col :span="12"> <el-form-item label="测评情况">{{detailData.testSituation}}</el-form-item> </el-col>
+                <el-col :span="12"> <el-form-item label="功能描述">{{detailData.functionDesc}}</el-form-item> </el-col>
+                <el-col :span="12"> <el-form-item label="适用条件">{{detailData.applyCondition}}</el-form-item> </el-col>
+                <el-col :span="12"> <el-form-item label="操作说明">{{detailData.operateExplain}}</el-form-item> </el-col>
+                <el-col :span="12"> <el-form-item label="备注">{{detailData.remark}}</el-form-item> </el-col>
                 <el-col :span="24">
                   <el-form-item label="关联工具">
-                     <el-tag :key="tag.toolId" v-for="tag in JSON.parse(toolDetail.association)" type="info" style="margin-right: 5px">{{tag.toolName}}</el-tag>
+                    <span v-if="detailData.association != null && detailData.association != '' && detailData.association != undefined">
+                     <el-tag :key="tag.toolId" v-for="tag in JSON.parse(detailData.association)" type="info" style="margin-right: 5px">{{tag.toolName}}</el-tag>
+                    </span>
                   </el-form-item>
                 </el-col>
               </el-row>
@@ -47,7 +49,7 @@
                 <span>{{ parseTime(scope.row.createTime) }}</span>
               </template>
             </el-table-column>
-            <el-table-column label="操作" align="center" width="180" v-if="toolDetail.downloadStatus">
+            <el-table-column label="操作" align="center" width="180" v-if="detailData.downloadStatus">
               <template slot-scope="scope">
                 <el-button
                   size="mini"
@@ -119,7 +121,7 @@
     </el-dialog>
 
     <!-- 上传 -->
-    <AddDoc :show.sync="open" :toolId="toolDetail.toolId" @callback="getDocList"/>
+    <AddDoc :show.sync="open" :toolId="detailData.toolId" @callback="getDocList"/>
   </div><!--fbox1 左右分栏-->
 </template>
 
@@ -127,6 +129,7 @@
   import { listDocument, getDocument, delDocument, addDocument, updateDocument } from "@/api/document/document";
   import { listDiscussions, addDiscussions } from "@/api/tool/discussions.js";
   import { listReplies, addReplies} from "@/api/tool/replies.js";
+  import { getTool } from "@/api/tool/tool.js";
 
   import AddDoc from './AddDoc'
   import editDocument from "../document/editDocument";
@@ -141,6 +144,7 @@
       toolDetail: {
         type: Object,
         default: {},
+        required: false
       }
     },
     data(){
@@ -166,9 +170,13 @@
         repliesList: [],
         showReplyForm: [],
         replyContent: [],
+        detailLoading: false,
+        //详细数据
+        detailData:{}
       }
     },
     created(){
+      this.getDetail()
       this.getDocList()
       this.getDiscussionsList()
     },
@@ -370,6 +378,21 @@
       },
       handleBeforeClose() {
         this.viewDialogOpen = false
+      },
+      /** 获取详情信息 **/
+      getDetail(){
+        let self = this
+        console.info("self.toolDetail==========", self.toolDetail)
+        self.detailLoading = true
+        getTool(self.toolDetail.toolId).then((res) => {
+          self.detailData = res.data
+          console.info("res========", res)
+          /*let formData = res.data;
+          formData.type = _this.form.type
+          _this.form = formData*/
+        }).finally(()=>{
+          self.detailLoading = false
+        });
       }
     }
   }