首页模块的最近收到的文件模块和最近发送的文件模块完成

src/api/doc/share1.js

@@ -0,0 +1,62 @@
+import request from '@/utils/request'
+
+// 查询文档分享列表
+export function listShare(query) {
+  return request({
+    url: '/doc/share/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询文档分享详细
+export function getShare(docId) {
+  return request({
+    url: '/doc/share/' + docId,
+    method: 'get'
+  })
+}
+
+// 新增文档分享
+export function addShare(data) {
+  return request({
+    url: '/doc/share',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改文档分享
+export function updateShare(data) {
+  return request({
+    url: '/doc/share',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除文档分享
+export function delShare(docId) {
+  return request({
+    url: '/doc/share/' + docId,
+    method: 'delete'
+  })
+}
+
+
+// 首页最近收到的文件
+export function delShare1(query) {
+  return request({
+    url: '/doc/share/receive',
+    method: 'get',
+    params: query
+  })
+}
+// 首页最近发送的文件
+export function delShare2(query) {
+  return request({
+    url: '/doc/share/send',
+    method: 'get',
+    params: query
+  })
+}

src/views1/Page/PageView.vue

@@ -158,69 +158,189 @@
           <h3>最近收到的文件</h3>
         </div>
         <el-table
-          :data="tableData"
+          :data="tableData1"
           stripe
           style="width: 99%"
           class="left-main"
           height="calc(100vh * (230 / 1080))"
         >
-          <el-table-column prop="name" label="文件名" width="220">
+          <el-table-column prop="docName" label="文件名" width="250">
           </el-table-column>
-          <el-table-column prop="date" label="收到时间" width="180">
+          <el-table-column prop="createTime" label="收到时间" width="220">
           </el-table-column>
-          <el-table-column prop="address" label="文件类型" width="120"> 
-          </el-table-column>
-          <el-table-column prop="addrecc" label="文件位置"> 
+          <el-table-column prop="docType" label="文件类型" width="150"> 
           </el-table-column>
+          <el-table-column
+                label="操作"
+                align="center"
+                class-name="small-padding fixed-width"
+              >
+                <template slot-scope="scope">
+                  <el-button
+                    size="mini"
+                    type="text"
+                    icon="el-icon-view"
+                    @click="handlePreview(scope.row)"
+                    >预览</el-button
+                  >
+                </template>
+              </el-table-column>
         </el-table>
       </div>
       <div class="right">
-        <div class="left-top">
+        <div class="right-top">
           <h3>最近发送的文件</h3>
+          <el-table
+          :data="tableData2"
+          stripe
+          style="width: 99%"
+          class="right-main"
+          height="calc(100vh * (230 / 1080))"
+        >
+          <el-table-column prop="docName" label="文件名" width="250">
+          </el-table-column>
+          <el-table-column prop="createTime" label="收到时间" width="220">
+          </el-table-column>
+          <el-table-column prop="docType" label="文件类型" width="150"> 
+          </el-table-column>
+          <el-table-column
+                label="操作"
+                align="center"
+                class-name="small-padding fixed-width"
+              >
+                <template slot-scope="scope">
+                  <el-button
+                    size="mini"
+                    type="text"
+                    icon="el-icon-view"
+                    @click="handlePreview(scope.row)"
+                    >预览</el-button
+                  >
+                </template>
+              </el-table-column>
+        </el-table>
         </div>
       </div>
+      
     </div>
+      <!-- 预览对话框 -->
+      <div class="dhk" v-if="a">
+       <video :src="vid" controls v-if="vid1"></video>
+       <audio :src="aud" controls v-if="aud1"></audio>
+
+       <div class="image-container" v-if="img1">
+        <el-image :src="imgg" ref="imageRef" style="max-width: 100%"/>
+        <el-button-group>
+      <el-button icon="el-icon-refresh" @click="rotate(-90)"></el-button>
+      <el-button icon="el-icon-refresh-right" @click="rotate(90)"></el-button>
+      <el-button icon="el-icon-zoom-in" @click="scale(0.1)"></el-button>
+      <el-button icon="el-icon-zoom-out" @click="scale(-0.1)"></el-button>
+    </el-button-group>
+  </div>
+        <el-button class="gb" icon="el-icon-close" circle @click="gb" />
+      </div>
   </div>
 </template>
 
 <script>
+import { delShare1,delShare2 } from "@/api/doc/share1";
 export default {
   data() {
     return {
       //底部左边表格数据
-      tableData: [
-        {
-          name: "重点人员名单",
-          date: "2016-05-01",
-          address: "DOX",
-          addrecc: "http://sdafafafgagag",
-        },
-        {
-          name: "重点人员名单",
-          date: "2016-05-01",
-          address: "DOX",
-          addrecc: "http://sdafafafgagag",
-        },
-        {
-          name: "重点人员名单",
-          date: "2016-05-01",
-          address: "DOX",
-          addrecc: "http://sdafafafgagag",
-        },
-        {
-          name: "重点人员名单",
-          date: "2016-05-01",
-          address: "DOX",
-          addrecc: "http://sdafafafgagag",
-        },
-      ],
+      tableData1: [],
+      //底部右边表格数据
+      tableData2: [],
+         //预览图片的旋转缩放
+         scalePercentage: 1,
+      rotationAngle: 0,
+    
+    // 预览界面
+    a:false,
+    
+    //视频路径和显示
+    vid:"",
+    vid1:false,
+    //音频路径和显示
+    aud:"",
+    aud1:false,
+    //图片路径和显示
+    imgg:"",
+    img1:false,
     };
   },
   methods:{
+    //底部表格数据
+    getList() {
+      delShare1(this.queryParams).then(response => {
+        // console.log(response.rows,'111111111');
+        this.tableData1 = response.rows; // 给定义的列表空数组赋值
+      });
+      delShare2(this.queryParams).then(response => {
+        // console.log(response.rows,'111111111');
+        this.tableData2 = response.rows; // 给定义的列表空数组赋值
+      });
+    },
+      //预览图片的缩放
+      rotate(angle) {
+      this.rotationAngle += angle;
+      const image = this.$refs.imageRef.$el.querySelector("img");
+      image.style.transform = `rotate(${this.rotationAngle}deg)`;
+    },
+      //预览图片的旋转
+    scale(delta) {
+      this.scalePercentage += delta;
+      const image = this.$refs.imageRef.$el.querySelector("img");
+      image.style.transform = `scale(${this.scalePercentage})`;
+    },
+
+    // 预览关闭
+    gb(){
+    this.a=false;
+    },
 
- },
 
+     //预览
+     handlePreview(row) {
+     //图片后缀名
+      var pictures= ['jpeg','tiff','raw','bmp','gif','png' , 'jpg'];
+      //音频后缀名
+      var audios=['mid', 'mp3', 'wav', 'wma', 'ra', 'ogg', 'flac', 'aac', 'ape'];
+      //视频后缀名
+      var videos= ['asf', 'avi', 'mp4', 'ogm', 'ifo', 'mpg', 'mov', 'mpeg', 'mpg', 'vob', 'wmv', 'rm' , 'rmvb'];
+
+      //判断后缀名
+      if(videos.some(item=>item==row.docType)){
+        this.a=true;
+        this.vid1=true;
+        this.aud1=false;
+        this.img1=false;
+        this.vid=row.docPath;
+      }else if(audios.some(item=>item==row.docType)){
+        this.a=true;
+        this.aud1=true;
+        this.vid1=false;
+        this.img1=false;
+        this.aud=row.docPath;
+      }else if(pictures.some(item=>item==row.docType)){
+        this.a=true;
+        this.aud1=false;
+        this.vid1=false;
+        this.img1=true;
+        this.imgg=row.docPath;
+      }
+      else{
+        this.$tab.openPage(
+        window.open("/individual/Pre/user/" + row.docId, '_blank'),
+        localStorage.setItem("docName",row.docName)
+      );
+      }
 
+    },
+ },
+ mounted(){
+  this.getList()
+ },
 };
 </script>
 
@@ -479,15 +599,14 @@ export default {
     padding-right: calc(100vw * (34 / 1920));
     display: flex;
     justify-content: space-between;
-    .left,
-    .right {
+    .left{
       width: calc(100vw * (920 / 1920));
       height: calc(100vh * (304 / 1080));
       background: url(../../assets/img/footer.png);
       background-size: calc(100vw * (920 / 1920)) calc(100vh * (304 / 1080));
       padding-left: 10px;
       .left-top {
-        width: calc(100vw * (760 / 1920));
+        width: calc(100vw * (880 / 1920));
         height: calc(100vh * (40 / 1080));
         font-size: 16px;
         font-weight: 400;
@@ -524,6 +643,82 @@ export default {
           background: #2e8aec;
         }
     }
+    .right {
+      width: calc(100vw * (920 / 1920));
+      height: calc(100vh * (304 / 1080));
+      background: url(../../assets/img/footer.png);
+      background-size: calc(100vw * (920 / 1920)) calc(100vh * (304 / 1080));
+      padding-left: 10px;
+      .right-top {
+        width: calc(100vw * (900 / 1920));
+        height: calc(100vh * (40 / 1080));
+        font-size: 16px;
+        font-weight: 400;
+        color: #ffffff;
+        margin-top: 10px;
+        background: url(../../assets/img/main_left_decorate.png);
+        background-size: cover;
+        h3 {
+          padding-top: 3px;
+          padding-left: 10px;
+          margin: 0;
+        }
+      }
+      .right-main {
+        margin-top: calc(100vh * (13 / 1080));
+        color: #7EA4C8FF;
+        background: transparent;
+        height: calc(100vh * (230 / 1080));
+        overflow: auto;
+        font-size: 0.14rem;
+      }
+       //滚动条样式
+       ::-webkit-scrollbar {
+          width: 3.5px;
+        }
+        ::-webkit-scrollbar-track {
+          background-color: rgba(0, 0, 0, 0);
+        }
+        ::-webkit-scrollbar-thumb {
+          background: #2e8aec;
+          border-radius: 3px;
+        }
+        ::-webkit-scrollbar-thumb:hover {
+          background: #2e8aec;
+        } 
+    }
+    
+  }
+  .dhk{
+    width: calc(100vw * (1500 / 1920));
+    height: calc(100vh * (850 / 1080));
+    // background: salmon;
+    background: #0F1540FF;
+    position: absolute;
+    top: 10%;
+    left: 10%;
+    z-index: 99;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    .gb{
+    position: absolute;
+    top: 0;
+    right: 0; 
+    }
+    video{
+     width: calc(100vw * (1440 / 1920));
+     height: calc(100vh * (810 / 1080)); 
+    }
+    .el-image{
+     width: calc(100vw * (960 / 1920));
+     height: calc(100vh * (720 / 1080)); 
+    }
+     .el-button-group {
+      position: absolute;
+      top: 10%;
+      right: 1%;
+    }
   }
 }
 ::v-deep .el-icon-arrow-down:before {