diff --git a/src/api/menu.js b/src/api/menu.js
index 2fbd36ca11a954d6eed626faf1aa5f40f270ded2..9b64f2d3318aea037ee1c8f0ac8fa4e8abef9056 100644
--- a/src/api/menu.js
+++ b/src/api/menu.js
@@ -11,3 +11,7 @@ export function getMenuDataApi() {
 export function addMenuApi(data) {
     return postReq('/api/v1/menus', data);
 }
+
+export function addRoleApi(data) {
+    return postReq('/api/v1/roles', data);
+}
diff --git a/src/components/menu_tree/index.vue b/src/components/menu_tree/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..269625f776a5e369914ff0f0e3433e23645744e7
--- /dev/null
+++ b/src/components/menu_tree/index.vue
@@ -0,0 +1,49 @@
+<template>
+    <a-tree
+        :checkedKeys="value"
+        :selectable="false"
+        checkable
+        :replaceFields="replaceFields"
+        :tree-data="treeData"
+        style="max-height:400px"
+        class="tw-overflow-y-auto"
+        v-bind="$attrs"
+        v-on="$listeners"
+    />
+</template>
+
+<script>
+import { getMenuDataApi } from '@/api';
+import { convertListToTree } from '@/utils';
+
+export default {
+    model: {
+        prop: 'value',
+        event: 'check',
+    },
+    props: {
+        value: [Object, Array],
+        showMenu: Boolean,
+    },
+    data() {
+        return {
+            treeData: [],
+            replaceFields: {
+                title: 'menuName',
+                key: 'menuId',
+            },
+        };
+    },
+    async mounted() {
+        this.rawData = await getMenuDataApi();
+        this.treeData = convertListToTree(this.rawData, !this.showMenu);
+    },
+
+    methods: {
+        get() {
+            if (Array.isArray(this.value)) return this.rawData.filter(m => this.value.includes(m.menuId));
+            return [];
+        },
+    },
+};
+</script>
diff --git a/src/components/popconfirm_delete/index.vue b/src/components/popconfirm_delete/index.vue
index 0704f53f0c1bf0f862be693ce0a241324ced4153..13da48a4021ae258c5f5686f9c1ba3cdbfd29354 100644
--- a/src/components/popconfirm_delete/index.vue
+++ b/src/components/popconfirm_delete/index.vue
@@ -1,19 +1,26 @@
 <template>
-    <a-popconfirm title="确认是否删除" ok-text="确认" cancel-text="取消" @confirm="onOk" @cancel="onCancel">
+    <a-popconfirm title="确认是否删除" ok-text="确认" cancel-text="取消" @confirm="onOk">
         <a>删除</a>
     </a-popconfirm>
 </template>
 
 <script>
 import { EMPTY_FUN } from '@/utils';
+import { delReq } from '@/utils';
 
 export default {
     props: {
-        onOk: Function,
-        onCancel: {
+        url: String,
+        cb: {
             type: Function,
             default: EMPTY_FUN,
         },
     },
+    methods: {
+        async onOk() {
+            await delReq(this.url);
+            this.cb();
+        },
+    },
 };
 </script>
diff --git a/src/components/table/index.vue b/src/components/table/index.vue
index 13d0db7b14be1950a807ef922a2992c5d19e0686..f1dcb3b080df26e4e86faec22dbd30ae02924ef2 100644
--- a/src/components/table/index.vue
+++ b/src/components/table/index.vue
@@ -124,6 +124,7 @@ export default {
             this.submitLoading = true;
             try {
                 await this.addBtn?.onOk();
+                this.getData();
             } catch (error) {
                 // todo
             }
@@ -133,9 +134,6 @@ export default {
         showAdd() {
             this.addVisible = true;
         },
-        refresh() {
-            this.getData();
-        },
     },
 };
 </script>
diff --git a/src/pages/system/view/menu/MenuManagement.vue b/src/pages/system/view/menu/MenuManagement.vue
index ee18afc648b45d6ad5927a8045bc22b6a4aa4176..e123280f8464e1d55907065b7975a30e90ade3e5 100644
--- a/src/pages/system/view/menu/MenuManagement.vue
+++ b/src/pages/system/view/menu/MenuManagement.vue
@@ -7,12 +7,6 @@
         noPage
         ref="table"
     >
-        <template #search="{query}">
-            <a-form-model-item label="菜单、目录名称">
-                <a-input v-model="query.name" />
-            </a-form-model-item>
-        </template>
-
         <template #add>
             <Form ref="addForm" />
         </template>
@@ -44,9 +38,8 @@ export default {
             text: '新建',
             title: '菜单配置',
             width: 400,
-            async onOk() {
-                await vm.$refs['addForm']?.submit();
-                vm.refreshTable();
+            onOk() {
+                return vm.$refs['addForm']?.submit();
             },
         },
         sortOrder: 'ascend',
@@ -57,7 +50,7 @@ export default {
     methods: {
         formatData: convertListToTree,
         refreshTable() {
-            this.$refs['table'].refresh();
+            this.$refs['table'].getData();
         },
         async delMenu(id) {
             await delMenuApi(id);
diff --git a/src/pages/system/view/menu/form.vue b/src/pages/system/view/menu/form.vue
index bd41841db831e143bc28ac01a1e553081a42afbd..414341eaf0fad95cf7fd454e56abb5ae7158d9d8 100644
--- a/src/pages/system/view/menu/form.vue
+++ b/src/pages/system/view/menu/form.vue
@@ -1,17 +1,7 @@
 <template>
     <a-form-model layout="vertical" :model="form" :rules="rules">
         <a-form-model-item label="父级" v-if="isAdd">
-            <a-tree
-                v-model="checkedKeys"
-                :selectable="false"
-                checkable
-                checkStrictly
-                :replaceFields="replaceFields"
-                :tree-data="treeData"
-                @check="onCheck"
-                style="max-height:400px"
-                class="tw-overflow-y-auto"
-            />
+            <MenuTree @check="onCheck" :value="checkedKeys" checkStrictly />
         </a-form-model-item>
         <a-form-model-item label="类型">
             <a-radio-group v-model="form.menuType" :disabled="isEdit">
@@ -41,10 +31,11 @@
 </template>
 
 <script>
-import { getMenuDataApi, addMenuApi } from '@/api';
-import { convertListToTree } from '@/utils';
+import { addMenuApi } from '@/api';
+import MenuTree from '@/components/menu_tree/index.vue';
 
 export default {
+    components: { MenuTree },
     data: () => ({
         type: 0,
         form: {
@@ -55,19 +46,11 @@ export default {
         rules: {
             menuUrl: [{ required: true }],
         },
-        replaceFields: {
-            title: 'menuName',
-            key: 'menuId',
-        },
         checkedKeys: {
             checked: [],
             halfChecked: [],
         },
-        treeData: [],
     }),
-    mounted() {
-        this.getMenuData();
-    },
     computed: {
         isAdd() {
             return this.type === 0;
@@ -77,15 +60,12 @@ export default {
         },
     },
     methods: {
-        async getMenuData() {
-            this.treeData = convertListToTree(await getMenuDataApi(), true);
-            console.log(this.treeData);
-        },
         submit() {
             return addMenuApi({ ...this.form, parentMenuId: this.checkedKeys.checked[0] ?? 0 });
         },
         onCheck(checkedKeys) {
-            this.checkedKeys.checked = checkedKeys.checked.slice(-1);
+            const checked = checkedKeys.checked.slice(-1);
+            this.checkedKeys = { checked };
         },
         setEdit(data) {
             this.type = 1;
diff --git a/src/pages/system/view/role/RoleManagement.vue b/src/pages/system/view/role/RoleManagement.vue
index 1384fc248d34e1b2ba0fdaa1ba2e11175bd30743..3c011c7b21b132b14e3b4b1ade232382889b2a72 100644
--- a/src/pages/system/view/role/RoleManagement.vue
+++ b/src/pages/system/view/role/RoleManagement.vue
@@ -1,4 +1,44 @@
 <template>
-  <h1>Menu Management</h1>
+    <my-table url="/api/v1/roles" rowKey="roleId" :addBtn="addBtn" ref="table">
+        <template #add>
+            <Form ref="form" />
+        </template>
+
+        <a-table-column title="名称" data-index="roleName" />
+        <a-table-column title="说明" data-index="remark" />
+        <a-table-column title="操作">
+            <template #default="row">
+                <a @click="() => view(row, 2)">查看</a>
+                <a-divider type="vertical" />
+                <a @click="() => view(row, 1)">编辑</a>
+                <a-divider type="vertical" />
+                <PopconfirmDelete :url="`/api/v1/roles/${row.roleId}`" :cb="refreshTable" />
+            </template>
+        </a-table-column>
+    </my-table>
 </template>
- 
\ No newline at end of file
+
+<script>
+import Form from './form.vue';
+import PopconfirmDelete from '@/components/popconfirm_delete/index.vue';
+
+export default {
+    components: { Form, PopconfirmDelete },
+    data() {
+        return {
+            addBtn: { width: 400, onOk: () => this.$refs['form']?.submit() },
+        };
+    },
+    methods: {
+        refreshTable() {
+            this.$refs['table']?.getData();
+        },
+        view(data, type) {
+            this.$refs['table']?.showAdd();
+            this.$nextTick(() => {
+                this.$refs['form'].setData(data, type);
+            });
+        },
+    },
+};
+</script>
diff --git a/src/pages/system/view/role/form.vue b/src/pages/system/view/role/form.vue
new file mode 100644
index 0000000000000000000000000000000000000000..41b3a61f1d2433d586d26f4deec9e9fedc866862
--- /dev/null
+++ b/src/pages/system/view/role/form.vue
@@ -0,0 +1,51 @@
+<template>
+    <a-form-model layout="vertical" :model="form" :rules="rules">
+        <a-form-model-item label="角色名称">
+            <a-input v-model="form.roleName" :disabled="isView" />
+        </a-form-model-item>
+        <a-form-model-item label="角色编码">
+            <a-input v-model="form.roleCode" :disabled="isView" />
+        </a-form-model-item>
+        <a-form-model-item label="角色说明" prop="remark">
+            <a-input v-model="form.remark" :disabled="isView" />
+        </a-form-model-item>
+
+        <a-form-model-item label="菜单权限">
+            <MenuTree v-model="checkedKeys" 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';
+
+export default {
+    components: { MenuTree },
+    data() {
+        return {
+            type: 0,
+            form: {},
+            rules: {},
+            checkedKeys: [],
+        };
+    },
+    computed: {
+        isEdit() {
+            return this.type === 1;
+        },
+        isView() {
+            return this.type === 2;
+        },
+    },
+    methods: {
+        submit() {
+            return addRoleApi({ ...this.form, authorityList: this.$refs['menuTree'].get() });
+        },
+        setData(data, type) {
+            this.form = data;
+            this.type = type;
+        },
+    },
+};
+</script>