优化异步路由，新增路由数组形成树并且动态挂载展示

src/Api/asyncRoute.js

@@ -0,0 +1,15 @@
+import axios from '@/axios/http';
+
+const URL = {
+    routes: 'routes/', //部门增删查改
+}
+
+/** 获取异步路由
+ * 
+ */
+export function getRoutes() {
+    return axios({
+        url: URL.routes,
+        method: 'get'
+    })
+}

src/App.vue

@@ -61,6 +61,7 @@
 import router from "./router";
 import { login, logout } from "@/Api/user";
 import { mapActions, mapGetters } from "vuex";
+import { getRoutes } from "@/Api/asyncRoute";
 export default {
   data() {
     return {
@@ -86,16 +87,14 @@ export default {
     ...mapGetters(["getterPermission"]),
   },
   created() {
-    //加载异步路由
-    let asyncRouters = [
-      {
-        path: "/asyncTest",
-        name: "asyncTest",
-        alias: "异步菜单",
-        component: () => import("@/views/asyncTest/asyncTest.vue"),
-      },
-    ];
-    this.asyncAddRouters(asyncRouters);
+    getRoutes().then((res) => {
+      console.log(res);
+      let ArrRoutes = res.data;
+      console.log("原数据", ArrRoutes);
+      let asyncRouters = this.treeRoutes(ArrRoutes);
+      console.log(asyncRouters);
+      this.asyncAddRouters(asyncRouters);
+    });
   },
   methods: {
     login() {
@@ -104,12 +103,12 @@ export default {
       login(this.user)
         .then((res) => {
           console.log(res);
-          if(res==undefined){
-            this.$Cookie.remove()
+          if (res == undefined) {
+            this.$Cookie.remove();
             this.$message({
-            type: "error",
-            message: res,
-          });
+              type: "error",
+              message: res,
+            });
           }
           this.$nextTick(() => {
             if (document.cookie !== "") {
@@ -154,6 +153,36 @@ export default {
       }
     },
     ...mapActions(["asyncAddRouters"]),
+    // allRoutes 全部路由对象 ，currentRoute当前点，routers存放点，ifAdd是否插入对象
+    treeRoutes(allRes) {
+      let result = allRes.reduce((prev, item) => {
+        //过滤每一行数据，转成自己想要的，这里重定义变量不要去改变item，为了item.url取值时候可以找的到。
+        let itemFilter = {
+          alias: item.alias,
+          component: () => import(`@/views/${item.url}`),
+          id: item.id,
+          name: item.name,
+          parent: item.parent_id,
+          path: item.path,
+        };
+        //prev 全部数据 item遍历到的一行数据
+        //判断遍历到的这个数据是否有父级，如果有在这父级下面插入子集，否则在转换为键值对象，键为自己的父级id
+        prev[itemFilter.parent]
+          ? prev[itemFilter.parent].push(itemFilter)
+          : (prev[itemFilter.parent] = [itemFilter]);
+        return prev;
+      }, {});
+      for (let prop in result) {
+        //遍历所有键
+        result[prop].forEach((item, i) => {
+          //遍历所有键的值，将所有子集插入到自己键，也就是父级的下面
+          result[item.id] ? (item.children = result[item.id]) : "";
+        });
+      }
+      //选中指定父级的树，null是顶级
+      result = result["null"];
+      return result;
+    },
   },
 };
 </script>

src/views/dynamicTable/components/transfer.vue

@@ -79,7 +79,7 @@ export default {
       console.log(value, direction, movedKeys);
     },
     pushUsers(){
-        console.log(确定);
+        console.log('确定按钮，之后还没写，等待后端完成');
     }
   }
 };

src/views/echarts/pie.vue

@@ -11,8 +11,8 @@ export default {
       option: {
         legend: {
           orient: "vertical", //图标排列方向
-          left: "right", //距离左边 靠左
-          orient:'horizontal',
+          left: "left", //距离左边 靠左
+          top:'center',
           // ["Apple", "Grapes", "Pineapples", "Oranges", "Bananas"]
           data: [], //上面可以选择的按钮
         },
@@ -23,8 +23,9 @@ export default {
           // {b}series.data.name {c}series.data.value
           // formatter: "{b}<br/>{c0}<br/>{a}<br/>{d}",
           formatter: (params) => {
-            console.log(params);
+            // console.log(params);
             return `
+              类型：${params.name}<br/>
               总金额：${params.value[0]} <br/>
               总个数：${params.value[1]}
           	`;
@@ -34,8 +35,11 @@ export default {
           {
             type: "pie",
             data: [],
-            avoidLabelOverlap: true,
-            roseType:'area'
+            left:'right',
+            roseType:'area', // area radius
+            width:'70%',
+            selectedMode:'single',
+            avoidLabelOverlap: true
           },
         ],
       },
@@ -45,11 +49,11 @@ export default {
     getStatistics().then((res) => {
       let data = res.data;
       this.option.legend.data = data.map((v) => {
-        return v.payment_type;
+        return v.payment_type.split('、')[1];
       });
       this.option.series[0].data = data.map((v) => {
         return {
-          name: v.payment_type,
+          name: v.payment_type.split('、')[1],
           value: [v.price_sum,v.payment_type_count],
         };
       });
@@ -61,6 +65,9 @@ export default {
       console.log(this.option);
       var Pie = echarts.init(document.getElementById("main"));
       Pie.setOption(this.option);
+      Pie.on('click',(params)=>{
+        console.log('点击图标内容',params);
+      })
     },
   },
 };