Skip to content

S
so-manage-ui
Commit 133893b6 authored by 赵伟庚's avatar 赵伟庚
Browse files
Options

update：菜单管理左侧树形，交互

parent b07a29b8
Hide whitespace changes
Inline Side-by-side
Showing with 348 additions and 22 deletions
src/assets/css/index.css
View file @ 133893b6
......@@ -326,9 +326,17 @@ div {
}
/* 设置tree的样式 */
.el-tree {
position: static!important;
}
.el-tree-node__content{
height: 36px;
}
.el-tree-node__content:hover {
background-image: linear-gradient(90deg,
rgba(255, 255, 255, 0.05) 83%,
rgba(0, 0, 0, 0.05) 86%);
}
/* .usrrole .el-tree-node:focus>.el-tree-node__content{
background: rgb(248, 249, 253) !important;
}
......@@ -1466,7 +1474,7 @@ border-radius:8px;
.flex_left {
background-color: #fff;
height: calc(100% - 20px);
height: calc(100% - 16px);
width: 320px;
box-shadow: 0px 1px 4px 0px
rgba(0, 7, 101, 0.15);
......@@ -1476,7 +1484,7 @@ border-radius:8px;
}
.flex_right {
background-color: #fff;
height: calc(100% - 20px);
height: calc(100% - 16px);
flex: 1;
box-shadow: 0px 1px 4px 0px
rgba(0, 7, 101, 0.15);
......@@ -1485,15 +1493,19 @@ border-radius:8px;
}
.tree::-webkit-scrollbar {
width: 5px;
height: 5px;
width: 6px;
height: 6px;
}
.tree::-webkit-scrollbar-thumb {
background: #bcc1d0;
border-radius: 10px;
height: 5px;
height: 6px;
}
.tree::-webkit-scrollbar-track {
background: transparent;
border-radius: 2px;
}
.label-text {
font-size: 14px;
color: #404a62;
}
src/page/main/config/dict/index.vue
View file @ 133893b6
......@@ -21,7 +21,7 @@
</div>
<div class="flex_right">
<div class="main_container">
<bg-filter-group @search="changeSearch" v-model="filter.search" placeholder="请输入能力名称">
<bg-filter-group @search="changeSearch" v-model="filter.search" placeholder="请输入关键字">
<template v-slot:left_action>
<div class="apaas_button">
<el-button class="register_btn" type="primary" @click="register">
......@@ -179,7 +179,7 @@ const state = reactive({
timer: null, // 定时器
headers: [
{
label: "业务分类名称",
label: "名称",
prop: "name",
},
{
......
src/page/main/develop/menu/index.vue
View file @ 133893b6
<template>
<div class="detail_container">
菜单管理
<div class="page_container">
<div class="bg-breadcrumb">
<el-breadcrumb separator="/">
<el-breadcrumb-item> 开发管理 </el-breadcrumb-item>
<el-breadcrumb-item > 菜单管理 </el-breadcrumb-item>
</el-breadcrumb>
</div>
<div class="flex_row">
<div class="flex_left">
<div class="tree_content">
<div class="search">
<el-input
v-model="search"
placeholder="请输入内容"
:prefix-icon="Search"
/>
</div>
<div class="tree">
<el-tree
:data="data"
:props="defaultProps"
@node-click="handleNodeClick"
:default-expand-all="true"
:highlight-current="true"
node-key="menu_id"
ref="menuTree"
>
<template #default="{ node, data }">
<div class="custom-tree-node" pointer-events="none">
<span
class="label-text text_clip"
:title="data.menu_name"
>{{ data.menu_name }}</span
>
</div>
<span class="tree-action-box">
<bg-icon
@click.stop="showAction($event, data,node)"
class="tree-more"
icon="#bg-ic-s-more"
></bg-icon>
</span>
</template>
</el-tree >
<Teleport to="body">
<div
class="tree-action"
ref="treeAction"
v-show="actionFlag"
:style="{ top: acTop, left: acLeft,bottom:acBottom }"
>
<div class="action" @click="fileAction(1,selectData,selectParentData)">
新建本级
</div>
<div class="action" @click="fileAction(2,selectData,selectParentData)">
新建下级
</div>
<div class="action" @click="fileAction(3,selectData,selectParentData)">
删除
</div>
<div class="action" :class="{'disable':moveIndex==0}" @click="fileAction(4,selectData,selectParentData,moveIndex==0)">
上移
</div>
<div class="action" :class="{'disable': !selectParentData ? moveIndex == data.length - 1 : moveIndex==selectParentData.Child.length-1}" @click="fileAction(5,selectData,selectParentData,!selectParentData ? moveIndex == data.length - 1 : moveIndex==selectParentData.Child.length-1)" >
下移
</div>
</div>
</Teleport>
</div>
</div>
</div>
<div class="flex_right">
<div class="main_container">
</div>
</div>
</div>
</div>
</template>
<script >
import { reactive, toRefs, ref, } from '@vue/reactivity'
import { getCurrentInstance } from 'vue'
import { computed, onBeforeMount } from '@vue/runtime-core'
<script setup>
import { Search } from '@element-plus/icons-vue'
import { reactive, toRefs, ref, nextTick, computed, onBeforeMount, onBeforeUnmount } from 'vue'
import { useRouter } from 'vue-router';
export default {
components: {
import { ElMessage } from 'element-plus'
import axios from '../../../../request/http.js'
const router = useRouter();
const menuTree = ref(null)
const treeAction = ref(null)
const acTop = ref('');
const acLeft = ref('');
const acBottom = ref('');
const actionFlag = ref(false)
const state = reactive({
data: [],
search: "",
selectData:null,
selectParentData:null,
treeAction,
menuTree,
bottomGap:30,//弹窗吸底高度
defaultProps: {
children: 'Child',
label: 'menu_name',
},
setup() {
actionDataIndex: 0,
})
const moveIndex = computed({
get: () => {
let index = 0
if(state.selectData) {
console.log(state.selectData)
findIndex(state.selectData.menu_id,state.data)
index = state.actionDataIndex
}
return index
}
})
const getMenuTree = () => {
axios
.get(`/apaas/system/v5/menu/tree`)
.then((res) => {
if (res.data.code == 200) {
state.data = res.data.data || []
nextTick().then(() => {
state.menuTree && state.menuTree.setCurrentKey(state.data[0].menu_id);
handleNodeClick(state.data[0]);
})
}else {
ElMessage.error(res.data.data)
}
})
}
const findIndex= (code,arr) => {
arr.forEach((e,i) => {
if (e.menu_id == code) {
state.actionDataIndex = i
console.log(e,i)
}else {
if (e.Child && e.Child.length > 0) {
findIndex(code,e.Child)
}
}
})
}
const showAction = (e, data,node) => {
acTop.value = ''
acLeft.value = ''
acBottom.value = ''
const rect = e.target.getBoundingClientRect(); //获取点击的dom的位置
var allHeight = document.body.scrollHeight
console.log(rect, data,node);
onBeforeMount(() => {
actionFlag.value = true;
state.selectData = data
if(node.parent.data.Child){
state.selectParentData = node.parent.data
}else{
//没有children则是最上层元素
state.selectParentData = null
}
nextTick().then(()=>{
setTimeout(()=>{
var height = window.getComputedStyle(state.treeAction).height
height = parseInt(height)
//判断弹窗位置是否超过屏幕，超过则吸底展示
if(height+rect.y - 17>allHeight-state.bottomGap){
acBottom.value = state.bottomGap+ "px";
acLeft.value = rect.x + 35 + "px";
}else{
acTop.value = rect.y - 17 + "px";
acLeft.value = rect.x + 35 + "px";
}
})
return {
...toRefs(),
})
};
const handleNodeClick = (data) => {
if (state.selectData && state.selectData.menu_id == data.menu_id) {
return
}
state.selectData = data
console.log(data)
closeAction()
}
const fileAction = (val,data,parent,disabled=false) => {
if (val == 1) {
console.log("新建本级", data ,parent,disabled)
test()
}else if (val == 2) {
console.log("新建下级",data,parent,disabled)
test()
}else if (val == 3) {
console.log("删除",data,parent,disabled)
test()
}else if (val == 4) {
console.log("上移",data,parent,disabled)
test()
if (disabled) {
return
}
},
test()
}else {
console.log("下移",data,parent,disabled)
if (disabled) {
return
}
test()
}
}
const test = () => {
console.log("执行了")
}
const closeAction = () => {
actionFlag.value = false;
}
onBeforeMount(()=>{
window.addEventListener("click", closeAction)
window.addEventListener("scroll", closeAction,true)
getMenuTree()
})
onBeforeUnmount(()=>{
window.removeEventListener('click', closeAction);
window.removeEventListener('scroll', closeAction);
})
const {
data,
search,
defaultProps,
selectParentData,
selectData,
} = toRefs(state)
</script>
<style lang="scss" scoped>
<style scoped>
.tree_content {
overflow: hidden;
height: calc(100% - 4px);
position: relative;
}
.search {
padding: 16px 16px 10px;
}
.tree {
overflow: auto;
height: calc(100% - 65px);
}
.tree :deep().el-tree-node .el-tree-node__content {
padding: 0 16px!important;
}
.tree :deep() .el-tree-node>.el-tree-node__children {
overflow: unset;
padding-left: 16px;
}
.tree-action-box {
display: none;
position: absolute;
right: 0px;
background-color: #f2f3f7;
width: 44px;
text-align: center;
height: 36px;
line-height: 36px;
}
.tree .el-tree-node__content:hover .tree-action-box {
display: inline-block;
}
.tree-more {
font-size: 12px;
color: #3759be;
}
.tree-action {
width: 144px;
background-color: #ffffff;
box-shadow: 0px 1px 4px 0px rgba(0, 7, 101, 0.15);
padding: 4px 0;
border-radius: 4px;
position: fixed;
z-index: 9;
}
.tree-action .action {
width: 100%;
height: 34px;
line-height: 34px;
padding-left: 16px;
font-size: 14px;
color: #202531;
cursor: pointer;
}
.tree-action .action:hover {
background-color: #f2f3f7;
color: #3759be;
}
.tree-action .disable{
cursor: not-allowed;
color: #616f94;
}
.tree-action .disable:hover{
background-color: #fff;
color: #616f94;
}
.main_container {
padding: 15px;
height: 100%;
}
.table_container {
height: calc(100% - 30px);
overflow: auto;
}
.pagination_box {
position: sticky;
margin-top: 16px;
bottom: 0px;
background-color: #fff;
z-index: 1024;
height: 40px;
line-height: 40px;
padding-top: 8px;
}
.bg-pagination {
bottom: unset
}
</style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment