*提取文件显示组件
*添加最近页面 *添加图片、视频、音乐、文档页面
This commit is contained in:
jmal
parent
1bd1da3e85
commit
aa45ca624c
@ -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",
|
||||
|
||||
1851
src/components/ShowFile/ShowFile.vue
Normal file
1851
src/components/ShowFile/ShowFile.vue
Normal file
File diff suppressed because it is too large
Load Diff
@ -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' }
|
||||
}
|
||||
]
|
||||
|
||||
@ -1,27 +1,131 @@
|
||||
<template>
|
||||
<div class="demo">
|
||||
<!--<tw-markdown-view v-if="!editor.isEditing" ref="markdownView"></tw-markdown-view>-->
|
||||
<editormd></editormd>
|
||||
<!-- 使用 useVirtual 属性开启虚拟滚动 使用虚拟滚动时，必须要固定表格高度和行高 -->
|
||||
<!-- 1. 使用格式外层必须包含一层父级元素，且必须设置高度 2. this.$refs.plTable.setHeight() // 当窗口高度变化或者外层高度变化，就调用该方法 -->
|
||||
<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: {
|
||||
editormd
|
||||
},
|
||||
data () {
|
||||
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 scoped>
|
||||
|
||||
<style>
|
||||
.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>
|
||||
|
||||
28
src/views/favorite/index.vue
Normal file
28
src/views/favorite/index.vue
Normal file
@ -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>
|
||||
|
||||
22
src/views/fileType/audio.vue
Normal file
22
src/views/fileType/audio.vue
Normal file
@ -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>
|
||||
|
||||
22
src/views/fileType/document.vue
Normal file
22
src/views/fileType/document.vue
Normal file
@ -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>
|
||||
|
||||
22
src/views/fileType/image.vue
Normal file
22
src/views/fileType/image.vue
Normal file
@ -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>
|
||||
|
||||
22
src/views/fileType/video.vue
Normal file
22
src/views/fileType/video.vue
Normal file
@ -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>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,81 +1,28 @@
|
||||
<template>
|
||||
<mavon-editor
|
||||
v-model="content"
|
||||
:subfield="false"
|
||||
:boxShadow="false"
|
||||
defaultOpen="preview"
|
||||
:navigation="true"
|
||||
:toolbarsFlag="toolbarsFlag"
|
||||
:toolbars="toolbars"
|
||||
@navigationToggle="navigationToggle"
|
||||
/>
|
||||
<div>
|
||||
<show-file :defaultGrid="false" :sortable="sortable" :queryCondition="queryCondition" :orderCustom="true"></show-file>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mavonEditor } from 'mavon-editor'
|
||||
import 'mavon-editor/dist/css/index.css'
|
||||
import ShowFile from "@/components/ShowFile/ShowFile";
|
||||
|
||||
export default {
|
||||
// 注册
|
||||
components: {
|
||||
mavonEditor,
|
||||
},
|
||||
components: {ShowFile},
|
||||
data() {
|
||||
return {
|
||||
toolbars:{
|
||||
navigation: true,
|
||||
sortable: {
|
||||
prop: 'updateDate', order: 'descending'
|
||||
},
|
||||
toolbarsFlag: true,
|
||||
content:'# 标题\n' +
|
||||
'```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:'',
|
||||
queryCondition: {
|
||||
isFolder:false
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
navigationToggle(d){
|
||||
console.log(d)
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user