菜单管理+联调

package-lock.json

@@ -8,6 +8,7 @@
       "name": "perf-web",
       "version": "0.1.0",
       "dependencies": {
+        "@riophae/vue-treeselect": "^0.4.0",
         "axios": "^1.6.8",
         "core-js": "^3.8.3",
         "echarts": "^5.5.0",
@@ -1849,7 +1850,6 @@
       "version": "7.24.1",
       "resolved": "https://registry.npmmirror.com/@babel/runtime/-/runtime-7.24.1.tgz",
       "integrity": "sha512-+BIznRzyqBf+2wCTxcKE3wDjfGeCoVE61KSHGpkzqrLi8qxqFwBeUFyId2cxkTmm55fzDGnm0+yCxaxygrLUnQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "regenerator-runtime": "^0.14.0"
@@ -2066,6 +2066,25 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@riophae/vue-treeselect": {
+      "version": "0.4.0",
+      "resolved": "https://repo.huaweicloud.com/repository/npm/@riophae/vue-treeselect/-/vue-treeselect-0.4.0.tgz",
+      "integrity": "sha512-J4atYmBqXQmiPFK/0B5sXKjtnGc21mBJEiyKIDZwk0Q9XuynVFX6IJ4EpaLmUgL5Tve7HAS7wkiGGSti6Uaxcg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.3.1",
+        "babel-helper-vue-jsx-merge-props": "^2.0.3",
+        "easings-css": "^1.0.0",
+        "fuzzysearch": "^1.0.3",
+        "is-promise": "^2.1.0",
+        "lodash": "^4.0.0",
+        "material-colors": "^1.2.6",
+        "watch-size": "^2.0.0"
+      },
+      "peerDependencies": {
+        "vue": "^2.2.0"
+      }
+    },
     "node_modules/@sideway/address": {
       "version": "4.1.5",
       "resolved": "https://registry.npmmirror.com/@sideway/address/-/address-4.1.5.tgz",
@@ -6015,6 +6034,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/easings-css": {
+      "version": "1.0.0",
+      "resolved": "https://repo.huaweicloud.com/repository/npm/easings-css/-/easings-css-1.0.0.tgz",
+      "integrity": "sha512-7Uq7NdazNfVtr0RNmPAys8it0zKCuaqxJStYKEl72D3j4gbvXhhaM7iWNbqhA4C94ygCye6VuyhzBRQC4szeBg==",
+      "license": "MIT"
+    },
     "node_modules/easy-stack": {
       "version": "1.0.1",
       "resolved": "https://registry.npmmirror.com/easy-stack/-/easy-stack-1.0.1.tgz",
@@ -6795,6 +6820,12 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/fuzzysearch": {
+      "version": "1.0.3",
+      "resolved": "https://repo.huaweicloud.com/repository/npm/fuzzysearch/-/fuzzysearch-1.0.3.tgz",
+      "integrity": "sha512-s+kNWQuI3mo9OALw0HJ6YGmMbLqEufCh2nX/zzV5CrICQ/y4AwPxM+6TIiF9ItFCHXFCyM/BfCCmN57NTIJuPg==",
+      "license": "MIT"
+    },
     "node_modules/gensync": {
       "version": "1.0.0-beta.2",
       "resolved": "https://registry.npmmirror.com/gensync/-/gensync-1.0.0-beta.2.tgz",
@@ -7747,6 +7778,12 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/is-promise": {
+      "version": "2.2.2",
+      "resolved": "https://repo.huaweicloud.com/repository/npm/is-promise/-/is-promise-2.2.2.tgz",
+      "integrity": "sha512-+lP4/6lKUBfQjZ2pdxThZvLUAafmZb8OAxFb8XXtiQmS35INgr85hdOGoEs124ez1FCnZJt6jau/T+alh58QFQ==",
+      "license": "MIT"
+    },
     "node_modules/is-stream": {
       "version": "1.1.0",
       "resolved": "https://registry.npmmirror.com/is-stream/-/is-stream-1.1.0.tgz",
@@ -8058,7 +8095,6 @@
       "version": "4.17.21",
       "resolved": "https://registry.npmmirror.com/lodash/-/lodash-4.17.21.tgz",
       "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/lodash.debounce": {
@@ -8399,6 +8435,12 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/material-colors": {
+      "version": "1.2.6",
+      "resolved": "https://repo.huaweicloud.com/repository/npm/material-colors/-/material-colors-1.2.6.tgz",
+      "integrity": "sha512-6qE4B9deFBIa9YSpOc9O0Sgc43zTeVYbgDT5veRKSlB2+ZuHNoVVxA1L/ckMUayV9Ay9y7Z/SZCLcGteW9i7bg==",
+      "license": "ISC"
+    },
     "node_modules/mdn-data": {
       "version": "2.0.14",
       "resolved": "https://registry.npmmirror.com/mdn-data/-/mdn-data-2.0.14.tgz",
@@ -10893,7 +10935,6 @@
       "version": "0.14.1",
       "resolved": "https://registry.npmmirror.com/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
       "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/regenerator-transform": {
@@ -13524,6 +13565,12 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/watch-size": {
+      "version": "2.0.0",
+      "resolved": "https://repo.huaweicloud.com/repository/npm/watch-size/-/watch-size-2.0.0.tgz",
+      "integrity": "sha512-M92R89dNoTPWyCD+HuUEDdhaDnh9jxPGOwlDc0u51jAgmjUvzqaEMynXSr3BaWs+QdHYk4KzibPy1TFtjLmOZQ==",
+      "license": "CC0-1.0"
+    },
     "node_modules/watchpack": {
       "version": "2.4.1",
       "resolved": "https://registry.npmmirror.com/watchpack/-/watchpack-2.4.1.tgz",
@@ -15345,7 +15392,6 @@
       "version": "7.24.1",
       "resolved": "https://registry.npmmirror.com/@babel/runtime/-/runtime-7.24.1.tgz",
       "integrity": "sha512-+BIznRzyqBf+2wCTxcKE3wDjfGeCoVE61KSHGpkzqrLi8qxqFwBeUFyId2cxkTmm55fzDGnm0+yCxaxygrLUnQ==",
-      "dev": true,
       "requires": {
         "regenerator-runtime": "^0.14.0"
       }
@@ -15507,6 +15553,21 @@
       "integrity": "sha512-j7P6Rgr3mmtdkeDGTe0E/aYyWEWVtc5yFXtHCRHs28/jptDEWfaVOc5T7cblqy1XKPPfCxJc/8DwQ5YgLOZOVQ==",
       "dev": true
     },
+    "@riophae/vue-treeselect": {
+      "version": "0.4.0",
+      "resolved": "https://repo.huaweicloud.com/repository/npm/@riophae/vue-treeselect/-/vue-treeselect-0.4.0.tgz",
+      "integrity": "sha512-J4atYmBqXQmiPFK/0B5sXKjtnGc21mBJEiyKIDZwk0Q9XuynVFX6IJ4EpaLmUgL5Tve7HAS7wkiGGSti6Uaxcg==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "babel-helper-vue-jsx-merge-props": "^2.0.3",
+        "easings-css": "^1.0.0",
+        "fuzzysearch": "^1.0.3",
+        "is-promise": "^2.1.0",
+        "lodash": "^4.0.0",
+        "material-colors": "^1.2.6",
+        "watch-size": "^2.0.0"
+      }
+    },
     "@sideway/address": {
       "version": "4.1.5",
       "resolved": "https://registry.npmmirror.com/@sideway/address/-/address-4.1.5.tgz",
@@ -18282,6 +18343,11 @@
       "integrity": "sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==",
       "dev": true
     },
+    "easings-css": {
+      "version": "1.0.0",
+      "resolved": "https://repo.huaweicloud.com/repository/npm/easings-css/-/easings-css-1.0.0.tgz",
+      "integrity": "sha512-7Uq7NdazNfVtr0RNmPAys8it0zKCuaqxJStYKEl72D3j4gbvXhhaM7iWNbqhA4C94ygCye6VuyhzBRQC4szeBg=="
+    },
     "easy-stack": {
       "version": "1.0.1",
       "resolved": "https://registry.npmmirror.com/easy-stack/-/easy-stack-1.0.1.tgz",
@@ -18847,6 +18913,11 @@
       "resolved": "https://registry.npmmirror.com/function-bind/-/function-bind-1.1.2.tgz",
       "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA=="
     },
+    "fuzzysearch": {
+      "version": "1.0.3",
+      "resolved": "https://repo.huaweicloud.com/repository/npm/fuzzysearch/-/fuzzysearch-1.0.3.tgz",
+      "integrity": "sha512-s+kNWQuI3mo9OALw0HJ6YGmMbLqEufCh2nX/zzV5CrICQ/y4AwPxM+6TIiF9ItFCHXFCyM/BfCCmN57NTIJuPg=="
+    },
     "gensync": {
       "version": "1.0.0-beta.2",
       "resolved": "https://registry.npmmirror.com/gensync/-/gensync-1.0.0-beta.2.tgz",
@@ -19474,6 +19545,11 @@
       "integrity": "sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==",
       "dev": true
     },
+    "is-promise": {
+      "version": "2.2.2",
+      "resolved": "https://repo.huaweicloud.com/repository/npm/is-promise/-/is-promise-2.2.2.tgz",
+      "integrity": "sha512-+lP4/6lKUBfQjZ2pdxThZvLUAafmZb8OAxFb8XXtiQmS35INgr85hdOGoEs124ez1FCnZJt6jau/T+alh58QFQ=="
+    },
     "is-stream": {
       "version": "1.1.0",
       "resolved": "https://registry.npmmirror.com/is-stream/-/is-stream-1.1.0.tgz",
@@ -19691,8 +19767,7 @@
     "lodash": {
       "version": "4.17.21",
       "resolved": "https://registry.npmmirror.com/lodash/-/lodash-4.17.21.tgz",
-      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
-      "dev": true
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
     },
     "lodash.debounce": {
       "version": "4.0.8",
@@ -19934,6 +20009,11 @@
         "object-visit": "^1.0.0"
       }
     },
+    "material-colors": {
+      "version": "1.2.6",
+      "resolved": "https://repo.huaweicloud.com/repository/npm/material-colors/-/material-colors-1.2.6.tgz",
+      "integrity": "sha512-6qE4B9deFBIa9YSpOc9O0Sgc43zTeVYbgDT5veRKSlB2+ZuHNoVVxA1L/ckMUayV9Ay9y7Z/SZCLcGteW9i7bg=="
+    },
     "mdn-data": {
       "version": "2.0.14",
       "resolved": "https://registry.npmmirror.com/mdn-data/-/mdn-data-2.0.14.tgz",
@@ -21606,8 +21686,7 @@
     "regenerator-runtime": {
       "version": "0.14.1",
       "resolved": "https://registry.npmmirror.com/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
-      "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==",
-      "dev": true
+      "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw=="
     },
     "regenerator-transform": {
       "version": "0.15.2",
@@ -23457,6 +23536,11 @@
         }
       }
     },
+    "watch-size": {
+      "version": "2.0.0",
+      "resolved": "https://repo.huaweicloud.com/repository/npm/watch-size/-/watch-size-2.0.0.tgz",
+      "integrity": "sha512-M92R89dNoTPWyCD+HuUEDdhaDnh9jxPGOwlDc0u51jAgmjUvzqaEMynXSr3BaWs+QdHYk4KzibPy1TFtjLmOZQ=="
+    },
     "watchpack": {
       "version": "2.4.1",
       "resolved": "https://registry.npmmirror.com/watchpack/-/watchpack-2.4.1.tgz",

package.json

@@ -7,6 +7,7 @@
     "build": "vue-cli-service build"
   },
   "dependencies": {
+    "@riophae/vue-treeselect": "^0.4.0",
     "axios": "^1.6.8",
     "core-js": "^3.8.3",
     "echarts": "^5.5.0",

src/api/system.js

@@ -1,7 +1,7 @@
 /*
  * @Author: your name
  * @Date: 2024-05-20 09:36:55
- * @LastEditTime: 2024-05-21 15:02:01
+ * @LastEditTime: 2024-05-22 09:13:09
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/api/system.js
@@ -132,6 +132,24 @@ export function updateRoleAvailable(data) {
   });
 }
 
+//通过角色获取权限
+export function getDetailRoleAuth(data) {
+  return request({
+    url: "/energy-manage-service/sysrole/getRolePermission",
+    method: "post",
+    data,
+  });
+}
+//更新角色菜单权限
+
+export function updateRolePermission(data) {
+  return request({
+    url: "/energy-manage-service/sysrole/updateRolePermission",
+    method: "post",
+    data,
+  });
+}
+
 //获取菜单列表
 export function getAllMenu(data) {
   return request({
@@ -140,19 +158,27 @@ export function getAllMenu(data) {
     data,
   });
 }
-//通过角色获取权限
-export function getDetailRoleAuth(data) {
+//更新菜单权限
+export function updateMenuFn(data) {
   return request({
-    url: "/energy-manage-service/sysrole/getRolePermission",
+    url: "/energy-manage-service/syspermission/update",
+    method: "post",
+    data,
+  });
+}
+//删除菜单
+export function deleteMenuFn(data) {
+  return request({
+    url: "/energy-manage-service/syspermission/delete",
     method: "post",
     data,
   });
 }
-//更新角色菜单权限
 
-export function updateRolePermission(data) {
+//增加菜单
+export function addMenuFn(data) {
   return request({
-    url: "/energy-manage-service/sysrole/updateRolePermission",
+    url: "/energy-manage-service/syspermission/add",
     method: "post",
     data,
   });

src/components/HeaderCom.vue

@@ -45,7 +45,6 @@
 
 <script>
 import { userLogout } from "@/api/system";
-import { resetRouter } from "@/router/index";
 import ThemePicker from "@/components/ThemePicker";
 export default {
   data() {

src/components/ThemePicker/index.vue

@@ -120,9 +120,6 @@ export default {
 
       this.$emit("change", val);
       const that = this;
-      // setTimeout(() => {
-
-      // }, 2000);
     },
 
     updateStyle(style, oldCluster, newCluster) {

src/utils/request.js

@@ -4,8 +4,11 @@ import { Message } from "element-ui";
 const service = axios.create({
   baseURL: window?._BASE_CONFIG?.API || "/api",
   withCredentials: true,
+  timeout: 5000,
 });
+
 const writeList = ["/api/energy-manage-service/sysuserinfo/open/userLogin"];
+
 /**
  * 请求拦截器
  * 统一处理请求拦截，如：添加token等
@@ -13,12 +16,11 @@ const writeList = ["/api/energy-manage-service/sysuserinfo/open/userLogin"];
 service.interceptors.request.use(
   (config) => {
     if (!writeList.includes(config.url)) {
-      return {
-        ...config,
-        headers: {
-          token: JSON.parse(sessionStorage.getItem("vuex")).auth.userInfo.token,
-        },
-      };
+      const token = JSON.parse(sessionStorage.getItem("vuex"))?.auth?.userInfo
+        ?.token;
+      if (token) {
+        config.headers.token = token;
+      }
     }
     return config;
   },
@@ -36,7 +38,6 @@ service.interceptors.response.use(
   async (response) => {
     const { data } = response;
     if (data?.code) {
-      console.log(data?.code, "data?.code");
       if (data.code !== 200) {
         Message({
           message: data.msg || "Error",
@@ -51,8 +52,6 @@ service.interceptors.response.use(
       return response;
     } else if (data.type === "application/json") {
       const resData = JSON.parse(await data.text());
-      console.log(resData);
-      // 根据后端返回code码进行处理
       if (resData.code !== 200) {
         Message({
           message: resData.msg || "Error",
@@ -67,29 +66,54 @@ service.interceptors.response.use(
   },
   (error) => {
     const { response } = error;
-    if (response?.status === 401) {
-      window.location = response.data;
-      return;
+    if (response) {
+      if (response.status === 401) {
+        window.location = response.data;
+      } else {
+        Message({
+          message: response.data.message || error.message,
+          type: "error",
+          duration: 5 * 1000,
+        });
+      }
+    } else {
+      Message({
+        message: error.message,
+        type: "error",
+        duration: 5 * 1000,
+      });
     }
-    Message({
-      message: error.message,
-      type: "error",
-      duration: 5 * 1000,
-    });
     return Promise.reject(error);
   }
 );
 
-const request = (requestObj) => {
-  const { url, method, data = {}, timeout, params, responseType } = requestObj;
-  return service({
-    url,
-    method: method || "post",
-    data,
-    timeout: timeout || 300000,
-    params: params || (method && method.toLowerCase() === "get" ? data : {}),
-    responseType: responseType || "json",
-  });
+/**
+ * 统一处理请求
+ * @param {Object} requestObj 请求参数
+ */
+const request = async (requestObj) => {
+  try {
+    const {
+      url,
+      method,
+      data = {},
+      timeout,
+      params,
+      responseType,
+    } = requestObj;
+    const response = await service({
+      url,
+      method: method || "post",
+      data,
+      timeout: timeout || 300000,
+      params: params || (method && method.toLowerCase() === "get" ? data : {}),
+      responseType: responseType || "json",
+    });
+    return response;
+  } catch (error) {
+    // console.error("Request error:", error);
+    throw error;
+  }
 };
 
 export default request;

src/views/system/menuMag/components/editDialog.vue

@@ -0,0 +1,229 @@
+<template>
+  <div>
+    <el-form
+      :model="menuForm"
+      :rules="addMenuRules"
+      ref="addUserForm"
+      label-width="100px"
+      class="demo-ruleForm"
+    >
+      <el-form-item label="上级目录:" prop="parentId" v-if="activeName !== '1'">
+        <treeselect
+          :normalizer="normalizer"
+          :noChildrenText="'没有子选项'"
+          :noOptionsText="'没有可选项'"
+          :noResultsText="'没有匹配的结果'"
+          :placeholder="'请选择'"
+          :searchable="true"
+          v-model="menuForm.parentId"
+          placeholder="请选择"
+          :options="menuOptions"
+        ></treeselect>
+      </el-form-item>
+      <el-form-item label="菜单名称:" prop="pname">
+        <el-input
+          v-model="menuForm.pname"
+          placeholder="请输入菜单名称"
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="菜单标识:" prop="pcode">
+        <el-input
+          v-model="menuForm.pcode"
+          placeholder="请输入菜单标识"
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="路由地址:" prop="purl" v-if="activeName !== '1'">
+        <el-input
+          v-model="menuForm.purl"
+          placeholder="请输入路由地址"
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="是否显示:" prop="permissionShow">
+        <el-select
+          v-model="menuForm.permissionShow"
+          placeholder="请选择状态"
+          style="width: 100%"
+        >
+          <el-option label="显示" :value="1"></el-option>
+          <el-option label="不显示" :value="2"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="状态:" prop="pstat">
+        <el-select
+          v-model="menuForm.pstat"
+          placeholder="请选择状态"
+          style="width: 100%"
+        >
+          <el-option label="启用" :value="1"></el-option>
+          <el-option label="停用" :value="0"></el-option>
+        </el-select>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+import Treeselect from "@riophae/vue-treeselect";
+import { addMenuFn, updateMenuFn } from "@/api/system";
+
+import "@riophae/vue-treeselect/dist/vue-treeselect.css";
+
+export default {
+  components: {
+    Treeselect,
+  },
+  props: {
+    activeName: {
+      type: String,
+    },
+    tableData: {
+      type: Array,
+    },
+    checkId: {
+      type: Number,
+    },
+    title: {
+      type: String,
+    },
+    row: {
+      type: Object,
+    },
+  },
+  data() {
+    return {
+      menuForm: {
+        parentId: null,
+        pname: null,
+        purl: null,
+        pstat: null,
+        pcode: null,
+        permissionShow: null,
+      },
+      addMenuRules: {
+        permissionShow: {
+          required: true,
+          message: "请选择",
+          trigger: "change",
+        },
+        pcode: [
+          { required: true, message: "请填写菜单菜单标识", trigger: "blur" },
+        ],
+        pname: [{ required: true, message: "请填写菜单名称", trigger: "blur" }],
+        purl: [{ required: true, message: "请填写路由地址", trigger: "blur" }],
+        parentId: [
+          { required: true, message: "请选择上级目录", trigger: "change" },
+        ],
+        pstat: [{ required: true, message: "请选择状态", trigger: "change" }],
+      },
+      stateOPtions: [],
+      menuOptions: [
+        { permissionId: 0, permissionName: "主类目", children: [] },
+      ],
+    };
+  },
+  created() {
+    this.menuOptions[0].children.push(...this.tableData);
+    if (this.title === "编辑" && this.activeName === "2") {
+      this.menuForm = {
+        parentId: this.row.parentId,
+        pname: this.row.permissionName,
+        purl: this.row.permissionUrl,
+        pstat: this.row.permissionState,
+        pcode: this.row.permissionCode,
+        permissionShow: this.row.permissionShow,
+      };
+    } else if (this.title === "新增" && this.activeName === "2") {
+      this.menuForm.parentId = this.row.permissionId;
+    }
+  },
+  watch: {
+    checkId(newVale, oldVal) {
+      if (newVale) {
+        console.log(newVale, "newVale");
+        if (this.title === "编辑" && this.activeName === "2") {
+          this.menuForm = {
+            parentId: this.row.parentId,
+            pname: this.row.permissionName,
+            purl: this.row.permissionUrl,
+            pstat: this.row.permissionState,
+            pcode: this.row.permissionCode,
+            permissionShow: this.row.permissionShow,
+          };
+        } else if (this.title === "新增" && this.activeName === "2") {
+          this.menuForm.parentId = this.row.permissionId;
+        }
+      }
+    },
+  },
+  methods: {
+    /** 转换菜单数据结构 */
+    normalizer(node) {
+      if (node.children && !node.children.length) {
+        delete node.children;
+      }
+      return {
+        id: node.permissionId,
+        label: node.permissionName,
+        children: node.children,
+      };
+    },
+    submit() {
+      const that = this;
+      this.$refs["addUserForm"].validate((valid) => {
+        if (valid) {
+          if (this.title === "编辑") {
+            updateMenuFn({
+              ...this.menuForm,
+              permissionId: this.row.permissionId,
+            })
+              .then((res) => {
+                this.$message({
+                  type: "success",
+                  message: "编辑成功",
+                });
+                this.cancel();
+                that.$emit("updateList");
+              })
+              .catch((error) => {
+                this.$message({
+                  type: "error",
+                  message: "编辑失败",
+                });
+              });
+          } else if (this.title === "新增") {
+            addMenuFn({
+              ...this.menuForm,
+              purl:
+                this.menuForm.purl !== null ? this.menuForm.purl : undefined,
+              ptype: "1",
+              parentId:
+                this.activeName === "1" ? undefined : this.menuForm.parentId,
+            })
+              .then((res) => {
+                this.$message({
+                  type: "success",
+                  message: "新增成功",
+                });
+                this.cancel();
+                that.$emit("updateList");
+              })
+              .catch((error) => {
+                this.$message({
+                  type: "error",
+                  message: "新增失败",
+                });
+              });
+          }
+        } else {
+          return false;
+        }
+      });
+    },
+    cancel() {
+      this.$refs["addUserForm"].resetFields();
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss"></style>

src/views/system/menuMag/index.vue

@@ -1,29 +1,35 @@
 <template>
   <div class="global-variable">
     <div class="condition">
-      <el-form :inline="true" :model="formInline" class="demo-form-inline">
-        <el-form-item label="单位名称:">
+      <el-form
+        :inline="true"
+        :model="formInline"
+        class="demo-form-inline"
+        ref="ruleForm"
+        :rules="rules"
+      >
+        <el-form-item label="菜单名称:" prop="permissionName">
           <el-input
-            v-model="formInline.user"
-            placeholder="请输入单位名称"
+            v-model="formInline.permissionName"
+            placeholder="请输入菜单名称"
             size="small"
           ></el-input>
         </el-form-item>
-        <el-form-item label="状态:">
+        <el-form-item label="状态:" prop="permissionState">
           <el-select
-            v-model="formInline.region"
+            v-model="formInline.permissionState"
             placeholder="选择状态"
             size="small "
           >
             <el-option label="启用" value="1"></el-option>
-            <el-option label="停用" value="2"></el-option>
+            <el-option label="停用" value="0"></el-option>
           </el-select>
         </el-form-item>
         <el-form-item>
           <el-button type="primary" @click="onSubmit" size="small"
             >查询</el-button
           >
-          <el-button @click="reset" size="small">重置</el-button>
+          <el-button @click="reset('ruleForm')" size="small">重置</el-button>
         </el-form-item>
       </el-form>
     </div>
@@ -32,46 +38,57 @@
         <el-button type="primary" @click="newnuedialog" size="small"
           >新增</el-button
         >
+        <el-button type="primary" @click="toggleExpandAll" size="small">{{
+          defaultExpandAll ? "收起" : "展开"
+        }}</el-button>
       </div>
       <el-table
+        v-loading="loading"
         class="center-align-table"
         :data="tableData"
         border
-        :cell-style="rowStyle"
         stripe
-        row-key="id"
-        default-expand-all
+        row-key="permissionId"
         :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
+        ref="table"
       >
-        <el-table-column fixed prop="name" align="center" label="单位名称">
+        <el-table-column prop="permissionName" label="菜单名称">
         </el-table-column>
-        <el-table-column prop="" align="center" label="类型"> </el-table-column>
-
-        <el-table-column prop="abnormal" label="排序" width="80">
+        <el-table-column
+          prop="permissionType"
+          label="类型"
+          width="100"
+          align="center"
+        >
           <template slot-scope="scope">
-            <el-button
-              v-if="scope.row.abnormal == 1"
-              @click="particulars(scope.row)"
-              type="text"
-              size="small"
-              >10</el-button
-            >
-            <span v-else>/</span>
+            <span>{{ scope.row.permissionType == 1 ? "菜单" : "功能" }}</span>
           </template>
         </el-table-column>
 
-        <el-table-column prop="" align="center" label="权限标识" width="100">
+        <el-table-column
+          prop="permissionSort"
+          label="排序"
+          width="80"
+          align="center"
+        >
+        </el-table-column>
+
+        <el-table-column prop="permissionCode" label="权限标识" align="center">
+        </el-table-column>
+        <el-table-column prop="permissionUrl" label="路径" align="center">
         </el-table-column>
-        <el-table-column prop="" align="center" label="路径"> </el-table-column>
-        <el-table-column prop="" align="center" label="状态"> </el-table-column>
         <el-table-column
-          prop="transition"
+          prop="permissionState"
+          label="状态"
           align="center"
-          fixed="right"
-          label="操作"
-          width="200"
+          width="80"
         >
           <template slot-scope="scope">
+            <span>{{ scope.row.permissionState === 1 ? "启用" : "停用" }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column fixed="right" label="操作" align="center">
+          <template slot-scope="scope">
             <el-button @click="compile(scope.row)" type="text" size="small"
               >编辑</el-button
             >
@@ -79,8 +96,8 @@
               >新增</el-button
             >
             <el-button
-              v-if="scope.row.transition == 1"
-              @click="start(scope.row)"
+              v-if="scope.row.permissionState === 0"
+              @click="updateState(scope.row, 1)"
               type="text"
               size="small"
               >启用</el-button
@@ -88,7 +105,7 @@
             <el-button
               v-else
               style="color: #666"
-              @click="stop(scope.row)"
+              @click="updateState(scope.row, 0)"
               type="text"
               size="small"
               >停用</el-button
@@ -103,188 +120,191 @@
           </template>
         </el-table-column>
       </el-table>
-      <div class="pagination-container">
-        <el-pagination
-          :page-size="10"
-          :pager-count="11"
-          layout="total, prev, pager, next"
-          :total="35"
-        >
-        </el-pagination>
-      </div>
     </div>
 
-    <!-- 弹出层 -->
-    <!-- 新增 -->
-    <el-dialog :title="title" :visible.sync="nuedialog" width="380px">
-      <el-form ref="newform" :rules="rules" :model="newform" label-width="90px">
-        <el-form-item label="单位名称:" prop="unit">
-          <el-input v-model="newform.unit" size="small"></el-input>
-        </el-form-item>
-        <el-form-item label="所属省:" prop="province">
-          <el-select
-            v-model="newform.province"
-            placeholder="请选择"
+    <!-- 新增编辑弹出层 -->
+    <el-dialog :title="title" :visible.sync="unusualdialog" width="500px">
+      <div v-loading="loadingView" class="views">
+        <el-tabs type="border-card" class="tabs" v-model="activeName">
+          <el-tab-pane label="目录" name="1"
+            ><EditMenu
+              ref="addList"
+              :activeName="activeName"
+              :tableData="tableData"
+              :checkId="checkId"
+              :title="title"
+              @updateList="updateList"
+            />
+          </el-tab-pane>
+          <el-tab-pane label="菜单" name="2"
+            ><EditMenu
+              ref="addMenu"
+              :activeName="activeName"
+              :tableData="tableData"
+              :checkId="checkId"
+              :title="title"
+              @updateList="updateList"
+              :row="row"
+          /></el-tab-pane>
+        </el-tabs>
+        <span slot="footer" class="dialog-footer">
+          <el-button
+            @click="
+              () => {
+                this.$refs.addMenu.cancel();
+                this.loadingView = false;
+                this.unusualdialog = false;
+                this.checkId = '';
+              }
+            "
             size="small"
+            >取 消</el-button
           >
-            <el-option label="区域一" value="shanghai"></el-option>
-          </el-select>
-        </el-form-item>
-        <el-form-item label="所属市:" prop="city">
-          <el-select v-model="newform.city" placeholder="请选择" size="small">
-            <el-option label="区域一" value="shanghai"></el-option>
-          </el-select>
-        </el-form-item>
-        <el-form-item label="备注:">
-          <el-input
-            v-model="newform.name"
-            size="small"
-            type="textarea"
-          ></el-input>
-        </el-form-item>
-      </el-form>
-      <span slot="footer" class="dialog-footer">
-        <el-button @click="nuedialog = false" size="small">取 消</el-button>
-        <el-button type="primary" @click="newly" size="small">确 定</el-button>
-      </span>
-    </el-dialog>
-
-    <!-- 风场数量 -->
-    <el-dialog title="风场数量" :visible.sync="unusualdialog" width="1000px">
-      <el-table
-        class="center-align-table"
-        :data="tableData"
-        border
-        :cell-style="rowStyle"
-        stripe
-      >
-        <!-- Table Columns -->
-        <el-table-column fixed prop="name" align="center" label="风场名称">
-        </el-table-column>
-        <el-table-column prop="" align="center" label="所在省">
-        </el-table-column>
-        <el-table-column prop="" align="center" label="所在市">
-        </el-table-column>
-        <el-table-column prop="" align="center" label="海拔高度" width="80">
-        </el-table-column>
-        <el-table-column prop="" align="center" label="经度" width="80">
-        </el-table-column>
-        <el-table-column prop="" align="center" label="纬度" width="80">
-        </el-table-column>
-        <el-table-column prop="" align="center" label="额定容量">
-        </el-table-column>
-      </el-table>
-
-      <div class="pagination-container">
-        <el-pagination
-          :page-size="10"
-          :pager-count="11"
-          layout="total, prev, pager, next"
-          :total="35"
-        >
-        </el-pagination>
+          <el-button type="primary" @click="editAuthMenu" size="small"
+            >确 定</el-button
+          >
+        </span>
       </div>
     </el-dialog>
   </div>
 </template>
 
 <script>
+import {
+  addMenuFn,
+  deleteMenuFn,
+  updateMenuFn,
+  getAllMenu,
+} from "@/api/system";
+import EditMenu from "./components/editDialog.vue";
 export default {
+  components: {
+    EditMenu,
+  },
   data() {
     return {
+      activeName: "1",
+      title: "",
+      loadingView: false,
+      defaultExpandAll: true,
+      row: {},
       rules: {
-        unit: [{ required: true, message: "请填写单位名称", trigger: "blur" }],
-        province: [{ required: true, message: "请选择省", trigger: "change" }],
-        city: [{ required: true, message: "请选择省", trigger: "change" }],
+        roleId: { permissionName: "change" },
+        userName: { permissionState: "blur" },
       },
+      loading: false,
       formInline: {
-        user: "",
-        region: "",
+        permissionName: "",
+        permissionState: "",
       },
-      tableData: [
-        {
-          id: 1,
-          name: "王小虎",
-          transition: "1",
-        },
-        {
-          id: 3,
-          name: "王小虎",
-          abnormal: "1",
-          transition: "0",
-          children: [
-            {
-              id: 31,
-
-              name: "王小虎",
-
-              abnormal: "1",
-            },
-          ],
-        },
-      ],
-      nuedialog: false,
+      tableData: [],
       unusualdialog: false,
-      newform: {
-        unit: "",
-        province: "",
-        city: "",
-        descr: "",
-      },
-      title: "新增",
-      warningShown: false,
+      checkId: "",
     };
   },
+  created() {
+    this.getTableList();
+  },
+  watch: {
+    tableData: {
+      handler(newData) {
+        this.$nextTick(() => {
+          this.setExpandAll(this.defaultExpandAll);
+        });
+      },
+      immediate: true,
+      deep: true,
+    },
+  },
   methods: {
-    rowStyle() {
-      return "text-align:center";
+    toggleExpandAll() {
+      this.defaultExpandAll = !this.defaultExpandAll;
+      this.$nextTick(() => {
+        this.setExpandAll(this.defaultExpandAll);
+      });
+    },
+    setExpandAll(expand) {
+      const table = this.$refs.table;
+      if (table) {
+        this.tableData.forEach((row) => {
+          table.toggleRowExpansion(row, expand);
+          if (row.children) {
+            row.children.forEach((child) => {
+              table.toggleRowExpansion(child, expand);
+            });
+          }
+        });
+      }
+    },
+    async getTableList() {
+      try {
+        this.loading = true;
+        const result = await getAllMenu({ ...this.formInline });
+        this.tableData = result.data;
+        this.loading = false;
+      } catch (error) {
+        this.$message({
+          type: "error",
+          message: "请检查是否连接网络",
+        });
+      }
+    },
+    //弹框确定按钮
+    editAuthMenu() {
+      if (this.activeName === "1") {
+        this.$refs.addList.submit();
+        this.checkId = "";
+        //目录
+      } else {
+        //菜单
+        this.$refs.addMenu.submit();
+        this.checkId = "";
+      }
+    },
+    updateList() {
+      console.log("updateList");
+      this.getTableList();
+      this.unusualdialog = false;
     },
-
     // 查询
     onSubmit() {
-      console.log("submit!");
+      this.getTableList();
     },
     // 重置
-    reset() {
-      this.formInline.user = "";
-      this.formInline.region = "";
-    },
-    // 新增
-    newly() {
-      this.nuedialog = false;
-    },
-
-    //异常详情
-    particulars(row) {
-      this.unusualdialog = true;
+    reset(formName) {
+      this.$refs[formName].resetFields();
+      this.getTableList();
     },
     // 编辑
     compile(row) {
-      this.nuedialog = true;
+      this.unusualdialog = true;
+      this.activeName = "2";
+      this.checkId = row.permissionId;
+      this.row = row;
       this.title = "编辑";
     },
     // 新增子级
     newcomer(row) {
-      this.nuedialog = true;
+      this.unusualdialog = true;
+      this.checkId = row.permissionId;
+      this.activeName = "2";
       this.title = "新增";
     },
-    // 启用
-    start(row) {},
-    // 停用
-    stop(row) {},
-    // 删除
-    deleted(row) {
-      if (row.transition === "0") {
-        if (!this.warningShown) {
+    // 启用/停用
+    updateState(row, state) {
+      updateMenuFn({ permissionId: row.permissionId, pstat: state })
+        .then((res) => {
           this.$message({
-            type: "error",
-            message: "该项处于停用状态，无法删除！",
+            message: "状态更新成功",
+            type: "success",
           });
-          this.warningShown = true; // 设置警告消息已经显示过了的标志位为true
-        }
-        return;
-      }
+          this.getTableList();
+        })
+        .catch(() => {});
+    },
 
+    // 删除
+    deleted(row) {
       this.$confirm("此操作将永久删除该文件，是否继续？", "提示", {
         confirmButtonText: "确定",
         cancelButtonText: "取消",
@@ -292,10 +312,15 @@ export default {
       })
         .then(() => {
           // 执行删除操作
-          this.$message({
-            type: "success",
-            message: "删除成功！",
-          });
+          deleteMenuFn({ permissionId: row.permissionId })
+            .then(() => {
+              this.$message({
+                type: "success",
+                message: "删除成功！",
+              });
+              this.getTableList();
+            })
+            .catch(() => {});
         })
         .catch(() => {
           // 取消删除
@@ -305,9 +330,10 @@ export default {
           });
         });
     },
-
+    //新增菜单目录
     newnuedialog() {
-      this.nuedialog = true;
+      this.unusualdialog = true;
+      this.activeName = "1";
       this.title = "新增";
     },
   },

src/views/system/roleMag/index.vue

@@ -339,10 +339,11 @@ export default {
     };
   },
   created() {
-    //字典查询角色类型
-    dictType({ dictType: 2 }).then((res) => {
-      this.stateOPtions = res.data;
-    });
+    dictType({ dictType: 2 })
+      .then((res) => {
+        this.stateOPtions = res.data;
+      })
+      .catch(() => {});
     this.getTableList();
   },
   methods: {
@@ -395,15 +396,22 @@ export default {
         .catch((error) => {});
     },
     async getTableList() {
-      this.loading = true;
-      const result = await getRoleTableList({
-        ...this.formInline,
-        roleAvailable: Number(this.formInline.roleAvailable),
-        totalSize: undefined,
-      });
-      this.tableData = result.data.list;
-      this.formInline.totalSize = result.data.totalSize;
-      this.loading = false;
+      try {
+        this.loading = true;
+        const result = await getRoleTableList({
+          ...this.formInline,
+          roleAvailable: Number(this.formInline.roleAvailable),
+          totalSize: undefined,
+        });
+        this.tableData = result.data.list;
+        this.formInline.totalSize = result.data.totalSize;
+        this.loading = false;
+      } catch (error) {
+        this.$message({
+          type: "error",
+          message: "请检查是否连接网络",
+        });
+      }
     },
 
     rowStyle() {
@@ -518,13 +526,15 @@ export default {
     editAuth(row) {
       this.editRoleAuth.roleCode = row.roleCode;
       this.editRoleAuth.roleName = row.roleDescription;
-      getDetailRoleAuth({ roleId: row.id }).then((res) => {
-        this.treeObj = {
-          roleId: row.id,
-          checkList: res.data,
-        };
-        this.unusualdialog = true;
-      });
+      getDetailRoleAuth({ roleId: row.id })
+        .then((res) => {
+          this.treeObj = {
+            roleId: row.id,
+            checkList: res.data,
+          };
+          this.unusualdialog = true;
+        })
+        .catch(() => {});
     },
     // 新增
     newnuedialog() {

src/views/system/userMag/index.vue

@@ -388,18 +388,32 @@ export default {
       }
     },
     async getTableList() {
-      this.loading = true;
-      const result = await getUserTableList({
-        ...this.formInline,
-        totalSize: undefined,
-      });
-      this.tableData = result.data.list;
-      this.formInline.totalSize = result.data.totalSize;
-      this.loading = false;
+      try {
+        this.loading = true;
+        const result = await getUserTableList({
+          ...this.formInline,
+          totalSize: undefined,
+        });
+        this.tableData = result.data.list;
+        this.formInline.totalSize = result.data.totalSize;
+        this.loading = false;
+      } catch (error) {
+        this.$message({
+          type: "error",
+          message: "请检查是否连接网络",
+        });
+      }
     },
     async getRoleList() {
-      const result = await getRoleTableList({ pageNum: 1, pageSize: 100000 });
-      this.roleList = result.data.list;
+      try {
+        const result = await getRoleTableList({ pageNum: 1, pageSize: 100000 });
+        this.roleList = result.data.list;
+      } catch (error) {
+        this.$message({
+          type: "error",
+          message: "请检查是否连接网络",
+        });
+      }
     },
     rowStyle() {
       return "text-align:center";

vue.config.js

@@ -33,7 +33,8 @@ module.exports = {
   devServer: {
     proxy: {
       "/api": {
-        target: "http://192.168.50.235:16200", //内网
+        // target: "http://192.168.5.4:16200", //内网
+        target: "http://192.168.50.235:16200",
         // target: "http://106.120.102.238:16600",//外网
         changeOrigin: true,
         pathRewrite: {