diff --git a/README.md b/README.md
index bfaf554..c7a7f33 100644
--- a/README.md
+++ b/README.md
@@ -26,3 +26,16 @@ update  sys_menu set hidden=1  where menu_id=58;
 update  sys_menu set title='数据源'  where menu_id=34;
 update  sys_menu set title='Dashboard'  where menu_id=30;
 ```
+```aidl
+INSERT INTO `sys_menu` (`menu_id`, `pid`, `sub_count`, `type`, `title`, `name`, `component`, `menu_sort`, `icon`, `path`, `i_frame`, `cache`, `hidden`, `permission`, `create_by`, `update_by`, `create_time`, `update_time`) VALUES (41, 1, 0, 1, '权限管理', 'system-auth', 'system/authority/index', 4, 'password', 'system-auth', b'0', b'0', b'0', 'auth:read', NULL, NULL, NULL, NULL);
+INSERT INTO `sys_menu` (`menu_id`, `pid`, `sub_count`, `type`, `title`, `name`, `component`, `menu_sort`, `icon`, `path`, `i_frame`, `cache`, `hidden`, `permission`, `create_by`, `update_by`, `create_time`, `update_time`) VALUES (4, 1, 3, 1, '组织管理', 'system-dept', 'system/dept/index', 3, 'dept', 'dept', b'0', b'0', b'0', 'dept:read', NULL, NULL, NULL, NULL);
+INSERT INTO `sys_menu` (`menu_id`, `pid`, `sub_count`, `type`, `title`, `name`, `component`, `menu_sort`, `icon`, `path`, `i_frame`, `cache`, `hidden`, `permission`, `create_by`, `update_by`, `create_time`, `update_time`) VALUES (18, 4, 0, 2, '创建组织', NULL, NULL, 999, NULL, NULL, NULL, b'0', b'0', 'dept:add', NULL, NULL, NULL, NULL);
+INSERT INTO `sys_menu` (`menu_id`, `pid`, `sub_count`, `type`, `title`, `name`, `component`, `menu_sort`, `icon`, `path`, `i_frame`, `cache`, `hidden`, `permission`, `create_by`, `update_by`, `create_time`, `update_time`) VALUES (19, 4, 0, 2, '删除组织', NULL, NULL, 999, NULL, NULL, NULL, b'0', b'0', 'dept:del', NULL, NULL, NULL, NULL);
+INSERT INTO `sys_menu` (`menu_id`, `pid`, `sub_count`, `type`, `title`, `name`, `component`, `menu_sort`, `icon`, `path`, `i_frame`, `cache`, `hidden`, `permission`, `create_by`, `update_by`, `create_time`, `update_time`) VALUES (20, 4, 0, 2, '编辑组织', NULL, NULL, 999, NULL, NULL, NULL, b'0', b'0', 'dept:edit', NULL, NULL, NULL, NULL);
+INSERT INTO `sys_menu` (`menu_id`, `pid`, `sub_count`, `type`, `title`, `name`, `component`, `menu_sort`, `icon`, `path`, `i_frame`, `cache`, `hidden`, `permission`, `create_by`, `update_by`, `create_time`, `update_time`) VALUES (37, 1, 0, 1, '组织表单', 'system-dept-form', 'system/dept/form', 999, NULL, 'dept-form', NULL, b'0', b'1', NULL, NULL, NULL, NULL, NULL);
+INSERT INTO `sys_menu` (`menu_id`, `pid`, `sub_count`, `type`, `title`, `name`, `component`, `menu_sort`, `icon`, `path`, `i_frame`, `cache`, `hidden`, `permission`, `create_by`, `update_by`, `create_time`, `update_time`) VALUES (5, 1, 3, 1, '角色管理', 'system-role', 'system/role/index', 2, 'role', 'role', b'0', b'0', b'0', 'role:read', NULL, NULL, NULL, NULL);
+INSERT INTO `sys_menu` (`menu_id`, `pid`, `sub_count`, `type`, `title`, `name`, `component`, `menu_sort`, `icon`, `path`, `i_frame`, `cache`, `hidden`, `permission`, `create_by`, `update_by`, `create_time`, `update_time`) VALUES (23, 5, 0, 2, '编辑角色', NULL, NULL, 999, NULL, NULL, NULL, b'0', b'0', 'role:edit', NULL, NULL, NULL, NULL);
+INSERT INTO `sys_menu` (`menu_id`, `pid`, `sub_count`, `type`, `title`, `name`, `component`, `menu_sort`, `icon`, `path`, `i_frame`, `cache`, `hidden`, `permission`, `create_by`, `update_by`, `create_time`, `update_time`) VALUES (22, 5, 0, 2, '删除角色', NULL, NULL, 999, NULL, NULL, NULL, b'0', b'0', 'role:del', NULL, NULL, NULL, NULL);
+INSERT INTO `sys_menu` (`menu_id`, `pid`, `sub_count`, `type`, `title`, `name`, `component`, `menu_sort`, `icon`, `path`, `i_frame`, `cache`, `hidden`, `permission`, `create_by`, `update_by`, `create_time`, `update_time`) VALUES (21, 5, 0, 2, '创建角色', NULL, NULL, 999, NULL, NULL, NULL, b'0', b'0', 'role:add', NULL, NULL, NULL, NULL);
+INSERT INTO `sys_menu` (`menu_id`, `pid`, `sub_count`, `type`, `title`, `name`, `component`, `menu_sort`, `icon`, `path`, `i_frame`, `cache`, `hidden`, `permission`, `create_by`, `update_by`, `create_time`, `update_time`) VALUES (38, 1, 0, 1, '角色表单', 'system-role-form', 'system/role/form', 999, NULL, 'role-form', NULL, b'0', b'1', NULL, NULL, NULL, NULL, NULL);
+```
diff --git a/frontend/src/views/system/authority/index.vue b/frontend/src/views/system/authority/index.vue
index 533509b..fd96253 100644
--- a/frontend/src/views/system/authority/index.vue
+++ b/frontend/src/views/system/authority/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <de-main-container style="height: calc(100vh - 56px)">
+  <de-main-container style="height: calc(100vh - 56px);">
     <el-tabs v-model="authorityType" @tab-click="handleClick">
       <el-tab-pane name="authConfig">
         <span slot="label">{{ $t("auth.authConfig") }}</span>
diff --git a/frontend/src/views/system/dept/form.vue b/frontend/src/views/system/dept/form.vue
index 7bc5040..6d7eb37 100644
--- a/frontend/src/views/system/dept/form.vue
+++ b/frontend/src/views/system/dept/form.vue
@@ -16,7 +16,7 @@
           <el-radio-button :label="false">{{ $t('commons.no') }}</el-radio-button>
         </el-radio-group>
       </el-form-item>
-      <el-form-item v-if="form.pid !== 0" :label="$t('organization.parent_org')" prop="pid">
+      <el-form-item v-if="!form.top" :label="$t('organization.parent_org')" prop="pid">
         <treeselect
           v-model="form.pid"
           :auto-load-root-options="false"
@@ -27,8 +27,8 @@
         />
       </el-form-item>
       <el-form-item>
-        <el-button type="primary" @click="save">{{ $t('commons.reset') }}</el-button>
-        <el-button @click="reset">{{ $t('commons.confirm') }}</el-button>
+        <el-button type="primary" @click="save">{{ $t('commons.confirm') }}</el-button>
+        <el-button @click="reset">{{ $t('commons.reset') }}</el-button>
       </el-form-item>
     </el-form>
   </layout-content>
diff --git a/frontend/src/views/system/role/form.vue b/frontend/src/views/system/role/form.vue
new file mode 100644
index 0000000..d48601d
--- /dev/null
+++ b/frontend/src/views/system/role/form.vue
@@ -0,0 +1,159 @@
+<template>
+  <layout-content
+    :header="formType == 'add' ? $t('role.add') : $t('role.edit')"
+    back-name="system-dept"
+  >
+    <el-form ref="roleForm" :model="form" :rules="rule" size="small" label-width="auto" label-position="right">
+      <el-form-item :label="$t('commons.name')" prop="name">
+        <el-input v-model="form.name" :placeholder="$t('commons.name')" />
+      </el-form-item>
+      <el-form-item :label="$t('commons.description')" prop="description">
+        <el-input type="textarea" v-model="form.deptSort" :placeholder="$t('commons.description')" />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="save">{{ $t('commons.confirm') }}</el-button>
+        <el-button @click="reset">{{ $t('commons.reset') }}</el-button>
+      </el-form-item>
+    </el-form>
+  </layout-content>
+</template>
+
+<script>
+import LayoutContent from '@/components/business/LayoutContent'
+import '@riophae/vue-treeselect/dist/vue-treeselect.css'
+import { execute } from '@/api/system/dynamic'
+export default {
+  name: 'SystemRoleForm',
+  components: { LayoutContent },
+  data() {
+    return {
+      formType: 'add',
+      form: {},
+      rule: {
+        name: [{ required: true, trigger: 'blur', validator: this.roleValidator }, { min: 1, max: 10, message: this.$t('commons.input_limit', [1, 10]), trigger: 'blur' }],
+        description: [{ max: 50, message: this.$t('commons.char_can_not_more_50'), trigger: 'blur' }]
+      },
+      roles: [],
+      originName: null
+    }
+  },
+
+  created() {
+    if (this.$router.currentRoute.params && this.$router.currentRoute.params.roleId) {
+      var row = this.$router.currentRoute.params
+      this.edit(row)
+    } else {
+      this.create()
+    }
+    this.setLoyoutInfo()
+    this.queryAllRoles()
+  },
+  mounted() {
+    this.bindKey()
+  },
+  destroyed() {
+    this.unBindKey()
+  },
+  methods: {
+    entryKey(event) {
+      const keyCode = event.keyCode
+      if (keyCode === 13) {
+        this.save()
+      }
+    },
+    bindKey() {
+      document.addEventListener('keypress', this.entryKey)
+    },
+    unBindKey() {
+      document.removeEventListener('keypress', this.entryKey)
+    },
+    executeAxios(url, type, data, callBack) {
+      var param = {
+        url: url,
+        type: type,
+        data: data,
+        callBack: callBack
+      }
+      execute(param)
+        .then(function(res) {
+          if (param.callBack) {
+            param.callBack(res)
+          }
+        })
+        .catch(function(e) {
+          if (param.error) {
+            param.error(e)
+          }
+        })
+    },
+    create: function create() {
+      this.formType = 'add'
+    },
+    edit: function edit(row) {
+      this.formType = 'modify'
+      this.form = Object.assign()({}, row)
+      this.originName = row.name
+    },
+    setLoyoutInfo() {
+      this.$emit('on-plugin-layout', {
+        header: this.formType === 'add' ? this.$t('role.add') : this.$t('role.modify'),
+        backName: 'system-role'
+      })
+    },
+    reset() {
+      if (this.formType !== 'add') {
+        const row = this.$router.currentRoute.params
+        this.edit(row)
+      } else {
+        this.$refs.roleForm.resetFields()
+      }
+    },
+    save() {
+      const _this = this
+
+      this.$refs.roleForm.validate(function(valid) {
+        if (valid) {
+          const url = _this.formType === 'add' ? '/plugin/role/create' : '/plugin/role/update'
+          _this.executeAxios(url, 'post', _this.form, function(res) {
+            _this.$success(_this.$t('commons.save_success'))
+            _this.backToList()
+          })
+        } else {
+          return false
+        }
+      })
+    },
+    queryAllRoles() {
+      const _this2 = this
+
+      this.executeAxios('/plugin/role/all', 'post', {}, function(res) {
+        _this2.roles = res.data
+      })
+    },
+    nameRepeat(value) {
+      if (!this.roles || this.roles.length === 0) {
+        return false
+      }
+      // 编辑场景 不能 因为名称重复而报错
+      if (this.formType === 'modify' && this.originName === value) {
+        return false
+      }
+      return this.roles.some(function(role) {
+        return role.name === value
+      })
+    },
+    roleValidator(rule, value, callback) {
+      if (!value || value.length === 0) {
+        callback(new Error('请输入名称'))
+      } else if (this.nameRepeat(value)) {
+        callback(new Error('角色名称已存在'))
+      } else {
+        callback()
+      }
+    },
+    backToList() {
+      this.$router.push({ name: 'system-role' })
+    }
+  }
+}
+</script>
diff --git a/frontend/src/views/system/role/index.vue b/frontend/src/views/system/role/index.vue
new file mode 100644
index 0000000..baab112
--- /dev/null
+++ b/frontend/src/views/system/role/index.vue
@@ -0,0 +1,211 @@
+<template>
+  <layout-content
+    v-loading="$store.getters.loadingMap[$store.getters.currentPath]"
+  >
+    <complex-table
+      :highlight-current-row="''"
+      :data="tableData"
+      :columns="columns"
+      :local-key="roleGrid"
+      :search-config="searchConfig"
+      :pagination-config="paginationConfig"
+      @search="search"
+      @sort-change="sortChange"
+    >
+      <template #toolbar>
+        <el-button
+          v-permission="['role:add']"
+          icon="el-icon-circle-plus-outline"
+          @click="create"
+        >{{ $t("role.add") }}</el-button>
+      </template>
+      <el-table-column prop="name" sortable="custom" :label="$t('commons.name')" />
+      <el-table-column :show-overflow-tooltip="true" prop="description" :label="$t('commons.description')" />
+      <el-table-column :show-overflow-tooltip="true" sortable="custom" prop="createTime" :label="$t('commons.create_time')">
+        <template slot-scope="scope">
+          <span>{{ scope.row.createTime | timestampFormatDate }}</span>
+        </template>
+      </el-table-column>
+      <fu-table-operations
+        :buttons="buttons"
+        :label="$t('commons.operating')"
+        fix
+      />
+    </complex-table>
+  </layout-content>
+</template>
+
+<script>
+import LayoutContent from '@/components/business/LayoutContent'
+import TreeTable from '@/components/business/tree-table'
+// import { checkPermission } from '@/utils/permission'
+import ComplexTable from '@/components/business/complex-table'
+import { addOrder, formatCondition, formatOrders, formatQuickCondition } from '@/utils/index'
+import { execute } from '@/api/system/dynamic'
+
+export default {
+  name: 'SystemRole',
+  components: {
+    ComplexTable, LayoutContent
+  },
+  data() {
+    return {
+      tableData: [],
+      permission: {
+        add: ['role:add'],
+        edit: ['role:edit'],
+        del: ['role:del']
+      },
+      header: '',
+      columns: [],
+      buttons: [{
+        //   label: this.$t('commons.edit'), icon: 'el-icon-edit', click: this.edit
+        label: this.$t('commons.edit'),
+        icon: 'el-icon-edit',
+        type: 'primary',
+        click: this.edit,
+        disabled: this.btnDisabled,
+        show: this.checkPermission(['role:edit'])
+
+      }, {
+        label: this.$t('commons.delete'),
+        icon: 'el-icon-delete',
+        type: 'danger',
+        click: this.handleDelete,
+        disabled: this.btnDisabled,
+        show: this.checkPermission(['role:del'])
+      }],
+      searchConfig: {
+        useQuickSearch: true,
+        quickPlaceholder: this.$t('role.search_by_name'),
+        components: [{ field: 'name', label: this.$t('role.role_name'), component: 'DeComplexInput' }]
+      },
+      paginationConfig: {
+        currentPage: 1,
+        pageSize: 10,
+        total: 0
+      },
+      orderConditions: [],
+      last_condition: null
+    }
+  },
+  mounted() {
+    this.search()
+  },
+  methods: {
+    executeAxios(url, type, data, callBack) {
+      var param = {
+        url: url,
+        type: type,
+        data: data,
+        callBack: callBack
+      }
+      execute(param)
+        .then(function(res) {
+          if (param.callBack) {
+            param.callBack(res)
+          }
+        })
+        .catch(function(e) {
+          if (param.error) {
+            param.error(e)
+          }
+        })
+    },
+    handleSizeChange(val) {
+      // console.log(`每页 ${val} 条`);
+      this.paginationConfig.pageSize = val
+      this.search(this.last_condition)
+    },
+    handleCurrentChange(val) {
+      // console.log(`当前页: ${val}`);
+      this.paginationConfig.currentPage = val
+      this.search(this.last_condition)
+    },
+    sortChange(_ref) {
+      const column = _ref.column
+      const prop = _ref.prop
+      const order = _ref.order
+      this.orderConditions = []
+      if (!order) {
+        this.search(this.last_condition)
+        return
+      }
+      addOrder({ field: prop, value: order }, this.orderConditions)
+      this.search(this.last_condition)
+    },
+    create() {
+      this.$router.push({ name: 'system-role-form' })
+    },
+    edit(row) {
+      this.$router.push({ name: 'system-role-form', params: row })
+    },
+    search(condition) {
+      const _this = this
+      this.last_condition = condition
+      condition = formatQuickCondition(condition, 'name')
+      const temp = formatCondition(condition)
+      const param = temp || {}
+      param['orders'] = formatOrders(this.orderConditions)
+      const url = '/plugin/role/roleGrid/' + this.paginationConfig.currentPage + '/' + this.paginationConfig.pageSize
+      this.executeAxios(url, 'post', param, function(response) {
+        const data = response.data
+        _this.total = data.itemCount
+        _this.paginationConfig.total = data.itemCount
+        _this.tableData = data.listObject
+      })
+    },
+    handleDelete(row) {
+      const _this2 = this
+      //   this.$confirm(this.$t('commons.confirm_delete') + ': ' + row.name + '？', this.$t('role.tips'), {
+      this.$confirm(this.$t('role.confirm_delete') + ': ' + row.name + '？', this.$t('role.tips'), {
+        confirmButtonText: this.$t('commons.confirm'),
+        cancelButtonText: this.$t('commons.cancel'),
+        type: 'warning'
+      }).then(function() {
+        _this2.executeAxios('/plugin/role/delete/' + row.roleId, 'post', {}, function(res) {
+          //   this.$success(this.$t('commons.modify_success'))
+          _this2.$success(_this2.$t('commons.delete_success'))
+          _this2.search()
+        })
+      }).catch(function() {})
+    },
+    btnDisabled(row) {
+      return !row.updateTime
+    }
+  }
+}
+</script>
+
+<style scoped>
+.member-size {
+  text-decoration: underline;
+}
+
+.org-member-id {
+  float: left;
+}
+
+.org-member-email {
+  float: right;
+  color: #8492a6;
+  font-size: 13px;
+}
+
+.select-width {
+  width: 100%;
+}
+
+.dialog-css >>> .el-dialog__header {
+  padding: 0;
+}
+::v-deep .el-input-number .el-input__inner {
+  text-align: left;
+}
+::v-deep .vue-treeselect__control,
+::v-deep .vue-treeselect__placeholder,
+::v-deep .vue-treeselect__single-value {
+  height: 30px;
+  line-height: 30px;
+}
+</style>