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

<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>