<template>
|
<a-layout>
|
<a-layout-header class="file-list-header">
|
<OperationMenu ref="operationMenu" :filePath='filePath' :treekeys='treeKeys' @clickBreadcrumb="clickBreadcrumb"
|
@searchFileList="searchFileList" @reloadPathTree="reloadPathTree"></OperationMenu>
|
</a-layout-header>
|
<a-layout>
|
<a-layout-sider class="fileSide">
|
<FileSide ref="fileSide" @onLoading='onLoading' @selectPath="selectPath" @recoveryFile="handleRecoveryFile">
|
</FileSide>
|
</a-layout-sider>
|
<FileList ref="fileList" :filePath="treeNode" @onLoading='onLoading' @fileClick="handlerFileClick"
|
@reloadPathTree="reloadPathTree" @refreshFavorite="refreshFavorite"></FileList>
|
|
</a-layout>
|
</a-layout>
|
</template>
|
|
<script>
|
import FileList from "./modules/FileList.vue";
|
import FileSide from "./modules/FileSide.vue";
|
import OperationMenu from "./modules/OperationMenu.vue";
|
|
|
export default {
|
name: "File",
|
components: { FileSide, FileList, OperationMenu },
|
data() {
|
return {
|
loading: false,
|
filePath: "",
|
treeNode: '',
|
treeKeys: '',
|
pathId: '',
|
|
}
|
},
|
computed: {
|
fileType() {
|
return this.$store.getters.fileType
|
},
|
// compareLoading() {
|
// return this.$store.getters.compareLoading
|
// },
|
},
|
methods: {
|
onLoading(loading) {
|
this.loading = loading
|
},
|
getSearchFileList() {
|
|
},
|
getTableDataByType() {
|
|
},
|
// 查询点击的目录下包含的文件和文件夹
|
selectPath(path, keys, pathId) {
|
console.log("查询文件列表：：" + path, keys);
|
this.filePath = path;
|
this.treeKeys = keys;
|
this.pathId = pathId
|
if (path == '/回收站') {
|
this.treeKeys = ""
|
this.$refs.fileList.loadRecoveryFile()
|
} else if (path == '/我的分享') {
|
this.treeKeys = ""
|
this.$refs.fileList.loadShareFile()
|
} else {
|
this.searchFileList()
|
|
this.$store.commit('changePathId', pathId)
|
}
|
|
},
|
searchFileList(searchStr) {
|
console.log("searchFileList:::调用", searchStr);
|
if (searchStr) {
|
this.filePath = '/“' + searchStr + '”的搜索结果'
|
this.treeKeys = '0-search'
|
console.log("search:File:::", searchStr);
|
this.$refs.fileList.searchFileList(searchStr)
|
} else {
|
this.$refs.fileList.loadPathFile(this.filePath, this.pathId)
|
}
|
|
this.$store.commit('changeFilePath', this.filePath)
|
},
|
// 重新加载左侧目录树/文件列表
|
reloadPathTree(str) {
|
console.log("重新加载左侧目录树::::调用", str);
|
if (this.fileType === 0) {
|
this.$refs.fileSide.loadDocTree()
|
} else if (this.fileType === 6) {
|
this.$refs.fileSide.loadDocTree()
|
//this.handleRecoveryFile()
|
} else if (this.fileType === 10) {
|
this.reSearch(str)
|
}
|
|
},
|
// 点击面包屑
|
clickBreadcrumb(path, key) {
|
console.log("endWith ===", key.substr(key.lastIndexOf('search'), key.length));
|
if ('search' === key.substr(key.lastIndexOf('search'), key.length)) {
|
let start = path.indexOf('“') + 1
|
let end = path.indexOf('”') - 2
|
let str = path.substr(start, end)
|
console.log(path, start, end);
|
this.reSearch(str)
|
} else {
|
this.$refs.fileSide.selectKeys(key + "")
|
//this.selectPath(path,key)
|
}
|
|
},
|
// 列表中文件点击事件
|
handlerFileClick(file) {
|
this.$refs.fileSide.handleItemClick(file)
|
},
|
// 回收站点击 展示 回收站列表
|
handleRecoveryFile() {
|
this.filePath = '/回收站'
|
this.treeKeys = ''
|
this.$refs.fileList.loadRecoveryFile()
|
},
|
refreshFavorite() {
|
this.$refs.fileSide.loadFavorite();
|
},
|
// , 刷新搜索列表
|
reSearch(str) {
|
this.$refs.fileList.searchFileList(str)
|
}
|
}
|
}
|
</script>
|
|
<style lang="less">
|
/* 禁用文本选择 */
|
body {
|
user-select: none;
|
/* 现代浏览器 */
|
-webkit-user-select: none;
|
/* 老的WebKit浏览器，如Safari */
|
-moz-user-select: none;
|
/* 老的Firefox浏览器 */
|
-ms-user-select: none;
|
/* 老的Internet Explorer浏览器 */
|
}
|
|
.fileSide {
|
width: 300px;
|
flex: 0 0 300px !important;
|
max-width: 500px !important;
|
height: calc(100vh - 225px);
|
background-color: white;
|
border-right: 1px solid rgb(211, 211, 211);
|
overflow: auto;
|
|
}
|
|
.content {
|
background-color: white;
|
}
|
|
.file-list-header {
|
background-color: white;
|
border-bottom: 1px solid rgb(211, 211, 211);
|
height: 100px !important;
|
padding: 0 20px !important;
|
line-height: 50px;
|
// box-shadow: 0px 0px 20px 0px #e3e3e3;
|
// z-index: 9999;
|
}
|
</style>
|
