树列表 功能完善

whychdw

2019-07-24 9b8bf853abf6bcab5592913508d8ec3cb15c2440

树列表 功能完善

 package-lock.json

@@ -3924,6 +3924,14 @@
        "safer-buffer": "^2.1.0"
      }
    },
    "echarts": {
      "version": "4.2.1",
      "resolved": "https://registry.npmjs.org/echarts/-/echarts-4.2.1.tgz",
      "integrity": "sha512-pw4xScRPsLegD/cqEcoXRKeA2SD4+s+Kyo0Na166NamOWhzNl2yI5RZ2rE97tBlAopNmhyMeBVpAeD5qb+ee1A==",
      "requires": {
        "zrender": "4.0.7"
      }
    },
    "ee-first": {
      "version": "1.1.1",
      "resolved": "http://registry.npm.taobao.org/ee-first/download/ee-first-1.1.1.tgz",
@@ -11681,6 +11689,11 @@
          "dev": true
        }
      }
    },
    "zrender": {
      "version": "4.0.7",
      "resolved": "https://registry.npmjs.org/zrender/-/zrender-4.0.7.tgz",
      "integrity": "sha512-TNloHe0ums6zxbHfnaCryM61J4IWDajZwNq6dHk9vfWhhysO/OeFvvR0drBs/nbXha2YxSzfQj2FiCd6RVBe+Q=="
    }
  }
}

 package.json

@@ -9,6 +9,7 @@
  },
  "dependencies": {
    "core-js": "^2.6.5",
    "echarts": "^4.2.1",
    "iview": "^3.4.2",
    "jquery": "^3.4.1",
    "vue": "^2.6.10",

 src/components/DividerCard.vue

@@ -1,8 +1,8 @@
<template>
    <div class="component-container">
        <div class="divider-card">
        <div class="divider-card" style="margin-bottom: 32px;">
            <div class="divider-card-title center">{{title}}</div>
            <div class="divider-card-content">
            <div class="divider-card-content" :style="style">
                <slot><div class="center">暂无内容</div></slot>
            </div>
        </div>
@@ -14,6 +14,17 @@
        title: {
            type: [String, Number],
            default: '未知'
        },
        maxHeight: {
            type: String,
            default: '300px'
        }
    },
    data() {
        return {
            style: {
                maxHeight: this.maxHeight
            }
        }
    }
}
@@ -34,5 +45,6 @@
    }
    .divider-card-content {
        padding: 24px 8px;
        overflow-y: auto;
    }
</style>

 src/components/HTree.vue

@@ -1,36 +1,64 @@
<template>
    <div class="h-tree-wrapper">
        <div class="h-tree">
            <div class="tree-folder"
            v-for="(item, key) in data" :key="key"
            :class="{'folder-open': item.open}">
                <div class="tree-folder-header" @click="open(key)">
                    <span class="mrr16 md-add">+</span>
                    <span class="mrr16 md-del">-</span>
                    <a href="javascript:;">{{item.txt}}</a>
                </div>
                <div class="tree-folder-content">
                    <div class="tree-file"
                    v-for="(children,ckey) in item.childrens" :key="ckey">
                        <div class="tree-file-content">
                            <span class="mrr16">-</span><a href="javascript:;">{{children.txt}}</a>
        <divider-card 
        v-for="(item, key) in tree" :key="key"
        :title="item.title"
        :maxHeight="maxHeight">
            <div class="h-tree" style="margin-left: 32px;">
                <div class="tree-folder" :class="{'folder-open': item.open}">
                    <div class="tree-folder-header" @click="open(key)">
                        <span class="mrr16 md-add">+</span>
                        <span class="mrr16 md-del">-</span>
                        <a href="javascript:;">{{item.txt}}</a>
                    </div>
                    <div class="tree-folder-content">
                        <div class="tree-file"
                        v-for="(children,ckey) in item.childrens" :key="ckey">
                            <div class="tree-file-content" @click="handleClick(key, ckey)">
                                <span class="mrr16">-</span>
                                <a href="javascript:;"
                                :class="{'file-active':children.active}">{{children.txt}}</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        </divider-card>
    </div>
</template>
<script>
import DividerCard from  '../components/DividerCard';
import $ from 'jquery';
export default {
    components: {
        DividerCard
    },
    props:{
        data: {
            type: Array,
            required: true
        },
        maxHeight: {
            type: String,
            default: '300px'
        },
        exclude: {
            type: [Number, Boolean],
            default: true
        }
    },
    data() {
        return {}
        return {
            tree: []
        }
    },
    watch:{
        data: {
            handler: function(obj) {
                this.setTree();
            },
            deep: true
        }
    },
    filters: {
        typeFilter: function(childrens) {
@@ -42,15 +70,66 @@
        }
    },
    methods: {
        init: function(key) {
            var tree = this.tree;
            for(var i=0; i<tree.length; i++) {
                var _tree = tree[i];
                if(key == i) {
                    continue;
                }
                _tree.open = false;
            }
        },
        initSub: function() {
            var tree = this.tree;
            for(var i=0; i<tree.length; i++) {
                var _tree = tree[i];
                var childrens = _tree.childrens;
                for(var k=0; k<childrens.length; k++) {
                    var children = childrens[k];
                    children.active = false;
                }
            }
        },
        open: function(key) {
            var open = this.data[key].open;
            this.data[key].open = open?false:true;
            if(this.exclude) {
                this.init(key);
            }
            var open = this.tree[key].open;
            this.tree[key].open = open?false:true;
        },
        handleClick: function(key, ckey) {
            this.initSub();
            var childrens = this.tree[key].childrens;
            var file = childrens[ckey];
            file.active = true;
            // onsole.log(file);
            this.$emit('fileClick', file);
        },
        setTree: function() {       // 对树的数据进行处理
            var data = $.extend(true, [], this.data);
            for(var i=0; i<data.length; i++) {
                var _data = data[i];
                // 设置是否展开
                if(typeof(_data.open) == 'undefined') {
                    _data.open = false;
                }
                var childrens = _data.childrens;
                // 遍历子属性添加active属性
                for(var k=0; k<childrens.length; k++) {
                    var children = childrens[k];
                    // 设置是否展开
                    if(typeof(children.active) == 'undefined') {
                        children.active = false;
                    }
                }

            }
            this.tree = data;
        }
    },
    computed: {
        getType: function() {

        }
    mounted: function() {
        this.setTree();
    }
}
</script>
@@ -82,4 +161,11 @@
    .tree-folder.folder-open .tree-folder-content {
        display: block;
    }
    .tree-file-content a {
        display: inline-block;
        padding: 2px 8px;
    }
    .file-active {
        background-color: #B4C7E7;
    }
</style>

 src/views/monitor/index.vue

@@ -2,16 +2,11 @@
    <div class="layout">
        <Row>
            <i-col :xl="6" :xxl="5" span="10">
                <divider-card title="测试柜1" style="margin-left:16px;">
                    <h-tree 
                <h-tree 
                    style="margin-left: 32px;"
                    :data="test1"></h-tree>
                </divider-card>
                <divider-card title="测试柜1" style="margin-left:16px;" class="mrt32">
                    <h-tree 
                    style="margin-left: 32px;"
                    :data="test2"></h-tree>
                </divider-card>
                    :data="test1"
                    @fileClick="setPage"
                    maxHeight="450px"></h-tree>
            </i-col>
            <i-col :xl="18" :xxl="19" span="14">
                <router-view></router-view>
@@ -20,19 +15,73 @@
    </div>
</template>
<script>
import DividerCard from  '../../components/DividerCard';
import HTree from '../../components/HTree';
export default {
    components:{
       DividerCard,
       HTree 
    },
    data(){
        return {
            test1:[
                {
                    title: '测试柜1',
                    open: true,
                    txt: '测试用例1',
                    txt: '测试用例',
                    childrens:[
                        {
                            txt: '板卡DY0001',
                        },
                        {
                            txt: '板卡DY0002',
                        },
                        {
                            txt: '板卡DY0003',
                        },
                        {
                            txt: '板卡DY0004',
                        },
                        {
                            txt: '板卡DY0005',
                        },
                        {
                            txt: '板卡DY0006',
                        },
                        {
                            txt: '板卡DY0007',
                        },
                        {
                            txt: '板卡DY0008',
                        },
                        {
                            txt: '板卡DY0009',
                        },
                        {
                            txt: '板卡DY00010',
                        },
                        {
                            txt: '板卡DY00011',
                        },
                        {
                            txt: '板卡DY00012',
                        },
                        {
                            txt: '板卡DY00013',
                        },
                        {
                            txt: '板卡DY00014',
                        },
                        {
                            txt: '板卡DY00015',
                        },
                        {
                            txt: '板卡DY00016',
                        }
                    ]
                },
                {
                    title: '测试柜2',
                    open: false,
                    txt: '测试用例',
                    childrens:[
                        {
                            txt: '板卡DY0001',
@@ -73,58 +122,14 @@
                        {
                            txt: '板卡DY00013',
                        }
                        
                    ]
                }
            ],
            test2:[
                {
                    open: false,
                    txt: '测试用例2',
                    childrens:[
                        {
                            txt: '板卡DY0001',
                        },
                        {
                            txt: '板卡DY0002',
                        },
                        {
                            txt: '板卡DY0003',
                        },
                        {
                            txt: '板卡DY0004',
                        },
                        {
                            txt: '板卡DY0005',
                        },
                        {
                            txt: '板卡DY0006',
                        },
                        {
                            txt: '板卡DY0007',
                        },
                        {
                            txt: '板卡DY0008',
                        },
                        {
                            txt: '板卡DY0009',
                        },
                        {
                            txt: '板卡DY00010',
                        },
                        {
                            txt: '板卡DY00011',
                        },
                        {
                            txt: '板卡DY00012',
                        },
                        {
                            txt: '板卡DY00013',
                        }
                        
                    ]
                }
            ]
        }
    },
    methods: {
        setPage: function(file) {

        }
    }
}