[保存] 完成资源类型权限显示

ui/src/api/acl/resource.js

@@ -32,3 +32,41 @@ export function deleteResourceById (id) {
     method: 'DELETE'
   })
 }
+
+export function searchResourceType (params) {
+  return axios({
+    url: urlPrefix + `/resource_types`,
+    method: 'GET',
+    params: params
+  })
+}
+
+export function addResourceType (params) {
+  return axios({
+    url: urlPrefix + '/resource_types',
+    method: 'POST',
+    data: params
+  })
+}
+
+export function updateResourceTypeById (id, params) {
+  return axios({
+    url: urlPrefix + `/resource_types/${id}`,
+    method: 'PUT',
+    data: params
+  })
+}
+
+export function deleteResourceTypeById (id) {
+  return axios({
+    url: urlPrefix + `/resource_types/${id}`,
+    method: 'DELETE'
+  })
+}
+
+export function getResourcePermissions (id) {
+  return axios({
+    url: urlPrefix + `/resources/${id}/permissions`,
+    method: 'DELETE'
+  })
+}

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

@@ -132,7 +132,7 @@ export default {
       })
     },
     getAllRoles () {
-      searchRole({ page_size: 999, app_id: this.$store.state.app.name }).then(res => {
+      searchRole({ page_size: 9999, app_id: this.$store.state.app.name }).then(res => {
         this.allRoles = res.roles
       })
     },

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

@@ -27,19 +27,11 @@
         :wrapper-col="formItemLayout.wrapperCol"
         label="资源类型"
       >
-        <a-select name="resource_type_id" default-value="1" v-decorator="['resource_type_id', {rules: []} ]">
+        <a-select name="type_id" v-decorator="['type_id', {rules: []} ]">
-          <a-select-option value="1">默认资源类型</a-select-option>
+          <a-select-option v-for="type in allTypes" :key="type.id">{{ type.name }}</a-select-option>
         </a-select>
       </a-form-item>
 
-      <a-form-item>
-        <a-input
-          name="app_id"
-          type="hidden"
-          v-decorator="['app_id', {rules: []} ]"
-        />
-      </a-form-item>
-
       <a-form-item>
         <a-input
           name="id"
@@ -72,7 +64,7 @@
 
 <script>
 import { STable } from '@/components'
-import { addResource, updateResourceById } from '@/api/acl/resource'
+import { addResource, updateResourceById, searchResourceType } from '@/api/acl/resource'
 
 export default {
   name: 'ResourceForm',
@@ -83,7 +75,8 @@ export default {
     return {
       drawerTitle: '新增资源',
       drawerVisible: false,
-      formLayout: 'vertical'
+      formLayout: 'vertical',
+      allTypes: []
     }
   },
 
@@ -91,6 +84,10 @@ export default {
     this.form = this.$form.createForm(this)
   },
 
+  created () {
+    this.getAllResourceTypes()
+  },
+
   computed: {
 
     formItemLayout () {
@@ -118,7 +115,11 @@ export default {
   mounted () {
   },
   methods: {
-
+    getAllResourceTypes () {
+      searchResourceType({ page_size: 9999, app_id: this.$store.state.app.name }).then(res => {
+        this.allTypes = res.groups
+      })
+    },
     handleCreate () {
       this.drawerVisible = true
     },
@@ -137,8 +138,7 @@ export default {
         this.form.setFieldsValue({
           id: record.id,
           name: record.name,
-          app_id: this.$store.state.app.name,
+          type_id: record.resource_type_id
-          resource_type_id: record.resource_type_id
         })
       })
     },
@@ -149,6 +149,7 @@ export default {
         if (!err) {
           console.log('Received values of form: ', values)
 
+          values.app_id = this.$store.state.app.name
           if (values.id) {
             this.updateResource(values.id, values)
           } else {

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

@@ -13,7 +13,7 @@
       <a-form-item
         :label-col="formItemLayout.labelCol"
         :wrapper-col="formItemLayout.wrapperCol"
-        label="资源名"
+        label="类型名"
       >
         <a-input
           name="name"
@@ -25,19 +25,24 @@
       <a-form-item
         :label-col="formItemLayout.labelCol"
         :wrapper-col="formItemLayout.wrapperCol"
-        label="资源类型"
+        label="描述"
       >
-        <a-select name="resource_type_id" default-value="1" v-decorator="['resource_type_id', {rules: []} ]">
+        <a-textarea placeholder="请输入描述信息..." name="description" :rows="4" />
-          <a-select-option value="1">默认资源类型</a-select-option>
-        </a-select>
       </a-form-item>
 
-      <a-form-item>
+      <a-form-item
-        <a-input
+        :label-col="formItemLayout.labelCol"
-          name="app_id"
+        :wrapper-col="formItemLayout.wrapperCol"
-          type="hidden"
+        label="权限"
-          v-decorator="['app_id', {rules: []} ]"
+      >
-        />
+        <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>
@@ -72,7 +77,7 @@
 
 <script>
 import { STable } from '@/components'
-import { addResource, updateResourceById } from '@/api/acl/resource'
+import { addResourceType, updateResourceTypeById } from '@/api/acl/resource'
 
 export default {
   name: 'ResourceForm',
@@ -81,9 +86,13 @@ export default {
   },
   data () {
     return {
-      drawerTitle: '新增资源',
+      drawerTitle: '新增资源类型',
       drawerVisible: false,
-      formLayout: 'vertical'
+      formLayout: 'vertical',
+      perms: ['1'],
+      indeterminate: true,
+      checkAll: false,
+      plainOptions: ['1', '2']
     }
   },
 
@@ -118,7 +127,17 @@ export default {
   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
     },
@@ -137,8 +156,7 @@ export default {
         this.form.setFieldsValue({
           id: record.id,
           name: record.name,
-          app_id: this.$store.state.app.name,
+          description: record.description
-          resource_type_id: record.resource_type_id
         })
       })
     },
@@ -149,16 +167,18 @@ export default {
         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.updateResource(values.id, values)
+            this.updateResourceType(values.id, values)
           } else {
-            this.createResource(values)
+            this.createResourceType(values)
           }
         }
       })
     },
-    updateResource (id, data) {
+    updateResourceType (id, data) {
-      updateResourceById(id, data)
+      updateResourceTypeById(id, data)
         .then(res => {
           this.$message.success(`更新成功`)
           this.handleOk()
@@ -166,8 +186,8 @@ export default {
         }).catch(err => this.requestFailed(err))
     },
 
-    createResource (data) {
+    createResourceType (data) {
-      addResource(data)
+      addResourceType(data)
         .then(res => {
           this.$message.success(`添加成功`)
           this.handleOk()

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

@@ -33,14 +33,6 @@
         />
       </a-form-item>
 
-      <a-form-item>
-        <a-input
-          name="app_id"
-          type="hidden"
-          v-decorator="['app_id', {rules: []} ]"
-        />
-      </a-form-item>
-
       <a-form-item>
         <a-input
           name="id"
@@ -138,7 +130,6 @@ export default {
         this.form.setFieldsValue({
           id: record.id,
           name: record.name,
-          app_id: this.$store.state.app.name,
           is_app_admin: record.is_app_admin
         })
       })
@@ -149,7 +140,7 @@ export default {
       this.form.validateFields((err, values) => {
         if (!err) {
           console.log('Received values of form: ', values)
-
+          values.app_id = this.$store.state.app.name
           if (values.id) {
             this.updateRole(values.id, values)
           } else {

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

@@ -55,6 +55,10 @@
 
       <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>
@@ -73,34 +77,30 @@
       </span>
 
     </s-table>
-    <resourceForm ref="resourceForm" :handleOk="handleOk"> </resourceForm>
+    <resourceTypeForm ref="resourceTypeForm" :handleOk="handleOk"> </resourceTypeForm>
 
   </a-card>
 </template>
 
 <script>
 import { STable } from '@/components'
-import resourceForm from './module/resourceForm'
+import resourceTypeForm from './module/resourceTypeForm'
-import { deleteResourceById, searchResource } from '@/api/acl/resource'
+import { deleteResourceTypeById, searchResourceType } from '@/api/acl/resource'
 
 export default {
   name: 'Index',
   components: {
     STable,
-    resourceForm
+    resourceTypeForm
   },
   data () {
     return {
-      appList: [{
+      id2perms: {},
-        id: '1',
-        name: '默认应用'
-      }],
       scroll: { x: 1000, y: 500 },
-      btnName: '新增资源',
+      btnName: '新增资源类型',
 
       formLayout: 'vertical',
 
-      allResources: [],
       pageSizeOptions: ['10', '25', '50', '100'],
 
       columnSearchText: {
@@ -109,7 +109,7 @@ export default {
       },
       columns: [
         {
-          title: '资源名',
+          title: '类型名',
           dataIndex: 'name',
           sorter: false,
           width: 50,
@@ -128,12 +128,17 @@ export default {
           }
         },
         {
-          title: '资源类型',
+          title: '描述',
-          dataIndex: 'resource_type_id',
+          dataIndex: 'description',
-          width: 50,
+          width: 250,
           sorter: false,
-          scopedSlots: { customRender: 'resource_type_id' }
+          scopedSlots: { customRender: 'description' }
-
+        },
+        {
+          title: '权限',
+          dataIndex: 'id',
+          sorter: false,
+          scopedSlots: { customRender: 'id' }
         },
         {
           title: '操作',
@@ -152,16 +157,15 @@ export default {
         Object.assign(parameter, this.queryParam)
         console.log('loadData.parameter', parameter)
 
-        return searchResource(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.resources
+            res.data = res.groups
-
+            this.id2perms = res.id2perms
             console.log('loadData.res', res)
-            this.allResources = res.resources
             return res
           })
       },
@@ -237,21 +241,21 @@ export default {
     },
 
     handleEdit (record) {
-      this.$refs.resourceForm.handleEdit(record)
+      this.$refs.resourceTypeForm.handleEdit(record)
     },
     handleDelete (record) {
-      this.deleteResource(record.id)
+      this.deleteResourceType(record.id)
     },
     handleOk () {
       this.$refs.table.refresh()
     },
 
     handleCreate () {
-      this.$refs.resourceForm.handleCreate()
+      this.$refs.resourceTypeForm.handleCreate()
     },
 
-    deleteResource (id) {
+    deleteResourceType (id) {
-      deleteResourceById(id)
+      deleteResourceTypeById(id)
         .then(res => {
           this.$message.success(`删除成功`)
           this.handleOk()

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

@@ -53,9 +53,7 @@
         <template v-else>{{ text }}</template>
       </template>
 
-      <span slot="resource_type_id" slot-scope="text">
+      <template slot="resource_type_id" slot-scope="text">{{ text }}</template>
-        <a-icon type="check" v-if="text"/>
-      </span>
 
       <span slot="action" slot-scope="text, record">
         <template>