用户角色管理。

src/api/user/index.ts

@@ -147,6 +147,28 @@ export function systemMenuList() {
     data: {},
   });
 }
+// 角色管理列表查询
+export function allRoleList() {
+  return request({
+    url: "/api/v1/synRoleInfo/list",
+    method: "post",
+    data: {},
+  });
+}
+// 用户已经选择的角色
+export function bindedUserRoleList(id: string) {
+  return request({
+    url: `/api/v1/synUserRole/get/${id}`,
+    method: "get",
+  });
+}
+export function bindRoleUserList(obj: Object) {
+  return request({
+    url: "/api/v1/synUserRole/add",
+    method: "post",
+    data: obj,
+  });
+}
 
 // 更新综合管理平台菜单管理
 export function updateSystemMenuList(list: any[]) {
@@ -166,6 +188,21 @@ export function systemUserMenuList(id: string) {
   });
 }
 
+// 综合管理平台用户菜单权限列表查询
+export function bindedRoleMenuList(roleId: string) {
+  return request({
+    url: `/api/v1/synRoleMenu/get/${roleId}`,
+    method: "get",
+  });
+}
+export function bindRoleMenuList(obj: Object) {
+  return request({
+    url: "/api/v1/synRoleMenu/add",
+    method: "post",
+    data: obj,
+  });
+}
+
 // 新增综合管理平台用户菜单权限
 export function addSystemUserMenu(obj: Object) {
   return request({

src/api/user/types.ts

@@ -13,6 +13,7 @@ export interface UserInfo {
   canSetPermission: boolean; //是否有设置权限的权限
   canSetIP: boolean; //是否有设置IP的权限
   canCreateMessage: boolean; //是否有创建消息的权限
+  setRoles: boolean; //是否有设置角色的权限
 }
 
 /**

src/router/index.ts

@@ -45,6 +45,12 @@ export const constantRoutes: RouteRecordRaw[] = [
         meta: { hidden: true, back: true, title: "用户权限管理" },
       },
       {
+        path: "/roles",
+        component: () => import("@/views/sets/roles.vue"),
+        name: "Roles",
+        meta: { hidden: true, back: true, title: "角色管理" },
+      },
+      {
         path: "/messagesList/:type",
         component: () => import("@/views/messages/index.vue"),
         name: "messagesList",

src/store/modules/user.ts

@@ -14,6 +14,7 @@ export const useUserStore = defineStore("user", () => {
     canSetPermission: false,
     canSetIP: false,
     canCreateMessage: false,
+    setRoles: false,
   });
 
   const isGetAuth = ref(false); //是否已经请求过auth接口活的role和menus了
@@ -55,6 +56,7 @@ export const useUserStore = defineStore("user", () => {
           user.value.sysData = [];
           user.value.canSetPermission = false;
           user.value.canSetIP = false;
+          user.value.setRoles = false;
 
           data.menus.map((menu: any) => {
             if (menu.isFrame === 1) {
@@ -66,6 +68,8 @@ export const useUserStore = defineStore("user", () => {
                 user.value.canSetIP = true;
               } else if (menu.id === 8) {
                 user.value.canCreateMessage = true;
+              } else if (menu.id === 9) {
+                user.value.setRoles = true;
               }
             }
           });

src/views/main/set.vue

@@ -21,6 +21,13 @@
           {{ item.menuName }}
         </h3>
         <h3
+          v-if="userStore.user.setRoles"
+          class="sys-item-title"
+          @click="gotoRolsePage"
+        >
+          角色管理
+        </h3>
+        <h3
           v-if="userStore.user.canSetIP"
           class="sys-item-title"
           @click="openDrawer"
@@ -45,7 +52,7 @@ import Addresss from "@/views/sets/address.vue";
 
 const userStore = useUserStore();
 
-const sysData = ref<any[]>([{ menuName: "设置权限", icon: "set" }]);
+const sysData = ref<any[]>([{ menuName: "用户管理", icon: "set" }]);
 
 const openSetPage = () => {};
 
@@ -61,6 +68,10 @@ const router = useRouter();
 const gotoUserPage = () => {
   router.push("/users");
 };
+
+const gotoRolsePage = () => {
+  router.push("/roles");
+};
 </script>
 
 <style lang="scss" scoped>

src/views/sets/roles.vue

@@ -0,0 +1,190 @@
+<template>
+  <div class="mainContentBox">
+    <avue-crud
+      ref="crudRef"
+      v-model="form"
+      v-model:page="page"
+      v-model:search="search"
+      :data="data"
+      :option="option"
+      @search-change="searchChange"
+      @search-reset="resetChange"
+      @size-change="dataList"
+      @current-change="dataList"
+      @row-save="createRow"
+      @row-update="updateRow"
+    >
+      <template #menu="{ row }">
+        <el-button text type="primary" @click="editPermission(row)"
+          >分配权限
+        </el-button>
+      </template>
+    </avue-crud>
+
+    <!-- 分配菜单弹窗  -->
+    <el-dialog v-model="menuDialogVisible" title="权限分配" width="700px">
+      <el-scrollbar v-loading="loading" max-height="600px">
+        <el-button type="primary" @click="toggleCheckAll">全选</el-button>
+        <el-button @click="resetChecked">清空</el-button>
+        <el-tree
+          ref="treeRef"
+          :data="menuList"
+          :default-expand-all="false"
+          :props="{
+            children: 'childs',
+            label: 'menuName',
+            value: 'id',
+            disabled: '',
+          }"
+          node-key="id"
+          show-checkbox
+          style="margin-top: 20px"
+        >
+          <template #default="{ data }">
+            {{ data.menuName }}
+          </template>
+        </el-tree>
+      </el-scrollbar>
+
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="handleRoleMenuSubmit"
+            >确 定
+          </el-button>
+          <el-button @click="menuDialogVisible = false">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+<script setup>
+import { ref } from "vue";
+import { useCrud } from "@/hooks/userCrud";
+import {
+  addSystemUserMenu,
+  bindedRoleMenuList,
+  bindRoleMenuList,
+  systemMenuList,
+  systemUserMenuList,
+  treeList,
+} from "@/api/user/index";
+
+// 传入一个url，后面不带/
+const { form, data, option, search, page, toDeleteIds, Methords, Utils } =
+  useCrud({
+    src: "/api/v1/synRoleInfo",
+  });
+const { dataList, createRow, updateRow, deleteRow, searchChange, resetChange } =
+  Methords; //增删改查
+const { selectionChange, multipleDelete } = Methords; //选中和批量删除事件
+const { checkBtnPerm, downloadTemplate, exportData } = Utils; //按钮权限等工具
+
+const crudRef = ref(null); //crudRef.value 获取avue-crud对象
+
+const deptList = ref([]); //部门列表
+const getDeptList = async () => {
+  let res = await treeList();
+  if (res && res.code == 200) {
+    deptList.value = res.data ?? []; //获取部门列表
+  }
+};
+
+// 设置表格列或者其他自定义的option
+option.value = Object.assign(option.value, {
+  editBtn: true, //是否显示编辑按钮
+  delBtn: false, //是否显示删除按钮
+  addBtn: true, //是否显示新增按钮
+  viewBtn: false, //是否显示查看按钮
+  menu: true, //是否显示操作列
+  column: [
+    {
+      label: "角色编码",
+      prop: "roleCode",
+      rules: [
+        {
+          required: true,
+          message: "请输入角色编码",
+          trigger: "blur",
+        },
+      ],
+      search: true,
+    },
+    {
+      label: "角色名称",
+      prop: "roleName",
+      rules: [
+        {
+          required: true,
+          message: "请输入角色名称",
+          trigger: "blur",
+        },
+      ],
+      search: true,
+    },
+
+    {
+      label: "状态",
+      prop: "state",
+      type: "radio", //类型为单选框
+      dicData: [
+        {
+          label: "启用",
+          value: 0,
+        },
+        {
+          label: "禁用",
+          value: 1,
+        },
+      ],
+      value: 0,
+    },
+  ],
+});
+
+// 编辑权限
+const currentUserId = ref("");
+const treeRef = ref(null);
+const menuDialogVisible = ref(false);
+const loading = ref(false);
+const menuList = ref([]);
+const editPermission = async (row) => {
+  currentUserId.value = row.id;
+  menuDialogVisible.value = true;
+  // 清空已选菜单
+  treeRef.value && treeRef.value.setCheckedKeys([]);
+  let allMenu = await systemMenuList();
+  menuList.value = allMenu.data ?? [];
+  let selectMenu = await bindedRoleMenuList(row.id);
+  if (selectMenu.data && selectMenu.data.length > 0) {
+    treeRef.value && treeRef.value.setCheckedKeys(selectMenu.data);
+  }
+};
+
+const handleRoleMenuSubmit = async () => {
+  loading.value = true;
+  bindRoleMenuList({
+    roleId: currentUserId.value,
+    menuIds: treeRef.value.getCheckedKeys(),
+  })
+    .then(() => {
+      ElMessage.success("权限分配成功");
+    })
+    .finally(() => {
+      loading.value = false;
+      menuDialogVisible.value = false;
+    });
+};
+
+const toggleCheckAll = () => {
+  const allKeys = menuList.value.map((item) => item.id);
+  treeRef.value.setCheckedKeys(allKeys);
+};
+const resetChecked = () => {
+  treeRef.value.setCheckedKeys([], false);
+};
+
+onMounted(() => {
+  getDeptList(); //获取部门列表
+  dataList();
+});
+</script>

src/views/sets/users.vue

@@ -15,7 +15,7 @@
     >
       <template #menu="{ row }">
         <el-button text type="primary" @click="editPermission(row)"
-          >编辑权限
+          >分配角色
         </el-button>
       </template>
     </avue-crud>
@@ -31,7 +31,7 @@
           :default-expand-all="false"
           :props="{
             children: 'childs',
-            label: 'menuName',
+            label: 'roleName',
             value: 'id',
             disabled: '',
           }"
@@ -40,7 +40,7 @@
           style="margin-top: 20px"
         >
           <template #default="{ data }">
-            {{ data.menuName }}
+            {{ data.roleName }}
           </template>
         </el-tree>
       </el-scrollbar>
@@ -61,6 +61,10 @@ import { ref } from "vue";
 import { useCrud } from "@/hooks/userCrud";
 import {
   addSystemUserMenu,
+  allRoleList,
+  bindedUserRoleList,
+  bindRoleMenuList,
+  bindRoleUserList,
   systemMenuList,
   systemUserMenuList,
   treeList,
@@ -204,9 +208,10 @@ const menuList = ref([]);
 const editPermission = async (row) => {
   currentUserId.value = row.id;
   menuDialogVisible.value = true;
-  let allMenu = await systemMenuList();
+  treeRef.value && treeRef.value.setCheckedKeys([]);
+  let allMenu = await allRoleList();
   menuList.value = allMenu.data ?? [];
-  let selectMenu = await systemUserMenuList(row.id);
+  let selectMenu = await bindedUserRoleList(row.id);
   if (selectMenu.data && selectMenu.data.length > 0) {
     treeRef.value && treeRef.value.setCheckedKeys(selectMenu.data);
   }
@@ -214,9 +219,10 @@ const editPermission = async (row) => {
 
 const handleRoleMenuSubmit = async () => {
   loading.value = true;
-  addSystemUserMenu({
+
+  bindRoleUserList({
     userId: currentUserId.value,
-    menuIds: treeRef.value.getCheckedKeys(),
+    roleIds: treeRef.value.getCheckedKeys(),
   })
     .then(() => {
       ElMessage.success("权限分配成功");