权限管理+联调

src/App.vue

@@ -11,9 +11,7 @@ import { login } from "@/api/login";
 import { testApi } from "@/api/test";
 import "@/assets/style/index.css";
 export default {
-  created() {
-    // this.test('2122')
-  },
+  created() {},
   components: { ThemePicker },
   metaInfo() {
     return {

src/api/dict.js

@@ -0,0 +1,17 @@
+/*
+ * @Author: your name
+ * @Date: 2024-05-20 17:07:07
+ * @LastEditTime: 2024-05-20 17:07:53
+ * @LastEditors: bogon
+ * @Description: In User Settings Edit
+ * @FilePath: /performance-test/src/api/dice.js
+ */
+import request from "@/utils/request";
+
+export function dictType(data) {
+  return request({
+    url: "/energy-manage-service/dict/getDictList",
+    method: "post",
+    data,
+  });
+}

src/api/system.js

@@ -1,7 +1,7 @@
 /*
  * @Author: your name
  * @Date: 2024-05-20 09:36:55
- * @LastEditTime: 2024-05-20 15:50:56
+ * @LastEditTime: 2024-05-21 15:02:01
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/api/system.js
@@ -42,7 +42,7 @@ export function disableUser(data) {
 //查看用户详情信息
 export function getUserInfoByUserId(data) {
   return request({
-    url: "/energy-manage-service/sysuserinfo/getUserInfoByUserId",
+    url: "/energy-manage-service/sysuserinfo/getUserById",
     method: "get",
     params: data,
   });
@@ -89,3 +89,71 @@ export function getRoleTableList(data) {
     data,
   });
 }
+//删除角色
+
+export function deleteRoleInfo(data) {
+  return request({
+    url: "/energy-manage-service/sysrole/deleteRole",
+    method: "post",
+    data,
+  });
+}
+//新增角色接口
+export function addRole(data) {
+  return request({
+    url: "/energy-manage-service/sysrole/addRole",
+    method: "post",
+    data,
+  });
+}
+//编辑角色接口
+export function editRole(data) {
+  return request({
+    url: "/energy-manage-service/sysrole/updateRole",
+    method: "post",
+    data,
+  });
+}
+//查看角色详情信息
+export function getRoleBId(data) {
+  return request({
+    url: "/energy-manage-service/sysrole/getRoleBId",
+    method: "post",
+    data,
+  });
+}
+//更新角色状态
+
+export function updateRoleAvailable(data) {
+  return request({
+    url: "/energy-manage-service/sysrole/updateRoleAvailable",
+    method: "post",
+    data,
+  });
+}
+
+//获取菜单列表
+export function getAllMenu(data) {
+  return request({
+    url: "/energy-manage-service/syspermission/getAll",
+    method: "post",
+    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,
+  });
+}

src/components/HeaderCom.vue

@@ -15,7 +15,7 @@
         <img src="@/assets/portrait.png" slot="reference" />
         <div>
           <div class="cursor-pointer boxmini">
-            <p>账号：andmi</p>
+            <p>账号：admin</p>
           </div>
           <el-divider></el-divider>
           <div class="cursor-pointer boxmini">
@@ -45,6 +45,7 @@
 
 <script>
 import { userLogout } from "@/api/system";
+import { resetRouter } from "@/router/index";
 import ThemePicker from "@/components/ThemePicker";
 export default {
   data() {
@@ -84,8 +85,7 @@ export default {
       userLogout({
         phone: this.$store.state.auth.userInfo.userInfo.userPhone,
       }).then((res) => {
-        console.log(res);
-        this.$store.commit("auth/DEL_TOKEN");
+        this.$store.commit("auth/RESET_USER_STATE");
         this.$router.push("/login");
       });
     },

src/router/index.js

@@ -1,27 +1,40 @@
-// router/index.js
 import Vue from "vue";
 import VueRouter from "vue-router";
 import Home from "../views/home/Index.vue";
 
 Vue.use(VueRouter);
 
-const routes = [
-  {
-    path: "/",
-    redirect: "/login",
-  },
-  {
-    path: "/home",
-    redirect: "/home/cockpitManage",
-    name: "home",
-    component: Home,
-    children: [
-      // 驾驶舱
+const createRouter = () =>
+  new VueRouter({
+    mode: "history",
+    base: process.env.BASE_URL,
+    scrollBehavior: () => ({ y: 0 }),
+    routes: [
       {
-        path: "cockpitManage",
-        name: "cockpitManage",
-        component: () => import("../views/admin/cockpitManage/Index.vue"),
+        path: "/",
+        redirect: "/login",
+      },
+      {
+        path: "/home",
+        redirect: "/home/cockpitManage",
+        name: "home",
+        component: Home,
         children: [
+          // 驾驶舱
+          {
+            path: "cockpitManage",
+            name: "cockpitManage",
+            component: () => import("../views/admin/cockpitManage/Index.vue"),
+            children: [
+              // 电子地图
+              {
+                path: "electronic-map",
+                name: "electronicMap",
+                component: () =>
+                  import("../views/admin/cockpitManage/electronicMap.vue"),
+              },
+            ],
+          },
           // 电子地图
           {
             path: "electronic-map",
@@ -29,76 +42,64 @@ const routes = [
             component: () =>
               import("../views/admin/cockpitManage/electronicMap.vue"),
           },
+          // 数据操作
+          {
+            path: "dataAdministration",
+            name: "dataAdministration",
+            component: () => import("../views/dataAdministration/index.vue"),
+          },
+          // 企业信息
+          {
+            path: "enterprise",
+            name: "enterprise",
+            component: () => import("../views/ledger/enterprise.vue"),
+          },
+          // 风场信息
+          {
+            path: "windsite",
+            name: "windsite",
+            component: () => import("../views/ledger/windsite.vue"),
+          },
+          // 风机信息
+          {
+            path: "draught",
+            name: "draught",
+            component: () => import("../views/ledger/draught.vue"),
+          },
+          // 机型信息
+          {
+            path: "milltype",
+            name: "milltype",
+            component: () => import("../views/ledger/milltype.vue"),
+          },
+          // 测风塔信息
+          {
+            path: "anemometer",
+            name: "anemometer",
+            component: () => import("../views/ledger/anemometer.vue"),
+          },
         ],
       },
-      // 电子地图
-      {
-        path: 'electronic-map',
-        name: 'electronicMap',
-        component: () =>
-          import('../views/admin/cockpitManage/electronicMap.vue')
-      },
-      //数据操作
       {
-        path: 'dataAdministration',
-        name: 'dataAdministration',
-        component: () =>
-          import('../views/dataAdministration/index.vue')
+        path: "/login",
+        name: "login",
+        component: () => import("../views/login/Index.vue"),
       },
-      //企业信息
-      {
-        path: 'enterprise',
-        name: 'enterprise',
-        component: () =>
-          import('../views/ledger/enterprise.vue')
-      },
-      //风场信息
-      {
-        path: 'windsite',
-        name: 'windsite',
-        component: () =>
-          import('../views/ledger/windsite.vue')
-      },
-      // 风机信息
-      {
-        path: 'draught',
-        name: 'draught',
-        component: () =>
-          import('../views/ledger/draught.vue')
-      },
-      // 机型信息
-      {
-        path: 'milltype',
-        name: 'milltype',
-        component: () =>
-          import('../views/ledger/milltype.vue')
-      },
-        // 测风塔信息
-        {
-          path: 'anemometer',
-          name: 'anemometer',
-          component: () =>
-            import('../views/ledger/anemometer.vue')
-        },
-    ]
-  },
-  {
-    path: "/login",
-    name: "login",
-    component: () => import("../views/login/Index.vue"),
-  },
-];
+    ],
+  });
 
-const router = new VueRouter({
-  mode: "history",
-  base: process.env.BASE_URL,
-  scrollBehavior: () => ({ y: 0 }),
-  routes,
-});
+const router = createRouter();
 
 const originalPush = VueRouter.prototype.push;
 VueRouter.prototype.push = function push(location) {
   return originalPush.call(this, location).catch((err) => err);
 };
 
+// 重置路由
+export function resetRouter() {
+  const newRouter = createRouter();
+  router.matcher = newRouter.matcher; // reset router
+  console.log(router.getRoutes(), "重置后的路由");
+}
+
 export default router;

src/store/auth.js

@@ -1,23 +1,21 @@
 import { login } from "../api/login";
 import { getAuthRouterFn } from "@/utils/getAuth";
+import { resetRouter } from "@/router/index";
 
 export default {
   namespaced: true, // 子模块一定要开启命名空间
   state: {
     userInfo: {},
-    // routes: [],
   },
   getters: {},
   mutations: {
     SET_USERINFO(state, payload) {
       state.userInfo = payload;
     },
-    DEL_TOKEN(state, payload) {
-      state.userInfo.token = null;
+    RESET_USER_STATE(state) {
+      state.userInfo = {};
+      resetRouter();
     },
-    // SET_ROUTES(state, routes) {
-    //   state.routes = routes;
-    // },
   },
   actions: {
     async goLogin({ commit, dispatch }, { loginForm, router }) {
@@ -33,8 +31,6 @@ export default {
       }
     },
     setAddRouter({ commit }, { resultRouter, router }) {
-      console.log("1111");
-      const { authRouterList } = getAuthRouterFn(resultRouter);
       // 获取home路由
       const homeRoute = router.options.routes.find(
         (route) => route.name === "home"
@@ -44,6 +40,13 @@ export default {
         if (!homeRoute.children) {
           homeRoute.children = [];
         }
+        // 过滤掉动态添加的路由，保留初始状态的路由
+        const originalChildren = homeRoute.children.filter(
+          (route) => route.meta && !route.meta.dynamic
+        );
+        // 清空原有的动态子路由
+        homeRoute.children = originalChildren;
+        const { authRouterList } = getAuthRouterFn(resultRouter);
         authRouterList.forEach((item) => {
           // 动态路由的父路径设置为home
           homeRoute.children.push(item);
@@ -58,12 +61,14 @@ export default {
         component: () => import("@/views/error/404.vue"),
         meta: { hidden: true },
       });
-      console.log("router", router.getRoutes());
-      // 持久化存储动态路由
-      // commit("SET_ROUTES", homeRoute.children);
-      // localStorage.setItem("authRoutes", JSON.stringify(homeRoute.children));
       // 确保导航到动态添加的路由
-      router.push("/home/system/userMag");
+      router.push("/home");
+    },
+    logout({ commit }) {
+      // 重置 Vuex 状态
+      commit("RESET_USER_STATE");
+      // 重置路由
+      resetRouter();
     },
   },
 };

src/styles/index.scss

@@ -1,7 +1,7 @@
 // @import 'minireset.css/minireset.sass';
-@import './element-ui.scss';
-@import './tailwind.css';
-@import './base.css';
+@import "./element-ui.scss";
+@import "./tailwind.css";
+@import "./base.css";
 
 body {
   background-color: #eef1f3;
@@ -11,3 +11,7 @@ img,
 svg {
   display: inline;
 }
+.views .dialog-footer {
+  display: flex !important;
+  justify-content: end !important;
+}

src/utils/getMenu.js

@@ -0,0 +1,54 @@
+/*
+ * @Author: your name
+ * @Date: 2024-05-21 14:21:20
+ * @LastEditTime: 2024-05-21 17:36:17
+ * @LastEditors: bogon
+ * @Description: In User Settings Edit
+ * @FilePath: /performance-test/src/utils/getMenu.js
+ */
+export const checkListFn = (data) => {
+  let list = [];
+  recursiveFind(data);
+  function recursiveFind(data) {
+    data.forEach((item) => {
+      //   if (item.permissionType === 1 && item.checked === 1) {
+      if (item.checked === 1) {
+        list.push(item.permissionId);
+      }
+      if (item.children && item.children.length > 0) {
+        recursiveFind(item.children); // 递归遍历子节点
+      }
+    });
+  }
+  return list;
+};
+
+// data 是一个树形数组结构数据，checkIdList是一个一维数组
+// 需求：递归循环data，data.permissionId在checkIdList这个数组中，父级节点和祖先节点的permissionId也需要push到新的一维数组，这个方法如何改？
+export const getcheckListFn = (checkIdList, data) => {
+  let list = [];
+  console.log(checkIdList, "checkIdList");
+  function recursiveFind(node, ancestors = []) {
+    if (checkIdList.includes(node.permissionId)) {
+      // 将当前节点的 permissionId 加入到列表中
+      list.push(node.permissionId);
+
+      // 将当前节点的祖先节点的 permissionId 加入到列表中
+      ancestors.forEach((ancestor) => {
+        list.push(ancestor.permissionId);
+      });
+    }
+    // 递归遍历子节点
+    if (node.children && node.children.length > 0) {
+      node.children.forEach((child) => {
+        recursiveFind(child, [...ancestors, node]);
+      });
+    }
+  }
+  // 从根节点开始递归遍历
+  data.forEach((root) => {
+    recursiveFind(root);
+  });
+
+  return list;
+};

src/views/login/Index.vue

@@ -43,6 +43,7 @@
 </template>
 
 <script>
+import { resetRouter } from "@/router/index.js";
 export default {
   data() {
     var validatePass = (rule, value, callback) => {
@@ -210,7 +211,7 @@ export default {
   }
 }
 
-.el-input{
+.el-input {
   width: 300px;
   margin-top: 20px;
 }

src/views/system/roleMag/components/menuTree.vue

@@ -0,0 +1,81 @@
+<template>
+  <div>
+    <el-tree
+      :data="menuList"
+      show-checkbox
+      default-expand-all
+      node-key="permissionId"
+      ref="tree"
+      highlight-current
+      :props="defaultProps"
+    >
+      <!-- :check-strictly="true"? -->
+    </el-tree>
+  </div>
+</template>
+
+<script>
+import { getAllMenu } from "@/api/system.js";
+import { checkListFn, getcheckListFn } from "@/utils/getMenu.js";
+
+export default {
+  props: {
+    treeObj: {
+      type: Object,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      menuList: [],
+      defaultProps: {
+        children: "children",
+        label: "permissionName",
+      },
+    };
+  },
+  watch: {
+    treeObj: {
+      handler(newVal) {
+        this.updateTreeCheckState(newVal.checkList);
+      },
+      deep: true,
+      immediate: true,
+    },
+  },
+  created() {
+    this.getMenuList();
+  },
+  mounted() {
+    this.updateTreeCheckState(this.treeObj.checkList);
+  },
+  methods: {
+    getCheckedNodes() {
+      console.log(this.$refs.tree.getCheckedNodes());
+    },
+    getMenuList() {
+      getAllMenu().then((res) => {
+        this.menuList = res.data;
+      });
+    },
+    getCheckTreeKey() {
+      const result = getcheckListFn(
+        this.$refs.tree.getCheckedKeys(),
+        this.menuList
+      );
+      console.log(result, "reslut");
+      return {
+        permissionIds: [...new Set(result)].join(","),
+        roleId: this.treeObj.roleId,
+      };
+    },
+    updateTreeCheckState(checkList) {
+      if (this.$refs.tree) {
+        this.$refs.tree.setCheckedKeys(checkListFn(checkList));
+      }
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss"></style>

src/views/system/roleMag/index.vue

@@ -1,13 +1,589 @@
-<!--
- * @Author: your name
- * @Date: 2024-05-17 15:58:57
- * @LastEditTime: 2024-05-17 15:59:09
- * @LastEditors: bogon
- * @Description: In User Settings Edit
- * @FilePath: /dasheng/performance-test/src/views/system/roleMag/index.vue
--->
 <template>
-  <div>角色管理</div>
+  <div class="global-variable">
+    <div class="condition">
+      <el-form
+        :inline="true"
+        ref="ruleForm"
+        :model="formInline"
+        class="demo-form-inline"
+        :rules="rules"
+      >
+        <el-form-item label="角色名称" prop="roleName">
+          <el-input
+            v-model="formInline.roleName"
+            placeholder="请输入角色名称"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="状态:" prop="roleAvailable">
+          <el-select
+            v-model="formInline.roleAvailable"
+            placeholder="请选择状态"
+          >
+            <el-option label="启用" value="1"></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('ruleForm')" size="small">重置</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+    <div class="list-page">
+      <div class="newly">
+        <el-button type="primary" @click="newnuedialog" size="small"
+          >新增</el-button
+        >
+      </div>
+      <el-table
+        v-loading="loading"
+        class="center-align-table"
+        :data="tableData"
+        border
+        :cell-style="rowStyle"
+      >
+        <el-table-column
+          align="center"
+          fixed
+          prop="id"
+          label="角色ID"
+          width="100"
+        >
+        </el-table-column>
+
+        <el-table-column align="center" label="角色名称" prop="roleDescription">
+        </el-table-column>
+
+        <el-table-column prop="roleType" align="center" label="角色类型">
+          <template slot-scope="scope">
+            <span v-for="item in stateOPtions" :key="item.contentsValue">
+              {{
+                scope.row.roleType == item.contentsValue
+                  ? item.contentsName
+                  : ""
+              }}</span
+            >
+          </template>
+        </el-table-column>
+        <el-table-column align="center" prop="source" label="角色来源">
+          <template slot-scope="scope">
+            <span>
+              {{
+                scope.row.source == 0
+                  ? "系统"
+                  : scope.row.source == 1
+                  ? "自定义"
+                  : "/"
+              }}</span
+            >
+          </template>
+        </el-table-column>
+
+        <el-table-column prop="roleCode" align="center" label="角色标识">
+        </el-table-column>
+        <el-table-column
+          prop="roleAvailable"
+          align="center"
+          label="状态"
+          width="100"
+        >
+          <template slot-scope="scope">
+            <span>
+              {{
+                scope.row.roleAvailable == 0
+                  ? "停用"
+                  : scope.row.roleAvailable == 1
+                  ? "启用"
+                  : "/"
+              }}</span
+            >
+          </template>
+        </el-table-column>
+        <el-table-column prop="createTime" align="center" label="创建时间">
+        </el-table-column>
+        <el-table-column
+          prop="transition"
+          align="center"
+          fixed="right"
+          label="操作"
+          width="200"
+        >
+          <template slot-scope="scope">
+            <el-button @click="compile(scope.row)" type="text" size="small"
+              >编辑</el-button
+            >
+            <el-button
+              style="color: #f90"
+              @click="editAuth(scope.row)"
+              type="text"
+              size="small"
+              >权限设置</el-button
+            >
+            <el-button
+              v-if="scope.row.roleAvailable == 0"
+              @click="setState(1, scope.row.id)"
+              type="text"
+              size="small"
+              >启用</el-button
+            >
+            <el-button
+              v-else
+              style="color: #666"
+              @click="setState(0, scope.row.id)"
+              type="text"
+              size="small"
+              >停用</el-button
+            >
+
+            <el-button
+              style="color: #f00"
+              @click="deleted(scope.row)"
+              type="text"
+              size="small"
+              >删除</el-button
+            >
+          </template>
+        </el-table-column>
+      </el-table>
+      <div class="pagination-container">
+        <el-pagination
+          @current-change="handleCurrentChange"
+          :current-page.sync="formInline.pageNum"
+          layout="total, prev, pager, next"
+          :page-size="formInline.pageSize"
+          :total="formInline.totalSize"
+        >
+        </el-pagination>
+      </div>
+    </div>
+
+    <!-- 弹出层 -->
+    <!-- 新增 /编辑-->
+    <el-dialog :title="title" :visible.sync="nuedialog" width="500px">
+      <div v-loading="loadingView" class="views">
+        <el-form
+          :model="ruleForm"
+          :rules="addUserRules"
+          ref="addUserForm"
+          label-width="100px"
+          class="demo-ruleForm"
+        >
+          <el-form-item label="角色名称" prop="roleName">
+            <el-input
+              v-model="ruleForm.roleName"
+              placeholder="请输入角色名称"
+            ></el-input>
+          </el-form-item>
+          <el-form-item label="角色标识" prop="roleCode">
+            <el-input
+              v-model="ruleForm.roleCode"
+              placeholder="请输入角色标识"
+            ></el-input>
+          </el-form-item>
+
+          <el-form-item label="角色类型:" prop="roleType">
+            <el-select
+              v-model="ruleForm.roleType"
+              placeholder="请选择角色类型"
+              style="width: 100%"
+            >
+              <el-option
+                :label="item.contentsName"
+                v-for="item in stateOPtions"
+                :value="item.contentsValue"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+        </el-form>
+        <span slot="footer" class="dialog-footer">
+          <el-button @click="cancel('addUserForm')" size="small"
+            >取 消</el-button
+          >
+          <el-button
+            type="primary"
+            @click="submitForm('addUserForm')"
+            size="small"
+            >确 定</el-button
+          >
+        </span>
+      </div>
+    </el-dialog>
+    <!-- 权限设置 -->
+    <el-dialog title="权限设置" :visible.sync="unusualdialog" width="500px">
+      <div v-loading="loadingView" class="views">
+        <el-form :model="editRoleAuth" ref="editRoleAuth" label-width="100px">
+          <el-form-item
+            label="角色名称"
+            prop="roleName"
+            :rules="[{ required: true, message: '角色名称不能为空' }]"
+          >
+            <el-input
+              disabled
+              v-model.number="editRoleAuth.roleName"
+              autocomplete="off"
+            ></el-input>
+          </el-form-item>
+          <el-form-item
+            label="角色标识"
+            prop="roleCode"
+            :rules="[{ required: true, message: '角色标识不能为空' }]"
+          >
+            <el-input
+              disabled
+              v-model.number="editRoleAuth.roleCode"
+              autocomplete="off"
+            ></el-input>
+          </el-form-item>
+        </el-form>
+        <el-tabs type="border-card" class="tabs">
+          <el-tab-pane label="功能权限"
+            ><MenuTree ref="menuTreeRef" :treeObj="treeObj"></MenuTree
+          ></el-tab-pane>
+          <el-tab-pane label="数据权限">数据权限</el-tab-pane>
+        </el-tabs>
+        <span slot="footer" class="dialog-footer">
+          <el-button
+            @click="
+              () => {
+                this.$refs['editRoleAuth'].resetFields();
+                this.unusualdialog = false;
+                this.loadingView = false;
+              }
+            "
+            size="small"
+            >取 消</el-button
+          >
+          <el-button
+            type="primary"
+            @click="editAuthMenu('editRoleAuth')"
+            size="small"
+            >确 定</el-button
+          >
+        </span>
+      </div>
+    </el-dialog>
+  </div>
 </template>
-<script></script>
-<style lang="scss"></style>
+
+<script>
+import MenuTree from "./components/menuTree.vue";
+import {
+  getRoleTableList,
+  updateRoleAvailable,
+  getRoleBId,
+  addRole,
+  editRole,
+  deleteRoleInfo,
+  updateRolePermission,
+  getDetailRoleAuth,
+} from "@/api/system.js";
+import { dictType } from "@/api/dict.js";
+export default {
+  components: {
+    MenuTree,
+  },
+  data() {
+    return {
+      treeObj: {
+        roleId: null,
+        checkList: [],
+      },
+      loadingView: false,
+      //角色类型
+      stateOPtions: [],
+      loading: false, //数据加载中
+      rules: {
+        roleAvailable: { trigger: "change" },
+        roleName: { trigger: "blur" },
+      },
+      roleList: [],
+      formInline: {
+        roleName: undefined,
+        roleAvailable: undefined,
+        pageNum: 1,
+        pageSize: 10,
+        totalSize: 0,
+      },
+      tableData: [],
+      // 新增编辑表单
+      ruleForm: {
+        roleType: null,
+        roleCode: null,
+        roleName: null,
+      },
+      addUserRules: {
+        roleName: [
+          { required: true, message: "请输入角色名称", trigger: "blur" },
+        ],
+        roleCode: {
+          required: true,
+          message: "请输入角色标识",
+          trigger: "blur",
+        },
+        roleType: {
+          required: true,
+          message: "请选择角色类型",
+          trigger: "change",
+        },
+      },
+      //修改权限
+      editRoleAuth: {
+        roleName: "",
+        roleCode: "",
+      },
+      nuedialog: false,
+      unusualdialog: false,
+      title: "",
+    };
+  },
+  created() {
+    //字典查询角色类型
+    dictType({ dictType: 2 }).then((res) => {
+      this.stateOPtions = res.data;
+    });
+    this.getTableList();
+  },
+  methods: {
+    //修改权限
+    editAuthMenu(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          const { permissionIds, roleId } =
+            this.$refs.menuTreeRef.getCheckTreeKey();
+          if (!permissionIds) {
+            this.$message({
+              message: "至少要选择一个菜单",
+              type: "warning",
+            });
+          } else {
+            this.loadingView = true;
+            updateRolePermission({ permissionIds, roleId })
+              .then((res) => {
+                this.$message({
+                  message: "权限修改成功",
+                  type: "success",
+                });
+                this.getTableList();
+                this.loadingView = false;
+                this.unusualdialog = false;
+              })
+              .catch(() => {});
+          }
+        } else {
+          return false;
+        }
+      });
+    },
+    //分页数据切换
+    handleCurrentChange(val) {
+      this.formInline.pageNum = val;
+      this.getTableList();
+    },
+    //修改状态
+    setState(state, roleId) {
+      //启用接口
+      updateRoleAvailable({ roleAvailable: state, roleId })
+        .then((res) => {
+          this.$message({
+            message: res.msg,
+            type: "success",
+          });
+          this.getTableList();
+        })
+        .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;
+    },
+
+    rowStyle() {
+      return "text-align:center";
+    },
+    // 查询
+    onSubmit() {
+      this.getTableList();
+    },
+    // 重置
+    reset(formName) {
+      this.$refs[formName].resetFields();
+      this.getTableList();
+    },
+
+    // 新增,编辑确定
+    submitForm(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          this.loadingView = true;
+          switch (this.title) {
+            case "新增":
+              addRole({ ...this.ruleForm, roleId: undefined })
+                .then((res) => {
+                  this.$message({
+                    type: "success",
+                    message: res.msg,
+                  });
+                  this.getTableList();
+                  this.nuedialog = false;
+                  this.loadingView = false;
+                })
+                .catch(() => {});
+              break;
+            case "编辑":
+              editRole({ ...this.ruleForm })
+                .then((res) => {
+                  this.$message({
+                    type: "success",
+                    message: res.msg,
+                  });
+                  this.getTableList();
+                  this.nuedialog = false;
+                  this.loadingView = false;
+                })
+                .catch(() => {});
+
+              break;
+          }
+        } else {
+          return false;
+        }
+      });
+    },
+    //点击取消
+    cancel(formName) {
+      this.$refs[formName] && this.$refs[formName].resetFields();
+      this.ruleForm = {
+        roleType: null,
+        roleCode: null,
+        roleName: null,
+        roleId: null,
+      };
+      this.nuedialog = false;
+      this.loadingView = false;
+    },
+    // 编辑 回显数据
+    async compile(row) {
+      try {
+        const result = await getRoleBId({ roleId: row.id });
+        const userInfo = result.data;
+
+        // 直接替换整个对象，以确保 Vue 的响应式系统能够检测到变化
+        this.ruleForm = {
+          roleType: userInfo.roleType,
+          roleCode: userInfo.roleCode,
+          roleName: userInfo.roleDescription,
+          roleId: userInfo.id.toString(),
+        };
+        this.nuedialog = true;
+        this.title = "编辑";
+      } catch (error) {
+        this.$message.error("获取用户信息失败");
+      }
+    },
+    // 删除
+    deleted(row) {
+      this.$confirm("此操作将永久删除该角色, 是否继续?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(() => {
+          deleteRoleInfo({ roleId: row.id })
+            .then((res) => {
+              this.$message({
+                type: "success",
+                message: "删除成功!",
+              });
+              this.getTableList();
+            })
+            .catch(() => {});
+        })
+        .catch(() => {
+          this.$message({
+            type: "info",
+            message: "已取消删除",
+          });
+        });
+    },
+    //权限修改按钮
+    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;
+      });
+    },
+    // 新增
+    newnuedialog() {
+      this.cancel("addUserForm");
+      this.nuedialog = true;
+      this.title = "新增";
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.general {
+  display: flex;
+  flex-wrap: wrap;
+
+  .condition {
+    width: 50%;
+    display: flex;
+
+    p {
+      width: 100px;
+      text-align: right;
+      line-height: 40px;
+    }
+
+    span {
+      line-height: 40px;
+
+      padding-left: 20px;
+    }
+
+    .el-select {
+      width: 100%;
+      margin-bottom: 20px;
+    }
+
+    .el-input {
+      margin-bottom: 20px;
+    }
+  }
+}
+
+.attachment {
+  display: flex;
+  padding-top: 10px;
+
+  p {
+    margin-right: 20px;
+    color: #409eff;
+  }
+}
+
+.addition {
+  display: flex;
+  justify-content: flex-end;
+  margin-bottom: 10px;
+}
+.tabs {
+  margin-bottom: 50px;
+}
+</style>

src/views/system/userMag/index.vue

@@ -12,15 +12,10 @@
           <el-input
             v-model="formInline.userName"
             placeholder="请输入用户名称"
-            size="small"
           ></el-input>
         </el-form-item>
         <el-form-item label="角色名称:" prop="roleId">
-          <el-select
-            v-model="formInline.roleId"
-            placeholder="请选择角色"
-            size="small "
-          >
+          <el-select v-model="formInline.roleId" placeholder="请选择角色">
             <el-option
               :label="item.roleDescription"
               v-for="item in roleList"
@@ -61,7 +56,7 @@
         <el-table-column align="center" label="员工名称" prop="userName">
         </el-table-column>
 
-        <el-table-column prop="userName" align="center" label="登录账号">
+        <el-table-column prop="loginName" align="center" label="登录账号">
         </el-table-column>
         <el-table-column align="center" prop="userPhone" label="手机号">
         </el-table-column>
@@ -140,101 +135,119 @@
     <!-- 弹出层 -->
     <!-- 新增 /编辑-->
     <el-dialog :title="title" :visible.sync="nuedialog" width="500px">
-      <el-form
-        :model="ruleForm"
-        :rules="addUserRules"
-        ref="addUserForm"
-        label-width="100px"
-        class="demo-ruleForm"
-      >
-        <!-- <el-form-item label="员工名称" prop="userName">
-          <el-input v-model="ruleForm.userName"></el-input>
-        </el-form-item> -->
-        <el-form-item label="电话号码" prop="phone">
-          <el-input v-model="ruleForm.phone"></el-input>
-        </el-form-item>
-        <el-form-item label="账号名称" prop="userName">
-          <el-input v-model="ruleForm.userName" autocomplete="off"></el-input>
-        </el-form-item>
-        <el-form-item label="密码" prop="pwd" v-if="title === '新增'">
-          <el-input
-            v-model="ruleForm.pwd"
-            autocomplete="new-password"
-            show-password
-          ></el-input>
-        </el-form-item>
-        <el-form-item label="角色名称:" prop="roleId">
-          <el-select
-            v-model="ruleForm.roleId"
-            placeholder="请选择角色"
-            size="small "
-          >
-            <el-option
-              :label="item.roleDescription"
-              v-for="item in roleList"
-              :value="item.id + ''"
-            ></el-option>
-          </el-select>
-        </el-form-item>
-      </el-form>
-      <span slot="footer" class="dialog-footer">
-        <el-button @click="cancel('addUserForm')" size="small">取 消</el-button>
-        <el-button
-          type="primary"
-          @click="submitForm('addUserForm')"
-          size="small"
-          >确 定</el-button
+      <div v-loading="loadingView" class="views">
+        <el-form
+          :model="ruleForm"
+          :rules="addUserRules"
+          ref="addUserForm"
+          label-width="100px"
+          class="demo-ruleForm"
         >
-      </span>
+          <el-form-item label="员工名称" prop="userName">
+            <el-input
+              v-model="ruleForm.userName"
+              placeholder="请输入员工名称"
+            ></el-input>
+          </el-form-item>
+          <el-form-item label="电话号码" prop="phone">
+            <el-input
+              v-model="ruleForm.phone"
+              placeholder="请输入电话号码"
+            ></el-input>
+          </el-form-item>
+          <el-form-item label="账号名称" prop="loginName">
+            <el-input
+              v-model="ruleForm.loginName"
+              placeholder="请输入账号名称"
+              autocomplete="off"
+            ></el-input>
+          </el-form-item>
+          <el-form-item label="密码" prop="pwd" v-if="title === '新增'">
+            <el-input
+              v-model="ruleForm.pwd"
+              autocomplete="new-password"
+              show-password
+              placeholder="请输入密码"
+            ></el-input>
+          </el-form-item>
+          <el-form-item label="角色名称:" prop="roleId">
+            <el-select
+              v-model="ruleForm.roleId"
+              placeholder="请选择角色"
+              style="width: 100%"
+            >
+              <el-option
+                :label="item.roleDescription"
+                v-for="item in roleList"
+                :value="item.id + ''"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+        </el-form>
+        <span slot="footer" class="dialog-footer">
+          <el-button @click="cancel('addUserForm')" size="small"
+            >取 消</el-button
+          >
+          <el-button
+            type="primary"
+            @click="submitForm('addUserForm')"
+            size="small"
+            >确 定</el-button
+          >
+        </span>
+      </div>
     </el-dialog>
     <!-- 风场详情 -->
     <el-dialog title="修改密码" :visible.sync="unusualdialog" width="500px">
-      <el-form
-        :model="editUserPassword"
-        ref="editUserPassword"
-        label-width="100px"
-      >
-        <el-form-item
-          label="旧密码"
-          prop="oldPWD"
-          :rules="[{ required: true, message: '旧密码不能为空' }]"
+      <div v-loading="loadingView" class="views">
+        <el-form
+          :model="editUserPassword"
+          ref="editUserPassword"
+          label-width="100px"
         >
-          <el-input
-            v-model.number="editUserPassword.oldPWD"
-            autocomplete="off"
-            show-password
-          ></el-input>
-        </el-form-item>
-        <el-form-item
-          label="新密码"
-          prop="newPWD"
-          :rules="[{ required: true, message: '新密码不能为空' }]"
-        >
-          <el-input
-            v-model.number="editUserPassword.newPWD"
-            autocomplete="off"
-            show-password
-          ></el-input>
-        </el-form-item>
-      </el-form>
-      <span slot="footer" class="dialog-footer">
-        <el-button
-          @click="
-            () => {
-              this.$refs['editUserPassword'].resetFields();
-              this.unusualdialog = false;
-            }
-          "
-          size="small"
-          >取 消</el-button
-        >
-        <el-button
-          type="primary"
-          @click="editUserPwd('editUserPassword')"
-          size="small"
-          >确 定</el-button
-        >
-      </span>
+          <el-form-item
+            label="旧密码"
+            prop="oldPWD"
+            :rules="[{ required: true, message: '旧密码不能为空' }]"
+          >
+            <el-input
+              v-model.number="editUserPassword.oldPWD"
+              autocomplete="off"
+              show-password
+            ></el-input>
+          </el-form-item>
+          <el-form-item
+            label="新密码"
+            prop="newPWD"
+            :rules="[{ required: true, message: '新密码不能为空' }]"
+          >
+            <el-input
+              v-model.number="editUserPassword.newPWD"
+              autocomplete="off"
+              show-password
+            ></el-input>
+          </el-form-item>
+        </el-form>
+        <span slot="footer" class="dialog-footer">
+          <el-button
+            @click="
+              () => {
+                this.$refs['editUserPassword'].resetFields();
+                this.unusualdialog = false;
+                this.loadingView = false;
+              }
+            "
+            size="small"
+            >取 消</el-button
+          >
+          <el-button
+            type="primary"
+            @click="editUserPwd('editUserPassword')"
+            size="small"
+            >确 定</el-button
+          >
+        </span>
+      </div>
     </el-dialog>
   </div>
 </template>
@@ -264,6 +277,7 @@ export default {
       callback();
     };
     return {
+      loadingView: false,
       loading: false, //数据加载中
       rules: {
         roleId: { trigger: "change" },
@@ -285,12 +299,14 @@ export default {
         pwd: null,
         roleId: null,
         userName: null,
+        loginName: null,
       },
       addUserRules: {
         phone: [
           { required: true, message: "请输入手机号", trigger: "blur" },
           { validator: validatePhone, trigger: "blur" },
         ],
+        loginName: { required: true, message: "请输入", trigger: "blur" },
         pwd: { required: true, message: "请输入密码", trigger: "blur" },
         roleId: { required: true, message: "请选择角色", trigger: "change" },
         userName: { required: true, message: "请输入账号", trigger: "blur" },
@@ -316,6 +332,7 @@ export default {
     editUserPwd(formName) {
       this.$refs[formName].validate((valid) => {
         if (valid) {
+          this.loadingView = true;
           updatePWD({ ...this.editUserPassword })
             .then((res) => {
               this.$message({
@@ -323,17 +340,19 @@ export default {
                 type: "success",
               });
               this.getTableList();
+              this.unusualdialog = false;
+              this.loadingView = false;
             })
-            .catch(() => {});
+            .catch(() => {
+              this.loadingView = false;
+            });
         } else {
-          console.log("error submit!!");
           return false;
         }
       });
     },
     //分页数据切换
     handleCurrentChange(val) {
-      console.log(`当前页: ${val}`);
       this.formInline.pageNum = val;
       this.getTableList();
     },
@@ -362,9 +381,7 @@ export default {
               });
               this.getTableList();
             })
-            .catch((error) => {
-              console.log(error, "errrr");
-            });
+            .catch((error) => {});
           break;
         default:
           return;
@@ -376,7 +393,6 @@ export default {
         ...this.formInline,
         totalSize: undefined,
       });
-      console.log(result, "获取用户列表的结果");
       this.tableData = result.data.list;
       this.formInline.totalSize = result.data.totalSize;
       this.loading = false;
@@ -384,7 +400,6 @@ export default {
     async getRoleList() {
       const result = await getRoleTableList({ pageNum: 1, pageSize: 100000 });
       this.roleList = result.data.list;
-      console.log(this.roleList, " this.roleList ");
     },
     rowStyle() {
       return "text-align:center";
@@ -403,46 +418,49 @@ export default {
     submitForm(formName) {
       this.$refs[formName].validate((valid) => {
         if (valid) {
+          this.loadingView = true;
           switch (this.title) {
             case "新增":
               addUser({ ...this.ruleForm, userId: undefined })
                 .then((res) => {
-                  console.log(res, "新增成功");
                   this.$message({
                     type: "success",
                     message: res.msg,
                   });
                   this.getTableList();
                   this.nuedialog = false;
+                  this.loadingView = false;
                 })
-                .catch(() => {});
+                .catch(() => {
+                  this.loadingView = false;
+                });
 
               break;
             case "编辑":
               editUser({ ...this.ruleForm })
                 .then((res) => {
-                  console.log(res, "编辑成功");
                   this.$message({
                     type: "success",
                     message: res.msg,
                   });
                   this.getTableList();
                   this.nuedialog = false;
+                  this.loadingView = false;
                 })
-                .catch(() => {});
+                .catch(() => {
+                  this.loadingView = false;
+                });
 
               break;
           }
           // this.nuedialog = false;
         } else {
-          // console.log("error submit!!");
           return false;
         }
       });
     },
     //点击取消
     cancel(formName) {
-      console.log("取消");
       this.$refs[formName] && this.$refs[formName].resetFields();
       this.ruleForm = {
         phone: null,
@@ -450,10 +468,10 @@ export default {
         roleId: null,
         userName: null,
         userId: null,
+        loginName: null,
       };
-
-      console.log(this.ruleForm, "biaji ");
       this.nuedialog = false;
+      this.loadingView = false;
     },
     //异常详情
     particulars(row) {
@@ -468,15 +486,15 @@ export default {
         // 直接替换整个对象，以确保 Vue 的响应式系统能够检测到变化
         this.ruleForm = {
           phone: userInfo.userPhone,
-          pwd: "", // 如果需要重置密码字段
+          pwd: undefined, // 如果需要重置密码字段
           roleId: userInfo.roleId.toString(),
           userName: userInfo.userName,
           userId: userInfo.userId, // 如果需要用户ID
+          loginName: userInfo.loginName,
         };
         this.nuedialog = true;
         this.title = "编辑";
       } catch (error) {
-        console.error("Error fetching user info:", error);
         this.$message.error("获取用户信息失败");
       }
     },
@@ -512,8 +530,11 @@ export default {
     // 新增
     newnuedialog() {
       this.cancel("addUserForm");
-      this.ruleForm.pwd = "";
-      this.ruleForm.userName = "";
+      this.ruleForm = {
+        loginName: "",
+        pwd: "",
+        userName: "",
+      };
       this.nuedialog = true;
       this.title = "新增";
     },