mirror of
https://github.com/jumpserver/lina.git
synced 2025-08-01 23:18:17 +00:00
[update]完善用户界面
This commit is contained in:
parent
4176ae458c
commit
2bfd6f2045
146
src/components/ListTable/formatters/ConnectFormatter.vue
Normal file
146
src/components/ListTable/formatters/ConnectFormatter.vue
Normal file
@ -0,0 +1,146 @@
|
||||
<template>
|
||||
<ActionsGroup :size="'mini'" :actions="actions" :more-actions="moreActions" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ActionsGroup from '@/components/ActionsGroup/index'
|
||||
import BaseFormatter from './base'
|
||||
|
||||
const defaultPerformDelete = function({ row, col }) {
|
||||
const id = row.id
|
||||
const url = `${this.url}${id}/`
|
||||
return this.$axios.delete(url)
|
||||
}
|
||||
const defaultUpdateCallback = function({ row, col }) {
|
||||
const id = row.id
|
||||
const routeName = this.colActions.updateRoute
|
||||
this.$router.push({ name: routeName, params: { id: id }})
|
||||
}
|
||||
|
||||
const defaultDeleteCallback = function({ row, col, cellValue, reload }) {
|
||||
const msg = this.$t('common.deleteWarningMsg') + ' "' + row.name + '"'
|
||||
const title = this.$t('common.Info')
|
||||
const performDelete = this.colActions.performDelete
|
||||
this.$alert(msg, title, {
|
||||
type: 'warning',
|
||||
confirmButtonClass: 'el-button--danger',
|
||||
showCancelButton: true,
|
||||
beforeClose: async(action, instance, done) => {
|
||||
if (action !== 'confirm') return done()
|
||||
instance.confirmButtonLoading = true
|
||||
try {
|
||||
await performDelete.bind(this)({ row: row, col: col })
|
||||
done()
|
||||
reload()
|
||||
this.$message.success(this.$t('common.deleteSuccessMsg'))
|
||||
} catch (error) {
|
||||
this.$message.error(this.$t('common.deleteErrorMsg' + ' ' + error))
|
||||
} finally {
|
||||
instance.confirmButtonLoading = false
|
||||
}
|
||||
}
|
||||
}).catch(() => {
|
||||
/* 取消*/
|
||||
})
|
||||
}
|
||||
|
||||
export default {
|
||||
name: 'ActionsFormatter',
|
||||
components: { ActionsGroup },
|
||||
extends: BaseFormatter,
|
||||
props: {
|
||||
actionsDefault: {
|
||||
type: Object,
|
||||
default: function() {
|
||||
return {
|
||||
hasUpdate: true, // can set function(row, value)
|
||||
canUpdate: true, // can set function(row, value)
|
||||
hasDelete: true, // can set function(row, value)
|
||||
canDelete: true,
|
||||
updateRoute: this.$route.name.replace('List', 'Update'),
|
||||
performDelete: defaultPerformDelete,
|
||||
onUpdate: defaultUpdateCallback,
|
||||
onDelete: defaultDeleteCallback,
|
||||
extraActions: [] // format see defaultActions
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
const colActions = Object.assign(this.actionsDefault, this.col, this.col.actions)
|
||||
const defaultActions = [
|
||||
{
|
||||
name: 'update',
|
||||
fa: 'fa-terminal',
|
||||
type: 'primary',
|
||||
has: colActions.hasUpdate,
|
||||
can: colActions.canUpdate,
|
||||
callback: colActions.onUpdate
|
||||
},
|
||||
{
|
||||
name: 'delete',
|
||||
type: 'info',
|
||||
fa: 'fa-star-o',
|
||||
has: colActions.hasDelete,
|
||||
can: colActions.canDelete,
|
||||
callback: colActions.onDelete
|
||||
}
|
||||
]
|
||||
return {
|
||||
colActions: colActions,
|
||||
defaultActions: defaultActions,
|
||||
extraActions: colActions.extraActions
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
cleanedActions() {
|
||||
let actions = [...this.defaultActions, ...this.extraActions]
|
||||
actions = _.cloneDeep(actions)
|
||||
actions = actions.map((v) => {
|
||||
v.has = this.cleanBoolean(v, 'has')
|
||||
v.can = this.cleanBoolean(v, 'can')
|
||||
v.callback = this.cleanCallback(v)
|
||||
return v
|
||||
})
|
||||
actions = actions.filter((v) => v.has)
|
||||
return actions
|
||||
},
|
||||
actions() {
|
||||
if (this.cleanedActions.length <= 3) {
|
||||
return this.cleanedActions
|
||||
}
|
||||
return this.cleanedActions.slice(0, 2)
|
||||
},
|
||||
moreActions() {
|
||||
if (this.cleanedActions.length <= 3) {
|
||||
return []
|
||||
}
|
||||
return this.cleanedActions.slice(2, this.cleanedActions.length)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
cleanBoolean(item, attr) {
|
||||
const ok = item[attr]
|
||||
if (typeof ok !== 'function') {
|
||||
return ok === undefined ? true : ok
|
||||
}
|
||||
return ok(this.row, this.cellValue)
|
||||
},
|
||||
cleanCallback(item) {
|
||||
const callback = item.callback
|
||||
const attrs = {
|
||||
reload: this.reload,
|
||||
row: this.row,
|
||||
col: this.col,
|
||||
cellValue: this.cellValue,
|
||||
tableData: this.tableData
|
||||
}
|
||||
return () => { return callback.bind(this)(attrs) }
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
@ -11,6 +11,8 @@ import ExpandAssetPermissionFormatter from './ExpandAssetPermissionFormatter'
|
||||
import CustomActionsFormatter from './CustomActionsFormatter'
|
||||
import DeleteActionFormatter from './DeleteActionFormatter'
|
||||
import DateFormatter from './DateFormatter'
|
||||
import ConnectFormatter from './ConnectFormatter'
|
||||
import SystemUserFormatter from './SystemUserFormatter'
|
||||
|
||||
export default {
|
||||
DetailFormatter,
|
||||
@ -25,7 +27,9 @@ export default {
|
||||
ExpandAssetPermissionFormatter,
|
||||
CustomActionsFormatter,
|
||||
DeleteActionFormatter,
|
||||
DateFormatter
|
||||
DateFormatter,
|
||||
ConnectFormatter,
|
||||
SystemUserFormatter
|
||||
}
|
||||
|
||||
export {
|
||||
@ -41,5 +45,7 @@ export {
|
||||
ExpandAssetPermissionFormatter,
|
||||
CustomActionsFormatter,
|
||||
DeleteActionFormatter,
|
||||
DateFormatter
|
||||
DateFormatter,
|
||||
ConnectFormatter,
|
||||
SystemUserFormatter
|
||||
}
|
||||
|
@ -4,7 +4,7 @@
|
||||
|
||||
<script>
|
||||
import GenericTreeListPage from '@/layout/components/GenericTreeListPage/index'
|
||||
import { DetailFormatter, ActionsFormatter, BooleanFormatter } from '@/components/ListTable/formatters'
|
||||
import { DetailFormatter, ConnectFormatter, SystemUserFormatter } from '@/components/ListTable/formatters'
|
||||
export default {
|
||||
components: {
|
||||
GenericTreeListPage
|
||||
@ -20,7 +20,13 @@ export default {
|
||||
// ?assets=0不显示资产. =1显示资产
|
||||
treeUrl: '/api/v1/perms/users/nodes/children/tree/?cache_policy=2',
|
||||
callback: {
|
||||
refresh: () => {}
|
||||
refresh: () => {},
|
||||
onSelected: function(event, treeNode) {
|
||||
if (treeNode.meta.type === 'node') {
|
||||
const currentNodeId = treeNode.meta.node.id
|
||||
this.tableConfig.url = `/api/v1/perms/users/nodes/${currentNodeId}/assets/?cache_policy=1`
|
||||
}
|
||||
}.bind(this)
|
||||
}
|
||||
},
|
||||
tableConfig: {
|
||||
@ -41,8 +47,9 @@ export default {
|
||||
sortable: 'custom'
|
||||
},
|
||||
{
|
||||
prop: 'hardware_info',
|
||||
prop: 'SystemUsers',
|
||||
align: 'center',
|
||||
formatter: SystemUserFormatter,
|
||||
label: this.$t('assets.SystemUsers')
|
||||
},
|
||||
{
|
||||
@ -53,14 +60,15 @@ export default {
|
||||
{
|
||||
prop: 'id',
|
||||
align: 'center',
|
||||
formatter: ActionsFormatter,
|
||||
formatter: ConnectFormatter,
|
||||
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)
|
||||
onDelete: function({ row, col, cellValue, reload }) {
|
||||
alert('接口错误:获取不到对应的资产状态')
|
||||
},
|
||||
onUpdate: function({ row, col, cellValue, reload }) {
|
||||
window.open(`/luna/?login_to=${cellValue}`, '_blank')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user