<template>
|
<div class="art-full-height">
|
<ArtSearchBar
|
v-model="searchForm"
|
:items="searchItems"
|
:showExpand="false"
|
@search="handleSearch"
|
@reset="handleReset"
|
/>
|
|
<ElCard class="art-table-card">
|
<ArtTableHeader v-model:columns="columnChecks" :loading="loading" @refresh="refreshData" />
|
|
<ArtTable
|
:loading="loading"
|
:data="data"
|
:columns="columns"
|
:pagination="pagination"
|
@pagination:size-change="handleSizeChange"
|
@pagination:current-change="handleCurrentChange"
|
/>
|
</ElCard>
|
</div>
|
</template>
|
|
<script setup>
|
import { fetchGetUserLoginList } from '@/api/system-manage'
|
import { useTable } from '@/hooks/core/useTable'
|
import { ElTag } from 'element-plus'
|
import { useI18n } from 'vue-i18n'
|
import { createUserLoginApiParams, userLoginPaginationKey } from './userLoginTable.config'
|
|
defineOptions({ name: 'UserLogin' })
|
const { t } = useI18n()
|
|
const LOGIN_TYPE_MAP = {
|
0: { labelKey: 'pages.system.userLogin.types.loginSuccess', type: 'success' },
|
1: { labelKey: 'pages.system.userLogin.types.loginFailed', type: 'danger' },
|
2: { labelKey: 'pages.system.userLogin.types.logout', type: 'info' },
|
3: { labelKey: 'pages.system.userLogin.types.tokenRenew', type: 'warning' }
|
}
|
|
const initialSearchForm = {
|
token: '',
|
ip: '',
|
type: void 0,
|
system: ''
|
}
|
|
const searchForm = ref({ ...initialSearchForm })
|
|
const searchItems = computed(() => [
|
{
|
label: t('pages.system.userLogin.search.token'),
|
key: 'token',
|
type: 'input',
|
props: {
|
placeholder: t('pages.system.userLogin.search.tokenPlaceholder'),
|
clearable: true
|
}
|
},
|
{
|
label: t('pages.system.userLogin.search.ip'),
|
key: 'ip',
|
type: 'input',
|
props: {
|
placeholder: t('pages.system.userLogin.search.ipPlaceholder'),
|
clearable: true
|
}
|
},
|
{
|
label: t('pages.system.userLogin.search.system'),
|
key: 'system',
|
type: 'input',
|
props: {
|
placeholder: t('pages.system.userLogin.search.systemPlaceholder'),
|
clearable: true
|
}
|
},
|
{
|
label: t('pages.system.userLogin.search.type'),
|
key: 'type',
|
type: 'select',
|
props: {
|
placeholder: t('pages.system.userLogin.search.typePlaceholder'),
|
clearable: true,
|
options: Object.entries(LOGIN_TYPE_MAP).map(([value, item]) => ({
|
label: t(item.labelKey),
|
value: Number(value)
|
}))
|
}
|
}
|
])
|
|
const getLoginTypeConfig = (type) => {
|
return (
|
LOGIN_TYPE_MAP[type] || {
|
label: type ?? t('common.placeholder.empty'),
|
type: 'info'
|
}
|
)
|
}
|
|
const getUserDisplayName = (row) => {
|
return row.userId$ || row.userName || row.nickname || row.username || row.userId || '-'
|
}
|
|
const {
|
columns,
|
columnChecks,
|
data,
|
loading,
|
pagination,
|
getData,
|
resetSearchParams,
|
replaceSearchParams,
|
handleSizeChange,
|
handleCurrentChange,
|
refreshData
|
} = useTable({
|
core: {
|
apiFn: fetchGetUserLoginList,
|
apiParams: createUserLoginApiParams(searchForm.value),
|
paginationKey: userLoginPaginationKey,
|
columnsFactory: () => [
|
{ type: 'index', width: 60, label: t('table.index') },
|
{ prop: 'id', label: t('table.id'), minWidth: 90 },
|
{
|
prop: 'userDisplayName',
|
label: t('pages.system.userLogin.table.user'),
|
minWidth: 140,
|
formatter: (row) => getUserDisplayName(row)
|
},
|
{ prop: 'token', label: t('pages.system.userLogin.table.token'), minWidth: 260, showOverflowTooltip: true },
|
{ prop: 'ip', label: t('pages.system.userLogin.table.ip'), minWidth: 140 },
|
{
|
prop: 'type',
|
label: t('pages.system.userLogin.search.type'),
|
width: 120,
|
formatter: (row) => {
|
const config = getLoginTypeConfig(row.type)
|
return h(ElTag, { type: config.type }, () => config.labelKey ? t(config.labelKey) : config.label)
|
}
|
},
|
{ prop: 'system', label: t('pages.system.userLogin.table.system'), minWidth: 140 },
|
{
|
prop: 'createTime',
|
label: t('table.createTime'),
|
minWidth: 180,
|
sortable: true,
|
formatter: (row) => row.createTime$ || row.createTime || t('common.placeholder.empty')
|
}
|
]
|
}
|
})
|
|
const handleSearch = (params) => {
|
replaceSearchParams(params)
|
getData()
|
}
|
|
const handleReset = () => {
|
Object.assign(searchForm.value, { ...initialSearchForm })
|
resetSearchParams()
|
}
|
</script>
|
