增加应用管理模块

src/pages/fwglList.vue

 <template>
   <div class="list_container">
-    <el-breadcrumb separator="/" class="bread_crumb">
-      <el-breadcrumb-item>我的服务</el-breadcrumb-item>
-      <el-breadcrumb-item>{{ pathName }}</el-breadcrumb-item>
-    </el-breadcrumb>
+    <div class="sevice_breadcrumb">
+      <el-breadcrumb separator="/">
+        <el-breadcrumb-item>我的服务</el-breadcrumb-item>
+        <el-breadcrumb-item>{{ pathName }}</el-breadcrumb-item>
+      </el-breadcrumb>
+    </div>
     <div class="table_container">
       <ces-table
         class="r_yhgl_table"
@@ -463,14 +465,12 @@ export default {
 </script>
 
 <style scoped>
-.bread_crumb {
-  margin: 20px;
-  font-size: 14px;
+.list_container {
+  padding: 0 20px;
 }
 .table_container {
   height: calc(100% - 75px);
   padding: 15px 20px;
-  margin: 0 20px;
   border-radius: 10px;
   overflow: hidden;
   background-color: #fff;

src/pages/yygl.vue

+<template>
+  <div class="yygl_container">
+    <side-nav-bar
+      :nav-list="navList"
+      :title-path="navList[0] && navList[0].path"
+    ></side-nav-bar>
+    <div class="main_container">
+      <router-view
+        :key="'type_' + $route.params.level + '_' + $route.params.type"
+      ></router-view>
+    </div>
+  </div>
+</template>
+
+<script>
+import sideNavBar from "@/components/side-nav-bar";
+import { mapState } from "vuex";
+
+export default {
+  components: {
+    sideNavBar,
+  },
+  data: () => ({
+    navList: [],
+  }),
+  computed: {
+    ...mapState({
+      yyglNav: "yyglNav",
+    }),
+  },
+  watch: {
+    "$route.fullPath"(path) {
+      this.initNavList();
+    },
+  },
+  methods: {
+    initNavList() {
+      let level = parseInt(this.$route.params.level);
+
+      this.navList = this.yyglNav[level].map((item, index) => ({
+        name: item,
+        path: `/yygl/${level}/${index}`,
+      }));
+    },
+  },
+  mounted() {
+    this.initNavList();
+  },
+};
+</script>
+
+<style scoped>
+.yygl_container {
+  height: calc(100vh - 84px);
+  display: flex;
+  justify-content: flex-start;
+  align-items: stretch;
+}
+.side_nav_bar {
+  width: 180px;
+  flex-shrink: 0;
+}
+.main_container {
+  width: calc(100% - 180px);
+  flex-grow: 1;
+  flex-shrink: 1;
+  background-color: #f6f7fb;
+  overflow: auto;
+}
+</style>

src/pages/yyglList.vue

+<template>
+  <div class="list_container">
+    <div class="sevice_breadcrumb">
+      <el-breadcrumb separator="/">
+        <el-breadcrumb-item>我的服务</el-breadcrumb-item>
+        <el-breadcrumb-item>{{ pathName }}</el-breadcrumb-item>
+      </el-breadcrumb>
+    </div>
+    <div class="table_container"></div>
+  </div>
+</template>
+
+<script>
+import cesTable from "@/components/table-um";
+import dialogAction from "@/components/dialog-action";
+import { mapState } from "vuex";
+
+export default {
+  data: () => ({
+    level: 0, // 用户等级
+    type: 0, // 访问的页面
+  }),
+  computed: {
+    ...mapState({
+      yyglNav: "yyglNav",
+    }),
+    pathName() {
+      return this.yyglNav[this.level][this.type];
+    },
+  },
+  components: {
+    cesTable,
+    dialogAction,
+  },
+  methods: {},
+  created() {
+    this.level = parseInt(this.$route.params.level);
+    this.type = parseInt(this.$route.params.type);
+  },
+};
+</script>
+
+<style scoped>
+.list_container {
+  padding: 0 20px;
+}
+.table_container {
+  height: calc(100% - 75px);
+  padding: 15px 20px;
+  border-radius: 10px;
+  overflow: hidden;
+  background-color: #fff;
+}
+.table_container .ces-table-page {
+  margin-top: 42px;
+}
+</style>

src/router/index.js

@@ -70,6 +70,19 @@ export default new Router({
             }, // 审批的服务 - 详情
           ],
         }, // 工作台 - 服务管理模块
+        {
+          path: "/yygl/:level", // 应用管理 level：用户等级
+          name: "yygl",
+          redirect: "/yygl/:level/0",
+          component: () => import("@/pages/yygl"),
+          children: [
+            {
+              path: "/yygl/:level/:type", // 应用管理列表页
+              name: "yyglList",
+              component: () => import("@/pages/yyglList"),
+            },
+          ],
+        }, // 工作台 - 应用管理模块
         {
           path: "/shop", // 服务超市
           name: "shop",

src/store/index.js

@@ -7,10 +7,15 @@ const store = new Vuex.Store({
     role: 1, // 0：普通用户，1：组织管理员，2：超级管理员
     serviceShopMenu: "shopDataList", // 服务超市侧边栏
     fwglNav: [
-      ["注册发布的服务", "申请的服务", "审批的服务", "云资源服务"], //普通用户
-      ["组织服务管理", "服务审批管理", "云资源管理"], //组织管理员
-      ["平台服务管理", "服务审批管理", "云资源管理"], //超级管理员
+      ["注册发布的服务", "申请的服务", "审批的服务", "云资源服务"], // 普通用户
+      ["组织服务管理", "服务审批管理", "云资源管理"], // 组织管理员
+      ["平台服务管理", "服务审批管理", "云资源管理"], // 超级管理员
     ], // 服务管理列表，onlyRead
+    yyglNav: [
+      ["应用仓库", "我部署的应用", "申请的应用", "审批的应用"], // 普通用户
+      ["应用仓库管理", "部署的应用", "应用审批管理"], // 组织管理员
+      ["平台应用管理", "应用部署管理", "应用审批管理"], // 超级管理员
+    ], // 应用管理列表，onlyRead
   },
   modules: {},
   mutations: {