mirror of
https://github.com/veops/cmdb.git
synced 2025-08-09 05:19:07 +08:00
前后端全面升级
This commit is contained in:
pycook
318
cmdb-ui/src/modules/acl/views/trigger.vue
Normal file
318
cmdb-ui/src/modules/acl/views/trigger.vue
Normal file
@@ -0,0 +1,318 @@
|
||||
<template>
|
||||
<div :style="{ backgroundColor: '#fff', padding: '24px' }">
|
||||
<div class="trigger-action-btn">
|
||||
<a-button type="primary" @click="handleCreateTrigger">新增触发器</a-button>
|
||||
<a-input-search
|
||||
:style="{ display: 'inline', marginLeft: '10px', width: '200px' }"
|
||||
placeholder="搜索 | 名称"
|
||||
v-model="searchName"
|
||||
allowClear
|
||||
@search="filter"
|
||||
></a-input-search>
|
||||
</div>
|
||||
|
||||
<vxe-grid
|
||||
:columns="tableColumns"
|
||||
:data="filterTriggers"
|
||||
:max-height="`${windowHeight - 185}px`"
|
||||
highlight-hover-row
|
||||
>
|
||||
<template #wildcard_default="{row}">
|
||||
<div style="word-break: break-word">
|
||||
<span>{{ row.wildcard }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<template #resourceTypeRender_default="{row}">
|
||||
{{
|
||||
resourceTypeList.filter((item) => item.id === row.resource_type_id)[0]
|
||||
? resourceTypeList.filter((item) => item.id === row.resource_type_id)[0].name
|
||||
: 'unkown'
|
||||
}}
|
||||
</template>
|
||||
<template #users_default="{row}">
|
||||
<span
|
||||
v-for="(u, index) in row.users"
|
||||
:key="index"
|
||||
>{{ u }}<a-divider
|
||||
v-if="index < row.users.length - 1"
|
||||
type="vertical"
|
||||
/></span>
|
||||
</template>
|
||||
<template #permissions_default="{row}">
|
||||
<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>
|
||||
</template>
|
||||
<template #action_default="{row}">
|
||||
<a-space>
|
||||
<a-tooltip title="应用">
|
||||
<a @click="handleApplyTrigger(row)" :style="{ color: '#0f9d58' }"><a-icon type="appstore"/></a>
|
||||
</a-tooltip>
|
||||
<a-tooltip title="取消">
|
||||
<a @click="handleCancelTrigger(row)" :style="{ color: 'orange' }"><a-icon type="stop"/></a>
|
||||
</a-tooltip>
|
||||
<a-tooltip title="查看正则匹配结果">
|
||||
<a @click="handlePattern(row)" :style="{ color: 'purple' }"><a-icon type="eye"/></a>
|
||||
</a-tooltip>
|
||||
<a @click="handleEditTrigger(row)"><a-icon type="edit"/></a>
|
||||
<a @click="handleDeleteTrigger(row)" :style="{ color: 'red' }"><a-icon type="delete"/></a>
|
||||
</a-space>
|
||||
</template>
|
||||
</vxe-grid>
|
||||
<trigger-form
|
||||
ref="triggerForm"
|
||||
:roles="roles"
|
||||
:resourceTypeList="resourceTypeList"
|
||||
:id2perms="id2perms"
|
||||
@refresh="loadTriggers"
|
||||
:app_id="app_id"
|
||||
></trigger-form>
|
||||
<TriggerPattern ref="triggerPattern" :roles="roles" />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { mapState } from 'vuex'
|
||||
import TriggerForm from './module/triggerForm'
|
||||
import TriggerPattern from './module/triggerPattern'
|
||||
import { getTriggers, deleteTrigger, applyTrigger, cancelTrigger } from '@/modules/acl/api/trigger'
|
||||
import { searchRole } from '@/modules/acl/api/role'
|
||||
import { searchResourceType } from '@/modules/acl/api/resource'
|
||||
|
||||
export default {
|
||||
name: 'ACLTrigger',
|
||||
components: { TriggerForm, TriggerPattern },
|
||||
data() {
|
||||
return {
|
||||
roles: [],
|
||||
searchName: '',
|
||||
resourceTypeList: [],
|
||||
filterTriggers: [],
|
||||
triggers: [],
|
||||
id2parents: [],
|
||||
id2perms: {},
|
||||
tableColumns: [
|
||||
{
|
||||
title: '名称',
|
||||
field: 'name',
|
||||
sortable: true,
|
||||
minWidth: '150px',
|
||||
fixed: 'left',
|
||||
showOverflow: 'tooltip',
|
||||
},
|
||||
{
|
||||
title: '资源名',
|
||||
field: 'wildcard',
|
||||
minWidth: '250px',
|
||||
showOverflow: 'tooltip',
|
||||
slots: {
|
||||
default: 'wildcard_default',
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '资源类型',
|
||||
field: 'resource_type_id',
|
||||
minWidth: '100px',
|
||||
slots: {
|
||||
default: 'resourceTypeRender_default',
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '创建人',
|
||||
field: 'users',
|
||||
minWidth: '150px',
|
||||
showOverflow: 'tooltip',
|
||||
slots: {
|
||||
default: 'users_default',
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '角色',
|
||||
field: 'roles',
|
||||
minWidth: '150px',
|
||||
slots: {
|
||||
default: ({ row }) => {
|
||||
const roleNameList = row.roles.map((item) => {
|
||||
const temp = this.roles.find((a) => a.id === item)
|
||||
if (temp) {
|
||||
return temp.name
|
||||
}
|
||||
return 'unknown'
|
||||
})
|
||||
return [
|
||||
<div>
|
||||
{roleNameList.length <= 1 && roleNameList.map((item) => <span key={item}>{item}</span>)}
|
||||
{roleNameList.length > 1 && (
|
||||
<a-tooltip>
|
||||
<template slot="title">
|
||||
{roleNameList.map((item, idx) => (
|
||||
<span>
|
||||
<span key={item}>{item}</span>
|
||||
{idx !== roleNameList.length - 1 && <a-divider type="vertical" />}
|
||||
</span>
|
||||
))}
|
||||
</template>
|
||||
<span>{roleNameList[0]}...</span>
|
||||
</a-tooltip>
|
||||
)}
|
||||
</div>,
|
||||
]
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '权限',
|
||||
field: 'permissions',
|
||||
minWidth: '250px',
|
||||
slots: {
|
||||
default: 'permissions_default',
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
field: 'enabled',
|
||||
minWidth: '100px',
|
||||
slots: {
|
||||
default: 'enabled_default',
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
field: 'action',
|
||||
minWidth: '200px',
|
||||
fixed: 'right',
|
||||
slots: {
|
||||
default: 'action_default',
|
||||
},
|
||||
},
|
||||
],
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.loadRoles()
|
||||
this.loadResourceTypeList()
|
||||
},
|
||||
beforeMount() {
|
||||
this.loadTriggers()
|
||||
},
|
||||
|
||||
computed: {
|
||||
...mapState({
|
||||
windowHeight: (state) => state.windowHeight,
|
||||
}),
|
||||
app_id() {
|
||||
return this.$route.name.split('_')[0]
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
loadTriggers() {
|
||||
this.searchName = ''
|
||||
getTriggers({ app_id: this.app_id }).then((res) => {
|
||||
this.triggers = res
|
||||
this.filterTriggers = res
|
||||
})
|
||||
// .catch(err => this.$httpError(err))
|
||||
},
|
||||
loadRoles() {
|
||||
searchRole({ app_id: this.app_id, page_size: 9999 }).then((res) => {
|
||||
this.roles = res.roles
|
||||
this.id2parents = res.id2parents
|
||||
})
|
||||
// .catch(err => this.$httpError(err))
|
||||
},
|
||||
loadResourceTypeList() {
|
||||
searchResourceType({ app_id: this.app_id, page_size: 9999 }).then((res) => {
|
||||
this.resourceTypeList = res['groups']
|
||||
this.id2perms = res['id2perms']
|
||||
})
|
||||
// .catch(err => this.$httpError(err))
|
||||
},
|
||||
handleCreateTrigger() {
|
||||
this.$refs.triggerForm.handleEdit(null)
|
||||
},
|
||||
handleDeleteTrigger(record) {
|
||||
const that = this
|
||||
this.$confirm({
|
||||
title: '删除',
|
||||
content: '确认删除该触发器吗？',
|
||||
onOk() {
|
||||
deleteTrigger(record.id).then((res) => {
|
||||
that.$message.success('删除成功')
|
||||
that.loadTriggers()
|
||||
})
|
||||
// .catch(err => that.$httpError(err))
|
||||
},
|
||||
})
|
||||
},
|
||||
handleApplyTrigger(record) {
|
||||
const that = this
|
||||
this.$confirm({
|
||||
title: '规则应用',
|
||||
content: '是否确定应用该触发器？',
|
||||
onOk() {
|
||||
applyTrigger(record.id).then((res) => {
|
||||
that.$message.success('提交成功!')
|
||||
})
|
||||
// .catch(err => that.$httpError(err))
|
||||
},
|
||||
})
|
||||
},
|
||||
handleCancelTrigger(record) {
|
||||
const that = this
|
||||
this.$confirm({
|
||||
title: '规则应用',
|
||||
content: '是否取消应用该触发器?',
|
||||
onOk() {
|
||||
cancelTrigger(record.id).then((res) => {
|
||||
that.$message.success('提交成功！')
|
||||
})
|
||||
// .catch(err => that.$httpError(err))
|
||||
},
|
||||
})
|
||||
},
|
||||
handleEditTrigger(record) {
|
||||
this.$refs.triggerForm.handleEdit(record)
|
||||
},
|
||||
filter() {
|
||||
if (this.searchName) {
|
||||
this.filterTriggers = this.triggers.filter((item) =>
|
||||
item.name.toLowerCase().includes(this.searchName.toLowerCase())
|
||||
)
|
||||
} else {
|
||||
this.filterTriggers = this.triggers
|
||||
}
|
||||
},
|
||||
handlePattern(row) {
|
||||
const { wildcard, uid, resource_type_id } = row
|
||||
this.$refs.triggerPattern.open({
|
||||
resource_type_id,
|
||||
app_id: this.app_id,
|
||||
owner: uid,
|
||||
pattern: wildcard,
|
||||
})
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
'$route.name': function(oldName, newName) {
|
||||
this.loadTriggers()
|
||||
},
|
||||
searchName: {
|
||||
immediate: true,
|
||||
handler(newVal) {
|
||||
if (!newVal) {
|
||||
this.filter()
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.trigger-action-btn {
|
||||
width: 100%;
|
||||
display: inline-flex;
|
||||
margin-bottom: 15px;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user