PC-application/component/statistics/table-panel.js

(function(){
    Vue.component('table-panel',{
        template: '<div class="table-panel">\
    		<div class="flex table-tab-pane" v-if="!hastopbar">\
    			<div class="f_s_0 c-t-center pt20" style="width:40px;"><img v-show="reqlength&&reqlength>1" @click="back" src="../../../images/fanhui_icon.png" width="18" height="18"></div>\
    			<div class="f_g_1 table-tab-item" v-for="(item,index) in tabList" :key="index" @click="tabClick(index)" v-if="item.isShow">\
    				<div class="plr20" :class="{\'active\':tabActive==index}"><span>{{item.name}}</span></div>\
    			</div>\
    		</div>\
    		<div class="ptb20 plr25">\
    			<table class="table-content table-bordered table-striped mb20" id="listTable">\
	                <thead><tr>\
	                	<th class="c-t-center" v-if="firstTh">{{firstTh}}</th>\
	                    <th v-for="(th,i) in headers" :key="i" :class="i>=2?\'c-t-right\':\'\'">{{th.thead}}\
	                    	<el-tooltip class="item" effect="dark" :content="th.tip" placement="top" v-if="th.tip">\
						      <img class="c-position-a tip" src="../../../images/icon_wenhao2.png" alt="" style="top: 13px;left:70px;">\
						    </el-tooltip>\
	                    </th>\
	                </tr></thead>\
	                <tbody>\
	                    <tr v-if="tabledata.length>0" v-for="(row,index) in tabledata" :key="index" class="data-row">\
	                    	<td class="c-t-center" v-if="firstTh">{{row.rank}}</td>\
	                        <td v-for="(th,i) in headers" :key="i"  :class="{\'c-t-right\':i>=1,\'tdPointor\':!cantclick}" @click="getLowLevelData(row,th)">\
		                        {{row[th.param]}}\
	                        </td>\
	                    </tr>\
	                    <tr v-if="tabledata.length==0">\
	                        <td v-if="firstTh" :colspan="headers.length+1" class="c-t-center">无数据</td>\
	                        <td v-else :colspan="headers.length" class="c-t-center">无数据</td>\
	                    </tr>\
	                </tbody>\
	            </table>\
    		</div>\
        </div>',
        props:["index","tabledata","cantclick","hastopbar","reqlength"],
        data: function(){
            return {
            	tabList:[{name:"各区",level:"4",lowlevel:"",isShow:true},{name:"社区",level:"3",lowlevel:"2",isShow:true},{name:"团队",level:"2",lowlevel:"1",isShow:true}],
            	tabActive:0,
            	headers:[{thead:"排名",param:"name"},{thead:"名称",param:"name",tip:""},{thead:"",param:"address",tip:""}],
            	firstTh:"排名",
			}
        },
        mounted: function(){
        	var vm=this
            EventBus.$on("render-table-data", function(arg){
            	vm.firstTh=arg.firstTh||"排名"
            })
        },
        methods: {
        	initTable:function(arg){
	            var vm = this;
	            if(arg.tabList&&arg.tabList.length>0){
	            	vm.tabList=arg.tabList
	            }
	            if(arg.headers&&arg.headers.length>0){
	            	vm.headers=arg.headers
	            }
            	var showIndex=vm.tabList.length-arg.tabnumber||0  //小于这个值的tab隐藏
    			_.each(vm.tabList,function(item,index){  
    				if(index<showIndex){
    					item.isShow=false
    				}else{
    					item.isShow=true
    				}
    			})
				vm.tabActive=showIndex				
        		if(!vm.hastopbar){
        			vm.headers[0].thead=vm.tabList[vm.tabActive].name
        		}
        	},
        	tabClick:function(index){
            	var vm = this;
            	if(vm.tabActive != index){
	        		vm.tabActive = index
	        		//触发组件监听事件,去父页面请求新的数据
	                this.$emit("getnewdata", {
		                lowLevel: vm.tabList[index].lowlevel
	                });
            	}
        	},
            getLowLevelData: function(row,th){
            	var vm=this
            	if(th.canclick){  //点击名称有效
	            	if(vm.tabActive == vm.tabList.length-1){  
	            		if(vm.tabList[vm.tabActive].name=="团队"){ //tab在最后一级,显示团队信息
			                var title="团队信息"
		                	var size="md"
		                	var component='team-info'
		                	if(vm.index==27){
		                		title="团队信息和代预约记录"
		                		size="lg"
		                		component='team-info-dyy'
		                	}
		                    //弹框显示团队信息
		                    Vuedals.Bus.$emit('new', {
		                        title: title,
		                        component: component,
		                        props: {
		                            teamId: row.code,
		                            year: vm.year
		                        },
		                        size:size
		                    });
	            		}
	            	}else{
	            		vm.changeTab()
	            		//触发组件监听事件,去父页面请求新的数据
	                    this.$emit("getnewdata", {
	                        level: vm.tabList[vm.tabActive].level,
	                        area: row.code,
	                        areaTitle: row.name,
	                    });
	            	}
            	}
            },
            changeTab:function(arg){
            	var vm=this
            	var showIndex=0
            	if(arg){  //回退
	            	vm.tabActive--
	            	showIndex = _.findIndex(vm.tabList,{level:arg.level.toString()})
            	}else{   //下转
        			vm.tabActive++
            		showIndex = vm.tabActive
            	}
        		_.each(vm.tabList,function(item,index){
    				if(index<showIndex){
    					item.isShow=false
    				}else{
    					item.isShow=true
    				}
    			})
        		if(!vm.hastopbar){
        			vm.headers[0].thead=vm.tabList[vm.tabActive].name
        		}
          },
          back:function(){
          		//触发组件监听事件,去父页面请求新的数据
                this.$emit("backtobefore");
          },
        }
    });
})()