fix: 添加角色增加菜单id”

frontend/src/stores/user.js

@@ -3,7 +3,7 @@ import { defineStore } from 'pinia'
 import { message } from 'ant-design-vue'
 
 import router from '@/router'
-import { loadRouter, loadDefaultMenu } from '@/utils/loadCpn'
+import { loadRouter, getPermissions } from '@/utils/loadCpn'
 import { getMenus, getUserInfo, login, selectRole } from '@/service/user'
 
 export const userStore = defineStore(
@@ -12,6 +12,7 @@ export const userStore = defineStore(
     const token = ref('')
     const userInfo = ref({})
     const userMenus = ref([])
+    const permissions = ref([])
 
     const selectKey = ref(null)
 
@@ -26,6 +27,7 @@ export const userStore = defineStore(
       token.value = ''
       userInfo.value = {}
       userMenus.value = []
+      permissions.value = []
     }
 
     /**
@@ -41,16 +43,19 @@ export const userStore = defineStore(
       const menus = await getMenus(info.data.roles[0].id)
       userMenus.value = menus.data
 
-      // 3.1 加载权限
+      // 3.1 加载路由权限
       loadRouter(menus.data)
 
-      // 3.2 默认跳转路由
-      const defaultMenu = loadDefaultMenu(menus.data)
+      // 3.2 加载按钮权限
+      const [btnPermissions, firstMenu] = getPermissions(menus.data)
+      permissions.value = btnPermissions
 
-      selectKey.value = [defaultMenu.id]
-      // 4. 跳转
-      if (defaultMenu.path) {
-        router.push(defaultMenu.path)
+      // 3.2 默认打开菜单
+      selectKey.value = [firstMenu.id]
+
+      // 4. 跳转路由
+      if (firstMenu?.path) {
+        router.push(firstMenu.path)
       } else {
         router.push('/main')
       }
@@ -82,6 +87,7 @@ export const userStore = defineStore(
       accessToken,
       userInfo,
       userMenus,
+      permissions,
       isLoading,
       selectKey,
       $reset,

frontend/src/utils/directive.js

@@ -6,7 +6,7 @@ export default (app) => {
     mounted(el, binding) {
       if (
         // 是否存在
-        userStore().userInfo.permissions.indexOf(binding.value) === -1
+        userStore().permissions.indexOf(binding.value) === -1
       ) {
         // 删除元素
         el.parentNode && el.parentNode.removeChild(el)

frontend/src/utils/loadCpn.js

@@ -35,11 +35,26 @@ function loadRouter(menus) {
   }
 }
 
-// 默认打开第一个
-function loadDefaultMenu(menus) {
-  for (const menu of menus) {
-    return menu.children.find((e) => e.type === 1)
+// 获取按钮权限列表，和第一个选中菜单
+function getPermissions(menuArr) {
+  let arr = []
+  let firstMenu = null
+
+  function _forMenu(menus) {
+    for (const menu of menus) {
+      if (menu.type === 1 && firstMenu === null) {
+        firstMenu = menu
+      }
+      if (menu.type !== 2 && menu.children) {
+        _forMenu(menu.children)
+      } else {
+        arr.push(menu.identifier)
+      }
+    }
   }
+
+  _forMenu(menuArr)
+  return [arr.filter((e) => e !== null), firstMenu]
 }
 
-export { loadIconCpn, loadRouter, loadDefaultMenu }
+export { loadIconCpn, loadRouter, getPermissions }

frontend/src/views/main/system/menu/menu.vue

@@ -1,13 +1,16 @@
 <script setup>
+import { ref } from 'vue'
 import { PlusOutlined } from '@ant-design/icons-vue'
 
 import { columns } from './conf'
 import { formatTime } from '@/utils/format'
-import { userStore } from '@/stores/user'
 import { loadIconCpn } from '@/utils/loadCpn'
+import { getMenus } from '@/service/menu'
 
 // 列表数据
-const dataSource = userStore().userMenus
+const dataSource = ref([])
+
+getMenus().then((res) => (dataSource.value = res.data))
 
 // 菜单类型隐射
 

frontend/src/views/main/system/role/conf.js

@@ -44,6 +44,7 @@ export const addRoleRules = [
     remark: [
       { required: true, message: '请输入描述', trigger: 'blur' },
       { min: 1, max: 20, message: '1~20', trigger: 'blur' }
-    ]
+    ],
+    menus: [{ required: true, message: '请选择菜单', trigger: 'blur' }]
   }
 ]

frontend/src/views/main/system/role/role.vue

@@ -4,6 +4,7 @@ import { ref, reactive, onMounted } from 'vue'
 import { PlusOutlined } from '@ant-design/icons-vue'
 
 import { getRoles, queryRole, delRole, putRole, addRole } from '@/service/role'
+import { getMenus } from '@/service/menu'
 import { columns, addRoleRules } from './conf'
 import { formatTime } from '@/utils/format'
 import { message } from 'ant-design-vue'
@@ -81,17 +82,22 @@ const addVisible = ref(false)
 const formRef = ref(null)
 const newRoleForm = reactive({
   name: '',
-  remark: ''
+  remark: '',
+  menus: []
 })
 
 const addClick = () => {
   addVisible.value = !addVisible.value
+  // 弹出modal 并获取菜单树
+  getMenus().then((res) => (treeData.value = res.data))
 }
 
 // 新增modal 确定的回调
 const onOk = () => {
   formRef.value.validateFields().then(() => {
     // 表单验证通过
+    console.log(newRoleForm.menus)
+    newRoleForm.menus = newRoleForm.menus.map((e) => e.id)
     addRole(newRoleForm).then((res) => {
       if (res.msg === '请求成功') {
         message.success('新增成功')
@@ -116,10 +122,14 @@ const onCancel = () => {
 
 const putClick = (record) => {
   // 打开编辑的modal
+  getMenus().then((res) => (treeData.value = res.data))
+
   putVisible.value = !putVisible.value
   putId.value = record.id
   putRoleForm.name = record.name
   putRoleForm.remark = record.remark
+
+  console.log(record)
 }
 
 const putVisible = ref(false)
@@ -127,7 +137,8 @@ const putVisible = ref(false)
 const putRoleFormRef = ref()
 const putRoleForm = reactive({
   name: '',
-  remark: ''
+  remark: '',
+  menus: []
 })
 const putId = ref()
 
@@ -153,6 +164,15 @@ const onOkPut = () => {
 const onCancelPut = () => {
   putRoleFormRef.value.resetFields()
 }
+
+// tree
+const treeData = ref()
+
+// 获取选中的菜单
+const check = (key, { checkedNodesPositions }) => {
+  // console.log(checkedNodesPositions)
+  newRoleForm.menus = checkedNodesPositions.map((e) => ({ key: e.pos, id: e.node.id }))
+}
 </script>
 
 <template>
@@ -172,7 +192,7 @@ const onCancelPut = () => {
 
     <!-- 列表 -->
     <div class="data">
-      <a-card title="用户列表"
+      <a-card title="角色列表"
         ><template #extra>
           <a-button type="primary" v-per="'role:create'" @click="addClick">
             <template #icon><plus-outlined /></template>
@@ -229,6 +249,11 @@ const onCancelPut = () => {
         <a-form-item name="remark" label="描述">
           <a-input v-model:value="newRoleForm.remark" />
         </a-form-item>
+        <a-form-item name="menus" label="菜单">
+          <a-tree checkable :tree-data="treeData" @check="check">
+            <template #title="{ name }"> {{ name }} </template>
+          </a-tree>
+        </a-form-item>
       </a-form>
     </a-modal>
 
@@ -248,6 +273,11 @@ const onCancelPut = () => {
         <a-form-item name="remark" label="描述">
           <a-input v-model:value="putRoleForm.remark" />
         </a-form-item>
+        <a-form-item name="menus" label="菜单">
+          <a-tree checkable :tree-data="treeData" @check="check">
+            <template #title="{ name }"> {{ name }} </template>
+          </a-tree>
+        </a-form-item>
       </a-form>
     </a-modal>
   </div>

frontend/src/views/main/system/user/user.vue

@@ -106,9 +106,8 @@ const addClick = () => {
 const onOk = () => {
   formRef.value.validateFields().then(() => {
     // 表单验证通过
-    const { username, nickname, password, roles } = newUserForm
-    let rids = roles.map((e, i) => ({ rid: e, status: i === 0 ? 5 : 1 }))
-    addUser({ username, nickname, password, rids }).then((res) => {
+    newUserForm.roles = newUserForm.roles.map((e, i) => ({ rid: e, status: i === 0 ? 5 : 1 }))
+    addUser(newUserForm).then((res) => {
       if (res.msg === '请求成功') {
         message.success('新增成功')
         // 1. 关闭 modal