diff --git a/src/main/java/com/xuxd/kafka/console/beans/dto/SysRoleDTO.java b/src/main/java/com/xuxd/kafka/console/beans/dto/SysRoleDTO.java
index f07b384..32f89f2 100644
--- a/src/main/java/com/xuxd/kafka/console/beans/dto/SysRoleDTO.java
+++ b/src/main/java/com/xuxd/kafka/console/beans/dto/SysRoleDTO.java
@@ -2,6 +2,10 @@ package com.xuxd.kafka.console.beans.dto;
 
 import com.xuxd.kafka.console.beans.dos.SysRoleDO;
 import lombok.Data;
+import org.apache.commons.collections.CollectionUtils;
+import org.apache.commons.lang3.StringUtils;
+
+import java.util.List;
 
 /**
  * @author: xuxd
@@ -16,14 +20,16 @@ public class SysRoleDTO {
 
     private String description;
 
-    private String permissionIds;
+    private List<String> permissionIds;
 
     public SysRoleDO toDO() {
         SysRoleDO roleDO = new SysRoleDO();
         roleDO.setId(this.id);
         roleDO.setRoleName(this.roleName);
         roleDO.setDescription(this.description);
-        roleDO.setPermissionIds(this.permissionIds);
+        if (CollectionUtils.isNotEmpty(permissionIds)) {
+            roleDO.setPermissionIds(StringUtils.join(this.permissionIds, ","));
+        }
         return roleDO;
     }
 }
diff --git a/src/main/java/com/xuxd/kafka/console/controller/UserManageController.java b/src/main/java/com/xuxd/kafka/console/controller/UserManageController.java
index 83e683d..c0b9fd2 100644
--- a/src/main/java/com/xuxd/kafka/console/controller/UserManageController.java
+++ b/src/main/java/com/xuxd/kafka/console/controller/UserManageController.java
@@ -27,10 +27,10 @@ public class UserManageController {
         return userManageService.addUser(userDTO);
     }
 
-    @ControllerLog("新增角色")
+    @ControllerLog("新增/更新角色")
     @PostMapping("/role")
-    public Object addRole(@RequestBody SysRoleDTO roleDTO) {
-        return userManageService.addRole(roleDTO);
+    public Object addOrUpdateRole(@RequestBody SysRoleDTO roleDTO) {
+        return userManageService.addOrUdpateRole(roleDTO);
     }
 
     @ControllerLog("新增权限")
@@ -54,4 +54,9 @@ public class UserManageController {
     public Object selectPermission() {
         return userManageService.selectPermission();
     }
+
+    @DeleteMapping("/role")
+    public Object deleteRole(@RequestParam Long id) {
+        return userManageService.deleteRole(id);
+    }
 }
diff --git a/src/main/java/com/xuxd/kafka/console/service/UserManageService.java b/src/main/java/com/xuxd/kafka/console/service/UserManageService.java
index 36b0c13..009794a 100644
--- a/src/main/java/com/xuxd/kafka/console/service/UserManageService.java
+++ b/src/main/java/com/xuxd/kafka/console/service/UserManageService.java
@@ -18,7 +18,7 @@ public interface UserManageService {
      */
     ResponseData addPermission(SysPermissionDTO permissionDTO);
 
-    ResponseData addRole(SysRoleDTO roleDTO);
+    ResponseData addOrUdpateRole(SysRoleDTO roleDTO);
 
     ResponseData addUser(SysUserDTO userDTO);
 
@@ -29,4 +29,6 @@ public interface UserManageService {
     ResponseData updateUser(SysUserDTO userDTO);
 
     ResponseData updateRole(SysRoleDTO roleDTO);
+
+    ResponseData deleteRole(Long id);
 }
diff --git a/src/main/java/com/xuxd/kafka/console/service/impl/UserManageServiceImpl.java b/src/main/java/com/xuxd/kafka/console/service/impl/UserManageServiceImpl.java
index 1ffbba0..1bdb7cc 100644
--- a/src/main/java/com/xuxd/kafka/console/service/impl/UserManageServiceImpl.java
+++ b/src/main/java/com/xuxd/kafka/console/service/impl/UserManageServiceImpl.java
@@ -49,8 +49,13 @@ public class UserManageServiceImpl implements UserManageService {
     }
 
     @Override
-    public ResponseData addRole(SysRoleDTO roleDTO) {
-        roleMapper.insert(roleDTO.toDO());
+    public ResponseData addOrUdpateRole(SysRoleDTO roleDTO) {
+        SysRoleDO roleDO = roleDTO.toDO();
+        if (roleDO.getId() == null) {
+            roleMapper.insert(roleDO);
+        } else {
+            roleMapper.updateById(roleDO);
+        }
         return ResponseData.create().success();
     }
 
@@ -132,4 +137,10 @@ public class UserManageServiceImpl implements UserManageService {
         roleMapper.updateById(roleDTO.toDO());
         return ResponseData.create().success();
     }
+
+    @Override
+    public ResponseData deleteRole(Long id) {
+        roleMapper.deleteById(id);
+        return ResponseData.create().success();
+    }
 }
diff --git a/ui/src/utils/api.js b/ui/src/utils/api.js
index 2bfd408..cfac0a9 100644
--- a/ui/src/utils/api.js
+++ b/ui/src/utils/api.js
@@ -322,4 +322,12 @@ export const UserManageApi = {
     url: "/sys/user/manage/role",
     method: "get",
   },
+  addOrUpdateRole: {
+    url: "/sys/user/manage/role",
+    method: "post",
+  },
+  deleteRole: {
+    url: "/sys/user/manage/role",
+    method: "delete",
+  },
 };
\ No newline at end of file
diff --git a/ui/src/views/user/Permission.vue b/ui/src/views/user/Permission.vue
index a18f84e..32a3bdd 100644
--- a/ui/src/views/user/Permission.vue
+++ b/ui/src/views/user/Permission.vue
@@ -4,7 +4,6 @@
       <a-table
         :columns="columns"
         :data-source="data"
-        :row-selection="rowSelection"
         :expanded-row-keys.sync="expandedRowKeys"
       >
         <div slot="type" slot-scope="text">
@@ -32,13 +31,7 @@ const columns = [
     width: "12%",
     slots: { title: "type" },
     scopedSlots: { customRender: "type" },
-  },
-  {
-    title: "权限标记",
-    dataIndex: "permission",
-    width: "30%",
-    key: "permission",
-  },
+  }
 ];
 
 const rowSelection = {
diff --git a/ui/src/views/user/Role.vue b/ui/src/views/user/Role.vue
index 37a86d6..4abda75 100644
--- a/ui/src/views/user/Role.vue
+++ b/ui/src/views/user/Role.vue
@@ -20,7 +20,12 @@
                     item.roleName
                   }}</a>
                 </a-list-item-meta>
-                <a-popconfirm title="确定删除角色？">
+                <a-popconfirm
+                  title="确定删除角色？"
+                  ok-text="确认"
+                  cancel-text="取消"
+                  @confirm="deleteRole(item.id)"
+                >
                   <a :style="{ display: 'flex' }">
                     <a-icon type="delete" />
                   </a>
@@ -79,7 +84,7 @@
                         <!--                        <a-checkbox :checked="menuPermission.checked">-->
                         <!--                          可见</a-checkbox-->
                         <!--                        >-->
-                        <a-switch v-model="menuPermission.checked" />
+                        <!--                        <a-switch v-model="menuPermission.checked" />-->
                       </a-col>
                     </a-row>
                     <a-divider type="horizontal" :style="{ margin: '0px' }" />
@@ -100,13 +105,20 @@
                         />
                       </a-col>
                       <a-col :span="3" :style="{ textAlign: 'right' }">
-                        <a-checkbox> 全选</a-checkbox>
+                        <a-checkbox
+                          v-model="checkboxPermission.selectAll"
+                          @click="onCheckboxSelectAll(checkboxPermission)"
+                        >
+                          全选</a-checkbox
+                        >
                       </a-col>
                     </a-row>
                   </div>
                 </a-form-item>
                 <a-form-item>
-                  <a-button type="primary" :loading="loading">保存</a-button>
+                  <a-button type="primary" :loading="loading" @click="onSave()"
+                    >保存</a-button
+                  >
                 </a-form-item>
               </a-form>
             </div>
@@ -139,6 +151,16 @@ export default {
   methods: {
     selected(role) {
       this.selectedRole = Object.assign({}, role);
+      this.form.getFieldDecorator("description", {
+        rules: [{ required: true, message: "请填写备注说明!" }],
+        initialValue: this.selectedRole.description,
+      });
+      this.form.getFieldDecorator("roleName", {
+        rules: [{ required: true, message: "请填写角色名称!" }],
+        initialValue: this.selectedRole.roleName,
+      });
+      this.form.setFieldsValue({ roleName: this.selectedRole.roleName });
+      this.form.setFieldsValue({ description: this.selectedRole.description });
       const idSet = this.selectedRole.permissionIds
         ? new Set(this.selectedRole.permissionIds)
         : new Set();
@@ -181,14 +203,78 @@ export default {
                 .map((bc) => bc.id)
                 .filter((id) => idSet.has(id));
               btn.selected = selected || [];
+              btn.selectAll = btn.selected.length == btn.children.length;
             }
           });
           menu.children = arr;
-          menu.checked = idSet.has(menu.id);
+          // menu.checked = idSet.has(menu.id);
         }
         this.selectedPermissions.push(menu);
       });
     },
+    deleteRole(id) {
+      this.loading = true;
+      request({
+        url: UserManageApi.deleteRole.url + "?id=" + id,
+        method: UserManageApi.deleteRole.method,
+      }).then((res) => {
+        this.loading = false;
+        if (res.code == 0) {
+          this.$message.success(res.msg);
+          this.getRoles();
+        } else {
+          notification.error({
+            message: "error",
+            description: res.msg,
+          });
+        }
+      });
+    },
+    onSave() {
+      this.form.validateFields((err, values) => {
+        if (!err) {
+          const params = Object.assign({}, this.selectedRole, values);
+          params.permissionIds = [];
+          this.selectedPermissions.forEach((e) => {
+            if (e.children) {
+              e.children.forEach((child) => {
+                if (child.selected) {
+                  params.permissionIds.push(...child.selected);
+                }
+              });
+            }
+          });
+          this.loading = true;
+          request({
+            url: UserManageApi.addOrUpdateRole.url,
+            method: UserManageApi.addOrUpdateRole.method,
+            data: params,
+          }).then((res) => {
+            this.loading = false;
+            if (res.code == 0) {
+              this.$message.success(res.msg);
+              this.getRoles();
+            } else {
+              notification.error({
+                message: "error",
+                description: res.msg,
+              });
+            }
+          });
+        }
+      });
+    },
+    onCheckboxSelectAll(record) {
+      if (!record.children) {
+        record.selected = [];
+        return;
+      }
+      if (!record.selectAll) {
+        record.selected = record.children.map((bc) => bc.id);
+      } else {
+        record.selected = [];
+      }
+    },
     getRoles() {
       this.loading = true;
       request({