电子档案上传

src/views/material/archives/index.vue

@@ -89,16 +89,16 @@
 
         <el-row :gutter="16" style="margin-bottom: 20px;"> 
           <el-col :span="2">
-            <el-button type="warning" plain icon="el-icon-download" size="mini" @click="">上传</el-button>
+            <el-button type="primary" plain icon="el-icon-upload" size="mini" @click="openUpLoadDialog">上传</el-button>
           </el-col> 
           <el-col :span="2">
             <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport">下载</el-button>
           </el-col> 
           <el-col :span="2">
-            <el-button type="warning" plain icon="el-icon-download" :disabled="single" size="mini" @click="handleReName">重命名</el-button>
+            <el-button type="success" plain icon="el-icon-download" :disabled="single" size="mini" @click="handleReName">重命名</el-button>
           </el-col> 
           <el-col :span="2">
-            <el-button type="warning" plain icon="el-icon-download" :disabled="multiple" size="mini" @click="handleAllDel">删除</el-button>
+            <el-button type="danger" plain icon="el-icon-download" :disabled="multiple" size="mini" @click="handleAllDel">删除</el-button>
           </el-col> 
           <el-col :span="4" style="float: right;">
             <el-button type="primary" plain icon="el-icon-plus" size="mini"  @click="handleAdd">新建文件夹</el-button>
@@ -124,7 +124,7 @@
               <span @click="getSubDetails(scope.row)" style="cursor: pointer;margin-left: 20px;">{{ scope.row.docName }}</span>
             </template>
           </el-table-column>
-          <el-table-column label="" align="center" width="300">
+          <el-table-column label="" align="center" width="200">
             <template slot-scope="scope">
               <el-button size="mini" type="text" icon="el-icon-edit" @click="handleView(scope.row)">
                 查看
@@ -138,8 +138,13 @@
             </template>
           </el-table-column>
           <el-table-column label="类 型 " align="center" prop="docType" show-overflow-tooltip/>
+          <el-table-column label="文件大小" align="center" prop="docSize" show-overflow-tooltip>
+            <template slot-scope="scope">  
+              <span v-if="scope.row.docSize">{{ scope.row.docSize }}MB</span>
+            </template>
+          </el-table-column>
           <el-table-column label="年 度" align="center" prop="year" show-overflow-tooltip/>
-          <el-table-column label="修改时间 " align="center" prop="updateTime" show-overflow-tooltip/>
+          <el-table-column label="修改时间 " align="center" prop="updateTime" show-overflow-tooltip width="180"/>
           <el-table-column label="上传人员 " align="center" prop="createBy" show-overflow-tooltip/> 
           
         </el-table>
@@ -153,12 +158,29 @@
         />
       </el-col>
     </el-row>
- 
 
+
+    <!-- 上传弹窗 -->
+    <el-dialog :title="upload.title" :visible.sync="upload.open" width="600px" append-to-body>
+      <el-upload ref="upload" :limit="20" :headers="upload.headers" :multiple="true" drag 
+                 :action="upload.url" style="width: 100%;" :file-list="fileList"
+                 :on-success="handleSuccess" :on-error="handleError" :on-remove="handleFileRemove"
+      >
+        <i class="el-icon-upload"></i>
+        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+        <div class="el-upload__tip text-center" slot="tip">  
+          <span>按住Ctrl可同时多选，支持上传rar/zip格式文件，单个文件不能超过5M</span> 
+        </div>
+      </el-upload>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitFileForm">上 传</el-button>
+        <el-button @click="cancelUpload">取 消</el-button>
+      </div>
+    </el-dialog>
+    <!-- 图片查看 -->
     <el-dialog :visible.sync="dialogVisible">
       <img width="100%" height="650px" :src="dialogImageUrl" alt />
-    </el-dialog>
+    </el-dialog> 
-
     <!-- 新增弹框(新建弹窗) -->
     <el-dialog :title="addTitle" :visible.sync="addShowVisible" v-if="addShowVisible" width="500px" append-to-body :close-on-click-modal="false">
       <el-form label-width="80px" :model="addFormParams" :rules="addFormParamsRules" ref="addFormParamsRef">
@@ -209,6 +231,7 @@
         </el-row>
       </el-form>
     </el-dialog>
+    
   </div>
 </template>
 
@@ -219,9 +242,8 @@ import {
   getArchivesTypeListApi,getAddArchivesTypeApi,updateArchivesTypeApi,delArchivesTypeApi,
   getArchivesDetailsLstApi, addArchivesDetailsApi, updateArchivesDetailsApi, delArchivesDetailsApi
 } from "@/api/archives/archives"; 
-import { imgUpLoad } from "@/api/system/upload";
+import { imgUpLoad, fileUpLoad } from "@/api/system/upload"; 
-
+import { getToken } from '@/utils/auth'
-
 export default {
   name: "ToolsType",
   components: { Treeselect },
@@ -318,7 +340,19 @@ export default {
           },
         ],
       },
-
+      fileList:[],
+      uploadList:[],
+      // 上传参数
+      upload: {
+        // 是否显示弹出层（上传导入）
+        open: false,
+        // 弹出层标题（上传导入）
+        title: '上传文件', 
+        // 设置上传的请求头部
+        headers: { Authorization: 'Bearer ' + getToken() },
+        // 上传的地址
+        url: process.env.VUE_APP_BASE_API + '/file/upload'
+      },
 
     };
   },
@@ -341,6 +375,7 @@ export default {
             if(this.treeOptions[0].children&&this.treeOptions[0].children.length > 0) {
               const firstNode = this.treeOptions[0].children[0];
               this.queryParams.infoId = firstNode.id;
+              console.log(firstNode)
               let obj = {
                 id:0,
                 infoId:firstNode.id,
@@ -507,7 +542,7 @@ export default {
       if(row.docType=='文件夹'){
         this.queryParams.detailsId=row.detailsId;
         this.queryParams.level=row.level;
-        this.queryParams.infoId="";
+        this.queryParams.infoId=this.queryParams.infoId;
         this.queryParams.pageNum = 1;
         let obj = {
           id:row.detailsId,
@@ -546,7 +581,7 @@ export default {
       if(item.detailsId!=''){
         this.queryParams.detailsId=item.detailsId;
         this.queryParams.level=item.level;
-        this.queryParams.infoId="";
+        this.queryParams.infoId=item.infoId;
         this.queryParams.pageNum = 1;
         this.$set(this, 'breadcrumbList', this.breadcrumbList.slice(0,index+1)); 
         this.getList()
@@ -585,17 +620,7 @@ export default {
       this.ids = selection.map((item) => item);
       this.single = selection.length != 1;
       this.multiple = !selection.length;
-    }, 
+    },   
-    // 取消按钮
-    cancel() {
-      this.open = false;
-      this.reset();
-    },
-    // 表单重置
-    reset() {
-      this.form = { parentId: ""};
-      this.resetForm("form");
-    }, 
     //查看
     handleView(row) {
       console.log(row) 
@@ -663,6 +688,62 @@ export default {
         })
         .catch(() => {});
     },
+    //打开文件上传
+    openUpLoadDialog(){
+      this.uploadList=[]
+      this.upload.open=true; 
+    },
+    handleSuccess(response, file, fileList) {
+      console.log('File uploaded successfully:', response);
+      console.log('File uploaded successfully:', file);
+      if(response.code==200){ 
+        let param = {
+          docName:response.data.name,
+          docUrl:response.data.url,
+          docType:response.data.name.split(".")[1],
+          docSize:(file.size / 1024 / 1024).toFixed(2),
+          detailsId:this.queryParams.detailsId,
+          infoId:this.queryParams.infoId
+        }
+        this.uploadList.push(param)
+      } 
+      // let size = (file.size / 1024 / 1024).toFixed(2)
+      // console.log(size)
+    },
+    handleFileRemove(file, fileList){ 
+      console.log(file)
+      console.log(fileList)
+      let index = this.uploadList.findIndex(item=>item.docName==file.name)
+      this.uploadList.splice(index,1)
+    },
+    handleError(err, file, fileList) {
+      console.error('Error while uploading file:', err);
+    },
+    // 文件上传成功处理
+    handleFileSuccess(response, file, fileList) {
+    //   this.upload.open = false 
+    },
+    // 提交上传文件
+    async submitFileForm() { 
+      console.log(this.uploadList)
+      let param = {
+        archivesDetailsList:this.uploadList
+      }
+      const res = await addArchivesDetailsApi(param);
+      if (res.code === 200) {
+        this.$message.success("上传成功！");
+        this.upload.open = false 
+        this.getList()
+      }
+      // this.$refs.upload.submit() 
+    },
+    cancelUpload() {
+      this.getList()
+      this.upload.open=false
+    },
+
+
+
     /** 导出按钮作 */
     handleExport() {
       // let queryTemp = this.queryParams;
@@ -808,5 +889,13 @@ export default {
       color: #c0c4cc;
     }
   }
+} 
+
+
+::v-deep .el-upload{
+    width: 100%; 
+}
+::v-deep .el-upload-dragger{
+    width: 100%; 
 }
 </style>