From f2d05d19da6fbe61efc6a24bbf35a2fd2db607e9 Mon Sep 17 00:00:00 2001
From: xuyiming <xuyiming@bd-apaas.com>
Date: Mon, 11 May 2020 14:07:28 +0800
Subject: [PATCH] up pages

---
 src/pages/fwgl.vue     |  65 +----
 src/pages/fwglList.vue | 585 +++++++++++++++++++++--------------------
 src/store/index.js     |  17 +-
 3 files changed, 320 insertions(+), 347 deletions(-)

diff --git a/src/pages/fwgl.vue b/src/pages/fwgl.vue
index bd9d043..f3ae8e8 100644
--- a/src/pages/fwgl.vue
+++ b/src/pages/fwgl.vue
@@ -14,6 +14,7 @@
 
 <script>
 import sideNavBar from "@/components/side-nav-bar";
+import { mapState } from "vuex";
 
 export default {
   components: {
@@ -22,6 +23,11 @@ export default {
   data: () => ({
     navList: [],
   }),
+  computed: {
+    ...mapState({
+      fwglNav: "fwglNav",
+    }),
+  },
   watch: {
     "$route.fullPath"(path) {
       this.initNavList();
@@ -31,61 +37,10 @@ export default {
     initNavList() {
       let level = parseInt(this.$route.params.level);
 
-      // 普通用户
-      if (level == 0) {
-        this.navList = [
-          {
-            name: "注册发布的服务",
-            path: `/fwgl/list/${level}/0`,
-          },
-          {
-            name: "申请的服务",
-            path: `/fwgl/list/${level}/1`,
-          },
-          {
-            name: "审批的服务",
-            path: `/fwgl/list/${level}/2`,
-          },
-          {
-            name: "云资源服务",
-            path: `/fwgl/list/${level}/3`,
-          },
-        ];
-      }
-      // 组织管理员
-      else if (level == 1) {
-        this.navList = [
-          {
-            name: "组织服务管理",
-            path: `/fwgl/list/${level}/0`,
-          },
-          {
-            name: "服务审批管理",
-            path: `/fwgl/list/${level}/1`,
-          },
-          {
-            name: "云资源管理",
-            path: `/fwgl/list/${level}/2`,
-          },
-        ];
-      }
-      // 超级管理员
-      else if (level == 2) {
-        this.navList = [
-          {
-            name: "平台服务管理",
-            path: `/fwgl/list/${level}/0`,
-          },
-          {
-            name: "服务审批管理",
-            path: `/fwgl/list/${level}/1`,
-          },
-          {
-            name: "云资源管理",
-            path: `/fwgl/list/${level}/2`,
-          },
-        ];
-      }
+      this.navList = this.fwglNav[level].map((item, index) => ({
+        name: item,
+        path: `/fwgl/list/${level}/${index}`,
+      }));
     },
   },
   mounted() {
diff --git a/src/pages/fwglList.vue b/src/pages/fwglList.vue
index 13ff963..e2de7d3 100644
--- a/src/pages/fwglList.vue
+++ b/src/pages/fwglList.vue
@@ -2,14 +2,14 @@
   <div class="list_container">
     <el-breadcrumb separator="/" class="bread_crumb">
       <el-breadcrumb-item>我的服务</el-breadcrumb-item>
-      <el-breadcrumb-item>{{ $route.params.name }}</el-breadcrumb-item>
+      <el-breadcrumb-item>{{ pathName }}</el-breadcrumb-item>
     </el-breadcrumb>
     <div class="table_container">
       <ces-table
         class="r_yhgl_table"
         size="mini"
         url="tableData"
-        :detailsUrl="`/fwgl/servicedetail/${$route.params.level}/`"
+        :detailsUrl="`/fwgl/servicedetail/${level}/`"
         :border="false"
         :headers="headers"
         :searchShow="true"
@@ -39,9 +39,12 @@
 <script>
 import cesTable from "@/components/table-um";
 import dialogAction from "@/components/dialog-action";
+import { mapState } from "vuex";
 
 export default {
   data: () => ({
+    level: 0, // 用户等级
+    type: 0, // 访问的页面
     headers: [],
     url: "",
     detailsUrl: "ss/",
@@ -89,11 +92,301 @@ export default {
       },
     ],
   }),
+  computed: {
+    ...mapState({
+      fwglNav: "fwglNav",
+    }),
+    pathName() {
+      return this.fwglNav[this.level][this.type];
+    },
+  },
   components: {
     cesTable,
     dialogAction,
   },
   methods: {
+    initHeader() {
+      let level = this.level;
+      let type = this.type;
+
+      // 普通用户 --- 注册发布的服务
+      if (level == 0 && type == 0) {
+        this.headers = [
+          { label: "服务名称", prop: "name", type: "href", align: "left" },
+          { label: "服务领域", prop: "date", type: "", align: "center" },
+          { label: "开放程度", prop: "address", type: "", align: "center" },
+          { label: "服务描述", prop: "address", type: "", align: "left" },
+          {
+            label: "注册发布时间",
+            prop: "address",
+            type: "",
+            align: "center",
+          },
+          { label: "服务类型", prop: "address", type: "", align: "center" },
+          {
+            label: "操作",
+            type: "Button",
+            align: "center",
+            width: 240,
+            btnList: [
+              {
+                type: "action-edit",
+                label: "编辑",
+                line: "|",
+              },
+              {
+                type: "action-sold-out",
+                label: "申请下架",
+                line: "|",
+              },
+              {
+                type: "action-delete",
+                label: "删除",
+              },
+            ],
+          },
+        ];
+      }
+      // 普通用户 --- 申请的服务
+      else if (level == 0 && type == 1) {
+        this.headers = [
+          { label: "服务名称", prop: "name", type: "href", align: "left" },
+          { label: "服务领域", prop: "date", type: "", align: "center" },
+          { label: "开放程度", prop: "address", type: "", align: "center" },
+          { label: "服务描述", prop: "address", type: "", align: "left" },
+          { label: "申请时间", prop: "address", type: "", align: "center" },
+          { label: "服务类型", prop: "address", type: "", align: "center" },
+          { label: "申请状态", prop: "address", type: "", align: "center" },
+          {
+            label: "操作",
+            type: "Button",
+            align: "center",
+            btnList: [
+              {
+                type: "action-delete",
+                label: "删除",
+              },
+            ],
+          },
+        ];
+      }
+      // 普通用户 --- 审批的服务
+      else if (level == 0 && type == 2) {
+        this.headers = [
+          { label: "服务名称", prop: "name", type: "href", align: "left" },
+          { label: "服务领域", prop: "address", type: "", align: "center" },
+          { label: "开放程度", prop: "address", type: "", align: "center" },
+          { label: "请求方式", prop: "address", type: "", align: "center" },
+          { label: "服务描述", prop: "address", type: "", align: "left" },
+          { label: "审批时间", prop: "address", type: "", align: "center" },
+          { label: "服务类型", prop: "address", type: "", align: "center" },
+          { label: "审批状态", prop: "address", type: "", align: "center" },
+          {
+            label: "操作",
+            type: "Button",
+            align: "center",
+            width: 160,
+            btnList: [
+              {
+                type: "action-examine",
+                label: "审批",
+                line: "|",
+              },
+              {
+                type: "action-delete",
+                label: "删除",
+              },
+            ],
+          },
+        ];
+      }
+      // 普通用户 --- 云资源服务
+      else if (level == 0 && type == 3) {
+        this.headers = [
+          { label: "工作区域", prop: "name", type: "href", align: "center" },
+          { label: "网络环境", prop: "name", type: "", align: "center" },
+          { label: "CPU（核）", prop: "name", type: "", align: "center" },
+          { label: "内存（GB）", prop: "name", type: "", align: "center" },
+          { label: "资源总量（GB）", prop: "name", type: "", align: "center" },
+          { label: "实例数（个）", prop: "name", type: "", align: "center" },
+          { label: "申请时间", prop: "name", type: "", align: "center" },
+          { label: "申请状态", prop: "name", type: "", align: "center" },
+          {
+            label: "操作",
+            type: "Button",
+            align: "center",
+            width: 160,
+            btnList: [
+              {
+                type: "action-detail",
+                label: "查看详情",
+              },
+            ],
+          },
+        ];
+      }
+
+      // 组织管理员 --- 组织服务管理
+      else if (level == 1 && type == 0) {
+        this.headers = [
+          { label: "服务名称", prop: "name", type: "href", align: "left" },
+          { label: "服务领域", prop: "date", type: "", align: "center" },
+          { label: "开放程度", prop: "date", type: "", align: "center" },
+          { label: "请求方式", prop: "date", type: "", align: "center" },
+          { label: "服务描述", prop: "date", type: "", align: "left" },
+          { label: "注册发布时间", prop: "date", type: "", align: "center" },
+          { label: "服务类型", prop: "date", type: "", align: "center" },
+          { label: "服务状态", prop: "date", type: "", align: "center" },
+        ];
+      }
+      // 组织管理员 --- 服务审批管理
+      else if (level == 1 && type == 1) {
+        this.headers = [
+          { label: "服务名称", prop: "name", type: "href", align: "left" },
+          { label: "服务领域", prop: "date", type: "", align: "center" },
+          { label: "开放程度", prop: "date", type: "", align: "center" },
+          { label: "请求方式", prop: "date", type: "", align: "center" },
+          { label: "服务描述", prop: "date", type: "", align: "left" },
+          { label: "审批时间", prop: "date", type: "", align: "center" },
+          { label: "服务类型", prop: "date", type: "", align: "center" },
+          { label: "审批状态", prop: "date", type: "", align: "center" },
+          {
+            label: "操作",
+            type: "Button",
+            align: "center",
+            width: 160,
+            btnList: [
+              {
+                type: "action-examine",
+                label: "审批",
+                line: "|",
+              },
+              {
+                type: "action-delete",
+                label: "删除",
+              },
+            ],
+          },
+        ];
+      }
+      // 组织管理员 --- 云资源管理
+      else if (level == 1 && type == 2) {
+        this.headers = [
+          { label: "工作区域", prop: "name", type: "href", align: "center" },
+          { label: "网络环境", prop: "name", type: "", align: "center" },
+          { label: "CPU（核）", prop: "name", type: "", align: "center" },
+          { label: "内存（GB）", prop: "name", type: "", align: "center" },
+          { label: "资源总量（GB）", prop: "name", type: "", align: "center" },
+          { label: "实例数（个）", prop: "name", type: "", align: "center" },
+          { label: "使用用户", prop: "name", type: "", align: "center" },
+          { label: "用户申请时间", prop: "name", type: "", align: "center" },
+          {
+            label: "操作",
+            type: "Button",
+            align: "center",
+            width: 160,
+            btnList: [
+              {
+                type: "action-allot",
+                label: "分配",
+              },
+            ],
+          },
+        ];
+      }
+
+      // 超级管理员 --- 组织服务管理
+      else if (level == 2 && type == 0) {
+        this.headers = [
+          { label: "服务名称", prop: "name", type: "href", align: "left" },
+          { label: "服务领域", prop: "date", type: "", align: "center" },
+          { label: "开放程度", prop: "date", type: "", align: "center" },
+          { label: "请求方式", prop: "date", type: "", align: "center" },
+          { label: "服务描述", prop: "date", type: "", align: "left" },
+          { label: "注册发布时间", prop: "date", type: "", align: "center" },
+          { label: "服务类型", prop: "date", type: "", align: "center" },
+          {
+            label: "操作",
+            type: "Button",
+            align: "center",
+            width: 240,
+            btnList: [
+              {
+                type: "action-edit",
+                label: "编辑",
+                line: "|",
+              },
+              {
+                type: "action-sold-out-2",
+                label: "下架",
+                line: "|",
+              },
+              {
+                type: "action-delete",
+                label: "删除",
+              },
+            ],
+          },
+        ];
+      }
+      // 超级管理员 --- 服务审批管理
+      else if (level == 2 && type == 1) {
+        this.headers = [
+          { label: "服务名称", prop: "name", type: "href", align: "left" },
+          { label: "服务领域", prop: "date", type: "", align: "center" },
+          { label: "开放程度", prop: "date", type: "", align: "center" },
+          { label: "请求方式", prop: "date", type: "", align: "center" },
+          { label: "服务描述", prop: "date", type: "", align: "left" },
+          { label: "审批时间", prop: "date", type: "", align: "center" },
+          { label: "服务类型", prop: "date", type: "", align: "center" },
+          { label: "审批状态", prop: "date", type: "", align: "center" },
+          {
+            label: "操作",
+            type: "Button",
+            align: "center",
+            width: 160,
+            btnList: [
+              {
+                type: "action-examine",
+                label: "审批",
+                line: "|",
+              },
+              {
+                type: "action-delete",
+                label: "删除",
+              },
+            ],
+          },
+        ];
+      }
+      // 超级管理员 --- 云资源管理
+      else if (level == 2 && type == 2) {
+        this.headers = [
+          { label: "所属组织", prop: "name", type: "href", align: "center" },
+          { label: "CPU使用量", prop: "name", type: "", align: "center" },
+          { label: "内存使用量", prop: "name", type: "", align: "center" },
+          { label: "工作区域数量", prop: "name", type: "", align: "center" },
+          { label: "创建时间", prop: "name", type: "", align: "center" },
+          {
+            label: "操作",
+            type: "Button",
+            align: "center",
+            btnList: [
+              {
+                type: "action-delete",
+                label: "删除",
+              },
+            ],
+          },
+        ];
+      }
+
+      // Error
+      else {
+        this.headers = [];
+        throw Error("The page doesn't exist");
+      }
+    },
     deleteItem(item) {
       this.confirmOptions.title = "";
       this.confirmOptions.message = "是否删除该条服务？";
@@ -124,8 +417,7 @@ export default {
     },
     soldOutItem2(item) {
       this.confirmOptions.title = "提示";
-      this.confirmOptions.message =
-        "下架此服务会导致用户被迫暂停对服务的调用";
+      this.confirmOptions.message = "下架此服务会导致用户被迫暂停对服务的调用";
       this.confirmOptions.btnCancelText = "";
       this.confirmOptions.btnSubmitText = "确定";
       this.confirmOptions.confirmSubmit = () => {
@@ -150,287 +442,10 @@ export default {
       console.log(item.name);
     },
   },
-  mounted() {
-    let level = parseInt(this.$route.params.level);
-    let type = parseInt(this.$route.params.type);
-
-    // 普通用户 --- 注册发布的服务
-    if (level == 0 && type == 0) {
-      this.headers = [
-        { label: "服务名称", prop: "name", type: "href", align: "left" },
-        { label: "服务领域", prop: "date", type: "", align: "center" },
-        { label: "开放程度", prop: "address", type: "", align: "center" },
-        { label: "服务描述", prop: "address", type: "", align: "left" },
-        {
-          label: "注册发布时间",
-          prop: "address",
-          type: "",
-          align: "center",
-        },
-        { label: "服务类型", prop: "address", type: "", align: "center" },
-        {
-          label: "操作",
-          type: "Button",
-          align: "center",
-          width: 240,
-          btnList: [
-            {
-              type: "action-edit",
-              label: "编辑",
-              line: "|",
-            },
-            {
-              type: "action-sold-out",
-              label: "申请下架",
-              line: "|",
-            },
-            {
-              type: "action-delete",
-              label: "删除",
-            },
-          ],
-        },
-      ];
-    }
-    // 普通用户 --- 申请的服务
-    else if (level == 0 && type == 1) {
-      this.headers = [
-        { label: "服务名称", prop: "name", type: "href", align: "left" },
-        { label: "服务领域", prop: "date", type: "", align: "center" },
-        { label: "开放程度", prop: "address", type: "", align: "center" },
-        { label: "服务描述", prop: "address", type: "", align: "left" },
-        { label: "申请时间", prop: "address", type: "", align: "center" },
-        { label: "服务类型", prop: "address", type: "", align: "center" },
-        { label: "申请状态", prop: "address", type: "", align: "center" },
-        {
-          label: "操作",
-          type: "Button",
-          align: "center",
-          btnList: [
-            {
-              type: "action-delete",
-              label: "删除",
-            },
-          ],
-        },
-      ];
-    }
-    // 普通用户 --- 审批的服务
-    else if (level == 0 && type == 2) {
-      this.headers = [
-        { label: "服务名称", prop: "name", type: "href", align: "left" },
-        { label: "服务领域", prop: "address", type: "", align: "center" },
-        { label: "开放程度", prop: "address", type: "", align: "center" },
-        { label: "请求方式", prop: "address", type: "", align: "center" },
-        { label: "服务描述", prop: "address", type: "", align: "left" },
-        { label: "审批时间", prop: "address", type: "", align: "center" },
-        { label: "服务类型", prop: "address", type: "", align: "center" },
-        { label: "审批状态", prop: "address", type: "", align: "center" },
-        {
-          label: "操作",
-          type: "Button",
-          align: "center",
-          width: 160,
-          btnList: [
-            {
-              type: "action-examine",
-              label: "审批",
-              line: "|",
-            },
-            {
-              type: "action-delete",
-              label: "删除",
-            },
-          ],
-        },
-      ];
-    }
-    // 普通用户 --- 云资源服务
-    else if (level == 0 && type == 3) {
-      this.headers = [
-        { label: "工作区域", prop: "name", type: "href", align: "center" },
-        { label: "网络环境", prop: "name", type: "", align: "center" },
-        { label: "CPU（核）", prop: "name", type: "", align: "center" },
-        { label: "内存（GB）", prop: "name", type: "", align: "center" },
-        { label: "资源总量（GB）", prop: "name", type: "", align: "center" },
-        { label: "实例数（个）", prop: "name", type: "", align: "center" },
-        { label: "申请时间", prop: "name", type: "", align: "center" },
-        { label: "申请状态", prop: "name", type: "", align: "center" },
-        {
-          label: "操作",
-          type: "Button",
-          align: "center",
-          width: 160,
-          btnList: [
-            {
-              type: "action-detail",
-              label: "查看详情",
-            },
-          ],
-        },
-      ];
-    }
-
-    // 组织管理员 --- 组织服务管理
-    else if (level == 1 && type == 0) {
-      this.headers = [
-        { label: "服务名称", prop: "name", type: "href", align: "left" },
-        { label: "服务领域", prop: "date", type: "", align: "center" },
-        { label: "开放程度", prop: "date", type: "", align: "center" },
-        { label: "请求方式", prop: "date", type: "", align: "center" },
-        { label: "服务描述", prop: "date", type: "", align: "left" },
-        { label: "注册发布时间", prop: "date", type: "", align: "center" },
-        { label: "服务类型", prop: "date", type: "", align: "center" },
-        { label: "服务状态", prop: "date", type: "", align: "center" },
-      ];
-    }
-    // 组织管理员 --- 服务审批管理
-    else if (level == 1 && type == 1) {
-      this.headers = [
-        { label: "服务名称", prop: "name", type: "href", align: "left" },
-        { label: "服务领域", prop: "date", type: "", align: "center" },
-        { label: "开放程度", prop: "date", type: "", align: "center" },
-        { label: "请求方式", prop: "date", type: "", align: "center" },
-        { label: "服务描述", prop: "date", type: "", align: "left" },
-        { label: "审批时间", prop: "date", type: "", align: "center" },
-        { label: "服务类型", prop: "date", type: "", align: "center" },
-        { label: "审批状态", prop: "date", type: "", align: "center" },
-        {
-          label: "操作",
-          type: "Button",
-          align: "center",
-          width: 160,
-          btnList: [
-            {
-              type: "action-examine",
-              label: "审批",
-              line: "|",
-            },
-            {
-              type: "action-delete",
-              label: "删除",
-            },
-          ],
-        },
-      ];
-    }
-    // 组织管理员 --- 云资源管理
-    else if (level == 1 && type == 2) {
-      this.headers = [
-        { label: "工作区域", prop: "name", type: "href", align: "center" },
-        { label: "网络环境", prop: "name", type: "", align: "center" },
-        { label: "CPU（核）", prop: "name", type: "", align: "center" },
-        { label: "内存（GB）", prop: "name", type: "", align: "center" },
-        { label: "资源总量（GB）", prop: "name", type: "", align: "center" },
-        { label: "实例数（个）", prop: "name", type: "", align: "center" },
-        { label: "使用用户", prop: "name", type: "", align: "center" },
-        { label: "用户申请时间", prop: "name", type: "", align: "center" },
-        {
-          label: "操作",
-          type: "Button",
-          align: "center",
-          width: 160,
-          btnList: [
-            {
-              type: "action-allot",
-              label: "分配",
-            },
-          ],
-        },
-      ];
-    }
-
-    // 超级管理员 --- 组织服务管理
-    else if (level == 2 && type == 0) {
-      this.headers = [
-        { label: "服务名称", prop: "name", type: "href", align: "left" },
-        { label: "服务领域", prop: "date", type: "", align: "center" },
-        { label: "开放程度", prop: "date", type: "", align: "center" },
-        { label: "请求方式", prop: "date", type: "", align: "center" },
-        { label: "服务描述", prop: "date", type: "", align: "left" },
-        { label: "注册发布时间", prop: "date", type: "", align: "center" },
-        { label: "服务类型", prop: "date", type: "", align: "center" },
-        {
-          label: "操作",
-          type: "Button",
-          align: "center",
-          width: 240,
-          btnList: [
-            {
-              type: "action-edit",
-              label: "编辑",
-              line: "|",
-            },
-            {
-              type: "action-sold-out-2",
-              label: "下架",
-              line: "|",
-            },
-            {
-              type: "action-delete",
-              label: "删除",
-            },
-          ],
-        },
-      ];
-    }
-    // 超级管理员 --- 服务审批管理
-    else if (level == 2 && type == 1) {
-      this.headers = [
-        { label: "服务名称", prop: "name", type: "href", align: "left" },
-        { label: "服务领域", prop: "date", type: "", align: "center" },
-        { label: "开放程度", prop: "date", type: "", align: "center" },
-        { label: "请求方式", prop: "date", type: "", align: "center" },
-        { label: "服务描述", prop: "date", type: "", align: "left" },
-        { label: "审批时间", prop: "date", type: "", align: "center" },
-        { label: "服务类型", prop: "date", type: "", align: "center" },
-        { label: "审批状态", prop: "date", type: "", align: "center" },
-        {
-          label: "操作",
-          type: "Button",
-          align: "center",
-          width: 160,
-          btnList: [
-            {
-              type: "action-examine",
-              label: "审批",
-              line: "|",
-            },
-            {
-              type: "action-delete",
-              label: "删除",
-            },
-          ],
-        },
-      ];
-    }
-    // 超级管理员 --- 云资源管理
-    else if (level == 2 && type == 2) {
-      this.headers = [
-        { label: "所属组织", prop: "name", type: "href", align: "center" },
-        { label: "CPU使用量", prop: "name", type: "", align: "center" },
-        { label: "内存使用量", prop: "name", type: "", align: "center" },
-        { label: "工作区域数量", prop: "name", type: "", align: "center" },
-        { label: "创建时间", prop: "name", type: "", align: "center" },
-        {
-          label: "操作",
-          type: "Button",
-          align: "center",
-          btnList: [
-            {
-              type: "action-delete",
-              label: "删除",
-            },
-          ],
-        },
-      ];
-    }
-
-    // Error
-    else {
-      this.headers = [];
-      throw Error("The page doesn't exist");
-    }
+  created() {
+    this.level = parseInt(this.$route.params.level);
+    this.type = parseInt(this.$route.params.type);
+    this.initHeader();
   },
 };
 </script>
diff --git a/src/store/index.js b/src/store/index.js
index 1928e04..48e245e 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -1,15 +1,18 @@
-import Vuex from 'vuex'
-import Vue from 'vue'
+import Vuex from "vuex";
+import Vue from "vue";
 Vue.use(Vuex);
 
-
 const store = new Vuex.Store({
   state: {
-    role: 1,//0：普通用户，1：组织管理员，2：超级管理员
+    role: 1, //0：普通用户，1：组织管理员，2：超级管理员
     serviceShopMenu: 0, // 服务超市侧边栏
+    fwglNav: [
+      ["注册发布的服务", "申请的服务", "审批的服务", "云资源服务"], //普通用户
+      ["组织服务管理", "服务审批管理", "云资源管理"], //组织管理员
+      ["平台服务管理", "服务审批管理", "云资源管理"], //超级管理员
+    ], // 服务管理列表，onlyRead
   },
-  modules: {
-  },
+  modules: {},
   mutations: {
     rolefun(state, newValue) {
       state.role = newValue;
@@ -20,4 +23,4 @@ const store = new Vuex.Store({
   },
 });
 
-export default store
\ No newline at end of file
+export default store;
-- 
2.26.0