添加emptyFile样式

src/components/EmptyFile/index.vue

@@ -0,0 +1,79 @@
+<template>
+  <div class="container">
+    <div class="share-empty">
+      <div class="share-empty-icon">
+        <img v-if="emptyShare" src="~@/assets/img/pic_sharing_empty.png" ref="image" style="max-width: 100%;" alt="">
+        <img v-if="!emptyShare" src="~@/assets/img/emptyfile_intro.png" ref="image" style="max-width: 100%;" alt="">
+      </div>
+      <p class="share-empty-status">
+        {{emptyStatus}}
+      </p>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'EmptyFile',
+    props: {
+      emptyImgUrl: {
+        type: String,
+        default: '~@/assets/img/widget-img.jpeg'
+      },
+      emptyStatus:{
+        type: String,
+        default: '空空如也~'
+      },
+      emptyShare: {
+        type: Boolean,
+        default: false
+      }
+    },
+    data() {
+      return {
+        // sourceImg: this.emptyImgUrl,
+      }
+    },
+    methods: {
+      sourceImg(){
+        return '~@/assets/img/widget-img.jpeg'
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .container {
+    width: 100%;
+    min-height: calc(100vh - 50px);
+  }
+  .share-empty {
+    height: 30%;
+    width: 50%;
+    color: #6e6e6e;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    margin: -15% 0 0 -25%;
+  }
+  .share-empty-icon {
+    width: 268px;
+    margin: 0 auto;
+    img {
+      width: 100%;
+    }
+  }
+  .share-empty-status {
+    text-align: center;
+    padding-top: 40px;
+    font-size: 18px;
+    line-height: 28px;
+  }
+  .share-empty-text {
+    padding-top: 20px;
+    font-size: 16px;
+    text-align: center;
+    line-height: 28px;
+  }
+</style>
+

src/components/ShowFile/ShowFile.vue

@@ -131,7 +131,7 @@
 
     <!--list布局-->
     <el-table
-      v-show="!grid"
+      v-show="!grid && this.fileList.length > 0"
       ref="fileListTable"
       v-loading="tableLoading"
       :max-height="clientHeight"
@@ -268,7 +268,7 @@
     </el-table>
 
     <!--grid布局-->
-    <div v-show="grid" v-loading="tableLoading"
+    <div v-show="grid && this.fileList.length > 0" v-loading="tableLoading"
          element-loading-text="文件加载中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="#f6f7fa88">
@@ -313,6 +313,11 @@
       </van-checkbox-group>
       <el-divider class="grid-divider" content-position="center"><i class="el-icon-folder-opened"></i>&nbsp;{{summaries}}</el-divider>
     </div>
+    <empty-file
+      v-if="this.fileList.length < 1"
+      :emptyStatus="emptyStatus"
+    >
+    </empty-file>
     <el-pagination
       background
       layout="prev, pager, next"
@@ -340,13 +345,17 @@
   import api from '@/api/upload-api'
   import BreadcrumbFilePath from "@/components/Breadcrumb/BreadcrumbFilePath";
   import IconFile from "@/components/Icon/IconFile";
+  import EmptyFile from "@/components/EmptyFile";
   import Clipboard from 'clipboard';
 
   export default {
     name: 'ShowFile',
-    components: { IconFile, BreadcrumbFilePath,
+    components: { IconFile, BreadcrumbFilePath,EmptyFile},
-    },
     props: {
+      emptyStatus: {
+        'type': String,
+        'default': '空空如也~',
+      },
       singleFileType: {
         'type': String,
         'default': '',

src/views/fileType/audio.vue

@@ -4,6 +4,7 @@
       queryFileType="audio"
       :orderCustom="true"
       singleFileType="音乐"
+      emptyStatus="还没有音乐呢~"
     ></show-file>
   </div>
 </template>

src/views/fileType/document.vue

@@ -3,6 +3,7 @@
     <show-file
       queryFileType="document"
       :orderCustom="true"
+      emptyStatus="还没有文档呢~"
     >
     </show-file>
   </div>

src/views/fileType/image.vue

@@ -3,6 +3,7 @@
     <show-file
       queryFileType="image"
       :orderCustom="true"
+      emptyStatus="还没有图片呢~"
     >
     </show-file>
   </div>

src/views/fileType/video.vue

@@ -3,6 +3,7 @@
     <show-file
       queryFileType="video"
       :orderCustom="true"
+      emptyStatus="还没有视频文件呢~"
     >
     </show-file>
   </div>