mirror of
https://github.com/veops/cmdb.git
synced 2025-08-11 19:14:08 +08:00
前后端全面升级
This commit is contained in:
pycook
314
cmdb-ui/src/modules/acl/views/module/roleHistoryTable.vue
Normal file
314
cmdb-ui/src/modules/acl/views/module/roleHistoryTable.vue
Normal file
@@ -0,0 +1,314 @@
|
||||
<template>
|
||||
<div>
|
||||
<search-form
|
||||
ref="child"
|
||||
:attrList="roleTableAttrList"
|
||||
:hasSwitch="true"
|
||||
switchValue="角色关系"
|
||||
@onSwitchChange="onSwitchChange"
|
||||
@search="handleSearch"
|
||||
@searchFormReset="searchFormReset"
|
||||
></search-form>
|
||||
<vxe-table
|
||||
ref="xTable"
|
||||
border
|
||||
:data="tableData"
|
||||
size="small"
|
||||
:loading="loading"
|
||||
resizable
|
||||
:max-height="`${windowHeight - 331}px`"
|
||||
>
|
||||
<vxe-column field="created_at" width="144px" title="操作时间"></vxe-column>
|
||||
<vxe-column field="operate_uid" title="操作员" width="130px"></vxe-column>
|
||||
<vxe-column field="operate_type" title="操作" width="112px">
|
||||
<template #default="{ row }">
|
||||
<template>
|
||||
<a-tag :color="handleTagColor(row.operate_type)">{{ operateTypeMap.get(row.operate_type) }}</a-tag>
|
||||
</template>
|
||||
</template>
|
||||
</vxe-column>
|
||||
<vxe-column :title="checked ? '角色' : '角色'">
|
||||
<template #default="{ row }">
|
||||
<template v-if="!checked">
|
||||
<a-tag color="blue">{{ row.current.name || row.origin.name }}</a-tag>
|
||||
</template>
|
||||
<template v-else>
|
||||
<a-tag v-for="(id,index) in row.extra.child_ids" :key="'child_ids_' + id + index" color="blue">{{ id }}</a-tag>
|
||||
</template>
|
||||
</template>
|
||||
</vxe-column>
|
||||
<vxe-column :title="checked ? '继承自' : '管理员'" :width="checked ? '350px' : '80px'">
|
||||
<template #default="{ row }">
|
||||
<template v-if="!checked">
|
||||
<a-icon type="check" v-if="row.current.is_app_admin"/>
|
||||
</template>
|
||||
<template v-else>
|
||||
<a-tag v-for="(id,index) in row.extra.parent_ids" :key="'parent_ids_' + id + index" color="cyan">{{ id }}</a-tag>
|
||||
</template>
|
||||
</template>
|
||||
</vxe-column>
|
||||
<vxe-column title="描述" v-if="!checked">
|
||||
<template #default="{ row }">
|
||||
<p>
|
||||
{{ row.description }}
|
||||
</p>
|
||||
</template>
|
||||
</vxe-column>
|
||||
<vxe-column field="source" title="来源" width="100px"></vxe-column>
|
||||
</vxe-table>
|
||||
<pager
|
||||
:current-page.sync="queryParams.page"
|
||||
:page-size.sync="queryParams.page_size"
|
||||
:page-sizes="[50,100,200]"
|
||||
:total="tableDataLength"
|
||||
:isLoading="loading"
|
||||
@change="onChange"
|
||||
@showSizeChange="onShowSizeChange"
|
||||
></pager>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import _ from 'lodash'
|
||||
import Pager from './pager.vue'
|
||||
import SearchForm from './searchForm.vue'
|
||||
import { searchRoleHistory } from '@/modules/acl/api/history'
|
||||
export default {
|
||||
components: { SearchForm, Pager },
|
||||
props: {
|
||||
allUsers: {
|
||||
type: Array,
|
||||
required: true
|
||||
},
|
||||
allRoles: {
|
||||
type: Array,
|
||||
required: true
|
||||
},
|
||||
allRolesMap: {
|
||||
type: Map,
|
||||
required: true
|
||||
},
|
||||
allUsersMap: {
|
||||
type: Map,
|
||||
required: true
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: true,
|
||||
checked: false,
|
||||
tableData: [],
|
||||
app_id: this.$route.name.split('_')[0],
|
||||
operateTypeMap: new Map([
|
||||
['create', '新建'],
|
||||
['delete', '删除'],
|
||||
['update', '修改'],
|
||||
['role_relation_add', '添加角色关系'],
|
||||
['role_relation_delete', '删除角色关系'],
|
||||
]),
|
||||
colorMap: new Map([
|
||||
['create', 'green'],
|
||||
['delete', 'red'],
|
||||
['update', 'orange'],
|
||||
['role_relation_add', 'green'],
|
||||
['role_relation_delete', 'red']
|
||||
]),
|
||||
queryParams: {
|
||||
page: 1,
|
||||
page_size: 50,
|
||||
app_id: this.$route.name.split('_')[0],
|
||||
scope: 'role',
|
||||
start: '',
|
||||
end: ''
|
||||
},
|
||||
roleTableAttrList: [
|
||||
{
|
||||
alias: '日期',
|
||||
is_choice: false,
|
||||
name: 'datetime',
|
||||
value_type: '3'
|
||||
},
|
||||
{
|
||||
alias: '操作员',
|
||||
is_choice: true,
|
||||
name: 'operate_uid',
|
||||
value_type: '2',
|
||||
choice_value: this.allUsers
|
||||
},
|
||||
{
|
||||
alias: '操作',
|
||||
is_choice: true,
|
||||
name: 'operate_type',
|
||||
value_type: '2',
|
||||
choice_value: [
|
||||
{ '新建': 'create' },
|
||||
{ '修改': 'update' },
|
||||
{ '删除': 'delete' },
|
||||
{ '添加角色关系': 'role_relation_add' },
|
||||
{ '删除角色关系': 'role_relation_delete' },
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
windowHeight() {
|
||||
return this.$store.state.windowHeight
|
||||
},
|
||||
tableDataLength() {
|
||||
return this.tableData.length
|
||||
},
|
||||
},
|
||||
async created() {
|
||||
await this.getTable(this.queryParams)
|
||||
},
|
||||
updated() {
|
||||
this.$refs.xTable.$el.querySelector('.vxe-table--body-wrapper').scrollTop = 0
|
||||
},
|
||||
watch: {
|
||||
'$route.name': async function(oldName, newName) {
|
||||
this.app_id = this.$route.name.split('_')[0]
|
||||
await this.getTable(this.queryParams)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async getTable(queryParams) {
|
||||
try {
|
||||
this.loading = true
|
||||
const { data, id2roles, id2perms, id2resources } = await searchRoleHistory(this.handleQueryParams(queryParams))
|
||||
data.forEach(item => {
|
||||
item.operate_uid = this.allUsersMap.get(item.operate_uid)
|
||||
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.parent_ids.forEach((subItem, index) => { item.extra.parent_ids[index] = id2roles[subItem].name })
|
||||
} else {
|
||||
this.handleChangeDescription(item, item.operate_type, id2roles, id2perms, id2resources)
|
||||
}
|
||||
})
|
||||
this.tableData = data
|
||||
} finally {
|
||||
this.loading = false
|
||||
}
|
||||
},
|
||||
|
||||
// pager相关
|
||||
onShowSizeChange(size) {
|
||||
this.queryParams.page_size = size
|
||||
this.queryParams.page = 1
|
||||
this.getTable(this.queryParams)
|
||||
},
|
||||
onChange(pageNum) {
|
||||
this.queryParams.page = pageNum
|
||||
this.getTable(this.queryParams)
|
||||
},
|
||||
|
||||
// searchForm相关
|
||||
onSwitchChange(checked) {
|
||||
this.checked = checked
|
||||
this.queryParams.scope = checked ? 'role_relation' : 'role'
|
||||
this.queryParams.page = 1
|
||||
this.getTable(this.queryParams)
|
||||
},
|
||||
handleSearch(queryParams) {
|
||||
this.queryParams = { ...queryParams, app_id: this.app_id, scope: this.checked ? 'role_relation' : 'role' }
|
||||
this.getTable(this.queryParams)
|
||||
},
|
||||
searchFormReset() {
|
||||
this.$refs.child.checked = false
|
||||
this.checked = false
|
||||
this.queryParams = {
|
||||
page: 1,
|
||||
page_size: 50,
|
||||
app_id: this.$route.name.split('_')[0],
|
||||
scope: this.checked ? 'role_relation' : 'role'
|
||||
}
|
||||
this.getTable(this.queryParams)
|
||||
},
|
||||
|
||||
// 处理查询参数
|
||||
handleQueryParams(queryParams) {
|
||||
let flag = false
|
||||
let q = queryParams.q ? queryParams.q : ''
|
||||
for (const key in queryParams) {
|
||||
if (key !== 'page' && key !== 'page_size' && key !== 'app_id' && key !== 'q' && key !== 'start' && key !== 'end' && queryParams[key] !== undefined) {
|
||||
flag = true
|
||||
if (q) q += `,${key}:${queryParams[key]}`
|
||||
else q += `${key}:${queryParams[key]}`
|
||||
delete queryParams[key]
|
||||
}
|
||||
}
|
||||
const newQueryParams = { ...queryParams, q }
|
||||
return flag ? newQueryParams : queryParams
|
||||
},
|
||||
// 处理tag颜色
|
||||
handleTagColor(operateType) {
|
||||
return this.colorMap.get(operateType)
|
||||
},
|
||||
handleChangeDescription(item, operate_type, id2roles, id2perms, id2resources) {
|
||||
switch (operate_type) {
|
||||
// create
|
||||
case 'create': {
|
||||
item.description = `新建角色：${item.current.name}`
|
||||
break
|
||||
}
|
||||
case 'update': {
|
||||
item.description = ''
|
||||
for (const key in item.origin) {
|
||||
const newVal = item.current[key]
|
||||
const oldVal = item.origin[key]
|
||||
if (!_.isEqual(newVal, oldVal) && key !== 'updated_at' && key !== 'deleted_at' && key !== 'created_at') {
|
||||
if (oldVal === null) {
|
||||
const str = ` 【 ${key} : 改为 ${newVal} 】 `
|
||||
item.description += str
|
||||
} else {
|
||||
const str = ` 【 ${key} : 由 ${oldVal} 改为 ${newVal} 】 `
|
||||
item.description += ` 【 ${key} : 由 ${oldVal} 改为 ${newVal} 】 `
|
||||
}
|
||||
}
|
||||
}
|
||||
if (!item.description) item.description = '没有修改'
|
||||
break
|
||||
}
|
||||
case 'delete': {
|
||||
const { extra: { child_ids, parent_ids, role_permissions } } = 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 permsArr = []
|
||||
role_permissions.forEach(subItem => {
|
||||
const resource_id = subItem.resource_id
|
||||
const perm_id = subItem.perm_id
|
||||
if (resourceMap.has(resource_id)) {
|
||||
let resource_perms = resourceMap.get(resource_id)
|
||||
resource_perms += `,${id2perms[perm_id].name}`
|
||||
resourceMap.set(resource_id, resource_perms)
|
||||
} else {
|
||||
resourceMap.set(resource_id, String(id2perms[perm_id].name))
|
||||
}
|
||||
})
|
||||
resourceMap.forEach((value, key) => {
|
||||
permsArr.push(`${id2resources[key].name}：${value}`)
|
||||
})
|
||||
item.description = `继承者：${child_ids}\n继承自：${parent_ids}\n涉及资源及权限：\n${permsArr.join(`\n`)}`
|
||||
break
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.row {
|
||||
margin-top: 5px;
|
||||
}
|
||||
.ant-tag {
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow:ellipsis;
|
||||
}
|
||||
p {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user