feat: 角色权限相关问题修复

src/api/menu.js

-import { delReq, getReq, postReq } from '@/utils';
+import { delReq, getReq, postReq, putReq } from '@/utils';
 
 export function delMenuApi(id) {
     return delReq(`/api/v1/menus/${id}`);
@@ -15,3 +15,11 @@ export function addMenuApi(data) {
 export function addRoleApi(data) {
     return postReq('/api/v1/roles', data);
 }
+
+export function getRoleApi(id) {
+    return getReq(`/api/v1/roles/${id}`);
+}
+
+export function updateRoleApi(data) {
+    return putReq('/api/v1/roles', data);
+}

src/components/menu_tree/index.vue

@@ -7,6 +7,7 @@
         :tree-data="treeData"
         style="max-height:400px"
         class="tw-overflow-y-auto"
+        :expandedKeys.sync="expandedKeys"
         v-bind="$attrs"
         v-on="$listeners"
     />
@@ -24,6 +25,7 @@ export default {
     props: {
         value: [Object, Array],
         showMenu: Boolean,
+        defaultCheckedKeys: Array,
     },
     data() {
         return {
@@ -32,11 +34,21 @@ export default {
                 title: 'menuName',
                 key: 'menuId',
             },
+            expandedKeys: [],
         };
     },
     async mounted() {
         this.rawData = await getMenuDataApi();
         this.treeData = convertListToTree(this.rawData, !this.showMenu);
+        this.$emit('check', this.defaultCheckedKeys);
+        this.expandedKeys = this.defaultCheckedKeys;
+    },
+
+    watch: {
+        defaultCheckedKeys(val) {
+            this.$emit('check', val);
+            this.expandedKeys = val;
+        },
     },
 
     methods: {

src/pages/system/view/role/form.vue

@@ -11,14 +11,20 @@
         </a-form-model-item>
 
         <a-form-model-item label="菜单权限">
-            <MenuTree v-model="checkedKeys" showMenu ref="menuTree" :disabled="isView" />
+            <MenuTree
+                v-model="checkedKeys"
+                :defaultCheckedKeys="defaultCheckedKeys"
+                showMenu
+                ref="menuTree"
+                :disabled="isView"
+            />
         </a-form-model-item>
     </a-form-model>
 </template>
 
 <script>
 import MenuTree from '@/components/menu_tree/index.vue';
-import { addRoleApi } from '@/api';
+import { addRoleApi, getRoleApi, updateRoleApi } from '@/api';
 
 export default {
     components: { MenuTree },
@@ -28,6 +34,7 @@ export default {
             form: {},
             rules: {},
             checkedKeys: [],
+            defaultCheckedKeys: [],
         };
     },
     computed: {
@@ -40,12 +47,19 @@ export default {
     },
     methods: {
         submit() {
-            return addRoleApi({ ...this.form, authorityList: this.$refs['menuTree'].get() });
+            const query = { ...this.form, authorityList: this.$refs['menuTree'].get() };
+            console.log(query);
+            return this.isEdit ? updateRoleApi(query) : addRoleApi(query);
         },
         setData(data, type) {
-            this.form = data;
+            this.getData(data.roleId);
             this.type = type;
         },
+        async getData(id) {
+            const res = await getRoleApi(id);
+            this.form = res;
+            this.defaultCheckedKeys = res.menuComponentKeys.map(i => parseInt(i.split('-')[0]));
+        },
     },
 };
 </script>

src/router/async/router.map.js

@@ -59,10 +59,6 @@ const routerMap = {
         name: '组织管理',
         component: () => import('@/pages/system/view/organization'),
     },
-    user_management: {
-        name: '用户管理',
-        component: () => import('@/pages/system/view/user'),
-    },
     role_management: {
         name: '角色管理',
         component: () => import('@/pages/system/view/role'),