From 4e3d77dcbe421a4d6611ebcdd1ac3165cb36ad4b Mon Sep 17 00:00:00 2001
From: Surpriseplus <845948745@qq.com>
Date: 星期一, 06 二月 2023 14:59:33 +0800
Subject: [PATCH] 系统界面翻新，回车登录，综合展示菜单重复
---
src/views/datamanage/dataController.vue | 166 ++++++++++++++++++++++++++-----------------------------
1 files changed, 78 insertions(+), 88 deletions(-)
diff --git a/src/views/datamanage/dataController.vue b/src/views/datamanage/dataController.vue
index adf01f7..1ddb659 100644
--- a/src/views/datamanage/dataController.vue
+++ b/src/views/datamanage/dataController.vue
@@ -1,23 +1,26 @@
<template>
- <div class="mochaitmo_Box">
- <div class="left_tree">
- <el-card class="el-card-define">
- <div class="card_tree">
- <el-menu
- active-text-color="#ffd04b"
- class="el-menu-vertical-demo"
- :default-active="activeIndex"
- background-color="transparent"
- text-color="#fff"
- @select="handleselect"
- >
- <customElMenu :menuData="menuList"></customElMenu>
- </el-menu>
- </div>
- </el-card>
- </div>
- <div class="right_page">
- <el-card class="el-card-define">
+ <div class="contentBox">
+
+ <div
+ class="box"
+ ref="box"
+ >
+ <div class="left box_div">
+ <el-menu
+ :default-active="activeIndex"
+ background-color="transparent"
+ @select="handleselect"
+ >
+ <customElMenu :menuData="menuList"></customElMenu>
+ </el-menu>
+ </div>
+ <div
+ class="resize"
+ title="鏀剁缉渚ц竟鏍�"
+ >
+ 鈰�
+ </div>
+ <div class="mid box_div">
<data-updata v-if="setMenuFlag == 'dataUpdata'"></data-updata>
<catalogue-manage v-if="setMenuFlag == 'catalogueManage'"></catalogue-manage>
@@ -30,9 +33,11 @@
<data-loader v-if="setMenuFlag == 'dataLoader'"></data-loader>
<down-loader v-if="setMenuFlag == 'downLoader'"></down-loader>
<project-manage v-if="setMenuFlag == 'projectManage'"></project-manage>
- </el-card>
+ </div>
</div>
+
</div>
+
</template>
<script>
@@ -88,8 +93,55 @@
created() { },
mounted() {
this.getTreeData();
+ //宸﹀彸鎷栧嫊
+ this.dragControllerDiv();
},
methods: {
+ //宸﹀彸鎷栧嫊
+ dragControllerDiv: function () {
+ var resize = document.getElementsByClassName('resize');
+ var left = document.getElementsByClassName('left');
+ var mid = document.getElementsByClassName('mid');
+ var box = document.getElementsByClassName('box');
+ for (let i = 0; i < resize.length; i++) {
+ // 榧犳爣鎸変笅浜嬩欢
+ resize[i].onmousedown = function (e) {
+ //棰滆壊鏀瑰彉鎻愰啋
+ resize[i].style.background = '#818181';
+ var startX = e.clientX;
+ resize[i].left = resize[i].offsetLeft;
+ // 榧犳爣鎷栧姩浜嬩欢
+ document.onmousemove = function (e) {
+ var endX = e.clientX;
+ var moveLen = resize[i].left + (endX - startX); // 锛坋ndx-startx锛�=绉诲姩鐨勮窛绂汇�俽esize[i].left+绉诲姩鐨勮窛绂�=宸﹁竟鍖哄煙鏈�鍚庣殑瀹藉害
+ var maxT = box[i].clientWidth - resize[i].offsetWidth; // 瀹瑰櫒瀹藉害 - 宸﹁竟鍖哄煙鐨勫搴� = 鍙宠竟鍖哄煙鐨勫搴�
+
+ if (moveLen < 205) moveLen = 205; // 宸﹁竟鍖哄煙鐨勬渶灏忓搴︿负32px
+ if (moveLen > maxT - 300) moveLen = maxT - 300; //鍙宠竟鍖哄煙鏈�灏忓搴︿负150px
+
+ resize[i].style.left = moveLen; // 璁剧疆宸︿晶鍖哄煙鐨勫搴�
+
+ for (let j = 0; j < left.length; j++) {
+ left[j].style.width = moveLen + 'px';
+ mid[j].style.width = (box[i].clientWidth - moveLen - 10) + 'px';
+ }
+ };
+ // 榧犳爣鏉惧紑浜嬩欢
+ document.onmouseup = function (evt) {
+ //棰滆壊鎭㈠
+ resize[i].style.background = '#d6d6d6';
+ document.onmousemove = null;
+ document.onmouseup = null;
+ resize[i].releaseCapture && resize[i].releaseCapture(); //褰撲綘涓嶅湪闇�瑕佺户缁幏寰楅紶鏍囨秷鎭氨瑕佸簲璇ヨ皟鐢≧eleaseCapture()閲婃斁鎺�
+ };
+ resize[i].setCapture && resize[i].setCapture(); //璇ュ嚱鏁板湪灞炰簬褰撳墠绾跨▼鐨勬寚瀹氱獥鍙ｉ噷璁剧疆榧犳爣鎹曡幏
+ return false;
+ };
+ }
+ },
+
+
+
//鑾峰彇鏍�
async getTreeData() {
const data = await queryMenuTree();
@@ -106,14 +158,14 @@
return value.type == 1;
});
this.menuList = this.treeData(menuList);
-
+
this.setViewController(this.menuList[0]);
} else {
-
+
this.$message.error('鏆傛棤鑿滃崟鏍忔暟鎹�');
}
} else {
- this.$message.error('鎺ュ彛鎶ラ敊');
+ this.$message.error('鎺ュ彛鎶ラ敊');
}
// this.treeList = this.treeData(data.result);
@@ -140,8 +192,8 @@
return father.pid == 1; // 杩斿洖涓�绾ц彍鍗�
});
} else {
-
- this.$message.error('鏆傛棤鑿滃崟鏍忔暟鎹�');
+
+ this.$message.error('鏆傛棤鑿滃崟鏍忔暟鎹�');
}
},
@@ -162,66 +214,4 @@
};
</script>
-<style lang="less" scoped>
-.mochaitmo_Box {
- width: calc(100% - 20px);
- height: calc(100% - 20px);
- margin: 0;
- padding: 10px;
-
- .left_tree {
- width: 270px;
- height: 100%;
- position: relative;
- float: left;
- border-radius: 5px;
- }
- .el-card-define {
- height: 100%;
- background: #303030;
- border: 1px solid gray;
- padding: 1px !important;
- }
- .el-tree {
- background-color: transparent;
- }
- .card_tree {
- height: 100%;
- overflow-y: auto;
- }
- .el-card__body,
- .el-main {
- padding: 0px !important;
- height: 100%;
- }
- .right_page {
- width: calc(100% - 280px);
- height: 100%;
- background: #303030;
- position: relative;
- float: right;
- }
- /deep/.el-menu {
- border: transparent !important;
- }
- /deep/.el-submenu__title:hover {
- background: rgba(255, 255, 255, 0.3) !important;
- }
- /deep/ .el-submenu .el-menu-item:hover {
- background: rgba(255, 255, 255, 0.3) !important;
- }
- /deep/.el-textarea__inner {
- background: transparent;
- border-color: #fff !important;
- color: white;
- }
- /deep/.el-textarea .el-input__count {
- background: transparent;
- color: #fff !important;
- }
- /deep/ .el-card__body {
- padding: 0px !important;
- height: 100%;
- }
-}
-</style>
+
\ No newline at end of file
--
Gitblit v1.9.3