电子档案下载

src/api/archives/archives.js

@@ -72,8 +72,8 @@ export function delArchivesDetailsApi(data) {
 export function downloadFileApi(data) {
   return request({
       url: '/material/archives/download',
-      method: 'post',
+      method: 'get',
-      data: data,
+      params: data,
-      // responseType: 'blob'
+      responseType: 'blob'
   })
 }

src/views/material/archives/index.vue

@@ -87,7 +87,7 @@
           </el-form-item>
         </el-form> -->
 
-        <el-row :gutter="16" style="margin-bottom: 20px;">
+        <el-row :gutter="14" style="margin-bottom: 20px;">
           <el-col :span="2">
             <el-button type="primary" plain icon="el-icon-upload" size="mini" @click="openUpLoadDialog">上传</el-button>
           </el-col> 
@@ -99,19 +99,30 @@
           </el-col> 
           <el-col :span="2">
             <el-button type="danger" plain icon="el-icon-download" :disabled="multiple" size="mini" @click="handleAllDel">删除</el-button>
-          </el-col> 
+          </el-col>
+
+          <el-col :span="4" style="float: right;display: flex;">
+            <div style="display: flex;align-items: center;height: 32px;margin-right: 10px;" @click="changeShowType(1)">
+              <img src="../../../assets/img/list1.png" v-if="showType==1" style="width: 18px;height: 18px;" alt="">
+              <img src="../../../assets/img/list2.png" v-else style="width: 18px;height: 18px;" alt="">
+            </div> 
+            <div style="display: flex;align-items: center;height: 32px;" @click="changeShowType(2)">
+              <img src="../../../assets/img/grid1.png" v-if="showType==2" style="width: 18px;height: 18px;" alt="">
+              <img src="../../../assets/img/grid2.png" v-else style="width: 18px;height: 18px;" alt="">
+            </div> 
+          </el-col>
           <el-col :span="4" style="float: right;">
             <el-button type="primary" plain icon="el-icon-plus" size="mini"  @click="handleAdd">新建文件夹</el-button>
-          </el-col>
+          </el-col> 
         </el-row>
         <el-row :gutter="10" style="margin-bottom: 20px;">
           <el-breadcrumb separator-class="el-icon-arrow-right">
-            <el-breadcrumb-item v-for="(item,index) in breadcrumbList" :key="item.id">
+            <el-breadcrumb-item v-for="(item,index) in breadcrumbList" :key="item.id" style="margin-bottom: 5px;">
               <span @click="breadClick(item,index)" style="cursor: pointer;">{{item.docName}}</span>
             </el-breadcrumb-item>
           </el-breadcrumb>
         </el-row>
-        <el-table v-loading="loading" :data="tableDataList"  @selection-change="handleSelectionChange" row-key="detailsId">
+        <el-table v-loading="loading" v-if="showType==1" :data="tableDataList"  @selection-change="handleSelectionChange" row-key="detailsId">
           <el-table-column type="selection" width="55" align="center"/>
           <el-table-column label="序号" align="center" width="80" type="index">
                 <template slot-scope="scope">
@@ -145,10 +156,20 @@
           </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 width="180"/>
-          <el-table-column label="上传人员 " align="center" prop="createBy" show-overflow-tooltip/> 
+          <el-table-column label="上传人员 " align="center" prop="createBy" show-overflow-tooltip/>
-          
         </el-table>
 
+        
+        <div style="width: 100%;height: 300px;display: flex;" v-if="showType==2">
+          <div style="width: 140px;height: 140px;display: flex;flex-direction: column;align-items: center;margin: 10px;" v-for="item in tableDataList" :key="item.detailsId" @click="getSubDetails(item)">
+            <img src="../../../assets/img/fileIcon1.png" v-if="item.docType=='文件夹'" style="width: 60px;height: 60px;">
+            <img src="../../../assets/img/fileIcon3.png" v-else style="width: 50px;height: 50px;">
+            <div style="font-size: 12px;margin-top: 10px;">
+              {{ item.docName }}
+            </div>
+          </div>
+        </div>
+
         <pagination
           v-show="total > 0"
           :total="total"
@@ -354,6 +375,7 @@ export default {
         // 上传的地址
         url: process.env.VUE_APP_BASE_API + '/file/upload'
       },
+      showType:1
 
     };
   },
@@ -755,7 +777,7 @@ export default {
       this.ids.forEach(item=>{
         arr.push(item.detailsId)
       })
-      downloadFileApi({'detailsIdList':arr}).then((res) => {
+      downloadFileApi({'ids':arr.join(',')}).then((res) => {
         downloadFile({
           fileName: "文件档案下载.zip",
           fileData: res,
@@ -764,7 +786,7 @@ export default {
       });  
       // this.download(
       //   "/material/archives/download",
-      //   {'detailsIdList':arr},
+      //   {'ids':arr.join(',')},
       //   `文件档案下载_${new Date().getTime()}.zip`
       // );
 
@@ -773,6 +795,11 @@ export default {
 
     },
 
+    changeShowType(val){
+      this.showType=val;
+
+    }
+
 
   },
 };