diff --git a/ui/src/api/acl/permission.js b/ui/src/api/acl/permission.js
new file mode 100644
index 0000000..3d78a82
--- /dev/null
+++ b/ui/src/api/acl/permission.js
@@ -0,0 +1,56 @@
+import { axios } from '@/utils/request'
+
+const urlPrefix = '/v1/acl'
+
+export function getResourcePerms (resourceID) {
+  return axios({
+    url: urlPrefix + `/resources/${resourceID}/permissions`,
+    method: 'GET'
+  })
+}
+
+export function getResourceTypePerms (typeID) {
+  return axios({
+    url: urlPrefix + `/resource_types/${typeID}/perms`,
+    method: 'GET'
+  })
+}
+
+export function getResourceGroupPerms (resourceGroupID) {
+  return axios({
+    url: urlPrefix + `/resource_groups/${resourceGroupID}/permissions`,
+    method: 'GET'
+  })
+}
+
+export function setRoleResourcePerm (rid, resourceID, params) {
+  return axios({
+    url: urlPrefix + `/roles/${rid}/resources/${resourceID}/grant`,
+    method: 'POST',
+    data: params
+  })
+}
+
+export function setRoleResourceGroupPerm (rid, resourceGroupID, params) {
+  return axios({
+    url: urlPrefix + `/roles/${rid}/resource_groups/${resourceGroupID}/grant`,
+    method: 'POST',
+    data: params
+  })
+}
+
+export function deleteRoleResourcePerm (rid, resourceID, params) {
+  return axios({
+    url: urlPrefix + `/roles/${rid}/resources/${resourceID}/revoke`,
+    method: 'POST',
+    data: params
+  })
+}
+
+export function deleteRoleResourceGroupPerm (rid, resourceGroupID, params) {
+  return axios({
+    url: urlPrefix + `/roles/${rid}/resource_groups/${resourceGroupID}/revoke`,
+    method: 'POST',
+    data: params
+  })
+}
diff --git a/ui/src/views/cmdb/acl/module/permissionForm.vue b/ui/src/views/cmdb/acl/module/permissionForm.vue
new file mode 100644
index 0000000..c7be895
--- /dev/null
+++ b/ui/src/views/cmdb/acl/module/permissionForm.vue
@@ -0,0 +1,238 @@
+<template>
+  <a-drawer
+    :closable="false"
+    :title="drawerTitle"
+    :visible="drawerVisible"
+    @close="onClose"
+    placement="right"
+    width="30%"
+  >
+
+    <a-form :form="form" :layout="formLayout" @submit="handleSubmit">
+
+      <a-form-item
+        :label-col="formItemLayout.labelCol"
+        :wrapper-col="formItemLayout.wrapperCol"
+        label="类型名"
+      >
+        <a-input
+          name="name"
+          placeholder=""
+          v-decorator="['name', {rules: [{ required: true, message: '请输入资源名'}]} ]"
+        />
+      </a-form-item>
+
+      <a-form-item
+        :label-col="formItemLayout.labelCol"
+        :wrapper-col="formItemLayout.wrapperCol"
+        label="描述"
+      >
+        <a-textarea placeholder="请输入描述信息..." name="description" :rows="4" />
+      </a-form-item>
+
+      <a-form-item
+        :label-col="formItemLayout.labelCol"
+        :wrapper-col="formItemLayout.wrapperCol"
+        label="权限"
+      >
+        <div :style="{ borderBottom: '1px solid #E9E9E9' }">
+          <a-checkbox :indeterminate="indeterminate" @change="onCheckAllChange" :checked="checkAll">
+            全选
+          </a-checkbox>
+        </div>
+        <br />
+        <a-checkbox-group :options="plainOptions" v-model="perms" @change="onPermChange" />
+
+      </a-form-item>
+
+      <a-form-item>
+        <a-input
+          name="id"
+          type="hidden"
+          v-decorator="['id', {rules: []} ]"
+        />
+      </a-form-item>
+
+      <div
+        :style="{
+          position: 'absolute',
+          left: 0,
+          bottom: 0,
+          width: '100%',
+          borderTop: '1px solid #e9e9e9',
+          padding: '0.8rem 1rem',
+          background: '#fff',
+
+        }"
+      >
+        <a-button @click="handleSubmit" type="primary" style="margin-right: 1rem">确定</a-button>
+        <a-button @click="onClose">取消</a-button>
+
+      </div>
+
+    </a-form>
+  </a-drawer>
+
+</template>
+
+<script>
+import { STable } from '@/components'
+import { addResourceType, updateResourceTypeById } from '@/api/acl/resource'
+
+export default {
+  name: 'ResourceForm',
+  components: {
+    STable
+  },
+  data () {
+    return {
+      drawerTitle: '新增资源类型',
+      drawerVisible: false,
+      formLayout: 'vertical',
+      perms: ['1'],
+      indeterminate: true,
+      checkAll: false,
+      plainOptions: ['1', '2']
+    }
+  },
+
+  beforeCreate () {
+    this.form = this.$form.createForm(this)
+  },
+
+  computed: {
+
+    formItemLayout () {
+      const { formLayout } = this
+      return formLayout === 'horizontal' ? {
+        labelCol: { span: 4 },
+        wrapperCol: { span: 14 }
+      } : {}
+    },
+
+    horizontalFormItemLayout () {
+      return {
+        labelCol: { span: 5 },
+        wrapperCol: { span: 12 }
+      }
+    },
+    buttonItemLayout () {
+      const { formLayout } = this
+      return formLayout === 'horizontal' ? {
+        wrapperCol: { span: 14, offset: 4 }
+      } : {}
+    }
+
+  },
+  mounted () {
+  },
+  methods: {
+    onPermChange (perms) {
+      this.indeterminate = !!perms.length && perms.length < this.plainOptions.length
+      this.checkAll = perms.length === this.plainOptions.length
+    },
+    onCheckAllChange (e) {
+      Object.assign(this, {
+        perms: e.target.checked ? this.plainOptions : [],
+        indeterminate: false,
+        checkAll: e.target.checked
+      })
+    },
+    handleCreate () {
+      this.drawerVisible = true
+    },
+    onClose () {
+      this.form.resetFields()
+      this.drawerVisible = false
+    },
+    onChange (e) {
+      console.log(`checked = ${e}`)
+    },
+
+    handleEdit (record) {
+      this.drawerVisible = true
+      console.log(record)
+      this.$nextTick(() => {
+        this.form.setFieldsValue({
+          id: record.id,
+          name: record.name,
+          description: record.description
+        })
+      })
+    },
+
+    handleSubmit (e) {
+      e.preventDefault()
+      this.form.validateFields((err, values) => {
+        if (!err) {
+          console.log('Received values of form: ', values)
+
+          values.app_id = this.$store.state.app.name
+          values.perms = this.perms
+          if (values.id) {
+            this.updateResourceType(values.id, values)
+          } else {
+            this.createResourceType(values)
+          }
+        }
+      })
+    },
+    updateResourceType (id, data) {
+      updateResourceTypeById(id, data)
+        .then(res => {
+          this.$message.success(`更新成功`)
+          this.handleOk()
+          this.onClose()
+        }).catch(err => this.requestFailed(err))
+    },
+
+    createResourceType (data) {
+      addResourceType(data)
+        .then(res => {
+          this.$message.success(`添加成功`)
+          this.handleOk()
+          this.onClose()
+        })
+        .catch(err => this.requestFailed(err))
+    },
+
+    requestFailed (err) {
+      const msg = ((err.response || {}).data || {}).message || '请求出现错误，请稍后再试'
+      this.$message.error(`${msg}`)
+    }
+
+  },
+  watch: {},
+  props: {
+    handleOk: {
+      type: Function,
+      default: null
+    }
+  }
+
+}
+</script>
+
+<style lang="less" scoped>
+  .search {
+    margin-bottom: 54px;
+  }
+
+  .fold {
+    width: calc(100% - 216px);
+    display: inline-block
+  }
+
+  .operator {
+    margin-bottom: 18px;
+  }
+  .action-btn {
+    margin-bottom: 1rem;
+  }
+
+  @media screen and (max-width: 900px) {
+    .fold {
+      width: 100%;
+    }
+  }
+</style>
diff --git a/ui/src/views/cmdb/acl/module/resourcePermForm.vue b/ui/src/views/cmdb/acl/module/resourcePermForm.vue
new file mode 100644
index 0000000..b5d7966
--- /dev/null
+++ b/ui/src/views/cmdb/acl/module/resourcePermForm.vue
@@ -0,0 +1,211 @@
+<template>
+
+  <a-modal
+    :title="drawerTitle"
+    v-model="drawerVisible"
+    width="50%"
+  >
+    <template slot="footer">
+      <a-button type="primary" @click="showChildrenDrawer">
+        添加权限
+      </a-button>
+      <a-button key="back" @click="handleCancel">关闭</a-button>
+    </template>
+
+    <template>
+
+      <a-list itemLayout="horizontal" :dataSource="resPerms">
+        <a-list-item slot="renderItem" slot-scope="item">
+          <span>{{ item[0] }}：  </span>
+          <div>
+            <a-tag color="cyan" v-for="perm in item[1]" :key="perm.rid" closable @close="deletePerm(perm.rid, perm.name)">{{ perm.name }}</a-tag>
+          </div>
+        </a-list-item>
+      </a-list>
+    </template>
+
+    <a-drawer
+      title="添加权限"
+      width="30%"
+      :closable="false"
+      @close="onChildrenDrawerClose"
+      :visible="childrenDrawer"
+    >
+      <a-form :form="form" @submit="handleSubmit">
+        <a-form-item
+          label="角色列表"
+        >
+          <a-select name="roleID" v-decorator="['roleID', {rules: []} ]">
+            <a-select-option v-for="role in allRoles" :key="role.id">{{ role.name }}</a-select-option>
+          </a-select>
+        </a-form-item>
+
+        <a-form-item
+          label="权限列表"
+        >
+          <a-select name="permName" v-decorator="['permName', {rules: []} ]">
+            <a-select-option v-for="perm in allPerms" :key="perm.name">{{ perm.name }}</a-select-option>
+          </a-select>
+        </a-form-item>
+        <div
+          :style="{
+            position: 'absolute',
+            left: 0,
+            bottom: 0,
+            width: '100%',
+            borderTop: '1px solid #e9e9e9',
+            padding: '0.8rem 1rem',
+            background: '#fff',
+
+          }"
+        >
+          <a-button @click="handleSubmit" type="primary" style="margin-right: 1rem">添加</a-button>
+          <a-button @click="onChildrenDrawerClose">取消</a-button>
+
+        </div>
+
+      </a-form>
+    </a-drawer>
+
+  </a-modal>
+
+</template>
+
+<script>
+import { STable } from '@/components'
+import { getResourceTypePerms, getResourcePerms, deleteRoleResourcePerm, setRoleResourcePerm } from '@/api/acl/permission'
+import { searchRole } from '@/api/acl/role'
+
+export default {
+  name: 'ResourceForm',
+  components: {
+    STable
+  },
+  data () {
+    return {
+      drawerTitle: '权限列表',
+      drawerVisible: false,
+      record: null,
+      allPerms: [],
+      resPerms: [],
+      roleID: null,
+      childrenDrawer: false,
+      allRoles: []
+    }
+  },
+
+  beforeCreate () {
+    this.form = this.$form.createForm(this)
+  },
+
+  computed: {
+  },
+  mounted () {
+  },
+  methods: {
+    showChildrenDrawer () {
+      this.childrenDrawer = true
+    },
+    onChildrenDrawerClose () {
+      this.childrenDrawer = false
+    },
+    handlePerm (record) {
+      this.drawerVisible = true
+      this.record = record
+      this.getResPerms(record.id)
+
+      this.$nextTick(() => {
+        this.getAllRoles()
+        this.getAllPerms(record.resource_type_id)
+      })
+    },
+    getResPerms (resId) {
+      getResourcePerms(resId).then(res => {
+        var perms = []
+        for (var key in res) {
+          perms.push([key, res[key]])
+        }
+        this.resPerms = perms
+      })
+    },
+    getAllPerms (resTypeId) {
+      getResourceTypePerms(resTypeId).then(res => {
+        this.allPerms = res
+      })
+    },
+    deletePerm (roleID, permName) {
+      deleteRoleResourcePerm(roleID, this.record.id, [permName]).then(res => {
+        this.$message.success(`删除成功`)
+        this.handleOk()
+      })
+        .catch(err => this.requestFailed(err))
+    },
+    addPerm (roleID, permName) {
+      setRoleResourcePerm(roleID, this.record.id, [permName]).then(res => {
+        this.$message.success(`添加成功`)
+        this.handleOk()
+      })
+        .catch(err => this.requestFailed(err))
+    },
+
+    handleSubmit (e) {
+      e.preventDefault()
+      this.form.validateFields((err, values) => {
+        if (!err) {
+          console.log('Received values of form: ', values)
+          this.addPerm(values.roleID, values.permName)
+        }
+      })
+    },
+    getAllRoles () {
+      searchRole({ page_size: 9999, app_id: this.$store.state.app.name }).then(res => {
+        this.allRoles = res.roles
+      })
+    },
+    handleCreate () {
+      this.drawerVisible = true
+    },
+    handleCancel (e) {
+      this.drawerVisible = false
+    },
+
+    requestFailed (err) {
+      const msg = ((err.response || {}).data || {}).message || '请求出现错误，请稍后再试'
+      this.$message.error(`${msg}`)
+    }
+
+  },
+  watch: {},
+  props: {
+    handleOk: {
+      type: Function,
+      default: null
+    }
+  }
+
+}
+</script>
+
+<style lang="less" scoped>
+  .search {
+    margin-bottom: 54px;
+  }
+
+  .fold {
+    width: calc(100% - 216px);
+    display: inline-block
+  }
+
+  .operator {
+    margin-bottom: 18px;
+  }
+  .action-btn {
+    margin-bottom: 1rem;
+  }
+
+  @media screen and (max-width: 900px) {
+    .fold {
+      width: 100%;
+    }
+  }
+</style>
diff --git a/ui/src/views/cmdb/acl/permissions.vue b/ui/src/views/cmdb/acl/permissions.vue
new file mode 100644
index 0000000..592fe2b
--- /dev/null
+++ b/ui/src/views/cmdb/acl/permissions.vue
@@ -0,0 +1,311 @@
+<template>
+  <a-card :bordered="false">
+
+    <div class="action-btn">
+      <a-button @click="handleCreate" type="primary" style="margin-right: 0.3rem;">{{ btnName }}</a-button>
+    </div>
+
+    <s-table
+      :alert="options.alert"
+      :columns="columns"
+      :data="loadData"
+      :rowKey="record=>record.id"
+      :rowSelection="options.rowSelection"
+      :scroll="scroll"
+      :pagination="{ showTotal: (total, range) => `${range[0]}-${range[1]} 共 ${total} 条记录`, pageSizeOptions: pageSizeOptions}"
+      showPagination="auto"
+      :pageSize="25"
+      ref="table"
+      size="middle"
+
+    >
+      <div slot="filterDropdown" slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }" class="custom-filter-dropdown">
+        <a-input
+          v-ant-ref="c => searchInput = c"
+          :placeholder="` ${column.title}`"
+          :value="selectedKeys[0]"
+          @change="e => setSelectedKeys(e.target.value ? [e.target.value] : [])"
+          @pressEnter="() => handleSearch(selectedKeys, confirm, column)"
+          style="width: 188px; margin-bottom: 8px; display: block;"
+        />
+        <a-button
+          type="primary"
+          @click="() => handleSearch(selectedKeys, confirm, column)"
+          icon="search"
+          size="small"
+          style="width: 90px; margin-right: 8px"
+        >搜索</a-button>
+        <a-button
+          @click="() => handleReset(clearFilters, column)"
+          size="small"
+          style="width: 90px"
+        >重置</a-button>
+      </div>
+      <a-icon slot="filterIcon" slot-scope="filtered" type="search" :style="{ color: filtered ? '#108ee9' : undefined }" />
+
+      <template slot="nameSearchRender" slot-scope="text">
+        <span v-if="columnSearchText.name">
+          <template v-for="(fragment, i) in text.toString().split(new RegExp(`(?<=${columnSearchText.name})|(?=${columnSearchText.name})`, 'i'))">
+            <mark v-if="fragment.toLowerCase() === columnSearchText.name.toLowerCase()" :key="i" class="highlight">{{ fragment }}</mark>
+            <template v-else>{{ fragment }}</template>
+          </template>
+        </span>
+        <template v-else>{{ text }}</template>
+      </template>
+
+      <template slot="description" slot-scope="text">{{ text }}</template>
+
+      <span slot="id" slot-scope="key">
+        <a-tag color="cyan" v-for="perm in id2perms[key]" :key="perm.id">{{ perm.name }}</a-tag>
+      </span>
+
+      <span slot="action" slot-scope="text, record">
+        <template>
+          <a @click="handleEdit(record)">编辑</a>
+          <a-divider type="vertical"/>
+
+          <a-popconfirm
+            title="确认删除?"
+            @confirm="handleDelete(record)"
+            @cancel="cancel"
+            okText="是"
+            cancelText="否"
+          >
+            <a>删除</a>
+          </a-popconfirm>
+        </template>
+      </span>
+
+    </s-table>
+    <resourceTypeForm ref="resourceTypeForm" :handleOk="handleOk"> </resourceTypeForm>
+
+  </a-card>
+</template>
+
+<script>
+import { STable } from '@/components'
+import resourceTypeForm from './module/resourceTypeForm'
+import { deleteResourceTypeById, searchResourceType } from '@/api/acl/resource'
+
+export default {
+  name: 'Index',
+  components: {
+    STable,
+    resourceTypeForm
+  },
+  data () {
+    return {
+      id2perms: {},
+      scroll: { x: 1000, y: 500 },
+      btnName: '新增资源类型',
+
+      formLayout: 'vertical',
+
+      pageSizeOptions: ['10', '25', '50', '100'],
+
+      columnSearchText: {
+        alias: '',
+        name: ''
+      },
+      columns: [
+        {
+          title: '类型名',
+          dataIndex: 'name',
+          sorter: false,
+          width: 50,
+          scopedSlots: {
+            customRender: 'nameSearchRender',
+            filterDropdown: 'filterDropdown',
+            filterIcon: 'filterIcon'
+          },
+          onFilter: (value, record) => record.name && record.name.toLowerCase().includes(value.toLowerCase()),
+          onFilterDropdownVisibleChange: (visible) => {
+            if (visible) {
+              setTimeout(() => {
+                this.searchInput.focus()
+              }, 0)
+            }
+          }
+        },
+        {
+          title: '描述',
+          dataIndex: 'description',
+          width: 250,
+          sorter: false,
+          scopedSlots: { customRender: 'description' }
+        },
+        {
+          title: '权限',
+          dataIndex: 'id',
+          sorter: false,
+          scopedSlots: { customRender: 'id' }
+        },
+        {
+          title: '操作',
+          dataIndex: 'action',
+          width: 150,
+          fixed: 'right',
+          scopedSlots: { customRender: 'action' }
+        }
+      ],
+      loadData: parameter => {
+        parameter.app_id = this.$store.state.app.name
+        parameter.page = parameter.pageNo
+        parameter.page_size = parameter.pageSize
+        delete parameter.pageNo
+        delete parameter.pageSize
+        Object.assign(parameter, this.queryParam)
+        console.log('loadData.parameter', parameter)
+
+        return searchResourceType(parameter)
+          .then(res => {
+            res.pageNo = res.page
+            res.pageSize = res.total
+            res.totalCount = res.numfound
+            res.totalPage = Math.ceil(res.numfound / parameter.pageSize)
+            res.data = res.groups
+            this.id2perms = res.id2perms
+            console.log('loadData.res', res)
+            return res
+          })
+      },
+
+      mdl: {},
+      // 高级搜索 展开/关闭
+      advanced: false,
+      // 查询参数
+      queryParam: {},
+      // 表头
+
+      selectedRowKeys: [],
+      selectedRows: [],
+
+      // custom table alert & rowSelection
+      options: {
+        alert: false,
+        rowSelection: null
+      },
+      optionAlertShow: false
+
+    }
+  },
+
+  beforeCreate () {
+    this.form = this.$form.createForm(this)
+  },
+
+  computed: {
+
+    formItemLayout () {
+      const { formLayout } = this
+      return formLayout === 'horizontal' ? {
+        labelCol: { span: 4 },
+        wrapperCol: { span: 14 }
+      } : {}
+    },
+
+    horizontalFormItemLayout () {
+      return {
+        labelCol: { span: 5 },
+        wrapperCol: { span: 12 }
+      }
+    },
+    buttonItemLayout () {
+      const { formLayout } = this
+      return formLayout === 'horizontal' ? {
+        wrapperCol: { span: 14, offset: 4 }
+      } : {}
+    }
+
+  },
+  mounted () {
+    this.setScrollY()
+  },
+  inject: ['reload'],
+
+  methods: {
+    handleSearch (selectedKeys, confirm, column) {
+      confirm()
+      this.columnSearchText[column.dataIndex] = selectedKeys[0]
+      this.queryParam[column.dataIndex] = selectedKeys[0]
+    },
+
+    handleReset (clearFilters, column) {
+      clearFilters()
+      this.columnSearchText[column.dataIndex] = ''
+      this.queryParam[column.dataIndex] = ''
+    },
+
+    setScrollY () {
+      this.scroll.y = window.innerHeight - this.$refs.table.$el.offsetTop - 200
+    },
+
+    handleEdit (record) {
+      this.$refs.resourceTypeForm.handleEdit(record)
+    },
+    handleDelete (record) {
+      this.deleteResourceType(record.id)
+    },
+    handleOk () {
+      this.$refs.table.refresh()
+    },
+
+    handleCreate () {
+      this.$refs.resourceTypeForm.handleCreate()
+    },
+
+    deleteResourceType (id) {
+      deleteResourceTypeById(id)
+        .then(res => {
+          this.$message.success(`删除成功`)
+          this.handleOk()
+        })
+        .catch(err => this.requestFailed(err))
+    },
+    requestFailed (err) {
+      const msg = ((err.response || {}).data || {}).message || '请求出现错误，请稍后再试'
+      this.$message.error(`${msg}`)
+    },
+    cancel () {
+
+    }
+
+  },
+  watch: {}
+
+}
+</script>
+
+<style lang="less" scoped>
+  .search {
+    margin-bottom: 54px;
+  }
+
+  .fold {
+    width: calc(100% - 216px);
+    display: inline-block
+  }
+
+  .operator {
+    margin-bottom: 18px;
+  }
+  .action-btn {
+    margin-bottom: 1rem;
+  }
+  .custom-filter-dropdown {
+    padding: 8px;
+    border-radius: 4px;
+    background: #fff;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
+  }
+
+  .highlight {
+    background-color: rgb(255, 192, 105);
+    padding: 0px;
+  }
+  @media screen and (max-width: 900px) {
+    .fold {
+      width: 100%;
+    }
+  }
+</style>
diff --git a/ui/src/views/cmdb/acl/roles.vue b/ui/src/views/cmdb/acl/roles.vue
index 7499382..d947a75 100644
--- a/ui/src/views/cmdb/acl/roles.vue
+++ b/ui/src/views/cmdb/acl/roles.vue
@@ -281,8 +281,8 @@ export default {
       const msg = ((err.response || {}).data || {}).message || '请求出现错误，请稍后再试'
       this.$message.error(`${msg}`)
     },
-    cancel () {
-
+    cancel (e) {
+      return false
     }
 
   },
diff --git a/ui/src/views/cmdb/acl/users.vue b/ui/src/views/cmdb/acl/users.vue
index 7f4581e..7099751 100644
--- a/ui/src/views/cmdb/acl/users.vue
+++ b/ui/src/views/cmdb/acl/users.vue
@@ -279,8 +279,10 @@ export default {
       return formLayout === 'horizontal' ? {
         wrapperCol: { span: 14, offset: 4 }
       } : {}
+    },
+    cancel () {
+      return false
     }
-
   },
   mounted () {
     this.setScrollY()