update disk module

src/api/disk.js

@@ -9,7 +9,8 @@ const diskApi = {
   moveDiskFileApi: '/api/disk/file/move',
   getFileUrlApi: '/api/disk/file/url',
   getFileDetailApi: '/api/disk/file/detail',
-  getFileListApi: '/api/disk/list'
+  getFileListApi: '/api/disk/list',
+  ossServerApi: '/api/disk/oss/serverinfo',
 }
 
 export function getFolderTree() {
@@ -47,3 +48,7 @@ export function getFileDetail(fileId) {
 export function getImageList(searchForm) {
   return get(diskApi.getImageList, searchForm)
 }
+
+export function getServerInfo(channelId) {
+  return post(diskApi.ossServerApi + '?channelId=' + channelId)
+}

src/components/VideoPreview.vue

@@ -0,0 +1,82 @@
+<template>
+  <div :id="videoProp.videoId" :ref="videoProp.videoId" style="height: 240px;" />
+</template>
+
+<script>
+import flvjs from 'flv.js'
+import DPlayer from 'dplayer'
+
+export default {
+  name: 'VideoPreview',
+  props: {
+    videoProp: {
+      type: Object,
+      default: () => null
+    }
+  },
+  data() {
+    return {
+      flvjs,
+      DPlayer,
+      dplayer: null
+    }
+  },
+  created() {
+  },
+  mounted() {
+    this.dplayer = new DPlayer({
+      container: document.getElementById(this.videoProp.videoId),
+      lang: 'zh-cn',
+      screenshot: false,
+      autoplay: false,
+      volume: 0.1,
+      mutex: true,
+      video: {
+        url: this.videoProp.url
+      }
+    })
+  },
+  destroyed() {
+    this.dplayer.destroy()
+  },
+  methods: {
+    initMp4Player(coverUrl, videoUrls) {
+      return new DPlayer({
+        container: document.querySelector('#dplayer'),
+        lang: 'zh-cn',
+        screenshot: false,
+        autoplay: true,
+        volume: 0.1,
+        mutex: true,
+        video: {
+          pic: coverUrl,
+          defaultQuality: 0,
+          quality: videoUrls
+        }
+      })
+    },
+    initFlvPlayer(coverUrl, videoUrl) {
+      return new DPlayer({
+        container: document.getElementById('dplayer'),
+        video: {
+          url: videoUrl,
+          type: 'customFlv',
+          customType: {
+            customFlv: function(video, player) {
+              const flvPlayer = flvjs.createPlayer({
+                type: 'flv',
+                url: video.src
+              })
+              flvPlayer.attachMediaElement(video)
+              flvPlayer.load()
+            }
+          }
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style>
+</style>

src/router/index.js

@@ -88,7 +88,7 @@ const Disk = () => import('views/disk/Disk')
 const DiskOverview = () => import('views/disk/DiskOverview')
 const FileList = () => import('views/disk/FileList')
 const UploadFile = () => import('views/disk/UploadFile')
-const FileShare = () => import('views/disk/FileShare')
+const FileTrash = () => import('views/disk/FileTrash')
 const FileImage = () => import('views/disk/FileImage')
 const FileVideo = () => import('views/disk/FileVideo')
 const FileAudio = () => import('views/disk/FileAudio')
@@ -428,9 +428,9 @@ const routes = [
         meta: { needAuth: true }
       },
       {
-        path: '/disk/share',
-        name: '分享',
-        component: FileShare,
+        path: '/disk/trash',
+        name: 'Trash',
+        component: FileTrash,
         meta: { needAuth: true }
       }
     ]

src/views/disk/Disk.vue

@@ -63,9 +63,9 @@
             <i class="el-icon-headset" />
             <span slot="title">文本</span>
           </el-menu-item>
-          <el-menu-item index="/disk/share">
-            <i class="el-icon-share" />
-            <span slot="title">分享</span>
+          <el-menu-item index="/disk/trash">
+            <i class="el-icon-delete" />
+            <span slot="title">回收站</span>
           </el-menu-item>
         </el-menu>
       </el-aside>

src/views/disk/FileImage.vue

@@ -1,23 +1,26 @@
 <template>
   <el-row>
-    <el-col v-for="(item, index) in dataList" :key="index" :md="6" :sm="12" :xs="12">
-      <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
-        <router-link target="_blank" :to="`/image/album/${item.fileId}`">
-          <div class="imgs">
-            <el-image
-              lazy
-              fit="cover"
-              :src="item.url"
-              class="coverImg"
-            />
-          </div>
-        </router-link>
-        <div style="padding: 14px">
-          <router-link target="_blank" :to="`/image/album/${item.fileId}`">
-            <span style="left: 0;margin-bottom: 0px;color: black;">{{ item.filename }}</span>
-          </router-link>
-        </div>
-      </el-row>
+    <el-col :md="24" class="movie-list">
+      <div>
+        <el-col v-for="(item, index) in dataList" :key="index" :md="6" :sm="12" :xs="12" style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
+          <el-card class="box-card">
+            <div slot="header" class="clearfix">
+              <span style="left: 0;margin-bottom: 0px;color: black;">{{ item.filename }}</span>
+            </div>
+            <div class="text item">
+              <div class="imgs">
+                <el-image
+                  lazy
+                  fit="cover"
+                  :src="item.url"
+                  class="coverImg"
+                  @click="showImage(index, item)"
+                />
+              </div>
+            </div>
+          </el-card>
+        </el-col>
+      </div>
     </el-col>
   </el-row>
 </template>
@@ -70,98 +73,55 @@ export default {
           duration: 3000
         })
       })
-    }
+    },
+    showImage(index, item) {
+      const imageUrls = []
+      for (const ele of this.dataList) {
+        imageUrls.push(ele.originalUrl)
+      }
+      //imageUrls.push(item.originalUrl)
+
+      this.$viewerApi({
+        images: imageUrls,
+        options: {
+          initialViewIndex: index,
+          movable: true,
+          fullscreen: false,
+          keyboard: true
+        }
+      })
+    },
   }
 }
 </script>
 
 <style scoped>
-.time {
-  font-size: 15px;
-  color: #999;
-}
-
-.bottom {
-  margin-top: 13px;
-  line-height: 12px;
-}
-
-.tit {
-  font-weight: 700;
-  font-size: 18px;
-
-  height: 50px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: -webkit-box;
-  -webkit-line-clamp: 2; /*行数*/
-  -webkit-box-orient: vertical;
-}
-
-.num {
-  position: relative;
-  font-size: 15px;
-  padding-top: 9px;
-}
-
 /*处于手机屏幕时*/
-@media screen and (max-width: 768px) {
-  .tit {
-    font-weight: 600;
-    font-size: 12px;
-    height: 32px;
-  }
-  .time {
-    font-size: 10px;
-    color: #999;
-  }
-  .num {
-    font-size: 9px;
+@media screen and (max-width: 768px){
+  .movie-list {
     padding-top: 3px;
+    padding-left: 0.5%;
+    padding-right: 0.5%;
   }
-  .bottom {
-    margin-top: 2px;
-    line-height: 7px;
-  }
+
   .coverImg {
     height: 120px !important;
   }
 }
 
+.movie-list {
+  padding-top: 5px;
+  padding-left: 3%;
+  padding-right: 3%;
+}
+
 .coverImg {
   width: 100%;
-  height: 175px;
+  height: 240px;
   display: block;
 }
 
-.clearfix:before,
-.clearfix:after {
-  display: table;
-  content: "";
-}
-
-.clearfix:after {
-  clear: both;
-}
-
-.card {
-  margin-bottom: 20px;
-  transition: all 0.6s; /*所有属性变化在0.6秒内执行动画*/
-}
-
-/*.card:hover {
-  !*鼠标放上之后元素变成1.06倍大小*!
-  transform: scale(1.06);
-}*/
 .imgs {
   position: relative;
 }
-.play-icon {
-  position: absolute;
-  /*top: -15px;*/
-  right: 2%;
-  bottom: 5px;
-  z-index: 7;
-  width: 40px;
-}
 </style>

src/views/disk/FileList.vue

@@ -54,7 +54,6 @@
         <el-table-column
           prop="filename"
           label="文件名"
-          width="400px"
         >
           <template slot-scope="scope">
             <a href="javascript:void(0)" style="text-decoration-line: none" @click="handleFile(scope.row)">
@@ -117,11 +116,11 @@
             >详情</el-button>
             <el-button
               size="mini"
-              @click="cache(scope.row)"
+              @click="share(scope.row)"
             >分享</el-button>
             <el-button
               size="mini"
-              @click="cache(scope.row)"
+              @click="remove(scope.row)"
             >删除</el-button>
           </template>
         </el-table-column>
@@ -168,28 +167,47 @@
     </el-dialog>
     <!--文件预览弹窗-->
     <el-dialog
-      title="预览文件"
       append-to-body
-      :visible.sync="previewFileDialog"
       width="70%"
       center
+      :visible.sync="previewFileDialog"
+      :before-close="handleDialogClose"
+      destroy-on-close
     >
       <div v-if="fileDetail !== null">
-        <div v-if="fileDetail.fileType === 1001">
-          <el-image :src="fileDetail.originalUrl" />
-        </div>
-        <div v-else-if="fileDetail.fileType === 1002">
-          <span>视频文件</span>
-        </div>
-        <div v-else-if="fileDetail.fileType === 1003">
-          <span>音频文件</span>
-        </div>
-        <div v-else-if="fileDetail.fileType === 1004">
-          <span>文本文件</span>
-        </div>
-        <div v-else>
-          <span>文件没有预览</span>
-        </div>
+        <el-card class="box-card">
+          <div slot="header" class="clearfix">
+            <span style="left: 0;margin-bottom: 0px;color: black;">{{ fileDetail.filename }}</span>
+          </div>
+          <div class="text item">
+            <div v-if="fileDetail.fileType === 1001">
+              <el-image
+                :src="fileDetail.originalUrl"
+                lazy
+              />
+            </div>
+            <div v-else-if="fileDetail.fileType === 1002">
+              <video-preview :video-prop="videoProp" />
+            </div>
+            <div v-else-if="fileDetail.fileType === 1003">
+              <audio-player
+                ref="audioPlayer"
+                :is-loop="false"
+                :show-prev-button="false"
+                :show-next-button="false"
+                :show-playback-rate="false"
+                :audio-list="fileDetail.audioList.map(elm => elm.url)"
+                theme-color="#87CEFA"
+              />
+            </div>
+            <div v-else-if="fileDetail.fileType === 1004">
+              <span>文本文件</span>
+            </div>
+            <div v-else>
+              <span>文件没有预览</span>
+            </div>
+          </div>
+        </el-card>
       </div>
     </el-dialog>
     <!--移动/复制弹窗-->
@@ -226,7 +244,7 @@
 </template>
 
 <script>
-import VideoPreviewPlayer from 'components/VideoPreviewPlayer'
+import VideoPreview from 'components/VideoPreview'
 import {
   getFileList,
   deleteDiskFile,
@@ -236,10 +254,11 @@ import {
   getFolderTree,
   moveDiskFile
 } from '@/api/disk'
+import DPlayer from "dplayer";
 
 export default {
   name: 'FileList',
-  components: { VideoPreviewPlayer },
+  components: { VideoPreview },
   data() {
     return {
       // 屏幕宽度, 为了控制分页条的大小
@@ -275,7 +294,8 @@ export default {
         type: 1,
         pid: null,
         fileIds: []
-      }
+      },
+      videoProp: null
     }
   },
   created() {
@@ -323,11 +343,15 @@ export default {
     getDetail(fileId) {
       getFileDetail(fileId).then(resp => {
         if (resp.code === 0) {
-          console.log(resp.data)
+          this.$message(resp.data)
         }
       })
     },
-    cache(row) {
+    share(row) {
+      this.$message('share 未实现')
+    },
+    remove(row) {
+      this.$message('remove 未实现')
     },
     onSelect() {
       this.currentPage = 1
@@ -405,7 +429,6 @@ export default {
       })
     },
     handleFile(item) {
-      console.log(item)
       const fileType = item.fileType
       if (fileType === 1000) {
         const filename = item.filename
@@ -432,6 +455,19 @@ export default {
       getFileUrl(fileType, fileId).then(resp => {
         if (resp.code === 0) {
           this.fileDetail = resp.data
+          if (fileType === 1001) {
+          } else if (fileType === 1002) {
+            this.videoProp = {
+              videoId: this.fileDetail.fileId,
+              url: this.fileDetail.originalUrl,
+              type: 'mp4'
+            }
+          } else if (fileType === 1003) {
+            this.fileDetail.audioList = [
+              { name: this.fileDetail.filename, url: this.fileDetail.originalUrl }
+            ]
+          } else if (fileType === 1004) {
+          }
           this.previewFileDialog = true
         }
       }).catch(error => {
@@ -443,6 +479,10 @@ export default {
         })
       })
     },
+    handleDialogClose(done) {
+      console.log('dialog close')
+      done()
+    },
     createNewFolder() {
       this.createFolderDialog = true
     },
@@ -506,18 +546,49 @@ export default {
           this.$refs.multipleTable.clearSelection()
         }
       })
-    },
-    share() {
-      this.$notify({
-        title: '提示',
-        message: '分享文件接口未实现',
-        type: 'info',
-        duration: 3000
-      })
     }
   }
 }
 </script>
 
 <style>
+/*处于手机屏幕时*/
+@media screen and (max-width: 768px) {
+  .tit {
+    font-weight: 600;
+    font-size: 12px;
+    height: 32px;
+  }
+  .time {
+    font-size: 10px;
+    color: #999;
+  }
+  .num {
+    font-size: 9px;
+    padding-top: 3px;
+  }
+  .bottom {
+    margin-top: 2px;
+    line-height: 7px;
+  }
+  .coverImg {
+    height: 120px !important;
+  }
+}
+
+.coverImg {
+  width: 100%;
+  height: 175px;
+  display: block;
+}
+
+.clearfix:before,
+.clearfix:after {
+  display: table;
+  content: "";
+}
+
+.clearfix:after {
+  clear: both;
+}
 </style>

src/views/disk/FileShare.vue → src/views/disk/FileTrash.vue

@@ -1,12 +1,12 @@
 <template>
   <el-row>
-    <span>分享文件</span>
+    <span>回收站</span>
   </el-row>
 </template>
 
 <script>
 export default {
-  name: 'FileShare',
+  name: 'FileTrash',
   data() {
     return {
       // 屏幕宽度, 为了控制分页条的大小
@@ -16,7 +16,7 @@ export default {
     }
   },
   created() {
-    document.title = '我的分享'
+    document.title = '回收站'
   },
   mounted() {
     // 当窗口宽度改变时获取屏幕宽度

src/views/disk/FileVideo.vue

@@ -1,8 +1,5 @@
 <template>
   <el-row>
-    <el-row>
-      <el-button size="mini" type="danger" @click="loadAll">加载视频</el-button>
-    </el-row>
     <el-row>
       <el-col v-for="(item, index) in dataList" :key="index" :md="6" :sm="12" :xs="12">
         <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
@@ -11,7 +8,7 @@
               <span style="left: 0;margin-bottom: 0px;color: black;">{{ item.filename }}</span>
             </div>
             <div class="text item">
-              <div :id="item.fileId" ref="dplayer" style="height: 240px;" />
+              <video-preview :video-prop.sync="item.videoProp" />
             </div>
           </el-card>
         </el-row>
@@ -21,6 +18,7 @@
 </template>
 
 <script>
+import VideoPreview from 'components/VideoPreview'
 import DPlayer from 'dplayer'
 import {
   getImageList
@@ -28,6 +26,7 @@ import {
 
 export default {
   name: 'FileVideo',
+  components: { VideoPreview },
   data() {
     return {
       DPlayer,
@@ -56,10 +55,11 @@ export default {
           this.dataList = resp.data.list
           this.totalSize = resp.data.totalSize
           for (const item of this.dataList) {
-            console.log(item.url)
-            const elem = document.getElementById(item.fileId)
-            console.log(elem)
-            // this.initMp4Player(item.fileId, item.url)
+            item.videoProp = {
+              videoId: item.fileId,
+              url: item.originalUrl,
+              type: 'mp4'
+            }
           }
         } else {
           this.$notify({

src/views/disk/UploadFile.vue

@@ -59,8 +59,7 @@
 </template>
 
 <script>
-import { getServerInfo } from '@/api/content'
-import { addDiskFile, getFolderTree } from '@/api/disk'
+import { addDiskFile, getFolderTree, getServerInfo } from '@/api/disk'
 
 export default {
   name: 'UploadFile',