Browse Source

首页树状形式替换

noToken
安虹睿 1 year ago
parent
commit
af06df267a
  1. 3
      PC/InterFace.Dash/src/layout/components/Sidebar/index.vue
  2. 1
      PC/InterFace.Dash/src/permission.js
  3. 1
      PC/InterFace.Dash/src/router/index.js
  4. 222
      PC/InterFace.Dash/src/views/dashboard/index copy.vue
  5. 207
      PC/InterFace.Dash/src/views/dashboard/index.vue

3
PC/InterFace.Dash/src/layout/components/Sidebar/index.vue

@ -49,9 +49,6 @@ export default {
isCollapse() {
return !this.sidebar.opened
}
},
mounted(){
console.log(54,this.permission_routes)
}
}
</script>

1
PC/InterFace.Dash/src/permission.js

@ -48,7 +48,6 @@ router.beforeEach(async (to, from, next) => {
next()
}else{
const accessRoutes = await store.dispatch('permission/getApiColumnsNames')
console.log(accessRoutes)
router.addRoutes(accessRoutes)
next({
...to,

1
PC/InterFace.Dash/src/router/index.js

@ -98,7 +98,6 @@ export let constantRoutes = [
}]
},
]
console.log(11111)
/**
* asyncRoutes

222
PC/InterFace.Dash/src/views/dashboard/index copy.vue

@ -0,0 +1,222 @@
<template>
<!-- 瀑布流版本布局 + 高度随宽度调整变化 -->
<el-card class="homeMenuPage" v-resize="setMaxHeight" v-loading="loading">
<div class="firstMenuContain homeMenuPage-List">
<div
class="firstMenuItem menuItem"
v-for="(item,index) in navList"
:key="index"
>
<div class="firstTitle" v-if="item.meta">
<div class="icon"><svg-icon :icon-class="item.meta.icon" style="fill:currentColor; color:#fff;"/></div>
<div>{{item.meta.title}}</div>
</div>
<ul class="menuInfo" v-if="item.children && item.children.length > 0">
<li
v-for="(item2,index2) in item.children"
:key="index2"
>
<div class="title">
{{item2.meta.title}}
<i class="el-icon-arrow-right"></i>
</div>
<!-- 有下级菜单 -->
<div class="lastList" v-if="item2.children && item2.children.length > 0">
<div
v-for="(item3,index3) in item2.children"
:key="index3"
class="item"
>
<span @click="goPage(item3)">{{item3.meta.title}}</span>
</div>
</div>
<!-- 如果二级为最后一级统一格式补充到children中 -->
<div class="lastList" v-else>
<div class="item">
<span @click="goPage(item2)">{{item2.meta.title}}</span>
</div>
</div>
</li>
</ul>
</div>
<span class="firstMenuItem break"></span>
<span class="firstMenuItem break"></span>
<span class="firstMenuItem break"></span>
</div>
</el-card>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
directives: {
//
resize: { //
bind(el, binding) { // elbinding
let width = '', height = '';
function isReize() {
const style = document.defaultView.getComputedStyle(el);
if (width !== style.width || height !== style.height) {
binding.value(); //
}
width = style.width;
height = style.height;
}
el.__vueSetInterval__ = setInterval(isReize, 300);
},
unbind(el) {
clearInterval(el.__vueSetInterval__);
}
}
},
name: 'Dashboard',
data() {
return {
loading:true,
navList:[],
}
},
watch: {
permission_routes(val, oldVal) {
this.initData(val)
}
},
computed: {
...mapGetters([
'permission_routes'
])
},
mounted(){
console.log(90,this.permission_routes)
this.initData(this.permission_routes)
},
methods:{
initData(data){
data.forEach(item => {
if(!item.hidden && item.path !== '/') {
this.navList.push(item)
}
})
this.$nextTick(()=>{
this.setMaxHeight()
})
},
goPage(item){
this.$router.push({name: item.name})
},
setMaxHeight(){
// todothis.$route.path != /dashboard
console.log("setMaxHeight",this.$route.path)
if(document.getElementsByClassName("homeMenuPage-List").length <= 0){
return
}
let _items = document.getElementsByClassName("menuItem")
let _left = [];
let _right = [];
let _left_num = 0;
let _right_num = 0;
_items.forEach((item,key)=>{
//
if(key % 2 == 0){
_left.push(item.offsetHeight)
_left_num += Number(item.offsetHeight)
}
//
else{
_right.push(item.offsetHeight)
_right_num += Number(item.offsetHeight)
}
})
let _max = _left_num > _right_num ? _left_num : _right_num
_max += 20 * _items.length
document.getElementsByClassName("homeMenuPage-List")[0].style.height = _max + 'px'
this.loading = false
}
}
}
</script>
<style lang="scss" scoped>
$iconSize:26px;
.homeMenuPage{
height: 100%;
overflow: auto;
// padding: 20px 0;
}
.firstMenuContain {
display: flex;
flex-flow: column wrap;
align-content: space-between;
/*
* 且高度大于最高的列高 */
// height: 2500px;
.firstMenuItem {
width: calc(50% - 20px);
margin-bottom: 20px;
.firstTitle{
display: flex;
font-weight: bold;
font-size: 18px;
.icon{
background: #409eff;
color: #fff;
border-radius: 4px;
width: $iconSize;
height: $iconSize;
line-height: $iconSize;
overflow: hidden;
text-align: center;
margin-right: 10px;
}
}
.menuInfo{
background: #f9fafb;
margin: 20px 0;
padding: 5px 0;
li{
list-style: none;
display: flex;
padding-top: 10px;
.title{
width: 240px;
text-align: right;
font-weight: bold;
flex-shrink: 0;
.el-icon-arrow-right{
font-weight: bold;
font-size: 14px;
}
}
.lastList{
display: flex;
flex-wrap: wrap;
margin-left: 15px;
.item{
margin-right: 25px;
margin-bottom: 10px;
cursor: pointer;
&:hover{
color: #409eff;
}
}
}
}
}
/* 将内容块重排为4列 */
&:nth-of-type(2n+1) { order: 1; }
&:nth-of-type(2n) { order: 2; }
/* 强制换列 */
&.break {
flex-basis: 100%;
width: 0;
margin: 0;
content: "";
padding: 0;
}
}
}
</style>

207
PC/InterFace.Dash/src/views/dashboard/index.vue

@ -1,84 +1,24 @@
<template>
<!-- 瀑布流版本布局 + 高度随宽度调整变化 -->
<el-card class="homeMenuPage" v-resize="setMaxHeight" v-loading="loading">
<div class="firstMenuContain homeMenuPage-List">
<div
class="firstMenuItem menuItem"
v-for="(item,index) in navList"
:key="index"
>
<div class="firstTitle" v-if="item.meta">
<div class="icon"><svg-icon :icon-class="item.meta.icon" style="fill:currentColor; color:#fff;"/></div>
<div>{{item.meta.title}}</div>
<div class="dashboardPage">
<el-tree
:data="navList"
:props="defaultProps"
@node-click="goPage"
></el-tree>
</div>
<ul class="menuInfo" v-if="item.children && item.children.length > 0">
<li
v-for="(item2,index2) in item.children"
:key="index2"
>
<div class="title">
{{item2.meta.title}}
<i class="el-icon-arrow-right"></i>
</div>
<!-- 有下级菜单 -->
<div class="lastList" v-if="item2.children && item2.children.length > 0">
<div
v-for="(item3,index3) in item2.children"
:key="index3"
class="item"
>
<span @click="goPage(item3)">{{item3.meta.title}}</span>
</div>
</div>
<!-- 如果二级为最后一级统一格式补充到children中 -->
<div class="lastList" v-else>
<div class="item">
<span @click="goPage(item2)">{{item2.meta.title}}</span>
</div>
</div>
</li>
</ul>
</div>
<span class="firstMenuItem break"></span>
<span class="firstMenuItem break"></span>
<span class="firstMenuItem break"></span>
</div>
</el-card>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
directives: {
//
resize: { //
bind(el, binding) { // elbinding
let width = '', height = '';
function isReize() {
const style = document.defaultView.getComputedStyle(el);
if (width !== style.width || height !== style.height) {
binding.value(); //
}
width = style.width;
height = style.height;
}
el.__vueSetInterval__ = setInterval(isReize, 300);
},
unbind(el) {
clearInterval(el.__vueSetInterval__);
}
}
},
name: 'Dashboard',
data() {
return {
loading:true,
navList:[],
defaultProps: {
children: 'children',
label: 'title'
}
},
watch: {
permission_routes(val, oldVal) {
this.initData(val)
}
},
computed: {
@ -92,130 +32,29 @@
methods:{
initData(data){
data.forEach(item => {
if(!item.hidden && item.path !== '/') {
this.navList.push(item)
if(!item.hidden && item.path !== '/' && item.meta) {
let _item = {
title:item.meta.title,
name:item.name,
path:item.path,
children:item.children
}
this.navList.push(_item)
}
if(!item.hidden && item.children){
this.initData(item.children)
}
})
this.$nextTick(()=>{
this.setMaxHeight()
})
},
goPage(item){
this.$router.push({name: item.name})
},
setMaxHeight(){
// todothis.$route.path != /dashboard
console.log("setMaxHeight",this.$route.path)
if(document.getElementsByClassName("homeMenuPage-List").length <= 0){
return
}
let _items = document.getElementsByClassName("menuItem")
let _left = [];
let _right = [];
let _left_num = 0;
let _right_num = 0;
_items.forEach((item,key)=>{
//
if(key % 2 == 0){
_left.push(item.offsetHeight)
_left_num += Number(item.offsetHeight)
}
//
else{
_right.push(item.offsetHeight)
_right_num += Number(item.offsetHeight)
}
})
let _max = _left_num > _right_num ? _left_num : _right_num
_max += 20 * _items.length
document.getElementsByClassName("homeMenuPage-List")[0].style.height = _max + 'px'
this.loading = false
}
}
}
</script>
<style lang="scss" scoped>
$iconSize:26px;
.homeMenuPage{
height: 100%;
overflow: auto;
// padding: 20px 0;
}
.firstMenuContain {
display: flex;
flex-flow: column wrap;
align-content: space-between;
/*
* 且高度大于最高的列高 */
// height: 2500px;
.firstMenuItem {
width: calc(50% - 20px);
margin-bottom: 20px;
.firstTitle{
display: flex;
font-weight: bold;
font-size: 18px;
.icon{
background: #409eff;
color: #fff;
border-radius: 4px;
width: $iconSize;
height: $iconSize;
line-height: $iconSize;
overflow: hidden;
text-align: center;
margin-right: 10px;
}
}
.menuInfo{
background: #f9fafb;
margin: 20px 0;
padding: 5px 0;
li{
list-style: none;
display: flex;
padding-top: 10px;
.title{
width: 240px;
text-align: right;
font-weight: bold;
flex-shrink: 0;
.el-icon-arrow-right{
font-weight: bold;
font-size: 14px;
}
}
.lastList{
display: flex;
flex-wrap: wrap;
margin-left: 15px;
.item{
margin-right: 25px;
margin-bottom: 10px;
cursor: pointer;
&:hover{
color: #409eff;
}
}
}
}
}
/* 将内容块重排为4列 */
&:nth-of-type(2n+1) { order: 1; }
&:nth-of-type(2n) { order: 2; }
/* 强制换列 */
&.break {
flex-basis: 100%;
width: 0;
margin: 0;
content: "";
padding: 0;
}
}
.dashboardPage{
padding:30px 10px;
background: #fff;
}
</style>
Loading…
Cancel
Save