216 lines
7.4 KiB
Vue
216 lines
7.4 KiB
Vue
<template>
|
|
<div>
|
|
<div class="n-layout-page-header"><n-card :bordered="false" title="登录失败日志" /></div>
|
|
<n-card :bordered="false" class="proCard">
|
|
<BasicForm
|
|
ref="searchFormRef"
|
|
@register="register"
|
|
@submit="reloadTable"
|
|
@reset="handleReset"
|
|
@keyup.enter="reloadTable"
|
|
/>
|
|
<BasicTable
|
|
ref="actionRef"
|
|
:columns="columns"
|
|
:request="loadDataTable"
|
|
:row-key="(row) => row.tenantId + '-' + row.id"
|
|
:actionColumn="actionColumn"
|
|
:scroll-x="scrollX"
|
|
:resizeHeightOffset="-10000"
|
|
>
|
|
<template #tableTitle
|
|
><n-button
|
|
v-if="hasPermission(['/imLoginFailureLog/export'])"
|
|
type="primary"
|
|
@click="handleExport"
|
|
><template #icon
|
|
><n-icon><ExportOutlined /></n-icon></template
|
|
>导出</n-button
|
|
></template
|
|
>
|
|
</BasicTable>
|
|
</n-card>
|
|
<n-modal v-model:show="showDetail" preset="card" title="失败详情" class="detail-modal">
|
|
<n-descriptions bordered label-placement="left" :column="1">
|
|
<n-descriptions-item label="用户ID">{{ current.userId || '未识别' }}</n-descriptions-item
|
|
><n-descriptions-item label="脱敏账号">{{ current.accountMask }}</n-descriptions-item>
|
|
<n-descriptions-item label="失败类型">{{ current.failureType }}</n-descriptions-item
|
|
><n-descriptions-item label="原因码">{{ current.reason }}</n-descriptions-item>
|
|
<n-descriptions-item label="失败详情">{{ current.detail }}</n-descriptions-item
|
|
><n-descriptions-item label="IP / 地区"
|
|
>{{ current.ip }} / {{ current.region }}</n-descriptions-item
|
|
>
|
|
<n-descriptions-item label="设备"
|
|
>{{ current.platform }} {{ current.appVersion }} /
|
|
{{ current.deviceId }}</n-descriptions-item
|
|
><n-descriptions-item label="User-Agent">{{ current.userAgent }}</n-descriptions-item>
|
|
<n-descriptions-item label="风险"
|
|
>{{ current.riskLevel }} / {{ current.riskAction }}</n-descriptions-item
|
|
><n-descriptions-item label="请求ID">{{ current.requestId }}</n-descriptions-item>
|
|
<n-descriptions-item label="尝试时间">{{ current.attemptAt }}</n-descriptions-item>
|
|
</n-descriptions>
|
|
</n-modal>
|
|
<n-modal v-model:show="showBan" preset="card" title="封禁用户" class="action-modal">
|
|
<n-form-item label="封禁原因" required
|
|
><n-input
|
|
v-model:value="banReason"
|
|
type="textarea"
|
|
maxlength="500"
|
|
show-count
|
|
placeholder="请输入封禁原因"
|
|
/></n-form-item>
|
|
<template #footer
|
|
><n-space justify="end"
|
|
><n-button @click="showBan = false">取消</n-button
|
|
><n-button type="error" :loading="submitting" @click="submitBan"
|
|
>确认封禁</n-button
|
|
></n-space
|
|
></template
|
|
>
|
|
</n-modal>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { computed, h, onMounted, reactive, ref } from 'vue';
|
|
import { useDialog, useMessage } from 'naive-ui';
|
|
import { ExportOutlined } from '@vicons/antd';
|
|
import { BasicForm, useForm } from '@/components/Form/index';
|
|
import { BasicTable, TableAction } from '@/components/Table';
|
|
import { usePermission } from '@/hooks/web/usePermission';
|
|
import { adaTableScrollX } from '@/utils/hotgo';
|
|
import { AddBlacklist, BanUser, Export, List, View } from '@/api/imLoginFailureLog';
|
|
import { imQueryTenantOptions, loadImQueryTenantOptions } from '@/views/imAdminQueryShared';
|
|
import { columns, loadOptions, schemas } from './model';
|
|
|
|
const message = useMessage();
|
|
const dialog = useDialog();
|
|
const { hasPermission } = usePermission();
|
|
const actionRef = ref();
|
|
const searchFormRef = ref<any>({});
|
|
const showDetail = ref(false);
|
|
const showBan = ref(false);
|
|
const submitting = ref(false);
|
|
const banReason = ref('');
|
|
const current = ref<Recordable>({});
|
|
const tenantSchema = schemas.value.find((item) => item.field === 'tenantId');
|
|
if (tenantSchema) tenantSchema.ifShow = () => true;
|
|
const actionColumn = reactive({
|
|
width: 260,
|
|
title: '操作',
|
|
key: 'action',
|
|
fixed: 'right',
|
|
render(record) {
|
|
return h(TableAction as any, {
|
|
style: 'button',
|
|
actions: [
|
|
{ label: '详情', auth: ['/imLoginFailureLog/view'], onClick: () => openDetail(record) },
|
|
{
|
|
label: 'IP黑名单',
|
|
type: 'warning',
|
|
auth: ['/imLoginFailureLog/addBlacklist'],
|
|
ifShow: () => !!record.ip,
|
|
onClick: () => addBlacklist(record),
|
|
},
|
|
{
|
|
label: '封禁用户',
|
|
type: 'error',
|
|
auth: ['/imLoginFailureLog/banUser'],
|
|
ifShow: () => Number(record.userId) > 0,
|
|
onClick: () => openBan(record),
|
|
},
|
|
],
|
|
});
|
|
},
|
|
});
|
|
const scrollX = computed(() => adaTableScrollX(columns, actionColumn.width));
|
|
const [register, { setFieldsValue }] = useForm({
|
|
gridProps: { cols: '1 s:1 m:2 l:3 xl:4 2xl:4' },
|
|
labelWidth: 90,
|
|
schemas,
|
|
});
|
|
const loadDataTable = async (res) => {
|
|
const params = { ...searchFormRef.value?.formModel, ...res };
|
|
if (!params.tenantId)
|
|
return { list: [], page: 1, pageCount: 0, totalCount: 0 };
|
|
return List(params);
|
|
};
|
|
function reloadTable() {
|
|
actionRef.value?.reload();
|
|
}
|
|
async function handleReset() {
|
|
const defaults: Recordable = {};
|
|
defaults.tenantId = imQueryTenantOptions.value[0]?.value;
|
|
await setFieldsValue(defaults);
|
|
reloadTable();
|
|
}
|
|
function handleExport() {
|
|
const params = { ...searchFormRef.value?.formModel };
|
|
if (!params.tenantId) {
|
|
message.warning('请选择商户');
|
|
return;
|
|
}
|
|
Export(params);
|
|
}
|
|
async function openDetail(record) {
|
|
current.value = await View({ tenantId: record.tenantId, id: record.id });
|
|
showDetail.value = true;
|
|
}
|
|
function addBlacklist(record) {
|
|
dialog.warning({
|
|
title: '加入IP黑名单',
|
|
content: `确认禁止 ${record.ip} 继续登录吗？`,
|
|
positiveText: '确认',
|
|
negativeText: '取消',
|
|
onPositiveClick: async () => {
|
|
await AddBlacklist({
|
|
tenantId: record.tenantId,
|
|
ip: record.ip,
|
|
remark: `登录失败日志 #${record.id}`,
|
|
});
|
|
message.success('已加入IP黑名单');
|
|
},
|
|
});
|
|
}
|
|
function openBan(record) {
|
|
current.value = record;
|
|
banReason.value = '';
|
|
showBan.value = true;
|
|
}
|
|
async function submitBan() {
|
|
if (!banReason.value.trim()) {
|
|
message.warning('请输入封禁原因');
|
|
return;
|
|
}
|
|
submitting.value = true;
|
|
try {
|
|
const res = await BanUser({
|
|
tenantId: current.value.tenantId,
|
|
userId: Number(current.value.userId),
|
|
reason: banReason.value.trim(),
|
|
});
|
|
message.success(`封禁命令已提交：${res?.commandId || ''}`);
|
|
showBan.value = false;
|
|
} finally {
|
|
submitting.value = false;
|
|
}
|
|
}
|
|
onMounted(async () => {
|
|
loadOptions();
|
|
await loadImQueryTenantOptions();
|
|
if (imQueryTenantOptions.value.length)
|
|
await setFieldsValue({ tenantId: imQueryTenantOptions.value[0].value });
|
|
else message.warning('暂无可用商户');
|
|
reloadTable();
|
|
});
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.detail-modal {
|
|
width: min(760px, 92vw);
|
|
}
|
|
.action-modal {
|
|
width: min(520px, 92vw);
|
|
}
|
|
</style>
|