收费公示切图

src/components/layout/header/mock.js

@@ -177,7 +177,7 @@ export const nav = [
                 name: "我还不是系统成员",
                 nameInHeaderNav: "我还不是系统成员",
                 index: 2,
-                link: "/Org",
+                link: "/Business",
                 breadcrumb: [{ name: "业务大厅", path: "/Business" }, { name: "我还不是系统成员" }],
                 children: [
                     {
@@ -201,6 +201,17 @@ export const nav = [
                             { name: "我还不是系统成员", path: "/Business/Register" },
                             { name: "操作指南" },
                         ],
+                    },
+                    {
+                        id: uuid("gs_nav"),
+                        name: "收费公示",
+                        index: 2,
+                        link: "/Business/Corppaynew",
+                        breadcrumb: [
+                            { name: "业务大厅", path: "/Business" },
+                            { name: "我还不是系统成员", path: "/Business/Register" },
+                            { name: "收费公示" },
+                        ],
                     }
                 ],
             }

src/router/index.js

@@ -182,6 +182,14 @@ const routes = [
             component: () => import("@/views/Business/Guide.vue"),
           },
           {
+            path: "/Business/Corppaynew",
+            name: "Corppaynew",
+            meta: {
+              name: "收费公示",
+            },
+            component: () => import("@/views/Business/Corppaynew.vue"),
+          },
+          {
             path: "/Business/Notice",
             name: "Notice",
             meta: {

src/views/Business/Guide.vue

@@ -4,16 +4,27 @@
     <div class="guide-msg container">
       <div class="msg-title">第一步：为不同的商品项目编制不同的商品标</div>
       <div class="msg-cont">
-        在我国，零售商品的标识代码主要采用三种数据结构，即GTIN-13、GTIN-8和GTIN-12。通常情况下，选用13位的数字代码结构用EAN-13条码表示。只有当产品出口到北美地区并且客户指定时，才申请使用UCC-12代码（用UPC条码表示）。中国厂商如需申请UPC商品条码，须经中国物品编码中心统一办理。GTIN-13和GTIN-8的结构分别如图1、图2、图3所示。
-        1）GTIN-13的数据结构
-        （1）当前缀码为690、691时，EAN/UCC-13的代码结构如图1所示。
-        EAN/UCC-13代码结构一
-        （2）当前缀码为692、693时，EAN/UCC-13的代码结构如图2所示。
-        EAN/UCC-13代码结构二 A、厂商识别代码
-        厂商识别代码是由中国物品编码中心统一向申请厂商分配。厂商识别代码左起三位由国际物品编码协会分配给中国物品编码中心的前缀码。
-        B、商品项目代码 商品项目代码由厂商根据有关规定自行分配。 C、校验位
-        用来校验其他代码编码的正误。它有固定的计算方法，参见GB 12904附录。
-        2）EAN/UCC-8的代码结构如图3所示。 EAN/UCC-8代码结构
+        <p>
+          在我国，零售商品的标识代码主要采用三种数据结构，即GTIN-13、GTIN-8和GTIN-12。通常情况下，选用13位的数字代码结构用EAN-13条码表示。只有当产品出口到北美地区并且客户指定时，才申请使用UCC-12代码（用UPC条码表示）。中国厂商如需申请UPC商品条码，须经中国物品编码中心统一办理。GTIN-13和GTIN-8的结构分别如图1、图2、图3所示。 
+        </p>
+        <p>1）GTIN-13的数据结构</p>
+        <p>（1）当前缀码为690、691时，EAN/UCC-13的代码结构如图1所示。</p>
+        <p>EAN/UCC-13代码结构一 </p>
+        <p>（2）当前缀码为692、693时，EAN/UCC-13的代码结构如图2所示。</p>
+        <p>EAN/UCC-13代码结构二</p>
+        <p>A、厂商识别代码 厂商识别代码是由中国物品编码中心统一向申请厂商分配。厂商识别代码左起三位由国际物品编码协会分配给中国物品编码中心的前缀码。</p>
+        <p>B、商品项目代码 商品项目代码由厂商根据有关规定自行分配。</p>
+        <p>C、校验位 用来校验其他代码编码的正误。它有固定的计算方法，参见GB 12904附录。</p>
+        <p>2）EAN/UCC-8的代码结构如图3所示。</p>
+        <p>EAN/UCC-8代码结构</p>
+        <p>A、商品项目识别代码&nbsp;&nbsp;是EAN编码组织在EAN分配的前缀码（X8X7X6）的基础上分配给厂商特定商品项目的代码。为了保证代码的惟一性，商品项目识别代码须由中国物品编码中心统一分配。</p>
+        <p>B、校验位&nbsp;&nbsp;用来校验其他代码编码的正误。它有固定的计算方法，参见GB 12904附录。</p>
+        <p>在编制贸易项目的商品标识代码时，应遵守以下基本原则：</p>
+        <p>(1)惟一性&nbsp;&nbsp;惟一性原则是商品编码的基本原则。是指同一商品项目应分配相同的标识代码，不同的商品项目必须分配不同的标识代码。不同商品名称、商标、种类、规格、数量、包装类型的商品应视为不同的商品项目，必须编制不同的标识代码，以保证编码的惟一性。</p>
+        <p>(2)稳定性&nbsp;&nbsp;稳定性原则是指商品标识代码一旦分配，只要商品的基本特征没有发生变化，就应保持不变。同一商品项目，无论是长期连续生产、还是间断式生产，都必须采用相同的标识代码。即使该商品项目停止生产，其标识代码应至少在4年之内不能用于其他商品项目上。另外，即便商品已不在供应链中流通，由于要保存历史纪录，需要在数据库中较长期地保留他的标识代码，因此，在重新启用商品标识代码时，还需要考虑此因素。</p>
+        <p>(3)无含义&nbsp;&nbsp;无含义原则是指商品标识代码中的每一位数字不表示任何与商品有关的特定信息。有含义的编码，通常会导致编码容量的损失。厂商在编制商品项目代码时，最好使用无含义的流水号，即连续号。这样能够最大限度利用商品项目代码的编码容量。 假设分配给某企业的厂商识别代码为6901234，表1给出了其部分产品标识代码的编码方案。 B、校验位 用来校验其他代码编码的正误。它有固定的计算方法，参见GB 12904附录。 在编制贸易项目的商品标识代码时，应遵守以下基本原则： (1)惟一性 惟一性原则是商品编码的基本原则。是指同一商品项目应分配相同的标识代码，不同的商品项目必须分配不同的标识代码。不同商品名称、商标、种类、规格、数量、包装类型的商品应视为不同的商品项目，必须编制不同的标识代码，以保证编码的惟一性。 (2)稳定性 稳定性原则是指商品标识代码一旦分配，只要商品的基本特征没有发生变化，就应保持不变。同一商品项目，无论是长期连续生产、还是间断式生产，都必须采用相同的标识代码。即使该商品项目停止生产，其标识代码应至少在4年之内不能用于其他商品项目上。另外，即便商品已不在供应链中流通，由于要保存历史纪录，需要在数据库中较长期地保留他的标识代码，因此，在重新启用商品标识代码时，还需要考虑此因素。 (3)无含义 无含义原则是指商品标识代码中的每一位数字不表示任何与商品有关的特定信息。有含义的编码，通常会导致编码容量的损失。厂商在编制商品项目代码时，最好使用无含义的流水号，即连续号。这样能够最大限度利用商品项目代码的编码容量。</p> 
+        <p>假设分配给某企业的厂商识别代码为6901234，表1给出了其部分产品标识代码的编码方案。</p>
+
       </div>
     </div>
   </div>
@@ -35,7 +46,7 @@ export default {
   },
 };
 </script>
-<style lang="scss">
+<style lang="scss" scoped>
 .guide {
   @include module-box;
   .guide-msg {

src/views/Business/index.vue

@@ -3,7 +3,7 @@
     <breadcrumb />
     <div class="row">
       <div class="col-lg-3">
-        <left2 :list="routeList" />
+        <left2 :list="routes" />
       </div>
       <div class="col-lg-9">
         <router-view class="marginTopLg20"></router-view>
@@ -45,8 +45,54 @@ export default {
             },
             {
               name: "收费公示",
-              path: "",
+              path: "/Business/Corppaynew",
               active: "",
+              children: [
+                {
+                  name: "收费公示",
+                  path: "",
+                  active: "Corppaynew",
+                },
+                {
+                  name: "收费目录清单",
+                  path: "",
+                  active: "",
+                  children: [
+                    {
+                      name: "一次性加入费",
+                      path: "#",
+                      active: "",
+                    },
+                    {
+                      name: "胶片制作费",
+                      path: "#",
+                      active: "",
+                    },
+                    {
+                      name: "系统维护",
+                      path: "#",
+                      active: "",
+                    },
+                    {
+                      name: "其他增值服务费",
+                      path: "#",
+                      active: "",
+                    }
+                  ]
+                },
+                {
+                  name: "服务项目清单",
+                  path: "",
+                  active: "",
+                  children: [
+                    {
+                      name: "服务项目与服务内容",
+                      path: "#",
+                      active: "",
+                    }
+                  ],
+                },
+              ],
             },
             {
               name: "条码注册公告",
@@ -156,13 +202,45 @@ export default {
     routes() {
       let newRouteList = [];
       const currentPath = this.$route.path;
-      newRouteList = this.deepFindRoutes(this.routeList, currentPath);
+      const currentRoute = this.deepFindCurrentRoute(this.routeList, currentPath);
+      console.log(currentRoute, 'currentRoute');
+      if (currentRoute.children && currentRoute.children.length > 0) {
+        newRouteList = currentRoute.children;
+      } else {
+        newRouteList = this.routeList;
+      }
+      // newRouteList = this.deepFindRouteList(this.routeList, currentPath);
+      // console.log(newRouteList, 'newRouteListnewRouteList2')
       return newRouteList;
     },
   },
-  created() {},
+  created() {
+    console.log(this.$route, "this.$route");
+  },
   methods: {
-    deepFindRoutes(menuList, activePath) {
+    deepFindCurrentRoute(menuList, activePath) {
+      let current = [];
+      const deep = (arr, activePath) => {
+        for (let i = 0; i < arr.length; i += 1) {
+          if (
+            arr[i].path !== activePath &&
+            arr[i].children &&
+            arr[i].children.length > 0
+          ) {
+            deep(arr[i].children, activePath);
+          } else if (arr[i].path === activePath) {
+            current = arr[i];
+            break;
+          }
+          if (current.length > 0) {
+            break;
+          }
+        }
+      };
+      deep(menuList, activePath);
+      return current;
+    },
+    deepFindRouteList(menuList, activePath) {
       let current = [];
       const deep = (arr, activePath) => {
         for (let i = 0; i < arr.length; i += 1) {

src/views/Org/index.vue

@@ -107,7 +107,7 @@ export default {
     },
   },
   created() {
-    console.log(this.routes, "this.$route");
+    console.log(this.$routes, "this.$route");
   },
   methods: {
     deepFindRoutes(menuList, activePath) {
@@ -115,7 +115,7 @@ export default {
       const deep = (arr, activePath) => {
         for (let i = 0; i < arr.length; i += 1) {
           if (
-            arr[i].link !== activePath &&
+            arr[i].path !== activePath &&
             arr[i].children &&
             arr[i].children.length > 0
           ) {

src/views/comps/left2.vue

@@ -7,21 +7,33 @@
       @open="handleOpen"
       @close="handleClose"
     >
-      <el-submenu :index="String(i + 1)" v-for="(tmpA, i) in list" :key="i">
-        <template slot="title">
-          <span>{{ tmpA.name }}</span>
+      <template v-for="(tmpA, i) in list">
+        <template v-if="tmpA.children && tmpA.children.length > 0">
+          <el-submenu :index="String(i + 1)" :key="i">
+            <template slot="title">
+              <span>{{ tmpA.name }}</span>
+            </template>
+            <el-menu-item-group>
+              <el-menu-item
+                :index="i + 1 + '-' + (ii + 1)"
+                :class="{ 'is-active': tmpB.active === currentName }"
+                v-for="(tmpB, ii) in tmpA.children"
+                :key="ii"
+                @click="jump(tmpB)"
+                >{{ tmpB.name }}</el-menu-item
+              >
+            </el-menu-item-group>
+          </el-submenu>
         </template>
-        <el-menu-item-group>
+        <template v-else>
           <el-menu-item
-            :index="i + 1 + '-' + (ii + 1)"
-            :class="{ 'is-active': tmpB.path === currentPath }"
-            v-for="(tmpB, ii) in tmpA.children"
-            :key="ii"
-            @click="jump(tmpB)"
-            >{{ tmpB.name }}</el-menu-item
+            :index="String(i + 1)"
+            :key="i"
+            :class="{ 'is-active': tmpA.active === currentName }"
+            >{{ tmpA.name }}</el-menu-item
           >
-        </el-menu-item-group>
-      </el-submenu>
+        </template>
+      </template>
     </el-menu>
   </div>
 </template>
@@ -32,21 +44,24 @@ export default {
   props: ["list"],
   data() {
     return {
-      defaultOpeneds: ["1"],
+      defaultOpeneds: [],
     };
   },
   computed: {
-    currentPath() {
-      return this.$route.path;
+    currentName() {
+      return this.$route.name;
     },
   },
   created() {
-    console.log(this.$route, "获取当前路由地址");
+    // console.log(this.$route, "获取当前路由地址");
+    this.list.forEach((el, index) => {
+      this.defaultOpeneds.push(String(index + 1));
+    });
   },
   methods: {
     // 路由跳转
     jump(el) {
-      console.log(el, 'el');
+      console.log(el, "el");
       const type = el.type || "router";
       if (type === "link") {
         window.open(el.path, "_blank");
@@ -101,22 +116,16 @@ export default {
   .el-menu {
     border-right: none;
     background: $side-bg-color;
+    font-size: 14px;
     .el-submenu__title {
       background: $side-bg-color;
     }
-    .menu-title {
-      margin-top: 25px;
-      margin-bottom: 10px;
-      padding-left: 28px;
-      font-size: 12px;
-      color: #b7b6b6;
-    }
     .el-menu-item {
       height: 50px;
       line-height: 50px;
       color: #6b6a6a;
       background: transparent;
-      font-size: 16px;
+      // font-size: 16px;
       i {
         color: $side-bg-color;
         font-size: 25px;