更新 disk 相关页面和接口

src/api/disk.js

@@ -5,6 +5,8 @@ const diskApi = {
   createFolderApi: '/api/account/disk/folder/add',
   addDiskFileApi: '/api/account/disk/file',
   deleteDiskFileApi: '/api/account/disk/file',
+  getFileUrlApi: '/api/account/disk/file/url',
+  getFileDetailApi: '/api/account/disk/file/detail',
   getFileListApi: '/api/account/disk/list'
 }
 
@@ -27,3 +29,11 @@ export function deleteDiskFile(fileIds) {
 export function getFileList(form) {
   return get(diskApi.getFileListApi, form)
 }
+
+export function getFileUrl(fileType, fileId) {
+  return get(diskApi.getFileUrlApi + '?fileType=' + fileType + '&fileId=' + fileId)
+}
+
+export function getFileDetail(fileId) {
+  return get(diskApi.getFileDetailApi + '?fileId=' + fileId)
+}

src/components/VideoPreviewPlayer.vue

@@ -24,20 +24,20 @@ export default {
       dplayer: null
     }
   },
-  created() {
-    this.getVideoUrl(this.videoProp.videoId)
-  },
   watch: {
     // 监控 videoProp 对象的变化
-     videoProp(newVal) {
-       console.log('videoProp changed')
-       if (!newVal.play) {
-         this.dplayer.destroy()
-       } else {
-         this.getVideoUrl(newVal.videoId)
-       }
+    videoProp(newVal) {
+      console.log('videoProp changed')
+      if (!newVal.play) {
+        this.dplayer.destroy()
+      } else {
+        this.getVideoUrl(newVal.videoId)
+      }
     }
   },
+  created() {
+    this.getVideoUrl(this.videoProp.videoId)
+  },
   methods: {
     getVideoUrl(videoId) {
       videoUrl(videoId).then(res => {

src/views/disk/FileList.vue

@@ -102,7 +102,7 @@
           <template slot-scope="scope">
             <el-button
               size="mini"
-              @click="cache(scope.row)"
+              @click="getDetail(scope.row.fileId)"
             >详情</el-button>
             <el-button
               size="mini"
@@ -155,14 +155,42 @@
         </el-form-item>
       </el-form>
     </el-dialog>
+    <!--文件预览弹窗-->
+    <el-dialog
+      title="预览文件"
+      append-to-body
+      :visible.sync="previewFileDialog"
+      width="70%"
+      center
+    >
+      <div v-if="fileDetail !== null">
+        <div v-if="fileDetail.fileType === 1001">
+          <el-image :src="fileDetail.originalUrl" />
+        </div>
+        <div v-else-if="fileDetail.fileType === 1002">
+          <video-preview-player :video-prop.sync="videoProp" />
+        </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>
+      </div>
+    </el-dialog>
   </el-row>
 </template>
 
 <script>
-import { getFileList, deleteDiskFile, addDiskFolder } from '@/api/disk'
+import VideoPreviewPlayer from 'components/VideoPreviewPlayer'
+import { getFileList, deleteDiskFile, addDiskFolder, getFileDetail, getFileUrl } from '@/api/disk'
 
 export default {
   name: 'FileList',
+  components: { VideoPreviewPlayer },
   data() {
     return {
       // 屏幕宽度, 为了控制分页条的大小
@@ -183,7 +211,9 @@ export default {
       createFolderForm: {
         parent: null,
         folderName: null
-      }
+      },
+      previewFileDialog: false,
+      fileDetail: null
     }
   },
   created() {
@@ -221,6 +251,13 @@ export default {
         })
       })
     },
+    getDetail(fileId) {
+      getFileDetail(fileId).then(resp => {
+        if (resp.code === 0) {
+          console.log(resp.data)
+        }
+      })
+    },
     cache(row) {
     },
     search() {
@@ -300,9 +337,17 @@ export default {
         console.log(filename)
       } else {
         const fileId = item.fileId
-        console.log(fileId)
+        this.previewFile(fileType, fileId)
       }
     },
+    previewFile(fileType, fileId) {
+      this.previewFileDialog = true
+      getFileUrl(fileType, fileId).then(resp => {
+        if (resp.code === 0) {
+          this.fileDetail = resp.data
+        }
+      })
+    },
     createNewFolder() {
       this.createFolderDialog = true
     },