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

fix:acl新增用户展示异常问题 (#223)

This commit is contained in:
wang-liang0615 2023-10-24 05:59:08 +08:00 committed by GitHub
parent 7556dfe56b
commit fff5679f6e
1 changed files with 198 additions and 194 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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