PC-application/component/statistics/area-data-panel3.js

(function(){
    Vue.component('area-data-panel',{
        template: `<div class="area-panel">\
                <div class="ui-grid bgc-ebebf5 panelTop">\
                    <img v-show="reqList.length!=1" @click="back" src="../../../images/fanhui_icon.png" width="18" height="18" class="mr10 vam">\
                    <div v-show="level==4" class="area-tab" :class="{\'active\': level==4 && (!lowLevel || lowLevel==3)}" @click="getLowCodeData(3)"><span>各区</span></div>\
                    <div v-show="level >= 3" class="area-tab" :class="{\'active\': (level==3 && lowLevel!=1) || lowLevel==2}" @click="getLowCodeData(2)"><span>社区</span></div>\
                    <div v-show="showTeamTab" class="area-tab" :class="{\'active\': level==2 || lowLevel==1}" @click="getLowCodeData(1)"><span>团队</span></div>\
                </div>\
                <table class="bottom-list-table mb20" id="listTable">\
                    <thead><tr>\
                        <th v-for="th in headers">{{th}}</th>\
                    </tr></thead>\
                    <tbody>\
                        <tr v-for="row in rows" class="data-row">\
                            <td v-for="(col, index) in row.cols">\
                                <span v-if="index==1&&level>2 && lowLevel != 1" :class="{\'toJump\':(index==1&&level>2 && lowLevel != 1)}" @click="getLowLeverData(row)">{{col}}</span>
                                <span v-else>{{col}}</span>\
                            </td>\
                        </tr>\
                    </tbody>\
                </table>\
            </div>`,
        props:[],
        data: function(){
            return {
                level: '',
                lowLevel: '',
                area: '',
                headers: [],
                rows: [],
                cityLevelNoShowTeamTab: false,
                districtLevelNoShowTeamTab: false,
                reqList:[]
            }
        },
        mounted: function(){
            var vm = this;
            EventBus.$on("render-area-data", function(arg){
                vm.level = arg.level;
                vm.lowLevel = arg.lowLevel;
                vm.area = arg.area;
                vm.headers = arg.headers;
                vm.rows = arg.rows;
                vm.cityLevelNoShowTeamTab = arg.cityLevelNoShowTeamTab;
                vm.districtLevelNoShowTeamTab = arg.districtLevelNoShowTeamTab;
                vm.reqList=arg.reqList
            })
        },
        computed: {
            showTeamTab: function(){
                if(this.cityLevelNoShowTeamTab){
                    if(this.level == 4){
                        return false;
                    }else{
                        if(this.districtLevelNoShowTeamTab){
                            if(this.level == 3){
                                return false;
                            }else{
                                return true;
                            }
                        }else{
                            return true;
                        }
                    }
                }else{
                    return true;
                }
            }
        },
        methods: {
            getLowLeverData: function(row){
                if(this.level > 2 && this.lowLevel != 1){
                    //跳转去下一级数据
                    if(this.lowLevel && (this.level - this.lowLevel) >= 2){
                        //从次级tab的内容查看再下一级的数据
                        this.level = this.level - 2;
                        this.lowLevel --;
                    }else{
                        this.level --;
                        this.lowLevel = '';
                    }
                    this.area = row.code;
                    this.areaTitle = row.name;
                    //触发组件监听事件,去父页面请求新的数据
                    this.$emit("getnewdata", {
                        level: this.level,
                        area: this.area,
                        areaTitle: this.areaTitle,
                        lowLevel: this.lowLevel,
                    });
                }else{
                    // //弹框显示团队信息
                    // Vuedals.Bus.$emit('new', {
                    //     title: '团队信息',
                    //     component: 'team-info',
                    //     props: {
                    //         teamId: row.code
                    //     }
                    // });
                }
            },
            back:function(){
                EventBus.$emit('back-click', {});
            },    
            getLowCodeData: function(code){
                if(code == 3){
                    this.lowLevel = '';
                }else{
                    this.lowLevel = code;
                }
                
                //触发组件监听事件,去父页面请求新的数据
                this.$emit("getnewdata", {
                    level: this.level,
                    area: this.area,
                    lowLevel: this.lowLevel
                });
            }
        }
    });
})()