From 6c70ec6d538c8b8f82ce46570d13fe29ef004056 Mon Sep 17 00:00:00 2001
From: kdyq007 <kdyq@vip.qq.com>
Date: Sun, 17 Nov 2019 17:09:24 +0800
Subject: [PATCH] =?UTF-8?q?[=E6=9B=B4=E6=96=B0]=20=E5=AE=8C=E6=88=90roles?=
 =?UTF-8?q?=E5=9F=BA=E6=9C=AC=E6=8E=A5=E5=8F=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 api/models/acl.py                             |   2 +-
 ui/package.json                               |   9 +-
 ui/src/api/acl/app.js                         |  34 ++
 ui/src/api/acl/resource.js                    |  34 ++
 ui/src/api/acl/role.js                        |  34 ++
 ui/src/api/acl/user.js                        |   8 +-
 ui/src/config/router.config.js                |   6 +-
 ui/src/views/cmdb/acl/module/resourceForm.vue | 218 ++++++++++++
 ui/src/views/cmdb/acl/module/roleForm.vue     | 221 ++++++++++++
 ui/src/views/cmdb/acl/module/userForm.vue     |   3 +-
 ui/src/views/cmdb/acl/resources.vue           | 333 +++++++++++++++++-
 ui/src/views/cmdb/acl/roles.vue               | 333 +++++++++++++++++-
 ui/src/views/cmdb/acl/users.vue               |  16 +-
 13 files changed, 1223 insertions(+), 28 deletions(-)
 create mode 100644 ui/src/api/acl/app.js
 create mode 100644 ui/src/api/acl/resource.js
 create mode 100644 ui/src/api/acl/role.js
 create mode 100644 ui/src/views/cmdb/acl/module/resourceForm.vue
 create mode 100644 ui/src/views/cmdb/acl/module/roleForm.vue

diff --git a/api/models/acl.py b/api/models/acl.py
index d1b3056..79328f7 100644
--- a/api/models/acl.py
+++ b/api/models/acl.py
@@ -68,7 +68,7 @@ class UserQuery(BaseQuery):
 
 class User(CRUDModel):
     __tablename__ = 'users'
-    __bind_key__ = "user"
+    # __bind_key__ = "user"
     query_class = UserQuery
 
     uid = db.Column(db.Integer, primary_key=True, autoincrement=True)
diff --git a/ui/package.json b/ui/package.json
index 43220ed..0f71589 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -13,10 +13,14 @@
   },
   "dependencies": {
     "@antv/data-set": "^0.10.2",
+    "@handsontable-pro/vue": "^3.1.1",
+    "@handsontable/vue": "^4.1.1",
     "ant-design-vue": "^1.4.2",
     "axios": "^0.19.0",
     "core-js": "^3.1.2",
     "enquire.js": "^2.1.6",
+    "handsontable": "^7.2.2",
+    "handsontable-pro": "^6.2.3",
     "js-cookie": "^2.2.0",
     "json2csv": "^4.5.2",
     "lodash.get": "^4.4.2",
@@ -37,10 +41,7 @@
     "vuex": "^3.1.1",
     "wangeditor": "^3.1.1",
     "xlsx": "latest",
-    "@handsontable-pro/vue": "^3.1.1",
-    "@handsontable/vue": "^4.1.1",
-    "handsontable": "^7.2.2",
-    "handsontable-pro": "^6.2.3"
+    "yarn": "^1.19.1"
   },
   "devDependencies": {
     "@ant-design/colors": "^3.2.1",
diff --git a/ui/src/api/acl/app.js b/ui/src/api/acl/app.js
new file mode 100644
index 0000000..c134f36
--- /dev/null
+++ b/ui/src/api/acl/app.js
@@ -0,0 +1,34 @@
+import { axios } from '@/utils/request'
+
+const urlPrefix = '/v1/acl'
+
+export function searchRole (params) {
+  return axios({
+    url: urlPrefix + `/roles`,
+    method: 'GET',
+    params: params
+  })
+}
+
+export function addRole (params) {
+  return axios({
+    url: urlPrefix + '/roles',
+    method: 'POST',
+    data: params
+  })
+}
+
+export function updateRoleById (id, params) {
+  return axios({
+    url: urlPrefix + `/roles/${id}`,
+    method: 'PUT',
+    data: params
+  })
+}
+
+export function deleteRoleById (id) {
+  return axios({
+    url: urlPrefix + `/roles/${id}`,
+    method: 'DELETE'
+  })
+}
diff --git a/ui/src/api/acl/resource.js b/ui/src/api/acl/resource.js
new file mode 100644
index 0000000..106562a
--- /dev/null
+++ b/ui/src/api/acl/resource.js
@@ -0,0 +1,34 @@
+import { axios } from '@/utils/request'
+
+const urlPrefix = '/v1/acl'
+
+export function searchResource (params) {
+  return axios({
+    url: urlPrefix + `/resources`,
+    method: 'GET',
+    params: params
+  })
+}
+
+export function addResource (params) {
+  return axios({
+    url: urlPrefix + '/resources',
+    method: 'POST',
+    data: params
+  })
+}
+
+export function updateResourceById (id, params) {
+  return axios({
+    url: urlPrefix + `/resources/${id}`,
+    method: 'PUT',
+    data: params
+  })
+}
+
+export function deleteResourceById (id) {
+  return axios({
+    url: urlPrefix + `/resources/${id}`,
+    method: 'DELETE'
+  })
+}
diff --git a/ui/src/api/acl/role.js b/ui/src/api/acl/role.js
new file mode 100644
index 0000000..c134f36
--- /dev/null
+++ b/ui/src/api/acl/role.js
@@ -0,0 +1,34 @@
+import { axios } from '@/utils/request'
+
+const urlPrefix = '/v1/acl'
+
+export function searchRole (params) {
+  return axios({
+    url: urlPrefix + `/roles`,
+    method: 'GET',
+    params: params
+  })
+}
+
+export function addRole (params) {
+  return axios({
+    url: urlPrefix + '/roles',
+    method: 'POST',
+    data: params
+  })
+}
+
+export function updateRoleById (id, params) {
+  return axios({
+    url: urlPrefix + `/roles/${id}`,
+    method: 'PUT',
+    data: params
+  })
+}
+
+export function deleteRoleById (id) {
+  return axios({
+    url: urlPrefix + `/roles/${id}`,
+    method: 'DELETE'
+  })
+}
diff --git a/ui/src/api/acl/user.js b/ui/src/api/acl/user.js
index 37e55c8..f81a43f 100644
--- a/ui/src/api/acl/user.js
+++ b/ui/src/api/acl/user.js
@@ -1,6 +1,6 @@
 import { axios } from '@/utils/request'
 
-const urlPrefix = '/v0.1'
+const urlPrefix = '/v1/acl'
 
 export function currentUser () {
   return axios({
@@ -11,8 +11,9 @@ export function currentUser () {
 
 export function searchUser (params) {
   return axios({
-    url: urlPrefix + `/users?${params}`,
-    method: 'GET'
+    url: urlPrefix + `/users`,
+    method: 'GET',
+    data: params
   })
 }
 
@@ -38,4 +39,3 @@ export function deleteUserById (id) {
     method: 'DELETE'
   })
 }
-
diff --git a/ui/src/config/router.config.js b/ui/src/config/router.config.js
index ec48c6f..be7ab04 100644
--- a/ui/src/config/router.config.js
+++ b/ui/src/config/router.config.js
@@ -78,21 +78,21 @@ const cmdbRouter = [
         name: 'acl_users',
         hideChildrenInMenu: true,
         component: () => import('@/views/cmdb/acl/users'),
-        meta: { title: 'Users', keepAlive: true }
+        meta: { title: '用户管理', keepAlive: true }
       },
       {
         path: '/acl/roles',
         name: 'acl_roles',
         hideChildrenInMenu: true,
         component: () => import('@/views/cmdb/acl/roles'),
-        meta: { title: 'Roles', keepAlive: true }
+        meta: { title: '角色管理', keepAlive: true }
       },
       {
         path: '/acl/resources',
         name: 'acl_resources',
         hideChildrenInMenu: true,
         component: () => import('@/views/cmdb/acl/resources'),
-        meta: { title: 'Resources', keepAlive: true }
+        meta: { title: '资源管理', keepAlive: true }
       }
     ]
   }
diff --git a/ui/src/views/cmdb/acl/module/resourceForm.vue b/ui/src/views/cmdb/acl/module/resourceForm.vue
new file mode 100644
index 0000000..556f666
--- /dev/null
+++ b/ui/src/views/cmdb/acl/module/resourceForm.vue
@@ -0,0 +1,218 @@
+<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-select name="app_id" default-value="1" v-decorator="['app_id', {rules: []} ]">
+          <a-select-option value="1">默认应用</a-select-option>
+        </a-select>
+      </a-form-item>
+      <a-form-item
+        :label-col="formItemLayout.labelCol"
+        :wrapper-col="formItemLayout.wrapperCol"
+        label="资源类型"
+      >
+        <a-select name="resource_type_id" default-value="1" v-decorator="['resource_type_id', {rules: []} ]">
+          <a-select-option value="1">默认资源类型</a-select-option>
+        </a-select>
+      </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 { addResource, updateResourceById } from '@/api/acl/resource'
+
+export default {
+  name: 'ResourceForm',
+  components: {
+    STable
+  },
+  data () {
+    return {
+      drawerTitle: '新增资源',
+      drawerVisible: false,
+      formLayout: 'vertical'
+    }
+  },
+
+  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: {
+
+    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,
+          app_id: record.app_id,
+          resource_type_id: record.resource_type_id
+        })
+      })
+    },
+
+    handleSubmit (e) {
+      e.preventDefault()
+      this.form.validateFields((err, values) => {
+        if (!err) {
+          console.log('Received values of form: ', values)
+
+          if (values.id) {
+            this.updateResource(values.id, values)
+          } else {
+            this.createResource(values)
+          }
+        }
+      })
+    },
+    updateResource (id, data) {
+      updateResourceById(id, data)
+        .then(res => {
+          this.$message.success(`更新成功`)
+          this.handleOk()
+          this.onClose()
+        }).catch(err => this.requestFailed(err))
+    },
+
+    createResource (data) {
+      addResource(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/roleForm.vue b/ui/src/views/cmdb/acl/module/roleForm.vue
new file mode 100644
index 0000000..37917a9
--- /dev/null
+++ b/ui/src/views/cmdb/acl/module/roleForm.vue
@@ -0,0 +1,221 @@
+<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-select name="app_id" default-value="1" v-decorator="['app_id', {rules: []} ]">
+          <a-select-option value="1">默认应用</a-select-option>
+        </a-select>
+      </a-form-item>
+
+      <a-form-item
+        :label-col="horizontalFormItemLayout.labelCol"
+        :wrapper-col="horizontalFormItemLayout.wrapperCol"
+        label="是否应用管理员"
+      >
+        <a-switch
+          @change="onChange"
+          name="is_app_admin"
+          v-decorator="['is_app_admin', {rules: [], valuePropName: 'checked',} ]"
+        />
+      </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 { addRole, updateRoleById } from '@/api/acl/role'
+
+export default {
+  name: 'RoleForm',
+  components: {
+    STable
+  },
+  data () {
+    return {
+      drawerTitle: '新增角色',
+      drawerVisible: false,
+      formLayout: 'vertical'
+    }
+  },
+
+  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: {
+
+    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,
+          app_id: record.app_id,
+          is_app_admin: record.is_app_admin
+        })
+      })
+    },
+
+    handleSubmit (e) {
+      e.preventDefault()
+      this.form.validateFields((err, values) => {
+        if (!err) {
+          console.log('Received values of form: ', values)
+
+          if (values.id) {
+            this.updateRole(values.id, values)
+          } else {
+            this.createRole(values)
+          }
+        }
+      })
+    },
+    updateRole (id, data) {
+      updateRoleById(id, data)
+        .then(res => {
+          this.$message.success(`更新成功`)
+          this.handleOk()
+          this.onClose()
+        }).catch(err => this.requestFailed(err))
+    },
+
+    createRole (data) {
+      addRole(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/userForm.vue b/ui/src/views/cmdb/acl/module/userForm.vue
index 20bba40..a76863f 100644
--- a/ui/src/views/cmdb/acl/module/userForm.vue
+++ b/ui/src/views/cmdb/acl/module/userForm.vue
@@ -129,10 +129,9 @@ export default {
   },
   data () {
     return {
-
       drawerTitle: '新增用户',
       drawerVisible: false,
-      formLayout: 'vertical',
+      formLayout: 'vertical'
     }
   },
 
diff --git a/ui/src/views/cmdb/acl/resources.vue b/ui/src/views/cmdb/acl/resources.vue
index 6d9c248..c3eb9eb 100644
--- a/ui/src/views/cmdb/acl/resources.vue
+++ b/ui/src/views/cmdb/acl/resources.vue
@@ -1,10 +1,337 @@
 <template>
-  <div></div>
+  <a-card :bordered="false">
+    <a-form layout="inline">
+      <a-row :gutter="48">
+        <a-col :md="3" :sm="24">
+          <div class="action-btn">
+            <a-button @click="handleCreate" type="primary" style="margin-right: 0.3rem;">{{ btnName }}</a-button>
+          </div>
+        </a-col>
+        <a-col :md="8" :sm="24">
+          <a-form-item label="应用列表">
+            <a-select placeholder="请选择" v-model="queryParam.app_id">
+              <a-select-option v-for="app in appList" :key="app.id" :label="app.name" :value="app.id">{{ app.name }}</a-select-option>
+            </a-select>
+          </a-form-item>
+        </a-col>
+      </a-row>
+    </a-form>
+
+    <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>
+
+      <span slot="app_id" slot-scope="text">
+        <template>{{ text }}</template>
+      </span>
+
+      <span slot="resource_type_id" slot-scope="text">
+        <a-icon type="check" v-if="text"/>
+      </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>
+    <resourceForm ref="resourceForm" :handleOk="handleOk"> </resourceForm>
+
+  </a-card>
 </template>
 
 <script>
-export default {}
+import { STable } from '@/components'
+import resourceForm from './module/resourceForm'
+import { deleteResourceById, searchResource } from '@/api/acl/resource'
+
+export default {
+  name: 'Index',
+  components: {
+    STable,
+    resourceForm
+  },
+  data () {
+    return {
+      appList: [{
+        id: '1',
+        name: '默认应用'
+      }],
+      scroll: { x: 1000, y: 500 },
+      btnName: '新增资源',
+
+      formLayout: 'vertical',
+
+      allResources: [],
+      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: 'app_id',
+          width: 50,
+          sorter: false,
+          scopedSlots: { customRender: 'app_id' }
+        },
+        {
+          title: '资源类型',
+          dataIndex: 'resource_type_id',
+          width: 50,
+          sorter: false,
+          scopedSlots: { customRender: 'resource_type_id' }
+
+        },
+        {
+          title: '操作',
+          dataIndex: 'action',
+          width: 150,
+          fixed: 'right',
+          scopedSlots: { customRender: 'action' }
+        }
+      ],
+      loadData: parameter => {
+        Object.assign(parameter, this.queryParam)
+        console.log('loadData.parameter', parameter)
+
+        return searchResource(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.resources
+
+            console.log('loadData.res', res)
+            this.allResources = res.resources
+            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)
+  },
+
+  created () {
+    this.queryParam.app_id = this.appList[0].id
+  },
+
+  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.searchResources(this.queryParam)
+    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] = ''
+    },
+    searchResources (params) {
+      searchResource(params).then(res => {
+        this.allResources = res.resources
+      })
+    },
+
+    setScrollY () {
+      this.scroll.y = window.innerHeight - this.$refs.table.$el.offsetTop - 200
+    },
+
+    handleEdit (record) {
+      this.$refs.resourceForm.handleEdit(record)
+    },
+    handleDelete (record) {
+      this.deleteResource(record.id)
+    },
+    handleOk () {
+      this.$refs.table.refresh()
+    },
+
+    handleCreate () {
+      this.$refs.resourceForm.handleCreate()
+    },
+
+    deleteResource (id) {
+      deleteResourceById(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>
+<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 6d9c248..8968342 100644
--- a/ui/src/views/cmdb/acl/roles.vue
+++ b/ui/src/views/cmdb/acl/roles.vue
@@ -1,10 +1,337 @@
 <template>
-  <div></div>
+  <a-card :bordered="false">
+    <a-form layout="inline">
+      <a-row :gutter="48">
+        <a-col :md="3" :sm="24">
+          <div class="action-btn">
+            <a-button @click="handleCreate" type="primary" style="margin-right: 0.3rem;">{{ btnName }}</a-button>
+          </div>
+        </a-col>
+        <a-col :md="8" :sm="24">
+          <a-form-item label="应用列表">
+            <a-select placeholder="请选择" v-model="queryParam.app_id">
+              <a-select-option v-for="app in appList" :key="app.id" :label="app.name" :value="app.id">{{ app.name }}</a-select-option>
+            </a-select>
+          </a-form-item>
+        </a-col>
+      </a-row>
+    </a-form>
+
+    <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>
+
+      <span slot="app_id" slot-scope="text">
+        <template>{{ text }}</template>
+      </span>
+
+      <span slot="is_app_admin" slot-scope="text">
+        <a-icon type="check" v-if="text"/>
+      </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>
+    <roleForm ref="roleForm" :handleOk="handleOk"> </roleForm>
+
+  </a-card>
 </template>
 
 <script>
-export default {}
+import { STable } from '@/components'
+import roleForm from './module/roleForm'
+import { deleteRoleById, searchRole } from '@/api/acl/role'
+
+export default {
+  name: 'Index',
+  components: {
+    STable,
+    roleForm
+  },
+  data () {
+    return {
+      appList: [{
+        id: '1',
+        name: '默认应用'
+      }],
+      scroll: { x: 1000, y: 500 },
+      btnName: '新增角色',
+
+      formLayout: 'vertical',
+
+      allRoles: [],
+      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: 'app_id',
+          width: 50,
+          sorter: false,
+          scopedSlots: { customRender: 'app_id' }
+        },
+        {
+          title: '应用管理角色',
+          dataIndex: 'is_app_admin',
+          width: 50,
+          sorter: false,
+          scopedSlots: { customRender: 'is_app_admin' }
+
+        },
+        {
+          title: '操作',
+          dataIndex: 'action',
+          width: 150,
+          fixed: 'right',
+          scopedSlots: { customRender: 'action' }
+        }
+      ],
+      loadData: parameter => {
+        Object.assign(parameter, this.queryParam)
+        console.log('loadData.parameter', parameter)
+
+        return searchRole(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.roles
+
+            console.log('loadData.res', res)
+            this.allRoles = res.roles
+            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)
+  },
+
+  created () {
+    this.queryParam.app_id = this.appList[0].id
+  },
+
+  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.searchRoles(this.queryParam)
+    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] = ''
+    },
+    searchRoles (params) {
+      searchRole(params).then(res => {
+        this.allRoles = res.roles
+      })
+    },
+
+    setScrollY () {
+      this.scroll.y = window.innerHeight - this.$refs.table.$el.offsetTop - 200
+    },
+
+    handleEdit (record) {
+      this.$refs.roleForm.handleEdit(record)
+    },
+    handleDelete (record) {
+      this.deleteRole(record.id)
+    },
+    handleOk () {
+      this.$refs.table.refresh()
+    },
+
+    handleCreate () {
+      this.$refs.roleForm.handleCreate()
+    },
+
+    deleteRole (id) {
+      deleteRoleById(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>
+<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/users.vue b/ui/src/views/cmdb/acl/users.vue
index 5e50201..3fbedc6 100644
--- a/ui/src/views/cmdb/acl/users.vue
+++ b/ui/src/views/cmdb/acl/users.vue
@@ -43,9 +43,9 @@
       </div>
       <a-icon slot="filterIcon" slot-scope="filtered" type="search" :style="{ color: filtered ? '#108ee9' : undefined }" />
 
-      <template slot="nameSearchRender" slot-scope="text">
+      <template slot="usernameSearchRender" slot-scope="text">
         <span v-if="columnSearchText.name">
-          <template v-for="(fragment, i) in text.toString().split(new RegExp(`(?<=${columnSearchText.name})|(?=${columnSearchText.name})`, 'i'))">
+          <template v-for="(fragment, i) in text.toString().split(new RegExp(`(?<=${columnSearchText.username})|(?=${columnSearchText.username})`, 'i'))">
             <mark v-if="fragment.toLowerCase() === columnSearchText.name.toLowerCase()" :key="i" class="highlight">{{ fragment }}</mark>
             <template v-else>{{ fragment }}</template>
           </template>
@@ -53,9 +53,9 @@
         <template v-else>{{ text }}</template>
       </template>
 
-      <template slot="aliasSearchRender" slot-scope="text">
+      <template slot="nicknameSearchRender" slot-scope="text">
         <span v-if="columnSearchText.alias">
-          <template v-for="(fragment, i) in text.toString().split(new RegExp(`(?<=${columnSearchText.alias})|(?=${columnSearchText.alias})`, 'i'))">
+          <template v-for="(fragment, i) in text.toString().split(new RegExp(`(?<=${columnSearchText.nickname})|(?=${columnSearchText.nickname})`, 'i'))">
             <mark v-if="fragment.toLowerCase() === columnSearchText.alias.toLowerCase()" :key="i" class="highlight">{{ fragment }}</mark>
             <template v-else>{{ fragment }}</template>
           </template>
@@ -125,11 +125,11 @@ export default {
           sorter: false,
           width: 250,
           scopedSlots: {
-            customRender: 'aliasSearchRender',
+            customRender: 'usernameSearchRender',
             filterDropdown: 'filterDropdown',
             filterIcon: 'filterIcon'
           },
-          onFilter: (value, record) => record.alias && record.alias.toLowerCase().includes(value.toLowerCase()),
+          onFilter: (value, record) => record.username && record.username.toLowerCase().includes(value.toLowerCase()),
           onFilterDropdownVisibleChange: (visible) => {
             if (visible) {
               setTimeout(() => {
@@ -144,11 +144,11 @@ export default {
           sorter: false,
           width: 250,
           scopedSlots: {
-            customRender: 'nameSearchRender',
+            customRender: 'nicknameSearchRender',
             filterDropdown: 'filterDropdown',
             filterIcon: 'filterIcon'
           },
-          onFilter: (value, record) => record.name && record.name.toLowerCase().includes(value.toLowerCase()),
+          onFilter: (value, record) => record.nickname && record.nickname.toLowerCase().includes(value.toLowerCase()),
           onFilterDropdownVisibleChange: (visible) => {
             if (visible) {
               setTimeout(() => {