area-data-panel2.js 3.6 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283
  1. (function(){
  2. Vue.component('area-data-panel',{
  3. template: '<div class="area-panel">\
  4. <div class="area-tab-panel">\
  5. <div v-show="level==4" class="area-tab" :class="{\'active\': level==4 && (!lowLevel || lowLevel==3)}" @click="getLowCodeData(3)"><span>各区</span></div>\
  6. <div v-show="level >= 3" class="area-tab" :class="{\'active\': (level==3 && lowLevel!=1) || lowLevel==2}" @click="getLowCodeData(2)"><span>社区</span></div>\
  7. </div>\
  8. <table class="bottom-list-table mb20" id="listTable">\
  9. <thead><tr>\
  10. <th v-for="th in headers">{{th}}</th>\
  11. <th v-show="level>2 && lowLevel != 1" width="20"></th>\
  12. </tr></thead>\
  13. <tbody>\
  14. <tr v-for="row in rows" class="data-row" @click="getLowLeverData(row)">\
  15. <td v-for="(col, index) in row.cols" :class="{\'area-name\': index == 0}">\
  16. <div v-if="index==0" class="ranking" :class="{\'ranking1\': row.rank==1, \'ranking2\': row.rank==2, \'ranking3\': row.rank==3}">{{row.rank}}</div>\
  17. <div v-if="index==0" class="ui-col-1 c-nowrap-multi">{{col}}</div>\
  18. <span v-else>{{col}}</span>\
  19. </td>\
  20. <td v-show="level>2"><i class="fa fa-angle-right"></i></td>\
  21. </tr>\
  22. </tbody>\
  23. </table>\
  24. </div>',
  25. props:[],
  26. data: function(){
  27. return {
  28. level: '',
  29. lowLevel: '',
  30. area: '',
  31. headers: [],
  32. rows: []
  33. }
  34. },
  35. mounted: function(){
  36. var vm = this;
  37. EventBus.$on("render-area-data", function(arg){
  38. vm.level = arg.level;
  39. vm.lowLevel = arg.lowLevel;
  40. vm.area = arg.area;
  41. vm.headers = arg.headers;
  42. vm.rows = arg.rows;
  43. })
  44. },
  45. methods: {
  46. getLowLeverData: function(row){
  47. if(this.level > 2 && this.lowLevel != 1){
  48. //跳转去下一级数据
  49. if(this.lowLevel && (this.level - this.lowLevel) >= 2){
  50. //从次级tab的内容查看再下一级的数据
  51. this.level = this.level - 2;
  52. this.lowLevel --;
  53. }else{
  54. this.level --;
  55. }
  56. this.area = row.code;
  57. this.areaTitle = row.name;
  58. //触发组件监听事件,去父页面请求新的数据
  59. this.$emit("getnewdata", {
  60. level: this.level,
  61. area: this.area,
  62. areaTitle: this.areaTitle,
  63. lowLevel: this.lowLevel,
  64. });
  65. }
  66. },
  67. getLowCodeData: function(code){
  68. if(code == 3){
  69. this.lowLevel = '';
  70. }else{
  71. this.lowLevel = code;
  72. }
  73. //触发组件监听事件,去父页面请求新的数据
  74. this.$emit("getnewdata", {
  75. level: this.level,
  76. area: this.area,
  77. lowLevel: this.lowLevel
  78. });
  79. }
  80. }
  81. });
  82. })()