更新 项目架构

src/App.vue

@@ -4,17 +4,10 @@
     <div class="main">
       <div class="aside"><AsideVue></AsideVue></div>
       <div class="section">
-        <div
-          style="
-            height: 52px;
-            width: 100%;
-            border: 1px solid red;
-            box-sizing: border-box;
-          "
-        >
-          {{ this.$store.state.titleFirst }}
+        <div class="first-title">
+          {{ this.$store.state.firstTitle }}
         </div>
-        <router-view></router-view>
+        <div class="main-section"><router-view></router-view></div>
       </div>
     </div>
     <FooterVue></FooterVue>
@@ -60,6 +53,28 @@ export default {
 
 .section {
   width: 100%;
+  background: #f4f5f6;
   overflow: auto;
 }
+
+.first-title {
+  height: 52px;
+  line-height: 52px;
+  width: 100%;
+  box-sizing: border-box;
+  background: #fff;
+  font-size: 18px;
+  font-family: PingFangSC-Medium, PingFang SC;
+  font-weight: 500;
+  color: #333d43;
+  padding-left: 20px;
+}
+
+.main-section {
+  margin: 24px 0 0 24px;
+  padding: 24px;
+  background: #fff;
+  height: calc(100% - 140px);
+  overflow: scroll;
+}
 </style>

src/components/Aside.vue

@@ -1,66 +1,102 @@
 <template>
   <el-menu
     style="width: 220px; height: 100%"
-    default-active="2"
+    :default-active="this.$store.state.currentMenuItem"
     class="el-menu-vertical-demo"
-    @open="handleOpen"
-    @close="handleClose"
-    background-color="#545c64"
+    background-color="#141B29"
     text-color="#fff"
     active-text-color="#ffd04b"
+    :router="true"
   >
-    <el-submenu index="1">
+    <el-submenu v-for="item in menu" :key="item">
       <template v-slot:title>
-        <i class="el-icon-s-unfold"></i>
-        <span>货主信息</span>
+        <i :class="item.icon"></i>
+        <span>{{ item.title }}</span>
       </template>
-      <el-menu-item index="1-1">货主列表</el-menu-item>
-      <el-menu-item index="1-2">添加货主</el-menu-item>
-    </el-submenu>
-    <el-submenu index="2">
-      <template v-slot:title>
-        <i class="el-icon-user"></i>
-        <span>船东信息</span>
-      </template>
-      <el-menu-item index="2-1">船东列表</el-menu-item>
-    </el-submenu>
-    <el-submenu index="3">
-      <template v-slot:title>
-        <i class="el-icon-ship"></i>
-        <span>船舶信息</span>
-      </template>
-      <el-menu-item index="3-1">船舶列表</el-menu-item>
-    </el-submenu>
-    <el-submenu index="4">
-      <template v-slot:title>
-        <i class="el-icon-s-data"></i>
-        <span>航次</span>
-      </template>
-      <el-menu-item index="4-1">航次列表</el-menu-item>
-      <el-menu-item index="4-2">添加航次</el-menu-item>
-    </el-submenu>
-    <el-submenu index="5">
-      <template v-slot:title>
-        <i class="el-icon-picture-outline"></i>
-        <span>鉴图/视频</span>
-      </template>
-      <el-menu-item index="5-1">鉴图/视频</el-menu-item>
+      <el-menu-item
+        v-for="son in item.items"
+        :index="son.path"
+        :key="son"
+        @click="selectMenu(son.name)"
+      >
+        {{ son.name }}
+      </el-menu-item>
     </el-submenu>
   </el-menu>
 </template>
 <script>
+import store from "../store";
 export default {
   setup() {
-    function handleOpen() {
-      console.log("handleOpen");
-    }
-    function handleClose() {
-      console.log("handleClose");
+    function selectMenu(e) {
+      console.log(e);
+      store.commit("changefirstTitle", e);
     }
 
+    let menu = [
+      {
+        icon: "el-icon-s-unfold",
+        title: "货主信息",
+        items: [
+          {
+            path: "/cargoOwnerManage/cargoOwnerList",
+            name: "货主列表",
+          },
+          {
+            path: "/cargoOwnerManage/cargoOwnerAdd",
+            name: "添加货主",
+          },
+        ],
+      },
+      {
+        icon: "el-icon-user",
+        title: "船东信息",
+        items: [
+          {
+            path: "/shipOwnerManage/shipOwnerList",
+            name: "船东列表",
+          },
+        ],
+      },
+      {
+        icon: "el-icon-ship",
+        title: "船舶信息",
+        items: [
+          {
+            path: "/shipInfo/shipList",
+            name: "船舶列表",
+          },
+        ],
+      },
+      {
+        icon: "el-icon-s-data",
+        title: "航次",
+        items: [
+          {
+            path: "/voyage/voyageList",
+            name: "航次列表",
+          },
+          {
+            path: "/voyage/voyageAdd",
+            name: "添加航次",
+          },
+        ],
+      },
+      {
+        icon: "el-icon-picture-outline",
+        title: "鉴图/视频",
+        items: [
+          {
+            path: "/index/mediaCheck",
+            name: "鉴图/视频",
+          },
+        ],
+      },
+    ];
+
     return {
-      handleOpen,
-      handleClose,
+      selectMenu,
+      menu,
     };
   },
 };

src/main.js

@@ -13,9 +13,9 @@ router.beforeEach(async (to, from, next) => {
   if (id) {
     store.commit("changeLogin", true);
     if (0 === to.matched.length) {
-      next("/");
-    } else if (to.path == "/login") {
-      next("/");
+      next("/cargoOwnerManage/cargoOwnerList");
+    } else if (to.path == "/login" || to.path == "/") {
+      next("/cargoOwnerManage/cargoOwnerList");
     } else {
       next();
     }

src/router/index.js

@@ -19,9 +19,63 @@ const router = createRouter({
       component: () => import("../views/index/Login.vue"),
     },
     {
-      path: "/test",
-      name: "test",
-      component: () => import("../views/test/test.vue"),
+      path: "/cargoOwnerManage/cargoOwnerAdd",
+      name: "cargoOwnerAdd",
+      component: () => import("../views/cargoOwnerManage/cargoOwnerAdd.vue"),
+    },
+    {
+      path: "/cargoOwnerManage/cargoOwnerDetail",
+      name: "cargoOwnerDetail",
+      component: () => import("../views/cargoOwnerManage/cargoOwnerDetail.vue"),
+    },
+    {
+      path: "/cargoOwnerManage/cargoOwnerList",
+      name: "cargoOwnerList",
+      component: () => import("../views/cargoOwnerManage/cargoOwnerList.vue"),
+    },
+    {
+      path: "/shipInfo/shipList",
+      name: "shipList",
+      component: () => import("../views/shipInfo/shipList.vue"),
+    },
+    {
+      path: "/shipInfo/shipDetail",
+      name: "shipDetail",
+      component: () => import("../views/shipInfo/shipDetail.vue"),
+    },
+    {
+      path: "/shipOwnerManage/shipOwnerDetail",
+      name: "shipOwnerDetail",
+      component: () => import("../views/shipOwnerManage/shipOwnerDetail.vue"),
+    },
+    {
+      path: "/shipOwnerManage/shipOwnerList",
+      name: "shipOwnerList",
+      component: () => import("../views/shipOwnerManage/shipOwnerList.vue"),
+    },
+
+    {
+      path: "/voyage/voyageAdd",
+      name: "voyageAdd",
+      component: () => import("../views/voyage/voyageAdd.vue"),
+    },
+
+    {
+      path: "/voyage/voyageDetail",
+      name: "voyageDetail",
+      component: () => import("../views/voyage/voyageDetail.vue"),
+    },
+
+    {
+      path: "/voyage/voyageList",
+      name: "voyageList",
+      component: () => import("../views/voyage/voyageList.vue"),
+    },
+
+    {
+      path: "/index/mediaCheck",
+      name: "mediaCheck",
+      component: () => import("../views/index/mediaCheck.vue"),
     },
   ],
 });

src/store/index.js

@@ -3,19 +3,23 @@ import { createStore } from "vuex";
 const store = createStore({
   state: {
     isLogin: false,
-    titleFirst: "",
-    titleSecond: "",
+    firstTitle: "",
+    secondTitle: "",
+    currentMenuItem: "",
   },
   mutations: {
-    changeTitleFirst(state, text) {
-      state.titleFirst = text;
+    changefirstTitle(state, text) {
+      state.firstTitle = text;
     },
     changeTitleSecond(state, text) {
-      state.titleSecond = text;
+      state.secondTitle = text;
     },
     changeLogin(state, b) {
       state.isLogin = b;
     },
+    setCurrentMenuItem(state, index) {
+      state.currentMenuItem = index;
+    },
   },
 });