diff --git a/src/api/system/role.ts b/src/api/system/role.ts
index f5764379..21eb73fd 100644
--- a/src/api/system/role.ts
+++ b/src/api/system/role.ts
@@ -1,3 +1,16 @@
 import server from '@/utils/request';
 
-export const getRoleList_api = (data: any): Promise<any> => server.post(`/role/_query/`, data);
\ No newline at end of file
+// 获取角色列表
+export const getRoleList_api = (data: any): Promise<any> => server.post(`/role/_query/`, data);
+// 删除角色
+export const delRole_api = (id: string): Promise<any> => server.remove(`/role/${id}`);
+// 保存角色
+export const saveRole_api = (data: any): Promise<any> => server.post(`/role`, data);
+// 获取角色对应的权限树
+export const getPrimissTree_api = (id: string): Promise<any> => server.get(`/menu/role/${id}/_grant/tree`);
+
+
+// 获取用户列表
+export const getUserByRole_api = (data: any): Promise<any> => server.post(`/user/_query/`, data);
+// 将用户与该角色进行绑定
+export const bindUser_api = (roleId:string, data: string[]): Promise<any> => server.post(`/role/${roleId}/users/_bind`, data);
\ No newline at end of file
diff --git a/src/components/Table/index.vue b/src/components/Table/index.vue
index d596666f..d1fa47d2 100644
--- a/src/components/Table/index.vue
+++ b/src/components/Table/index.vue
@@ -41,7 +41,7 @@
                     </div>
                 </div>
                 <div v-else>
-                    <a-table rowKey="id" :rowSelection="rowSelection" :columns="[..._columns]" :dataSource="_dataSource" :pagination="false" :scroll="{ x: 1366 }">
+                    <a-table rowKey="id" :rowSelection="rowSelection" :columns="[..._columns]" :dataSource="_dataSource" :pagination="false">
                         <template #bodyCell="{ column, record }">
                             <!-- <template v-if="column.key === 'action'">
                                 <a-space>
diff --git a/src/router/menu.ts b/src/router/menu.ts
index 2db5bb76..27d4f961 100644
--- a/src/router/menu.ts
+++ b/src/router/menu.ts
@@ -105,6 +105,10 @@ export default [
         path:'/system/Role',
         component: ()=>import('@/views/system/Role/index.vue')
     },
+    {
+        path:'/system/Role/detail/:id',
+        component: ()=>import('@/views/system/Role/Detail/index.vue')
+    },
     // 初始化
     {
       path: '/init-home',
diff --git a/src/views/system/Role/Detail/Permiss/index.vue b/src/views/system/Role/Detail/Permiss/index.vue
new file mode 100644
index 00000000..74a4720e
--- /dev/null
+++ b/src/views/system/Role/Detail/Permiss/index.vue
@@ -0,0 +1,55 @@
+<template>
+    <div class="role-permiss-container">
+        <a-card>
+            <h5>基本信息</h5>
+            <a-form ref="formRef" :model="form.data" layout="vertical">
+                <a-form-item
+                    name="name"
+                    label="名称"
+                    :rules="[{ required: true, message: '请输入名称' }]"
+                >
+                    <a-input
+                        v-model:value="form.data.name"
+                        placeholder="请输入角色名称"
+                        allow-clear
+                        :maxlength="64"
+                    />
+                </a-form-item>
+                <a-form-item name="name" label="说明">
+                    <a-textarea
+                        v-model:value="form.data.description"
+                        placeholder="请输入说明"
+                        allow-clear
+                        :maxlength="200"
+                    />
+                </a-form-item>
+            </a-form>
+        </a-card>
+
+        <a-card>
+            <h5>权限分配</h5>
+            <PermissTree />
+
+            <a-button type="primary" :disabled="form.loading" @click="form.clickSave">保存</a-button>
+        </a-card>
+    </div>
+</template>
+
+<script setup lang="ts" name="RolePermiss">
+import { FormInstance } from 'ant-design-vue';
+import PermissTree from '../components/PermissTree.vue'
+
+// 表单相关
+const formRef = ref<FormInstance>();
+const form = reactive({
+    loading: false,
+    data: {
+        name: '',
+        description: '',
+    },
+    getForm: ()=>{},
+    clickSave: ()=>{}
+});
+</script>
+
+<style lang="less" scoped></style>
diff --git a/src/views/system/Role/Detail/User/index.vue b/src/views/system/Role/Detail/User/index.vue
new file mode 100644
index 00000000..30586c85
--- /dev/null
+++ b/src/views/system/Role/Detail/User/index.vue
@@ -0,0 +1,116 @@
+<template>
+    <a-card class="role-user-container">
+        <Search :columns="query.columns" />
+
+        <JTable
+            ref="tableRef"
+            :columns="table.columns"
+            :request="getUserByRole_api"
+            model="TABLE"
+            :params="query.params"
+        >
+            <template #headerTitle>
+                <a-button type="primary" @click="table.clickAdd"
+                    ><plus-outlined />新增</a-button
+                >
+            </template>
+
+            <template #action="slotProps">
+                <a-space :size="16"> </a-space>
+            </template>
+        </JTable>
+
+        <div class="dialogs">
+            <AddUserDialog :open="dialog.openAdd" @refresh="table.refresh" />
+        </div>
+    </a-card>
+</template>
+
+<script setup lang="ts" name="RoleUser">
+import AddUserDialog from '../components/AddUserDialog.vue';
+import { getUserByRole_api } from '@/api/system/role';
+
+const route = useRoute()
+const query = reactive({
+    columns: [
+        {
+            title: '姓名',
+            dataIndex: 'name',
+            key: 'name',
+        },
+        {
+            title: '用户名',
+            dataIndex: 'username',
+            key: 'username',
+        },
+        {
+            title: '创建时间',
+            dataIndex: 'createTime',
+            key: 'createTime',
+        },
+        {
+            title: '状态',
+            dataIndex: 'status',
+            key: 'status',
+        },
+    ],
+    params: {
+        terms: [
+            {
+                terms: [
+                    {
+                        column: 'id$in-dimension$role',
+                        value: route.params.id,
+                    },
+                ],
+            },
+        ],
+    },
+});
+
+const tableRef = ref<Record<string, any>>({});
+const table = reactive({
+    columns: [
+        {
+            title: '姓名',
+            dataIndex: 'name',
+            key: 'name',
+        },
+        {
+            title: '用户名',
+            dataIndex: 'username',
+            key: 'username',
+        },
+        {
+            title: '创建时间',
+            dataIndex: 'createTime',
+            key: 'createTime',
+        },
+        {
+            title: '状态',
+            dataIndex: 'status',
+            key: 'status',
+        },
+        {
+            title: '操作',
+            dataIndex: 'action',
+            key: 'action',
+            scopedSlots: true,
+        },
+    ],
+    tableData: [],
+    clickAdd: () => {
+        dialog.openAdd += 1;
+    },
+    refresh: ()=>{
+        tableRef.value.reload()
+    }
+});
+
+// 弹窗相关
+const dialog = reactive({
+    openAdd: 0,
+});
+</script>
+
+<style lang="less" scoped></style>
diff --git a/src/views/system/Role/Detail/components/AddUserDialog.vue b/src/views/system/Role/Detail/components/AddUserDialog.vue
new file mode 100644
index 00000000..7a3a4ee3
--- /dev/null
+++ b/src/views/system/Role/Detail/components/AddUserDialog.vue
@@ -0,0 +1,123 @@
+<template>
+    <a-modal
+        v-model:visible="dialog.visible"
+        title="新增"
+        width="1000px"
+        @ok="dialog.handleOk"
+    >
+        <Search :columns="query.columns" type="simple" />
+
+        <JTable
+            ref="tableRef"
+            :columns="table.columns"
+            :request="getUserByRole_api"
+            model="TABLE"
+            :params="query.params"
+            :rowSelection="{
+                selectedRowKeys: table._selectedRowKeys,
+                onChange: table.onSelectChange,
+            }"
+            @cancelSelect="table.cancelSelect"
+        >
+        </JTable>
+
+        <template #footer>
+            <a-button key="back" @click="dialog.visible = false">取消</a-button>
+            <a-button key="submit" type="primary" @click="dialog.handleOk"
+                >确定</a-button
+            >
+        </template>
+    </a-modal>
+</template>
+
+<script setup lang="ts">
+import { getUserByRole_api, bindUser_api } from '@/api/system/role';
+import { message } from 'ant-design-vue';
+const route = useRoute();
+
+const emits = defineEmits(['refresh']);
+const props = defineProps({
+    open: Number,
+});
+
+const query = reactive({
+    columns: [
+        {
+            title: '姓名',
+            dataIndex: 'name',
+            key: 'name',
+        },
+        {
+            title: '用户名',
+            dataIndex: 'username',
+            key: 'username',
+        },
+    ],
+    params: {
+        sorts: [{ name: 'createTime', order: 'desc' }],
+        terms: [
+            {
+                terms: [
+                    {
+                        column: 'id$in-dimension$role$not',
+                        value: route.params.id,
+                    },
+                ],
+            },
+        ],
+    },
+});
+const tableRef = ref<Record<string, any>>({});
+const table = reactive({
+    _selectedRowKeys: [] as string[],
+    columns: [
+        {
+            title: '姓名',
+            dataIndex: 'name',
+            key: 'name',
+        },
+        {
+            title: '用户名',
+            dataIndex: 'username',
+            key: 'username',
+        },
+    ],
+    tableData: [],
+    onSelectChange: (keys: string[]) => {
+        table._selectedRowKeys = [...keys];
+    },
+    cancelSelect: () => {
+        table._selectedRowKeys = [];
+    },
+});
+
+// 弹窗相关
+const dialog = reactive({
+    visible: false,
+    handleOk: () => {
+        if (table._selectedRowKeys.length < 1) {
+            message.error('请至少选择一项');
+        } else {
+            bindUser_api(
+                route.params.id as string,
+                table._selectedRowKeys,
+            ).then((resp) => {
+                if (resp.status === 200) {
+                    message.success('操作成功');
+                    emits('refresh');
+                    dialog.visible = false;
+                }
+            });
+        }
+    },
+});
+
+watch(
+    () => props.open,
+    () => {
+        dialog.visible = true;
+    },
+);
+</script>
+
+<style scoped></style>
diff --git a/src/views/system/Role/Detail/components/PermissTree.vue b/src/views/system/Role/Detail/components/PermissTree.vue
new file mode 100644
index 00000000..b47647ad
--- /dev/null
+++ b/src/views/system/Role/Detail/components/PermissTree.vue
@@ -0,0 +1,67 @@
+<template>
+    <div class="permiss-tree-container">
+        <a-table :data-source="dataSource">
+            <a-table-column key="menu" data-index="menu">
+                <template #title><span style="">菜单权限</span></template>
+            </a-table-column>
+            <a-table-column key="action" title="操作权限" data-index="action" />
+            <a-table-column key="data" data-index="data">
+                <template #title>
+                    <span style="">数据权限</span>
+                    <a-checkbox v-model:checked="checked">批量设置</a-checkbox>
+                    <a-select
+                        v-show="checked"
+                        v-model:value="selectValue"
+                        :size="'middle'"
+                        style="width: 200px"
+                        :options="options"
+                    ></a-select>
+                </template>
+            </a-table-column>
+        </a-table>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { getPrimissTree_api } from '@/api/system/role';
+
+const route = useRoute();
+const props = defineProps({
+    selectItems: Array,
+});
+const dataSource = ref([]);
+const checked = ref<boolean>(false);
+const options = [
+    {
+        label: '全部数据',
+        value: '1',
+    },
+    {
+        label: '所在组织及下级组织',
+        value: '2',
+    },
+    {
+        label: '所在组织',
+        value: '3',
+    },
+    {
+        label: '自己创建的',
+        value: '4',
+    },
+];
+const selectValue = ref<string>('');
+
+const getAllPermiss = () => {
+    const id = route.params.id as string;
+    getPrimissTree_api(id).then((resp) => {
+        console.log(resp);
+    });
+};
+
+getAllPermiss();
+</script>
+
+<style lang="less" scoped>
+.permiss-tree-container {
+}
+</style>
diff --git a/src/views/system/Role/Detail/index.vue b/src/views/system/Role/Detail/index.vue
new file mode 100644
index 00000000..1c58b369
--- /dev/null
+++ b/src/views/system/Role/Detail/index.vue
@@ -0,0 +1,19 @@
+<template>
+    <div class="details-container">
+        {{ route.params.id }}
+        <a-tabs v-model:activeKey="activeKey">
+            <a-tab-pane key="1" tab="权限分配"><Permiss /></a-tab-pane>
+            <a-tab-pane key="2" tab="用户管理"><User /></a-tab-pane>
+        </a-tabs>
+    </div>
+</template>
+
+<script setup lang="ts" name="Detail">
+import Permiss from './Permiss/index.vue';
+import User from './User/index.vue';
+const route = useRoute();
+
+const activeKey = ref('1');
+</script>
+
+<style lang="less" scoped></style>
diff --git a/src/views/system/Role/components/AddDialog.vue b/src/views/system/Role/components/AddDialog.vue
index 32cf2d51..33e817b3 100644
--- a/src/views/system/Role/components/AddDialog.vue
+++ b/src/views/system/Role/components/AddDialog.vue
@@ -2,26 +2,90 @@
     <a-modal
         v-model:visible="dialog.visible"
         title="新增"
+        width="670px"
         @ok="dialog.handleOk"
     >
-        <p>Some contents...</p>
-        <p>Some contents...</p>
-        <p>Some contents...</p>
+        <a-form ref="formRef" :model="form.data" layout="vertical">
+            <a-form-item
+                name="name"
+                label="名称"
+                :rules="[{ required: true, message: '请输入名称' }]"
+            >
+                <a-input
+                    v-model:value="form.data.name"
+                    placeholder="请输入角色名称"
+                    allow-clear
+                    :maxlength="64"
+                />
+            </a-form-item>
+            <a-form-item name="name" label="说明">
+                <a-textarea
+                    v-model:value="form.data.description"
+                    placeholder="请输入说明"
+                    allow-clear
+                    :maxlength="200"
+                />
+            </a-form-item>
+        </a-form>
+
+        <template #footer>
+            <a-button key="back" @click="dialog.visible = false">取消</a-button>
+            <a-button
+                key="submit"
+                type="primary"
+                :loading="form.loading"
+                @click="dialog.handleOk"
+                >确定</a-button
+            >
+        </template>
     </a-modal>
 </template>
 
 <script setup lang="ts">
-const emits = defineEmits(['refresh']);
+import { FormInstance, message } from 'ant-design-vue';
+import { saveRole_api } from '@/api/system/role';
+const router = useRouter()
 const props = defineProps({
     open: Number,
 });
-
+// 弹窗相关
 const dialog = reactive({
     visible: false,
     handleOk: () => {
-        emits('refresh');
+        formRef.value
+            ?.validate()
+            .then(() => saveRole_api(form.data))
+            .then((resp) => {
+                if (resp.status === 200) {
+                    message.success('操作成功');
+                    dialog.visible = false;
+                    router.push(`/system/Role/detail/${resp.result.id}`)
+                }
+            });
     },
 });
+// 表单相关
+const formRef = ref<FormInstance>();
+const form = reactive({
+    loading: false,
+    data: {
+        name: '',
+        description: '',
+    },
+});
+
+watch(
+    () => props.open,
+    () => {
+        // 重置表单
+        form.data = {
+            name: '',
+            description: '',
+        };
+        formRef.value?.resetFields();
+        dialog.visible = true;
+    },
+);
 </script>
 
 <style scoped></style>
diff --git a/src/views/system/Role/index.vue b/src/views/system/Role/index.vue
index e5ebeb01..11758cdd 100644
--- a/src/views/system/Role/index.vue
+++ b/src/views/system/Role/index.vue
@@ -3,7 +3,7 @@
         <Search :columns="query.columns" />
 
         <JTable
-            :ref="tableRef"
+            ref="tableRef"
             :columns="table.columns"
             :request="getRoleList_api"
             model="TABLE"
@@ -43,6 +43,10 @@
                 </a-space>
             </template>
         </JTable>
+
+        <div class="dialogs">
+            <AddDialog :open="dialog.openAdd" />
+        </div>
     </a-card>
 </template>
 
@@ -52,8 +56,11 @@ import {
     DeleteOutlined,
     PlusOutlined,
 } from '@ant-design/icons-vue';
-import { getRoleList_api } from '@/api/system/role';
+import AddDialog from './components/AddDialog.vue';
+import { getRoleList_api, delRole_api } from '@/api/system/role';
+import { message } from 'ant-design-vue';
 
+const router = useRouter()
 // 筛选
 const query = reactive({
     columns: [
@@ -88,7 +95,7 @@ const query = reactive({
     params: {},
 });
 // 表格
-const tableRef = ref();
+const tableRef = ref<Record<string, any>>({});
 const table = reactive({
     columns: [
         {
@@ -114,11 +121,25 @@ const table = reactive({
         },
     ],
     tableData: [],
-    clickAdd: () => {},
-    clickDel: (row: any) => {},
-    clickEdit: (row: any) => {},
+    clickAdd: () => {
+        dialog.openAdd += 1;
+    },
+    clickDel: (row: any) => {
+        delRole_api(row.id).then((resp:any)=>{
+            if(resp.status === 200){
+                tableRef.value?.reload()
+                message.success('操作成功!')
+            }
+        })
+    },
+    clickEdit: (row: any) => {
+        router.push(`/system/Role/detail/${row.id}`)
+    },
+});
+// 弹窗相关
+const dialog = reactive({
+    openAdd: 0,
 });
-
 </script>
 
 <style lang="less" scoped></style>