mirror of
https://github.com/jumpserver/lina.git
synced 2025-06-27 15:37:24 +00:00
[upate]更新用户界面
This commit is contained in:
OrangeM21
parent
10d4f1f04a
commit
2bb61ff726
@ -1,13 +1,86 @@
|
||||
<template>
|
||||
|
||||
<GenericTreeListPage :table-config="tableConfig" :header-actions="headerActions" :tree-setting="treeSetting" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'index.vue'
|
||||
import GenericTreeListPage from '@/layout/components/GenericTreeListPage/index'
|
||||
import { DetailFormatter, ActionsFormatter, BooleanFormatter } from '@/components/ListTable/formatters'
|
||||
export default {
|
||||
components: {
|
||||
GenericTreeListPage
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
treeSetting: {
|
||||
showMenu: true,
|
||||
showRefresh: true,
|
||||
showAssets: false,
|
||||
url: '/api/v1/perms/users/assets/',
|
||||
nodeUrl: '/api/v1/perms/users/nodes/',
|
||||
// ?assets=0不显示资产. =1显示资产
|
||||
treeUrl: '/api/v1/perms/users/nodes/children/tree/?cache_policy=2',
|
||||
callback: {
|
||||
refresh: () => {}
|
||||
}
|
||||
},
|
||||
tableConfig: {
|
||||
url: '/api/v1/perms/users/assets/',
|
||||
hasTree: true,
|
||||
columns: [
|
||||
{
|
||||
prop: 'hostname',
|
||||
label: this.$t('assets.Hostname'),
|
||||
formatter: DetailFormatter,
|
||||
sortable: true,
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
prop: 'ip',
|
||||
align: 'center',
|
||||
label: this.$t('assets.ip'),
|
||||
sortable: 'custom'
|
||||
},
|
||||
{
|
||||
prop: 'hardware_info',
|
||||
align: 'center',
|
||||
label: this.$t('assets.SystemUsers')
|
||||
},
|
||||
{
|
||||
prop: 'comment',
|
||||
align: 'center',
|
||||
label: this.$t('assets.Comment')
|
||||
},
|
||||
{
|
||||
prop: 'id',
|
||||
align: 'center',
|
||||
formatter: ActionsFormatter,
|
||||
width: '200px',
|
||||
label: this.$t('common.action'),
|
||||
actions: {
|
||||
performDelete: ({ row, col }) => {
|
||||
const id = row.id
|
||||
const url = `/api/v1/assets/assets/${id}/`
|
||||
return this.$axios.delete(url)
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
headerActions: {
|
||||
hasExport: false,
|
||||
hasImport: false,
|
||||
hasRefresh: false,
|
||||
hasCreate: false,
|
||||
hasBulkDelete: false,
|
||||
hasBulkUpdate: false,
|
||||
hasLeftActions: false,
|
||||
hasSearch: true,
|
||||
hasRightActions: false
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
|
||||
178
src/userviews/users/Detail.vue
Normal file
178
src/userviews/users/Detail.vue
Normal file
@ -0,0 +1,178 @@
|
||||
<template>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="14">
|
||||
<DetailCard :items="detailCardItems" />
|
||||
</el-col>
|
||||
<el-col :span="10" />
|
||||
</el-row>
|
||||
</template>a
|
||||
|
||||
<script>
|
||||
import DetailCard from '@/components/DetailCard'
|
||||
import RelationCard from '@/components/RelationCard'
|
||||
import QuickActions from '@/components/QuickActions'
|
||||
import { toSafeLocalDateStr } from '@/utils/common'
|
||||
export default {
|
||||
name: 'Detail',
|
||||
components: {
|
||||
DetailCard
|
||||
},
|
||||
props: {
|
||||
object: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
quickActions: [
|
||||
{
|
||||
title: this.$t('assets.is_active'),
|
||||
type: 'switcher',
|
||||
attrs: {
|
||||
label: this.$t('common.Test'),
|
||||
model: this.object.is_active
|
||||
},
|
||||
callbacks: {
|
||||
click: function() {
|
||||
this.$axios.post(
|
||||
`api/v1/assets/system-users/${this.object.id}/tasks/`,
|
||||
{ action: 'test' }
|
||||
).then(res => {
|
||||
window.open(`/ops/celery/task/${res.task}/log/`, '', 'width=900,height=600')
|
||||
}
|
||||
)
|
||||
}.bind(this)
|
||||
}
|
||||
},
|
||||
{
|
||||
title: this.$t('assets.TestAssetsConnective'),
|
||||
attrs: {
|
||||
type: 'primary',
|
||||
label: this.$t('common.Test')
|
||||
},
|
||||
callbacks: {
|
||||
click: function() {
|
||||
this.$axios.post(
|
||||
`api/v1/assets/system-users/${this.object.id}/tasks/`,
|
||||
{ action: 'test' }
|
||||
).then(res => {
|
||||
window.open(`/ops/celery/task/${res.task}/log/`, '', 'width=900,height=600')
|
||||
}
|
||||
)
|
||||
}.bind(this)
|
||||
}
|
||||
},
|
||||
{
|
||||
title: this.$t('assets.PushSystemUserNow'),
|
||||
attrs: {
|
||||
type: 'primary',
|
||||
label: this.$t('common.Push')
|
||||
},
|
||||
callbacks: {
|
||||
click: function() {
|
||||
this.$axios.post(
|
||||
`api/v1/assets/system-users/${this.object.id}/tasks/`,
|
||||
{ action: 'push' }
|
||||
).then(res => {
|
||||
window.open(`/ops/celery/task/${res.task}/log/`, '', 'width=900,height=600')
|
||||
}
|
||||
)
|
||||
}.bind(this)
|
||||
}
|
||||
}
|
||||
],
|
||||
nodeReletionConfig: {
|
||||
icon: 'fa-info',
|
||||
title: this.$t('perms.Add node to this permission'),
|
||||
objectsAjax: {
|
||||
url: '/api/v1/assets/nodes/',
|
||||
processResults(data) {
|
||||
let results = data.results
|
||||
results = results.map((item) => {
|
||||
return { label: item.full_value, value: item.id }
|
||||
})
|
||||
const more = !!data.next
|
||||
return { results: results, pagination: more, total: data.count }
|
||||
}
|
||||
},
|
||||
hasObjectsId: this.object.nodes,
|
||||
performAdd: (items) => {
|
||||
const newData = []
|
||||
const value = this.$refs.NodeRelation.iHasObjects
|
||||
value.map(v => {
|
||||
newData.push(v.value)
|
||||
})
|
||||
const relationUrl = `/api/v1/assets/assets/${this.object.id}/`
|
||||
items.map(v => {
|
||||
newData.push(v.value)
|
||||
})
|
||||
return this.$axios.patch(relationUrl, { nodes: newData }).then(res => {
|
||||
this.$message.success(this.$t('common.Update success'))
|
||||
}).catch(err => {
|
||||
this.$message.error(this.$t('common.Update failed' + ' ' + err))
|
||||
})
|
||||
},
|
||||
performDelete: (item) => {
|
||||
const itemId = item.value
|
||||
const newData = []
|
||||
const value = this.$refs.NodeRelation.iHasObjects
|
||||
value.map(v => {
|
||||
if (v.value !== itemId) {
|
||||
newData.push(v.value)
|
||||
}
|
||||
})
|
||||
const relationUrl = `/api/v1/assets/assets/${this.object.id}/`
|
||||
return this.$axios.patch(relationUrl, { nodes: newData }).then(res => {
|
||||
this.$message.success(this.$t('common.Update success'))
|
||||
}).catch(err => {
|
||||
this.$message.error(this.$t('common.Update failed' + ' ' + err))
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
detailCardItems() {
|
||||
return [
|
||||
{
|
||||
value: this.object.username,
|
||||
key: this.$t('asset.username')
|
||||
},
|
||||
{
|
||||
value: this.object.name,
|
||||
key: this.$t('asset.name')
|
||||
},
|
||||
{
|
||||
value: this.object.role_display,
|
||||
key: this.$t('asset.role')
|
||||
},
|
||||
{
|
||||
value: this.object.email,
|
||||
key: this.$t('asset.email')
|
||||
},
|
||||
{
|
||||
value: `${this.object.is_active}`,
|
||||
key: this.$t('asset.is_active')
|
||||
},
|
||||
{
|
||||
value: `没有这个API`,
|
||||
key: this.$t('asset.sshkey')
|
||||
},
|
||||
{
|
||||
value: this.object.mfa_level_display,
|
||||
key: this.$t('asset.mfa_level_display')
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
console.log(this.object)
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang='less' scoped>
|
||||
</style>
|
||||
@ -1,17 +1,38 @@
|
||||
<template>
|
||||
<div/>
|
||||
<GenericDetailPage :object.sync="TaskDetail" :active-menu.sync="config.activeMenu" v-bind="config" v-on="$listeners">
|
||||
<keep-alive>
|
||||
<component :is="config.activeMenu" :object="TaskDetail" />
|
||||
</keep-alive>
|
||||
</GenericDetailPage>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { GenericDetailPage } from '@/layout/components'
|
||||
import Detail from './Detail.vue'
|
||||
export default {
|
||||
name: '',
|
||||
components: {},
|
||||
name: 'AssetListDetail',
|
||||
components: {
|
||||
GenericDetailPage,
|
||||
Detail
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
return {
|
||||
TaskDetail: {},
|
||||
config: {
|
||||
title: this.$t('assets.SystemUserDetail'),
|
||||
activeMenu: 'Detail',
|
||||
submenu: [
|
||||
{
|
||||
title: this.$t('assets.detail'),
|
||||
name: 'Detail'
|
||||
}
|
||||
],
|
||||
hasRightSide: false
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang='less' scoped>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user