<template>
|
<div >
|
<a-layout v-loading="loading" class="side">
|
<a-layout-content >
|
<a-tabs type="card" @change="tabsChange" class="side-tree-content" >
|
<a-tab-pane key="1" tab="全部文件" >
|
<a-tree
|
:expandedKeys.sync="expandedKeys"
|
:selectedKeys="selectedKeys"
|
multiple
|
show-icon
|
|
:tree-data="treeData"
|
@expand = "onLoadData"
|
@select="selectTreeNode"
|
>
|
|
<a-icon slot="folder" type="folder" />
|
<span slot="custom" slot-scope="item">
|
<span :id="item.path" :style="item.permission==false?'': 'color:#b9b9b9'">{{item.title}}</span>
|
|
</span>
|
</a-tree>
|
</a-tab-pane>
|
<a-tab-pane key="2" tab="我的收藏">
|
|
<a-list size="small" :data-source="favoriteData" >
|
<a-list-item slot="renderItem" slot-scope="item" @click="handleItemClick(item)" style="cursor: pointer" @contextmenu.prevent="handleStarRightClick(item,$event)">
|
<a-icon type="folder" /> {{item.fileName}}
|
</a-list-item>
|
</a-list>
|
</a-tab-pane>
|
</a-tabs>
|
|
</a-layout-content>
|
<a-layout-footer class='side-footer'>
|
<a-row>
|
<a-col :span="12" class="recovery btn" @click="handleRecoveryClick">
|
<a-icon type="delete" />回收站
|
</a-col>
|
<a-col :span="12" class="share btn" @click="handleShareClick">
|
<a-icon type="share-alt" />我的分享
|
</a-col>
|
</a-row>
|
</a-layout-footer>
|
</a-layout>
|
</div>
|
</template>
|
|
<script>
|
|
import {
|
deleteAction,
|
getAction,
|
downFile,
|
getFileAccessHttpUrl, getDeskDownloadHttpUrl
|
} from '@/api/manage'
|
import { resolve } from 'path'
|
|
export default {
|
name: 'fileSide',
|
|
data() {
|
return {
|
result: null,
|
expandedKeys: [],
|
selectedKeys: [],
|
selectedNode: null,
|
dirMap: [],
|
treeData: [],
|
loading: false,
|
url: {
|
docTree: "/document/getAsyncTree",
|
init: "/document/init"
|
},
|
favoriteData: []
|
}
|
},
|
methods: {
|
// 加载树形目录
|
loadDocTree(treeNode) {
|
console.log("左侧菜单：：：加载树：：：调用", new Date().getMinutes() + ":" + new Date().getSeconds())
|
var param = null;
|
console.log("点击的右侧列表：：：", treeNode);
|
console.log("选择的节点：：：",this.selectedNode);
|
var target = undefined;
|
var path;
|
|
if (treeNode){ // 点击右侧列表或左侧收藏夹列表
|
var var_filePath = treeNode.filePath+"/" + treeNode.fileName
|
console.log("var_filePath::", var_filePath);
|
if (this.selectedNode.pathId == treeNode.pathId) { // 点击的当前文件夹
|
target = treeNode.pathId;
|
path = var_filePath;
|
} else {
|
this.selectedNode.children.forEach((item)=>{ // 循环判断点击的是否是当前文件夹的子文件
|
console.log("item.pathId == treeNode.pahtId",item.pathId , treeNode.pathId);
|
|
if (item.pathId == treeNode.pathId || var_filePath.startsWith(item.path+"/")) { // 点击的为当前选择节点的子文件或后代文件
|
console.log("点击右侧后得到的节点：：：",item);
|
this.selectedNode = item;
|
target = treeNode.pathId;
|
path = var_filePath;
|
return;
|
}
|
|
})
|
}
|
// 点击的收藏列表和当前选择节点没有任何关系，刚将当前选择节点定位到根节点；后台从根节点遍历直到找到点击的文件。
|
if (target==undefined) {
|
this.selectedNode = this.result
|
target = treeNode.pathId
|
path = var_filePath
|
}
|
|
} else if(this.selectedNode != null) {
|
target = this.selectedNode.pathId
|
path = this.selectedNode.path
|
}
|
|
console.log("target:::", target);
|
//console.log("点击右侧后得到的节点：：：",this.selectedNode);
|
if (this.selectedNode ) {
|
|
param = {id: this.selectedNode.id,
|
key: this.selectedNode.key,
|
parentId: this.selectedNode.parentId,
|
path: path,
|
pathId: this.selectedNode.pathId,
|
title: this.selectedNode.title,
|
isLeaf: this.selectedNode.isLeaf,
|
targetId: target}
|
}
|
|
console.log("params:::", param);
|
this.loading = true
|
this.$emit("onLoading",true)
|
getAction(this.url.docTree, param).then(res=>{ // 发送请求到后台进行查询
|
|
console.log("后台加载到的左侧树数据:::",res);
|
console.log("选择的节点KEYS::", this.selectedKeys);
|
if(this.selectedNode == null) {
|
// this.treeData = res.result?res.result.children:[];
|
this.result = res.result;
|
this.selectedNode = res.result
|
} else {
|
this.selectedNode.children = res.result.children
|
|
}
|
this.treeData = this.result.children;
|
console.log("左侧菜单：：：构造树：：：", new Date().getMinutes() + ":" + new Date().getSeconds())
|
// 构造key-node Map
|
this.buildDirMap(this.treeData);
|
|
var favNode = res.target
|
console.log("favNode:::", favNode);
|
this.selectKeys(favNode.key)
|
if (this.fileType === 0) { // 文件夹，查询子文件
|
//this.$emit('selectPath',this.selectedNode.path,this.selectedNode.key, this.selectedNode.pathId)
|
}
|
console.log("左侧菜单：：：完成树：：：", new Date().getMinutes() + ":" + new Date().getSeconds())
|
}).finally(()=>{
|
this.loading = false
|
this.$emit("onLoading",false)
|
})
|
},
|
|
|
// 加载下载量使用情况
|
loadFlow() {
|
getAction('/document/loadFlow').then( res => {
|
console.log("loadFlow::::", res);
|
if (res.success) {
|
this.$store.commit('changeFlow', res.result.flow)
|
this.$store.commit('changeSurplusFlow', res.result.surplusFlow)
|
}
|
})
|
},
|
|
|
|
// 异步加载展开节点
|
onLoadData(a,treeNode) {
|
console.log("展开：",a ,"treeNode:" , treeNode);
|
//if (!treeNode.expanded) return
|
return new Promise(resolve => {
|
console.log("异步加载的treeNode：" , treeNode);
|
if (treeNode.node.dataRef.children.length > 0) {
|
resolve()
|
return
|
}
|
this.loading = true
|
this.$emit("onLoading",true)
|
getAction(this.url.docTree, treeNode.node.dataRef).then(res=>{
|
console.log("异步加载内容：：", res)
|
treeNode.node.dataRef.children = res.result.children
|
this.treeData = [...this.treeData]
|
treeNode.expanded = false
|
resolve()
|
}).finally(() => {
|
this.loading = false;
|
this.$emit("onLoading",false)
|
})
|
})
|
},
|
|
refrushCurrentNode() {
|
|
},
|
|
// 构造文件夹map
|
buildDirMap(tree) {
|
tree.forEach((item, index) => {
|
this.dirMap[item.path] = item.key
|
this.buildDirMap(item.children)
|
})
|
},
|
|
|
|
// 加载收藏夹文件
|
loadFavorite() {
|
this.favoriteData = []
|
getAction("/favorite/list",null).then(res => {
|
if (res.success) {
|
this.favoriteData = res.result?res.result:[]
|
}
|
|
})
|
|
},
|
|
|
// 初始化本地文件目录到服务器数据库
|
initDocTree() {
|
getAction(this.url.init, null).then(res => {
|
console.log("初始化完成");
|
})
|
},
|
// 节点点击事件
|
selectTreeNode(keys,e) {
|
//this.onLoadData(keys,e);
|
|
console.log("keys:::" , keys);
|
console.log("e::",e.node);
|
this.selectedNode = e.node.dataRef;
|
this.loadDocTree()
|
this.$emit('selectPath',this.selectedNode.path,this.selectedNode.key,this.selectedNode.pathId)
|
this.pushExpandedKeys(this.selectedNode.key)
|
this.pushSelectedKeys(this.selectedNode.key)
|
|
},
|
|
// 展开节点及前置节点
|
pushExpandedKeys(key) {
|
console.log("key____",key);
|
|
let index = key.indexOf("-")
|
while (index != -1) {
|
//console.log("KEY::index:::",index);
|
let subKey = key.substring(0,index);
|
//console.log("subkey",subKey);
|
if (this.expandedKeys.indexOf(subKey) < 0) {
|
this.expandedKeys.push(subKey)
|
}
|
index = key.indexOf("-",index + 1)
|
}
|
// let KeyArr = key.split("-")
|
|
// for(let i = 0; i<= keyArr.length; i++){
|
// let subKey = key.substring(0,i);
|
// console.log("subkey",subKey);
|
// if (this.expandedKeys.indexOf(subKey) < 0) {
|
// this.expandedKeys.push(subKey)
|
// }
|
// }
|
|
},
|
pushSelectedKeys(key) {
|
this.selectedKeys.shift()
|
this.selectedKeys.push(key);
|
},
|
|
// 点击面包屑时定位到点击的树节点
|
selectKeys(key) {
|
console.log("emitKey:::",key);
|
this.pushSelectedKeys(key);
|
// 从展开的节点列表中删除点击的KEY及其父节点之外的节点，只展开点击的节点及其父节点
|
for (var i=0; i< this.expandedKeys.length; i++) {
|
let sub = this.expandedKeys[i]+"-";
|
let parent = key+"-"
|
if(parent.indexOf(sub) <0 ) {
|
this.expandedKeys.splice(i,1);
|
i--
|
}
|
}
|
this.pushExpandedKeys(key)
|
this.findNodeByKey(key)
|
if (this.fileType == 6) {
|
this.$emit('selectPath','/回收站',this.selectedNode.key,this.selectedNode.pathId)
|
} else {
|
this.$emit('selectPath',this.selectedNode.path,this.selectedNode.key,this.selectedNode.pathId)
|
}
|
|
console.log("展开的节点列表：：：", this.expandedKeys)
|
let ele = document.getElementById(this.selectedNode.path);
|
ele && ele.scrollIntoView({block: 'end', behavior: 'smooth'});
|
|
},
|
// // 根据文件名在当前目录下查询节点
|
// findTreeNode(fileName) {
|
// console.log("this.node222",this.selectedNode);
|
// this.findNodeByKey(this.selectedNode.key)
|
// this.selectedNode.children.forEach(element => {
|
// if(element.title == fileName) {
|
// console.log("element:::",element);
|
// this.selectedNode = element;
|
// this.$emit('selectPath',element.path, element.key)
|
|
// this.pushSelectedKeys(element.key)
|
|
// this.expandedKeys.push(element.key);
|
// console.log("findExpandedKeys::::", this.expandedKeys);
|
// }
|
|
// });
|
// this.pushExpandedKeys(this.selectedNode.key)
|
// console.log("thisFilePath::",this.selectedNode.path);
|
// this.$nextTick(()=>{
|
// let ele = document.getElementById(this.selectedNode.path);
|
// ele && ele.scrollIntoView({block: 'end', behavior: 'smooth'});
|
// })
|
|
// },
|
// 根据key找到原始节点
|
findNodeByKey(key) {
|
let indexArr = key.split('-');
|
// indexArr.shift();
|
indexArr.forEach((ele,arrIndex) => {
|
//console.log("index:::" , ele);
|
if(arrIndex >= 1) {
|
this.selectedNode = this.selectedNode.children[ele]
|
} else {
|
this.selectedNode = this.result
|
}
|
//console.log("this.node111",this.selectedNode);
|
})
|
|
},
|
// 点击回收站事件
|
handleRecoveryClick() {
|
console.log("回收站");
|
this.$emit('recoveryFile')
|
//this.$emit('recoveryFile')
|
},
|
// 点击我的分享事件
|
handleShareClick() {
|
this.$emit('selectPath','/我的分享',"")
|
console.log("我的分享");
|
},
|
// 标签点击事件
|
tabsChange(key) {
|
console.log("tabKEY::",key);
|
},
|
// 列表或收藏列表文件点击事件
|
handleItemClick(item) {
|
console.log("FileItemClick::",item);
|
//let starPath = (item.filePath === "/"?"":item.filePath)+"/"+item.fileName
|
this.loadDocTree(item)
|
// let starKey = this.dirMap[starPath]
|
// console.log("starPath::",starPath);
|
// this.selectKeys(starKey)
|
// this.$emit('selectPath',starPath,starKey,item.pathId)
|
|
},
|
// 收藏列表右键事件
|
handleStarRightClick(item,event) {
|
event.preventDefault()
|
this.$openBox
|
.contextMenu({
|
selectedFile: item,
|
callType: 'star',
|
domEvent: event
|
})
|
.then((res) => {
|
console.log("CALLBACK::::",res);
|
if (res === 'confirm') {
|
this.loadFavorite()
|
|
}
|
|
})
|
}
|
},
|
created() {
|
|
// this.initDocTree();
|
this.loadDocTree()
|
this.loadFavorite()
|
this.loadFlow()
|
},
|
computed: {
|
fileType() {
|
return this.$store.getters.fileType
|
}
|
}
|
|
}
|
</script>
|
|
<style lang="less" scoped>
|
|
|
.side {
|
|
height: calc(100vh - 225px);
|
background-color: white;
|
/deep/ .ant-tabs-bar {
|
margin: 0px !important;
|
}
|
/deep/ .ant-tabs-content {
|
width: 100%;
|
height: calc(100vh - 309px);
|
overflow: auto;
|
padding: 0 5px;
|
}
|
/deep/ .ant-list {
|
padding: 0 10px;
|
}
|
|
.side-footer{
|
background-color: white;
|
height: 40px !important;
|
padding: 0px 0px !important;
|
border-top: 1px solid rgb(211, 211, 211);
|
line-height: 39px;
|
box-shadow: 0px 0px 20px 0px #e3e3e3;
|
text-align: center;
|
cursor: pointer;
|
.btn{
|
&:hover{
|
background-color:#F5F7FA;
|
}
|
}
|
.recovery{
|
border-right: 1px solid #cecece;
|
}
|
}
|
}
|
</style>
|
