7x31
/
cmdb
mirror of https://github.com/veops/cmdb.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

acl 前端

This commit is contained in:
wang-liang0615 2023-07-14 14:34:35 +08:00
parent abc83db77b
commit 1436ffb3b2
11 changed files with 308 additions and 151 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
cmdb-ui/src/modules/acl/api/resource.js
View File

@ -2,7 +2,7 @@ import { axios } from '@/utils/request'
const urlPrefix = '/v1/acl'
export function searchResource (params) {
export function searchResource(params) {
return axios({
url: urlPrefix + `/resources`,
method: 'GET',
@ -10,7 +10,7 @@ export function searchResource (params) {
})
}
export function addResource (params) {
export function addResource(params) {
return axios({
url: urlPrefix + '/resources',
method: 'POST',
@ -18,7 +18,7 @@ export function addResource (params) {
})
}
export function updateResourceById (id, params) {
export function updateResourceById(id, params) {
return axios({
url: urlPrefix + `/resources/${id}`,
method: 'PUT',
@ -26,14 +26,15 @@ export function updateResourceById (id, params) {
})
}
export function deleteResourceById (id) {
export function deleteResourceById(id, params) {
return axios({
url: urlPrefix + `/resources/${id}`,
method: 'DELETE'
method: 'DELETE',
params
})
}
export function searchResourceType (params) {
export function searchResourceType(params) {
return axios({
url: urlPrefix + `/resource_types`,
method: 'GET',
@ -41,7 +42,7 @@ export function searchResourceType (params) {
})
}
export function addResourceType (params) {
export function addResourceType(params) {
return axios({
url: urlPrefix + '/resource_types',
method: 'POST',
@ -49,7 +50,7 @@ export function addResourceType (params) {
})
}
export function updateResourceTypeById (id, params) {
export function updateResourceTypeById(id, params) {
return axios({
url: urlPrefix + `/resource_types/${id}`,
method: 'PUT',
@ -57,7 +58,7 @@ export function updateResourceTypeById (id, params) {
})
}
export function deleteResourceTypeById (id) {
export function deleteResourceTypeById(id) {
return axios({
url: urlPrefix + `/resource_types/${id}`,
method: 'DELETE'
@ -65,7 +66,7 @@ export function deleteResourceTypeById (id) {
}
// add resource group
export function getResourceGroups (params) {
export function getResourceGroups(params) {
return axios({
url: `${urlPrefix}/resource_groups`,
method: 'GET',
@ -73,7 +74,7 @@ export function getResourceGroups (params) {
})
}
export function addResourceGroup (data) {
export function addResourceGroup(data) {
return axios({
url: `${urlPrefix}/resource_groups`,
method: 'POST',
@ -81,7 +82,7 @@ export function addResourceGroup (data) {
})
}
export function updateResourceGroup (_id, data) {
export function updateResourceGroup(_id, data) {
return axios({
url: `${urlPrefix}/resource_groups/${_id}`,
method: 'PUT',
@ -89,14 +90,14 @@ export function updateResourceGroup (_id, data) {
})
}
export function deleteResourceGroup (_id) {
export function deleteResourceGroup(_id) {
return axios({
url: `${urlPrefix}/resource_groups/${_id}`,
method: 'DELETE'
})
}
export function getResourceGroupItems (_id) {
export function getResourceGroupItems(_id) {
return axios({
url: `${urlPrefix}/resource_groups/${_id}/items`,
method: 'GET'

1
cmdb-ui/src/modules/acl/api/user.js
View File

@ -14,6 +14,7 @@ export function getOnDutyUser() {
return axios({
url: urlPrefix + '/users/employee',
method: 'GET',
// data: { 'originUrl': 'http://hr.dfc.sh/api/all_users?work_status=在职' }
})
}

15
cmdb-ui/src/modules/acl/views/module/resourceForm.vue
View File

@ -24,8 +24,12 @@
<a-form-item label="是否组">
<a-radio-group v-model="isGroup">
<a-radio :value="true"> 是 </a-radio>
<a-radio :value="false"> 否 </a-radio>
<a-radio :value="true">
是
</a-radio>
<a-radio :value="false">
否
</a-radio>
</a-radio-group>
</a-form-item>
<a-form-item>
@ -40,11 +44,12 @@
</template>
<script>
import { addResource, searchResourceType, addResourceGroup } from '@/modules/acl/api/resource'
/* eslint-disable */
import { addResource, searchResourceType } from '@/modules/acl/api/resource'
import { addResourceGroup } from '@/modules/acl/api/resource'
export default {
name: 'ResourceForm',
components: {},
data() {
return {
drawerTitle: '新增资源',
@ -119,7 +124,7 @@ export default {
// },
},
watch: {
'$route.name': function (newValue, oldValue) {
'$route.name': function(newValue, oldValue) {
this.getAllResourceTypes()
},
},

13
cmdb-ui/src/modules/acl/views/module/resourcePermForm.vue
View File

@ -7,7 +7,14 @@
@close="() => (drawerVisible = false)"
:hasFooter="false"
>
<vxe-table :max-height="`${windowHeight - 150}px`" :data="resPerms" ref="rTable">
<vxe-table
stripe
size="mini"
class="ops-stripe-table"
:max-height="`${windowHeight - 150}px`"
:data="resPerms"
ref="rTable"
>
<vxe-column
field="name"
title="角色名"
@ -57,6 +64,10 @@
</a-button>
</template>
</vxe-column>
<template slot="empty">
<img :src="require(`@/assets/data_empty.png`)" />
<p style="font-size: 14px; line-height: 17px; color: rgba(0, 0, 0, 0.6)">暂无数据</p>
</template>
</vxe-table>
<!-- <a-table
:columns="columns"

4
cmdb-ui/src/modules/acl/views/module/resourceTypeForm.vue
View File

@ -103,7 +103,7 @@ export default {
})
},
updateResourceType(id, data) {
updateResourceTypeById(id, data).then(res => {
updateResourceTypeById(id, data).then((res) => {
this.$message.success(`更新成功`)
this.handleOk()
this.onClose()
@ -112,7 +112,7 @@ export default {
},
createResourceType(data) {
addResourceType(data).then(res => {
addResourceType(data).then((res) => {
this.$message.success(`添加成功`)
this.handleOk()
this.onClose()

13
cmdb-ui/src/modules/acl/views/module/resourceUserForm.vue
View File

@ -12,7 +12,14 @@
<a-select-option v-for="type in resourceTypes" :value="type.id" :key="type.id">{{ type.name }}</a-select-option>
</a-select>
</a-form-item>
<vxe-table :max-height="`${windowHeight - 180}px`" :data="records" ref="rTable">
<vxe-table
size="mini"
stripe
class="ops-stripe-table"
:max-height="`${windowHeight - 180}px`"
:data="records"
ref="rTable"
>
<vxe-column
field="name"
title="资源名"
@ -46,6 +53,10 @@
<a-tag color="cyan" v-for="(r, index) in row.permissions" :key="index">{{ r }}</a-tag>
</template>
</vxe-column>
<template slot="empty">
<img :src="require(`@/assets/data_empty.png`)" />
<p style="font-size: 14px; line-height: 17px; color: rgba(0, 0, 0, 0.6)">暂无数据</p>
</template>
</vxe-table>
<!-- <a-table
:columns="columns"

11
cmdb-ui/src/modules/acl/views/module/triggerPattern.vue
View File

@ -10,7 +10,12 @@
}
"
>
<vxe-table :data="tableData" :max-height="`${windowHeight - 110}px`">
<vxe-table
size="mini"
stripe
class="ops-stripe-table"
:data="tableData"
:max-height="`${windowHeight - 110}px`">
<vxe-table-column field="name" title="资源名"></vxe-table-column>
<vxe-table-column field="uid" title="创建人">
<template #default="{row}">
@ -18,6 +23,10 @@
</template>
</vxe-table-column>
<vxe-table-column field="created_at" title="创建时间"></vxe-table-column>
<template slot="empty">
<img :src="require(`@/assets/data_empty.png`)" />
<p style="font-size: 14px; line-height: 17px; color: rgba(0, 0, 0, 0.6)">暂无数据</p>
</template>
</vxe-table>
</CustomDrawer>
</template>

90
cmdb-ui/src/modules/acl/views/resource_types.vue
View File

@ -1,8 +1,9 @@
<template>
<div :style="{ backgroundColor: '#fff', padding: '24px' }">
<div class="resource-types-action-btn">
<a-button @click="handleCreate" type="primary" style="margin-right: 0.3rem;">{{ btnName }}</a-button>
<a-button @click="handleCreate" type="primary" style="margin-right: 0.3rem">{{ btnName }}</a-button>
<a-input-search
class="ops-input"
:style="{ display: 'inline', marginLeft: '10px', width: '200px' }"
placeholder="搜索 | 资源类型名"
v-model="searchName"
@ -15,31 +16,60 @@
"
></a-input-search>
</div>
<a-spin
:spinning="loading"
><vxe-grid :columns="tableColumns" :data="groups" :max-height="`${windowHeight - 185}px`" highlight-hover-row>
<template #id_default="{row}">
<a-tag color="cyan" v-for="perm in id2perms[row.id]" :key="perm.id">{{ perm.name }}</a-tag>
</template>
<template #action_default="{row}">
<a @click="handleEdit(row)"><a-icon type="edit"/></a>
<a-divider type="vertical" />
<a-popconfirm title="确认删除?" @confirm="handleDelete(row)" okText="是" cancelText="否">
<a style="color: red"><a-icon type="delete"/></a>
</a-popconfirm>
</template>
<template #pager>
<vxe-pager
:layouts="['Total', 'PrevPage', 'JumpNumber', 'NextPage', 'Sizes']"
:current-page.sync="tablePage.currentPage"
:page-size.sync="tablePage.pageSize"
:total="tablePage.total"
:page-sizes="pageSizeOptions"
@page-change="handlePageChange"
>
</vxe-pager>
</template> </vxe-grid
></a-spin>
<a-spin :spinning="loading">
<vxe-table
stripe
size="mini"
class="ops-stripe-table"
:data="groups"
:max-height="`${windowHeight - 185}px`"
highlight-hover-row
>
<!-- 1 -->
<vxe-table-column
field="name"
title="资源类型名"
:min-width="175"
fixed="left"
show-overflow
></vxe-table-column>
<!-- 2 -->
<vxe-table-column field="description" title="描述" :min-width="175"></vxe-table-column>
<!-- 3 -->
<vxe-table-column field="id" title="权限" :min-width="300">
<template #default="{ row }">
<a-tag color="cyan" v-for="perm in id2perms[row.id]" :key="perm.id">{{ perm.name }}</a-tag>
</template>
</vxe-table-column>
<!-- 4 -->
<vxe-table-column field="action" title="操作" :min-width="175" fixed="right">
<template #default="{ row }">
<a @click="handleEdit(row)"><a-icon type="edit" /></a>
<a-divider type="vertical" />
<a-popconfirm title="确认删除?" @confirm="handleDelete(row)" okText="是" cancelText="否">
<a style="color: red"><a-icon type="delete" /></a>
</a-popconfirm>
</template>
</vxe-table-column>
<template slot="empty">
<img :src="require(`@/assets/data_empty.png`)" />
<p style="font-size: 14px; line-height: 17px; color: rgba(0, 0, 0, 0.6)">暂无数据</p>
</template>
</vxe-table>
<vxe-pager
size="mini"
:layouts="['Total', 'PrevPage', 'JumpNumber', 'NextPage', 'Sizes']"
:current-page.sync="tablePage.currentPage"
:page-size.sync="tablePage.pageSize"
:total="tablePage.total"
:page-sizes="pageSizeOptions"
@page-change="handlePageChange"
>
</vxe-pager>
</a-spin>
<resourceTypeForm ref="resourceTypeForm" :handleOk="handleOk"> </resourceTypeForm>
</div>
@ -110,7 +140,7 @@ export default {
}),
},
watch: {
'$route.name': function(newName, oldName) {
'$route.name': function (newName, oldName) {
this.tablePage = {
total: 0,
currentPage: 1,
@ -141,7 +171,11 @@ export default {
q: this.searchName,
}
searchResourceType(param).then((res) => {
this.tablePage = { ...this.tablePage, total: res.numfound, currentPage: res.page }
this.tablePage = {
...this.tablePage,
total: res.numfound,
currentPage: res.page,
}
this.groups = res.groups
this.id2perms = res.id2perms
this.loading = false

135
cmdb-ui/src/modules/acl/views/resources.vue
View File

@ -8,6 +8,7 @@
<a-space>
<a-button @click="handleCreate" type="primary">{{ btnName }}</a-button>
<a-input-search
class="ops-input"
placeholder="搜索 | 资源名"
v-model="searchName"
@search="
@ -65,56 +66,88 @@
></a-switch>
</a-space>
</div>
<a-spin
:spinning="loading"
><vxe-grid
:columns="tableColumns"
:data="tableData"
highlight-hover-row
:max-height="`${windowHeight - 245}px`"
:checkbox-config="{ reserve: true }"
@checkbox-change="changeCheckbox"
@checkbox-all="changeCheckbox"
ref="xTable"
row-id="id"
show-overflow
>
<template #name_header>
{{ isGroup ? '资源组名' : '资源名' }}
</template>
<template #action_default="{row}">
<span v-show="isGroup">
<a @click="handleDisplayMember(row)">成员</a>
<a-divider type="vertical" />
<a @click="handleGroupEdit(row)">编辑</a>
<a-divider type="vertical" />
</span>
<a-tooltip title="查看授权">
<a @click="handlePerm(row)"><a-icon type="eye"/></a>
</a-tooltip>
<a-divider type="vertical" />
<a-tooltip title="授权">
<a :style="{ color: '#4bbb13' }" @click="handlePermManage(row)">
<a-icon type="usergroup-add" />
</a>
</a-tooltip>
<a-divider type="vertical" />
<a-popconfirm title="确认删除?" @confirm="handleDelete(row)" @cancel="cancel" okText="是" cancelText="否">
<a style="color: red"><a-icon type="delete"/></a>
</a-popconfirm>
</template>
<template #pager>
<vxe-pager
:layouts="['Total', 'PrevPage', 'JumpNumber', 'NextPage', 'Sizes']"
:current-page.sync="tablePage.currentPage"
:page-size.sync="tablePage.pageSize"
:total="tablePage.total"
:page-sizes="pageSizeOptions"
@page-change="handlePageChange"
>
</vxe-pager>
</template> </vxe-grid
></a-spin>
<a-spin :spinning="loading">
<vxe-table
size="mini"
stripe
class="ops-stripe-table"
:data="tableData"
highlight-hover-row
:height="`${windowHeight - 280}px`"
:checkbox-config="{ reserve: true }"
@checkbox-change="changeCheckbox"
@checkbox-all="changeCheckbox"
ref="xTable"
row-id="id"
show-overflow
>
<!-- 1 -->
<vxe-table-column type="checkbox" fixed="left"></vxe-table-column>
<!-- 2 -->
<vxe-table-column field="name" title="资源名" :min-widh="150" fixed="left" show-overflow>
<template #title="{row}">
{{ row.isGroup ? '资源组名' : '资源名' }}
</template>
</vxe-table-column>
<!-- 3 -->
<vxe-table-column field="user" title="创建者" :min-widh="100"> </vxe-table-column>
<!-- 4 -->
<vxe-table-column field="created_at" title="创建时间" :min-widh="220" align="center"> </vxe-table-column>
<!-- 5 -->
<vxe-table-column field="updated_at" title="最后修改时间" :min-widh="220" fixed="center"> </vxe-table-column>
<!-- 6 -->
<vxe-table-column
field="action"
title="操作"
:min-widh="200"
fixed="right"
align="center"
show-overflow>
<template #default="{row}">
<span v-show="row.isGroup">
<a @click="handleDisplayMember(row)">成员</a>
<a-divider type="vertical" />
<a @click="handleGroupEdit(row)">编辑</a>
<a-divider type="vertical" />
</span>
<a-tooltip title="查看授权">
<a @click="handlePerm(row)"><a-icon type="eye"/></a>
</a-tooltip>
<a-divider type="vertical" />
<a-tooltip title="授权">
<a :style="{ color: '#4bbb13' }" @click="handlePermManage(row)">
<a-icon type="usergroup-add" />
</a>
</a-tooltip>
<a-divider type="vertical" />
<a-popconfirm title="确认删除?" @confirm="handleDelete(row)" @cancel="cancel" okText="是" cancelText="否">
<a style="color: red"><a-icon type="delete"/></a>
</a-popconfirm>
</template>
</vxe-table-column>
<template slot="empty">
<img :src="require(`@/assets/data_empty.png`)" />
<p style="font-size: 14px; line-height: 17px; color: rgba(0, 0, 0, 0.6)">暂无数据</p>
</template>
</vxe-table>
<vxe-pager
size="mini"
:layouts="['Total', 'PrevPage', 'JumpNumber', 'NextPage', 'Sizes']"
:current-page.sync="tablePage.currentPage"
:page-size.sync="tablePage.pageSize"
:total="tablePage.total"
:page-sizes="pageSizeOptions"
@page-change="handlePageChange"
>
</vxe-pager>
</a-spin>
</div>
<div v-else style="text-align: center">
<a-icon style="font-size:50px; margin-bottom: 20px; color: orange" type="info-circle" />
@ -304,7 +337,7 @@ export default {
},
deleteResource(id) {
if (!this.isGroup) {
deleteResourceById(id).then((res) => {
deleteResourceById(id, { app_id: this.$route.name.split('_')[0] }).then((res) => {
this.$message.success(`删除成功`)
this.handleOk()
})

140
cmdb-ui/src/modules/acl/views/roles.vue
View File

@ -3,6 +3,7 @@
<div class="roles-action-btn">
<a-button @click="handleCreate" type="primary">{{ btnName }}</a-button>
<a-input-search
class="ops-input"
allowClear
:style="{ display: 'inline', marginLeft: '10px', width: '200px' }"
placeholder="搜索 | 角色名"
@ -17,8 +18,11 @@
<a-checkbox :checked="is_all" @click="handleClickBoxChange">所有角色</a-checkbox>
</div>
<a-spin :spinning="loading">
<vxe-grid
:columns="tableColumns"
<vxe-table
stripe
class="ops-stripe-table"
size="mini"
resizable
:data="tableData"
:max-height="`${windowHeight - 185}px`"
highlight-hover-row
@ -26,54 +30,94 @@
:filter-config="{ remote: true }"
@filter-change="filterTableMethod"
>
<template #is_app_admin_default="{row}">
<a-icon type="check" v-if="row.is_app_admin" />
</template>
<template #inherit_default="{row}">
<a-tag color="cyan" v-for="role in id2parents[row.id]" :key="role.id">{{ role.name }}</a-tag>
</template>
<template #isVisualRole_default="{row}">
{{ row.uid ? '否' : '是' }}
</template>
<template #action_default="{row}">
<div style="width:300px">
<span>
<a-tooltip title="资源列表">
<a
v-if="$route.name !== 'acl_roles'"
@click="handleDisplayUserResource(row)"
><a-icon
type="file-search"
/></a>
</a-tooltip>
<a-divider type="vertical" />
<div v-if="!row.uid" style="display: inline-block">
<a-tooltip
title="用户列表"
><a @click="handleDisplayUserUnderRole(row)"><a-icon type="team"/></a
></a-tooltip>
<vxe-table-column
field="name"
title="角色名"
:min-width="150"
align="left"
fixed="left"
sortable
show-overflow>
</vxe-table-column>
<!-- 2 -->
<vxe-table-column field="is_app_admin" title="管理员" :min-width="100" align="center">
<template #default="{row}">
<a-icon type="check" v-if="row.is_app_admin" />
</template>
</vxe-table-column>
<vxe-table-column field="id" title="继承自" :min-width="150">
<template #default="{row}">
<a-tag color="cyan" v-for="role in id2parents[row.id]" :key="role.id">{{ role.name }}</a-tag>
</template>
</vxe-table-column>
<vxe-table-column
field="uid"
title="虚拟角色"
:min-width="100"
align="center"
:filters="[
{ label: '是', value: 1 },
{ label: '否', value: 0 },
]"
:filterMultiple="false"
:filter-method="({ value, row }) => {
return value === !row.uid
}">
<template #default="{row}">
{{ row.uid ? '否' : '是' }}
</template>
</vxe-table-column>
<vxe-table-column field="action" title="操作" :min-width="150" fixed="right">
<template #default="{row}">
<div style="width:300px">
<span>
<a-tooltip title="资源列表">
<a
v-if="$route.name !== 'acl_roles'"
@click="handleDisplayUserResource(row)"
><a-icon
type="file-search"
/></a>
</a-tooltip>
<a-divider type="vertical" />
</div>
<a @click="handleEdit(row)"><a-icon type="edit"/></a>
<a-divider type="vertical" />
<a-popconfirm title="确认删除?" @confirm="handleDelete(row)" @cancel="cancel" okText="是" cancelText="否">
<a style="color: red"><a-icon type="delete"/></a>
</a-popconfirm>
</span>
</div>
<div v-if="!row.uid" style="display: inline-block">
<a-tooltip
title="用户列表"
><a @click="handleDisplayUserUnderRole(row)"><a-icon type="team"/></a
></a-tooltip>
<a-divider type="vertical" />
</div>
<a @click="handleEdit(row)"><a-icon type="edit"/></a>
<a-divider type="vertical" />
<a-popconfirm title="确认删除?" @confirm="handleDelete(row)" @cancel="cancel" okText="是" cancelText="否">
<a style="color: red"><a-icon type="delete"/></a>
</a-popconfirm>
</span>
</div>
</template>
</vxe-table-column>
<template slot="empty">
<img :src="require(`@/assets/data_empty.png`)" />
<p style="font-size: 14px; line-height: 17px; color: rgba(0, 0, 0, 0.6)">暂无数据</p>
</template>
<template #pager>
<vxe-pager
:layouts="['Total', 'PrevPage', 'JumpNumber', 'NextPage', 'Sizes']"
:current-page.sync="tablePage.currentPage"
:page-size.sync="tablePage.pageSize"
:total="tablePage.total"
:page-sizes="pageSizeOptions"
@page-change="handlePageChange"
>
</vxe-pager>
</template>
</vxe-grid>
</vxe-table>
<vxe-pager
size="mini"
:layouts="['Total', 'PrevPage', 'JumpNumber', 'NextPage', 'Sizes']"
:current-page.sync="tablePage.currentPage"
:page-size.sync="tablePage.pageSize"
:total="tablePage.total"
:page-sizes="pageSizeOptions"
@page-change="handlePageChange"
>
</vxe-pager>
</a-spin>
<roleForm ref="roleForm" :allRoles="allRoles" :id2parents="id2parents" :handleOk="handleOk"></roleForm>

8
cmdb-ui/src/modules/acl/views/trigger.vue
View File

@ -3,6 +3,7 @@
<div class="trigger-action-btn">
<a-button type="primary" @click="handleCreateTrigger">新增触发器</a-button>
<a-input-search
class="ops-input"
:style="{ display: 'inline', marginLeft: '10px', width: '200px' }"
placeholder="搜索 | 名称"
v-model="searchName"
@ -12,6 +13,9 @@
</div>
<vxe-grid
stripe
size="mini"
class="ops-stripe-table"
:columns="tableColumns"
:data="filterTriggers"
:max-height="`${windowHeight - 185}px`"
@ -60,6 +64,10 @@
<a @click="handleDeleteTrigger(row)" :style="{ color: 'red' }"><a-icon type="delete"/></a>
</a-space>
</template>
<template slot="empty">
<img :src="require(`@/assets/data_empty.png`)" />
<p style="font-size: 14px; line-height: 17px; color: rgba(0, 0, 0, 0.6)">暂无数据</p>
</template>
</vxe-grid>
<trigger-form
ref="triggerForm"