1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283 |
- (function(){
- Vue.component('area-data-panel',{
- template: '<div class="area-panel">\
- <div class="area-tab-panel">\
- <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>\
- <table class="bottom-list-table mb20" id="listTable">\
- <thead><tr>\
- <th v-for="th in headers">{{th}}</th>\
- <th v-show="level>2 && lowLevel != 1" width="20"></th>\
- </tr></thead>\
- <tbody>\
- <tr v-for="row in rows" class="data-row" @click="getLowLeverData(row)">\
- <td v-for="(col, index) in row.cols" :class="{\'area-name\': index == 0}">\
- <div v-if="index==0" class="ranking" :class="{\'ranking1\': row.rank==1, \'ranking2\': row.rank==2, \'ranking3\': row.rank==3}">{{row.rank}}</div>\
- <div v-if="index==0" class="ui-col-1 c-nowrap-multi">{{col}}</div>\
- <span v-else>{{col}}</span>\
- </td>\
- <td v-show="level>2"><i class="fa fa-angle-right"></i></td>\
- </tr>\
- </tbody>\
- </table>\
- </div>',
- props:[],
- data: function(){
- return {
- level: '',
- lowLevel: '',
- area: '',
- headers: [],
- rows: []
- }
- },
- 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;
- })
- },
- 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.area = row.code;
- this.areaTitle = row.name;
- //触发组件监听事件,去父页面请求新的数据
- this.$emit("getnewdata", {
- level: this.level,
- area: this.area,
- areaTitle: this.areaTitle,
- lowLevel: this.lowLevel,
- });
- }
- },
- getLowCodeData: function(code){
- if(code == 3){
- this.lowLevel = '';
- }else{
- this.lowLevel = code;
- }
-
- //触发组件监听事件,去父页面请求新的数据
- this.$emit("getnewdata", {
- level: this.level,
- area: this.area,
- lowLevel: this.lowLevel
- });
- }
- }
- });
- })()
|