<template>
|
<div id="app">
|
<div class="main">
|
<div class="left" ref="left">
|
<menu-list></menu-list>
|
<div class="title">文件列表</div>
|
<div class="file-list" @contextmenu.prevent="openContextMenu($event)">
|
<el-tree
|
:data="stationData"
|
@node-click="handleNodeClick"
|
@node-contextmenu="nodeContextClick"
|
></el-tree>
|
</div>
|
</div>
|
<div class="handle" ref="handle"></div>
|
<div class="right">
|
<div class="" @click="select">选文件</div>
|
<div class="">当前选中的文件夹为：{{ path }}</div>
|
<router-view />
|
</div>
|
</div>
|
<!-- 右键菜单 -->
|
<context-menu
|
v-model="contextMenu.visible"
|
:disabled-list="disabledList"
|
:style="{ left: contextMenu.x + 'px', top: contextMenu.y + 'px' }"
|
></context-menu>
|
</div>
|
</template>
|
|
<script>
|
const minWidth = 200,
|
maxWidth = 600;
|
|
import MenuList from "@/components/menuList";
|
import ContextMenu from "@/components/contextMenu";
|
import { getStation } from "./apis";
|
|
export default {
|
name: "App",
|
components: {
|
MenuList,
|
ContextMenu,
|
},
|
data() {
|
return {
|
path: "",
|
startX: 0,
|
leftW: 0,
|
stationData: [],
|
contextMenu: {
|
x: 0,
|
y: 0,
|
visible: false,
|
},
|
disabledList: [],
|
};
|
},
|
methods: {
|
select() {
|
window.api.send("open-file-dialog");
|
},
|
onMouseDown(e) {
|
// const el = e.target;
|
this.startX = e.clientX;
|
this.leftW = this.$refs.left.clientWidth;
|
document.addEventListener("mousemove", this.onMouseMove);
|
document.addEventListener("mouseup", this.onMouseUp);
|
},
|
onMouseUp() {
|
// this.$refs.handle.style.background = 'transparent';
|
// document.removeEventListener('mousedown', this.onMouseDown);
|
document.removeEventListener("mousemove", this.onMouseMove);
|
},
|
onMouseMove(e) {
|
const el = this.$refs.handle;
|
const left = this.$refs.left;
|
const endX = e.clientX;
|
const moveLen = endX - this.startX;
|
const CurBoxLen = this.leftW + moveLen;
|
if (CurBoxLen <= minWidth || CurBoxLen >= maxWidth) {
|
return;
|
}
|
left.style.width = CurBoxLen + "px";
|
el.style.left = CurBoxLen + "px";
|
},
|
getStation() {
|
getStation().then((res) => {
|
const { code, data, data2 } = res.data;
|
let list = [];
|
if (code && data) {
|
console.log(1, data2);
|
list = this.formatData(data2);
|
}
|
this.stationData = list;
|
});
|
},
|
formatData(data) {
|
let res = data.map((v) => {
|
let sname2s = [];
|
v.sname2s.forEach((val) => {
|
if (val.station2 != "-") {
|
let children = [];
|
val.sname3s.forEach((item) => {
|
if (item.station3 != "-") {
|
children.push({
|
label: item.station3,
|
children: item.fileNames.map((item1) => ({
|
label: item1.fileName,
|
url: item1.fileUrl,
|
level: 3,
|
})),
|
level: 2,
|
});
|
} else {
|
children.push(
|
...item.fileNames.map((item1) => ({
|
label: item1.fileName,
|
url: item1.fileUrl,
|
level: 3,
|
}))
|
);
|
}
|
});
|
sname2s.push({
|
label: val.station2,
|
children,
|
level: 1,
|
});
|
} else {
|
sname2s.push(
|
...val.sname3s[0].fileNames.map((item) => ({
|
label: item.fileName,
|
url: item.fileUrl,
|
level: 3,
|
}))
|
);
|
}
|
});
|
return {
|
children: sname2s,
|
label: v.station1,
|
level: 0,
|
};
|
});
|
console.log(res);
|
return res;
|
},
|
handleNodeClick(obj) {
|
console.log(123, obj);
|
},
|
nodeContextClick($e, obj) {
|
console.log(obj);
|
const { clientX, clientY } = $e;
|
this.contextMenu.x = clientX;
|
let y = clientY;
|
let bodyHeight = document.body.clientHeight;
|
if (y + 180 > bodyHeight) {
|
y = bodyHeight - 180;
|
}
|
this.contextMenu.y = y;
|
switch (obj.level) {
|
case 0:
|
case 1:
|
case 2:
|
// 子站上按鼠标右键，不能“打开文件”、“新建根文件”
|
this.disabledList = [0, 11];
|
break;
|
case 3:
|
// 添加的测试文件上按鼠标右键，可以点击“打开文件”、“重命名”、“删除”
|
this.disabledList = [1, 2];
|
break;
|
default:
|
return false;
|
}
|
this.contextMenu.visible = true;
|
},
|
// 右键菜单
|
openContextMenu($e) {
|
// console.log($e, "context");
|
const {
|
clientX,
|
clientY,
|
target: { classList },
|
} = $e;
|
this.contextMenu.x = clientX;
|
let y = clientY;
|
let bodyHeight = document.body.clientHeight;
|
if (y + 180 > bodyHeight) {
|
y = bodyHeight - 180;
|
}
|
this.contextMenu.y = y;
|
if (classList.contains("file-list")) {
|
// 在空白处点击的右键 只能新建
|
this.disabledList = [0, 12, 2, 3, 4];
|
|
this.contextMenu.visible = true;
|
}
|
},
|
closeContextMenu() {
|
this.contextMenu.visible = false;
|
},
|
maskClick() {
|
this.closeContextMenu();
|
},
|
},
|
mounted() {
|
window.api.receive("selected-directory", (path) => {
|
this.path = path.filePaths;
|
});
|
let handle = this.$refs.handle;
|
handle.addEventListener("mousedown", this.onMouseDown);
|
this.getStation();
|
},
|
};
|
</script>
|
|
<style>
|
html,
|
body {
|
height: 100%;
|
margin: 0;
|
padding: 0;
|
overflow: hidden;
|
}
|
#app {
|
height: 100%;
|
font-family: Avenir, Helvetica, Arial, sans-serif;
|
-webkit-font-smoothing: antialiased;
|
-moz-osx-font-smoothing: grayscale;
|
text-align: center;
|
color: #000;
|
background: #fff;
|
}
|
ul,
|
li {
|
list-style: none;
|
margin: 0;
|
padding: 0;
|
user-select: none;
|
}
|
</style>
|
<style lang="less" scoped>
|
.main {
|
height: 100%;
|
position: relative;
|
display: flex;
|
}
|
.left {
|
width: 14em;
|
box-shadow: 1px 0 2px -1px #000;
|
/* background: rgba(200, 200, 200, .8); */
|
display: flex;
|
flex-direction: column;
|
.title {
|
background: #999;
|
padding: 4px;
|
}
|
.file-list {
|
flex: 1;
|
overflow-y: auto;
|
text-align: left;
|
/deep/ .el-tree {
|
color: #333;
|
display: inline-block;
|
.el-tree-node__content {
|
display: inline-block;
|
}
|
// .el-tree-node.is-expanded>.el-tree-node__children {
|
// display: inline-block;
|
// }
|
}
|
}
|
}
|
.handle {
|
width: 6px;
|
position: absolute;
|
top: 0;
|
bottom: 0;
|
left: 14em;
|
background: transparent;
|
cursor: col-resize;
|
}
|
.handle:hover {
|
background: rgba(200, 200, 200, 0.6);
|
}
|
.right {
|
/* background: rgba(0,0,0,.4); */
|
flex: 1;
|
}
|
.context-menu {
|
position: absolute;
|
z-index: 100;
|
background: #fff;
|
border: 1px #ccc solid;
|
border-radius: 4px;
|
padding: 4px;
|
.main-ul {
|
display: flex;
|
flex-direction: column;
|
.main-li {
|
cursor: pointer;
|
flex: 1;
|
border: 1px #ccc solid;
|
padding: 4px;
|
&:hover {
|
background: #f0f0f0;
|
}
|
& ~ .main-li {
|
margin-top: 2px;
|
}
|
}
|
}
|
}
|
.trans-mask {
|
position: fixed;
|
z-index: 99;
|
left: 0;
|
top: 0;
|
right: 0;
|
bottom: 0;
|
background: transparent;
|
}
|
</style>
|
