feat(role): 角色分配菜单提交保存

src/assets/icons/svg/role.svg

@@ -0,0 +1 @@
+<svg t="1640017511829" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10964" width="256" height="256"><path d="M79.23846992 961.89615371v-25.44230742c0-109.28076943 28.83461573-214.89230742 81.13846113-297.41538515 48.42692315-76.39615372 115.30384629-131.57307685 195.50769258-161.89615372A240.78461573 240.78461573 0 0 1 279.48846992 300.5c0-131.53846114 104.33076943-238.53461572 232.54615372-238.53461572s232.51153887 106.99615372 232.51153798 238.53461572a240.85384629 240.85384629 0 0 1-76.74230742 176.98846114c190.86923057 73.00384629 276.99230742 277.13076943 276.99230742 458.96538514v25.44230743H79.23846992zM694.90770049 300.5c0-103.43076943-82.03846114-187.61538427-182.87307686-187.61538427-100.83461573 0-182.87307685 84.18461573-182.87307685 187.61538427 0 103.46538427 82.03846114 187.65 182.87307685 187.65 100.83461573 0 182.87307685-84.18461573 182.87307686-187.65z m-79.16538516 213.50769258a226.45384629 226.45384629 0 0 1-103.7076917 25.0961537 225.93461572 225.93461572 0 0 1-104.12307686-25.30384628c-195.02307685 51.12692315-271.10769258 239.05384629-278.41153886 397.17692315h765.03461573c-7.99615372-167.4-95.22692315-347.74615372-278.79230831-396.96923057z m-143.41153799 37.2461537h79.40769258l39.73846114-8.48076943-45.24230742 65.66538429 30.6 227.52692313-64.8 56.90769258-69.19615372-56.90769258 40.53461485-227.52692313-50.78076944-65.66538429 39.73846201 8.48076944z" p-id="10965"></path></svg>

src/views/system/menu/index.vue

@@ -15,7 +15,7 @@
           <template #header>
             <svg-icon color="#333" icon-class="perm"/>
             <span style="margin:0 5px;">权限列表</span>
-            <el-tag type="success" v-if="state.menuId">{{ state.menuName }}</el-tag>
+            <el-tag type="success" v-if="state.menuId" size="small">{{ state.menuName }}</el-tag>
             <el-tag type="warning" v-else size="small">请点击左侧菜单列表选择</el-tag>
           </template>
           <perm-table :menuId="state.menuId" :menuName="state.menuName"/>

src/views/system/role/components/Menu.vue

@@ -1,13 +1,13 @@
 <template>
   <div style="width: 100%;">
-    <el-form size="mini" >
+    <el-form size="mini">
       <el-form-item>
         <el-row>
           <el-col :span="12">
-            <el-button type="success" plain :icon="Switch" >展开/折叠</el-button>
+            <el-button type="success" plain :icon="Switch" @click="toggleExpandAll">展开/折叠</el-button>
           </el-col>
-          <el-col :span="12"  style="text-align: right">
-            <el-button type="primary" :icon="Check" @click="handleQuery">提交</el-button>
+          <el-col :span="12" style="text-align: right">
+            <el-button type="primary" :icon="Check" @click="handleSubmit">提交</el-button>
           </el-col>
         </el-row>
       </el-form-item>
@@ -16,8 +16,9 @@
 
     <el-tree
         ref="menuRef"
+        v-if="state.refreshTree"
         :default-expanded-keys="state.expandedKeys"
-        :default-expand-all="true"
+        :default-expand-all="state.isExpandAll"
         :data="state.menuOptions"
         show-checkbox
         node-key="id"
@@ -32,10 +33,10 @@
 <script setup lang="ts">
 import {listTreeSelectMenus} from "@/api/system/menu";
 import {listRoleMenuIds, updateRoleMenu} from "@/api/system/role"
-import {defineEmits, defineProps,onMounted, reactive, ref, watch} from "vue"
+import {defineEmits, defineProps, nextTick, onMounted, reactive, ref, watch} from "vue"
 import {ElTree, ElMessage, ElMessageBox} from "element-plus"
 
-import {Switch,Check} from '@element-plus/icons'
+import {Switch, Check} from '@element-plus/icons'
 
 const emit = defineEmits(['menuClick'])
 const props = defineProps({
@@ -53,7 +54,6 @@ watch(() => props.role.id as any, (newVal, oldVal) => {
     state.checkStrictly = true
     listRoleMenuIds(roleId).then(response => {
       const checkedMenuIds = response.data
-      console.log('选中的菜单',checkedMenuIds)
       menuRef.value.setCheckedKeys(checkedMenuIds)
       state.checkStrictly = false
     })
@@ -63,10 +63,11 @@ watch(() => props.role.id as any, (newVal, oldVal) => {
 const state = reactive({
   expandedKeys: [],  // 展开的节点
   menuOptions: [],
-  checkStrictly: false
+  checkStrictly: false,
+  isExpandAll: true,
+  refreshTree: true
 })
 
-
 /**
  * 加载菜单树
  */
@@ -80,11 +81,31 @@ function handleNodeClick(node: any) {
   emit('menuClick', node)
 }
 
+/**
+ * 展开/收缩
+ */
+function toggleExpandAll() {
+  state.refreshTree = false
+  state.isExpandAll = !state.isExpandAll
+  nextTick(() => {
+    state.refreshTree = true
+  })
+}
+
+/**
+ * 保存角色的菜单
+ */
+function handleSubmit() {
+  const checkedMenuIds = menuRef.value.getCheckedNodes(false, true).map((node: any) => node.id)
+  updateRoleMenu(props.role.id, checkedMenuIds).then(() => {
+    ElMessage.success('提交成功')
+  })
+}
+
 onMounted(() => {
   loadTreeSelectMenuOptions()
 })
 
-
 </script>
 
 <style lang="scss" scoped>

src/views/system/role/components/Role.vue

@@ -163,6 +163,7 @@ const state = reactive({
 })
 
 function handleQuery() {
+  emit('roleClick', {})
   state.loading = true
   listRolesWithPage(state.queryParams).then(response => {
     const {data, total} = response as any

src/views/system/role/index.vue

@@ -5,7 +5,7 @@
         <el-card class="box-card" shadow="always">
           <template #header>
 
-            <svg-icon color="#333" icon-class="menu"/>
+            <svg-icon color="#333" icon-class="role"/>
             角色列表
           </template>
           <role ref="role" @roleClick="handleRoleClick"/>
@@ -17,7 +17,7 @@
           <template #header>
             <svg-icon color="#333" icon-class="menu"/>
             <span style="margin:0 5px;">菜单分配</span>
-            <el-tag type="success" v-if="state.role.id" size="small">{{ state.role.name }}</el-tag>
+            <el-tag type="success" v-if="state.role.id" size="small"> <svg-icon color="green  " icon-class="role"/>  {{ state.role.name }}</el-tag>
             <el-tag type="warning" v-else size="small">请选择角色</el-tag>
           </template>
           <menus ref="menu" @menuClick="handleMenuClick" :role="state.role"/>
@@ -27,12 +27,13 @@
       <el-col :span="8" :xs="24">
         <el-card class="box-card" shadow="always">
           <template #header>
-            <svg-icon color="#333" icon-class="menu"/>
+            <svg-icon color="#333" icon-class="perm"/>
             <span style="margin:0 5px;">权限分配</span>
-            <el-tag type="success" v-if="state.role.id" size="small">{{ state.role.name }}</el-tag>
-            <el-tag type="warning" v-else size="small"> 请选择角色</el-tag>
 
-            <el-tag type="success" v-if="state.role.id" size="small">{{ state.role.name }}</el-tag>
+            <el-tag type="success" style="margin:0 5px 0 0;" v-if="state.role.id" size="small"> <svg-icon color="green" icon-class="role"/>  {{ state.role.name }}</el-tag>
+            <el-tag type="warning" style="margin:0 5px  0 0;" v-else size="small"> 请选择角色</el-tag>
+
+            <el-tag type="primary" v-if="state.role.id" size="small"><svg-icon color="red" icon-class="menu"/>  {{ state.role.name }}</el-tag>
             <el-tag type="warning" v-else size="small"> 请选择菜单</el-tag>
           </template>
           <!--<perm ref="perm" :menu="state.menu" :role="state.role"/>-->