[update]完善用户界面

This commit is contained in:
OrangeM21 2020-05-20 17:27:29 +08:00
parent 4176ae458c
commit 2bfd6f2045
3 changed files with 170 additions and 10 deletions

View 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>

View File

@ -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
}

View File

@ -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')
}
}
}