统计图表导航栏顺序问题

src/views/statisticsCharts/components/statisticsTabs.vue

@@ -1,22 +1,55 @@
 <template>
   <div class="statistics-tabs">
-    <el-row :gutter="16" type="flex">
-      <el-col v-for="(tab, index) in newTabList" :key="index" :span="4">
-        <el-dropdown v-if="tab.children && tab.children.length" placement="bottom" @command="commandHandler">
+    <el-row
+      :gutter="16"
+      type="flex"
+    >
+      <el-col
+        v-for="(tab, index) in newTabList"
+        :key="index"
+        :span="4"
+      >
+        <el-dropdown
+          v-if="tab.children && tab.children.length"
+          placement="bottom"
+          @command="commandHandler"
+        >
           <div :class="['tab-bar', { 'tab-active': activeIndex === index }]">
-            <img class="tab-icon" :src="activeIndex === index ? activeIcon : defaultIcon" :alt="tab.title" />
-            <el-tooltip :content="tab.title" placement="top">
+            <img
+              class="tab-icon"
+              :src="activeIndex === index ? activeIcon : defaultIcon"
+              :alt="tab.title"
+            />
+            <el-tooltip
+              :content="tab.title"
+              placement="top"
+            >
               <span class="tab-title">{{ tab.title }}</span>
             </el-tooltip>
             <i class="icon-arrow el-icon-caret-bottom" />
           </div>
           <el-dropdown-menu slot="dropdown">
-            <el-dropdown-item v-for="(childTab, childIndex) in tab.children" :key="childIndex" :command="[tab.path, childTab.path]">{{ childTab.title }}</el-dropdown-item>
+            <el-dropdown-item
+              v-for="(childTab, childIndex) in tab.children"
+              :key="childIndex"
+              :command="[tab.path, childTab.path]"
+            >{{ childTab.title }}</el-dropdown-item>
           </el-dropdown-menu>
         </el-dropdown>
-        <div v-else :class="['tab-bar tab-bar-single', { 'tab-active': activeIndex === index }]" @click="clickHandler(tab.path)">
-          <img class="tab-icon" :src="activeIndex === index ? activeIcon : defaultIcon" :alt="tab.title" />
-          <el-tooltip :content="tab.title" placement="top">
+        <div
+          v-else
+          :class="['tab-bar tab-bar-single', { 'tab-active': activeIndex === index }]"
+          @click="clickHandler(tab.path)"
+        >
+          <img
+            class="tab-icon"
+            :src="activeIndex === index ? activeIcon : defaultIcon"
+            :alt="tab.title"
+          />
+          <el-tooltip
+            :content="tab.title"
+            placement="top"
+          >
             <span class="tab-title">{{ tab.title }}</span>
           </el-tooltip>
         </div>
@@ -27,215 +60,207 @@
 
 <script>
 export default {
-  name: "StatisticsTabs",
+  name: 'StatisticsTabs',
   data() {
     return {
-      defaultIcon: require("@/assets/nav/ic_statistical_top_default.png"),
-      activeIcon: require("@/assets/nav/ic_statistical_top_check.png"),
+      defaultIcon: require('@/assets/nav/ic_statistical_top_default.png'),
+      activeIcon: require('@/assets/nav/ic_statistical_top_check.png'),
       tabList: [
         {
-          title: "航司行李相关统计",
-          path: "/statisticsCharts/airlineCompany",
-          roles: ["airline_baggage_statistics"],
+          title: '航司行李相关统计',
+          path: '/statisticsCharts/airlineCompany',
+          roles: ['airline_baggage_statistics'],
           children: [
             {
-              path: "flight",
-              title: "航班量统计",
+              path: 'flight',
+              title: '航班量统计'
             },
             {
-              path: "baggage",
-              title: "行李量统计",
+              path: 'baggage',
+              title: '行李量统计'
             },
             {
-              path: "baggagePassenger",
-              title: "行李旅客量统计",
+              path: 'baggagePassenger',
+              title: '行李旅客量统计'
             },
             {
-              path: "specialBaggage",
-              title: "特殊行李量统计",
+              path: 'specialBaggage',
+              title: '特殊行李量统计'
             },
             {
-              path: "baggageAverage",
-              title: "平均行李量统计",
+              path: 'baggageAverage',
+              title: '平均行李量统计'
             },
             {
-              path: "abnormalBaggage",
-              title: "异常行李量统计",
+              path: 'abnormalBaggage',
+              title: '异常行李量统计'
             },
             {
-              path: "complaintBaggage",
-              title: "投诉行李量统计",
+              path: 'complaintBaggage',
+              title: '投诉行李量统计'
             },
             {
-              path: "compensationBaggage",
-              title: "赔偿行李量统计",
+              path: 'compensationBaggage',
+              title: '赔偿行李量统计'
             },
             {
-              path: "compensation",
-              title: "赔偿金额统计",
-            },
-          ],
+              path: 'compensation',
+              title: '赔偿金额统计'
+            }
+          ]
         },
         {
-          path: "/statisticsCharts/passengerClassification",
-          title: "旅客分类统计",
-          roles: ["passenger_luggage_classification_statistics"],
+          path: '/statisticsCharts/passengerClassification',
+          title: '旅客分类统计',
+          roles: ['passenger_luggage_classification_statistics'],
           children: [
             {
-              path: "baggage",
-              title: "行李量统计",
+              path: 'baggage',
+              title: '行李量统计'
             },
             {
-              path: "baggagePassenger",
-              title: "行李旅客量统计",
+              path: 'baggagePassenger',
+              title: '行李旅客量统计'
             },
             {
-              path: "specialBaggage",
-              title: "特殊行李量统计",
+              path: 'specialBaggage',
+              title: '特殊行李量统计'
             },
             {
-              path: "abnormalBaggage",
-              title: "异常行李量统计",
+              path: 'abnormalBaggage',
+              title: '异常行李量统计'
             },
             {
-              path: "complaintBaggage",
-              title: "投诉行李量统计",
+              path: 'complaintBaggage',
+              title: '投诉行李量统计'
             },
             {
-              path: "compensationBaggage",
-              title: "赔偿行李量统计",
+              path: 'compensationBaggage',
+              title: '赔偿行李量统计'
             },
             {
-              path: "compensation",
-              title: "赔偿金额统计",
-            },
-          ],
+              path: 'compensation',
+              title: '赔偿金额统计'
+            }
+          ]
         },
         {
-          path: "/statisticsCharts/flightClassification",
-          title: "航班分类相关统计",
-          roles: ["statistics_related_to_flight_classification"],
+          path: '/statisticsCharts/flightClassification',
+          title: '航班分类相关统计',
+          roles: ['statistics_related_to_flight_classification'],
           children: [
             {
-              path: "flight",
-              title: "航班量统计",
+              path: 'flight',
+              title: '航班量统计'
             },
             {
-              path: "baggage",
-              title: "行李量统计",
+              path: 'baggage',
+              title: '行李量统计'
             },
             {
-              path: "passenger",
-              title: "行李旅客量统计",
-            },
-          ],
+              path: 'passenger',
+              title: '行李旅客量统计'
+            }
+          ]
         },
         {
-          path: "/statisticsCharts/node",
-          title: "扫描节点与位置分析",
-          roles: ["scanning_node_and_location_analysis"],
+          path: '/statisticsCharts/node',
+          title: '扫描节点与位置分析',
+          roles: ['scanning_node_and_location_analysis']
         },
         {
-          title: "报表统计",
-          path: "/statisticsCharts/report",
-          roles: ["report_statistics"],
+          title: '报表统计',
+          path: '/statisticsCharts/report',
+          roles: ['report_statistics'],
           children: [
             {
-              path: "reportStatistics",
-              title: "运送效率报表统计",
+              path: 'reportStatistics',
+              title: '运送效率报表统计'
             },
             {
-              path: "transitTable",
-              title: "中转专项报表统计",
+              path: 'transitTable',
+              title: '中转专项报表统计'
             },
             {
-              path: "ScanningStatistics",
-              title: "航站BRS扫描统计",
-            },
-          ],
+              path: 'ScanningStatistics',
+              title: '航站BRS扫描统计'
+            }
+          ]
         },
         {
-          title: "特殊赔偿异常分类统计",
-          path: "/statisticsCharts/specialClassification",
-          roles: ["special_compensation_exception_classification_statistics"],
+          title: '特殊赔偿异常分类统计',
+          path: '/statisticsCharts/specialClassification',
+          roles: ['special_compensation_exception_classification_statistics'],
           children: [
             {
-              path: "special",
-              title: "特殊行李分类统计",
+              path: 'special',
+              title: '特殊行李分类统计'
             },
             {
-              path: "abnormal",
-              title: "异常行李分类统计",
+              path: 'abnormal',
+              title: '异常行李分类统计'
             },
             {
-              path: "compensationBaggage",
-              title: "赔偿行李分类统计",
+              path: 'compensationBaggage',
+              title: '赔偿行李分类统计'
             },
             {
-              path: "compensation",
-              title: "赔偿金额分类统计",
-            },
-          ],
+              path: 'compensation',
+              title: '赔偿金额分类统计'
+            }
+          ]
         },
         {
-          path: "/statisticsCharts/statisticalAnalysis",
-          title: "统计分析",
-          roles: ["statistical_analysis"],
-        },
+          path: '/statisticsCharts/statisticalAnalysis',
+          title: '统计分析',
+          roles: ['statistical_analysis']
+        }
       ],
-      activeIndex: null,
-    };
+      activeIndex: null
+    }
+  },
+  computed: {
+    newTabList() {
+      const auths = JSON.parse(sessionStorage.getItem('userAuthList'))
+      return this.tabList.filter(tab => auths.some(auth => tab.roles.includes(auth)))
+    }
   },
   watch: {
-    "$route.path": {
+    '$route.path': {
       handler(path) {
-        let activeIndex = null;
+        let activeIndex = null
         this.tabList.some((tab, index) => {
           if (path.includes(tab.path)) {
-            activeIndex = index;
-            return true;
+            activeIndex = index
+            return true
           }
-        });
-        this.activeIndex = activeIndex;
+        })
+        this.activeIndex = activeIndex
       },
-      immediate: true,
-    },
-  },
-  computed: {
-    newTabList() {
-      const auths = JSON.parse(sessionStorage.getItem("userAuthList"));
-      const datas = [];
-      auths.forEach((element) => {
-        this.tabList.some((p) => {
-          if (element == p.roles) {
-            datas.push(p);
-          }
-        });
-      });
-      return datas;
-    },
+      immediate: true
+    }
   },
   methods: {
     commandHandler(pathArray) {
-      if (pathArray.some((path) => !path)) {
-        this.$message.info("开发中");
-        return;
+      if (pathArray.some(path => !path)) {
+        this.$message.info('开发中')
+        return
       }
       this.$router.push({
-        path: pathArray.join("/"),
-      });
+        path: pathArray.join('/')
+      })
     },
     clickHandler(path) {
       if (!path) {
-        this.$message.info("开发中");
-        return;
+        this.$message.info('开发中')
+        return
       }
       this.$router.push({
-        path,
-      });
-    },
-  },
-};
+        path
+      })
+    }
+  }
+}
 </script>
 
 <style lang="scss" scoped>
@@ -270,7 +295,7 @@ export default {
         padding-left: 12px;
         padding-right: 8px;
         font-size: 14px;
-        font-family: Helvetica, "Microsoft YaHei";
+        font-family: Helvetica, 'Microsoft YaHei';
         font-weight: bold;
         color: #101116;
         letter-spacing: 0;