diff --git a/report-ui/src/api/accessRole.js b/report-ui/src/api/accessRole.js
new file mode 100755
index 00000000..0c0a4a49
--- /dev/null
+++ b/report-ui/src/api/accessRole.js
@@ -0,0 +1,58 @@
+import request from '@/utils/request'
+
+export function accessRoleList (params) {
+  return request({
+    url: 'accessRole/pageList',
+    method: 'GET',
+    params,
+  })
+}
+
+export function accessRoleAdd (data) {
+  return request({
+    url: 'accessRole',
+    method: 'post',
+    data
+  })
+}
+
+export function accessRoleDeleteBatch (data) {
+  return request({
+    url: 'accessRole/delete/batch',
+    method: 'post',
+    data
+  })
+}
+
+export function accessRoleUpdate (data) {
+  return request({
+    url: 'accessRole',
+    method: 'put', data,
+  })
+}
+
+export function accessRoleDetail (data) {
+  return request({
+    url: 'accessRole/' + data.id,
+    method: 'get',
+    params: { accessKey: data.accessKey }
+  })
+}
+
+export function accessRoleAuthorityTree (roleCode) {
+  return request({
+    url: 'accessRole/authorityTree/' + roleCode,
+    method: 'get',
+  })
+}
+
+export function saveAuthorityTree (data) {
+  return request({
+    url: 'accessRole/saveAuthorityTree',
+    method: 'post',
+    data
+  })
+}
+
+
+export default { accessRoleList, accessRoleAdd, accessRoleDeleteBatch, accessRoleUpdate, accessRoleDetail, accessRoleAuthorityTree, saveAuthorityTree }
diff --git a/report-ui/src/views/accessRole/index.vue b/report-ui/src/views/accessRole/index.vue
new file mode 100755
index 00000000..c163eef2
--- /dev/null
+++ b/report-ui/src/views/accessRole/index.vue
@@ -0,0 +1,192 @@
+<template>
+  <anji-crud ref="listPage"
+             :option="crudOption">
+    <template v-slot:buttonLeftOnTable>
+    </template>
+
+    <template slot="rowButton"
+              slot-scope="props">
+      <el-button type="text"
+                 @click="handleOpenDialogSetAuthorityForRole(props)">设定权限</el-button>
+    </template>
+    <!--自定义的卡片插槽，将在编辑详情页面，出现在底部新卡片-->
+    <template v-slot:pageSection>
+      <RoleAuthority :role-code="roleCode"
+                     :visib="dialogVisibleSetAuthorityForRole"
+                     @handleClose="dialogVisibleSetAuthorityForRole = false" />
+    </template>
+  </anji-crud>
+</template>
+<script>
+import { accessRoleList, accessRoleAdd, accessRoleDeleteBatch, accessRoleUpdate, accessRoleDetail } from '@/api/accessRole'
+import RoleAuthority from '@/views/accessRole/components/RoleAuthority'
+export default {
+  name: 'AccessRole',
+  components: {
+    RoleAuthority: RoleAuthority,
+  },
+  data () {
+    return {
+      // 选中一个角色，点设定权限时，弹出对话框
+      dialogVisibleSetAuthorityForRole: false,
+      roleCode: '',
+
+      // 页面渲染使用
+      crudOption: {
+        // 使用菜单做为页面标题
+        title: '角色管理',
+        // 详情页中输入框左边文字宽度
+        labelWidth: '120px',
+        // 查询表单条件
+        queryFormFields: [
+          {
+            inputType: 'input',
+            label: '角色编码',
+            field: 'roleCode'
+          },
+          {
+            inputType: 'input',
+            label: '角色名称',
+            field: 'roleName'
+          },
+          {
+            inputType: 'anji-select', //form表单类型 input|input-number|anji-select(传递url或者dictCode)|anji-tree(左侧树)|date|datetime|datetimerange
+            anjiSelectOption: {
+              dictCode: 'ENABLE_FLAG',
+            },
+            label: '启用状态',
+            field: 'enableFlag',
+          },
+        ],
+        // 操作按钮
+        buttons: {
+          query: {
+            api: accessRoleList,
+            permission: 'AccessRole:PAGE'
+          },
+          queryByPrimarykey: {
+            api: accessRoleDetail,
+            permission: 'AccessRole:detail'
+          },
+          add: {
+            api: accessRoleAdd,
+            permission: 'AccessRole:insert'
+          },
+          delete: {
+            api: accessRoleDeleteBatch,
+            permission: 'AccessRole:delete'
+          },
+          edit: {
+            api: accessRoleUpdate,
+            permission: 'AccessRole:update'
+          },
+        },
+        // 表格列
+        columns: [
+          {
+            label: '',
+            field: 'id',
+            primaryKey: true, // 根据主键查询详情或者根据主键删除时, 主键的
+            tableHide: true, // 表格中不显示
+            editHide: true, // 编辑弹框中不显示
+          },
+          {
+            label: '角色编码',
+            placeholder: '',
+            field: 'roleCode',
+            editField: 'roleCode',
+            tableHide: true, // 表格中不显示
+            inputType: 'input',
+            rules: [
+              { required: true, message: '角色编码必填', trigger: 'blur' },
+              { min: 1, max: 32, message: '不超过32个字符', trigger: 'blur' }
+            ],
+            disabled: false,
+          },
+          {
+            label: '角色名称',
+            placeholder: '',
+            field: 'roleName',
+            fieldTableRowRenderer: (row) => {
+              return `${row['roleName']}[${row['roleCode']}]`
+            },
+            editField: 'roleName',
+            inputType: 'input',
+            rules: [
+              { required: true, message: '角色名称必填', trigger: 'blur' },
+              { min: 1, max: 64, message: '不超过64个字符', trigger: 'blur' }
+            ],
+            disabled: false,
+          },
+          {
+            label: '启用状态',//0--已禁用 1--已启用  DIC_NAME=ENABLE_FLAG
+            placeholder: '',
+            field: 'enableFlag',
+            fieldTableRowRenderer: (row) => {
+              return this.getDictLabelByCode('ENABLE_FLAG', row['enableFlag'])
+            },
+            editField: 'enableFlag',
+            inputType: 'anji-select',
+            anjiSelectOption: {
+              dictCode: 'ENABLE_FLAG', //指定数据字典
+            },
+            colorStyle: {
+              0: 'table-danger', //key为editField渲染的值（字典的提交值）'红色': 'danger','蓝色': 'primary','绿色': 'success','黄色': 'warning','灰色': 'info','白色'：''
+              1: 'table-success'
+            },
+            rules: [
+              { required: true, message: '启用状态必填', trigger: 'blur' },
+            ],
+            disabled: false,
+          },
+
+          {
+            label: '创建人',
+            placeholder: '',
+            field: 'createBy',
+            editField: 'createBy',
+            inputType: 'input',
+            editHide: 'hideOnAdd', // 编辑弹框中不显示 true/false/'hideOnAdd hideOnView hideOnEdit'
+            disabled: true,
+          },
+          {
+            label: '创建时间',
+            placeholder: '',
+            field: 'createTime',
+            editField: 'createTime',
+            inputType: 'input',
+            editHide: 'hideOnAdd', // 编辑弹框中不显示 true/false/'hideOnAdd hideOnView hideOnEdit'
+            disabled: true,
+          },
+          {
+            label: '修改人',
+            placeholder: '',
+            field: 'updateBy',
+            editField: 'updateBy',
+            inputType: 'input',
+            editHide: 'hideOnAdd', // 编辑弹框中不显示 true/false/'hideOnAdd hideOnView hideOnEdit'
+            disabled: true,
+          },
+          {
+            label: '修改时间',
+            placeholder: '',
+            field: 'updateTime',
+            editField: 'updateTime',
+            inputType: 'input',
+            editHide: 'hideOnAdd', // 编辑弹框中不显示 true/false/'hideOnAdd hideOnView hideOnEdit'
+            disabled: true,
+          },
+        ],
+      },
+    }
+  },
+  created () { },
+  methods: {
+    handleOpenDialogSetAuthorityForRole (props) {
+      this.roleCode = props.msg.roleCode
+      this.dialogVisibleSetAuthorityForRole = true
+    },
+  }
+}
+</script>
+
diff --git a/report-ui/src/views/accessUser/components/UserRole.vue b/report-ui/src/views/accessUser/components/UserRole.vue
new file mode 100644
index 00000000..89e15a08
--- /dev/null
+++ b/report-ui/src/views/accessUser/components/UserRole.vue
@@ -0,0 +1,86 @@
+<template>
+  <el-dialog class="tree_dialog"
+             title="授权角色"
+             width="60%"
+             :close-on-click-modal="false"
+             center
+             :visible.sync="visib"
+             :before-close="closeDialog">
+    <el-tree ref="roleTree"
+             :data="treeData"
+             show-checkbox
+             node-key="id"
+             default-expand-all
+             :default-checked-keys="checkedKeys" />
+    <div slot="footer"
+         style="text-align: center">
+      <el-button type="primary"
+                 plain
+                 @click="saveTreeData">保存</el-button>
+      <el-button type="danger"
+                 plain
+                 @click="closeDialog">取消</el-button>
+    </div>
+  </el-dialog>
+</template>
+<script>
+import { getRoleTree, saveRoleTree } from '@/api/accessUser'
+export default {
+  props: {
+    visib: {
+      required: true,
+      type: Boolean,
+      default: false,
+    },
+    loginName: {
+      required: true,
+      type: String,
+      default: () => {
+        return ''
+      },
+    },
+  },
+  data () {
+    return {
+      checkedKeys: [], // 当前选中的keys
+      treeData: [], // 所有的树结点
+    }
+  },
+  watch: {
+    visib (val) {
+      if (val) {
+        // 弹窗弹出时需要执行的逻辑
+        console.log(1)
+        this.getTreeData()
+      }
+    },
+  },
+  created () { },
+  methods: {
+    // 获取所有的树形结构数据
+    async getTreeData () {
+      const { code, data } = await getRoleTree(this.loginName)
+      if (code != '200') return
+      this.treeData = data.treeData
+      this.checkedKeys = data.checkedKeys
+    },
+
+    async saveTreeData () {
+      var params = {
+        loginName: this.loginName,
+        roleCodeList: this.$refs.roleTree.getCheckedKeys(true),
+      }
+      const { code } = await saveRoleTree(params)
+      if (code != '200') return
+      this.closeDialog()
+    },
+
+    // 弹窗关闭之前需要执行的逻辑
+    closeDialog () {
+      this.treeData = []
+      this.checkedKeys = []
+      this.$emit('handleClose')
+    },
+  },
+}
+</script>