From af06df267a4a0691e0dd3a2f9714fb8c6b9ee745 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=AE=89=E8=99=B9=E7=9D=BF?= <297504645@qq.com>
Date: Thu, 20 Jul 2023 09:30:25 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A6=96=E9=A1=B5=E6=A0=91=E7=8A=B6=E5=BD=A2?=
 =?UTF-8?q?=E5=BC=8F=E6=9B=BF=E6=8D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/layout/components/Sidebar/index.vue   |   3 -
 PC/InterFace.Dash/src/permission.js           |   1 -
 PC/InterFace.Dash/src/router/index.js         |   1 -
 .../src/views/dashboard/index copy.vue        | 222 +++++++++++++++
 .../src/views/dashboard/index.vue             | 267 ++++--------------
 5 files changed, 275 insertions(+), 219 deletions(-)
 create mode 100644 PC/InterFace.Dash/src/views/dashboard/index copy.vue

diff --git a/PC/InterFace.Dash/src/layout/components/Sidebar/index.vue b/PC/InterFace.Dash/src/layout/components/Sidebar/index.vue
index 20140e0..e33aa38 100644
--- a/PC/InterFace.Dash/src/layout/components/Sidebar/index.vue
+++ b/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>
diff --git a/PC/InterFace.Dash/src/permission.js b/PC/InterFace.Dash/src/permission.js
index 57ff2dc..33c5468 100644
--- a/PC/InterFace.Dash/src/permission.js
+++ b/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,
diff --git a/PC/InterFace.Dash/src/router/index.js b/PC/InterFace.Dash/src/router/index.js
index 0a35e17..04dc6d3 100644
--- a/PC/InterFace.Dash/src/router/index.js
+++ b/PC/InterFace.Dash/src/router/index.js
@@ -98,7 +98,6 @@ export let constantRoutes = [
     }]
   }, 
 ]
-console.log(11111)
 
 /**
  * asyncRoutes
diff --git a/PC/InterFace.Dash/src/views/dashboard/index copy.vue b/PC/InterFace.Dash/src/views/dashboard/index copy.vue
new file mode 100644
index 0000000..cf7251a
--- /dev/null
+++ b/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) { // el为绑定的元素，binding为绑定给指令的对象
+                    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(){
+                // todo：用this.$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>
\ No newline at end of file
diff --git a/PC/InterFace.Dash/src/views/dashboard/index.vue b/PC/InterFace.Dash/src/views/dashboard/index.vue
index 7e08962..a099f66 100644
--- a/PC/InterFace.Dash/src/views/dashboard/index.vue
+++ b/PC/InterFace.Dash/src/views/dashboard/index.vue
@@ -1,221 +1,60 @@
 <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>
+    <div class="dashboardPage">
+        <el-tree 
+            :data="navList" 
+            :props="defaultProps" 
+            @node-click="goPage"
+        ></el-tree>
+    </div>
+</template>
     
-    <script>
-    import { mapGetters } from 'vuex'
-    export default {
-        directives: { 
-            // 页面宽度变化，重新计算总高度
-            resize: { // 指令的名称
-                bind(el, binding) { // el为绑定的元素，binding为绑定给指令的对象
-                    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(){
-            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(){
-                // todo：用this.$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>
+import { mapGetters } from 'vuex'
+export default {
+    name: 'Dashboard',
+    data() {
+        return {
+            navList:[],
+            defaultProps: {
+                children: 'children',
+                label: 'title'
             }
         }
-    }
-    </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;
-                            }
-                        }
+    },
+    computed: {
+        ...mapGetters([
+            'permission_routes'
+        ])
+    },
+    mounted(){
+        this.initData(this.permission_routes)
+    },
+    methods:{
+        initData(data){
+            data.forEach(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)
                 }
-            }
-    
-            /* 将内容块重排为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;
-            }
-        }
+                if(!item.hidden && item.children){
+                    this.initData(item.children)
+                }
+            })
+        },
+        goPage(item){
+            this.$router.push({name: item.name}) 
+        },
     }
-    </style>
\ No newline at end of file
+}
+</script>
+<style lang="scss" scoped>
+.dashboardPage{
+    padding:30px 10px;
+    background: #fff;
+}
+</style>
\ No newline at end of file