[更新] 完成角色管理页面

ui/src/api/acl/role.js

@@ -32,3 +32,35 @@ export function deleteRoleById (id) {
     method: 'DELETE'
   })
 }
+
+export function addParentRole (id, otherID) {
+  return axios({
+    url: urlPrefix + `/roles/${id}/parents`,
+    method: 'POST',
+    data: { parent_id: otherID }
+  })
+}
+
+export function addChildRole (id, otherID) {
+  return axios({
+    url: urlPrefix + `/roles/${otherID}/parents`,
+    method: 'POST',
+    data: { parent_id: id }
+  })
+}
+
+export function delParentRole (cid, pid) {
+  return axios({
+    url: urlPrefix + `/roles/${cid}/parents`,
+    method: 'DELETE',
+    data: { parent_id: pid }
+  })
+}
+
+export function delChildRole (pid, cid) {
+  return axios({
+    url: urlPrefix + `/roles/${cid}/parents`,
+    method: 'DELETE',
+    data: { parent_id: pid }
+  })
+}

ui/src/views/cmdb/acl/module/addRoleRelationForm.vue

@@ -0,0 +1,197 @@
+<template>
+  <a-drawer
+    :closable="false"
+    :title="drawerTitle"
+    :visible="drawerVisible"
+    @close="onClose"
+    placement="right"
+    width="30%"
+  >
+
+    <a-form :form="form" :layout="formLayout" @submit="handleAddParent">
+
+      <a-form-item
+        :label-col="formItemLayout.labelCol"
+        :wrapper-col="formItemLayout.wrapperCol"
+        label="角色列表"
+      >
+        <a-select name="otherID" v-decorator="['otherID', {rules: [{ required: true, message: '请选择另一个角色'}]} ]">
+          <a-select-option v-for="role in allRoles" :key="role.id">{{ role.name }}</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="handleAddParent" type="primary" style="margin-right: 1rem">关联父角色</a-button>
+        <a-button @click="handleAddChild" 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 { searchRole, addParentRole, addChildRole } from '@/api/acl/role'
+
+export default {
+  name: 'AddRoleRelationForm',
+  components: {
+    STable
+  },
+  data () {
+    return {
+      drawerTitle: '角色关联',
+      drawerVisible: false,
+      formLayout: 'vertical',
+      allRoles: [],
+      app_id: 0
+    }
+  },
+
+  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: {
+    onClose () {
+      this.form.resetFields()
+      this.drawerVisible = false
+    },
+    handleAddRoleRelation (record) {
+      this.drawerVisible = true
+      this.$nextTick(() => {
+        this.app_id = record.app_id
+        this.getAllRoles()
+        this.form.setFieldsValue({
+          id: record.id
+        })
+      })
+    },
+    handleAddParent (e) {
+      e.preventDefault()
+      this.form.validateFields((err, values) => {
+        if (!err) {
+          this.addParent(values.id, values.otherID)
+        }
+      })
+    },
+    handleAddChild (e) {
+      e.preventDefault()
+      this.form.validateFields((err, values) => {
+        if (!err) {
+          this.addChild(values.id, values.otherID)
+        }
+      })
+    },
+    getAllRoles () {
+      searchRole({ page_size: 999, app_id: this.app_id }).then(res => {
+        this.allRoles = res.roles
+      })
+    },
+    addParent (id, otherID) {
+      addParentRole(id, otherID)
+        .then(res => {
+          this.$message.success(`关联父角色成功`)
+          this.handleOk()
+          this.onClose()
+        }).catch(err => this.requestFailed(err))
+    },
+
+    addChild (id, otherID) {
+      addChildRole(id, otherID)
+        .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>

ui/src/views/cmdb/acl/resources.vue

@@ -169,6 +169,10 @@ export default {
         }
       ],
       loadData: parameter => {
+        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)
 

ui/src/views/cmdb/acl/roles.vue

@@ -73,11 +73,16 @@
         <a-icon type="check" v-if="text"/>
       </span>
 
+      <span slot="id" slot-scope="key">
+        <a-tag color="cyan" v-for="role in id2parents[key]" :key="role.id">{{ role.name }}</a-tag>
+      </span>
+
       <span slot="action" slot-scope="text, record">
         <template>
+          <a @click="handleAddRoleRelation(record)">关联角色</a>
+          <a-divider type="vertical"/>
           <a @click="handleEdit(record)">编辑</a>
           <a-divider type="vertical"/>
-
           <a-popconfirm
             title="确认删除?"
             @confirm="handleDelete(record)"
@@ -92,6 +97,7 @@
 
     </s-table>
     <roleForm ref="roleForm" :handleOk="handleOk"> </roleForm>
+    <addRoleRelationForm ref="AddRoleRelationForm" :handleOk="handleOk"> </addRoleRelationForm>
 
   </a-card>
 </template>
@@ -99,13 +105,15 @@
 <script>
 import { STable } from '@/components'
 import roleForm from './module/roleForm'
+import AddRoleRelationForm from './module/addRoleRelationForm'
 import { deleteRoleById, searchRole } from '@/api/acl/role'
 
 export default {
   name: 'Index',
   components: {
     STable,
-    roleForm
+    roleForm,
+    AddRoleRelationForm
   },
   data () {
     return {
@@ -119,6 +127,7 @@ export default {
       formLayout: 'vertical',
 
       allRoles: [],
+      id2parents: {},
       pageSizeOptions: ['10', '25', '50', '100'],
 
       columnSearchText: {
@@ -130,7 +139,7 @@ export default {
           title: '角色名',
           dataIndex: 'name',
           sorter: false,
-          width: 50,
+          width: 250,
           scopedSlots: {
             customRender: 'nameSearchRender',
             filterDropdown: 'filterDropdown',
@@ -148,27 +157,38 @@ export default {
         {
           title: '应用',
           dataIndex: 'app_id',
-          width: 50,
+          width: 250,
           sorter: false,
           scopedSlots: { customRender: 'app_id' }
         },
         {
-          title: '应用管理角色',
+          title: '管理者',
           dataIndex: 'is_app_admin',
-          width: 50,
+          width: 100,
           sorter: false,
           scopedSlots: { customRender: 'is_app_admin' }
 
+        },
+        {
+          title: '父角色',
+          dataIndex: 'id',
+          sorter: false,
+          scopedSlots: { customRender: 'id' }
+
         },
         {
           title: '操作',
           dataIndex: 'action',
-          width: 150,
+          width: 300,
           fixed: 'right',
           scopedSlots: { customRender: 'action' }
         }
       ],
       loadData: parameter => {
+        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)
 
@@ -182,6 +202,7 @@ export default {
 
             console.log('loadData.res', res)
             this.allRoles = res.roles
+            this.id2parents = res.id2parents
             return res
           })
       },
@@ -239,7 +260,6 @@ export default {
 
   },
   mounted () {
-    this.searchRoles(this.queryParam)
     this.setScrollY()
   },
   inject: ['reload'],
@@ -266,6 +286,10 @@ export default {
       this.scroll.y = window.innerHeight - this.$refs.table.$el.offsetTop - 200
     },
 
+    handleAddRoleRelation (record) {
+      this.$refs.AddRoleRelationForm.handleAddRoleRelation(record)
+    },
+
     handleEdit (record) {
       this.$refs.roleForm.handleEdit(record)
     },

ui/src/views/cmdb/acl/users.vue

@@ -206,8 +206,10 @@ export default {
         }
       ],
       loadData: parameter => {
-//        parameter['page_size'] = parameter['pageSize']
-//        parameter['page'] = parameter['pageNo']
+        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)