From a9750e068b4cd62caf05f33ed9f83dd052de845b Mon Sep 17 00:00:00 2001
From: he wei <858544502@qq.com>
Date: 星期二, 20 九月 2022 08:49:17 +0800
Subject: [PATCH] UA 主菜单和右键菜单
---
src/App.vue | 314 ++++++++++++++++++++++++++++++++++++++++++++++++++-
1 files changed, 305 insertions(+), 9 deletions(-)
diff --git a/src/App.vue b/src/App.vue
index 55df315..081ac73 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,28 +1,324 @@
<template>
<div id="app">
- <img alt="Vue logo" src="./assets/logo.png">
- <HelloWorld msg="Welcome to Your Vue.js 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>
-import HelloWorld from './components/HelloWorld.vue'
+const minWidth = 200,
+ maxWidth = 600;
+
+import MenuList from "@/components/menuList";
+import ContextMenu from "@/components/contextMenu";
+import { getStation } from "./apis";
export default {
- name: 'App',
+ name: "App",
components: {
- HelloWorld
- }
-}
+ 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: #2c3e50;
- margin-top: 60px;
+ 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>
--
Gitblit v1.9.1