菜单管理

package-lock.json

@@ -13,6 +13,7 @@
         "@element-plus/icons-vue": "^2.3.2",
         "@kjgl77/datav-vue3": "^1.7.4",
         "axios": "^1.13.2",
+        "crypto-js": "^4.2.0",
         "decimal.js": "^10.6.0",
         "echarts": "^6.0.0",
         "echarts-map": "^3.0.1",
@@ -531,6 +532,12 @@
         "node": ">=0.8"
       }
     },
+    "node_modules/crypto-js": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmmirror.com/crypto-js/-/crypto-js-4.2.0.tgz",
+      "integrity": "sha512-KALDyEYgpY+Rlob/iriUtjV6d5Eq+Y191A5g4UqLAi8CyGP9N1+FdVbkc1SxKc2r4YAYqG8JzO2KGL+AizD70Q==",
+      "license": "MIT"
+    },
     "node_modules/csstype": {
       "version": "3.2.3",
       "license": "MIT"

package.json

@@ -14,6 +14,7 @@
     "@element-plus/icons-vue": "^2.3.2",
     "@kjgl77/datav-vue3": "^1.7.4",
     "axios": "^1.13.2",
+    "crypto-js": "^4.2.0",
     "decimal.js": "^10.6.0",
     "echarts": "^6.0.0",
     "echarts-map": "^3.0.1",

src/components/common/commonForm.vue

@@ -392,25 +392,27 @@
           </el-form-item>
         </el-col>
         <!-- 表单操作按钮 -->
-        <el-form-item v-if="config.showButtons !== false" class="form-buttons">
-          <el-button
-            v-if="config.showSubmit !== false"
-            type="primary"
-            :loading="config.submitLoading"
-            @click="handleSubmit"
-          >
-            {{ config.submitText || "提交" }}
-          </el-button>
-          <el-button
-            v-for="btn in config.customButtons"
-            :key="btn.key"
-            :type="btn.type"
-            :loading="btn.loading"
-            @click="btn.handler"
-          >
-            {{ btn.text }}
-          </el-button>
-        </el-form-item>
+        <el-col :span="24">
+          <el-form-item v-if="config.showButtons !== false" class="form-buttons">
+            <el-button
+              v-if="config.showSubmit !== false"
+              type="primary"
+              :loading="config.submitLoading"
+              @click="handleSubmit"
+            >
+              {{ config.submitText || "提交" }}
+            </el-button>
+            <el-button
+              v-for="btn in config.customButtons"
+              :key="btn.key"
+              :type="btn.type"
+              :loading="btn.loading"
+              @click="btn.handler"
+            >
+              {{ btn.text }}
+            </el-button>
+          </el-form-item>
+        </el-col>
       </el-row>
 
     </el-form>

src/data/https.js

@@ -2,6 +2,7 @@ import axios from "axios";
 import { ElMessage } from "element-plus";
 import windowConfig from "@/window";
 import { useUserStore } from "@/stores/user.js";
+import { useRouter } from "vue-router";
 axios.interceptors.request.use(function (config) {
     const userStore = useUserStore();
     let token = userStore.authToken || sessionStorage.getItem("authToken") || "";
@@ -27,7 +28,7 @@ axios.interceptors.response.use(response => {
     return Promise.reject(err);
 });
 
-export function $get ({ url, params = {}, callback }) {
+export function $get ({ url, params = {}, callback, error }) {
     return axios({
         method: "get",
         url: windowConfig.baseUrl + url,
@@ -36,11 +37,19 @@ export function $get ({ url, params = {}, callback }) {
         callback && callback(response.data);
         return response;
     }).catch((err) => {
-        ElMessage.error(err);
+        console.log(err);
+        error && error(err);
+        ElMessage.error(err.msg || "操作失败");
+        if (err && err.response && err.response.status === 401) {
+            userStore.clearUserInfo();
+            router.replace("/login");
+        }
     });
 };
 
-export function $post ({ url, data = {}, callback }) {
+export function $post ({ url, data = {}, callback, error }) {
+    const router = useRouter();
+    const userStore = useUserStore();
     return axios.post(windowConfig.baseUrl + url, data).then((response) => {
         if (response.code === 0) {
             callback && callback(response.data);
@@ -50,8 +59,10 @@ export function $post ({ url, data = {}, callback }) {
         return response;
     }).catch((err) => {
         console.log(err);
+        error && error(err);
         ElMessage.error(err.msg || "操作失败");
         if (err && err.response && err.response.status === 401) {
+            userStore.clearUserInfo();
             router.replace("/login");
         }
     });

src/layouts/MainLayout.vue

@@ -25,43 +25,7 @@
     <el-container>
       <!-- 侧边Aside -->
       <el-aside width="220px" class="city-aside">
-        <el-menu
-          :default-active="$route.path"
-          active-text-color="#409EFF"
-          background-color="#1f313b"
-          text-color="#fff"
-          router
-        >
-          <template v-for="route in menuRoutes" :key="route.path">
-            <!-- 无子菜单的项目 -->
-            <el-menu-item
-              v-if="!route.children || route.children.length === 0"
-              :index="route.path"
-            >
-              <el-icon><component :is="route.meta?.icon || 'menu'" /></el-icon>
-              <span>{{ route.meta?.menuName || route.name }}</span>
-            </el-menu-item>
-
-            <!-- 有子菜单的项目 -->
-            <el-sub-menu v-else :index="route.path">
-              <template #title>
-                <el-icon
-                  ><component :is="route.meta?.icon || 'menu'"
-                /></el-icon>
-                <span>{{ route.meta?.menuName || route.name }}</span>
-              </template>
-              <template v-for="child in route.children" :key="child.path">
-                <el-menu-item v-if="child.meta?.showInMenu !== false"
-                  :index="child.path"
-                  style="padding-left: 20px !important"
-                >
-                  <el-icon><component v-if="child.meta?.icon" :is="child.meta?.icon" /></el-icon>
-                  <span>{{ child.meta?.menuName || child.name }}</span>
-                </el-menu-item>
-              </template>
-            </el-sub-menu>
-          </template>
-        </el-menu>
+        <left-menu></left-menu>
       </el-aside>
 
       <!-- 主内容Main -->
@@ -76,6 +40,7 @@
 import { computed, onMounted, getCurrentInstance } from "vue";
 import { useRouter, useRoute } from "vue-router";
 import { useUserStore } from "@/stores/user.js";
+import LeftMenu from "./leftMenu.vue";
 const userStore = useUserStore();
 const { proxy } = getCurrentInstance();
 
@@ -110,7 +75,7 @@ const handleLogout = () => {
       url: "/api/user/logout",
       data: {},
       callback: (data) => {
-        userStore.clearUseInfo();
+        userStore.clearUserInfo();
         router.replace("/login");
       }
   })

src/layouts/leftMenu.vue

+<template>
+    <el-menu
+        :default-active="$route.path"
+        router
+    >
+        <template v-for="item in menuList">
+            <template v-if="item.children && item.children.length">
+                <left-menu-item :key="item.id" :menuItem="item"></left-menu-item>
+            </template>
+            <template v-else>
+                <el-menu-item :key="item.id" :index="item.url">
+                    <span>{{ item.name }}</span>
+                </el-menu-item>
+            </template>
+        </template>
+    </el-menu>
+</template>
+
+<script setup>
+    import LeftMenuItem from "./leftMenuItem.vue";
+    const menuList = sessionStorage.getItem("userInfo") ? JSON.parse(sessionStorage.getItem("userInfo")).menus : [];
+</script>
+
+<style lang="less"></style>
\ No newline at end of file

src/layouts/leftMenuItem.vue

+<template>
+    <el-sub-menu :index="menuItem.id">
+        <template #title>
+            <span>{{ menuItem.name }}</span>
+        </template>
+        <template v-for="(child, index) in menuItem.children" :key="index">
+            <left-menu-item v-if="child.children && child.children.length"></left-menu-item>
+            <el-menu-item v-else
+                :index="child.url"
+            >
+                <span>{{ child.name }}</span>
+            </el-menu-item>
+        </template>
+    </el-sub-menu>
+</template>
+
+<script setup>
+    import { defineProps } from 'vue';
+    const props = defineProps({
+        menuItem: {
+            type: Object,
+            default: {}
+        }
+    })
+</script>
+
+<style lang="less" scoped>
+</style>
\ No newline at end of file

src/stores/user.js

@@ -9,11 +9,13 @@ export const useUserStore = defineStore('user', {
       this.userInfo = data;
       this.authToken = data.token;
       sessionStorage.setItem("authToken", data.token);
+      sessionStorage.setItem("userInfo", JSON.stringify(data));
     },
     clearUserInfo () {
       this.userInfo = null;
       this.authToken = "";
       sessionStorage.removeItem("authToken");
+      sessionStorage.removeItem("userInfo");
     }
   }
 })
\ No newline at end of file

src/views/login/index.vue

@@ -49,6 +49,7 @@ import { ref, getCurrentInstance } from "vue";
 import { useRouter } from "vue-router";
 import { User, Lock } from "@element-plus/icons-vue";
 import { useUserStore } from "@/stores/user.js";
+import CryptoJS from "crypto-js";
 const userStore = useUserStore();
 
 const { proxy } = getCurrentInstance();
@@ -78,7 +79,9 @@ const handleLogin = async () => {
     if (valid) {
       proxy.$post({
           url: "/api/user/login",
-          data: loginForm.value,
+          data: {
+              encryptLogStr: CryptoJS.AES.encrypt(`${loginForm.value.mobile},${loginForm.value.password}`, "GFG5w5AP0Ja2rNaa").toString()
+          },
           callback: (data) => {
             userStore.setUseInfo(data);
             router.replace("/");