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

feat(acl-ui):i18n

This commit is contained in:
wang-liang0615 2023-12-29 18:03:29 +08:00
parent ace160ae19
commit 70d674ac4f
40 changed files with 1350 additions and 1403 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

125
cmdb-ui/src/modules/acl/lang/en.js Normal file
View File

@ -0,0 +1,125 @@
const acl_en = {
date: 'Date',
operator: 'Operator',
resource: 'Resource',
resourceType: 'Resource Type',
addResourceType: 'Add Resource Type',
app: 'App',
operateTime: 'Operate Time',
permission: 'Permission',
permission_placeholder: 'please select permission',
permissionList: 'Permission List',
summaryPermissions: 'Summary of permissions',
source: 'Source',
username: 'Username',
username_placeholder: 'please input username',
userList: 'User List',
groupUser: 'Group User',
addUser: 'Add User',
subordinateUsers: 'Subordinate Users',
nickname: 'Nickname',
nickname_placeholder: 'please input nickname',
password: 'Password',
password_placeholder: 'please input password',
department: 'Department',
group: 'Group',
email: 'Email',
email_placeholder: 'please input email',
mobile: 'Mobile',
isBlock: 'Is Block',
block: 'Block',
joined_at: 'Joined At',
role: 'Role',
role_placeholder1: 'please input role',
role_placeholder2: 'please select role',
role_placeholder3: 'please select a role name, multiple choices are allowed',
allRole: 'All Roles',
visualRole: 'Virtual Role',
addVisualRole: 'Add Virtual Role',
inheritedFrom: 'Inherited from',
heir: 'Inherit Roles',
permissionChange: 'Permissions',
roleChange: 'Roles',
resourceChange: 'Resources',
resourceTypeChange: 'Resource Type',
trigger: 'Triggers',
triggerNameInput: 'Please enter trigger name',
triggerChange: 'Triggers',
roleManage: 'Roles',
userManage: 'Users',
appManage: 'Applications',
resourceManage: 'Resources',
history: 'Audits',
userSecret: 'Secrets',
none: 'none',
danger: 'Dangerous',
confirmDeleteApp: 'Are you sure you want to delete this app?',
revoke: 'Revoke',
convenient: 'Quick Grant',
group2: 'Group',
groupName: 'Group Name',
resourceName: 'Resource Name',
creator: 'Creator',
member: 'Members',
viewAuth: 'view Auth',
addTypeTips: 'There is no type information yet, please add the resource type first!',
addResource: 'Add Resource',
resourceList: 'Resource List',
confirmResetSecret: 'Are you sure you want to reset the user secrets?',
addTrigger: 'Add Trigger',
deleteTrigger: 'Delete Trigger',
applyTrigger: 'Apply Trigger',
cancelTrigger: 'Cancel Trigger',
enable: 'Enable',
disable: 'Disable',
viewMatchResult: 'View regular matching results',
confirmDeleteTrigger: 'Are you sure you want to delete this trigger?',
ruleApply: 'Apply',
triggerTip1: 'Are you sure you want to apply this trigger?',
triggerTip2: 'Cancel applying this trigger?',
appNameInput: 'Please enter an application name',
descInput: 'Please enter a description',
addApp: 'Add',
updateApp: 'Update',
cancel: 'Cancel',
typeName: 'Name',
typeNameInput: 'Please enter a type name',
resourceNameInput: 'Please enter resource name',
pressEnter: 'Press Enter to confirm filtering',
groupMember: 'Group Members:',
isGroup: 'Group?',
errorTips: 'Error message',
roleList: 'Role List',
virtual: 'Virtual',
resourceBatchTips: 'Please enter the resource name, separated by newlines',
memberManage: 'Members: ',
newResource: 'New Resource: ',
deleteResource: 'Delete Resource: ',
deleteResourceType: 'Delete Resource Type: ',
noChange: 'No change',
batchOperate: 'Batch Operations',
batchGrant: 'Batch Grant',
batchRevoke: 'Batch Revoke',
editPerm: 'Add authorization: ',
permInput: 'Please enter permission name',
resourceTypeName: 'Resource Type Name',
selectedParents: 'Optionally inherit roles',
isAppAdmin: 'is app admin',
addRole: 'Add Role',
roleRelation: 'Role Relation',
roleRelationAdd: 'Add Role Relation',
roleRelationDelete: 'Delete Role Relation',
role2: 'Role',
admin: 'Admin',
involvingRP: 'Involving resources and permissions',
startAt: 'Start Time',
endAt: 'End Time',
triggerTips1: 'Priority regular pattern (secondary wildcard)',
pleaseSelectType: 'Please select resource type',
apply: 'Apply',
mobileTips: 'Please enter the correct phone number',
remove: 'Remove',
deleteUserConfirm: 'Are you sure you want to remove this user?',
copyResource: 'Copy resource name'
}
export default acl_en

125
cmdb-ui/src/modules/acl/lang/zh.js Normal file
View File

@ -0,0 +1,125 @@
const acl_zh = {
date: '日期',
operator: '操作员',
resource: '资源',
resourceType: '资源类型',
addResourceType: '新增资源类型',
app: '应用',
operateTime: '操作时间',
permission: '权限',
permission_placeholder: '请选择权限',
permissionList: '权限列表',
summaryPermissions: '权限汇总',
source: '来源',
username: '用户名',
username_placeholder: '请输入用户名',
userList: '用户列表',
groupUser: '组用户',
addUser: '新增用户',
subordinateUsers: '下属用户',
nickname: '中文名',
nickname_placeholder: '请输入中文名',
password: '密码',
password_placeholder: '请输入密码',
department: '部门',
group: '小组',
email: '邮箱',
email_placeholder: '请输入邮箱',
mobile: '手机号',
isBlock: '是否锁定',
block: '锁定',
joined_at: '加入时间',
role: '角色名',
role_placeholder1: '请输入角色名',
role_placeholder2: '请选择角色名称',
role_placeholder3: '请选择角色名称，可多选',
allRole: '所有角色',
visualRole: '虚拟角色',
addVisualRole: '新增虚拟角色',
inheritedFrom: '继承自',
heir: '继承者',
permissionChange: '权限变更',
roleChange: '角色变更',
resourceChange: '资源变更',
resourceTypeChange: '资源类型变更',
trigger: '触发器',
triggerNameInput: '请输入触发器名',
triggerChange: '触发器变更',
roleManage: '角色管理',
userManage: '用户管理',
appManage: '应用管理',
resourceManage: '资源管理',
history: '操作审计',
userSecret: '用户密钥',
none: '无',
danger: '危险操作',
confirmDeleteApp: '确定要删除该App吗？',
revoke: '权限回收',
convenient: '便捷授权',
group2: '组',
groupName: '资源组名',
resourceName: '资源名',
creator: '创建者',
member: '成员',
viewAuth: '查看授权',
addTypeTips: '暂无类型信息，请先添加资源类型!',
addResource: '新增资源',
resourceList: '资源列表',
confirmResetSecret: '确定重置用户密钥？',
addTrigger: '新增触发器',
deleteTrigger: '删除触发器',
applyTrigger: '应用触发器',
cancelTrigger: '取消触发器',
enable: '启用',
disable: '禁用',
viewMatchResult: '查看正则匹配结果',
confirmDeleteTrigger: '确认删除该触发器吗？',
ruleApply: '规则应用',
triggerTip1: '是否确定应用该触发器？',
triggerTip2: '是否取消应用该触发器？',
appNameInput: '请输入应用名称',
descInput: '请输入描述',
addApp: '创建应用',
updateApp: '更新应用',
cancel: '撤销',
typeName: '类型名',
typeNameInput: '请输入类型名',
resourceNameInput: '请输入资源名',
pressEnter: '按回车确认筛选',
groupMember: '组成员：',
isGroup: '是否组',
errorTips: '错误提示',
roleList: '角色列表',
virtual: '虚拟',
resourceBatchTips: '请输入资源名，换行分隔',
memberManage: '成员管理：',
newResource: '新建资源：',
deleteResource: '删除资源：',
deleteResourceType: '删除资源类型：',
noChange: '没有修改',
batchOperate: '批量操作',
batchGrant: '批量授权',
batchRevoke: '批量权限回收',
editPerm: '添加授权：',
permInput: '请输入权限名',
resourceTypeName: '资源类型名',
selectedParents: '可选择继承角色',
isAppAdmin: '是否应用管理员',
addRole: '新增角色',
roleRelation: '角色关系',
roleRelationAdd: '添加角色关系',
roleRelationDelete: '删除角色关系',
role2: '角色',
admin: '管理员',
involvingRP: '涉及资源及权限',
startAt: '开始时间',
endAt: '结束时间',
triggerTips1: '优先正则模式（次通配符）',
pleaseSelectType: '请选择资源类型',
apply: '应用',
mobileTips: '请输入正确的手机号码',
remove: '移除',
deleteUserConfirm: '是否确定要移除该用户',
copyResource: '复制资源名'
}
export default acl_zh

20
cmdb-ui/src/modules/acl/router/index.js
View File

@ -12,35 +12,35 @@ const genAppRoute = ({ name }) => {
name: `${name}_roles_acl`,
hideChildrenInMenu: true,
component: () => import('../views/roles'),
meta: { title: '角色管理', icon: 'team', keepAlive: true }
meta: { title: 'acl.roleManage', icon: 'team', keepAlive: true }
},
{
path: `/acl/${name}/resources`,
name: `${name}_resources_acl`,
hideChildrenInMenu: true,
component: () => import('../views/resources'),
meta: { title: '资源管理', icon: 'credit-card', keepAlive: false }
meta: { title: 'acl.resourceManage', icon: 'credit-card', keepAlive: false }
},
{
path: `/acl/${name}/resource_types`,
name: `${name}_resource_types_acl`,
hideChildrenInMenu: true,
component: () => import('../views/resource_types'),
meta: { title: '资源类型', icon: 'file-text', keepAlive: true }
meta: { title: 'acl.resourceType', icon: 'file-text', keepAlive: true }
},
{
path: `/acl/${name}/trigger`,
name: `${name}_trigger_acl`,
hideChildrenInMenu: true,
component: () => import('../views/trigger'),
meta: { title: '触发器', icon: 'clock-circle', keepAlive: true }
meta: { title: 'acl.trigger', icon: 'clock-circle', keepAlive: true }
},
{
path: `/acl/${name}/history`,
name: `${name}_history_acl`,
hideChildrenInMenu: true,
component: () => import('../views/history'),
meta: { title: '操作审计', icon: 'search', keepAlive: false }
meta: { title: 'acl.history', icon: 'search', keepAlive: false }
}
]
}
@ -59,31 +59,31 @@ const genAclRoutes = async () => {
path: `/acl/secret_key`,
name: 'acl_secret_key',
component: () => import('../views/secretKey'),
meta: { title: '用户密钥', icon: 'key' }
meta: { title: 'acl.userSecret', icon: 'key' }
},
{
path: `/acl/operate_history`,
name: 'acl_operate_history',
component: () => import('../views/operation_history/index.vue'),
meta: { title: '操作审计', icon: 'search', permission: ['acl_admin'] },
meta: { title: 'acl.history', icon: 'search', permission: ['acl_admin'] }
},
{
path: `/acl/user`,
name: 'acl_user',
component: () => import('../views/users'),
meta: { title: '用户管理', icon: 'user', permission: ['acl_admin'] }
meta: { title: 'acl.userManage', icon: 'user', permission: ['acl_admin'] }
},
{
path: `/acl/roles`,
name: `acl_roles`,
component: () => import('../views/roles'),
meta: { title: '角色管理', icon: 'team', keepAlive: true, permission: ['acl_admin'] }
meta: { title: 'acl.roleManage', icon: 'team', keepAlive: true, permission: ['acl_admin'] }
},
{
path: `/acl/apps`,
name: 'acl_apps',
component: () => import('../views/apps'),
meta: { title: '应用管理', icon: 'appstore', permission: ['acl_admin'] }
meta: { title: 'acl.appManage', icon: 'appstore', permission: ['acl_admin'] }
}
]
}

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

@ -11,7 +11,7 @@
:xs="24">
<a-card>
<a-card-meta :title="app.name">
<div slot="description" :title="app.description || ''">{{ app.description || '无' }}</div>
<div slot="description" :title="app.description || ''">{{ app.description || $t('none') }}</div>
<a-avatar style="background-color: #5dc2f1" slot="avatar">{{ app.name[0].toUpperCase() }}</a-avatar>
</a-card-meta>
<template slot="actions">
@ -65,11 +65,11 @@ export default {
handleDeleteApp(app) {
const that = this
this.$confirm({
title: '危险操作',
content: '确定要删除该App吗？',
title: that.$t('danger'),
content: that.$t('confirmDeleteApp'),
onOk() {
deleteApp(app.id).then((res) => {
that.$message.success(`删除成功：${app.name}`)
that.$message.success(that.$t('deleteSuccess'))
that.loadApps()
})
},

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

@ -1,7 +1,7 @@
<template>
<div class="acl-history">
<a-tabs default-active-key="1">
<a-tab-pane key="1" tab="权限变更">
<a-tab-pane key="1" :tab="$t('acl.permissionChange')">
<permisson-history-table
v-if="isloaded"
:allResourceTypes="allResourceTypes"
@ -17,7 +17,7 @@
@resourceClear="resourceClear"
></permisson-history-table>
</a-tab-pane>
<a-tab-pane key="2" tab="角色变更">
<a-tab-pane key="2" :tab="$t('acl.roleChange')">
<role-history-table
v-if="isloaded"
:allUsers="allUsers"
@ -26,7 +26,7 @@
:allUsersMap="allUsersMap"
></role-history-table>
</a-tab-pane>
<a-tab-pane key="3" tab="资源变更">
<a-tab-pane key="3" :tab="$t('acl.resourceChange')">
<resource-history-table
v-if="isloaded"
:allResources="allResources"
@ -41,7 +41,7 @@
@resourceClear="resourceClear"
></resource-history-table>
</a-tab-pane>
<a-tab-pane key="4" tab="资源类型变更">
<a-tab-pane key="4" :tab="$t('acl.resourceTypeChange')">
<resource-type-history-table
v-if="isloaded"
:allResourceTypes="allResourceTypes"
@ -52,7 +52,7 @@
:allResourceTypesMap="allResourceTypesMap"
></resource-type-history-table>
</a-tab-pane>
<a-tab-pane key="5" tab="触发器变更">
<a-tab-pane key="5" :tab="$t('acl.triggerChange')">
<trigger-history-table
v-if="isloaded"
:allTriggers="allTriggers"

27
cmdb-ui/src/modules/acl/views/module/appForm.vue
View File

@ -1,11 +1,12 @@
<template>
<CustomDrawer @close="handleClose" width="500" :title="title" :visible="visible" :closable="false">
<a-form :form="form" :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }">
<a-form-item label="应用名称">
<a-input v-decorator="['name', { rules: [{ required: true, message: '请输入应用名称' }] }]"> </a-input>
<a-form-item :label="$t('acl.app')">
<a-input v-decorator="['name', { rules: [{ required: true, message: $t('acl.appNameInput') }] }]"> </a-input>
</a-form-item>
<a-form-item label="描述">
<a-input v-decorator="['description', { rules: [{ required: true, message: '请输入描述' }] }]"> </a-input>
<a-form-item :label="$t('desc')">
<a-input v-decorator="['description', { rules: [{ required: true, message: $t('acl.descInput') }] }]">
</a-input>
</a-form-item>
<a-form-item label="AppId">
<a-input v-decorator="['app_id', { rules: [{ required: false }] }]" :disabled="mode === 'update'"> </a-input>
@ -19,8 +20,8 @@
</a-form-item>
</a-form>
<div class="custom-drawer-bottom-action">
<a-button @click="handleClose">取消</a-button>
<a-button @click="handleSubmit" type="primary">提交</a-button>
<a-button @click="handleClose">{{ $t('cancel') }}</a-button>
<a-button @click="handleSubmit" type="primary">{{ $t('submit') }}</a-button>
</div>
</CustomDrawer>
</template>
@ -32,10 +33,14 @@ export default {
data() {
return {
visible: false,
title: '创建应用',
mode: 'create',
}
},
computed: {
title() {
return this.$t('acl.addApp')
},
},
beforeCreate() {
this.form = this.$form.createForm(this)
},
@ -43,7 +48,7 @@ export default {
handleEdit(ele) {
this.visible = true
if (ele) {
this.title = '修改应用'
this.title = this.$t('updateApp')
this.mode = 'update'
console.log(ele)
const { name, description } = ele
@ -55,7 +60,7 @@ export default {
})
} else {
this.mode = 'create'
this.title = '创建应用'
this.title = this.$t('acl.addApp')
}
},
handleClose() {
@ -69,11 +74,11 @@ export default {
}
if (values.id) {
await updateApp(values.id, values).then((res) => {
this.$message.success('修改成功！')
this.$message.success(this.$t('updateSuccess'))
})
} else {
await addApp(values).then((res) => {
this.$message.success('创建成功!')
this.$message.success(this.$t('addSuccess'))
})
}
this.handleClose()

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

@ -9,10 +9,10 @@
<a-dropdown class="dropdown" size="small" placement="topCenter" :trigger="['click']" :disabled="dropdownIsDisabled">
<a-menu slot="overlay">
<a-menu-item v-for="(size,index) in pageSizes" :key="index" @click="handleItemClick(size)">
{{ size }}条/页
{{ size }}{{ $t('itemsPerPage') }}
</a-menu-item>
</a-menu>
<a-button size="small"> {{ pageSize }}条/页 <a-icon type="down" /> </a-button>
<a-button size="small"> {{ pageSize }}{{ $t('itemsPerPage') }}<a-icon type="down" /> </a-button>
</a-dropdown>
</a-space>
</a-col>

88
cmdb-ui/src/modules/acl/views/module/permCollectForm.vue
View File

@ -1,6 +1,6 @@
<template>
<CustomDrawer
:title="`权限汇总: ${user.nickname}`"
:title="`${$t('acl.summaryPermissions')}: ${user.nickname}`"
:visible="visible"
placement="left"
width="100%"
@ -24,7 +24,7 @@
<vxe-table :max-height="`${windowHeight - 230}px`" :data="resources" ref="rTable">
<vxe-column
field="name"
title="资源名"
:title="$t('acl.resourceName')"
width="30%"
:filters="[{ data: '' }]"
:filter-method="filterNameMethod"
@ -39,62 +39,17 @@
v-model="option.data"
@input="$panel.changeOption($event, !!option.data, option)"
@keyup.enter="$panel.confirmFilter()"
placeholder="按回车确认筛选"
:placeholder="$t('acl.pressEnter')"
/>
</template>
</template>
</vxe-column>
<vxe-column field="permissions" title="权限列表" width="70%">
<vxe-column field="permissions" :title="$t('acl.permissionList')" width="70%">
<template #default="{row}">
<a-tag color="cyan" v-for="(r, index) in row.permissions" :key="index">{{ r }}</a-tag>
</template>
</vxe-column>
</vxe-table>
<!-- <a-table
:columns="tableColumns"
:dataSource="resources"
:rowKey="record=>record.id"
:pagination="{ showTotal: (total, range) => `${range[0]}-${range[1]} 共 ${total} 条记录` }"
showPagination="auto"
ref="rTable"
size="middle">
<div slot="filterDropdown" slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }" class="custom-filter-dropdown">
<a-input
v-ant-ref="c => searchInput = c"
:placeholder="` ${column.title}`"
:value="selectedKeys[0]"
@change="e => setSelectedKeys(e.target.value ? [e.target.value] : [])"
@pressEnter="() => handleSearch(selectedKeys, confirm, column)"
style="width: 188px; margin-bottom: 8px; display: block;"
/>
<a-button
type="primary"
@click="() => handleSearch(selectedKeys, confirm, column)"
icon="search"
size="small"
style="width: 90px; margin-right: 8px"
>搜索</a-button>
<a-button
@click="() => handleReset(clearFilters, column)"
size="small"
style="width: 90px"
>重置</a-button>
</div>
<a-icon slot="filterIcon" slot-scope="filtered" type="search" :style="{ color: filtered ? '#108ee9' : undefined }" />
<template slot="nameSearchRender" slot-scope="text">
<span v-if="columnSearchText.name">
<template v-for="(fragment, i) in text.toString().split(new RegExp(`(?<=${columnSearchText.name})|(?=${columnSearchText.name})`, 'i'))">
<mark v-if="fragment.toLowerCase() === columnSearchText.name.toLowerCase()" :key="i" class="highlight">{{ fragment }}</mark>
<template v-else>{{ fragment }}</template>
</template>
</span>
<template v-else>{{ text }}</template>
</template>
<template slot="permissions" slot-scope="record">
<a-tag color="cyan" v-for="(r, index) in record" :key="index">{{ r }}</a-tag>
</template>
</a-table> -->
</a-spin>
</a-tab-pane>
</a-tabs>
@ -122,33 +77,6 @@ export default {
resourceTypes: [],
resourceTypePerms: [],
resources: [],
// tableColumns: [
// {
// title: '资源名',
// dataIndex: 'name',
// sorter: false,
// width: 150,
// // scopedSlots: {
// // customRender: 'nameSearchRender',
// // filterDropdown: 'filterDropdown',
// // filterIcon: 'filterIcon'
// // },
// // onFilter: (value, record) => record.name && record.name.toLowerCase().includes(value.toLowerCase()),
// // onFilterDropdownVisibleChange: (visible) => {
// // if (visible) {
// // setTimeout(() => {
// // this.searchInput.focus()
// // }, 0)
// // }
// // }
// },
// {
// title: '权限列表',
// dataIndex: 'permissions',
// width: 300,
// scopedSlots: { customRender: 'permissions' },
// },
// ],
columnSearchText: {
name: '',
},
@ -156,14 +84,14 @@ export default {
},
computed: {
...mapState({
windowHeight: state => state.windowHeight,
windowHeight: (state) => state.windowHeight,
}),
displayApps() {
const roles = this.$store.state.user.roles.permissions
if (roles.includes('acl_admin')) {
return this.apps
}
return this.apps.filter(item => {
return this.apps.filter((item) => {
if (roles.includes(`${item.name}_admin`)) {
return true
}
@ -192,7 +120,7 @@ export default {
},
async loadRoles(_appId) {
const res = await searchRole({ app_id: _appId, page_size: 9999, is_all: true })
this.roles = res.roles.filter(item => item.uid)
this.roles = res.roles.filter((item) => item.uid)
},
async handleSwitchApp(appId) {
this.currentAppId = appId
@ -218,7 +146,7 @@ export default {
},
async loadResource() {
this.spinning = true
const fil = this.roles.filter(role => role.uid === this.user.uid)
const fil = this.roles.filter((role) => role.uid === this.user.uid)
if (!fil[0]) {
return
}

37
cmdb-ui/src/modules/acl/views/module/permissionForm.vue
View File

@ -1,29 +1,33 @@
<template>
<CustomDrawer
:closable="false"
:title="drawerTitle"
:title="$t('acl.addReourceType')"
:visible="drawerVisible"
@close="onClose"
placement="right"
width="30%"
>
<a-form :form="form" :layout="formLayout" @submit="handleSubmit">
<a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="类型名">
<a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" :label="$t('acl.typeName')">
<a-input
name="name"
placeholder=""
v-decorator="['name', { rules: [{ required: true, message: '请输入资源名' }] }]"
v-decorator="['name', { rules: [{ required: true, message: $t('acl.resourceNameInput') }] }]"
/>
</a-form-item>
<a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="描述">
<a-textarea placeholder="请输入描述信息..." name="description" :rows="4" />
<a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" :label="$t('desc')">
<a-textarea :placeholder="$t('acl.descInput')" name="description" :rows="4" />
</a-form-item>
<a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="权限">
<a-form-item
:label-col="formItemLayout.labelCol"
:wrapper-col="formItemLayout.wrapperCol"
:label="$t('acl.permission')"
>
<div :style="{ borderBottom: '1px solid #E9E9E9' }">
<a-checkbox :indeterminate="indeterminate" @change="onCheckAllChange" :checked="checkAll">
全选
{{ $t('checkAll') }}
</a-checkbox>
</div>
<br />
@ -35,8 +39,8 @@
</a-form-item>
<div class="custom-drawer-bottom-action">
<a-button @click="onClose">取消</a-button>
<a-button @click="handleSubmit" type="primary">确定</a-button>
<a-button @click="onClose">{{ $t('cancel') }}</a-button>
<a-button @click="handleSubmit" type="primary">{{ $t('confirm') }}</a-button>
</div>
</a-form>
</CustomDrawer>
@ -49,7 +53,6 @@ export default {
name: 'ResourceForm',
data() {
return {
drawerTitle: '新增资源类型',
drawerVisible: false,
formLayout: 'vertical',
perms: ['1'],
@ -142,8 +145,8 @@ export default {
})
},
updateResourceType(id, data) {
updateResourceTypeById(id, data).then(res => {
this.$message.success(`更新成功`)
updateResourceTypeById(id, data).then((res) => {
this.$message.success(this.$t('updateSuccess'))
this.handleOk()
this.onClose()
})
@ -151,18 +154,12 @@ export default {
},
createResourceType(data) {
addResourceType(data).then(res => {
this.$message.success(`添加成功`)
addResourceType(data).then((res) => {
this.$message.success(this.$t('addSuccess'))
this.handleOk()
this.onClose()
})
// .catch(err => this.requestFailed(err))
},
// requestFailed (err) {
// const msg = ((err.response || {}).data || {}).message || '请求出现错误，请稍后再试'
// this.$message.error(`${msg}`)
// }
},
watch: {},
props: {

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

@ -21,22 +21,22 @@
:height="`${windowHeight - windowHeightMinus}px`"
:scroll-y="{ enabled: false }"
>
<vxe-column field="created_at" width="144px" title="操作时间">
<vxe-column field="created_at" width="144px" :title="$t('acl.operateTime')">
<template #default="{ row }">
<span>{{ row.deleted_at || row.updated_at || row.created_at }}</span>
</template>
</vxe-column>
<vxe-column field="operate_uid" width="130px" title="操作员"></vxe-column>
<vxe-column field="operate_type" width="80px" title="操作">
<vxe-column field="operate_uid" width="130px" :title="$t('acl.operator')"></vxe-column>
<vxe-column field="operate_type" width="100px" :title="$t('operation')">
<template #default="{ row }">
<a-tag :color="row.operate_type === 'grant' ? 'green' : 'red'">{{
operateTypeMap.get(row.operate_type)
}}</a-tag>
</template>
</vxe-column>
<vxe-column field="rid" title="用户"></vxe-column>
<vxe-column field="resource_type_id" title="资源类型"></vxe-column>
<vxe-column field="resources" title="资源">
<vxe-column field="rid" :title="$t('user')"></vxe-column>
<vxe-column field="resource_type_id" :title="$t('acl.resourceType')"></vxe-column>
<vxe-column field="resources" :title="$t('acl.resource')">
<template #default="{ row }">
<template v-if="row.resource_ids.length > 0">
<a-tooltip placement="top">
@ -55,14 +55,14 @@
</template>
</template>
</vxe-column>
<vxe-column title="权限">
<vxe-column :title="$t('acl.permission')">
<template #default="{ row }">
<a-tag v-for="(perm, index) in row.permission_ids" :key="'perms_' + perm + index">
{{ perm }}
</a-tag>
</template>
</vxe-column>
<vxe-column field="source" width="100px" title="来源"></vxe-column>
<vxe-column field="source" width="100px" :title="$t('acl.source')"></vxe-column>
</vxe-table>
<pager
:current-page.sync="queryParams.page"
@ -122,10 +122,6 @@ export default {
loading: true,
app_id: this.$route.name.split('_')[0],
tableData: [],
operateTypeMap: new Map([
['grant', '授权'],
['revoke', '撤销'],
]),
queryParams: {
page: 1,
page_size: 50,
@ -133,49 +129,6 @@ export default {
start: '',
end: '',
},
permissionTableAttrList: [
{
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: 'rid',
value_type: '2',
choice_value: this.allRoles,
},
{
alias: '资源类型',
is_choice: true,
name: 'resource_type_id',
value_type: '2',
choice_value: this.allResourceTypes,
},
{
alias: '资源',
is_choice: true,
name: 'resource_id',
value_type: '2',
choice_value: this.allResources,
},
{
alias: '操作',
is_choice: true,
name: 'operate_type',
value_type: '2',
choice_value: [{ 授权: 'grant' }, { 撤销: 'revoke' }],
},
],
}
},
async created() {
@ -198,6 +151,12 @@ export default {
},
},
computed: {
operateTypeMap() {
return new Map([
['grant', this.$t('grant')],
['revoke', this.$t('acl.cancel')],
])
},
windowHeight() {
return this.$store.state.windowHeight
},
@ -207,6 +166,51 @@ export default {
tableDataLength() {
return this.tableData.length
},
permissionTableAttrList() {
return [
{
alias: this.$t('acl.date'),
is_choice: false,
name: 'datetime',
value_type: '3',
},
{
alias: this.$t('acl.operator'),
is_choice: true,
name: 'operate_uid',
value_type: '2',
choice_value: this.allUsers,
},
{
alias: this.$t('user'),
is_choice: true,
name: 'rid',
value_type: '2',
choice_value: this.allRoles,
},
{
alias: this.$t('acl.resourceType'),
is_choice: true,
name: 'resource_type_id',
value_type: '2',
choice_value: this.allResourceTypes,
},
{
alias: this.$t('acl.resource'),
is_choice: true,
name: 'resource_id',
value_type: '2',
choice_value: this.allResources,
},
{
alias: this.$t('operation'),
is_choice: true,
name: 'operate_type',
value_type: '2',
choice_value: [{ [this.$t('grant')]: 'grant' }, { [this.$t('acl.cancel')]: 'revoke' }],
},
]
},
},
methods: {
// 获取数据

44
cmdb-ui/src/modules/acl/views/module/resourceBatchPerm.vue
View File

@ -1,6 +1,6 @@
<template>
<CustomDrawer
title="便捷授权"
:title="$t('acl.convenient')"
width="500px"
:maskClosable="false"
:closable="true"
@ -10,12 +10,12 @@
<a-form :form="form">
<a-form-item>
<div slot="label" style="display: inline-block">
<span>角色列表</span>
<span>{{ $t('acl.roleList') }}</span>
<a-divider type="vertical" />
<a-switch
style="display: inline-block"
checked-children="用户"
un-checked-children="虚拟"
:checked-children="$t('user')"
:un-checked-children="$t('acl.virtual')"
@change="handleRoleTypeChange"
v-model="roleType"
/>
@ -23,37 +23,37 @@
<el-select
:style="{ width: '100%' }"
size="small"
v-decorator="['roleIdList', { rules: [{ required: true, message: '请选择角色名称' }] }]"
v-decorator="['roleIdList', { rules: [{ required: true, message: $t('acl.role_placeholder2') }] }]"
multiple
filterable
placeholder="请选择角色名称，可多选！"
:placeholder="$t('acl.role_placeholder3')"
>
<el-option v-for="role in allRoles" :key="role.id" :value="role.id" :label="role.name"></el-option>
</el-select>
</a-form-item>
<a-form-item label="权限列表">
<a-form-item :label="$t('acl.permissionList')">
<el-select
:style="{ width: '100%' }"
size="small"
name="permName"
v-decorator="['permName', { rules: [{ required: true, message: '请选择权限' }] }]"
v-decorator="['permName', { rules: [{ required: true, message: this.$t('acl.permission_placeholder') }] }]"
multiple
placeholder="请选择权限，可多选！"
:placeholder="this.$t('acl.permission_placeholder')"
>
<el-option v-for="perm in allPerms" :key="perm.name" :value="perm.name" :label="perm.name"></el-option>
</el-select>
</a-form-item>
<a-form-item label="资源名">
<a-form-item :label="$t('acl.resourceName')">
<a-textarea
v-decorator="['resource_names', { rules: [{ required: true, message: '请输入资源名，换行分隔' }] }]"
v-decorator="['resource_names', { rules: [{ required: true, message: $t('acl.resourceBatchTips') }] }]"
:autoSize="{ minRows: 4 }"
placeholder="请输入资源名，换行分隔"
:placeholder="$t('acl.resourceBatchTips')"
/>
</a-form-item>
<div class="custom-drawer-bottom-action">
<a-button @click="handleRevoke" type="danger" ghost>权限回收</a-button>
<a-button @click="handleSubmit" type="primary">授权</a-button>
<a-button @click="handleRevoke" type="danger" ghost>{{ $t('acl.revoke') }}</a-button>
<a-button @click="handleSubmit" type="primary">{{ $t('grant') }}</a-button>
</div>
</a-form>
</CustomDrawer>
@ -98,12 +98,12 @@ export default {
this.loadRoles(Number(target))
},
loadRoles(isUserRole) {
searchRole({ page_size: 9999, app_id: this.$route.name.split('_')[0], user_role: isUserRole }).then(res => {
searchRole({ page_size: 9999, app_id: this.$route.name.split('_')[0], user_role: isUserRole }).then((res) => {
this.allRoles = res.roles
})
},
loadPerm(resourceTypeId) {
getResourceTypePerms(resourceTypeId).then(res => {
getResourceTypePerms(resourceTypeId).then((res) => {
this.allPerms = res
})
},
@ -111,13 +111,13 @@ export default {
this.form.validateFields((err, values) => {
if (!err) {
console.log(values)
values.roleIdList.forEach(roleId => {
values.roleIdList.forEach((roleId) => {
setBatchRoleResourceByResourceName(roleId, {
resource_names: values.resource_names.split('\n'),
perms: values.permName,
resource_type_id: this.resource_type_id,
}).then(res => {
this.$message.success('授权成功')
}).then((res) => {
this.$message.success(this.$t('operateSuccess'))
this.form.resetFields()
})
})
@ -128,13 +128,13 @@ export default {
this.form.validateFields((err, values) => {
if (!err) {
console.log(values)
values.roleIdList.forEach(roleId => {
values.roleIdList.forEach((roleId) => {
setBatchRoleResourceRevokeByResourceName(roleId, {
resource_names: values.resource_names.split('\n'),
perms: values.permName,
resource_type_id: this.resource_type_id,
}).then(res => {
this.$message.success('权限回收成功')
}).then((res) => {
this.$message.success(this.$t('operateSuccess'))
this.form.resetFields()
})
})

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

@ -8,27 +8,27 @@
width="30%"
>
<a-form :form="form" @submit="handleSubmit" :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }">
<a-form-item label="资源名">
<a-form-item :label="$t('acl.resourceName')">
<a-input
name="name"
placeholder=""
v-decorator="['name', { rules: [{ required: true, message: '请输入资源名' }] }]"
v-decorator="['name', { rules: [{ required: true, message: $t('acl.resourceNameInput') }] }]"
/>
</a-form-item>
<a-form-item label="资源类型">
<a-form-item :label="$t('acl.resourceType')">
<a-select v-model="selectedTypeId">
<a-select-option v-for="type in allTypes" :key="type.id">{{ type.name }}</a-select-option>
</a-select>
</a-form-item>
<a-form-item label="是否组">
<a-form-item :label="$t('acl.isGroup')">
<a-radio-group v-model="isGroup">
<a-radio :value="true">
是
{{ $t('yes') }}
</a-radio>
<a-radio :value="false">
否
{{ $t('no') }}
</a-radio>
</a-radio-group>
</a-form-item>
@ -36,8 +36,8 @@
<a-input name="id" type="hidden" v-decorator="['id', { rules: [] }]" />
</a-form-item>
<div class="custom-drawer-bottom-action">
<a-button @click="onClose">取消</a-button>
<a-button @click="handleSubmit" type="primary">确定</a-button>
<a-button @click="onClose">{{ $t('cancel') }}</a-button>
<a-button @click="handleSubmit" type="primary">{{ $t('confirm') }}</a-button>
</div>
</a-form>
</CustomDrawer>
@ -52,7 +52,6 @@ export default {
name: 'ResourceForm',
data() {
return {
drawerTitle: '新增资源',
drawerVisible: false,
allTypes: [],
isGroup: false,
@ -68,7 +67,11 @@ export default {
this.getAllResourceTypes()
},
computed: {},
computed: {
drawerTitle() {
return this.$t('acl.addResource')
},
},
mounted() {},
methods: {
getAllResourceTypes() {
@ -95,7 +98,7 @@ export default {
values.type_id = this.selectedTypeId
values.app_id = this.$route.name.split('_')[0]
if (values.id) {
this.$message.error('错误提示')
this.$message.error(this.$t('acl.errorTips'))
} else {
this.createResource(values)
}
@ -105,23 +108,17 @@ export default {
createResource(data) {
if (!this.isGroup) {
addResource(data).then((res) => {
this.$message.success(`添加成功`)
this.$message.success(this.$t('addSuccess'))
this.onClose()
})
// .catch(err => this.requestFailed(err))
} else {
addResourceGroup(data).then((res) => {
this.$message.success(`添加成功`)
this.$message.success(this.$t('addSuccess'))
this.onClose()
})
// .catch(err => this.requestFailed(err))
}
},
// requestFailed(err) {
// const msg = ((err.response || {}).data || {}).message || '请求出现错误，请稍后再试'
// this.$message.error(`${msg}`)
// },
},
watch: {
'$route.name': function(newValue, oldValue) {

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

@ -1,5 +1,5 @@
<template>
<a-modal v-model="visible" :title="`组成员：${editRecord.name}`" :width="800" :footer="null">
<a-modal v-model="visible" :title="`${$t('acl.groupMember')}${editRecord.name}`" :width="800" :footer="null">
<div :style="{ maxHeight: '500px', overflow: 'auto' }">
<a-tag :style="{ marginBottom: '5px' }" v-for="mem in members" :key="mem.name">
{{ mem.name }}

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

@ -1,5 +1,5 @@
<template>
<a-modal v-model="visible" :title="`成员管理：${editRecord.name}`" @ok="handleSubmit" :width="690">
<a-modal v-model="visible" :title="`${$t('acl.memberManage')}${editRecord.name}`" @ok="handleSubmit" :width="690">
<!-- <CustomTransfer
ref="customTransfer"
:show-search="true"
@ -26,7 +26,7 @@
@selectChange="selectChange"
:selectedKeys="selectedKeys"
>
<span slot="notFoundContent">暂无数据</span>
<span slot="notFoundContent">{{ $t('noData') }}</span>
<template slot="children" slot-scope="{ props: { direction, filteredItems } }">
<div class="ant-transfer-list-content" v-if="direction === 'right'">
<div
@ -104,7 +104,7 @@ export default {
})
updateResourceGroup(this.editRecord['id'], { items: items.join(',') }).then(() => {
this.visible = false
this.$message.success('更新成功！')
this.$message.success(this.$t('updateSuccess'))
})
// .catch(err => this.$httpError(err))
},

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

@ -4,7 +4,7 @@
ref="child"
:attrList="resourceTableAttrList"
:hasSwitch="true"
switchValue="组"
:switchValue="$t('acl.group2')"
@onSwitchChange="onSwitchChange"
@search="handleSearch"
@searchFormReset="searchFormReset"
@ -22,30 +22,30 @@
resizable
:height="`${windowHeight - 310}px`"
>
<vxe-column field="created_at" width="144px" title="操作时间"></vxe-column>
<vxe-column field="operate_uid" width="130px" title="操作员"></vxe-column>
<vxe-column field="operate_type" width="80px" title="操作">
<vxe-column field="created_at" width="144px" :title="$t('acl.operateTime')"></vxe-column>
<vxe-column field="operate_uid" width="130px" :title="$t('acl.operator')"></vxe-column>
<vxe-column field="operate_type" width="100px" :title="$t('operation')">
<template #default="{ row }">
<a-tag :color="handleTagColor(row.operate_type)">
{{ operateTypeMap.get(row.operate_type) }}
</a-tag>
</template>
</vxe-column>
<vxe-column field="link_id" title="资源名">
<vxe-column field="link_id" :title="$t('acl.resourceName')">
<template #default="{ row }">
<span>
{{ row.current.name || row.origin.name }}
</span>
</template>
</vxe-column>
<vxe-column title="描述">
<vxe-column :title="$t('desc')">
<template #default="{ row }">
<p>
{{ row.description }}
</p>
</template>
</vxe-column>
<vxe-column field="source" width="100px" title="来源"></vxe-column>
<vxe-column field="source" width="100px" :title="$t('acl.source')"></vxe-column>
</vxe-table>
<pager
:current-page.sync="queryParams.page"
@ -99,40 +99,6 @@ export default {
checked: false,
tableData: [],
app_id: this.$route.name.split('_')[0],
resourceTableAttrList: [
{
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' }],
},
{
alias: '资源名',
is_choice: true,
name: 'link_id',
value_type: '2',
choice_value: this.allResources,
},
],
operateTypeMap: new Map([
['create', '新建'],
['update', '修改'],
['delete', '删除'],
]),
colorMap: new Map([
['create', 'green'],
['update', 'orange'],
@ -170,9 +136,47 @@ export default {
windowHeight() {
return this.$store.state.windowHeight
},
operateTypeMap() {
return new Map([
['create', this.$t('create')],
['update', this.$t('update')],
['delete', this.$t('delete')],
])
},
tableDataLength() {
return this.tableData.length
},
resourceTableAttrList() {
return [
{
alias: this.$t('acl.date'),
is_choice: false,
name: 'datetime',
value_type: '3',
},
{
alias: this.$t('acl.operator'),
is_choice: true,
name: 'operate_uid',
value_type: '2',
choice_value: this.allUsers,
},
{
alias: this.$t('operation'),
is_choice: true,
name: 'operate_type',
value_type: '2',
choice_value: [{ [this.$t('create')]: 'create' }, { [this.$t('update')]: 'update' }, { [this.$t('delete')]: 'delete' }],
},
{
alias: this.$t('acl.resourceName'),
is_choice: true,
name: 'link_id',
value_type: '2',
choice_value: this.allResources,
},
]
},
},
methods: {
async getTable(queryParams) {
@ -280,7 +284,7 @@ export default {
switch (operate_type) {
// create
case 'create': {
item.description = `新建资源：${item.current.name}`
item.description = `${this.$t('acl.newResource')}${item.current.name}`
break
}
case 'update': {
@ -290,9 +294,9 @@ export default {
const oldVal = item.origin[key]
if (!_.isEqual(newVal, oldVal) && key !== 'updated_at' && key !== 'deleted_at' && key !== 'created_at') {
if (oldVal === null) {
item.description += ` 【 ${key} : 改为 ${newVal} 】 `
item.description += ` 【 ${key} : -> ${newVal} 】 `
} else {
item.description += ` 【 ${key} : 由 ${oldVal} 改为 ${newVal} 】 `
item.description += ` 【 ${key} : ${oldVal} -> ${newVal} 】 `
}
}
}
@ -300,18 +304,18 @@ export default {
const currentResource_ids = item.currentResource_ids
if (!_.isEqual(originResource_ids, currentResource_ids)) {
if (originResource_ids.length === 0) {
const str = ` 【 resource_ids : 新增 ${currentResource_ids} 】 `
const str = ` 【 resource_ids : ${this.$t('new')} ${currentResource_ids} 】 `
item.description += str
} else {
const str = ` 【 resource_ids : 由 ${originResource_ids} 改为 ${currentResource_ids} 】 `
const str = ` 【 resource_ids : ${originResource_ids} -> ${currentResource_ids} 】 `
item.description += str
}
}
if (!item.description) item.description = '没有修改'
if (!item.description) item.description = this.$t('acl.noChange')
break
}
case 'delete': {
item.description = `删除资源：${item.origin.name}`
item.description = `${this.$t('acl.deleteResource')}${item.origin.name}`
break
}
}

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

@ -17,7 +17,7 @@
>
<vxe-column
field="name"
title="角色名"
:title="$t('acl.role')"
width="20%"
:filters="[{ data: '' }]"
:filter-method="filterNameMethod"
@ -32,19 +32,19 @@
v-model="option.data"
@input="$panel.changeOption($event, !!option.data, option)"
@keyup.enter="$panel.confirmFilter()"
placeholder="按回车确认筛选"
:placeholder="$t('acl.pressEnter')"
/>
</template>
</template>
</vxe-column>
<vxe-column field="users" title="下属用户" width="35%">
<vxe-column field="users" :title="$t('acl.subordinateUsers')" width="35%">
<template #default="{row}">
<a-tag color="green" v-for="user in row.users" :key="user.nickname">
{{ user.nickname }}
</a-tag>
</template>
</vxe-column>
<vxe-column field="perms" title="权限列表" width="35%">
<vxe-column field="perms" :title="$t('acl.permissionList')" width="35%">
<template #default="{row}">
<a-tag
closable
@ -57,43 +57,18 @@
</a-tag>
</template>
</vxe-column>
<vxe-column field="operate" title="批量操作">
<vxe-column field="operate" :title="$t('batchOperate')">
<template #default="{row}">
<a-button size="small" type="danger" @click="handleClearAll(row)">
清空
{{ $t('clear') }}
</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>
<p style="font-size: 14px; line-height: 17px; color: rgba(0, 0, 0, 0.6)">{{ $t('noData') }}</p>
</template>
</vxe-table>
<!-- <a-table
:columns="columns"
:dataSource="resPerms"
:rowKey="record => record.name"
:pagination="{ showTotal: (total, range) => `${range[0]}-${range[1]} 共 ${total} 条记录` }"
showPagination="auto"
ref="rTable"
size="middle"
>
<div slot="perms" slot-scope="text">
<a-tag closable color="cyan" v-for="perm in text" :key="perm.name" @close="deletePerm(perm.rid, perm.name)">
{{ perm.name }}
</a-tag>
</div>
<div slot="users" slot-scope="text">
<a-tag color="green" v-for="user in text" :key="user.nickname">
{{ user.nickname }}
</a-tag>
</div>
<div slot="operate" slot-scope="text">
<a-button size="small" type="danger" @click="handleClearAll(text)">
清空
</a-button>
</div>
</a-table> -->
</CustomDrawer>
</template>
<script>
@ -112,40 +87,11 @@ export default {
data() {
return {
isGroup: false,
drawerTitle: '权限列表',
drawerVisible: false,
record: null,
allPerms: [],
resPerms: [],
roleID: null,
// columns: [
// {
// title: '角色名',
// dataIndex: 'name',
// sorter: false,
// width: 50,
// },
// {
// title: '下属用户',
// dataIndex: 'users',
// sorter: false,
// width: 150,
// scopedSlots: { customRender: 'users' },
// },
// {
// title: '权限列表',
// dataIndex: 'perms',
// sorter: false,
// width: 150,
// scopedSlots: { customRender: 'perms' },
// },
// {
// title: '批量操作',
// sorter: false,
// width: 50,
// scopedSlots: { customRender: 'operate' },
// },
// ],
childrenDrawer: false,
allRoles: [],
}
@ -154,6 +100,9 @@ export default {
...mapState({
windowHeight: (state) => state.windowHeight,
}),
drawerTitle() {
return this.$t('acl.permissionList')
}
},
beforeCreate() {
this.form = this.$form.createForm(this)
@ -175,7 +124,7 @@ export default {
perms: [],
app_id: this.$route.name.split('_')[0],
}).then((res) => {
this.$message.success('删除成功')
this.$message.success(this.$t('deleteSuccess'))
this.$nextTick(() => {
this.getResPerms(this.record.id)
})
@ -185,7 +134,7 @@ export default {
perms: [],
app_id: this.$route.name.split('_')[0],
}).then((res) => {
this.$message.success('删除成功')
this.$message.success(this.$t('deleteSuccess'))
// for (let i = 0; i < this.resPerms.length; i++) {
// if (this.resPerms[i].name === text.name) {
// this.resPerms[i].perms = []
@ -227,7 +176,7 @@ export default {
perms: [permName],
app_id: this.$route.name.split('_')[0],
}).then((res) => {
this.$message.success(`删除成功`)
this.$message.success(this.$t('deleteSuccess'))
})
// .catch(err => this.requestFailed(err))
} else {
@ -235,18 +184,13 @@ export default {
perms: [permName],
app_id: this.$route.name.split('_')[0],
}).then((res) => {
this.$message.success(`删除成功`)
this.$message.success(this.$t('deleteSuccess'))
})
// .catch(err => this.requestFailed(err))
}
},
handleCancel(e) {
this.drawerVisible = false
},
// requestFailed(err) {
// const msg = ((err.response || {}).data || {}).message || '请求出现错误，请稍后再试'
// this.$message.error(`${msg}`)
// },
filterNameMethod({ option, row }) {
return row.name.toLowerCase().includes(option.data.toLowerCase())
},

52
cmdb-ui/src/modules/acl/views/module/resourcePermManageForm.vue
View File

@ -3,42 +3,42 @@
<a-form :form="form">
<a-form-item>
<div slot="label" style="display: inline-block">
<span>角色列表</span>
<span>{{ $t('acl.roleList') }}</span>
<a-divider type="vertical" />
<a-switch
style="display: inline-block"
checked-children="用户"
un-checked-children="虚拟"
:checked-children="$t('user')"
:un-checked-children="$t('acl.virtual')"
@change="handleRoleTypeChange"
/>
</div>
<el-select
:style="{ width: '100%' }"
size="small"
v-decorator="['roleIdList', { rules: [{ required: true, message: '请选择角色名称' }] }]"
v-decorator="['roleIdList', { rules: [{ required: true, message: $t('acl.role_placeholder2') }] }]"
multiple
filterable
placeholder="请选择角色名称，可多选！"
:placeholder="$t('acl.role_placeholder3')"
>
<el-option v-for="role in allRoles" :key="role.id" :value="role.id" :label="role.name"></el-option>
</el-select>
</a-form-item>
<a-form-item label="权限列表">
<a-form-item :label="$t('acl.permissionList')">
<el-select
:style="{ width: '100%' }"
size="small"
name="permName"
v-decorator="['permName', { rules: [{ required: true, message: '请选择权限' }] }]"
v-decorator="['permName', { rules: [{ required: true, message: $t('acl.permission_placeholder') }] }]"
multiple
placeholder="请选择权限，可多选！"
:placeholder="$t('acl.permission_placeholder') "
>
<el-option v-for="perm in allPerms" :key="perm.name" :value="perm.name" :label="perm.name"></el-option>
</el-select>
</a-form-item>
<div class="custom-drawer-bottom-action">
<a-button @click="closeForm">取消</a-button>
<a-button @click="handleSubmit" type="primary" :loading="loading">确定</a-button>
<a-button @click="closeForm">{{ $t('cancel') }}</a-button>
<a-button @click="handleSubmit" type="primary" :loading="loading">{{ $t('confirm') }}</a-button>
</div>
</a-form>
</CustomDrawer>
@ -117,16 +117,12 @@ export default {
this.type = type
if (Array.isArray(record)) {
this.loadPerm(record[0]['resource_type_id'])
this.title = `${type === 'grant' ? '批量授权' : '批量权限回收'}`
this.title = `${type === 'grant' ? this.$t('acl.batchGrant') : this.$t('acl.batchRevoke')}`
} else {
this.title = `添加授权：${record.name}`
this.title = `${this.$t('acl.editPerm')}${record.name}`
this.loadPerm(record['resource_type_id'])
}
},
// requestFailed(err) {
// const msg = ((err.response || {}).data || {}).message || '请求出现错误，请稍后再试'
// this.$message.error(`${msg}`)
// },
handleSubmit(e) {
e.preventDefault()
this.form.validateFields((err, values) => {
@ -136,16 +132,10 @@ export default {
this.loading = true
if (!this.isGroup) {
if (Array.isArray(this.instance)) {
// const promises = this.instance.map(item => {
// return setRoleResourcePerm(roleId, item.id, params)
// })
// Promise.all(promises).then(() => {
// this.$message.success('添加授权成功')
// })
if (this.type === 'grant') {
setBatchRoleResourcePerm(roleId, { ...params, resource_ids: this.instance.map((a) => a.id) })
.then((res) => {
this.$message.success('添加授权成功')
this.$message.success(this.$t('operateSuccess'))
})
.finally(() => {
this.loading = false
@ -153,7 +143,7 @@ export default {
} else {
setBatchRoleResourceRevoke(roleId, { ...params, resource_ids: this.instance.map((a) => a.id) })
.then((res) => {
this.$message.success('批量权限回收成功')
this.$message.success(this.$t('operateSuccess'))
})
.finally(() => {
this.loading = false
@ -162,7 +152,7 @@ export default {
} else {
setRoleResourcePerm(roleId, this.instance.id, params)
.then((res) => {
this.$message.success('添加授权成功')
this.$message.success(this.$t('operateSuccess'))
})
.finally(() => {
this.loading = false
@ -170,16 +160,10 @@ export default {
}
} else {
if (Array.isArray(this.instance)) {
// const promises = this.instance.map(item => {
// return setRoleResourceGroupPerm(roleId, item.id, params)
// })
// Promise.all(promises).then(() => {
// this.$message.success('添加授权成功')
// })
if (this.type === 'grant') {
setBatchRoleResourceGroupPerm(roleId, { ...params, group_ids: this.instance.map((a) => a.id) })
.then((res) => {
this.$message.success('添加授权成功')
this.$message.success(this.$t('operateSuccess'))
})
.finally(() => {
this.loading = false
@ -190,7 +174,7 @@ export default {
group_ids: this.instance.map((a) => a.id),
})
.then((res) => {
this.$message.success('批量权限回收成功')
this.$message.success(this.$t('operateSuccess'))
})
.finally(() => {
this.loading = false
@ -199,7 +183,7 @@ export default {
} else {
setRoleResourceGroupPerm(roleId, this.instance.id, params)
.then((res) => {
this.$message.success('添加授权成功')
this.$message.success(this.$t('operateSuccess'))
})
.finally(() => {
this.loading = false

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

@ -1,32 +1,32 @@
<template>
<CustomDrawer
:closable="false"
:title="drawerTitle"
:title="$t('acl.addReourceType')"
:visible="drawerVisible"
@close="onClose"
placement="right"
width="500px"
>
<a-form :form="form" @submit="handleSubmit" :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }">
<a-form-item label="类型名">
<a-form-item :label="$t('acl.typeName')">
<a-input
name="name"
placeholder="类型名称"
v-decorator="['name', { rules: [{ required: true, message: '请输入类型名' }] }]"
:placeholder="$t('acl.typeName')"
v-decorator="['name', { rules: [{ required: true, message: $t('acl.typeNameInput') }] }]"
/>
</a-form-item>
<a-form-item label="描述">
<a-form-item :label="$t('desc')">
<a-textarea
placeholder="请输入描述信息..."
:placeholder="$t('acl.descInput')"
name="description"
:rows="4"
v-decorator="['description', { rules: [] }]"
/>
</a-form-item>
<a-form-item label="权限">
<a-select mode="tags" v-model="perms" style="width: 100%" placeholder="请输入权限名..."> </a-select>
<a-form-item :label="$t('acl.permission')">
<a-select mode="tags" v-model="perms" style="width: 100%" :placeholder="$t('acl.permInput')"> </a-select>
</a-form-item>
<a-form-item>
@ -34,8 +34,8 @@
</a-form-item>
<div class="custom-drawer-bottom-action">
<a-button @click="onClose">取消</a-button>
<a-button @click="handleSubmit" type="primary">确定</a-button>
<a-button @click="onClose">{{ $t('cancel') }}</a-button>
<a-button @click="handleSubmit" type="primary">{{ $t('confirm') }}</a-button>
</div>
</a-form>
</CustomDrawer>
@ -48,7 +48,6 @@ export default {
name: 'ResourceForm',
data() {
return {
drawerTitle: '新增资源类型',
drawerVisible: false,
perms: [],
}
@ -104,7 +103,7 @@ export default {
},
updateResourceType(id, data) {
updateResourceTypeById(id, data).then((res) => {
this.$message.success(`更新成功`)
this.$message.success(this.$t('updateSuccess'))
this.handleOk()
this.onClose()
})
@ -113,17 +112,11 @@ export default {
createResourceType(data) {
addResourceType(data).then((res) => {
this.$message.success(`添加成功`)
this.$message.success(this.$t('addSuccess'))
this.handleOk()
this.onClose()
})
// .catch(err => this.requestFailed(err))
},
// requestFailed (err) {
// const msg = ((err.response || {}).data || {}).message || '请求出现错误，请稍后再试'
// this.$message.error(`${msg}`)
// }
},
watch: {},
props: {

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

@ -16,30 +16,30 @@
:loading="loading"
:height="`${windowHeight - 310}px`"
>
<vxe-column field="created_at" width="144px" title="操作时间"></vxe-column>
<vxe-column field="operate_uid" width="130px" title="操作员"></vxe-column>
<vxe-column field="operate_type" width="80px" title="操作">
<vxe-column field="created_at" width="144px" :title="$t('acl.operateTime')"></vxe-column>
<vxe-column field="operate_uid" width="130px" :title="$t('acl.operator')"></vxe-column>
<vxe-column field="operate_type" width="100px" :title="$t('operation')">
<template #default="{ row }">
<a-tag :color="handleTagColor(row.operate_type)">
{{ operateTypeMap.get(row.operate_type) }}
</a-tag>
</template>
</vxe-column>
<vxe-column field="link_id" title="资源类型名">
<vxe-column field="link_id" :title="$t('acl.resourceTypeName')">
<template #default="{ row }">
<span>
{{ row.current.name || row.origin.name }}
</span>
</template>
</vxe-column>
<vxe-column title="描述">
<vxe-column :title="$t('desc')">
<template #default="{ row }">
<p>
{{ row.changeDescription }}
</p>
</template>
</vxe-column>
<vxe-column field="source" width="100px" title="来源"></vxe-column>
<vxe-column field="source" width="100px" :title="$t('acl.source')"></vxe-column>
</vxe-table>
<pager
:current-page.sync="queryParams.page"
@ -93,40 +93,6 @@ export default {
checked: false,
tableData: [],
app_id: this.$route.name.split('_')[0],
resourceTableAttrList: [
{
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' }],
},
{
alias: '资源类型',
is_choice: true,
name: 'link_id',
value_type: '2',
choice_value: this.allResourceTypes,
},
],
operateTypeMap: new Map([
['create', '新建'],
['update', '修改'],
['delete', '删除'],
]),
colorMap: new Map([
['create', 'green'],
['update', 'orange'],
@ -155,12 +121,50 @@ export default {
},
},
computed: {
operateTypeMap() {
return new Map([
['create', this.$t('create')],
['update', this.$t('update')],
['delete', this.$t('delete')],
])
},
windowHeight() {
return this.$store.state.windowHeight
},
tableDataLength() {
return this.tableData.length
},
resourceTableAttrList() {
return [
{
alias: this.$t('acl.date'),
is_choice: false,
name: 'datetime',
value_type: '3',
},
{
alias: this.$t('acl.operator'),
is_choice: true,
name: 'operate_uid',
value_type: '2',
choice_value: this.allUsers,
},
{
alias: this.$t('operation'),
is_choice: true,
name: 'operate_type',
value_type: '2',
choice_value: [{ [this.$t('create')]: 'create' }, { [this.$t('update')]: 'update' }, { [this.$t('delete')]: 'delete' }],
},
{
alias: this.$t('acl.resourceType'),
is_choice: true,
name: 'link_id',
value_type: '2',
choice_value: this.allResourceTypes,
},
]
},
},
methods: {
async getTable(queryParams) {
@ -236,7 +240,9 @@ export default {
switch (operate_type) {
// create
case 'create': {
item.changeDescription = `新增资源类型：${item.current.name}\n描述：${item.current.description}\n权限：${item.extra.permission_ids.current}`
item.changeDescription = `${this.$t('acl.addReourceType')}：${item.current.name}\n${this.$t('desc')}：${
item.current.description
}\n${this.$t('acl.permission')}: ${item.extra.permission_ids.current}`
break
}
case 'update': {
@ -246,10 +252,10 @@ export default {
const oldVal = item.origin[key]
if (!_.isEqual(newVal, oldVal) && key !== 'updated_at' && key !== 'deleted_at' && key !== 'created_at') {
if (oldVal === null || oldVal === '') {
const str = ` 【 ${key} : 改为 ${newVal} 】 \n`
const str = ` 【 ${key} : -> ${newVal} 】 \n`
item.changeDescription += str
} else {
const str = ` 【 ${key} : 由 ${oldVal} 改为 ${newVal} 】 \n`
const str = ` 【 ${key} : ${oldVal} -> ${newVal} 】 \n`
item.changeDescription += str
}
}
@ -257,13 +263,13 @@ export default {
const currentPerms = item.extra.permission_ids.current
const originPerms = item.extra.permission_ids.origin
if (!_.isEqual(currentPerms, originPerms)) {
item.changeDescription += ` 【 permission_ids : 由 ${originPerms} 改为 ${currentPerms} 】 `
item.changeDescription += ` 【 permission_ids : ${originPerms} -> ${currentPerms} 】 `
}
if (!item.changeDescription) item.changeDescription = '没有修改'
if (!item.changeDescription) item.changeDescription = this.$t('acl.noChange')
break
}
case 'delete': {
item.changeDescription = `删除资源类型：${item.origin.name}\n描述：${item.origin.description}\n权限：${item.extra.permission_ids.origin}`
item.changeDescription = `${this.$t('acl.deleteResourceType')}${item.origin.name}\n${this.$t('desc')}: ${item.origin.description}\n${this.$t('acl.permission')}: ${item.extra.permission_ids.origin}`
break
}
}

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

@ -2,12 +2,12 @@
<CustomDrawer
width="800px"
placement="left"
title="资源列表"
:title="$t('acl.resourceList')"
@close="handleCancel"
:visible="visible"
:hasFooter="false"
>
<a-form-item label="资源类型" :label-col="{ span: 2 }" :wrapper-col="{ span: 14 }">
<a-form-item :label="$t('acl.resourceType')" :label-col="{ span: 4 }" :wrapper-col="{ span: 14 }">
<a-select v-model="typeSelected" style="width:100%" @change="refresh">
<a-select-option v-for="type in resourceTypes" :value="type.id" :key="type.id">{{ type.name }}</a-select-option>
</a-select>
@ -22,7 +22,7 @@
>
<vxe-column
field="name"
title="资源名"
:title="$t('acl.resourceName')"
width="30%"
:filters="[{ data: '' }]"
:filter-method="filterNameMethod"
@ -30,7 +30,7 @@
>
<template #header="{ column }">
<span>{{ column.title }}</span>
<a-tooltip title="复制资源名">
<a-tooltip :title="$t('acl.copyResource')">
<a-icon @click="copyResourceName" class="resource-user-form-copy" theme="filled" type="copy" />
</a-tooltip>
</template>
@ -48,7 +48,7 @@
</template>
</template>
</vxe-column>
<vxe-column field="permissions" title="权限列表" width="70%">
<vxe-column field="permissions" :title="$t('acl.permissionList')" width="70%">
<template #default="{row}">
<a-tag color="cyan" v-for="(r, index) in row.permissions" :key="index">{{ r }}</a-tag>
</template>
@ -58,69 +58,6 @@
<p style="font-size: 14px; line-height: 17px; color: rgba(0, 0, 0, 0.6)">暂无数据</p>
</template>
</vxe-table>
<!-- <a-table
:columns="columns"
:dataSource="records"
:rowKey="record => record.id"
:pagination="false"
ref="rTable"
size="middle"
:scroll="{ y: 300 }"
> -->
<!-- <div slot="filterDropdown" slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }" class="custom-filter-dropdown">
<a-input
v-ant-ref="c => searchInput = c"
:placeholder="` ${column.title}`"
:value="selectedKeys[0]"
@change="e => setSelectedKeys(e.target.value ? [e.target.value] : [])"
@pressEnter="() => handleSearch(selectedKeys, confirm, column)"
style="width: 188px; margin-bottom: 8px; display: block;"
/>
<a-button
type="primary"
@click="() => handleSearch(selectedKeys, confirm, column)"
icon="search"
size="small"
style="width: 90px; margin-right: 8px"
>搜索</a-button>
<a-button
@click="() => handleReset(clearFilters, column)"
size="small"
style="width: 90px"
>重置</a-button>
</div>
<a-icon slot="filterIcon" slot-scope="filtered" type="search" :style="{ color: filtered ? '#108ee9' : undefined }" />
<template slot="nameSearchRender" slot-scope="text">
<span v-if="columnSearchText.name">
<template v-for="(fragment, i) in text.toString().split(new RegExp(`(?<=${columnSearchText.name})|(?=${columnSearchText.name})`, 'i'))">
<mark v-if="fragment.toLowerCase() === columnSearchText.name.toLowerCase()" :key="i" class="highlight">{{ fragment }}</mark>
<template v-else>{{ fragment }}</template>
</template>
</span>
<template v-else>{{ text }}</template>
</template> -->
<!-- <template slot="permissions" slot-scope="record">
<a-tag color="cyan" v-for="(r, index) in record" :key="index">{{ r }}</a-tag>
</template>
</a-table> -->
<!-- <div
:style="{
position: 'absolute',
left: 0,
bottom: 0,
width: '100%',
borderTop: '1px solid #e9e9e9',
padding: '10px 16px',
background: '#fff',
textAlign: 'right',
}"
>
<a-button :style="{marginRight: '8px'}" @click="handleCancel">
取消
</a-button>
<a-button @click="handleOk" type="primary">确定</a-button>
</div> -->
</CustomDrawer>
</template>
<script>
@ -141,33 +78,6 @@ export default {
name: '',
},
filterName: '',
// columns: [
// {
// title: '资源名',
// field: 'name',
// sorter: false,
// width: '30%',
// // scopedSlots: {
// // customRender: 'nameSearchRender',
// // filterDropdown: 'filterDropdown',
// // filterIcon: 'filterIcon'
// // },
// // onFilter: (value, record) => record.name && record.name.toLowerCase().includes(value.toLowerCase()),
// // onFilterDropdownVisibleChange: (visible) => {
// // if (visible) {
// // setTimeout(() => {
// // this.searchInput.focus()
// // }, 0)
// // }
// // }
// },
// {
// title: '权限列表',
// field: 'permissions',
// width: '70%',
// slots: { default: 'permissions_default' },
// },
// ],
}
},
computed: {
@ -184,14 +94,6 @@ export default {
this.rid = record.id
this.refresh()
},
// handleSearch(selectedKeys, confirm, column) {
// confirm()
// this.columnSearchText[column.dataIndex] = selectedKeys[0]
// },
// handleReset(clearFilters, column) {
// clearFilters()
// this.columnSearchText[column.dataIndex] = ''
// },
loadResourceTypes() {
this.resourceTypes = []
const appId = this.$route.name.split('_')[0]
@ -204,7 +106,6 @@ export default {
this.typeSelected = null
}
})
// .catch(err => this.$httpError(err))
},
handleOk() {
this.visible = false
@ -217,7 +118,6 @@ export default {
}).then(res => {
this.records = res.resources
})
// .catch(err=>this.$httpError(err))
}
},
handleCancel() {
@ -238,7 +138,7 @@ export default {
.join('\n')
this.copy(val, () => {
this.$message.success('复制成功')
this.$message.success(this.$t('copySuccess'))
})
},
copy(value, cb) {

46
cmdb-ui/src/modules/acl/views/module/roleForm.vue
View File

@ -8,40 +8,29 @@
width="500px"
>
<a-form :form="form" :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }" @submit="handleSubmit">
<a-form-item label="角色名">
<a-form-item :label="$t('acl.role')">
<a-input
name="name"
placeholder="角色名"
v-decorator="['name', { rules: [{ required: true, message: '请输入角色名' }] }]"
:placeholder="$t('acl.role_placeholder1')"
v-decorator="['name', { rules: [{ required: true, message: $t('acl.role_placeholder1') }] }]"
/>
</a-form-item>
<a-form-item v-if="$route.name.split('_')[0] !== 'acl'" label="密码">
<a-input name="password" placeholder="密码" v-decorator="['password', { rules: [{ required: false }] }]" />
<a-form-item v-if="$route.name.split('_')[0] !== 'acl'" :label="$t('acl.password')">
<a-input name="password" :placeholder="$t('acl.password')" v-decorator="['password', { rules: [{ required: false }] }]" />
</a-form-item>
<!-- <a-form-item label="继承自">
<a-select
showSearch
v-model="selectedParents"
:filterOption="false"
placeholder="可选择继承角色"
mode="multiple"
>
<a-select-option v-for="role in scrollData" :key="role.id">{{ role.name }}</a-select-option>
</a-select>
</a-form-item> -->
<a-form-item label="继承自">
<a-form-item :label="$t('acl.inheritedFrom')">
<el-select
:style="{ width: '100%' }"
size="small"
v-model="selectedParents"
multiple
filterable
placeholder="可选择继承角色"
:placeholder="$t('acl.selectedParents')"
>
<el-option v-for="role in allRoles" :key="role.id" :value="role.id" :label="role.name"></el-option>
</el-select>
</a-form-item>
<a-form-item label="是否应用管理员">
<a-form-item :label="$t('acl.isAppAdmin')">
<a-switch
@change="onChange"
name="is_app_admin"
@ -53,8 +42,8 @@
</a-form-item>
<div class="custom-drawer-bottom-action">
<a-button @click="onClose">取消</a-button>
<a-button @click="handleSubmit" type="primary">确定</a-button>
<a-button @click="onClose">{{ $t('cancel') }}</a-button>
<a-button @click="handleSubmit" type="primary">{{ $t('confirm') }}</a-button>
</div>
</a-form>
</CustomDrawer>
@ -93,7 +82,7 @@ export default {
// return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
// },
handleCreate() {
this.drawerTitle = '新增角色'
this.drawerTitle = this.$t('acl.addRole')
this.drawerVisible = true
},
onClose() {
@ -107,7 +96,7 @@ export default {
},
handleEdit(record) {
this.drawerTitle = `编辑：${record.name}`
this.drawerTitle = `${this.$t('edit')}: ${record.name}`
this.drawerVisible = true
this.current_id = record.id
const _parents = this.id2parents[record.id]
@ -142,7 +131,7 @@ export default {
updateRole(id, data) {
this.updateParents(id)
updateRoleById(id, { ...data, app_id: this.$route.name.split('_')[0] }).then((res) => {
this.$message.success(`更新成功`)
this.$message.success(this.$t('updateSuccess'))
this.handleOk()
this.onClose()
})
@ -151,7 +140,7 @@ export default {
createRole(data) {
addRole({ ...data, app_id: this.$route.name.split('_')[0] }).then((res) => {
this.$message.success(`添加成功`)
this.$message.success(this.$t('addSuccess'))
this.updateParents(res.id)
this.handleOk()
this.onClose()
@ -171,16 +160,9 @@ export default {
child_ids: [id],
app_id: this.$route.name.split('_')[0],
})
// addParentRole(id, item, { app_id: this.$route.name.split('_')[0] })
// .catch(err => this.requestFailed(err))
}
})
},
// requestFailed(err) {
// console.log(err)
// const msg = ((err.response || {}).data || {}).message || '请求出现错误，请稍后再试'
// this.$message.error(`${msg}`)
// },
},
watch: {},
props: {

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

@ -4,7 +4,7 @@
ref="child"
:attrList="roleTableAttrList"
:hasSwitch="true"
switchValue="角色关系"
:switchValue="$t('acl.roleRelation')"
@onSwitchChange="onSwitchChange"
@search="handleSearch"
@searchFormReset="searchFormReset"
@ -19,16 +19,16 @@
resizable
:height="`${windowHeight - 310}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">
<vxe-column field="created_at" width="144px" :title="$t('acl.operateTime')"></vxe-column>
<vxe-column field="operate_uid" :title="$t('acl.operator')" width="130px"></vxe-column>
<vxe-column field="operate_type" :title="$t('operation')" 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 ? '角色' : '角色'">
<vxe-column :title="checked ? $t('acl.role2') : $t('acl.role2')">
<template #default="{ row }">
<template v-if="!checked">
<a-tag color="blue">{{ row.current.name || row.origin.name }}</a-tag>
@ -40,7 +40,7 @@
</template>
</template>
</vxe-column>
<vxe-column :title="checked ? '继承自' : '管理员'" :width="checked ? '350px' : '80px'">
<vxe-column :title="checked ? $t('acl.inheritedFrom') : $t('acl.admin')" :width="checked ? '350px' : '80px'">
<template #default="{ row }">
<template v-if="!checked">
<a-icon type="check" v-if="row.current.is_app_admin" />
@ -52,14 +52,14 @@
</template>
</template>
</vxe-column>
<vxe-column title="描述" v-if="!checked">
<vxe-column :title="$t('desc')" v-if="!checked">
<template #default="{ row }">
<p>
{{ row.description }}
</p>
</template>
</vxe-column>
<vxe-column field="source" title="来源" width="100px"></vxe-column>
<vxe-column field="source" :title="$t('acl.source')" width="100px"></vxe-column>
</vxe-table>
<pager
:current-page.sync="queryParams.page"
@ -105,13 +105,6 @@ export default {
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'],
@ -127,42 +120,53 @@ export default {
start: '',
end: '',
},
roleTableAttrList: [
}
},
computed: {
operateTypeMap() {
return new Map([
['create', this.$t('create')],
['update', this.$t('update')],
['delete', this.$t('delete')],
['role_relation_add', this.$t('acl.roleRelationAdd')],
['role_relation_delete', this.$t('acl.roleRelationDelete')],
])
},
windowHeight() {
return this.$store.state.windowHeight
},
tableDataLength() {
return this.tableData.length
},
roleTableAttrList() {
return [
{
alias: '日期',
alias: this.$t('acl.date'),
is_choice: false,
name: 'datetime',
value_type: '3',
},
{
alias: '操作员',
alias: this.$t('acl.operator'),
is_choice: true,
name: 'operate_uid',
value_type: '2',
choice_value: this.allUsers,
},
{
alias: '操作',
alias: this.$t('operation'),
is_choice: true,
name: 'operate_type',
value_type: '2',
choice_value: [
{ 新建: 'create' },
{ 修改: 'update' },
{ 删除: 'delete' },
{ 添加角色关系: 'role_relation_add' },
{ 删除角色关系: 'role_relation_delete' },
{ [this.$t('create')]: 'create' },
{ [this.$t('update')]: 'update' },
{ [this.$t('delete')]: 'delete' },
{ [this.$t('acl.roleRelationAdd')]: 'role_relation_add' },
{ [this.$t('acl.roleRelationDelete')]: 'role_relation_delete' },
],
},
],
}
},
computed: {
windowHeight() {
return this.$store.state.windowHeight
},
tableDataLength() {
return this.tableData.length
]
},
},
async created() {
@ -273,7 +277,7 @@ export default {
switch (operate_type) {
// create
case 'create': {
item.description = `新建角色：${item.current.name}`
item.description = `${this.$t('acl.addRole')}${item.current.name}`
break
}
case 'update': {
@ -283,15 +287,15 @@ export default {
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} 】 `
const str = ` 【 ${key} : -> ${newVal} 】 `
item.description += str
} else {
const str = ` 【 ${key} : 由 ${oldVal} 改为 ${newVal} 】 `
item.description += str
const str = ` 【 ${key} : ${oldVal} -> ${newVal} 】 `
item.description += ` 【 ${key} : ${oldVal} -> ${newVal} 】 `
}
}
}
if (!item.description) item.description = '没有修改'
if (!item.description) item.description = this.$t('acl.noChange')
break
}
case 'delete': {
@ -321,7 +325,7 @@ export default {
resourceMap.forEach((value, key) => {
permsArr.push(`${id2resources[key].name}：${value}`)
})
item.description = `继承者：${child_ids}\n继承自：${parent_ids}\n涉及资源及权限：\n${permsArr.join(`\n`)}`
item.description = `${this.$t('acl.heir')}：${child_ids}\n${this.$t('acl.inheritedFrom')}：${parent_ids}\n${this.$t('acl.involvingRP')}：\n${permsArr.join(`\n`)}`
break
}
}

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

@ -19,7 +19,7 @@
@popupScroll="loadMoreData(attr.name, $event)"
@search="(value) => fetchData(value, attr.name)"
v-model="queryParams[attr.name]"
placeholder="请选择"
:placeholder="$t('placeholder2')"
v-if="attr.is_choice"
show-search
:filter-option="filterOption"
@ -38,7 +38,6 @@
@change="onChange"
:style="{ width: '100%' }"
format="YYYY-MM-DD HH:mm:ss"
:placeholder="['开始时间', '结束时间']"
:show-time="{
hideDisabledOptions: true,
defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('23:59:59', 'HH:mm:ss')],
@ -67,7 +66,7 @@
@popupScroll="loadMoreData(item.name, $event)"
@search="(value) => fetchData(value, item.name)"
v-model="queryParams[item.name]"
placeholder="请选择"
:placeholder="$t('placeholder2')"
v-if="item.is_choice"
show-search
:filter-option="filterOption"
@ -85,7 +84,7 @@
:style="{ width: '100%' }"
@change="onChange"
format="YYYY-MM-DD HH:mm"
:placeholder="['开始时间', '结束时间']"
:placeholder="[$t('acl.startAt'), $t('acl.endAt')]"
v-else-if="valueTypeMap[item.value_type] == 'date' || valueTypeMap[item.value_type] == 'datetime'"
:show-time="{
hideDisabledOptions: true,
@ -107,13 +106,13 @@
v-model="checked"
/>
<a-button :style="{ marginLeft: '8px' }" type="primary" html-type="submit" @click="handleSearch">
查询
{{ $t('query') }}
</a-button>
<a-button :style="{ marginLeft: '8px' }" @click="handleReset">
重置
{{ $t('reset') }}
</a-button>
<a :style="{ marginLeft: '8px', fontSize: '12px' }" @click="toggle" v-if="attrList.length >= 5">
{{ expand ? '隐藏' : '展开' }} <a-icon :type="expand ? 'up' : 'down'" />
{{ expand ? $t('expand') : $t('expand') }} <a-icon :type="expand ? 'up' : 'down'" />
</a>
</a-col>
</a-row>

36
cmdb-ui/src/modules/acl/views/module/triggerForm.vue
View File

@ -2,30 +2,30 @@
<CustomDrawer
@close="handleClose"
width="500"
:title="`${triggerId ? '修改' : '新建'}触发器`"
:title="`${triggerId ? $t('update') : $t('create')}${$t('acl.trigger')}`"
:visible="visible"
:maskClosable="false"
>
<a-form :form="form" :label-col="{ span: 6 }" :wrapper-col="{ span: 15 }">
<a-form-item label="触发器名">
<a-input size="large" v-decorator="['name', { rules: [{ required: true, message: '请输入触发器名' }] }]">
<a-form-item :label="$t('name')">
<a-input size="large" v-decorator="['name', { rules: [{ required: true, message: $t('acl.triggerNameInput') }] }]">
</a-input>
</a-form-item>
<a-form-item label="资源名">
<a-input size="large" v-decorator="['wildcard']" placeholder="优先正则模式（次通配符）"> </a-input>
<a-form-item :label="$t('acl.resourceName')">
<a-input size="large" v-decorator="['wildcard']" :placeholder="$t('acl.triggerTips1')"> </a-input>
</a-form-item>
<a-form-item label="创建人">
<a-form-item :label="$t('acl.creator')">
<el-select :style="{ width: '100%' }" filterable multiple v-decorator="['uid']">
<template v-for="role in roles">
<el-option v-if="role.uid" :key="role.id" :value="role.uid" :label="role.name">{{ role.name }}</el-option>
</template>
</el-select>
</a-form-item>
<a-form-item label="资源类型">
<a-form-item :label="$t('acl.resourceType')">
<el-select
:style="{ width: '100%' }"
@change="handleRTChange"
v-decorator="['resource_type_id', { rules: [{ required: true, message: '请选择资源类型' }] }]"
v-decorator="['resource_type_id', { rules: [{ required: true, message: $t('acl.pleaseSelectType') }] }]"
>
<el-option
v-for="resourceType in resourceTypeList"
@ -34,25 +34,25 @@
:label="resourceType.name"
></el-option>
</el-select>
<a-tooltip title="查看正则匹配结果">
<a-tooltip :title="$t('acl.viewMatchResult')">
<a class="trigger-form-pattern" @click="handlePattern"><a-icon type="eye"/></a>
</a-tooltip>
</a-form-item>
<a-form-item label="角色">
<a-form-item :label="$t('acl.role2')">
<el-select
:style="{ width: '100%' }"
filterable
multiple
v-decorator="['roles', { rules: [{ required: true, message: '请选择角色' }] }]"
v-decorator="['roles', { rules: [{ required: true, message: $t('acl.role_placeholder2') }] }]"
>
<el-option v-for="role in roles" :key="role.id" :value="role.id" :label="role.name"></el-option>
</el-select>
</a-form-item>
<a-form-item label="权限">
<a-form-item :label="$t('acl.permission')">
<el-select
:style="{ width: '100%' }"
multiple
v-decorator="['permissions', { rules: [{ required: true, message: '请选择权限' }] }]"
v-decorator="['permissions', { rules: [{ required: true, message: $t('acl.permission_placeholder') }] }]"
>
<el-option
v-for="perm in selectResourceTypePerms"
@ -62,13 +62,13 @@
></el-option>
</el-select>
</a-form-item>
<a-form-item label="启用/禁用">
<a-form-item :label="$t('acl.enable')/$t('acl.disable')">
<a-switch v-decorator="['enabled', { rules: [], valuePropName: 'checked', initialValue: true }]" />
</a-form-item>
</a-form>
<div class="custom-drawer-bottom-action">
<a-button @click="handleClose">取消</a-button>
<a-button @click="handleSubmit" type="primary">提交</a-button>
<a-button @click="handleClose">{{ $t('cancel') }}</a-button>
<a-button @click="handleSubmit" type="primary">{{ $t('submit') }}</a-button>
</div>
<TriggerPattern ref="triggerPattern" :roles="roles" />
</CustomDrawer>
@ -159,13 +159,13 @@ export default {
if (this.triggerId) {
updateTrigger(this.triggerId, { ...values, app_id: this.app_id }).then((res) => {
this.visible = false
this.$message.success('修改成功！')
this.$message.success(this.$t('updateSuccess'))
this.$emit('refresh')
})
} else {
addTrigger({ ...values, app_id: this.app_id }).then((res) => {
this.visible = false
this.$message.success('创建成功!')
this.$message.success(this.$t('addSuccess'))
this.$emit('refresh')
})
}

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

@ -16,23 +16,23 @@
resizable
:height="`${windowHeight - 310}px`"
>
<vxe-column field="created_at" width="144px" title="操作时间"></vxe-column>
<vxe-column field="operate_uid" width="130px" title="操作员"></vxe-column>
<vxe-column field="operate_type" width="80px" title="操作">
<vxe-column field="created_at" width="144px" :title="$t('acl.operateTime')"></vxe-column>
<vxe-column field="operate_uid" width="130px" :title="$t('acl.operator')"></vxe-column>
<vxe-column field="operate_type" width="100px" :title="$t('operation')">
<template #default="{ row }">
<a-tag :color="handleTagColor(row.operate_type)">
{{ operateTypeMap.get(row.operate_type) }}
</a-tag>
</template>
</vxe-column>
<vxe-column field="trigger_id" width="250px" title="触发器">
<vxe-column field="trigger_id" width="250px" :title="$t('acl.trigger')">
<template #default="{ row }">
<span>
{{ row.current.name || row.origin.name }}
</span>
</template>
</vxe-column>
<vxe-column title="描述">
<vxe-column :title="$t('desc')">
<template #default="{ row }">
<p>
{{ row.changeDescription }}
@ -95,13 +95,6 @@ export default {
app_id: this.$route.name.split('_')[0],
loading: true,
tableData: [],
operateTypeMap: new Map([
['create', '新建'],
['update', '修改'],
['delete', '删除'],
['trigger_apply', '应用'],
['trigger_cancel', '取消'],
]),
colorMap: new Map([
['create', 'green'],
['delete', 'red'],
@ -109,41 +102,6 @@ export default {
['trigger_apply', 'green'],
['trigger_cancel', 'red'],
]),
triggerTableAttrList: [
{
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' },
{ 应用: 'trigger_apply' },
{ 取消: 'trigger_cancel' },
],
},
{
alias: '触发器',
is_choice: true,
name: 'trigger_id',
value_type: '2',
choice_value: this.allTriggers,
},
],
queryParams: {
page: 1,
page_size: 50,
@ -164,12 +122,58 @@ export default {
},
},
computed: {
operateTypeMap() {
return new Map([
['create', this.$t('create')],
['update', this.$t('update')],
['delete', this.$t('delete')],
['trigger_apply', this.$t('acl.apply')],
['trigger_cancel', this.$t('cancel')],
])
},
windowHeight() {
return this.$store.state.windowHeight
},
tableDataLength() {
return this.tableData.length
},
triggerTableAttrList() {
return [
{
alias: this.$t('acl.date'),
is_choice: false,
name: 'datetime',
value_type: '3',
},
{
alias: this.$t('acl.operator'),
is_choice: true,
name: 'operate_uid',
value_type: '2',
choice_value: this.allUsers,
},
{
alias: this.$t('operation'),
is_choice: true,
name: 'operate_type',
value_type: '2',
choice_value: [
{ [this.$t('create')]: 'create' },
{ [this.$t('update')]: 'update' },
{ [this.$t('delete')]: 'delete' },
{ [this.$t('acl.apply')]: 'trigger_apply' },
{ [this.$t('cancel')]: 'trigger_cancel' },
],
},
{
alias: this.$t('acl.trigger'),
is_choice: true,
name: 'trigger_id',
value_type: '2',
choice_value: this.allTriggers,
},
]
},
},
methods: {
async getTable(queryParams) {
@ -220,9 +224,9 @@ export default {
const str = item.current.roles
const newArr = str.slice(1, str.length - 1).split(', ')
const newStr = newArr.map((i) => this.allRolesMap.get(Number(i))).join('，')
item.changeDescription = `新增触发器：${item.current.name}\n资源类型：${this.allResourceTypesMap.get(
item.changeDescription = `${this.$t('acl.addTrigger')}: ${item.current.name}\n${this.$t('acl.resourceType')}: ：${this.allResourceTypesMap.get(
item.current.resource_type_id
)}，资源名：${item.current.wildcard}，角色：[${newStr}]\n权限：${item.current.permissions}\n状态：${
)}，this.$t('acl.resourceName')：${item.current.wildcard}，${this.$t('acl.role2')}: [${newStr}]\n${this.$t('acl.permission')}: ${item.current.permissions}\n${this.$t('status')}: ${
item.current.enabled
}`
break
@ -234,24 +238,24 @@ export default {
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} 】 `
const str = ` 【 ${key} : -> ${newVal} 】 `
item.changeDescription += str
} else {
const str = ` 【 ${key} : 由 ${oldVal} 改为 ${newVal} 】 `
item.changeDescription += str
const str = ` 【 ${key} : ${oldVal} -> ${newVal} 】 `
item.changeDescription += ` 【 ${key} : ${oldVal} -> ${newVal} 】 `
}
}
}
if (!item.changeDescription) item.changeDescription = '没有修改'
if (!item.changeDescription) item.changeDescription = this.$t('acl.noChange')
break
}
case 'delete': {
const str = item.origin.roles
const newArr = str.slice(1, str.length - 1).split(', ')
const newStr = newArr.map((i) => this.allRolesMap.get(Number(i))).join('，')
item.changeDescription = `删除触发器：${item.origin.name}\n资源类型：${this.allResourceTypesMap.get(
item.changeDescription = `${this.$t('acl.deleteTrigger')}: ${item.origin.name}\n${this.$t('acl.resourceType')}: ：${this.allResourceTypesMap.get(
item.origin.resource_type_id
)}，资源名：${item.origin.wildcard}，角色：[${newStr}]\n权限：${item.origin.permissions}\n状态：${
)}，this.$t('acl.resourceName')：${item.origin.wildcard}，${this.$t('acl.role2')}: [${newStr}]\n${this.$t('acl.permission')}: ${item.origin.permissions}\n${this.$t('status')}: ${
item.origin.enabled
}`
break
@ -260,9 +264,9 @@ export default {
const str = item.current.roles
const newArr = str.slice(1, str.length - 1).split(', ')
const newStr = newArr.map((i) => this.allRolesMap.get(Number(i))).join('，')
item.changeDescription = `应用触发器：${item.current.name}\n资源类型：${this.allResourceTypesMap.get(
item.changeDescription = `${this.$t('acl.applyTrigger')}: ${item.current.name}\n${this.$t('acl.resourceType')}: ：${this.allResourceTypesMap.get(
item.current.resource_type_id
)}，资源名：${item.current.wildcard}，角色：[${newStr}]\n权限：${item.current.permissions}\n状态：${
)}，this.$t('acl.resourceName')：${item.current.wildcard}，${this.$t('acl.role2')}: [${newStr}]\n${this.$t('acl.permission')}: ${item.current.permissions}\n${this.$t('status')}: ${
item.current.enabled
}`
break
@ -271,9 +275,9 @@ export default {
const str = item.current.roles
const newArr = str.slice(1, str.length - 1).split(', ')
const newStr = newArr.map((i) => this.allRolesMap.get(Number(i))).join('，')
item.changeDescription = `取消触发器：${item.current.name}\n资源类型：${this.allResourceTypesMap.get(
item.changeDescription = `${this.$t('acl.cancelTrigger')}: ${item.current.name}\n${this.$t('acl.resourceType')}: ：${this.allResourceTypesMap.get(
item.current.resource_type_id
)}，资源名：${item.current.wildcard}，角色：[${newStr}]\n权限：${item.current.permissions}\n状态：${
)}，this.$t('acl.resourceName')：${item.current.wildcard}，${this.$t('acl.role2')}: [${newStr}]\n${this.$t('acl.permission')}: ${item.current.permissions}\n${this.$t('status')}: ${
item.current.enabled
}`
break

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

@ -1,7 +1,7 @@
<template>
<CustomDrawer
:hasFooter="false"
title="正则匹配结果"
:title="$t('acl.viewMatchResult')"
:visible="patternVisible"
width="500"
@close="
@ -16,16 +16,16 @@
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="创建人">
<vxe-table-column field="name" :title="$t('acl.resourceName')"></vxe-table-column>
<vxe-table-column field="uid" :title="$t('acl.creator')">
<template #default="{row}">
{{ getRoleName(row.uid) }}
</template>
</vxe-table-column>
<vxe-table-column field="created_at" title="创建时间"></vxe-table-column>
<vxe-table-column field="created_at" :title="$t('created_at')"></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>
<p style="font-size: 14px; line-height: 17px; color: rgba(0, 0, 0, 0.6)">{{ $t('noData') }}</p>
</template>
</vxe-table>
</CustomDrawer>

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

@ -8,33 +8,38 @@
width="500px"
>
<a-form :form="form" @submit="handleSubmit" :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }">
<a-form-item label="用户名(英文)">
<a-form-item :label="$t('acl.username')">
<a-input
name="username"
placeholder="英文名"
v-decorator="['username', { rules: [{ required: true, message: '请输入用户名' }] }]"
:placeholder="$t('acl.username_placeholder')"
v-decorator="['username', { rules: [{ required: true, message: $t('acl.username_placeholder') }] }]"
/>
</a-form-item>
<a-form-item label="中文名">
<a-input name="nickname" v-decorator="['nickname', { rules: [] }]" />
<a-form-item :label="$t('acl.nickname')">
<a-input
name="nickname"
:placeholder="$t('acl.nickname_placeholder')"
v-decorator="['nickname', { rules: [] }]"
/>
</a-form-item>
<a-form-item label="密码">
<a-form-item :label="$t('acl.password')">
<a-input
type="password"
name="password"
v-decorator="['password', { rules: [{ required: true, message: '请输入密码' }] }]"
:placeholder="$t('acl.password_placeholder')"
v-decorator="['password', { rules: [{ required: true, message: $t('acl.password_placeholder') }] }]"
/>
</a-form-item>
<a-form-item label="部门">
<a-form-item :label="$t('acl.department')">
<a-input name="department" v-decorator="['department', { rules: [] }]" />
</a-form-item>
<a-form-item label="小组">
<a-form-item :label="$t('acl.group')">
<a-input name="catalog" v-decorator="['catalog', { rules: [] }]" />
</a-form-item>
<a-form-item label="邮箱">
<a-form-item :label="$t('acl.email')">
<a-input
name="email"
v-decorator="[
@ -43,11 +48,11 @@
rules: [
{
type: 'email',
message: '请输入正确的邮箱！',
message: $t('acl.email_placeholder'),
},
{
required: true,
message: '请输入邮箱',
message: $t('acl.email_placeholder'),
},
],
},
@ -55,14 +60,14 @@
/>
</a-form-item>
<a-form-item label="手机号码">
<a-form-item :label="$t('acl.mobile')">
<a-input
name="mobile"
v-decorator="['mobile', { rules: [{ message: '请输入正确的手机号码', pattern: /^1\d{10}$/ }] }]"
v-decorator="['mobile', { rules: [{ message: $t('acl.mobileTips'), pattern: /^1\d{10}$/ }] }]"
/>
</a-form-item>
<a-form-item label="是否锁定">
<a-form-item :label="$t('acl.isBlock')">
<a-switch @change="onChange" name="block" v-decorator="['block', { rules: [], valuePropName: 'checked' }]" />
</a-form-item>
@ -71,8 +76,8 @@
</a-form-item>
<div class="custom-drawer-bottom-action">
<a-button @click="onClose">取消</a-button>
<a-button @click="handleSubmit" type="primary">确定</a-button>
<a-button @click="onClose">{{ $t('cancel') }}</a-button>
<a-button @click="handleSubmit" type="primary">{{ $t('confirm') }}</a-button>
</div>
</a-form>
</CustomDrawer>
@ -85,7 +90,6 @@ export default {
name: 'AttributeForm',
data() {
return {
drawerTitle: '新增用户',
drawerVisible: false,
}
},
@ -94,7 +98,11 @@ export default {
this.form = this.$form.createForm(this)
},
computed: {},
computed: {
drawerTitle() {
return this.$t('acl.addUser')
},
},
mounted() {},
methods: {
handleCreate() {
@ -142,7 +150,7 @@ export default {
},
updateUser(attrId, data) {
updateUserById(attrId, data).then((res) => {
this.$message.success(`更新成功`)
this.$message.success(this.$t('updateSuccess'))
this.handleOk()
this.onClose()
})
@ -151,17 +159,11 @@ export default {
createUser(data) {
addUser(data).then((res) => {
this.$message.success(`添加成功`)
this.$message.success(this.$t('addSuccess'))
this.handleOk()
this.onClose()
})
// .catch(err => this.requestFailed(err))
},
// requestFailed (err) {
// const msg = ((err.response || {}).data || {}).message || '请求出现错误，请稍后再试'
// this.$message.error(`${msg}`)
// }
},
watch: {},
props: {

26
cmdb-ui/src/modules/acl/views/module/usersUnderRoleForm.vue
View File

@ -1,6 +1,6 @@
<template>
<CustomDrawer :closable="true" :visible="visible" width="500px" @close="handleClose" title="组用户">
<a-form-item label="添加用户" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
<CustomDrawer :closable="true" :visible="visible" width="500px" @close="handleClose" :title="$t('acl.groupUser')">
<a-form-item :label="$t('acl.addUser')" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
<a-row>
<a-col span="15">
<el-select v-model="selectedChildrenRole" multiple collapse-tags size="small" filterable>
@ -14,14 +14,14 @@
</el-select>
</a-col>
<a-col span="5" offset="1">
<a-button style="display: inline-block" @click="handleAddRole">确定</a-button>
<a-button style="display: inline-block" @click="handleAddRole">{{ $t('confirm') }}</a-button>
</a-col>
</a-row>
</a-form-item>
<a-card>
<a-row :gutter="24" v-for="(record, index) in records" :key="record.id" :style="{ marginBottom: '5px' }">
<a-col :span="20">{{ index + 1 }}、{{ record.nickname }}</a-col>
<a-col :span="4"><a-button type="danger" size="small" @click="handleRevokeUser(record)">移除</a-button></a-col>
<a-col :span="4"><a-button type="danger" size="small" @click="handleRevokeUser(record)">{{ $t('acl.remove') }}</a-button></a-col>
</a-row>
</a-card>
</CustomDrawer>
@ -63,34 +63,22 @@ export default {
this.visible = true
this.loadRecords(roleId)
},
// filterOption(input, option) {
// return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
// },
async handleAddRole() {
// await this.selectedChildrenRole.forEach(item => {
// addParentRole(item, this.roleId, { app_id: this.$route.name.split('_')[0] }).then(res => {
// this.$message.success('添加成功')
// })
// // .catch(err=>{
// // this.$httpError(err)
// // })
// })
await addBatchParentRole(this.roleId, {
child_ids: this.selectedChildrenRole,
app_id: this.$route.name.split('_')[0],
})
this.loadRecords(this.roleId)
this.$message.success('添加完成')
this.$message.success(this.$t('addSuccess'))
this.selectedChildrenRole = []
},
handleRevokeUser(record) {
const that = this
this.$confirm({
content: '是否确定要移除该用户',
content: that.$t('acl.deleteUserConfirm'),
onOk() {
delParentRole(record.role.id, that.roleId, { app_id: that.$route.name.split('_')[0] }).then((res) => {
that.$message.success('删除成功！')
that.$message.success(that.$t('deleteSuccess'))
that.loadRecords(that.roleId)
})
// .catch(err=>that.$httpError(err))

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

@ -1,19 +1,19 @@
<template>
<div class="acl-operation-history">
<a-tabs default-active-key="1">
<a-tab-pane key="1" tab="权限变更">
<a-tab-pane key="1" :tab="$t('acl.permissionChange')">
<permisson-table></permisson-table>
</a-tab-pane>
<a-tab-pane key="2" tab="角色变更">
<a-tab-pane key="2" :tab="$t('acl.roleChange')">
<role-history-table></role-history-table>
</a-tab-pane>
<a-tab-pane key="3" tab="资源变更">
<a-tab-pane key="3" :tab="$t('acl.resourceChange')">
<resource-history-table></resource-history-table>
</a-tab-pane>
<a-tab-pane key="4" tab="资源类型变更">
<a-tab-pane key="4" :tab="$t('acl.resourceTypeChange')">
<resource-type-history-table></resource-type-history-table>
</a-tab-pane>
<a-tab-pane key="5" tab="触发器变更">
<a-tab-pane key="5" :tab="$t('acl.triggerChange')">
<trigger-history-table></trigger-history-table>
</a-tab-pane>
</a-tabs>

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

@ -22,22 +22,22 @@
:height="`${windowHeight - windowHeightMinus}px`"
:scroll-y="{ enabled: false }"
>
<vxe-column field="created_at" width="144px" title="操作时间">
<vxe-column field="created_at" width="144px" :title="$t('acl.operateTime')">
<template #default="{ row }">
<span>{{ row.deleted_at || row.updated_at || row.created_at }}</span>
</template>
</vxe-column>
<vxe-column field="operate_uid" width="130px" title="操作员"></vxe-column>
<vxe-column field="operate_type" width="80px" title="操作">
<vxe-column field="operate_uid" width="130px" :title="$t('acl.operator')"></vxe-column>
<vxe-column field="operate_type" width="100px" :title="$t('operation')">
<template #default="{ row }">
<a-tag :color="row.operate_type === 'grant' ? 'green' : 'red'">{{
operateTypeMap.get(row.operate_type)
}}</a-tag>
</template>
</vxe-column>
<vxe-column field="rid" title="用户"></vxe-column>
<vxe-column field="resource_type_id" title="资源类型"></vxe-column>
<vxe-column field="resources" title="资源">
<vxe-column field="rid" :title="$t('user')"></vxe-column>
<vxe-column field="resource_type_id" :title="$t('acl.resourceType')"></vxe-column>
<vxe-column field="resources" :title="$t('acl.resource')">
<template #default="{ row }">
<template v-if="row.resource_ids.length > 0">
<a-tooltip placement="top">
@ -56,14 +56,14 @@
</template>
</template>
</vxe-column>
<vxe-column title="权限">
<vxe-column :title="$t('acl.permission')">
<template #default="{ row }">
<a-tag v-for="(perm, index) in row.permission_ids" :key="'perms_' + perm + index">
{{ perm }}
</a-tag>
</template>
</vxe-column>
<vxe-column field="source" width="100px" title="来源"></vxe-column>
<vxe-column field="source" width="100px" :title="$t('acl.source')"></vxe-column>
</vxe-table>
<pager
:current-page.sync="queryParams.page"
@ -108,10 +108,6 @@ export default {
allRolesMap: new Map(),
allUsersMap: new Map(),
allResourceTypesMap: new Map(),
operateTypeMap: new Map([
['grant', '授权'],
['revoke', '撤销'],
]),
queryParams: {
page: 1,
page_size: 50,
@ -120,57 +116,63 @@ export default {
},
permissionTableAttrList: [
{
alias: '日期',
alias: this.$t('acl.date'),
is_choice: false,
name: 'datetime',
value_type: '3',
},
{
alias: '应用',
alias: this.$t('acl.app'),
is_choice: true,
name: 'app_id',
value_type: '2',
choice_value: [],
},
{
alias: '操作员',
alias: this.$t('acl.operator'),
is_choice: true,
name: 'operate_uid',
value_type: '2',
choice_value: [],
},
{
alias: '用户',
alias: this.$t('user'),
is_choice: true,
name: 'rid',
value_type: '2',
choice_value: [],
},
{
alias: '资源类型',
alias: this.$t('acl.resourceType'),
is_choice: true,
name: 'resource_type_id',
value_type: '2',
choice_value: [],
},
{
alias: '资源',
alias: this.$t('acl.resource'),
is_choice: true,
name: 'resource_id',
value_type: '2',
choice_value: [],
},
{
alias: '操作',
alias: this.$t('operation'),
is_choice: true,
name: 'operate_type',
value_type: '2',
choice_value: [{ 授权: 'grant' }, { 撤销: 'revoke' }],
choice_value: [{ [this.$t('grant')]: 'grant' }, { [this.$t('acl.cancel')]: 'revoke' }],
},
],
}
},
computed: {
operateTypeMap() {
return new Map([
['grant', this.$t('grant')],
['revoke', this.$t('acl.cancel')],
])
},
windowHeight() {
return this.$store.state.windowHeight
},
@ -183,10 +185,10 @@ export default {
},
async created() {
this.$watch(
function() {
function () {
return this.permissionTableAttrList[3].choice_value
},
function() {
function () {
delete this.$refs.child.queryParams.rid
delete this.$refs.child.queryParams.resource_type_id
delete this.$refs.child.queryParams.resource_id

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

@ -4,7 +4,7 @@
ref="child"
:attrList="resourceTableAttrList"
:hasSwitch="true"
switchValue="组"
:switchValue="$t('acl.group2')"
@onSwitchChange="onSwitchChange"
@expandChange="handleExpandChange"
@search="handleSearch"
@ -24,30 +24,30 @@
:data="tableData"
:height="`${windowHeight - windowHeightMinus}px`"
>
<vxe-column field="created_at" width="144px" title="操作时间"></vxe-column>
<vxe-column field="operate_uid" width="130px" title="操作员"></vxe-column>
<vxe-column field="operate_type" width="80px" title="操作">
<vxe-column field="created_at" width="144px" :title="$t('acl.operateTime')"></vxe-column>
<vxe-column field="operate_uid" width="130px" :title="$t('acl.operator')"></vxe-column>
<vxe-column field="operate_type" width="100px" :title="$t('operation')">
<template #default="{ row }">
<a-tag :color="handleTagColor(row.operate_type)">
{{ operateTypeMap.get(row.operate_type) }}
</a-tag>
</template>
</vxe-column>
<vxe-column field="link_id" title="资源名">
<vxe-column field="link_id" :title="$t('acl.resouceName')">
<template #default="{ row }">
<span>
{{ row.current.name || row.origin.name }}
</span>
</template>
</vxe-column>
<vxe-column title="描述">
<vxe-column :title="$t('desc')">
<template #default="{ row }">
<p>
{{ row.description }}
</p>
</template>
</vxe-column>
<vxe-column field="source" width="100px" title="来源"></vxe-column>
<vxe-column field="source" width="100px" :title="$t('acl.source')"></vxe-column>
</vxe-table>
<pager
:current-page.sync="queryParams.page"
@ -87,47 +87,6 @@ export default {
allApps: [],
allUsersMap: new Map(),
allResourcesMap: new Map(),
resourceTableAttrList: [
{
alias: '日期',
is_choice: false,
name: 'datetime',
value_type: '3',
},
{
alias: '应用',
is_choice: true,
name: 'app_id',
value_type: '2',
choice_value: [],
},
{
alias: '操作员',
is_choice: true,
name: 'operate_uid',
value_type: '2',
choice_value: [],
},
{
alias: '资源名',
is_choice: true,
name: 'link_id',
value_type: '2',
choice_value: [],
},
{
alias: '操作',
is_choice: true,
name: 'operate_type',
value_type: '2',
choice_value: [{ 新建: 'create' }, { 修改: 'update' }, { 删除: 'delete' }],
},
],
operateTypeMap: new Map([
['create', '新建'],
['update', '修改'],
['delete', '删除'],
]),
colorMap: new Map([
['create', 'green'],
['update', 'orange'],
@ -144,10 +103,10 @@ export default {
},
async created() {
this.$watch(
function() {
function () {
return this.resourceTableAttrList[3].choice_value
},
function() {
function () {
delete this.$refs.child.queryParams.link_id
}
)
@ -158,6 +117,13 @@ export default {
this.$refs.xTable.$el.querySelector('.vxe-table--body-wrapper').scrollTop = 0
},
computed: {
operateTypeMap() {
return new Map([
['create', this.$t('create')],
['update', this.$t('update')],
['delete', this.$t('delete')],
])
},
windowHeight() {
return this.$store.state.windowHeight
},
@ -167,6 +133,44 @@ export default {
tableDataLength() {
return this.tableData.length
},
resourceTableAttrList() {
return [
{
alias: this.$t('acl.date'),
is_choice: false,
name: 'datetime',
value_type: '3',
},
{
alias: this.$t('acl.app'),
is_choice: true,
name: 'app_id',
value_type: '2',
choice_value: [],
},
{
alias: this.$t('acl.operator'),
is_choice: true,
name: 'operate_uid',
value_type: '2',
choice_value: [],
},
{
alias: this.$t('acl.resourceName'),
is_choice: true,
name: 'link_id',
value_type: '2',
choice_value: [],
},
{
alias: this.$t('operation'),
is_choice: true,
name: 'operate_type',
value_type: '2',
choice_value: [{ [this.$t('create')]: 'create' }, { [this.$t('update')]: 'update' }, { [this.$t('delete')]: 'delete' }],
},
]
},
},
methods: {
async getTable(queryParams) {
@ -347,7 +351,7 @@ export default {
switch (operate_type) {
// create
case 'create': {
item.description = `新建资源：${item.current.name}`
item.description = `${this.$t('acl.newResource')}${item.current.name}`
break
}
case 'update': {
@ -357,10 +361,10 @@ export default {
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} 】 `
const str = ` 【 ${key} : -> ${newVal} 】 `
item.description += str
} else {
const str = ` 【 ${key} : 由 ${oldVal} 改为 ${newVal} 】 `
const str = ` 【 ${key} : ${oldVal} -> ${newVal} 】 `
item.description += str
}
}
@ -369,18 +373,18 @@ export default {
const currentResource_ids = item.currentResource_ids
if (!_.isEqual(originResource_ids, currentResource_ids)) {
if (originResource_ids.length === 0) {
const str = ` 【 resource_ids : 新增 ${currentResource_ids} 】 `
const str = ` 【 resource_ids : ${this.$t('new')} ${currentResource_ids} 】 `
item.description += str
} else {
const str = ` 【 resource_ids : 由 ${originResource_ids} 改为 ${currentResource_ids} 】 `
const str = ` 【 resource_ids : ${originResource_ids} -> ${currentResource_ids} 】 `
item.description += str
}
}
if (!item.description) item.description = '没有修改'
if (!item.description) item.description = this.$t('acl.noChange')
break
}
case 'delete': {
item.description = `删除资源：${item.origin.name}`
item.description = `${this.$t('acl.deleteResource')}${item.origin.name}`
break
}
}

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

@ -18,30 +18,30 @@
:loading="loading"
:height="`${windowHeight - windowHeightMinus}px`"
>
<vxe-column field="created_at" width="144px" title="操作时间"></vxe-column>
<vxe-column field="operate_uid" width="130px" title="操作员"></vxe-column>
<vxe-column field="operate_type" width="80px" title="操作">
<vxe-column field="created_at" width="144px" :title="$t('acl.operateTime')"></vxe-column>
<vxe-column field="operate_uid" width="130px" :title="$t('acl.operator')"></vxe-column>
<vxe-column field="operate_type" width="100px" :title="$t('operation')">
<template #default="{ row }">
<a-tag :color="handleTagColor(row.operate_type)">
{{ operateTypeMap.get(row.operate_type) }}
</a-tag>
</template>
</vxe-column>
<vxe-column field="link_id" width="159px" title="资源类型名">
<vxe-column field="link_id" width="159px" :title="$t('acl.resourceTypeName')">
<template #default="{ row }">
<span>
{{ row.current.name || row.origin.name }}
</span>
</template>
</vxe-column>
<vxe-column title="描述">
<vxe-column :title="$t('desc')">
<template #default="{ row }">
<p>
{{ row.changeDescription }}
</p>
</template>
</vxe-column>
<vxe-column field="source" width="100px" title="来源"></vxe-column>
<vxe-column field="source" width="100px" :title="$t('acl.source')"></vxe-column>
</vxe-table>
<pager
:current-page.sync="queryParams.page"
@ -78,47 +78,6 @@ export default {
allApps: [],
allUsersMap: new Map(),
allResourcesMap: new Map(),
resourceTableAttrList: [
{
alias: '日期',
is_choice: false,
name: 'datetime',
value_type: '3',
},
{
alias: '应用',
is_choice: true,
name: 'app_id',
value_type: '2',
choice_value: [],
},
{
alias: '操作员',
is_choice: true,
name: 'operate_uid',
value_type: '2',
choice_value: [],
},
{
alias: '资源类型',
is_choice: true,
name: 'link_id',
value_type: '2',
choice_value: [],
},
{
alias: '操作',
is_choice: true,
name: 'operate_type',
value_type: '2',
choice_value: [{ 新建: 'create' }, { 修改: 'update' }, { 删除: 'delete' }],
},
],
operateTypeMap: new Map([
['create', '新建'],
['update', '修改'],
['delete', '删除'],
]),
colorMap: new Map([
['create', 'green'],
['update', 'orange'],
@ -135,10 +94,10 @@ export default {
},
async created() {
this.$watch(
function() {
function () {
return this.resourceTableAttrList[3].choice_value
},
function() {
function () {
delete this.$refs.child.queryParams.link_id
}
)
@ -149,6 +108,13 @@ export default {
this.$refs.xTable.$el.querySelector('.vxe-table--body-wrapper').scrollTop = 0
},
computed: {
operateTypeMap() {
return new Map([
['create', this.$t('create')],
['update', this.$t('update')],
['delete', this.$t('delete')],
])
},
windowHeight() {
return this.$store.state.windowHeight
},
@ -158,6 +124,44 @@ export default {
tableDataLength() {
return this.tableData.length
},
resourceTableAttrList() {
return [
{
alias: this.$t('acl.date'),
is_choice: false,
name: 'datetime',
value_type: '3',
},
{
alias: this.$t('acl.app'),
is_choice: true,
name: 'app_id',
value_type: '2',
choice_value: [],
},
{
alias: this.$t('acl.operator'),
is_choice: true,
name: 'operate_uid',
value_type: '2',
choice_value: [],
},
{
alias: this.$t('acl.resourceType'),
is_choice: true,
name: 'link_id',
value_type: '2',
choice_value: [],
},
{
alias: this.$t('operation'),
is_choice: true,
name: 'operate_type',
value_type: '2',
choice_value: [{ [this.$t('create')]: 'create' }, { [this.$t('update')]: 'update' }, { [this.$t('delete')]: 'delete' }],
},
]
},
},
methods: {
async getTable(queryParams) {
@ -283,10 +287,12 @@ export default {
switch (operate_type) {
// create
case 'create': {
const description = item.current?.description === undefined ? '无' : item.current?.description
const description = item.current?.description === undefined ? this.$t('acl.none') : item.current?.description
const permission =
item.extra.permission_ids?.current === undefined ? '无' : item.extra.permission_ids?.current
item.changeDescription = `新增资源类型：${item.current.name}\n描述：${description}\n权限：${permission}`
item.extra.permission_ids?.current === undefined ? this.$t('acl.none') : item.extra.permission_ids?.current
item.changeDescription = `${this.$t('acl.addReourceType')}：${item.current.name}\n${this.$t(
'desc'
)}：${description}\n${this.$t('acl.permission')}：${permission}`
break
}
case 'update': {
@ -296,27 +302,29 @@ export default {
const oldVal = item.origin[key]
if (!_.isEqual(newVal, oldVal) && key !== 'updated_at' && key !== 'deleted_at' && key !== 'created_at') {
if (oldVal === null || oldVal === '') {
const str = ` 【 ${key} : 改为 ${newVal} 】 \n`
const str = ` 【 ${key} : -> ${newVal} 】 \n`
item.changeDescription += str
} else {
const str = ` 【 ${key} : 由 ${oldVal} 改为 ${newVal} 】 \n`
const str = ` 【 ${key} : ${oldVal} -> ${newVal} 】 \n`
item.changeDescription += str
}
}
}
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
item.extra.permission_ids?.current === undefined ? this.$t('acl.none') : item.extra.permission_ids?.current
const originPerms = item.extra.permission_ids?.origin === undefined ? this.$t('acl.none') : item.extra.permission_ids?.origin
if (!_.isEqual(currentPerms, originPerms)) {
item.changeDescription += ` 【 permission_ids : 由 ${originPerms} 改为 ${currentPerms} 】 `
item.changeDescription += ` 【 permission_ids : ${originPerms} -> ${currentPerms} 】 `
}
if (!item.changeDescription) item.changeDescription = '没有修改'
if (!item.changeDescription) item.changeDescription = this.$t('acl.noChange')
break
}
case 'delete': {
const description = item.origin?.description === undefined ? '无' : item.origin?.description
const permission = item.extra.permission_ids?.origin === undefined ? '无' : item.extra.permission_ids?.origin
item.changeDescription = `删除资源类型：${item.origin.name}\n描述：${description}\n权限：${permission}`
const description = item.origin?.description === undefined ? this.$t('acl.none') : item.origin?.description
const permission = item.extra.permission_ids?.origin === undefined ? this.$t('acl.none') : item.extra.permission_ids?.origin
item.changeDescription = `${this.$t('acl.deleteResourceType')}: ${item.origin.name}\n${this.$t(
'desc'
)}：${description}\n${this.$t('acl.permission')}: ${permission}`
break
}
}

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

@ -4,7 +4,7 @@
ref="child"
:attrList="roleTableAttrList"
:hasSwitch="true"
switchValue="角色关系"
:switchValue="$t('acl.roleRelation')"
@onSwitchChange="onSwitchChange"
@search="handleSearch"
@searchFormReset="searchFormReset"
@ -19,16 +19,16 @@
:loading="loading"
:height="`${windowHeight - 310}px`"
>
<vxe-column field="created_at" width="144px" title="操作时间"></vxe-column>
<vxe-column field="operate_uid" width="130px" title="操作员"></vxe-column>
<vxe-column field="operate_type" width="112px" title="操作">
<vxe-column field="created_at" width="144px" :title="$t('acl.operateTime')"></vxe-column>
<vxe-column field="operate_uid" width="130px" :title="$t('acl.operator')"></vxe-column>
<vxe-column field="operate_type" width="112px" :title="$t('operation')">
<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 ? '角色' : '角色'">
<vxe-column :title="checked ? $t('acl.role2') : $t('acl.role2')">
<template #default="{ row }">
<template v-if="!checked">
<a-tag color="blue">{{ row.current.name || row.origin.name }}</a-tag>
@ -40,7 +40,7 @@
</template>
</template>
</vxe-column>
<vxe-column :title="checked ? '继承自' : '管理员'" :width="checked ? '350px' : '80px'">
<vxe-column :title="checked ? $t('acl.inheritedFrom') : $t('acl.admin')" :width="checked ? '350px' : '80px'">
<template #default="{ row }">
<template v-if="!checked">
<a-icon type="check" v-if="row.current.is_app_admin" />
@ -52,14 +52,14 @@
</template>
</template>
</vxe-column>
<vxe-column title="描述" v-if="!checked">
<vxe-column :title="$t('desc')" v-if="!checked">
<template #default="{ row }">
<p>
{{ row.description }}
</p>
</template>
</vxe-column>
<vxe-column field="source" width="100px" title="来源"></vxe-column>
<vxe-column field="source" width="100px" :title="$t('acl.source')"></vxe-column>
</vxe-table>
<pager
:current-page.sync="queryParams.page"
@ -94,13 +94,6 @@ export default {
allRoles: [],
allRolesMap: new Map(),
allUsersMap: new Map(),
operateTypeMap: new Map([
['create', '新建'],
['delete', '删除'],
['update', '修改'],
['role_relation_add', '添加角色关系'],
['role_relation_delete', '删除角色关系'],
]),
colorMap: new Map([
['create', 'green'],
['delete', 'red'],
@ -115,49 +108,60 @@ export default {
start: '',
end: '',
},
roleTableAttrList: [
}
},
computed: {
operateTypeMap() {
return new Map([
['create', this.$t('create')],
['update', this.$t('update')],
['delete', this.$t('delete')],
['role_relation_add', this.$t('acl.roleRelationAdd')],
['role_relation_delete', this.$t('acl.roleRelationDelete')],
])
},
windowHeight() {
return this.$store.state.windowHeight
},
tableDataLength() {
return this.tableData.length
},
roleTableAttrList() {
return [
{
alias: '日期',
alias: this.$t('acl.date'),
is_choice: false,
name: 'datetime',
value_type: '3',
},
{
alias: '应用',
alias: this.$t('acl.app'),
is_choice: true,
name: 'app_id',
value_type: '2',
choice_value: [],
},
{
alias: '操作员',
alias: this.$t('acl.operator'),
is_choice: true,
name: 'operate_uid',
value_type: '2',
choice_value: [],
},
{
alias: '操作',
alias: this.$t('operation'),
is_choice: true,
name: 'operate_type',
value_type: '2',
choice_value: [
{ 新建: 'create' },
{ 修改: 'update' },
{ 删除: 'delete' },
{ 添加角色关系: 'role_relation_add' },
{ 删除角色关系: 'role_relation_delete' },
{ [this.$t('create')]: 'create' },
{ [this.$t('update')]: 'update' },
{ [this.$t('delete')]: 'delete' },
{ [this.$t('acl.roleRelationAdd')]: 'role_relation_add' },
{ [this.$t('acl.roleRelationDelete')]: 'role_relation_delete' },
],
},
],
}
},
computed: {
windowHeight() {
return this.$store.state.windowHeight
},
tableDataLength() {
return this.tableData.length
]
},
},
async created() {
@ -277,7 +281,7 @@ export default {
switch (operate_type) {
// create
case 'create': {
item.description = `新建角色：${item.current.name}`
item.description = `${this.$t('acl.addRole')}${item.current.name}`
break
}
case 'update': {
@ -287,15 +291,15 @@ export default {
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} 】 `
const str = ` 【 ${key} : -> ${newVal} 】 `
item.description += str
} else {
const str = ` 【 ${key} : 由 ${oldVal} 改为 ${newVal} 】 `
item.description += str
const str = ` 【 ${key} : ${oldVal} -> ${newVal} 】 `
item.description += ` 【 ${key} : ${oldVal} -> ${newVal} 】 `
}
}
}
if (!item.description) item.description = '没有修改'
if (!item.description) item.description = this.$t('acl.noChange')
break
}
case 'delete': {
@ -325,7 +329,7 @@ export default {
resourceMap.forEach((value, key) => {
permsArr.push(`${id2resources[key].name}：${value}`)
})
item.description = `继承者：${child_ids}\n继承自：${parent_ids}\n涉及资源及权限：\n${permsArr.join(`\n`)}`
item.description = `${this.$t('acl.heir')}：${child_ids}\n${this.$t('acl.inheritedFrom')}：${parent_ids}\n${this.$t('acl.involvingRP')}：\n${permsArr.join(`\n`)}`
break
}
}

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

@ -18,23 +18,23 @@
:loading="loading"
:height="`${windowHeight - windowHeightMinus}px`"
>
<vxe-column field="created_at" width="144px" title="操作时间"></vxe-column>
<vxe-column field="operate_uid" width="130px" title="操作员"></vxe-column>
<vxe-column field="operate_type" width="80px" title="操作">
<vxe-column field="created_at" width="144px" :title="$t('acl.operateTime')"></vxe-column>
<vxe-column field="operate_uid" width="130px" :title="$t('acl.operator')"></vxe-column>
<vxe-column field="operate_type" width="100px" :title="$t('operation')">
<template #default="{ row }">
<a-tag :color="handleTagColor(row.operate_type)">
{{ operateTypeMap.get(row.operate_type) }}
</a-tag>
</template>
</vxe-column>
<vxe-column field="trigger_id" width="250px" title="触发器">
<vxe-column field="trigger_id" width="250px" :title="$t('acl.trigger')">
<template #default="{ row }">
<span>
{{ row.current.name || row.origin.name }}
</span>
</template>
</vxe-column>
<vxe-column title="描述">
<vxe-column :title="$t('desc')">
<template #default="{ row }">
<p>
{{ row.changeDescription }}
@ -64,6 +64,7 @@ import { getTriggers } from '@/modules/acl/api/trigger'
import { searchUser } from '@/modules/acl/api/user'
import { searchApp } from '@/modules/acl/api/app'
export default {
name: 'TriggerHistoryTable',
components: { SearchForm, Pager },
data() {
return {
@ -82,13 +83,6 @@ export default {
allResourceTypesMap: new Map(),
allResourcesMap: new Map(),
allTriggersMap: new Map(),
operateTypeMap: new Map([
['create', '新建'],
['update', '修改'],
['delete', '删除'],
['trigger_apply', '应用'],
['trigger_cancel', '取消'],
]),
colorMap: new Map([
['create', 'green'],
['delete', 'red'],
@ -96,48 +90,6 @@ export default {
['trigger_apply', 'green'],
['trigger_cancel', 'red'],
]),
triggerTableAttrList: [
{
alias: '日期',
is_choice: false,
name: 'datetime',
value_type: '3',
},
{
alias: '应用',
is_choice: true,
name: 'app_id',
value_type: '2',
choice_value: [],
},
{
alias: '操作员',
is_choice: true,
name: 'operate_uid',
value_type: '2',
choice_value: [],
},
{
alias: '触发器',
is_choice: true,
name: 'trigger_id',
value_type: '2',
choice_value: [],
},
{
alias: '操作',
is_choice: true,
name: 'operate_type',
value_type: '2',
choice_value: [
{ 新建: 'create' },
{ 修改: 'update' },
{ 删除: 'delete' },
{ 应用: 'trigger_apply' },
{ 取消: 'trigger_cancel' },
],
},
],
queryParams: {
page: 1,
page_size: 50,
@ -162,6 +114,15 @@ export default {
this.$refs.xTable.$el.querySelector('.vxe-table--body-wrapper').scrollTop = 0
},
computed: {
operateTypeMap() {
return new Map([
['create', this.$t('create')],
['update', this.$t('update')],
['delete', this.$t('delete')],
['trigger_apply', this.$t('acl.apply')],
['trigger_cancel', this.$t('cancel')],
])
},
windowHeight() {
return this.$store.state.windowHeight
},
@ -171,6 +132,50 @@ export default {
tableDataLength() {
return this.tableData.length
},
triggerTableAttrList() {
return [
{
alias: this.$t('acl.date'),
is_choice: false,
name: 'datetime',
value_type: '3',
},
{
alias: this.$t('acl.app'),
is_choice: true,
name: 'app_id',
value_type: '2',
choice_value: [],
},
{
alias: this.$t('acl.operator'),
is_choice: true,
name: 'operate_uid',
value_type: '2',
choice_value: [],
},
{
alias: this.$t('acl.trigger'),
is_choice: true,
name: 'trigger_id',
value_type: '2',
choice_value: [],
},
{
alias: this.$t('operation'),
is_choice: true,
name: 'operate_type',
value_type: '2',
choice_value: [
{ [this.$t('create')]: 'create' },
{ [this.$t('update')]: 'update' },
{ [this.$t('delete')]: 'delete' },
{ [this.$t('acl.apply')]: 'trigger_apply' },
{ [this.$t('cancel')]: 'trigger_cancel' },
],
},
]
},
},
methods: {
async getTable(queryParams) {
@ -270,9 +275,11 @@ export default {
const newArr = str.slice(1, str.length - 1).split(', ')
const newStr = newArr.map((i) => id2roles[i].name).join('，')
const { name, resource_type_id, wildcard, permissions, enabled } = item.current
item.changeDescription = `新增触发器：${name}\n资源类型：${
item.changeDescription = `${this.$t('acl.addTrigger')}:${name}\n${this.$t('acl.resourceType')}: ${
id2resource_types[resource_type_id].name
}，资源名：${wildcard || ''}，角色：[${newStr}]\n权限：${permissions}\n状态：${enabled}`
}，this.$t('acl.resourceName')：${wildcard || ''}，${this.$t(
'acl.role2'
)}:[${newStr}]\nthis.$t('acl.permssion')}: ${permissions}\n${this.$t('status')}: ${enabled}`
break
}
case 'update': {
@ -282,15 +289,15 @@ export default {
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} 】 `
const str = ` 【 ${key} : -> ${newVal} 】 `
item.changeDescription += str
} else {
const str = ` 【 ${key} : 由 ${oldVal} 改为 ${newVal} 】 `
item.changeDescription += str
const str = ` 【 ${key} : ${oldVal} -> ${newVal} 】 `
item.changeDescription += ` 【 ${key} :${oldVal} -> ${newVal} 】 `
}
}
}
if (!item.changeDescription) item.changeDescription = '没有修改'
if (!item.changeDescription) item.changeDescription = this.$t('acl.noChange')
break
}
case 'delete': {
@ -298,9 +305,11 @@ export default {
const newArr = str.slice(1, str.length - 1).split(', ')
const newStr = newArr.map((i) => id2roles[i].name).join('，')
const { name, resource_type_id, wildcard, permissions, enabled } = item.origin
item.changeDescription = `删除触发器：${name}\n资源类型：${
item.changeDescription = `${this.$t('acl.deleteTrigger')}: ${name}\n${this.$t('acl.resourceType')}: ${
id2resource_types[resource_type_id].name
}，资源名：${wildcard || ''}，角色：[${newStr}]\n权限：${permissions}\n状态：${enabled}`
}，${this.$t('acl.resourceName')}: ${wildcard || ''}，${this.$t(
'acl.role2'
)}:[${newStr}]\nthis.$t('acl.permssion')}: ${permissions}\n${this.$t('status')}: ${enabled}`
break
}
case 'trigger_apply': {
@ -308,9 +317,11 @@ export default {
const newArr = str.slice(1, str.length - 1).split(', ')
const newStr = newArr.map((i) => id2roles[i].name).join('，')
const { name, resource_type_id, wildcard, permissions, enabled } = item.current
item.changeDescription = `应用触发器：${name}\n资源类型：${
item.changeDescription = `${this.$t('acl.applyTrigger')}: ${name}\n${this.$t('acl.resourceType')}: ${
id2resource_types[resource_type_id].name
}，资源名：${wildcard || ''}，角色：[${newStr}]\n权限：${permissions}\n状态：${enabled}`
}，${this.$t('acl.resourceName')}: ${wildcard || ''}，${this.$t(
'acl.role2'
)}:[${newStr}]\nthis.$t('acl.permssion')}: ${permissions}\n${this.$t('status')}: ${enabled}`
break
}
case 'trigger_cancel': {
@ -318,9 +329,11 @@ export default {
const newArr = str.slice(1, str.length - 1).split(', ')
const newStr = newArr.map((i) => id2roles[i].name).join('，')
const { name, resource_type_id, wildcard, permissions, enabled } = item.current
item.changeDescription = `取消触发器：${name}\n资源类型：${
item.changeDescription = `${this.$t('acl.cancelTrigger')}: ${name}\n${this.$t('acl.resourceType')}: ${
id2resource_types[resource_type_id].name
}，资源名：${wildcard || ''}，角色：[${newStr}]\n权限：${permissions}\n状态：${enabled}`
}，${this.$t('acl.resourceName')}: ${wildcard || ''}，${this.$t(
'acl.role2'
)}:[${newStr}]\nthis.$t('acl.permssion')}: ${permissions}\n${this.$t('status')}: ${enabled}`
break
}
}

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

@ -1,11 +1,13 @@
<template>
<div class="acl-resource-types">
<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">{{
$t('acl.addReourceType')
}}</a-button>
<a-input-search
class="ops-input"
:style="{ display: 'inline', marginLeft: '10px', width: '200px' }"
placeholder="搜索 | 资源类型名"
:placeholder="`${$t('search')} | ${$t('acl.resourceType')}`"
v-model="searchName"
allowClear
@search="
@ -28,28 +30,28 @@
<!-- 1 -->
<vxe-table-column
field="name"
title="资源类型名"
:title="$t('acl.resoureType')"
:min-width="175"
fixed="left"
show-overflow
></vxe-table-column>
<!-- 2 -->
<vxe-table-column field="description" title="描述" :min-width="175"></vxe-table-column>
<vxe-table-column field="description" :title="$t('desc')" :min-width="175"></vxe-table-column>
<!-- 3 -->
<vxe-table-column field="id" title="权限" :min-width="300">
<vxe-table-column field="id" :title="$t('acl.permission')" :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="操作" :width="100" fixed="right">
<vxe-table-column field="action" :title="$t('operation')" :width="100" 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-popconfirm :title="$t('confirmDelete')" @confirm="handleDelete(row)">
<a style="color: red"><a-icon type="delete"/></a>
</a-popconfirm>
</template>
@ -87,42 +89,12 @@ export default {
loading: false,
groups: [],
id2perms: {},
btnName: '新增资源类型',
pageSizeOptions: [10, 25, 50, 100],
tablePage: {
total: 0,
currentPage: 1,
pageSize: 50,
},
tableColumns: [
{
title: '资源类型名',
field: 'name',
minWidth: '175px',
fixed: 'left',
showOverflow: 'tooltip',
},
{
title: '描述',
field: 'description',
minWidth: '175px',
},
{
title: '权限',
field: 'id',
minWidth: '300px',
slots: {
default: 'id_default',
},
},
{
title: '操作',
field: 'action',
minWidth: '175px',
slots: { default: 'action_default' },
fixed: 'right',
},
],
searchName: '',
}
},
@ -200,15 +172,10 @@ export default {
},
deleteResourceType(id) {
deleteResourceTypeById(id).then((res) => {
this.$message.success(`删除成功`)
this.$message.success(this.$t('deleteSuccess'))
this.handleOk()
})
// .catch(err => this.requestFailed(err))
},
// requestFailed(err) {
// const msg = ((err.response || {}).data || {}).message || '请求出现错误，请稍后再试'
// this.$message.error(`${msg}`)
// },
handlePageChange({ currentPage, pageSize }) {
this.tablePage.currentPage = currentPage
this.tablePage.pageSize = pageSize

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

@ -6,10 +6,10 @@
</a-tabs>
<div class="acl-resources-header">
<a-space>
<a-button @click="handleCreate" type="primary">{{ btnName }}</a-button>
<a-button @click="handleCreate" type="primary">{{ $t('acl.addResource') }}</a-button>
<a-input-search
class="ops-input"
placeholder="搜索 | 资源名"
:placeholder="`${$t('search')} | ${$t('acl.resource')}`"
v-model="searchName"
@search="
() => {
@ -20,10 +20,10 @@
></a-input-search>
<div v-if="!!selectedRows.length" class="ops-list-batch-action">
<span @click="handleBatchPerm">授权</span>
<span @click="handleBatchPerm">{{ $t('grant') }}</span>
<a-divider type="vertical" />
<span @click="handleBatchRevoke">权限回收</span>
<span>选取: {{ selectedRows.length }} 项</span>
<span @click="handleBatchRevoke">{{ $t('acl.revoke') }}</span>
<span>{{ $t('selectRows', { rows: selectedRows.length }) }}</span>
</div>
</a-space>
@ -36,7 +36,7 @@
$refs.resourceBatchPerm.open(currentType.id)
}
"
>便捷授权</a-button
>{{ $t('acl.convenient') }}</a-button
>
<a-switch
v-model="isGroup"
@ -50,7 +50,7 @@
$refs.xTable && $refs.xTable.getVxetableRef().clearCheckboxReserve()
}
"
un-checked-children="组"
:un-checked-children="$t('acl.group2')"
></a-switch>
</a-space>
</div>
@ -62,62 +62,63 @@
:data="tableData"
highlight-hover-row
:height="`${windowHeight - 250}px`"
:checkbox-config="{ reserve: true }"
:checkbox-config="{ reserve: true, highlight: true, range: true }"
@checkbox-change="changeCheckbox"
@checkbox-all="changeCheckbox"
@checkbox-range-end="onSelectRangeEnd"
ref="xTable"
row-id="id"
show-overflow
resizable
>
<!-- 1 -->
<vxe-table-column type="checkbox" fixed="left" :width="45"></vxe-table-column>
<vxe-table-column type="checkbox" fixed="left" :width="60"></vxe-table-column>
<!-- 2 -->
<vxe-table-column field="name" title="资源名" :min-widh="150" fixed="left" show-overflow>
<template #title="{ row }">
{{ row.isGroup ? '资源组名' : '资源名' }}
<vxe-table-column field="name" :title="$t('acl.resourceName')" :min-widh="150" fixed="left" show-overflow>
<template #title="{row}">
{{ row.isGroup ? $t('acl.groupName') : $t('acl.resourceName') }}
</template>
</vxe-table-column>
<!-- 3 -->
<vxe-table-column field="user" title="创建者" :min-widh="100"> </vxe-table-column>
<vxe-table-column field="user" :title="$t('acl.creator')" :min-widh="100"> </vxe-table-column>
<!-- 4 -->
<vxe-table-column field="created_at" title="创建时间" :min-widh="220" align="center"> </vxe-table-column>
<vxe-table-column field="created_at" :title="$t('created_at')" :min-widh="220" align="center"> </vxe-table-column>
<!-- 5 -->
<vxe-table-column field="updated_at" title="最后修改时间" :min-widh="220" fixed="center"> </vxe-table-column>
<vxe-table-column field="updated_at" :title="$t('updated_at')" :min-widh="220" fixed="center"> </vxe-table-column>
<!-- 6 -->
<vxe-table-column
field="action"
title="操作"
:title="$t('operation')"
:min-widh="200"
fixed="right"
align="center"
show-overflow>
<template #default="{ row }">
<template #default="{row}">
<span v-show="isGroup">
<a @click="handleDisplayMember(row)">成员</a>
<a @click="handleDisplayMember(row)">{{ $t('acl.member') }}</a>
<a-divider type="vertical" />
<a @click="handleGroupEdit(row)">编辑</a>
<a @click="handleGroupEdit(row)">{{ $t('edit') }}</a>
<a-divider type="vertical" />
</span>
<a-tooltip title="查看授权">
<a @click="handlePerm(row)"><a-icon type="eye" /></a>
<a-tooltip :title="$t('acl.viewAuth')">
<a @click="handlePerm(row)"><a-icon type="eye"/></a>
</a-tooltip>
<a-divider type="vertical" />
<a-tooltip title="授权">
<a-tooltip :title="$t('grant')">
<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 :title="$t('confirmDelete')" @confirm="handleDelete(row)" @cancel="cancel" :okText="$t('yes')" :cancelText="$t('no')">
<a style="color: red"><a-icon type="delete"/></a>
</a-popconfirm>
</template>
</vxe-table-column>
@ -135,9 +136,9 @@
</vxe-pager>
</a-spin>
</div>
<div v-else style="text-align: center; margin-top: 20%">
<a-icon style="font-size: 50px; margin-bottom: 20px; color: orange" type="info-circle" />
<h3>暂无类型信息，请先添加资源类型！</h3>
<div v-else style="text-align: center;margin-top:20%">
<a-icon style="font-size:50px; margin-bottom: 20px; color: orange" type="info-circle" />
<h3>{{ $t('acl.addTypeTips') }}</h3>
</div>
<resourceForm ref="resourceForm" @fresh="handleOk"> </resourceForm>
<resourcePermForm ref="resourcePermForm"> </resourcePermForm>
@ -187,7 +188,6 @@ export default {
pageSize: 50,
},
tableData: [],
btnName: '新增资源',
isGroup: false,
allResourceTypes: [],
currentType: { id: 0 },
@ -196,7 +196,6 @@ export default {
selectedRows: [],
}
},
beforeCreate() {
this.form = this.$form.createForm(this)
},
@ -281,22 +280,16 @@ export default {
deleteResource(id) {
if (!this.isGroup) {
deleteResourceById(id, { app_id: this.$route.name.split('_')[0] }).then((res) => {
this.$message.success(`删除成功`)
this.$message.success(this.$t('deleteSuccess'))
this.handleOk()
})
// .catch(err => this.requestFailed(err))
} else {
deleteResourceGroup(id).then((res) => {
this.$message.success(`删除成功`)
this.$message.success(this.$t('deleteSuccess'))
this.handleOk()
})
// .catch(err => this.requestFailed(err))
}
},
// requestFailed(err) {
// const msg = ((err.response || {}).data || {}).message || '请求出现错误，请稍后再试'
// this.$message.error(`${msg}`)
// },
cancel() {},
handlePageChange({ currentPage, pageSize }) {
this.tablePage.currentPage = currentPage
@ -309,6 +302,10 @@ export default {
.getVxetableRef()
.getCheckboxRecords()
.concat(this.$refs.xTable.getVxetableRef().getCheckboxReserveRecords())
console.log(this.selectedRows)
},
onSelectRangeEnd({ records }) {
this.selectedRows = records
},
handleBatchPerm() {
this.$refs['resourcePermManageForm'].editPerm(this.selectedRows, this.isGroup)
@ -322,7 +319,7 @@ export default {
},
},
watch: {
'$route.name': function (newName, oldName) {
'$route.name': function(newName, oldName) {
this.isGroup = false
this.tablePage = {
total: 0,

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

@ -1,12 +1,12 @@
<template>
<div class="acl-roles">
<div class="acl-roles-header">
<a-button @click="handleCreate" type="primary">{{ btnName }}</a-button>
<a-button @click="handleCreate" type="primary">{{ $t('acl.addVisualRole') }}</a-button>
<a-input-search
class="ops-input"
allowClear
:style="{ display: 'inline', marginLeft: '10px', width: '200px' }"
placeholder="搜索 | 角色名"
:placeholder="`${$t('search')} | ${$t('acl.role')}`"
v-model="searchName"
@search="
() => {
@ -15,7 +15,7 @@
}
"
></a-input-search>
<a-checkbox :checked="is_all" @click="handleClickBoxChange">所有角色</a-checkbox>
<a-checkbox :checked="is_all" @click="handleClickBoxChange">{{ $t('acl.allRole') }}</a-checkbox>
</div>
<a-spin :spinning="loading">
<ops-table
@ -31,22 +31,23 @@
>
<vxe-table-column
field="name"
title="角色名"
:title="$t('acl.role')"
:min-width="150"
align="left"
fixed="left"
sortable
show-overflow>
show-overflow
>
</vxe-table-column>
<!-- 2 -->
<vxe-table-column field="is_app_admin" title="管理员" :min-width="100" align="center">
<vxe-table-column field="is_app_admin" :title="$t('admin')" :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">
<vxe-table-column field="id" :title="$t('acl.inheritedFrom')" :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>
@ -54,12 +55,12 @@
<vxe-table-column
field="uid"
title="虚拟角色"
:width="100"
:title="$t('acl.visualRole')"
:width="120"
align="center"
:filters="[
{ label: '是', value: 1 },
{ label: '否', value: 0 },
{ label: $t('yes'), value: 1 },
{ label: $t('no'), value: 0 },
]"
:filterMultiple="false"
:filter-method="
@ -69,14 +70,14 @@
"
>
<template #default="{row}">
{{ row.uid ? '否' : '是' }}
{{ row.uid ? $t('no') : $t('yes') }}
</template>
</vxe-table-column>
<vxe-table-column field="action" title="操作" :width="120" fixed="right">
<vxe-table-column field="action" :title="$t('operation')" :width="120" fixed="right">
<template #default="{row}">
<a-space>
<a-tooltip title="资源列表">
<a-tooltip :title="$t('acl.resourceList')">
<a
v-if="$route.name !== 'acl_roles'"
@click="handleDisplayUserResource(row)"
@ -85,12 +86,18 @@
/></a>
</a-tooltip>
<a-tooltip
title="用户列表"
:title="$t('acl.userList')"
v-if="!row.uid"
><a @click="handleDisplayUserUnderRole(row)"><a-icon type="team"/></a
></a-tooltip>
<a @click="handleEdit(row)"><a-icon type="edit"/></a>
<a-popconfirm title="确认删除?" @confirm="handleDelete(row)" @cancel="cancel" okText="是" cancelText="否">
<a-popconfirm
:title="$t('confirmDelete')"
@confirm="handleDelete(row)"
@cancel="cancel"
:okText="$t('yes')"
:cancelText="$t('no')"
>
<a style="color: red"><a-icon type="delete"/></a>
</a-popconfirm>
</a-space>
@ -138,52 +145,6 @@ export default {
currentPage: 1,
pageSize: 50,
},
tableColumns: [
{
title: '角色名',
field: 'name',
sortable: true,
minWidth: '150px',
fixed: 'left',
showOverflow: 'tooltip',
},
{
title: '管理员',
field: 'is_app_admin',
minWidth: '100px',
align: 'center',
slots: { default: 'is_app_admin_default' },
},
{
title: '继承自',
field: 'id',
minWidth: '150px',
slots: { default: 'inherit_default' },
},
{
title: '虚拟角色',
field: 'uid',
minWidth: '100px',
align: 'center',
filters: [
{ label: '是', value: 1 },
{ label: '否', value: 0 },
],
filterMultiple: false,
filterMethod: ({ value, row }) => {
return value === !row.uid
},
slots: { default: 'isVisualRole_default' },
},
{
title: '操作',
minWidth: '280px',
field: 'action',
fixed: 'right',
slots: { default: 'action_default' },
},
],
btnName: '新增虚拟角色',
is_all: this.$route.name === 'acl_roles',
tableData: [],
allRoles: [],
@ -286,15 +247,10 @@ export default {
deleteRole(id) {
deleteRoleById(id, { app_id: this.$route.name.split('_')[0] }).then((res) => {
this.$message.success(`删除成功`)
this.$message.success(this.$t('deleteSuccess'))
this.handleOk()
})
// .catch(err => this.requestFailed(err))
},
// requestFailed(err) {
// const msg = ((err.response || {}).data || {}).message || '请求出现错误，请稍后再试'
// this.$message.error(`${msg}`)
// },
cancel(e) {
return false
},

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

@ -15,9 +15,9 @@
</a-form-model-item>
<a-form-model-item label=" " :colon="false">
<a-space>
<a-button type="primary" @click="changeVisible">{{ !visible ? '查看' : '隐藏' }}</a-button>
<a-button type="danger" ghost @click="handleSumbit">重置</a-button>
<!-- <a-button @click="handleCancel">取消</a-button> -->
<a-button type="primary" @click="changeVisible">{{ !visible ? $t('view') : $t('hide') }}</a-button>
<a-button type="danger" ghost @click="handleSumbit">{{ $t('reset') }}</a-button>
<!-- <a-button @click="handleCancel">{{ $t('cancel') }}</a-button> -->
</a-space>
</a-form-model-item>
</a-form-model>
@ -62,13 +62,13 @@ export default {
handleSumbit() {
const that = this
this.$confirm({
title: '重置',
content: '确定重置用户密钥？',
title: that.$t('reset'),
content: that.$t('acl.confirmResetSecret'),
onOk() {
that.$refs.secretKeyForm.validate((valid) => {
if (valid) {
updateSecret().then((res) => {
that.$message.success('重置成功')
that.$message.success(that.$t('operateSuccess'))
const { key, secret } = res
that.form = { key, secret }
})

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

@ -1,11 +1,11 @@
<template>
<div class="acl-trigger">
<div class="acl-trigger-header">
<a-button type="primary" @click="handleCreateTrigger">新增触发器</a-button>
<a-button type="primary" @click="handleCreateTrigger">{{ $t('acl.addTrigger') }}</a-button>
<a-input-search
class="ops-input"
:style="{ display: 'inline', marginLeft: '10px', width: '200px' }"
placeholder="搜索 | 名称"
:placeholder="`${$t('search')} | ${$t('name')}`"
v-model="searchName"
allowClear
@search="filter"
@ -46,18 +46,18 @@
<a-tag v-for="(p, index) in row.permissions" :key="index">{{ p }}</a-tag>
</template>
<template #enabled_default="{row}">
<a-tag v-if="row.enabled" color="#2db7f5">启用</a-tag>
<a-tag v-else color="grey">禁用</a-tag>
<a-tag v-if="row.enabled" color="#2db7f5">{{ $t('acl.enable') }}</a-tag>
<a-tag v-else color="grey">{{ $t('acl.disable') }}</a-tag>
</template>
<template #action_default="{row}">
<a-space>
<a-tooltip title="应用">
<a-tooltip :title="$t('acl.apply')">
<a @click="handleApplyTrigger(row)" :style="{ color: '#0f9d58' }"><a-icon type="appstore"/></a>
</a-tooltip>
<a-tooltip title="取消">
<a-tooltip :title="$t('cancel')">
<a @click="handleCancelTrigger(row)" :style="{ color: 'orange' }"><a-icon type="stop"/></a>
</a-tooltip>
<a-tooltip title="查看正则匹配结果">
<a-tooltip :title="$t('acl.viewMatchResult')">
<a @click="handlePattern(row)" :style="{ color: 'purple' }"><a-icon type="eye"/></a>
</a-tooltip>
<a @click="handleEditTrigger(row)"><a-icon type="edit"/></a>
@ -67,7 +67,7 @@
<template slot="empty">
<div>
<img :style="{ width: '100px' }" :src="require('@/assets/data_empty.png')" />
<div>暂无数据</div>
<div>{{ $t('noData') }}</div>
</div>
</template>
</vxe-grid>
@ -102,9 +102,19 @@ export default {
triggers: [],
id2parents: [],
id2perms: {},
tableColumns: [
}
},
computed: {
...mapState({
windowHeight: (state) => state.windowHeight,
}),
app_id() {
return this.$route.name.split('_')[0]
},
tableColumns() {
return [
{
title: '名称',
title: this.$t('name'),
field: 'name',
sortable: true,
minWidth: '150px',
@ -112,7 +122,7 @@ export default {
showOverflow: 'tooltip',
},
{
title: '资源名',
title: this.$t('acl.resource'),
field: 'wildcard',
minWidth: '250px',
showOverflow: 'tooltip',
@ -121,15 +131,15 @@ export default {
},
},
{
title: '资源类型',
title: this.$t('acl.resourceType'),
field: 'resource_type_id',
minWidth: '100px',
minWidth: '120px',
slots: {
default: 'resourceTypeRender_default',
},
},
{
title: '创建人',
title: this.$t('acl.creator'),
field: 'users',
minWidth: '150px',
showOverflow: 'tooltip',
@ -138,7 +148,7 @@ export default {
},
},
{
title: '角色',
title: this.$t('acl.allRole'),
field: 'roles',
minWidth: '150px',
slots: {
@ -172,7 +182,7 @@ export default {
},
},
{
title: '权限',
title: this.$t('acl.permission'),
field: 'permissions',
minWidth: '250px',
slots: {
@ -180,7 +190,7 @@ export default {
},
},
{
title: '状态',
title: this.$t('status'),
field: 'enabled',
minWidth: '100px',
slots: {
@ -188,7 +198,7 @@ export default {
},
},
{
title: '操作',
title: this.$t('operation'),
field: 'action',
width: '120px',
fixed: 'right',
@ -196,8 +206,8 @@ export default {
default: 'action_default',
},
},
],
}
]
},
},
created() {
this.loadRoles()
@ -206,15 +216,6 @@ export default {
beforeMount() {
this.loadTriggers()
},
computed: {
...mapState({
windowHeight: (state) => state.windowHeight,
}),
app_id() {
return this.$route.name.split('_')[0]
},
},
methods: {
loadTriggers() {
this.searchName = ''
@ -244,11 +245,11 @@ export default {
handleDeleteTrigger(record) {
const that = this
this.$confirm({
title: '删除',
content: '确认删除该触发器吗？',
title: that.$t('warning'),
content: that.$t('acl.confirmDeleteTrigger'),
onOk() {
deleteTrigger(record.id).then((res) => {
that.$message.success('删除成功')
that.$message.success(that.$t('deleteSuccess'))
that.loadTriggers()
})
// .catch(err => that.$httpError(err))
@ -258,11 +259,11 @@ export default {
handleApplyTrigger(record) {
const that = this
this.$confirm({
title: '规则应用',
content: '是否确定应用该触发器？',
title: that.$t('acl.ruleApply'),
content: that.$t('acl.triggerTip1'),
onOk() {
applyTrigger(record.id).then((res) => {
that.$message.success('提交成功!')
that.$message.success(that.$t('operateSuccess'))
})
// .catch(err => that.$httpError(err))
},
@ -271,11 +272,11 @@ export default {
handleCancelTrigger(record) {
const that = this
this.$confirm({
title: '规则应用',
content: '是否取消应用该触发器?',
title: that.$t('acl.ruleApply'),
content: that.$t('acl.triggerTip2'),
onOk() {
cancelTrigger(record.id).then((res) => {
that.$message.success('提交成功！')
that.$message.success(that.$t('operateSuccess'))
})
// .catch(err => that.$httpError(err))
},

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

@ -1,198 +1,202 @@
<template>
<div class="acl-users">
<div class="acl-users-header">
<a-button v-if="isAclAdmin" @click="handleCreate" type="primary">{{ btnName }}</a-button>
<a-input-search
class="ops-input"
allowClear
:style="{ display: 'inline', marginLeft: '10px' }"
placeholder="搜索 | 用户名、中文名"
v-model="searchName"
></a-input-search>
</div>
<a-spin :spinning="loading">
<vxe-grid
stripe
class="ops-stripe-table"
:columns="tableColumns"
:data="tableData"
show-overflow
highlight-hover-row
:height="`${windowHeight - 165}px`"
size="small"
>
<template #block_default="{row}">
<a-icon type="lock" v-if="row.block" />
</template>
<template #action_default="{row}">
<a-space>
<a :disabled="isAclAdmin ? false : true" @click="handleEdit(row)">
<a-icon type="edit" />
</a>
<a-tooltip title="权限汇总">
<a @click="handlePermCollect(row)"><a-icon type="solution"/></a>
</a-tooltip>
<a-popconfirm :title="`确认删除【${row.nickname || row.username}】？`" @confirm="deleteUser(row.uid)">
<a :style="{ color: 'red' }"><ops-icon type="icon-xianxing-delete"/></a>
</a-popconfirm>
</a-space>
</template>
</vxe-grid>
</a-spin>
<userForm ref="userForm" :handleOk="handleOk"> </userForm>
<perm-collect-form ref="permCollectForm"></perm-collect-form>
</div>
</template>
<script>
import { mapState } from 'vuex'
import userForm from './module/userForm'
import PermCollectForm from './module/permCollectForm'
import { deleteUserById, searchUser, getOnDutyUser } from '@/modules/acl/api/user'
export default {
name: 'Users',
components: {
userForm,
PermCollectForm,
},
data() {
return {
loading: false,
tableColumns: [
{
title: '用户名',
field: 'username',
sortable: true,
minWidth: '100px',
fixed: 'left',
},
{
title: '中文名',
field: 'nickname',
minWidth: '100px',
},
{
title: '加入时间',
field: 'date_joined',
minWidth: '160px',
align: 'center',
sortable: true,
},
{
title: '锁定',
field: 'block',
width: '150px',
align: 'center',
slots: {
default: 'block_default',
},
},
{
title: '操作',
field: 'action',
width: '150px',
fixed: 'right',
align: 'center',
slots: {
default: 'action_default',
},
},
],
onDutuUids: [],
btnName: '新增用户',
allUsers: [],
tableData: [],
searchName: '',
}
},
beforeCreate() {
this.form = this.$form.createForm(this)
},
async beforeMount() {
this.loading = true
await this.getOnDutyUser()
this.search()
},
computed: {
...mapState({
windowHeight: (state) => state.windowHeight,
}),
isAclAdmin: function() {
if (this.$store.state.user.roles.permissions.filter((item) => item === 'acl_admin').length > 0) {
return true
} else {
return false
}
},
},
watch: {
searchName: {
immediate: true,
handler(newVal, oldVal) {
if (newVal) {
this.tableData = this.allUsers.filter(
(item) =>
(item.username && item.username.toLowerCase().includes(newVal.toLowerCase())) ||
(item.nickname && item.nickname.toLowerCase().includes(newVal.toLowerCase()))
)
} else {
this.tableData = this.allUsers
}
},
},
},
mounted() {},
inject: ['reload'],
methods: {
async getOnDutyUser() {
await getOnDutyUser().then((res) => {
this.onDutuUids = res.map((i) => i.uid)
})
},
search() {
searchUser({ page_size: 10000 }).then((res) => {
const ret = res.users.filter((u) => this.onDutuUids.includes(u.uid))
this.allUsers = ret
this.tableData = ret
this.loading = false
})
},
handlePermCollect(record) {
this.$refs['permCollectForm'].collect(record)
},
handleEdit(record) {
this.$refs.userForm.handleEdit(record)
},
async handleOk() {
this.searchName = ''
await this.getOnDutyUser()
this.search()
},
handleCreate() {
this.$refs.userForm.handleCreate()
},
deleteUser(uid) {
deleteUserById(uid).then((res) => {
this.$message.success(`删除成功！`)
this.handleOk()
})
},
},
}
</script>
<style lang="less" scoped>
.acl-users {
border-radius: 15px;
background-color: #fff;
height: calc(100vh - 64px);
margin-bottom: -24px;
padding: 24px;
.acl-users-header {
display: inline-flex;
margin-bottom: 15px;
}
}
</style>
<template>
<div class="acl-users">
<div class="acl-users-header">
<a-button v-if="isAclAdmin" @click="handleCreate" type="primary">{{ btnName }}</a-button>
<a-input-search
class="ops-input"
allowClear
:style="{ width: '300px', display: 'inline', marginLeft: '10px' }"
:placeholder="`${$t('search')} | ${$t('acl.nickname')} 、 ${$t('acl.username')}`"
v-model="searchName"
></a-input-search>
</div>
<a-spin :spinning="loading">
<vxe-grid
stripe
class="ops-stripe-table"
:columns="tableColumns"
:data="tableData"
show-overflow
highlight-hover-row
:height="`${windowHeight - 165}px`"
size="small"
>
<template #block_default="{row}">
<a-icon type="lock" v-if="row.block" />
</template>
<template #action_default="{row}">
<a-space>
<a :disabled="isAclAdmin ? false : true" @click="handleEdit(row)">
<a-icon type="edit" />
</a>
<a-tooltip :title="$t('acl.summaryPermissions')">
<a @click="handlePermCollect(row)"><a-icon type="solution"/></a>
</a-tooltip>
<a-popconfirm :title="$t('confirmDelete')" @confirm="deleteUser(row.uid)">
<a :style="{ color: 'red' }"><ops-icon type="icon-xianxing-delete"/></a>
</a-popconfirm>
</a-space>
</template>
</vxe-grid>
</a-spin>
<userForm ref="userForm" :handleOk="handleOk"> </userForm>
<perm-collect-form ref="permCollectForm"></perm-collect-form>
</div>
</template>
<script>
import { mapState } from 'vuex'
import userForm from './module/userForm'
import PermCollectForm from './module/permCollectForm'
import { deleteUserById, searchUser, getOnDutyUser } from '@/modules/acl/api/user'
export default {
name: 'Users',
components: {
userForm,
PermCollectForm,
},
data() {
return {
loading: false,
onDutuUids: [],
allUsers: [],
tableData: [],
searchName: '',
}
},
beforeCreate() {
this.form = this.$form.createForm(this)
},
async beforeMount() {
this.loading = true
await this.getOnDutyUser()
this.search()
},
computed: {
...mapState({
windowHeight: (state) => state.windowHeight,
}),
isAclAdmin: function() {
if (this.$store.state.user.roles.permissions.filter((item) => item === 'acl_admin').length > 0) {
return true
} else {
return false
}
},
tableColumns() {
return [
{
title: this.$t('acl.username'),
field: 'username',
sortable: true,
minWidth: '100px',
fixed: 'left',
},
{
title: this.$t('acl.nickname'),
field: 'nickname',
minWidth: '100px',
},
{
title: this.$t('acl.joined_at'),
field: 'date_joined',
minWidth: '160px',
align: 'center',
sortable: true,
},
{
title: this.$t('acl.block'),
field: 'block',
width: '150px',
align: 'center',
slots: {
default: 'block_default',
},
},
{
title: this.$t('operation'),
field: 'action',
width: '150px',
fixed: 'right',
align: 'center',
slots: {
default: 'action_default',
},
},
]
},
btnName() {
return this.$t('acl.addUser')
},
},
watch: {
searchName: {
immediate: true,
handler(newVal, oldVal) {
if (newVal) {
this.tableData = this.allUsers.filter(
(item) =>
(item.username && item.username.toLowerCase().includes(newVal.toLowerCase())) ||
(item.nickname && item.nickname.toLowerCase().includes(newVal.toLowerCase()))
)
} else {
this.tableData = this.allUsers
}
},
},
},
mounted() {},
inject: ['reload'],
methods: {
async getOnDutyUser() {
await getOnDutyUser().then((res) => {
this.onDutuUids = res.map((i) => i.uid)
})
},
search() {
searchUser({ page_size: 10000 }).then((res) => {
const ret = res.users.filter((u) => this.onDutuUids.includes(u.uid))
this.allUsers = ret
this.tableData = ret
this.loading = false
})
},
handlePermCollect(record) {
this.$refs['permCollectForm'].collect(record)
},
handleEdit(record) {
this.$refs.userForm.handleEdit(record)
},
async handleOk() {
this.searchName = ''
await this.getOnDutyUser()
this.search()
},
handleCreate() {
this.$refs.userForm.handleCreate()
},
deleteUser(uid) {
deleteUserById(uid).then((res) => {
this.$message.success(this.$t('deleteSuccess'))
this.handleOk()
})
},
},
}
</script>
<style lang="less" scoped>
.acl-users {
border-radius: 15px;
background-color: #fff;
height: calc(100vh - 64px);
margin-bottom: -24px;
padding: 24px;
.acl-users-header {
display: inline-flex;
margin-bottom: 15px;
}
}
</style>