*提取文件显示组件

*添加最近页面
*添加图片、视频、音乐、文档页面

package.json

@@ -31,6 +31,7 @@
     "normalize.css": "7.0.0",
     "nprogress": "0.2.0",
     "path-to-regexp": "2.4.0",
+    "pl-table": "^2.5.8",
     "scriptjs": "^2.5.9",
     "sortablejs": "^1.10.2",
     "spark-md5": "^3.0.0",

src/router/index.js

@@ -65,7 +65,7 @@ export const constantRoutes = [
     redirect: '/recently',
     children: [
       {
-        path: 'recently',
+        path: '',
         name: 'recently',
         component: () => import('@/views/recently/index'),
         meta: { title: '最近', icon: 'zuijinyuedu' }
@@ -73,6 +73,59 @@ export const constantRoutes = [
     ]
   },
 
+  {
+    path: '/audio',
+    component: Layout,
+    redirect: '/audio',
+    children: [
+      {
+        path: '',
+        name: 'audio',
+        component: () => import('@/views/fileType/audio'),
+        meta: { title: '音乐', icon: 'audio' }
+      }
+    ]
+  },
+  {
+    path: '/video',
+    component: Layout,
+    redirect: '/video',
+    children: [
+      {
+        path: '',
+        name: 'video',
+        component: () => import('@/views/fileType/video'),
+        meta: { title: '视频', icon: 'video' }
+      }
+    ]
+  },
+  {
+    path: '/image',
+    component: Layout,
+    redirect: '/image',
+    children: [
+      {
+        path: '',
+        name: 'image',
+        component: () => import('@/views/fileType/image'),
+        meta: { title: '图片', icon: 'image' }
+      }
+    ]
+  },
+  {
+    path: '/document',
+    component: Layout,
+    redirect: '/document',
+    children: [
+      {
+        path: '',
+        name: 'document',
+        component: () => import('@/views/fileType/document'),
+        meta: { title: '文档', icon: 'document' }
+      }
+    ]
+  },
+
   {
     path: '/favorite',
     component: Layout,
@@ -80,7 +133,7 @@ export const constantRoutes = [
       {
         path: 'index',
         name: 'Form',
-        component: () => import('@/views/form/index'),
+        component: () => import('@/views/favorite/index'),
         meta: { title: '收藏', icon: 'Favoritestarrate' }
       }
     ]

src/views/demo/index.vue

@@ -1,27 +1,131 @@
 <template>
-  <div class="demo">
+  <!-- 使用 useVirtual 属性开启虚拟滚动 使用虚拟滚动时，必须要固定表格高度和行高 -->
-    <!--<tw-markdown-view v-if="!editor.isEditing" ref="markdownView"></tw-markdown-view>-->
+  <!-- 1. 使用格式外层必须包含一层父级元素，且必须设置高度 2. this.$refs.plTable.setHeight() // 当窗口高度变化或者外层高度变化，就调用该方法 -->
-    <editormd></editormd>
+  <div style="height: 100%;width: 100%;overflow: auto">
+    <div style="color:red;">pl-table在线预览，更多玩法请看文档哦，欢迎Star</div>
+    <span slot="footer" class="dialog-footer">
+          <el-button @click="clearSelection">清除选中</el-button>
+          <el-button @click="setData(2)">变化数据为2条</el-button>
+          <el-button @click="setData(1000)">变化数据为1000条</el-button>
+      </span>
+    <p style="color: red">我是Y轴虚拟</p>
+    <div style="height: 400px;width: 100%">
+      <!--<pl-table :datas="tableData" height="400" useVirtual
+      注意点： 表格插件并不需要height属性字段(跟ele不同)，因为涉及分页组件。里面会去计算高度，只需要父级外层设置高度即可
+      row-height属性很重要 请看表格属性列表
+      -->
+      <pl-table :datas="data.tableData"
+                ref="plTable"
+                big-data-checkbox
+                fixed-columns-roll
+                header-drag-style
+                show-summary
+                :total-option="[{ label: '地址' }]"
+                use-virtual
+                :row-height="50">
+        <template slot="empty">
+          没有查询到符合条件的记录
+        </template>
+        <pl-table-column type="selection" width="55"/>
+        <pl-table-column type="index" width="100" fixed/>
+        <!--show-overflow-tooltip属性代表超出则内容部分给出提示框-->
+        <pl-table-column
+          v-for="item in columns"
+          :key="item.id"
+          :resizable="item.resizable"
+          :show-overflow-tooltip="item.showOverflowTooltip"
+          :prop="item.prop"
+          :label="item.label"
+          :fixed="item.fixed"
+          :width="item.width"/>
+      </pl-table>
+    </div>
+    <p style="margin-top: 20px;color: red">我是X + Y轴同时虚拟</p>
+    <div style="height:400px">
+      <plx-table-grid :datas="data.tableData"  ref="plTable2">
+        <plx-table-column type="selection" width="55" fixed="left"/>
+        <plx-table-column type="index" width="100" fixed="left"/>
+        <plx-table-column
+          v-for="item in columns2"
+          :key="item.id"
+          :resizable="item.resizable"
+          :prop="item.prop"
+          :label="item.label"
+          :fixed="item.fixed"
+          :width="item.width"/>
+      </plx-table-grid>
+    </div>
   </div>
 </template>
 
 <script>
-  import editormd from '@/components/markdown/editormd'
   export default {
-    components: {
+    data() {
-      editormd
-    },
-    data () {
       return {
+        columns: [
+          {prop: 'date', label: '日期', width: 120},
+          {prop: 'address', label: '地址', width: 100, showOverflowTooltip: true},
+          {prop: 'address', label: '噜噜噜', width: 230, showOverflowTooltip: true},
+          {prop: 'address', label: '娃哈哈', width: 100, showOverflowTooltip: true},
+          {prop: 'address', label: '地址', width: 100, showOverflowTooltip: true},
+          {prop: 'address', label: '挖挖掘机挖掘机挖掘机掘机', width: 100},
+          {prop: 'address', label: '娃哈哈', width: 100, showOverflowTooltip: true},
+          {prop: 'address', label: '娃哈哈', width: 100, showOverflowTooltip: true},
+          {prop: 'address', label: '噜噜噜', width: 230, showOverflowTooltip: true},
+          {prop: 'address', label: '娃哈哈', width: 100, showOverflowTooltip: true},
+          {prop: 'address', label: '地址', width: 100, showOverflowTooltip: true},
+          {prop: 'address', label: '挖挖掘机挖掘机挖掘机掘机', width: 100},
+          {prop: 'address', label: '娃哈哈', width: 100, showOverflowTooltip: true},
+          {prop: 'address', label: '娃哈哈', width: 100, showOverflowTooltip: true},
+          {prop: 'address', label: '噜噜噜', width: 230, showOverflowTooltip: true},
+          {prop: 'address', label: '娃哈哈', width: 100, showOverflowTooltip: true}
+        ],
+        columns2: Array.from({ length: 500 }, (_, idx) => ({
+          prop: 'address', label: '地址' + idx, width: 200, showOverflow: true, sortable: true, fixed: ''
+        })),
+        data: {
+          tableData:Array.from({ length: 10000 }, (_, idx) => ({
+            id: idx + 1,
+            date: '2016-05-03',
+            name: 1,
+            ab: '欢迎使用pl-table',
+            address: 1 + idx
+          }))
+        }
       }
     },
-    mounted() {
+    mounted () {
     },
     methods: {
-    },
+      clearSelection () {
+        this.$refs.plTable.clearSelection()
+        this.$refs.plTable2.clearSelection()
+      },
+      setData (num) {
+        this.data.tableData = Array.from({ length: num }, (_, idx) => ({
+          id: idx + 1,
+          date: '2016-05-03',
+          name: 1,
+          ab: '欢迎使用pl-table',
+          address: 1 + idx
+        }))
+      }
+    }
   }
 </script>
-
+<style>
-<style scoped>
+  .dsada {
-
+    background-color: red;
+  }
+  .el-input__inner {
+    height: 25px !important;
+  }
+  body, html {
+    overflow: auto;
+    margin: 0;
+    padding: 10px;
+    box-sizing: border-box;
+    width: 100%;
+    height: 100%;
+  }
 </style>

src/views/favorite/index.vue

@@ -0,0 +1,28 @@
+<template>
+  <div>
+    <show-file :defaultGrid="false" :sortable="sortable" :queryCondition="queryCondition" :orderCustom="true"></show-file>
+  </div>
+</template>
+
+<script>
+  import ShowFile from "@/components/ShowFile/ShowFile";
+
+  export default {
+    components: {ShowFile},
+    data() {
+      return {
+        sortable: {
+          prop: 'updateDate', order: 'descending'
+        },
+        queryCondition: {
+          isFavorite: false
+        }
+      }
+    },
+  }
+</script>
+
+<style lang="scss" scoped>
+
+</style>
+

src/views/fileType/audio.vue

@@ -0,0 +1,22 @@
+<template>
+  <div>
+    <show-file queryFileType="audio"></show-file>
+  </div>
+</template>
+
+<script>
+import ShowFile from "@/components/ShowFile/ShowFile";
+
+export default {
+  components: {ShowFile},
+  data() {
+    return {
+    }
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>
+

src/views/fileType/document.vue

@@ -0,0 +1,22 @@
+<template>
+  <div>
+    <show-file queryFileType="document"></show-file>
+  </div>
+</template>
+
+<script>
+import ShowFile from "@/components/ShowFile/ShowFile";
+
+export default {
+  components: {ShowFile},
+  data() {
+    return {
+    }
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>
+

src/views/fileType/image.vue

@@ -0,0 +1,22 @@
+<template>
+  <div>
+    <show-file queryFileType="image"></show-file>
+  </div>
+</template>
+
+<script>
+import ShowFile from "@/components/ShowFile/ShowFile";
+
+export default {
+  components: {ShowFile},
+  data() {
+    return {
+    }
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>
+

src/views/fileType/video.vue

@@ -0,0 +1,22 @@
+<template>
+  <div>
+    <show-file queryFileType="video"></show-file>
+  </div>
+</template>
+
+<script>
+import ShowFile from "@/components/ShowFile/ShowFile";
+
+export default {
+  components: {ShowFile},
+  data() {
+    return {
+    }
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>
+

src/views/recently/index.vue

@@ -1,81 +1,28 @@
 <template>
-    <mavon-editor
+  <div>
-      v-model="content"
+    <show-file :defaultGrid="false" :sortable="sortable" :queryCondition="queryCondition" :orderCustom="true"></show-file>
-      :subfield="false"
+  </div>
-      :boxShadow="false"
-      defaultOpen="preview"
-      :navigation="true"
-      :toolbarsFlag="toolbarsFlag"
-      :toolbars="toolbars"
-      @navigationToggle="navigationToggle"
-    />
 </template>
 
 <script>
-  import { mavonEditor } from 'mavon-editor'
+  import ShowFile from "@/components/ShowFile/ShowFile";
-  import 'mavon-editor/dist/css/index.css'
+
   export default {
-    // 注册
+    components: {ShowFile},
-    components: {
-      mavonEditor,
-    },
     data() {
       return {
-        toolbars:{
+        sortable: {
-          navigation: true,
+          prop: 'updateDate', order: 'descending'
         },
-        toolbarsFlag: true,
+        queryCondition: {
-        content:'# 标题\n' +
+          isFolder:false
-          '```java\n' +
+        }
-          '/***\n' +
-          '     * 重命名\n' +
-          '     * @param username\n' +
-          '     * @param id\n' +
-          '     * @return\n' +
-          '     */\n' +
-          '    @Override\n' +
-          '    public ResponseResult<Object> rename(String newFileName, String username, String id) {\n' +
-          '        FileDocument fileDocument = mongoTemplate.findById(id, FileDocument.class, COLLECTION_NAME);\n' +
-          '        if (fileDocument != null) {\n' +
-          '            String currentDirectory = getUserDirectory(fileDocument.getPath());\n' +
-          '            String filePath = rootPath + File.separator + username + currentDirectory;\n' +
-          '            File file = new File(filePath + fileDocument.getName());\n' +
-          '            if(fileDocument.getIsFolder()){\n' +
-          '                Query query = new Query();\n' +
-          '                String searchPath = currentDirectory + fileDocument.getName();\n' +
-          '                String newPath = currentDirectory + newFileName;\n' +
-          '                query.addCriteria(Criteria.where("path").regex("^"+searchPath));\n' +
-          '                List<FileDocument> documentList = mongoTemplate.find(query, FileDocument.class, COLLECTION_NAME);\n' +
-          '                // 修改该文件夹下的所有文件的path\n' +
-          '                documentList.parallelStream().forEach(rep -> {\n' +
-          '                    String path = rep.getPath();\n' +
-          '                    String newFilePath = replaceStart(path, searchPath, newPath);\n' +
-          '                    Update update = new Update();\n' +
-          '                    update.set("path",newFilePath);\n' +
-          '                    Query query1 = new Query();\n' +
-          '                    query1.addCriteria(Criteria.where("_id").is(rep.getId()));\n' +
-          '                    mongoTemplate.upsert(query1, update, COLLECTION_NAME);\n' +
-          '                });\n' +
-          '            }\n' +
-          '            if (renameFile(newFileName, id, filePath, file)) {\n' +
-          '                return ResultUtil.error("重命名失败");\n' +
-          '            }\n' +
-          '            return ResultUtil.success(true);\n' +
-          '        } else {\n' +
-          '            return ResultUtil.error("数据库查询失败");\n' +
-          '        }\n' +
-          '    }\n' +
-          '```\n',
-        html:'',
       }
     },
-    methods: {
-      navigationToggle(d){
-        console.log(d)
-      }
-    },
-    mounted() {
-
-    }
   }
 </script>
+
+<style lang="scss" scoped>
+
+</style>
+