新增商品信息页面

src/layout/top.vue

@@ -162,7 +162,7 @@ const handleMenu = () => {
     }
 
     function menuClick(value: any) {
-        router.push(value.key);
+        router.push({ name: value.key });
     }
     // 一级菜单图标
     function fontIcon(code: string): string {
@@ -259,13 +259,26 @@ export default defineComponent({
             // 处理路由跳转到菜单栏里第一个对应的页面
             const list = unref(menuList);
             if (list.length && list[0].children && list[0].children.length) {
-                const code = list[0].children[0].code;
+                // 处理修改具体某个菜单栏，主要处理页面刷新
+                let firstIndex = 0,
+                    secondeIndex = 0;
+                for (let i = 0; i < list.length; i++) {
+                    for (let j = 0; j < list[i].children.length; j++) {
+                        if (window.location.hash.includes(list[i].children[j].code)) {
+                            firstIndex = i;
+                            secondeIndex = j;
+                            break;
+                        }
+                    }
+                }
+                const code = list[firstIndex].children[secondeIndex].code;
                 selectedKeys.value = [code];
-                openKeys.value = [list[0].code];
+                openKeys.value = [list[firstIndex].code];
                 context.emit('chooseMenu', setShowBottomPart(code));
                 // 处理页面刷新时候 引发路由乱跳的bug
                 if (router.currentRoute.value.fullPath === '/home') {
                     router.push(code);
+                } else {
                 }
             }
         });

src/router/index.ts

@@ -49,8 +49,8 @@ const routes: Array<RouteRecordRaw> = [
                 },
             },
             {
-                path: '/custom_info',
-                name: 'custom',
+                path: 'custom_info',
+                name: 'custom_info',
                 component: () => import('@/views/information/custom/index.vue'),
                 meta: {
                     requireAuth: true
@@ -75,7 +75,33 @@ const routes: Array<RouteRecordRaw> = [
                     },
                 ],
             },
-
+            {
+                path: 'goods_info',
+                name: 'goods_info',
+                component: () => import('@/views/information/goods/index.vue'),
+                meta: {
+                    requireAuth: true
+                },
+                redirect: to => { return { name: 'goods_info_spot' } },
+                children: [
+                    {
+                        path: '/goods_info/spot',
+                        name: 'goods_info_spot',
+                        component: () => import('@/views/information/goods/list/spot-variety/index.vue'),
+                        meta: {
+                            requireAuth: true
+                        },
+                    },
+                    {
+                        path: '/goods_info/hedging',
+                        name: 'goods_info_hedging',
+                        component: () => import('@/views/information/goods/list/hedging-variety/index.vue'),
+                        meta: {
+                            requireAuth: true
+                        },
+                    },
+                ],
+            }
         ],
     },
     {

src/views/information/goods/index.vue

@@ -0,0 +1,44 @@
+<template>
+  <!-- 商品信息 -->
+  <div class="goods-info">
+    <firstMenu :list="list"
+               :value="'value'"
+               @selectMenu="selectMenu" />
+    <router-view />
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import firstMenu from '@/components/firstMenu/index.vue';
+import { useRouter } from 'vue-router';
+
+// 处理菜单
+function handleMenu() {
+    const router = useRouter();
+    const list = [
+        { key: 'goods_info_spot', value: '现货品种' },
+        { key: 'goods_info_hedging', value: '套保品种' },
+    ];
+    function selectMenu(item: any) {
+        router.push({ name: item.key });
+    }
+    return { list, selectMenu };
+}
+
+export default defineComponent({
+    name: 'custom',
+    components: {
+        firstMenu,
+    },
+    setup() {
+        const { list, selectMenu } = handleMenu();
+        return { list, selectMenu };
+    },
+});
+</script>
+
+<style lang="less">
+.goods-info {
+}
+</style>;

src/views/information/goods/list/hedging-variety/index.vue

@@ -0,0 +1,28 @@
+<template>
+  <!-- 套保品种 -->
+  <div class="hedging-variety">
+    套保品种
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+import { initData } from '@/setup/methods/index';
+
+export default defineComponent({
+    name: 'hedging-variety',
+    components: {},
+    setup() {
+        initData(() => {
+            // 加载数据在这里
+        });
+        return {};
+    },
+});
+</script>
+
+<style lang="less">
+.hedging-variety {
+}
+</style>;

src/views/information/goods/list/spot-variety/index.vue

@@ -0,0 +1,28 @@
+<template>
+  <!-- 现货品种 -->
+  <div class="spot-variety">
+    现货品种
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+import { initData } from '@/setup/methods/index';
+
+export default defineComponent({
+    name: 'spot-variety',
+    components: {},
+    setup() {
+        initData(() => {
+            // 加载数据在这里
+        });
+        return {};
+    },
+});
+</script>
+
+<style lang="less">
+.spot-variety {
+}
+</style>;