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

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"/>-->