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-18 15:14:35 +08:00
parent 67d7062f39
commit 14c6d7178c
19 changed files with 1794 additions and 1653 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
cmdb-ui/src/modules/acl/views/apps.vue
View File

@ -1,35 +1,37 @@
<template> <template>
<div> <div class="acl-apps">
<a-card title="应用管理" class="acl-app-wrapper" :style="{ '--ant-body-height': `${windowHeight - 150}px` }"> <a-row :gutter="[24, 24]">
<a-row :guttr="24"> <a-col
<a-col v-for="app in apps" :key="app.id" :span="8"> v-for="app in apps"
<div style="margin: 15px"> :key="app.id"
<a-card class="acl-app-single-card"> :xxl="4"
:xl="6"
:md="8"
:sm="12"
:xs="24">
<a-card>
<a-card-meta :title="app.name"> <a-card-meta :title="app.name">
<div slot="description" :title="app.description || ''">{{ app.description || '无' }}</div> <div slot="description" :title="app.description || ''">{{ app.description || '无' }}</div>
<a-avatar style="background-color: #5dc2f1" slot="avatar">{{ app.name[0].toUpperCase() }}</a-avatar> <a-avatar style="background-color: #5dc2f1" slot="avatar">{{ app.name[0].toUpperCase() }}</a-avatar>
</a-card-meta> </a-card-meta>
<template class="ant-card-actions" slot="actions"> <template slot="actions">
<a-icon type="edit" @click="handleEditApp(app)" /> <a-icon type="edit" @click="handleEditApp(app)" />
<a-icon type="delete" @click="handleDeleteApp(app)" /> <a-icon type="delete" @click="handleDeleteApp(app)" />
</template> </template>
</a-card> </a-card>
</div>
</a-col> </a-col>
<a-col :span="8"> <a-col :xxl="4" :xl="6" :md="8" :sm="12" :xs="24">
<div class="acl-app-add" @click="handleCreateApp"> <div class="acl-apps-add" @click="handleCreateApp">
<span class="acl-app-add-icon" style="">+</span> <span class="acl-apps-add-icon">+</span>
</div> </div>
</a-col> </a-col>
</a-row> </a-row>
</a-card>
<app-form ref="appForm" @refresh="loadApps"></app-form> <app-form ref="appForm" @refresh="loadApps"></app-form>
</div> </div>
</template> </template>
<script> <script>
/* eslint-disable */
import { mapState } from 'vuex' import { mapState } from 'vuex'
import { searchApp, addApp, updateApp, deleteApp } from '@/modules/acl/api/app' import { searchApp, deleteApp } from '@/modules/acl/api/app'
import AppForm from './module/appForm' import AppForm from './module/appForm'
export default { export default {
@ -81,32 +83,24 @@ export default {
}, },
} }
</script> </script>
<style lang="less"> <style lang="less">
.acl-app-wrapper { .acl-apps {
> .ant-card-body {
overflow-y: auto;
height: var(--ant-body-height);
cursor: default;
}
.acl-app-single-card {
.ant-card-meta-description > div { .ant-card-meta-description > div {
overflow: hidden; overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap;
} }
&:hover { .acl-apps-add {
box-shadow: 0 2px 8px #0000004d; width: 100%;
}
}
.acl-app-add {
height: 141px; height: 141px;
margin: 15px; display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
border: 1px #e8e8e8 solid; border: 1px #e8e8e8 solid;
transition: all 0.3s; background-color: #fff;
&:hover { .acl-apps-add-icon {
box-shadow: 0 2px 8px #0000004d;
}
.acl-app-add-icon {
font-size: 70px; font-size: 70px;
display: block; display: block;
text-align: center; text-align: center;

14
cmdb-ui/src/modules/acl/views/history.vue
View File

@ -1,6 +1,5 @@
<template> <template>
<div> <div class="acl-history">
<a-card :bordered="false">
<a-tabs default-active-key="1"> <a-tabs default-active-key="1">
<a-tab-pane key="1" tab="权限变更"> <a-tab-pane key="1" tab="权限变更">
<permisson-history-table <permisson-history-table
@ -66,7 +65,6 @@
></trigger-history-table> ></trigger-history-table>
</a-tab-pane> </a-tab-pane>
</a-tabs> </a-tabs>
</a-card>
</div> </div>
</template> </template>
@ -234,4 +232,12 @@ export default {
} }
</script> </script>
<style></style> <style lang="less" scoped>
.acl-history {
border-radius: 15px;
height: calc(100vh - 64px);
margin-bottom: -24px;
padding: 24px;
background-color: #fff;
}
</style>

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

@ -12,12 +12,13 @@
></search-form> ></search-form>
<vxe-table <vxe-table
ref="xTable" ref="xTable"
border stripe
class="ops-stripe-table"
resizable resizable
size="small" size="small"
:data="tableData" :data="tableData"
:loading="loading" :loading="loading"
:max-height="`${windowHeight - windowHeightMinus}px`" :height="`${windowHeight - windowHeightMinus}px`"
:scroll-y="{ enabled: false }" :scroll-y="{ enabled: false }"
> >
<vxe-column field="created_at" width="144px" title="操作时间"> <vxe-column field="created_at" width="144px" title="操作时间">
@ -71,6 +72,7 @@
:isLoading="loading" :isLoading="loading"
@change="onChange" @change="onChange"
@showSizeChange="onShowSizeChange" @showSizeChange="onShowSizeChange"
:style="{ marginTop: '10px' }"
></pager> ></pager>
</div> </div>
</template> </template>
@ -199,7 +201,7 @@ export default {
return this.$store.state.windowHeight return this.$store.state.windowHeight
}, },
windowHeightMinus() { windowHeightMinus() {
return this.isExpand ? 396 : 331 return this.isExpand ? 374 : 310
}, },
tableDataLength() { tableDataLength() {
return this.tableData.length return this.tableData.length

6
cmdb-ui/src/modules/acl/views/module/resourceHistoryTable.vue
View File

@ -14,12 +14,13 @@
></search-form> ></search-form>
<vxe-table <vxe-table
ref="xTable" ref="xTable"
border stripe
class="ops-stripe-table"
size="small" size="small"
:loading="loading" :loading="loading"
:data="tableData" :data="tableData"
resizable resizable
:max-height="`${windowHeight - 331}px`" :height="`${windowHeight - 310}px`"
> >
<vxe-column field="created_at" width="144px" title="操作时间"></vxe-column> <vxe-column field="created_at" width="144px" title="操作时间"></vxe-column>
<vxe-column field="operate_uid" width="130px" title="操作员"></vxe-column> <vxe-column field="operate_uid" width="130px" title="操作员"></vxe-column>
@ -54,6 +55,7 @@
:isLoading="loading" :isLoading="loading"
@change="onChange" @change="onChange"
@showSizeChange="onShowSizeChange" @showSizeChange="onShowSizeChange"
:style="{ marginTop: '10px' }"
></pager> ></pager>
</div> </div>
</template> </template>

62
cmdb-ui/src/modules/acl/views/module/resourceTypeHistoryTable.vue
View File

@ -8,12 +8,13 @@
></search-form> ></search-form>
<vxe-table <vxe-table
ref="xTable" ref="xTable"
border stripe
class="ops-stripe-table"
size="small" size="small"
:data="tableData" :data="tableData"
resizable resizable
:loading="loading" :loading="loading"
:max-height="`${windowHeight - 331}px`" :height="`${windowHeight - 310}px`"
> >
<vxe-column field="created_at" width="144px" title="操作时间"></vxe-column> <vxe-column field="created_at" width="144px" title="操作时间"></vxe-column>
<vxe-column field="operate_uid" width="130px" title="操作员"></vxe-column> <vxe-column field="operate_uid" width="130px" title="操作员"></vxe-column>
@ -48,6 +49,7 @@
:isLoading="loading" :isLoading="loading"
@change="onChange" @change="onChange"
@showSizeChange="onShowSizeChange" @showSizeChange="onShowSizeChange"
:style="{ marginTop: '10px' }"
></pager> ></pager>
</div> </div>
</template> </template>
@ -62,27 +64,27 @@ export default {
props: { props: {
allResourceTypes: { allResourceTypes: {
type: Array, type: Array,
required: true required: true,
}, },
allUsers: { allUsers: {
type: Array, type: Array,
required: true required: true,
}, },
allRoles: { allRoles: {
type: Array, type: Array,
required: true required: true,
}, },
allRolesMap: { allRolesMap: {
type: Map, type: Map,
required: true required: true,
}, },
allUsersMap: { allUsersMap: {
type: Map, type: Map,
required: true required: true,
}, },
allResourceTypesMap: { allResourceTypesMap: {
type: Map, type: Map,
required: true required: true,
}, },
}, },
data() { data() {
@ -96,43 +98,39 @@ export default {
alias: '日期', alias: '日期',
is_choice: false, is_choice: false,
name: 'datetime', name: 'datetime',
value_type: '3' value_type: '3',
}, },
{ {
alias: '操作员', alias: '操作员',
is_choice: true, is_choice: true,
name: 'operate_uid', name: 'operate_uid',
value_type: '2', value_type: '2',
choice_value: this.allUsers choice_value: this.allUsers,
}, },
{ {
alias: '操作', alias: '操作',
is_choice: true, is_choice: true,
name: 'operate_type', name: 'operate_type',
value_type: '2', value_type: '2',
choice_value: [ choice_value: [{ 新建: 'create' }, { 修改: 'update' }, { 删除: 'delete' }],
{ '新建': 'create' },
{ '修改': 'update' },
{ '删除': 'delete' },
]
}, },
{ {
alias: '资源类型', alias: '资源类型',
is_choice: true, is_choice: true,
name: 'link_id', name: 'link_id',
value_type: '2', value_type: '2',
choice_value: this.allResourceTypes choice_value: this.allResourceTypes,
} },
], ],
operateTypeMap: new Map([ operateTypeMap: new Map([
['create', '新建'], ['create', '新建'],
['update', '修改'], ['update', '修改'],
['delete', '删除'] ['delete', '删除'],
]), ]),
colorMap: new Map([ colorMap: new Map([
['create', 'green'], ['create', 'green'],
['update', 'orange'], ['update', 'orange'],
['delete', 'red'] ['delete', 'red'],
]), ]),
queryParams: { queryParams: {
page: 1, page: 1,
@ -140,7 +138,7 @@ export default {
app_id: this.$route.name.split('_')[0], app_id: this.$route.name.split('_')[0],
scope: 'resource_type', scope: 'resource_type',
start: '', start: '',
end: '' end: '',
}, },
} }
}, },
@ -154,7 +152,7 @@ export default {
'$route.name': async function(oldName, newName) { '$route.name': async function(oldName, newName) {
this.app_id = this.$route.name.split('_')[0] this.app_id = this.$route.name.split('_')[0]
await this.getTable(this.queryParams) await this.getTable(this.queryParams)
} },
}, },
computed: { computed: {
windowHeight() { windowHeight() {
@ -162,14 +160,14 @@ export default {
}, },
tableDataLength() { tableDataLength() {
return this.tableData.length return this.tableData.length
} },
}, },
methods: { methods: {
async getTable(queryParams) { async getTable(queryParams) {
try { try {
this.loading = true this.loading = true
const { data } = await searchResourceHistory(this.handleQueryParams(queryParams)) const { data } = await searchResourceHistory(this.handleQueryParams(queryParams))
data.forEach(item => { data.forEach((item) => {
this.handleChangeDescription(item, item.operate_type) this.handleChangeDescription(item, item.operate_type)
item.operate_uid = this.allUsersMap.get(item.operate_uid) item.operate_uid = this.allUsersMap.get(item.operate_uid)
}) })
@ -211,7 +209,15 @@ export default {
let flag = false let flag = false
let q = queryParams.q ? queryParams.q : '' let q = queryParams.q ? queryParams.q : ''
for (const key in queryParams) { for (const key in queryParams) {
if (key !== 'page' && key !== 'page_size' && key !== 'app_id' && key !== 'q' && key !== 'start' && key !== 'end' && queryParams[key] !== undefined) { if (
key !== 'page' &&
key !== 'page_size' &&
key !== 'app_id' &&
key !== 'q' &&
key !== 'start' &&
key !== 'end' &&
queryParams[key] !== undefined
) {
flag = true flag = true
if (q) q += `,${key}:${queryParams[key]}` if (q) q += `,${key}:${queryParams[key]}`
else q += `${key}:${queryParams[key]}` else q += `${key}:${queryParams[key]}`
@ -248,7 +254,9 @@ export default {
} }
const currentPerms = item.extra.permission_ids.current const currentPerms = item.extra.permission_ids.current
const originPerms = item.extra.permission_ids.origin const originPerms = item.extra.permission_ids.origin
if (!_.isEqual(currentPerms, originPerms)) item.changeDescription += ` 【 permission_ids : 由 ${originPerms} 改为 ${currentPerms} 】 ` if (!_.isEqual(currentPerms, originPerms)) {
item.changeDescription += ` 【 permission_ids : 由 ${originPerms} 改为 ${currentPerms} 】 `
}
if (!item.changeDescription) item.changeDescription = '没有修改' if (!item.changeDescription) item.changeDescription = '没有修改'
break break
} }
@ -257,8 +265,8 @@ export default {
break break
} }
} }
} },
} },
} }
</script> </script>

86
cmdb-ui/src/modules/acl/views/module/roleHistoryTable.vue
View File

@ -11,12 +11,13 @@
></search-form> ></search-form>
<vxe-table <vxe-table
ref="xTable" ref="xTable"
border stripe
class="ops-stripe-table"
:data="tableData" :data="tableData"
size="small" size="small"
:loading="loading" :loading="loading"
resizable resizable
:max-height="`${windowHeight - 331}px`" :height="`${windowHeight - 310}px`"
> >
<vxe-column field="created_at" width="144px" title="操作时间"></vxe-column> <vxe-column field="created_at" width="144px" title="操作时间"></vxe-column>
<vxe-column field="operate_uid" title="操作员" width="130px"></vxe-column> <vxe-column field="operate_uid" title="操作员" width="130px"></vxe-column>
@ -33,7 +34,9 @@
<a-tag color="blue">{{ row.current.name || row.origin.name }}</a-tag> <a-tag color="blue">{{ row.current.name || row.origin.name }}</a-tag>
</template> </template>
<template v-else> <template v-else>
<a-tag v-for="(id,index) in row.extra.child_ids" :key="'child_ids_' + id + index" color="blue">{{ id }}</a-tag> <a-tag v-for="(id, index) in row.extra.child_ids" :key="'child_ids_' + id + index" color="blue">{{
id
}}</a-tag>
</template> </template>
</template> </template>
</vxe-column> </vxe-column>
@ -43,7 +46,9 @@
<a-icon type="check" v-if="row.current.is_app_admin" /> <a-icon type="check" v-if="row.current.is_app_admin" />
</template> </template>
<template v-else> <template v-else>
<a-tag v-for="(id,index) in row.extra.parent_ids" :key="'parent_ids_' + id + index" color="cyan">{{ id }}</a-tag> <a-tag v-for="(id, index) in row.extra.parent_ids" :key="'parent_ids_' + id + index" color="cyan">{{
id
}}</a-tag>
</template> </template>
</template> </template>
</vxe-column> </vxe-column>
@ -64,6 +69,7 @@
:isLoading="loading" :isLoading="loading"
@change="onChange" @change="onChange"
@showSizeChange="onShowSizeChange" @showSizeChange="onShowSizeChange"
:style="{ marginTop: '10px' }"
></pager> ></pager>
</div> </div>
</template> </template>
@ -78,19 +84,19 @@ export default {
props: { props: {
allUsers: { allUsers: {
type: Array, type: Array,
required: true required: true,
}, },
allRoles: { allRoles: {
type: Array, type: Array,
required: true required: true,
}, },
allRolesMap: { allRolesMap: {
type: Map, type: Map,
required: true required: true,
}, },
allUsersMap: { allUsersMap: {
type: Map, type: Map,
required: true required: true,
}, },
}, },
data() { data() {
@ -111,7 +117,7 @@ export default {
['delete', 'red'], ['delete', 'red'],
['update', 'orange'], ['update', 'orange'],
['role_relation_add', 'green'], ['role_relation_add', 'green'],
['role_relation_delete', 'red'] ['role_relation_delete', 'red'],
]), ]),
queryParams: { queryParams: {
page: 1, page: 1,
@ -119,21 +125,21 @@ export default {
app_id: this.$route.name.split('_')[0], app_id: this.$route.name.split('_')[0],
scope: 'role', scope: 'role',
start: '', start: '',
end: '' end: '',
}, },
roleTableAttrList: [ roleTableAttrList: [
{ {
alias: '日期', alias: '日期',
is_choice: false, is_choice: false,
name: 'datetime', name: 'datetime',
value_type: '3' value_type: '3',
}, },
{ {
alias: '操作员', alias: '操作员',
is_choice: true, is_choice: true,
name: 'operate_uid', name: 'operate_uid',
value_type: '2', value_type: '2',
choice_value: this.allUsers choice_value: this.allUsers,
}, },
{ {
alias: '操作', alias: '操作',
@ -141,14 +147,14 @@ export default {
name: 'operate_type', name: 'operate_type',
value_type: '2', value_type: '2',
choice_value: [ choice_value: [
{ '新建': 'create' }, { 新建: 'create' },
{ '修改': 'update' }, { 修改: 'update' },
{ '删除': 'delete' }, { 删除: 'delete' },
{ '添加角色关系': 'role_relation_add' }, { 添加角色关系: 'role_relation_add' },
{ '删除角色关系': 'role_relation_delete' }, { 删除角色关系: 'role_relation_delete' },
] ],
} },
] ],
} }
}, },
computed: { computed: {
@ -169,18 +175,22 @@ export default {
'$route.name': async function(oldName, newName) { '$route.name': async function(oldName, newName) {
this.app_id = this.$route.name.split('_')[0] this.app_id = this.$route.name.split('_')[0]
await this.getTable(this.queryParams) await this.getTable(this.queryParams)
} },
}, },
methods: { methods: {
async getTable(queryParams) { async getTable(queryParams) {
try { try {
this.loading = true this.loading = true
const { data, id2roles, id2perms, id2resources } = await searchRoleHistory(this.handleQueryParams(queryParams)) const { data, id2roles, id2perms, id2resources } = await searchRoleHistory(this.handleQueryParams(queryParams))
data.forEach(item => { data.forEach((item) => {
item.operate_uid = this.allUsersMap.get(item.operate_uid) item.operate_uid = this.allUsersMap.get(item.operate_uid)
if (item.operate_type === 'role_relation_add' || item.operate_type === 'role_relation_delete') { if (item.operate_type === 'role_relation_add' || item.operate_type === 'role_relation_delete') {
item.extra.child_ids.forEach((subItem, index) => { item.extra.child_ids[index] = id2roles[subItem].name }) item.extra.child_ids.forEach((subItem, index) => {
item.extra.parent_ids.forEach((subItem, index) => { item.extra.parent_ids[index] = id2roles[subItem].name }) item.extra.child_ids[index] = id2roles[subItem].name
})
item.extra.parent_ids.forEach((subItem, index) => {
item.extra.parent_ids[index] = id2roles[subItem].name
})
} else { } else {
this.handleChangeDescription(item, item.operate_type, id2roles, id2perms, id2resources) this.handleChangeDescription(item, item.operate_type, id2roles, id2perms, id2resources)
} }
@ -220,7 +230,7 @@ export default {
page: 1, page: 1,
page_size: 50, page_size: 50,
app_id: this.$route.name.split('_')[0], app_id: this.$route.name.split('_')[0],
scope: this.checked ? 'role_relation' : 'role' scope: this.checked ? 'role_relation' : 'role',
} }
this.getTable(this.queryParams) this.getTable(this.queryParams)
}, },
@ -230,7 +240,15 @@ export default {
let flag = false let flag = false
let q = queryParams.q ? queryParams.q : '' let q = queryParams.q ? queryParams.q : ''
for (const key in queryParams) { for (const key in queryParams) {
if (key !== 'page' && key !== 'page_size' && key !== 'app_id' && key !== 'q' && key !== 'start' && key !== 'end' && queryParams[key] !== undefined) { if (
key !== 'page' &&
key !== 'page_size' &&
key !== 'app_id' &&
key !== 'q' &&
key !== 'start' &&
key !== 'end' &&
queryParams[key] !== undefined
) {
flag = true flag = true
if (q) q += `,${key}:${queryParams[key]}` if (q) q += `,${key}:${queryParams[key]}`
else q += `${key}:${queryParams[key]}` else q += `${key}:${queryParams[key]}`
@ -270,13 +288,19 @@ export default {
break break
} }
case 'delete': { case 'delete': {
const { extra: { child_ids, parent_ids, role_permissions } } = item const {
child_ids.forEach((subItem, index) => { child_ids[index] = id2roles[subItem].name }) extra: { child_ids, parent_ids, role_permissions },
parent_ids.forEach((subItem, index) => { parent_ids[index] = id2roles[subItem].name }) } = item
child_ids.forEach((subItem, index) => {
child_ids[index] = id2roles[subItem].name
})
parent_ids.forEach((subItem, index) => {
parent_ids[index] = id2roles[subItem].name
})
const resourceMap = new Map() const resourceMap = new Map()
const permsArr = [] const permsArr = []
role_permissions.forEach(subItem => { role_permissions.forEach((subItem) => {
const resource_id = subItem.resource_id const resource_id = subItem.resource_id
const perm_id = subItem.perm_id const perm_id = subItem.perm_id
if (resourceMap.has(resource_id)) { if (resourceMap.has(resource_id)) {
@ -295,7 +319,7 @@ export default {
} }
} }
}, },
} },
} }
</script> </script>

95
cmdb-ui/src/modules/acl/views/module/triggerHistoryTable.vue
View File

@ -8,12 +8,13 @@
></search-form> ></search-form>
<vxe-table <vxe-table
ref="xTable" ref="xTable"
border stripe
class="ops-stripe-table"
:data="tableData" :data="tableData"
:loading="loading" :loading="loading"
size="small" size="small"
resizable resizable
:max-height="`${windowHeight - 331}px`" :height="`${windowHeight - 310}px`"
> >
<vxe-column field="created_at" width="144px" title="操作时间"></vxe-column> <vxe-column field="created_at" width="144px" title="操作时间"></vxe-column>
<vxe-column field="operate_uid" width="130px" title="操作员"></vxe-column> <vxe-column field="operate_uid" width="130px" title="操作员"></vxe-column>
@ -47,6 +48,7 @@
:isLoading="loading" :isLoading="loading"
@change="onChange" @change="onChange"
@showSizeChange="onShowSizeChange" @showSizeChange="onShowSizeChange"
:style="{ marginTop: '10px' }"
></pager> ></pager>
</div> </div>
</template> </template>
@ -61,31 +63,31 @@ export default {
props: { props: {
allUsers: { allUsers: {
type: Array, type: Array,
required: true required: true,
}, },
allRoles: { allRoles: {
type: Array, type: Array,
required: true required: true,
}, },
allTriggers: { allTriggers: {
type: Array, type: Array,
required: true required: true,
}, },
allRolesMap: { allRolesMap: {
type: Map, type: Map,
required: true required: true,
}, },
allTriggersMap: { allTriggersMap: {
type: Map, type: Map,
required: true required: true,
}, },
allUsersMap: { allUsersMap: {
type: Map, type: Map,
required: true required: true,
}, },
allResourceTypesMap: { allResourceTypesMap: {
type: Map, type: Map,
required: true required: true,
}, },
}, },
data() { data() {
@ -112,14 +114,14 @@ export default {
alias: '日期', alias: '日期',
is_choice: false, is_choice: false,
name: 'datetime', name: 'datetime',
value_type: '3' value_type: '3',
}, },
{ {
alias: '操作员', alias: '操作员',
is_choice: true, is_choice: true,
name: 'operate_uid', name: 'operate_uid',
value_type: '2', value_type: '2',
choice_value: this.allUsers choice_value: this.allUsers,
}, },
{ {
alias: '操作', alias: '操作',
@ -127,25 +129,25 @@ export default {
name: 'operate_type', name: 'operate_type',
value_type: '2', value_type: '2',
choice_value: [ choice_value: [
{ '新建': 'create' }, { 新建: 'create' },
{ '修改': 'update' }, { 修改: 'update' },
{ '删除': 'delete' }, { 删除: 'delete' },
{ '应用': 'trigger_apply' }, { 应用: 'trigger_apply' },
{ '取消': 'trigger_cancel' }, { 取消: 'trigger_cancel' },
] ],
}, },
{ {
alias: '触发器', alias: '触发器',
is_choice: true, is_choice: true,
name: 'trigger_id', name: 'trigger_id',
value_type: '2', value_type: '2',
choice_value: this.allTriggers choice_value: this.allTriggers,
} },
], ],
queryParams: { queryParams: {
page: 1, page: 1,
page_size: 50, page_size: 50,
app_id: this.$route.name.split('_')[0] app_id: this.$route.name.split('_')[0],
}, },
} }
}, },
@ -159,7 +161,7 @@ export default {
'$route.name': async function(oldName, newName) { '$route.name': async function(oldName, newName) {
this.app_id = this.$route.name.split('_')[0] this.app_id = this.$route.name.split('_')[0]
await this.getTable(this.queryParams) await this.getTable(this.queryParams)
} },
}, },
computed: { computed: {
windowHeight() { windowHeight() {
@ -167,14 +169,14 @@ export default {
}, },
tableDataLength() { tableDataLength() {
return this.tableData.length return this.tableData.length
} },
}, },
methods: { methods: {
async getTable(queryParams) { async getTable(queryParams) {
try { try {
this.loading = true this.loading = true
const res = await searchTriggerHistory(this.handleQueryParams(queryParams)) const res = await searchTriggerHistory(this.handleQueryParams(queryParams))
res.data.forEach(item => { res.data.forEach((item) => {
this.handleChangeDescription(item, item.operate_type) this.handleChangeDescription(item, item.operate_type)
item.trigger_id = this.allTriggersMap.get(item.trigger_id) item.trigger_id = this.allTriggersMap.get(item.trigger_id)
item.operate_uid = this.allUsersMap.get(item.operate_uid) item.operate_uid = this.allUsersMap.get(item.operate_uid)
@ -206,7 +208,7 @@ export default {
this.queryParams = { this.queryParams = {
page: 1, page: 1,
page_size: 50, page_size: 50,
app_id: this.$route.name.split('_')[0] app_id: this.$route.name.split('_')[0],
} }
this.getTable(this.queryParams) this.getTable(this.queryParams)
}, },
@ -217,8 +219,12 @@ export default {
case 'create': { case 'create': {
const str = item.current.roles const str = item.current.roles
const newArr = str.slice(1, str.length - 1).split(', ') const newArr = str.slice(1, str.length - 1).split(', ')
const newStr = newArr.map(i => this.allRolesMap.get(Number(i))).join('，') const newStr = newArr.map((i) => this.allRolesMap.get(Number(i))).join('，')
item.changeDescription = `新增触发器：${item.current.name}\n资源类型：${this.allResourceTypesMap.get(item.current.resource_type_id)}，资源名：${item.current.wildcard}，角色：[${newStr}]\n权限：${item.current.permissions}\n状态：${item.current.enabled}` item.changeDescription = `新增触发器：${item.current.name}\n资源类型：${this.allResourceTypesMap.get(
item.current.resource_type_id
)}，资源名：${item.current.wildcard}，角色：[${newStr}]\n权限：${item.current.permissions}\n状态：${
item.current.enabled
}`
break break
} }
case 'update': { case 'update': {
@ -242,22 +248,34 @@ export default {
case 'delete': { case 'delete': {
const str = item.origin.roles const str = item.origin.roles
const newArr = str.slice(1, str.length - 1).split(', ') const newArr = str.slice(1, str.length - 1).split(', ')
const newStr = newArr.map(i => this.allRolesMap.get(Number(i))).join('，') const newStr = newArr.map((i) => this.allRolesMap.get(Number(i))).join('，')
item.changeDescription = `删除触发器：${item.origin.name}\n资源类型：${this.allResourceTypesMap.get(item.origin.resource_type_id)}，资源名：${item.origin.wildcard}，角色：[${newStr}]\n权限：${item.origin.permissions}\n状态：${item.origin.enabled}` item.changeDescription = `删除触发器：${item.origin.name}\n资源类型：${this.allResourceTypesMap.get(
item.origin.resource_type_id
)}，资源名：${item.origin.wildcard}，角色：[${newStr}]\n权限：${item.origin.permissions}\n状态：${
item.origin.enabled
}`
break break
} }
case 'trigger_apply': { case 'trigger_apply': {
const str = item.current.roles const str = item.current.roles
const newArr = str.slice(1, str.length - 1).split(', ') const newArr = str.slice(1, str.length - 1).split(', ')
const newStr = newArr.map(i => this.allRolesMap.get(Number(i))).join('，') const newStr = newArr.map((i) => this.allRolesMap.get(Number(i))).join('，')
item.changeDescription = `应用触发器：${item.current.name}\n资源类型：${this.allResourceTypesMap.get(item.current.resource_type_id)}，资源名：${item.current.wildcard}，角色：[${newStr}]\n权限：${item.current.permissions}\n状态：${item.current.enabled}` item.changeDescription = `应用触发器：${item.current.name}\n资源类型：${this.allResourceTypesMap.get(
item.current.resource_type_id
)}，资源名：${item.current.wildcard}，角色：[${newStr}]\n权限：${item.current.permissions}\n状态：${
item.current.enabled
}`
break break
} }
case 'trigger_cancel': { case 'trigger_cancel': {
const str = item.current.roles const str = item.current.roles
const newArr = str.slice(1, str.length - 1).split(', ') const newArr = str.slice(1, str.length - 1).split(', ')
const newStr = newArr.map(i => this.allRolesMap.get(Number(i))).join('，') const newStr = newArr.map((i) => this.allRolesMap.get(Number(i))).join('，')
item.changeDescription = `取消触发器：${item.current.name}\n资源类型：${this.allResourceTypesMap.get(item.current.resource_type_id)}，资源名：${item.current.wildcard}，角色：[${newStr}]\n权限：${item.current.permissions}\n状态：${item.current.enabled}` item.changeDescription = `取消触发器：${item.current.name}\n资源类型：${this.allResourceTypesMap.get(
item.current.resource_type_id
)}，资源名：${item.current.wildcard}，角色：[${newStr}]\n权限：${item.current.permissions}\n状态：${
item.current.enabled
}`
break break
} }
} }
@ -265,7 +283,14 @@ export default {
handleQueryParams(queryParams) { handleQueryParams(queryParams) {
let q = '' let q = ''
for (const key in queryParams) { for (const key in queryParams) {
if (key !== 'page' && key !== 'page_size' && key !== 'app_id' && key !== 'start' && key !== 'end' && queryParams[key] !== undefined) { if (
key !== 'page' &&
key !== 'page_size' &&
key !== 'app_id' &&
key !== 'start' &&
key !== 'end' &&
queryParams[key] !== undefined
) {
if (q) { if (q) {
q += `,${key}:${queryParams[key]}` q += `,${key}:${queryParams[key]}`
} else { } else {
@ -278,8 +303,8 @@ export default {
}, },
handleTagColor(operateType) { handleTagColor(operateType) {
return this.colorMap.get(operateType) return this.colorMap.get(operateType)
} },
} },
} }
</script> </script>

12
cmdb-ui/src/modules/acl/views/operation_history/index.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div :style="{ backgroundColor: '#fff', padding: '24px' }"> <div class="acl-operation-history">
<a-tabs default-active-key="1"> <a-tabs default-active-key="1">
<a-tab-pane key="1" tab="权限变更"> <a-tab-pane key="1" tab="权限变更">
<permisson-table></permisson-table> <permisson-table></permisson-table>
@ -31,4 +31,12 @@ export default {
} }
</script> </script>
<style></style> <style lang="less" scoped>
.acl-operation-history {
border-radius: 15px;
height: calc(100vh - 64px);
margin-bottom: -24px;
padding: 24px;
background-color: #fff;
}
</style>

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

@ -13,12 +13,13 @@
></search-form> ></search-form>
<vxe-table <vxe-table
ref="xTable" ref="xTable"
border stripe
class="ops-stripe-table"
resizable resizable
size="small" size="small"
:data="tableData" :data="tableData"
:loading="loading" :loading="loading"
:max-height="`${windowHeight - windowHeightMinus}px`" :height="`${windowHeight - windowHeightMinus}px`"
:scroll-y="{ enabled: false }" :scroll-y="{ enabled: false }"
> >
<vxe-column field="created_at" width="144px" title="操作时间"> <vxe-column field="created_at" width="144px" title="操作时间">
@ -72,6 +73,7 @@
:isLoading="loading" :isLoading="loading"
@change="onChange" @change="onChange"
@showSizeChange="onShowSizeChange" @showSizeChange="onShowSizeChange"
:style="{ marginTop: '10px' }"
></pager> ></pager>
</div> </div>
</template> </template>
@ -172,7 +174,7 @@ export default {
return this.$store.state.windowHeight return this.$store.state.windowHeight
}, },
windowHeightMinus() { windowHeightMinus() {
return this.isExpand ? 396 : 331 return this.isExpand ? 374 : 310
}, },
tableDataLength() { tableDataLength() {
return this.tableData.length return this.tableData.length

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

@ -15,13 +15,14 @@
@resourceClear="resourceClear" @resourceClear="resourceClear"
></search-form> ></search-form>
<vxe-table <vxe-table
stripe
class="ops-stripe-table"
ref="xTable" ref="xTable"
border
resizable resizable
size="small" size="small"
:loading="loading" :loading="loading"
:data="tableData" :data="tableData"
:max-height="`${windowHeight - windowHeightMinus}px`" :height="`${windowHeight - windowHeightMinus}px`"
> >
<vxe-column field="created_at" width="144px" title="操作时间"></vxe-column> <vxe-column field="created_at" width="144px" title="操作时间"></vxe-column>
<vxe-column field="operate_uid" width="130px" title="操作员"></vxe-column> <vxe-column field="operate_uid" width="130px" title="操作员"></vxe-column>
@ -56,6 +57,7 @@
:isLoading="loading" :isLoading="loading"
@change="onChange" @change="onChange"
@showSizeChange="onShowSizeChange" @showSizeChange="onShowSizeChange"
:style="{ marginTop: '10px' }"
></pager> ></pager>
</div> </div>
</template> </template>
@ -160,7 +162,7 @@ export default {
return this.$store.state.windowHeight return this.$store.state.windowHeight
}, },
windowHeightMinus() { windowHeightMinus() {
return this.isExpand ? 396 : 331 return this.isExpand ? 374 : 310
}, },
tableDataLength() { tableDataLength() {
return this.tableData.length return this.tableData.length

70
cmdb-ui/src/modules/acl/views/operation_history/modules/resourceTypeHistoryTable.vue
View File

@ -10,12 +10,13 @@
></search-form> ></search-form>
<vxe-table <vxe-table
ref="xTable" ref="xTable"
border stripe
class="ops-stripe-table"
resizable resizable
size="small" size="small"
:data="tableData" :data="tableData"
:loading="loading" :loading="loading"
:max-height="`${windowHeight - windowHeightMinus}px`" :height="`${windowHeight - windowHeightMinus}px`"
> >
<vxe-column field="created_at" width="144px" title="操作时间"></vxe-column> <vxe-column field="created_at" width="144px" title="操作时间"></vxe-column>
<vxe-column field="operate_uid" width="130px" title="操作员"></vxe-column> <vxe-column field="operate_uid" width="130px" title="操作员"></vxe-column>
@ -50,6 +51,7 @@
:isLoading="loading" :isLoading="loading"
@change="onChange" @change="onChange"
@showSizeChange="onShowSizeChange" @showSizeChange="onShowSizeChange"
:style="{ marginTop: '10px' }"
></pager> ></pager>
</div> </div>
</template> </template>
@ -81,57 +83,53 @@ export default {
alias: '日期', alias: '日期',
is_choice: false, is_choice: false,
name: 'datetime', name: 'datetime',
value_type: '3' value_type: '3',
}, },
{ {
alias: '应用', alias: '应用',
is_choice: true, is_choice: true,
name: 'app_id', name: 'app_id',
value_type: '2', value_type: '2',
choice_value: [] choice_value: [],
}, },
{ {
alias: '操作员', alias: '操作员',
is_choice: true, is_choice: true,
name: 'operate_uid', name: 'operate_uid',
value_type: '2', value_type: '2',
choice_value: [] choice_value: [],
}, },
{ {
alias: '资源类型', alias: '资源类型',
is_choice: true, is_choice: true,
name: 'link_id', name: 'link_id',
value_type: '2', value_type: '2',
choice_value: [] choice_value: [],
}, },
{ {
alias: '操作', alias: '操作',
is_choice: true, is_choice: true,
name: 'operate_type', name: 'operate_type',
value_type: '2', value_type: '2',
choice_value: [ choice_value: [{ 新建: 'create' }, { 修改: 'update' }, { 删除: 'delete' }],
{ '新建': 'create' }, },
{ '修改': 'update' },
{ '删除': 'delete' },
]
}
], ],
operateTypeMap: new Map([ operateTypeMap: new Map([
['create', '新建'], ['create', '新建'],
['update', '修改'], ['update', '修改'],
['delete', '删除'] ['delete', '删除'],
]), ]),
colorMap: new Map([ colorMap: new Map([
['create', 'green'], ['create', 'green'],
['update', 'orange'], ['update', 'orange'],
['delete', 'red'] ['delete', 'red'],
]), ]),
queryParams: { queryParams: {
page: 1, page: 1,
page_size: 50, page_size: 50,
scope: 'resource_type', scope: 'resource_type',
start: '', start: '',
end: '' end: '',
}, },
} }
}, },
@ -155,18 +153,18 @@ export default {
return this.$store.state.windowHeight return this.$store.state.windowHeight
}, },
windowHeightMinus() { windowHeightMinus() {
return this.isExpand ? 396 : 331 return this.isExpand ? 374 : 310
}, },
tableDataLength() { tableDataLength() {
return this.tableData.length return this.tableData.length
} },
}, },
methods: { methods: {
async getTable(queryParams) { async getTable(queryParams) {
try { try {
this.loading = true this.loading = true
const { data } = await searchResourceHistory(this.handleQueryParams(queryParams)) const { data } = await searchResourceHistory(this.handleQueryParams(queryParams))
data.forEach(item => { data.forEach((item) => {
this.handleChangeDescription(item, item.operate_type) this.handleChangeDescription(item, item.operate_type)
item.operate_uid = this.allUsersMap.get(item.operate_uid) item.operate_uid = this.allUsersMap.get(item.operate_uid)
}) })
@ -178,7 +176,9 @@ export default {
async getAllApps() { async getAllApps() {
const { apps } = await searchApp() const { apps } = await searchApp()
const allApps = [] const allApps = []
apps.forEach(item => { allApps.push({ [item.name]: item.id }) }) apps.forEach((item) => {
allApps.push({ [item.name]: item.id })
})
this.allApps = allApps this.allApps = allApps
this.resourceTableAttrList[1].choice_value = this.allApps this.resourceTableAttrList[1].choice_value = this.allApps
}, },
@ -186,7 +186,7 @@ export default {
const { users } = await searchUser({ page_size: 10000, app_id: 'acl' }) const { users } = await searchUser({ page_size: 10000, app_id: 'acl' })
const allUsers = [] const allUsers = []
const allUsersMap = new Map() const allUsersMap = new Map()
users.forEach(item => { users.forEach((item) => {
allUsers.push({ [item.nickname]: item.uid }) allUsers.push({ [item.nickname]: item.uid })
allUsersMap.set(item.uid, item.nickname) allUsersMap.set(item.uid, item.nickname)
}) })
@ -202,10 +202,12 @@ export default {
const { groups } = await searchResourceType({ const { groups } = await searchResourceType({
page: 1, page: 1,
page_size: 9999, page_size: 9999,
app_id: app_id app_id: app_id,
}) })
const allResourceTypes = [] const allResourceTypes = []
groups.forEach(item => { allResourceTypes.push({ [item.name]: item.id }) }) groups.forEach((item) => {
allResourceTypes.push({ [item.name]: item.id })
})
this.allResourceTypes = allResourceTypes this.allResourceTypes = allResourceTypes
this.resourceTableAttrList[3].choice_value = this.allResourceTypes this.resourceTableAttrList[3].choice_value = this.allResourceTypes
}, },
@ -254,7 +256,15 @@ export default {
let flag = false let flag = false
let q = queryParams.q ? queryParams.q : '' let q = queryParams.q ? queryParams.q : ''
for (const key in queryParams) { for (const key in queryParams) {
if (key !== 'page' && key !== 'page_size' && key !== 'app_id' && key !== 'q' && key !== 'start' && key !== 'end' && queryParams[key] !== undefined) { if (
key !== 'page' &&
key !== 'page_size' &&
key !== 'app_id' &&
key !== 'q' &&
key !== 'start' &&
key !== 'end' &&
queryParams[key] !== undefined
) {
flag = true flag = true
if (q) q += `,${key}:${queryParams[key]}` if (q) q += `,${key}:${queryParams[key]}`
else q += `${key}:${queryParams[key]}` else q += `${key}:${queryParams[key]}`
@ -272,7 +282,8 @@ export default {
// create // create
case 'create': { case 'create': {
const description = item.current?.description === undefined ? '无' : item.current?.description const description = item.current?.description === undefined ? '无' : item.current?.description
const permission = item.extra.permission_ids?.current === undefined ? '无' : item.extra.permission_ids?.current const permission =
item.extra.permission_ids?.current === undefined ? '无' : item.extra.permission_ids?.current
item.changeDescription = `新增资源类型：${item.current.name}\n描述：${description}\n权限：${permission}` item.changeDescription = `新增资源类型：${item.current.name}\n描述：${description}\n权限：${permission}`
break break
} }
@ -291,9 +302,12 @@ export default {
} }
} }
} }
const currentPerms = item.extra.permission_ids?.current === undefined ? '无' : item.extra.permission_ids?.current const currentPerms =
item.extra.permission_ids?.current === undefined ? '无' : item.extra.permission_ids?.current
const originPerms = item.extra.permission_ids?.origin === undefined ? '无' : item.extra.permission_ids?.origin const originPerms = item.extra.permission_ids?.origin === undefined ? '无' : item.extra.permission_ids?.origin
if (!_.isEqual(currentPerms, originPerms)) item.changeDescription += ` 【 permission_ids : 由 ${originPerms} 改为 ${currentPerms} 】 ` if (!_.isEqual(currentPerms, originPerms)) {
item.changeDescription += ` 【 permission_ids : 由 ${originPerms} 改为 ${currentPerms} 】 `
}
if (!item.changeDescription) item.changeDescription = '没有修改' if (!item.changeDescription) item.changeDescription = '没有修改'
break break
} }
@ -304,8 +318,8 @@ export default {
break break
} }
} }
} },
} },
} }
</script> </script>

86
cmdb-ui/src/modules/acl/views/operation_history/modules/roleHistoryTable.vue
View File

@ -10,13 +10,14 @@
@searchFormReset="searchFormReset" @searchFormReset="searchFormReset"
></search-form> ></search-form>
<vxe-table <vxe-table
stripe
class="ops-stripe-table"
ref="xTable" ref="xTable"
border
resizable resizable
size="small" size="small"
:data="tableData" :data="tableData"
:loading="loading" :loading="loading"
:max-height="`${windowHeight - 331}px`" :height="`${windowHeight - 310}px`"
> >
<vxe-column field="created_at" width="144px" title="操作时间"></vxe-column> <vxe-column field="created_at" width="144px" title="操作时间"></vxe-column>
<vxe-column field="operate_uid" width="130px" title="操作员"></vxe-column> <vxe-column field="operate_uid" width="130px" title="操作员"></vxe-column>
@ -33,7 +34,9 @@
<a-tag color="blue">{{ row.current.name || row.origin.name }}</a-tag> <a-tag color="blue">{{ row.current.name || row.origin.name }}</a-tag>
</template> </template>
<template v-else> <template v-else>
<a-tag v-for="(id,index) in row.extra.child_ids" :key="'child_ids_' + id + index" color="blue">{{ id }}</a-tag> <a-tag v-for="(id, index) in row.extra.child_ids" :key="'child_ids_' + id + index" color="blue">{{
id
}}</a-tag>
</template> </template>
</template> </template>
</vxe-column> </vxe-column>
@ -43,7 +46,9 @@
<a-icon type="check" v-if="row.current.is_app_admin" /> <a-icon type="check" v-if="row.current.is_app_admin" />
</template> </template>
<template v-else> <template v-else>
<a-tag v-for="(id,index) in row.extra.parent_ids" :key="'parent_ids_' + id + index" color="cyan">{{ id }}</a-tag> <a-tag v-for="(id, index) in row.extra.parent_ids" :key="'parent_ids_' + id + index" color="cyan">{{
id
}}</a-tag>
</template> </template>
</template> </template>
</vxe-column> </vxe-column>
@ -64,6 +69,7 @@
:isLoading="loading" :isLoading="loading"
@change="onChange" @change="onChange"
@showSizeChange="onShowSizeChange" @showSizeChange="onShowSizeChange"
:style="{ marginTop: '10px' }"
></pager> ></pager>
</div> </div>
</template> </template>
@ -100,35 +106,35 @@ export default {
['delete', 'red'], ['delete', 'red'],
['update', 'orange'], ['update', 'orange'],
['role_relation_add', 'green'], ['role_relation_add', 'green'],
['role_relation_delete', 'red'] ['role_relation_delete', 'red'],
]), ]),
queryParams: { queryParams: {
page: 1, page: 1,
page_size: 50, page_size: 50,
scope: 'role', scope: 'role',
start: '', start: '',
end: '' end: '',
}, },
roleTableAttrList: [ roleTableAttrList: [
{ {
alias: '日期', alias: '日期',
is_choice: false, is_choice: false,
name: 'datetime', name: 'datetime',
value_type: '3' value_type: '3',
}, },
{ {
alias: '应用', alias: '应用',
is_choice: true, is_choice: true,
name: 'app_id', name: 'app_id',
value_type: '2', value_type: '2',
choice_value: [] choice_value: [],
}, },
{ {
alias: '操作员', alias: '操作员',
is_choice: true, is_choice: true,
name: 'operate_uid', name: 'operate_uid',
value_type: '2', value_type: '2',
choice_value: [] choice_value: [],
}, },
{ {
alias: '操作', alias: '操作',
@ -136,14 +142,14 @@ export default {
name: 'operate_type', name: 'operate_type',
value_type: '2', value_type: '2',
choice_value: [ choice_value: [
{ '新建': 'create' }, { 新建: 'create' },
{ '修改': 'update' }, { 修改: 'update' },
{ '删除': 'delete' }, { 删除: 'delete' },
{ '添加角色关系': 'role_relation_add' }, { 添加角色关系: 'role_relation_add' },
{ '删除角色关系': 'role_relation_delete' }, { 删除角色关系: 'role_relation_delete' },
] ],
} },
] ],
} }
}, },
computed: { computed: {
@ -152,7 +158,7 @@ export default {
}, },
tableDataLength() { tableDataLength() {
return this.tableData.length return this.tableData.length
} },
}, },
async created() { async created() {
await Promise.all([this.getAllApps(), this.getAllUsers()]) await Promise.all([this.getAllApps(), this.getAllUsers()])
@ -166,11 +172,15 @@ export default {
try { try {
this.loading = true this.loading = true
const { data, id2roles, id2perms, id2resources } = await searchRoleHistory(this.handleQueryParams(queryParams)) const { data, id2roles, id2perms, id2resources } = await searchRoleHistory(this.handleQueryParams(queryParams))
data.forEach(item => { data.forEach((item) => {
item.operate_uid = this.allUsersMap.get(item.operate_uid) item.operate_uid = this.allUsersMap.get(item.operate_uid)
if (item.operate_type === 'role_relation_add' || item.operate_type === 'role_relation_delete') { if (item.operate_type === 'role_relation_add' || item.operate_type === 'role_relation_delete') {
item.extra.child_ids.forEach((subItem, index) => { item.extra.child_ids[index] = id2roles[subItem].name }) item.extra.child_ids.forEach((subItem, index) => {
item.extra.parent_ids.forEach((subItem, index) => { item.extra.parent_ids[index] = id2roles[subItem].name }) item.extra.child_ids[index] = id2roles[subItem].name
})
item.extra.parent_ids.forEach((subItem, index) => {
item.extra.parent_ids[index] = id2roles[subItem].name
})
} else { } else {
this.handleChangeDescription(item, item.operate_type, id2roles, id2perms, id2resources) this.handleChangeDescription(item, item.operate_type, id2roles, id2perms, id2resources)
} }
@ -183,7 +193,9 @@ export default {
async getAllApps() { async getAllApps() {
const { apps } = await searchApp() const { apps } = await searchApp()
const allApps = [] const allApps = []
apps.forEach(item => { allApps.push({ [item.name]: item.id }) }) apps.forEach((item) => {
allApps.push({ [item.name]: item.id })
})
this.allApps = allApps this.allApps = allApps
this.roleTableAttrList[1].choice_value = this.allApps this.roleTableAttrList[1].choice_value = this.allApps
}, },
@ -191,7 +203,7 @@ export default {
const { users } = await searchUser({ page_size: 10000, app_id: 'acl' }) const { users } = await searchUser({ page_size: 10000, app_id: 'acl' })
const allUsers = [] const allUsers = []
const allUsersMap = new Map() const allUsersMap = new Map()
users.forEach(item => { users.forEach((item) => {
allUsers.push({ [item.nickname]: item.uid }) allUsers.push({ [item.nickname]: item.uid })
allUsersMap.set(item.uid, item.nickname) allUsersMap.set(item.uid, item.nickname)
}) })
@ -228,7 +240,7 @@ export default {
this.queryParams = { this.queryParams = {
page: 1, page: 1,
page_size: 50, page_size: 50,
scope: this.checked ? 'role_relation' : 'role' scope: this.checked ? 'role_relation' : 'role',
} }
this.getTable(this.queryParams) this.getTable(this.queryParams)
}, },
@ -238,7 +250,15 @@ export default {
let flag = false let flag = false
let q = queryParams.q ? queryParams.q : '' let q = queryParams.q ? queryParams.q : ''
for (const key in queryParams) { for (const key in queryParams) {
if (key !== 'page' && key !== 'page_size' && key !== 'app_id' && key !== 'q' && key !== 'start' && key !== 'end' && queryParams[key] !== undefined) { if (
key !== 'page' &&
key !== 'page_size' &&
key !== 'app_id' &&
key !== 'q' &&
key !== 'start' &&
key !== 'end' &&
queryParams[key] !== undefined
) {
flag = true flag = true
if (q) q += `,${key}:${queryParams[key]}` if (q) q += `,${key}:${queryParams[key]}`
else q += `${key}:${queryParams[key]}` else q += `${key}:${queryParams[key]}`
@ -278,13 +298,19 @@ export default {
break break
} }
case 'delete': { case 'delete': {
const { extra: { child_ids, parent_ids, role_permissions } } = item const {
child_ids.forEach((subItem, index) => { child_ids[index] = id2roles[subItem].name }) extra: { child_ids, parent_ids, role_permissions },
parent_ids.forEach((subItem, index) => { parent_ids[index] = id2roles[subItem].name }) } = item
child_ids.forEach((subItem, index) => {
child_ids[index] = id2roles[subItem].name
})
parent_ids.forEach((subItem, index) => {
parent_ids[index] = id2roles[subItem].name
})
const resourceMap = new Map() const resourceMap = new Map()
const permsArr = [] const permsArr = []
role_permissions.forEach(subItem => { role_permissions.forEach((subItem) => {
const resource_id = subItem.resource_id const resource_id = subItem.resource_id
const perm_id = subItem.perm_id const perm_id = subItem.perm_id
if (resourceMap.has(resource_id)) { if (resourceMap.has(resource_id)) {
@ -303,7 +329,7 @@ export default {
} }
} }
}, },
} },
} }
</script> </script>

79
cmdb-ui/src/modules/acl/views/operation_history/modules/triggerHistoryTable.vue
View File

@ -10,12 +10,13 @@
></search-form> ></search-form>
<vxe-table <vxe-table
ref="xTable" ref="xTable"
border stripe
class="ops-stripe-table"
resizable resizable
size="small" size="small"
:data="tableData" :data="tableData"
:loading="loading" :loading="loading"
:max-height="`${windowHeight - windowHeightMinus}px`" :height="`${windowHeight - windowHeightMinus}px`"
> >
<vxe-column field="created_at" width="144px" title="操作时间"></vxe-column> <vxe-column field="created_at" width="144px" title="操作时间"></vxe-column>
<vxe-column field="operate_uid" width="130px" title="操作员"></vxe-column> <vxe-column field="operate_uid" width="130px" title="操作员"></vxe-column>
@ -49,6 +50,7 @@
:isLoading="loading" :isLoading="loading"
@change="onChange" @change="onChange"
@showSizeChange="onShowSizeChange" @showSizeChange="onShowSizeChange"
:style="{ marginTop: '10px' }"
></pager> ></pager>
</div> </div>
</template> </template>
@ -99,28 +101,28 @@ export default {
alias: '日期', alias: '日期',
is_choice: false, is_choice: false,
name: 'datetime', name: 'datetime',
value_type: '3' value_type: '3',
}, },
{ {
alias: '应用', alias: '应用',
is_choice: true, is_choice: true,
name: 'app_id', name: 'app_id',
value_type: '2', value_type: '2',
choice_value: [] choice_value: [],
}, },
{ {
alias: '操作员', alias: '操作员',
is_choice: true, is_choice: true,
name: 'operate_uid', name: 'operate_uid',
value_type: '2', value_type: '2',
choice_value: [] choice_value: [],
}, },
{ {
alias: '触发器', alias: '触发器',
is_choice: true, is_choice: true,
name: 'trigger_id', name: 'trigger_id',
value_type: '2', value_type: '2',
choice_value: [] choice_value: [],
}, },
{ {
alias: '操作', alias: '操作',
@ -128,19 +130,19 @@ export default {
name: 'operate_type', name: 'operate_type',
value_type: '2', value_type: '2',
choice_value: [ choice_value: [
{ '新建': 'create' }, { 新建: 'create' },
{ '修改': 'update' }, { 修改: 'update' },
{ '删除': 'delete' }, { 删除: 'delete' },
{ '应用': 'trigger_apply' }, { 应用: 'trigger_apply' },
{ '取消': 'trigger_cancel' }, { 取消: 'trigger_cancel' },
] ],
}, },
], ],
queryParams: { queryParams: {
page: 1, page: 1,
page_size: 50, page_size: 50,
start: '', start: '',
end: '' end: '',
}, },
} }
}, },
@ -164,18 +166,18 @@ export default {
return this.$store.state.windowHeight return this.$store.state.windowHeight
}, },
windowHeightMinus() { windowHeightMinus() {
return this.isExpand ? 396 : 331 return this.isExpand ? 374 : 310
}, },
tableDataLength() { tableDataLength() {
return this.tableData.length return this.tableData.length
} },
}, },
methods: { methods: {
async getTable(queryParams) { async getTable(queryParams) {
try { try {
this.loading = true this.loading = true
const { data, id2resource_types, id2roles } = await searchTriggerHistory(this.handleQueryParams(queryParams)) const { data, id2resource_types, id2roles } = await searchTriggerHistory(this.handleQueryParams(queryParams))
data.forEach(item => { data.forEach((item) => {
this.handleChangeDescription(item, item.operate_type, id2resource_types, id2roles) this.handleChangeDescription(item, item.operate_type, id2resource_types, id2roles)
item.trigger_id = this.allTriggersMap.get(item.trigger_id) item.trigger_id = this.allTriggersMap.get(item.trigger_id)
item.operate_uid = this.allUsersMap.get(item.operate_uid) item.operate_uid = this.allUsersMap.get(item.operate_uid)
@ -188,7 +190,9 @@ export default {
async getAllApps() { async getAllApps() {
const { apps } = await searchApp() const { apps } = await searchApp()
const allApps = [] const allApps = []
apps.forEach(item => { allApps.push({ [item.name]: item.id }) }) apps.forEach((item) => {
allApps.push({ [item.name]: item.id })
})
this.allApps = allApps this.allApps = allApps
this.triggerTableAttrList[1].choice_value = this.allApps this.triggerTableAttrList[1].choice_value = this.allApps
}, },
@ -196,7 +200,7 @@ export default {
const { users } = await searchUser({ page_size: 10000, app_id: 'acl' }) const { users } = await searchUser({ page_size: 10000, app_id: 'acl' })
const allUsers = [] const allUsers = []
const allUsersMap = new Map() const allUsersMap = new Map()
users.forEach(item => { users.forEach((item) => {
allUsers.push({ [item.nickname]: item.uid }) allUsers.push({ [item.nickname]: item.uid })
allUsersMap.set(item.uid, item.nickname) allUsersMap.set(item.uid, item.nickname)
}) })
@ -212,7 +216,7 @@ export default {
const res = await getTriggers({ app_id: app_id }) const res = await getTriggers({ app_id: app_id })
const allTriggers = [] const allTriggers = []
const allTriggersMap = new Map() const allTriggersMap = new Map()
res.forEach(item => { res.forEach((item) => {
allTriggers.push({ [item.name]: item.id }) allTriggers.push({ [item.name]: item.id })
allTriggersMap.set(item.id, item.name) allTriggersMap.set(item.id, item.name)
}) })
@ -264,9 +268,11 @@ export default {
case 'create': { case 'create': {
const str = item.current.roles const str = item.current.roles
const newArr = str.slice(1, str.length - 1).split(', ') const newArr = str.slice(1, str.length - 1).split(', ')
const newStr = newArr.map(i => id2roles[i].name).join('，') const newStr = newArr.map((i) => id2roles[i].name).join('，')
const { name, resource_type_id, wildcard, permissions, enabled } = item.current const { name, resource_type_id, wildcard, permissions, enabled } = item.current
item.changeDescription = `新增触发器：${name}\n资源类型：${id2resource_types[resource_type_id].name}，资源名：${wildcard || ''}，角色：[${newStr}]\n权限：${permissions}\n状态：${enabled}` item.changeDescription = `新增触发器：${name}\n资源类型：${
id2resource_types[resource_type_id].name
}，资源名：${wildcard || ''}，角色：[${newStr}]\n权限：${permissions}\n状态：${enabled}`
break break
} }
case 'update': { case 'update': {
@ -290,25 +296,31 @@ export default {
case 'delete': { case 'delete': {
const str = item.origin.roles const str = item.origin.roles
const newArr = str.slice(1, str.length - 1).split(', ') const newArr = str.slice(1, str.length - 1).split(', ')
const newStr = newArr.map(i => id2roles[i].name).join('，') const newStr = newArr.map((i) => id2roles[i].name).join('，')
const { name, resource_type_id, wildcard, permissions, enabled } = item.origin const { name, resource_type_id, wildcard, permissions, enabled } = item.origin
item.changeDescription = `删除触发器：${name}\n资源类型：${id2resource_types[resource_type_id].name}，资源名：${wildcard || ''}，角色：[${newStr}]\n权限：${permissions}\n状态：${enabled}` item.changeDescription = `删除触发器：${name}\n资源类型：${
id2resource_types[resource_type_id].name
}，资源名：${wildcard || ''}，角色：[${newStr}]\n权限：${permissions}\n状态：${enabled}`
break break
} }
case 'trigger_apply': { case 'trigger_apply': {
const str = item.current.roles const str = item.current.roles
const newArr = str.slice(1, str.length - 1).split(', ') const newArr = str.slice(1, str.length - 1).split(', ')
const newStr = newArr.map(i => id2roles[i].name).join('，') const newStr = newArr.map((i) => id2roles[i].name).join('，')
const { name, resource_type_id, wildcard, permissions, enabled } = item.current const { name, resource_type_id, wildcard, permissions, enabled } = item.current
item.changeDescription = `应用触发器：${name}\n资源类型：${id2resource_types[resource_type_id].name}，资源名：${wildcard || ''}，角色：[${newStr}]\n权限：${permissions}\n状态：${enabled}` item.changeDescription = `应用触发器：${name}\n资源类型：${
id2resource_types[resource_type_id].name
}，资源名：${wildcard || ''}，角色：[${newStr}]\n权限：${permissions}\n状态：${enabled}`
break break
} }
case 'trigger_cancel': { case 'trigger_cancel': {
const str = item.current.roles const str = item.current.roles
const newArr = str.slice(1, str.length - 1).split(', ') const newArr = str.slice(1, str.length - 1).split(', ')
const newStr = newArr.map(i => id2roles[i].name).join('，') const newStr = newArr.map((i) => id2roles[i].name).join('，')
const { name, resource_type_id, wildcard, permissions, enabled } = item.current const { name, resource_type_id, wildcard, permissions, enabled } = item.current
item.changeDescription = `取消触发器：${name}\n资源类型：${id2resource_types[resource_type_id].name}，资源名：${wildcard || ''}，角色：[${newStr}]\n权限：${permissions}\n状态：${enabled}` item.changeDescription = `取消触发器：${name}\n资源类型：${
id2resource_types[resource_type_id].name
}，资源名：${wildcard || ''}，角色：[${newStr}]\n权限：${permissions}\n状态：${enabled}`
break break
} }
} }
@ -316,7 +328,14 @@ export default {
handleQueryParams(queryParams) { handleQueryParams(queryParams) {
let q = '' let q = ''
for (const key in queryParams) { for (const key in queryParams) {
if (key !== 'page' && key !== 'page_size' && key !== 'app_id' && key !== 'start' && key !== 'end' && queryParams[key] !== undefined) { if (
key !== 'page' &&
key !== 'page_size' &&
key !== 'app_id' &&
key !== 'start' &&
key !== 'end' &&
queryParams[key] !== undefined
) {
if (q) { if (q) {
q += `,${key}:${queryParams[key]}` q += `,${key}:${queryParams[key]}`
} else { } else {
@ -329,8 +348,8 @@ export default {
}, },
handleTagColor(operateType) { handleTagColor(operateType) {
return this.colorMap.get(operateType) return this.colorMap.get(operateType)
} },
} },
} }
</script> </script>

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

@ -1,6 +1,6 @@
<template> <template>
<div :style="{ backgroundColor: '#fff', padding: '24px' }"> <div class="acl-resource-types">
<div class="resource-types-action-btn"> <div class="acl-resource-types-header">
<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 <a-input-search
class="ops-input" class="ops-input"
@ -17,12 +17,12 @@
></a-input-search> ></a-input-search>
</div> </div>
<a-spin :spinning="loading"> <a-spin :spinning="loading">
<vxe-table <ops-table
stripe stripe
size="mini" size="small"
class="ops-stripe-table" class="ops-stripe-table"
:data="groups" :data="groups"
:max-height="`${windowHeight - 185}px`" :height="`${windowHeight - 200}px`"
highlight-hover-row highlight-hover-row
> >
<!-- 1 --> <!-- 1 -->
@ -45,7 +45,7 @@
</vxe-table-column> </vxe-table-column>
<!-- 4 --> <!-- 4 -->
<vxe-table-column field="action" title="操作" :min-width="175" fixed="right"> <vxe-table-column field="action" title="操作" :width="100" fixed="right">
<template #default="{ row }"> <template #default="{ row }">
<a @click="handleEdit(row)"><a-icon type="edit"/></a> <a @click="handleEdit(row)"><a-icon type="edit"/></a>
<a-divider type="vertical" /> <a-divider type="vertical" />
@ -54,19 +54,16 @@
</a-popconfirm> </a-popconfirm>
</template> </template>
</vxe-table-column> </vxe-table-column>
<template slot="empty"> </ops-table>
<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 <vxe-pager
size="mini" size="small"
:layouts="['Total', 'PrevPage', 'JumpNumber', 'NextPage', 'Sizes']" :layouts="['Total', 'PrevPage', 'JumpNumber', 'NextPage', 'Sizes']"
:current-page.sync="tablePage.currentPage" :current-page.sync="tablePage.currentPage"
:page-size.sync="tablePage.pageSize" :page-size.sync="tablePage.pageSize"
:total="tablePage.total" :total="tablePage.total"
:page-sizes="pageSizeOptions" :page-sizes="pageSizeOptions"
@page-change="handlePageChange" @page-change="handlePageChange"
:style="{ marginTop: '10px' }"
> >
</vxe-pager> </vxe-pager>
</a-spin> </a-spin>
@ -222,10 +219,17 @@ export default {
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.resource-types-action-btn { .acl-resource-types {
border-radius: 15px;
background-color: #fff;
height: calc(100vh - 64px);
margin-bottom: -24px;
padding: 24px;
.acl-resource-types-header {
width: 100%; width: 100%;
display: inline-flex; display: inline-flex;
margin-bottom: 15px; margin-bottom: 15px;
align-items: center; align-items: center;
} }
}
</style> </style>

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

@ -1,10 +1,10 @@
<template> <template>
<div :style="{ backgroundColor: '#fff', padding: '24px' }"> <div class="acl-resources">
<div v-if="allResourceTypes.length > 0"> <div v-if="allResourceTypes.length">
<a-tabs default-active-key="1" @change="loadCurrentType"> <a-tabs default-active-key="1" @change="loadCurrentType">
<a-tab-pane v-for="rtype in allResourceTypes" :key="rtype.id" :tab="rtype.name"> </a-tab-pane> <a-tab-pane v-for="rtype in allResourceTypes" :key="rtype.id" :tab="rtype.name"> </a-tab-pane>
</a-tabs> </a-tabs>
<div class="resources-action-btn"> <div class="acl-resources-header">
<a-space> <a-space>
<a-button @click="handleCreate" type="primary">{{ btnName }}</a-button> <a-button @click="handleCreate" type="primary">{{ btnName }}</a-button>
<a-input-search <a-input-search
@ -18,25 +18,13 @@
} }
" "
></a-input-search> ></a-input-search>
<a-dropdown v-if="selectedRows && selectedRows.length">
<a-button type="primary" ghost>
批量操作
</a-button>
<a-menu slot="overlay">
<a-menu-item @click="handleBatchPerm">
<a href="javascript:;">授权</a>
</a-menu-item>
<a-menu-item @click="handleBatchRevoke">
<a href="javascript:;">权限回收</a>
</a-menu-item>
</a-menu>
</a-dropdown>
<span <div v-if="!!selectedRows.length" class="ops-list-batch-action">
v-if="selectedRows && selectedRows.length" <span @click="handleBatchPerm">授权</span>
>已选择<strong>{{ selectedRows.length }}</strong <a-divider type="vertical" />
>项</span <span @click="handleBatchRevoke">权限回收</span>
> <span>选取: {{ selectedRows.length }} 项</span>
</div>
</a-space> </a-space>
<a-space> <a-space>
@ -67,13 +55,13 @@
</a-space> </a-space>
</div> </div>
<a-spin :spinning="loading"> <a-spin :spinning="loading">
<vxe-table <ops-table
size="mini" size="small"
stripe stripe
class="ops-stripe-table" class="ops-stripe-table"
:data="tableData" :data="tableData"
highlight-hover-row highlight-hover-row
:height="`${windowHeight - 280}px`" :height="`${windowHeight - 250}px`"
:checkbox-config="{ reserve: true }" :checkbox-config="{ reserve: true }"
@checkbox-change="changeCheckbox" @checkbox-change="changeCheckbox"
@checkbox-all="changeCheckbox" @checkbox-all="changeCheckbox"
@ -132,24 +120,21 @@
</a-popconfirm> </a-popconfirm>
</template> </template>
</vxe-table-column> </vxe-table-column>
<template slot="empty"> </ops-table>
<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 <vxe-pager
size="mini" size="small"
:layouts="['Total', 'PrevPage', 'JumpNumber', 'NextPage', 'Sizes']" :layouts="['Total', 'PrevPage', 'JumpNumber', 'NextPage', 'Sizes']"
:current-page.sync="tablePage.currentPage" :current-page.sync="tablePage.currentPage"
:page-size.sync="tablePage.pageSize" :page-size.sync="tablePage.pageSize"
:total="tablePage.total" :total="tablePage.total"
:page-sizes="pageSizeOptions" :page-sizes="pageSizeOptions"
@page-change="handlePageChange" @page-change="handlePageChange"
:style="{ marginTop: '10px' }"
> >
</vxe-pager> </vxe-pager>
</a-spin> </a-spin>
</div> </div>
<div v-else style="text-align: center"> <div v-else style="text-align: center;margin-top:20%">
<a-icon style="font-size:50px; margin-bottom: 20px; color: orange" type="info-circle" /> <a-icon style="font-size:50px; margin-bottom: 20px; color: orange" type="info-circle" />
<h3>暂无类型信息，请先添加资源类型！</h3> <h3>暂无类型信息，请先添加资源类型！</h3>
</div> </div>
@ -398,7 +383,13 @@ export default {
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.resources-action-btn { .acl-resources {
border-radius: 15px;
background-color: #fff;
height: calc(100vh - 64px);
margin-bottom: -24px;
padding: 12px 24px 24px 24px;
.acl-resources-header {
width: 100%; width: 100%;
display: inline-flex; display: inline-flex;
margin-bottom: 15px; margin-bottom: 15px;
@ -408,4 +399,5 @@ export default {
margin-left: auto; margin-left: auto;
} }
} }
}
</style> </style>

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

@ -1,6 +1,6 @@
<template> <template>
<div class="acl-role"> <div class="acl-roles">
<div class="roles-action-btn"> <div class="acl-roles-header">
<a-button @click="handleCreate" type="primary">{{ btnName }}</a-button> <a-button @click="handleCreate" type="primary">{{ btnName }}</a-button>
<a-input-search <a-input-search
class="ops-input" class="ops-input"
@ -18,19 +18,17 @@
<a-checkbox :checked="is_all" @click="handleClickBoxChange">所有角色</a-checkbox> <a-checkbox :checked="is_all" @click="handleClickBoxChange">所有角色</a-checkbox>
</div> </div>
<a-spin :spinning="loading"> <a-spin :spinning="loading">
<vxe-table <ops-table
stripe stripe
class="ops-stripe-table" class="ops-stripe-table"
size="mini" size="small"
resizable resizable
:data="tableData" :data="tableData"
:max-height="`${windowHeight - 185}px`" :height="`${windowHeight - 200}px`"
highlight-hover-row highlight-hover-row
min-height="300px"
:filter-config="{ remote: true }" :filter-config="{ remote: true }"
@filter-change="filterTableMethod" @filter-change="filterTableMethod"
> >
<vxe-table-column <vxe-table-column
field="name" field="name"
title="角色名" title="角色名"
@ -57,26 +55,27 @@
<vxe-table-column <vxe-table-column
field="uid" field="uid"
title="虚拟角色" title="虚拟角色"
:min-width="100" :width="100"
align="center" align="center"
:filters="[ :filters="[
{ label: '是', value: 1 }, { label: '是', value: 1 },
{ label: '否', value: 0 }, { label: '否', value: 0 },
]" ]"
:filterMultiple="false" :filterMultiple="false"
:filter-method="({ value, row }) => { :filter-method="
({ value, row }) => {
return value === !row.uid return value === !row.uid
}"> }
"
>
<template #default="{row}"> <template #default="{row}">
{{ row.uid ? '否' : '是' }} {{ row.uid ? '否' : '是' }}
</template> </template>
</vxe-table-column> </vxe-table-column>
<vxe-table-column field="action" title="操作" :min-width="150" fixed="right"> <vxe-table-column field="action" title="操作" :width="120" fixed="right">
<template #default="{row}"> <template #default="{row}">
<div style="width:300px"> <a-space>
<span>
<a-tooltip title="资源列表"> <a-tooltip title="资源列表">
<a <a
v-if="$route.name !== 'acl_roles'" v-if="$route.name !== 'acl_roles'"
@ -85,37 +84,28 @@
type="file-search" type="file-search"
/></a> /></a>
</a-tooltip> </a-tooltip>
<a-divider type="vertical" />
<div v-if="!row.uid" style="display: inline-block">
<a-tooltip <a-tooltip
title="用户列表" title="用户列表"
v-if="!row.uid"
><a @click="handleDisplayUserUnderRole(row)"><a-icon type="team"/></a ><a @click="handleDisplayUserUnderRole(row)"><a-icon type="team"/></a
></a-tooltip> ></a-tooltip>
<a-divider type="vertical" />
</div>
<a @click="handleEdit(row)"><a-icon type="edit"/></a> <a @click="handleEdit(row)"><a-icon type="edit"/></a>
<a-divider type="vertical" />
<a-popconfirm title="确认删除?" @confirm="handleDelete(row)" @cancel="cancel" okText="是" cancelText="否"> <a-popconfirm title="确认删除?" @confirm="handleDelete(row)" @cancel="cancel" okText="是" cancelText="否">
<a style="color: red"><a-icon type="delete"/></a> <a style="color: red"><a-icon type="delete"/></a>
</a-popconfirm> </a-popconfirm>
</span> </a-space>
</div>
</template> </template>
</vxe-table-column> </vxe-table-column>
</ops-table>
<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 <vxe-pager
size="mini" size="small"
:layouts="['Total', 'PrevPage', 'JumpNumber', 'NextPage', 'Sizes']" :layouts="['Total', 'PrevPage', 'JumpNumber', 'NextPage', 'Sizes']"
:current-page.sync="tablePage.currentPage" :current-page.sync="tablePage.currentPage"
:page-size.sync="tablePage.pageSize" :page-size.sync="tablePage.pageSize"
:total="tablePage.total" :total="tablePage.total"
:page-sizes="pageSizeOptions" :page-sizes="pageSizeOptions"
@page-change="handlePageChange" @page-change="handlePageChange"
:style="{ marginTop: '10px' }"
> >
</vxe-pager> </vxe-pager>
</a-spin> </a-spin>
@ -336,10 +326,13 @@ export default {
</script> </script>
<style lang="less"> <style lang="less">
.acl-role { .acl-roles {
border-radius: 15px;
background-color: #fff; background-color: #fff;
height: calc(100vh - 64px);
margin-bottom: -24px;
padding: 24px; padding: 24px;
.roles-action-btn { .acl-roles-header {
width: 100%; width: 100%;
display: inline-flex; display: inline-flex;
margin-bottom: 15px; margin-bottom: 15px;

2
cmdb-ui/src/modules/acl/views/secretKey.vue
View File

@ -91,6 +91,8 @@ export default {
.acl-secret-key { .acl-secret-key {
background-color: #fff; background-color: #fff;
padding: 24px; padding: 24px;
border-radius: 15px;
height: calc(100% + 24px);
.ant-input[disabled] { .ant-input[disabled] {
color: rgba(0, 0, 0, 0.5); color: rgba(0, 0, 0, 0.5);
} }

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

@ -1,6 +1,6 @@
<template> <template>
<div :style="{ backgroundColor: '#fff', padding: '24px' }"> <div class="acl-trigger">
<div class="trigger-action-btn"> <div class="acl-trigger-header">
<a-button type="primary" @click="handleCreateTrigger">新增触发器</a-button> <a-button type="primary" @click="handleCreateTrigger">新增触发器</a-button>
<a-input-search <a-input-search
class="ops-input" class="ops-input"
@ -14,7 +14,7 @@
<vxe-grid <vxe-grid
stripe stripe
size="mini" size="small"
class="ops-stripe-table" class="ops-stripe-table"
:columns="tableColumns" :columns="tableColumns"
:data="filterTriggers" :data="filterTriggers"
@ -65,8 +65,10 @@
</a-space> </a-space>
</template> </template>
<template slot="empty"> <template slot="empty">
<img :src="require(`@/assets/data_empty.png`)" /> <div>
<p style="font-size: 14px; line-height: 17px; color: rgba(0, 0, 0, 0.6)">暂无数据</p> <img :style="{ width: '100px' }" :src="require('@/assets/data_empty.png')" />
<div>暂无数据</div>
</div>
</template> </template>
</vxe-grid> </vxe-grid>
<trigger-form <trigger-form
@ -188,7 +190,7 @@ export default {
{ {
title: '操作', title: '操作',
field: 'action', field: 'action',
minWidth: '200px', width: '120px',
fixed: 'right', fixed: 'right',
slots: { slots: {
default: 'action_default', default: 'action_default',
@ -317,10 +319,17 @@ export default {
} }
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.trigger-action-btn { .acl-trigger {
border-radius: 15px;
background-color: #fff;
height: calc(100vh - 64px);
margin-bottom: -24px;
padding: 24px;
.acl-trigger-header {
width: 100%; width: 100%;
display: inline-flex; display: inline-flex;
margin-bottom: 15px; margin-bottom: 15px;
align-items: center; align-items: center;
} }
}
</style> </style>

79
cmdb-ui/src/modules/acl/views/users.vue
View File

@ -1,8 +1,9 @@
<template> <template>
<a-card :bordered="false"> <div class="acl-users">
<div class="user-action-btn"> <div class="acl-users-header">
<a-button v-if="isAclAdmin" @click="handleCreate" type="primary">{{ btnName }}</a-button> <a-button v-if="isAclAdmin" @click="handleCreate" type="primary">{{ btnName }}</a-button>
<a-input-search <a-input-search
class="ops-input"
allowClear allowClear
:style="{ display: 'inline', marginLeft: '10px' }" :style="{ display: 'inline', marginLeft: '10px' }"
placeholder="搜索 | 用户名、中文名" placeholder="搜索 | 用户名、中文名"
@ -10,7 +11,15 @@
></a-input-search> ></a-input-search>
</div> </div>
<a-spin :spinning="loading"> <a-spin :spinning="loading">
<vxe-grid :columns="tableColumns" :data="tableData" highlight-hover-row :max-height="`${windowHeight - 185}px`"> <vxe-grid
stripe
class="ops-stripe-table"
:columns="tableColumns"
:data="tableData"
highlight-hover-row
:height="`${windowHeight - 165}px`"
size="small"
>
<template #block_default="{row}"> <template #block_default="{row}">
<a-icon type="lock" v-if="row.block" /> <a-icon type="lock" v-if="row.block" />
</template> </template>
@ -29,7 +38,7 @@
</a-spin> </a-spin>
<userForm ref="userForm" :handleOk="handleOk"> </userForm> <userForm ref="userForm" :handleOk="handleOk"> </userForm>
<perm-collect-form ref="permCollectForm"></perm-collect-form> <perm-collect-form ref="permCollectForm"></perm-collect-form>
</a-card> </div>
</template> </template>
<script> <script>
@ -95,30 +104,46 @@ export default {
}, },
async beforeMount() { async beforeMount() {
this.loading = true this.loading = true
await getOnDutyUser().then(res => { await getOnDutyUser().then((res) => {
this.onDutuUids = res.map(i => i.uid) this.onDutuUids = res.map((i) => i.uid)
this.search() this.search()
}) })
}, },
computed: { computed: {
...mapState({ ...mapState({
windowHeight: state => state.windowHeight, windowHeight: (state) => state.windowHeight,
}), }),
isAclAdmin: function() { isAclAdmin: function() {
if (this.$store.state.user.roles.permissions.filter(item => item === 'acl_admin').length > 0) { if (this.$store.state.user.roles.permissions.filter((item) => item === 'acl_admin').length > 0) {
return true return true
} else { } else {
return false return false
} }
}, },
}, },
watch: {
searchName: {
immediate: true,
handler(newVal, oldVal) {
if (newVal) {
this.tableData = this.allUsers.filter(
(item) =>
item.username.toLowerCase().includes(newVal.toLowerCase()) ||
item.nickname.toLowerCase().includes(newVal.toLowerCase())
)
} else {
this.tableData = this.allUsers
}
},
},
},
mounted() {}, mounted() {},
inject: ['reload'], inject: ['reload'],
methods: { methods: {
search() { search() {
searchUser({ page_size: 10000 }).then(res => { searchUser({ page_size: 10000 }).then((res) => {
const ret = res.users.filter(u => this.onDutuUids.includes(u.uid)) const ret = res.users.filter((u) => this.onDutuUids.includes(u.uid))
this.allUsers = ret this.allUsers = ret
this.tableData = ret this.tableData = ret
this.loading = false this.loading = false
@ -137,45 +162,29 @@ export default {
this.searchName = '' this.searchName = ''
this.search() this.search()
}, },
handleCreate() { handleCreate() {
this.$refs.userForm.handleCreate() this.$refs.userForm.handleCreate()
}, },
deleteUser(attrId) { deleteUser(attrId) {
deleteUserById(attrId).then(res => { deleteUserById(attrId).then((res) => {
this.$message.success(`删除成功`) this.$message.success(`删除成功`)
this.handleOk() this.handleOk()
}) })
// .catch(err => this.requestFailed(err))
},
// requestFailed(err) {
// const msg = ((err.response || {}).data || {}).message || '请求出现错误，请稍后再试'
// this.$message.error(`${msg}`)
// },
},
watch: {
searchName: {
immediate: true,
handler(newVal, oldVal) {
if (newVal) {
this.tableData = this.allUsers.filter(
item =>
item.username.toLowerCase().includes(newVal.toLowerCase()) ||
item.nickname.toLowerCase().includes(newVal.toLowerCase())
)
} else {
this.tableData = this.allUsers
}
},
}, },
}, },
} }
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.user-action-btn { .acl-users {
border-radius: 15px;
background-color: #fff;
height: calc(100vh - 64px);
margin-bottom: -24px;
padding: 24px;
.acl-users-header {
display: inline-flex; display: inline-flex;
margin-bottom: 15px; margin-bottom: 15px;
} }
}
</style> </style>