Files
lina/src/views/sessions/SessionList/BaseList.vue
2023-02-13 16:07:08 +08:00

157 lines
3.9 KiB
Vue

<template>
<ListTable :table-config="tableConfig" :header-actions="headerActions" />
</template>
<script type="text/jsx">
import ListTable from '@/components/ListTable'
import { timeOffset, getDaysAgo, getDaysFuture } from '@/utils/common'
import { ActionsFormatter } from '@/components/TableFormatters'
export default {
name: 'BaseList',
components: {
ListTable
},
props: {
url: {
type: String,
default: () => '/api/v1/terminal/sessions/'
},
extraActions: {
type: Array,
default: () => []
}
},
data() {
const now = new Date()
const dateFrom = getDaysAgo(7, now).toISOString()
const dateTo = getDaysFuture(1, now).toISOString()
return {
tableConfig: {
url: this.url,
columnsExtra: ['index'],
columnsShow: {
min: ['id', 'actions'],
default: [
'id', 'user', 'asset', 'account', 'remote_addr', 'protocol', 'login_from',
'command_amount', 'date_start', 'duration', 'terminal_display', 'actions'
]
},
columnsMeta: {
id: {
prop: 'id',
label: this.$t('common.Number'),
align: 'center',
width: '80px',
formatter: function(row, column, cellValue, index) {
const label = index + 1
const route = { to: { name: 'SessionDetail', params: { id: row.id }}}
return <router-link {...{ attrs: route }} class='link'>{ label }</router-link>
}
},
can_join: {
formatterArgs: {
showFalse: false
}
},
can_replay: {
formatterArgs: {
showFalse: false
}
},
can_terminate: {
formatterArgs: {
showFalse: false
}
},
has_command: {
formatterArgs: {
showFalse: false
}
},
is_finished: {
formatterArgs: {
showFalse: false
}
},
has_replay: {
formatterArgs: {
showFalse: false
}
},
asset: {
label: this.$t('sessions.target')
},
command_amount: {
label: this.$t('sessions.command'),
width: '90px'
},
login_from: {
width: '115px'
},
remote_addr: {
width: '140px'
},
protocol: {
label: this.$t('sessions.protocol'),
width: '80px',
sortable: false,
formatter: null
},
date_start: {
width: '100px'
},
date_end: {
width: '100px'
},
duration: {
label: this.$t('sessions.duration'),
formatter: function(row) {
return timeOffset(row.date_start, row.date_end)
},
width: '80px'
},
actions: {
prop: 'actions',
label: this.$t('common.Actions'),
width: '160px',
formatter: ActionsFormatter,
formatterArgs: {
hasEdit: false,
hasClone: false,
hasDelete: false,
hasUpdate: false,
extraActions: this.extraActions
}
}
},
extraQuery: {
date_to: dateTo,
date_from: dateFrom
}
},
headerActions: {
hasLeftActions: false,
hasImport: false,
hasDatePicker: true,
datePicker: {
dateEnd: dateTo,
dateStart: dateFrom
},
searchConfig: {
getUrlQuery: false,
exclude: ['is_finished']
}
}
}
},
methods: {
}
}
</script>
<style scoped>
.link {
color: var(--color-info);
}
</style>