添加了访问控制功能

chat-client/src/App.vue

@@ -3,15 +3,15 @@
 </template>
 
 <script>
-import { webSocketService } from '@/utils/websocket'
+  import { webSocketService } from '@/utils/websocket'
-import { useAclStore } from '@/store/modules/acl'
+  import { useAclStore } from '@/store/modules/acl'
-import { baseURL } from '@/config'
+  import { baseURL } from '@/config'
-import { v4 as uuidv4 } from 'uuid' // 引入uuid库生成UUID
+  import { v4 as uuidv4 } from 'uuid' // 引入uuid库生成UUID
-export default {
+  export default {
-  name: 'App',
+    name: 'App',
-  created() {
+    created() {
-    //获取当前登录用户
+      //获取当前登录用户
-    const aclStore = useAclStore()
+      const aclStore = useAclStore()
     //const userId = aclStore.getUserAccount
     const urlList = baseURL.split(':')
     // 生成5位UUID随机数并拼接
@@ -23,7 +23,7 @@ export default {
     try {
       console.log("urlList",urlList)
 
-       webSocketService.connect(`ws:` + urlList[1] + `:16750/api/webSocketServer/` + auth)
+       webSocketService.connect(`ws:${  urlList[1]  }:16750/api/webSocketServer/${  auth}`)
        console.log("auth-app",auth)
     } catch (error) {
       console.error('Failed to parse user message:', error)

chat-client/src/api/menuManagement.ts

@@ -24,16 +24,16 @@ export const getMenuLeaves = function() {
 
 //单个菜单
 export const getMenuRoles = function(param) {
-     let menuId = param;
+     const menuId = param;
         return request({
-          url: '/infra-service/menus/'+menuId+'/roles',
+          url: `/infra-service/menus/${menuId}/roles`,
           method:'get'});
 };
 
 //添加菜单
 export const addMenu = function(param) {
-    let hostUrl = "";
+    const hostUrl = "";
-    let parentId = param.parent.id;
+    const parentId = param.parent.id;
     //判断是根菜单 还是子菜单
     if(parentId === undefined){
          return request({
@@ -42,7 +42,7 @@ export const addMenu = function(param) {
           params:Object.assign({},param),});
     }else{
         return request({
-          url:'/infra-service/menus/'+parentId+'/children',
+          url:`/infra-service/menus/${parentId}/children`,
           method:'post',
           params:Object.assign({},param),});
     }
@@ -50,7 +50,7 @@ export const addMenu = function(param) {
 
 //添加菜单附加信息
 export const addMenuApendix = function(param) {
-    let parentId = param.menu.parent?.id;
+    const parentId = param.menu.parent?.id;
     //判断是根菜单 还是子菜单
     if(parentId === undefined){
          return request({
@@ -59,7 +59,7 @@ export const addMenuApendix = function(param) {
           data: param});
     }else{
         return request({
-          url:'/infra-service/menus/'+parentId+'/children',
+          url:`/infra-service/menus/${parentId}/children`,
           method:'post',
           data: param});
     }
@@ -67,51 +67,52 @@ export const addMenuApendix = function(param) {
 
 //修改菜单
 export const editMenu = function(param) {
-    let menuId = param.id;
+    const menuId = param.id;
         return request({
-          url: '/infra-service/menus/' + menuId,
+          url: `/infra-service/menus/${  menuId}`,
           params:Object.assign({},param),
           method:'put'});
 };
 
 //修改菜单附加信息
 export const editMenuApendix = function(param) {
-    let menuId = param.menu.id;
+    const menuId = param.menu.id;
         return request({
-          url: '/infra-service/menus/' + menuId,
+          url: `/infra-service/menus/${  menuId}`,
           data: param,
           method:'put'});
 };
 
 //删除菜单
 export const removeMenu = function(param) {
-    let menuId = param.menuId;
+    const menuId = param.menuId;
         return request({
-          url: '/infra-service/menus/' + menuId,
+          url: `/infra-service/menus/${  menuId}`,
           method:'delete'});
 };
 
 //保存菜单角色
 export const addMenuRoles = function(param) {
-    let menuId = param.id;
+    const menuId = param.id;
-    let roleIds = param.roleIds;
+    const roleIds = param.roleIds;
-    let hostUrl = "";
+    const hostUrl = "";
-    if (roleIds && roleIds.length > 0) {
+    if (roleIds != null && (Array.isArray(roleIds) ? roleIds.length > 0 : roleIds !== '')){
+            console.log("parm",param)
             return request({
-             url: "/infra-service/menus/" + menuId + "/roles/" + roleIds.toString(),
+             url: `/infra-service/menus/${  menuId  }/roles/${  roleIds.toString()}`,
              method:'put'});
     } else {
             return request({
-               url: "/infra-service/menus/" + menuId + "/roles",
+               url: `/infra-service/menus/${  menuId  }/roles`,
                method:'delete'});
     }
 };
 
 //该菜单未有的角色列表
 export const getRoleList = function(param) {
-    let menuId = param;
+    const menuId = param;
         return request({
-        url: '/infra-service/menus/'+menuId+'/barring-roles',
+        url: `/infra-service/menus/${menuId}/barring-roles`,
         method:'get',
         });
 };
@@ -119,7 +120,7 @@ export const getRoleList = function(param) {
 //根据菜单ID查询菜单详细信息
 export const queryById = function(menuId) {
     return request({
-        url: '/infra-service/menus/' + menuId,
+        url: `/infra-service/menus/${  menuId}`,
         method: 'get'
     });
 };
@@ -136,12 +137,11 @@ export const getIconImageResourceList = function() {
 //  删除菜单图片资源
 export const deleteIconImageFile = function(filename) {
       return request({
-        url: '/infra-service/menus/icon-image-resources/' + filename,
+        url: `/infra-service/menus/icon-image-resources/${filename}`,
         method:'delete',});
 };
-
 // } added by justincao84 @ 2024.06.05
-
+//修改菜单角色
 export const selectableMenuIcons = [
     'el-icon-lx-attentionforbid',
     'el-icon-lx-attentionforbidfill',

chat-client/src/views/permission/menuManage/components/access.vue

@@ -2,7 +2,9 @@
   <el-dialog v-model="dialogFormVisible" title="权限控制" width="80%" @close="close">
     <el-form ref="formRef" :model="form" :rules="rules" label-width="150px">
       <el-form-item label="角色" prop="role">
-        <el-select v-model="form.role" placeholder="请选择角色"></el-select>
+        <el-select v-model="form.roleIds" placeholder="请选择角色">
+          <el-option v-for="item in options.role" :key="item.id" :label="item.name" :value="item.id" />
+        </el-select>
       </el-form-item>
     </el-form>
     <template #footer>
@@ -12,14 +14,34 @@
   </el-dialog>
 </template>
 <script setup>
+  import {getRoleMenuList,getRoleList,addMenuRoles,getMenuRoles} from "@/api/menuManagement";
   const dialogFormVisible = ref(false)
-  const form = reactive({})
+  const form = reactive({
+    roleIds:"",
+    id:""
+  })
   const rules = reactive({})
   const formRef = ref(null)
+  const options = reactive({})
+  const getRoleListApi = async (data) => {
+    const res = await getMenuRoles(data.id)
+    options.role = res
+  }
+  const showAccess = async (Item) => {
+    await getRoleListApi(Item)
+    form.id = Item.id
+    dialogFormVisible.value = true
+  }
   const addSubmit = () => {
     formRef.value.validate((valid) => {
       if (valid) {
-        console.log('submit', form)
+        addMenuRoles(form)
+        .then(() => {
+          ElMessage({
+            message: '修改成功',
+            type: 'success'
+            })
+        })
         dialogFormVisible.value = false
       } else {
         console.log('error submit')
@@ -32,4 +54,7 @@
     dialogFormVisible.value = false
     emit('refresh')
   }
+  defineExpose({
+    showAccess
+  })
 </script>

chat-client/src/views/permission/menuManage/index.vue

@@ -203,6 +203,7 @@
   const accessRef = ref(null)
   const handleAccessControlView = (data) => {
     //TODO: 跳转到访问控制页面
+    accessRef.value.showAccess(data)
   }
   onMounted(() => {
     getMenuTree()