seewe/seewis-hsl-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(projects): 新增日志管理页面

Browse Source
This commit is contained in:
xlsea
2025-11-20 10:01:06 +08:00
parent 18fd596183
commit 617eef0b49
18 changed files with 905 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/locales/langs/en-us.ts
+3 -1
View File
@@ -281,9 +281,11 @@ const local: App.I18n.Schema = {
'system_oss-config': 'OSS Config',
system_client: 'Client Management',
monitor: 'Monitor',
'social-callback': 'Social Callback',
monitor_logininfor: 'Login Log',
monitor_operlog: 'Operate Log',
monitor_cache: 'Cache Monitor',
'user-center': 'User Center',
'social-callback': 'Social Callback',
demo: 'Demo',
demo_demo: 'Demo Table',
demo_tree: 'Demo Tree',
src/locales/langs/zh-cn.ts
+3 -1
View File
@@ -278,8 +278,10 @@ const local: App.I18n.Schema = {
'system_oss-config': 'OSS 配置',
system_client: '客户端管理',
monitor: '系统监控',
'social-callback': '单点登录回调',
monitor_cache: '缓存监控',
monitor_logininfor: '登录日志',
monitor_operlog: '操作日志',
'social-callback': '单点登录回调',
'user-center': '个人中心',
demo: '测试',
demo_demo: '测试单表',
src/router/elegant/imports.ts
+2
View File
@@ -26,6 +26,8 @@ export const views: Record<LastLevelRouteKey, RouteComponent | (() => Promise<Ro
demo_tree: () => import("@/views/demo/tree/index.vue"),
home: () => import("@/views/home/index.vue"),
monitor_cache: () => import("@/views/monitor/cache/index.vue"),
monitor_logininfor: () => import("@/views/monitor/logininfor/index.vue"),
monitor_operlog: () => import("@/views/monitor/operlog/index.vue"),
system_client: () => import("@/views/system/client/index.vue"),
system_config: () => import("@/views/system/config/index.vue"),
system_dept: () => import("@/views/system/dept/index.vue"),
src/router/elegant/routes.ts
+18
View File
@@ -121,6 +121,24 @@ export const generatedRoutes: GeneratedRoute[] = [
title: 'monitor_cache',
i18nKey: 'route.monitor_cache'
}
},
{
name: 'monitor_logininfor',
path: '/monitor/logininfor',
component: 'view.monitor_logininfor',
meta: {
title: 'monitor_logininfor',
i18nKey: 'route.monitor_logininfor'
}
},
{
name: 'monitor_operlog',
path: '/monitor/operlog',
component: 'view.monitor_operlog',
meta: {
title: 'monitor_operlog',
i18nKey: 'route.monitor_operlog'
}
}
]
},
src/router/elegant/transform.ts
+2
View File
@@ -178,6 +178,8 @@ const routeMap: RouteMap = {
"login": "/login/:module(pwd-login|code-login|register|reset-pwd|bind-wechat)?",
"monitor": "/monitor",
"monitor_cache": "/monitor/cache",
"monitor_logininfor": "/monitor/logininfor",
"monitor_operlog": "/monitor/operlog",
"social-callback": "/social-callback",
"system": "/system",
"system_client": "/system/client",
src/typings/components.d.ts
Vendored
+2
View File
@@ -39,6 +39,7 @@ declare module 'vue' {
'IconMaterialSymbols:refreshRounded': typeof import('~icons/material-symbols/refresh-rounded')['default']
'IconMaterialSymbols:syncOutline': typeof import('~icons/material-symbols/sync-outline')['default']
'IconMaterialSymbols:uploadRounded': typeof import('~icons/material-symbols/upload-rounded')['default']
'IconMaterialSymbols:warningOutlineRounded': typeof import('~icons/material-symbols/warning-outline-rounded')['default']
IconMaterialSymbolsAdd: typeof import('~icons/material-symbols/add')['default']
IconMaterialSymbolsAddRounded: typeof import('~icons/material-symbols/add-rounded')['default']
IconMaterialSymbolsDeleteOutline: typeof import('~icons/material-symbols/delete-outline')['default']
@@ -75,6 +76,7 @@ declare module 'vue' {
NButton: typeof import('naive-ui')['NButton']
NCard: typeof import('naive-ui')['NCard']
NCheckbox: typeof import('naive-ui')['NCheckbox']
NCode: typeof import('naive-ui')['NCode']
NCollapse: typeof import('naive-ui')['NCollapse']
NCollapseItem: typeof import('naive-ui')['NCollapseItem']
NColorPicker: typeof import('naive-ui')['NColorPicker']
src/typings/elegant-router.d.ts
Vendored
+4
View File
@@ -32,6 +32,8 @@ declare module "@elegant-router/types" {
"login": "/login/:module(pwd-login|code-login|register|reset-pwd|bind-wechat)?";
"monitor": "/monitor";
"monitor_cache": "/monitor/cache";
"monitor_logininfor": "/monitor/logininfor";
"monitor_operlog": "/monitor/operlog";
"social-callback": "/social-callback";
"system": "/system";
"system_client": "/system/client";
@@ -123,6 +125,8 @@ declare module "@elegant-router/types" {
| "demo_tree"
| "home"
| "monitor_cache"
| "monitor_logininfor"
| "monitor_operlog"
| "system_client"
| "system_config"
| "system_dept"
src/views/monitor/logininfor/index.vue
+279
View File
@@ -0,0 +1,279 @@
<script setup lang="tsx">
import { ref } from 'vue';
import { NDivider } from 'naive-ui';
import {
fetchBatchDeleteLoginInfor,
fetchCleanLoginInfor,
fetchGetLoginInforList,
fetchUnlockLoginInfor
} from '@/service/api/monitor/login-infor';
import { useAppStore } from '@/store/modules/app';
import { useAuth } from '@/hooks/business/auth';
import { useDownload } from '@/hooks/business/download';
import { defaultTransform, useNaivePaginatedTable, useTableOperate } from '@/hooks/common/table';
import { useDict } from '@/hooks/business/dict';
import { getBrowserIcon, getOsIcon } from '@/utils/icon-tag-format';
import DictTag from '@/components/custom/dict-tag.vue';
import SvgIcon from '@/components/custom/svg-icon.vue';
import { $t } from '@/locales';
import ButtonIcon from '@/components/custom/button-icon.vue';
import LoginInforSearch from './modules/login-infor-search.vue';
import LoginInforViewDrawer from './modules/login-infor-view-drawer.vue';
defineOptions({
name: 'LoginInforList'
});
const appStore = useAppStore();
const { download } = useDownload();
const { hasAuth } = useAuth();
useDict('sys_common_status');
useDict('sys_device_type');
const searchParams = ref<Api.Monitor.LoginInforSearchParams>({
pageNum: 1,
pageSize: 10,
userName: null,
ipaddr: null,
status: null,
params: {}
});
const { columns, columnChecks, data, getData, getDataByPage, loading, mobilePagination, scrollX } =
useNaivePaginatedTable({
api: () => fetchGetLoginInforList(searchParams.value),
transform: response => defaultTransform(response),
onPaginationParamsChange: params => {
searchParams.value.pageNum = params.page;
searchParams.value.pageSize = params.pageSize;
},
columns: () => [
{
type: 'selection',
align: 'center',
width: 48
},
{
key: 'index',
title: $t('common.index'),
align: 'center',
width: 64,
render: (_, index) => index + 1
},
{
key: 'userName',
title: '用户账号',
align: 'center',
minWidth: 120
},
{
key: 'deviceType',
title: '设备类型',
align: 'center',
minWidth: 120,
render: row => {
return <DictTag size="small" value={row.deviceType} dict-code="sys_device_type" />;
}
},
{
key: 'ipaddr',
title: '登录IP地址',
align: 'center',
minWidth: 120
},
{
key: 'loginLocation',
title: '登录地点',
align: 'center',
minWidth: 120
},
{
key: 'browser',
title: '浏览器类型',
align: 'center',
minWidth: 120,
render: row => {
return (
<div class="flex items-center justify-center gap-2">
<SvgIcon icon={getBrowserIcon(row.browser)} />
{row.browser}
</div>
);
}
},
{
key: 'os',
title: '操作系统',
align: 'center',
ellipsis: {
tooltip: true
},
minWidth: 120,
render: row => {
const osName = row.os?.split(' or ')[0] ?? '';
return (
<div class="flex items-center justify-center gap-2">
<SvgIcon icon={getOsIcon(osName)} />
{osName}
</div>
);
}
},
{
key: 'status',
title: '登录状态',
align: 'center',
minWidth: 120,
render: row => {
return <DictTag size="small" value={row.status} dict-code="sys_common_status" />;
}
},
{
key: 'loginTime',
title: '访问时间',
align: 'center',
ellipsis: {
tooltip: true
},
minWidth: 120
},
{
key: 'operate',
title: $t('common.operate'),
align: 'center',
width: 130,
render: row => {
const viewBtn = () => {
return (
<ButtonIcon
type="primary"
text
icon="material-symbols:visibility-outline"
tooltipContent="详情"
onClick={() => view(row.infoId!)}
/>
);
};
const unlockBtn = () => {
return (
<>
<NDivider vertical />
<ButtonIcon
type="primary"
text
icon="material-symbols:lock-open-outline"
tooltipContent="解锁"
popconfirmContent={`确认解锁用户 ${row.userName} 吗？`}
onPositiveClick={() => handleUnlockLoginInfor(row.userName!)}
/>
</>
);
};
return (
<div class="flex-center gap-8px">
{viewBtn()}
{unlockBtn()}
</div>
);
}
}
]
});
const { drawerVisible, editingData, handleEdit, checkedRowKeys, onBatchDeleted } = useTableOperate(
data,
'infoId',
getData
);
async function handleBatchDelete() {
// request
const { error } = await fetchBatchDeleteLoginInfor(checkedRowKeys.value);
if (error) return;
onBatchDeleted();
}
async function view(infoId: CommonType.IdType) {
handleEdit(infoId);
}
async function handleExport() {
download('/monitor/logininfor/export', searchParams, `登录日志记录_${new Date().getTime()}.xlsx`);
}
async function handleCleanLoginInfor() {
window.$dialog?.error({
title: '提示',
content: '是否确认清空所有登录日志数据项?',
positiveText: '确认清空',
negativeText: '取消',
onPositiveClick: async () => {
const { error } = await fetchCleanLoginInfor();
if (error) return;
window.$message?.success('清空成功');
await getData();
}
});
}
async function handleUnlockLoginInfor(username: string) {
const { error } = await fetchUnlockLoginInfor(username);
if (error) return;
window.$message?.success('解锁成功');
await getDataByPage();
}
</script>
<template>
<div class="min-h-500px flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
<LoginInforSearch v-model:model="searchParams" @search="getDataByPage" />
<NCard title="登录日志列表" :bordered="false" size="small" class="card-wrapper sm:flex-1-hidden">
<template #header-extra>
<TableHeaderOperation
v-model:columns="columnChecks"
:disabled-delete="checkedRowKeys.length === 0"
:loading="loading"
:show-add="false"
:show-delete="hasAuth('monitor:logininfor:remove')"
:show-export="hasAuth('monitor:logininfor:export')"
@delete="handleBatchDelete"
@export="handleExport"
@refresh="getData"
>
<template #prefix>
<NButton
v-if="hasAuth('monitor:logininfor:remove')"
type="error"
ghost
size="small"
@click="handleCleanLoginInfor"
>
<template #icon>
<icon-material-symbols:warning-outline-rounded />
</template>
清空
</NButton>
</template>
</TableHeaderOperation>
</template>
<NDataTable
v-model:checked-row-keys="checkedRowKeys"
:columns="columns"
:data="data"
size="small"
:flex-height="!appStore.isMobile"
:scroll-x="scrollX"
:loading="loading"
remote
:row-key="row => row.infoId"
:pagination="mobilePagination"
class="sm:h-full"
/>
<LoginInforViewDrawer v-model:visible="drawerVisible" :row-data="editingData" />
</NCard>
</div>
</template>
<style scoped></style>
src/views/monitor/logininfor/modules/login-infor-search.vue
+101
View File
@@ -0,0 +1,101 @@
<script setup lang="ts">
import { ref, toRaw } from 'vue';
import { jsonClone } from '@sa/utils';
import { useNaiveForm } from '@/hooks/common/form';
import { $t } from '@/locales';
defineOptions({
name: 'LoginInforSearch'
});
interface Emits {
(e: 'search'): void;
}
const emit = defineEmits<Emits>();
const { formRef, validate, restoreValidation } = useNaiveForm();
const dateRangeLoginTime = ref<[string, string] | null>(null);
const model = defineModel<Api.Monitor.LoginInforSearchParams>('model', { required: true });
const defaultModel = jsonClone(toRaw(model.value));
function onDateRangeLoginTimeUpdate(value: [string, string] | null) {
if (value?.length) {
model.value.params!.beginTime = value[0];
model.value.params!.endTime = value[1];
}
}
function resetModel() {
dateRangeLoginTime.value = null;
Object.assign(model.value, defaultModel);
}
async function reset() {
await restoreValidation();
resetModel();
emit('search');
}
async function search() {
await validate();
emit('search');
}
</script>
<template>
<NCard :bordered="false" size="small" class="card-wrapper">
<NCollapse>
<NCollapseItem :title="$t('common.search')" name="user-search">
<NForm ref="formRef" :model="model" label-placement="left" :label-width="80">
<NGrid responsive="screen" item-responsive>
<NFormItemGi span="24 s:12 m:6" label="IP地址" path="ipaddr" class="pr-24px">
<NInput v-model:value="model.ipaddr" placeholder="请输入登录IP地址" />
</NFormItemGi>
<NFormItemGi span="24 s:12 m:6" label="用户账号" path="userName" class="pr-24px">
<NInput v-model:value="model.userName" placeholder="请输入用户账号" />
</NFormItemGi>
<NFormItemGi span="24 s:12 m:6" label="登录状态" path="status" class="pr-24px">
<DictSelect
v-model:value="model.status"
placeholder="请选择登录状态"
dict-code="sys_common_status"
clearable
/>
</NFormItemGi>
<NFormItemGi span="24 s:12 m:6" label="登录时间" path="loginTime" class="pr-24px">
<NDatePicker
v-model:formatted-value="dateRangeLoginTime"
type="datetimerange"
value-format="yyyy-MM-dd HH:mm:ss"
clearable
@update:formatted-value="onDateRangeLoginTimeUpdate"
/>
</NFormItemGi>
<NFormItemGi span="24" class="pr-24px">
<NSpace class="w-full" justify="end">
<NButton @click="reset">
<template #icon>
<icon-ic-round-refresh class="text-icon" />
</template>
{{ $t('common.reset') }}
</NButton>
<NButton type="primary" ghost @click="search">
<template #icon>
<icon-ic-round-search class="text-icon" />
</template>
{{ $t('common.search') }}
</NButton>
</NSpace>
</NFormItemGi>
</NGrid>
</NForm>
</NCollapseItem>
</NCollapse>
</NCard>
</template>
<style scoped></style>
src/views/monitor/logininfor/modules/login-infor-view-drawer.vue
+71
View File
@@ -0,0 +1,71 @@
<script setup lang="ts">
import { getBrowserIcon, getOsIcon } from '@/utils/icon-tag-format';
import { $t } from '@/locales';
defineOptions({
name: 'LoginInforViewDrawer'
});
interface Props {
/** the edit row data */
rowData: Api.Monitor.LoginInfor | null;
}
const props = defineProps<Props>();
const visible = defineModel<boolean>('visible', {
default: false
});
const title = '登录信息详情';
function closeDrawer() {
visible.value = false;
}
</script>
<template>
<NDrawer v-model:show="visible" :title="title" display-directive="show" :width="800" class="max-w-90%">
<NDrawerContent :title="title" :native-scrollbar="false" closable>
<NDescriptions label-placement="left" :column="1" size="small" bordered>
<NDescriptionsItem label="账号信息">
{{ props.rowData?.userName }} | {{ props.rowData?.ipaddr }} | {{ props.rowData?.loginLocation }}
</NDescriptionsItem>
<NDescriptionsItem label="客户端">
{{ props.rowData?.clientKey }}
</NDescriptionsItem>
<NDescriptionsItem label="设备类型">
<DictTag size="small" :value="props.rowData?.deviceType" dict-code="sys_device_type" />
</NDescriptionsItem>
<NDescriptionsItem label="浏览器类型">
<div class="flex items-center gap-2">
<SvgIcon :icon="getBrowserIcon(props.rowData?.browser ?? '')" />
{{ props.rowData?.browser }}
</div>
</NDescriptionsItem>
<NDescriptionsItem label="操作系统">
<div class="flex items-center gap-2">
<SvgIcon :icon="getOsIcon(props.rowData?.os ?? '')" />
{{ props.rowData?.os }}
</div>
</NDescriptionsItem>
<NDescriptionsItem label="登录状态">
<DictTag size="small" :value="props.rowData?.status" dict-code="sys_common_status" />
</NDescriptionsItem>
<NDescriptionsItem label="提示消息">
{{ props.rowData?.msg }}
</NDescriptionsItem>
<NDescriptionsItem label="访问时间">
{{ props.rowData?.loginTime }}
</NDescriptionsItem>
</NDescriptions>
<template #footer>
<NSpace :size="16">
<NButton @click="closeDrawer">{{ $t('common.close') }}</NButton>
</NSpace>
</template>
</NDrawerContent>
</NDrawer>
</template>
<style scoped></style>
src/views/monitor/operlog/index.vue
+225
View File
@@ -0,0 +1,225 @@
<script setup lang="tsx">
import { ref } from 'vue';
import { NButton } from 'naive-ui';
import { fetchBatchDeleteOperLog, fetchCleanOperLog, fetchGetOperLogList } from '@/service/api/monitor/oper-log';
import { useAppStore } from '@/store/modules/app';
import { useAuth } from '@/hooks/business/auth';
import { useDownload } from '@/hooks/business/download';
import { defaultTransform, useNaivePaginatedTable, useTableOperate } from '@/hooks/common/table';
import { useDict } from '@/hooks/business/dict';
import DictTag from '@/components/custom/dict-tag.vue';
import { $t } from '@/locales';
import ButtonIcon from '@/components/custom/button-icon.vue';
import OperLogViewDrawer from './modules/oper-log-view-drawer.vue';
import OperLogSearch from './modules/oper-log-search.vue';
defineOptions({
name: 'OperLogList'
});
useDict('sys_common_status');
useDict('sys_oper_type');
const appStore = useAppStore();
const { download } = useDownload();
const { hasAuth } = useAuth();
const searchParams = ref<Api.Monitor.OperLogSearchParams>({
pageNum: 1,
pageSize: 10,
title: null,
businessType: null,
operName: null,
operIp: null,
status: null,
params: {}
});
const { columns, columnChecks, data, getData, getDataByPage, loading, mobilePagination, scrollX } =
useNaivePaginatedTable({
api: () => fetchGetOperLogList(searchParams.value),
transform: response => defaultTransform(response),
onPaginationParamsChange: params => {
searchParams.value.pageNum = params.page;
searchParams.value.pageSize = params.pageSize;
},
columns: () => [
{
type: 'selection',
align: 'center',
width: 48
},
{
key: 'index',
title: $t('common.index'),
align: 'center',
width: 64,
render: (_, index) => index + 1
},
{
key: 'title',
title: '系统模块',
align: 'center',
minWidth: 120
},
{
key: 'businessType',
title: '操作类型',
align: 'center',
minWidth: 120,
render(row) {
return <DictTag size="small" value={row.businessType} dictCode="sys_oper_type" />;
}
},
{
key: 'operName',
title: '操作人员',
align: 'center',
minWidth: 120
},
{
key: 'operIp',
title: '操作IP',
align: 'center',
minWidth: 120
},
{
key: 'operLocation',
title: '操作地点',
align: 'center',
minWidth: 120
},
{
key: 'status',
title: '操作状态',
align: 'center',
minWidth: 120,
render(row) {
return <DictTag size="small" value={row.status} dictCode="sys_common_status" />;
}
},
{
key: 'operTime',
title: '操作时间',
align: 'center',
minWidth: 120
},
{
key: 'costTime',
title: '消耗时间',
align: 'center',
minWidth: 120,
render(row) {
return `${row.costTime} ms`;
}
},
{
key: 'operate',
title: $t('common.operate'),
align: 'center',
width: 130,
render: row => {
const viewBtn = () => {
return (
<ButtonIcon
type="primary"
text
icon="material-symbols:visibility-outline"
tooltipContent="详情"
onClick={() => view(row.operId!)}
/>
);
};
return <div class="flex-center gap-8px">{viewBtn()}</div>;
}
}
]
});
const { drawerVisible, editingData, handleEdit, checkedRowKeys, onBatchDeleted } = useTableOperate(
data,
'operId',
getData
);
async function handleBatchDelete() {
// request
const { error } = await fetchBatchDeleteOperLog(checkedRowKeys.value);
if (error) return;
onBatchDeleted();
}
async function view(operId: CommonType.IdType) {
handleEdit(operId);
}
async function handleExport() {
download('/monitor/operlog/export', searchParams, `操作日志_${new Date().getTime()}.xlsx`);
}
async function handleCleanOperLog() {
window.$dialog?.error({
title: '提示',
content: '是否确认清空所有操作日志数据项?',
positiveText: '确认清空',
negativeText: '取消',
onPositiveClick: async () => {
const { error } = await fetchCleanOperLog();
if (error) return;
window.$message?.success('清空成功');
await getData();
}
});
}
</script>
<template>
<div class="min-h-500px flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
<OperLogSearch v-model:model="searchParams" @search="getDataByPage" />
<NCard title="操作日志列表" :bordered="false" size="small" class="card-wrapper sm:flex-1-hidden">
<template #header-extra>
<TableHeaderOperation
v-model:columns="columnChecks"
:disabled-delete="checkedRowKeys.length === 0"
:loading="loading"
:show-add="false"
:show-delete="hasAuth('monitor:operlog:remove')"
:show-export="hasAuth('monitor:operlog:export')"
@delete="handleBatchDelete"
@export="handleExport"
@refresh="getData"
>
<template #prefix>
<NButton
v-if="hasAuth('monitor:operlog:remove')"
type="error"
ghost
size="small"
@click="handleCleanOperLog"
>
<template #icon>
<icon-material-symbols:warning-outline-rounded />
</template>
清空
</NButton>
</template>
</TableHeaderOperation>
</template>
<NDataTable
v-model:checked-row-keys="checkedRowKeys"
:columns="columns"
:data="data"
size="small"
:flex-height="!appStore.isMobile"
:scroll-x="scrollX"
:loading="loading"
remote
:row-key="row => row.operId"
:pagination="mobilePagination"
class="sm:h-full"
/>
<OperLogViewDrawer v-model:visible="drawerVisible" :row-data="editingData" />
</NCard>
</div>
</template>
<style scoped></style>
src/views/monitor/operlog/modules/oper-log-search.vue
+112
View File
@@ -0,0 +1,112 @@
<script setup lang="ts">
import { ref, toRaw } from 'vue';
import { jsonClone } from '@sa/utils';
import { useNaiveForm } from '@/hooks/common/form';
import { $t } from '@/locales';
defineOptions({
name: 'OperLogSearch'
});
interface Emits {
(e: 'search'): void;
}
const emit = defineEmits<Emits>();
const { formRef, validate, restoreValidation } = useNaiveForm();
const dateRangeOperTime = ref<[string, string] | null>(null);
const model = defineModel<Api.Monitor.OperLogSearchParams>('model', { required: true });
const defaultModel = jsonClone(toRaw(model.value));
function onDateRangeOperTimeUpdate(value: [string, string] | null) {
if (value?.length) {
model.value.params!.beginTime = value[0];
model.value.params!.endTime = value[1];
}
}
function resetModel() {
dateRangeOperTime.value = null;
Object.assign(model.value, defaultModel);
}
async function reset() {
await restoreValidation();
resetModel();
emit('search');
}
async function search() {
await validate();
emit('search');
}
</script>
<template>
<NCard :bordered="false" size="small" class="card-wrapper">
<NCollapse>
<NCollapseItem :title="$t('common.search')" name="user-search">
<NForm ref="formRef" :model="model" label-placement="left" :label-width="80">
<NGrid responsive="screen" item-responsive>
<NFormItemGi span="24 s:12 m:6" label="系统模块" path="title" class="pr-24px">
<NInput v-model:value="model.title" placeholder="请输入系统模块" />
</NFormItemGi>
<NFormItemGi span="24 s:12 m:6" label="操作类型" path="businessType" class="pr-24px">
<DictSelect
v-model:value="model.businessType"
placeholder="请选择操作类型"
dict-code="sys_oper_type"
clearable
/>
</NFormItemGi>
<NFormItemGi span="24 s:12 m:6" label="操作人员" path="operName" class="pr-24px">
<NInput v-model:value="model.operName" placeholder="请输入操作人员" />
</NFormItemGi>
<NFormItemGi span="24 s:12 m:6" label="操作IP" path="operIp" class="pr-24px">
<NInput v-model:value="model.operIp" placeholder="请输入操作IP" />
</NFormItemGi>
<NFormItemGi span="24 s:12 m:8" label="操作状态" path="status" class="pr-24px">
<DictSelect
v-model:value="model.status"
placeholder="请选择操作状态"
dict-code="sys_common_status"
clearable
/>
</NFormItemGi>
<NFormItemGi span="24 s:12 m:8" label="操作时间" path="operTime" class="pr-24px">
<NDatePicker
v-model:formatted-value="dateRangeOperTime"
type="datetimerange"
value-format="yyyy-MM-dd HH:mm:ss"
clearable
@update:formatted-value="onDateRangeOperTimeUpdate"
/>
</NFormItemGi>
<NFormItemGi span="24 s:12 m:8" class="pr-24px">
<NSpace class="w-full" justify="end">
<NButton @click="reset">
<template #icon>
<icon-ic-round-refresh class="text-icon" />
</template>
{{ $t('common.reset') }}
</NButton>
<NButton type="primary" ghost @click="search">
<template #icon>
<icon-ic-round-search class="text-icon" />
</template>
{{ $t('common.search') }}
</NButton>
</NSpace>
</NFormItemGi>
</NGrid>
</NForm>
</NCollapseItem>
</NCollapse>
</NCard>
</template>
<style scoped></style>
src/views/monitor/operlog/modules/oper-log-view-drawer.vue
+73
View File
@@ -0,0 +1,73 @@
<script setup lang="tsx">
import { NDescriptions, NDescriptionsItem, NTag } from 'naive-ui';
import { getRequestMethodTagType } from '@/utils/icon-tag-format';
import { $t } from '@/locales';
import DictTag from '@/components/custom/dict-tag.vue';
defineOptions({
name: 'OperLogViewDrawer'
});
interface Props {
/** the edit row data */
rowData: Api.Monitor.OperLog | null;
}
const props = defineProps<Props>();
const visible = defineModel<boolean>('visible', {
default: false
});
const title = '操作日志详情';
function closeDrawer() {
visible.value = false;
}
</script>
<template>
<NDrawer v-model:show="visible" :title="title" display-directive="show" :width="800" class="max-w-90%">
<NDrawerContent :title="title" :native-scrollbar="false" closable>
<NDescriptions label-class="min-w-100px" :column="1" size="small" bordered label-placement="left">
<NDescriptionsItem label="日志编号">{{ props.rowData?.operId }}</NDescriptionsItem>
<NDescriptionsItem label="操作状态">
<DictTag size="small" :value="props.rowData?.status" dict-code="sys_common_status" />
</NDescriptionsItem>
<NDescriptionsItem label="系统模块">
<NSpace>
<NTag class="m-1" size="small" type="primary">{{ props.rowData?.title }}模块</NTag>
<DictTag size="small" :value="props.rowData?.businessType" dict-code="sys_oper_type" />
</NSpace>
</NDescriptionsItem>
<NDescriptionsItem label="操作信息">
{{ props.rowData?.operName }} | {{ props.rowData?.deptName }} | {{ props.rowData?.operIp }} |
{{ props.rowData?.operLocation }}
</NDescriptionsItem>
<NDescriptionsItem label="请求信息">
<NSpace>
<NTag size="small" :type="getRequestMethodTagType(props.rowData?.requestMethod ?? '')">
{{ `${props.rowData?.requestMethod?.toUpperCase()}请求` }}
</NTag>
{{ props.rowData?.operUrl }}
</NSpace>
</NDescriptionsItem>
<NDescriptionsItem label="操作时间">{{ props.rowData?.operTime }}</NDescriptionsItem>
<NDescriptionsItem label="请求参数">
<JsonPreview :code="props.rowData?.operParam" />
</NDescriptionsItem>
<NDescriptionsItem label="返回参数">
<JsonPreview :code="props.rowData?.jsonResult" />
</NDescriptionsItem>
<NDescriptionsItem label="消耗时间">
{{ `${props.rowData?.costTime} ms` }}
</NDescriptionsItem>
<NDescriptionsItem label="错误消息">{{ props.rowData?.errorMsg }}</NDescriptionsItem>
</NDescriptions>
<template #footer>
<NSpace :size="16">
<NButton @click="closeDrawer">{{ $t('common.close') }}</NButton>
</NSpace>
</template>
</NDrawerContent>
</NDrawer>
</template>
src/views/system/client/index.vue
+2 -1
View File
@@ -56,7 +56,8 @@ const { columns, columnChecks, data, getData, getDataByPage, loading, mobilePagi
key: 'index',
title: $t('common.index'),
align: 'center',
width: 64
width: 64,
render: (_, index) => index + 1
},
{
key: 'clientId',
src/views/system/oss-config/index.vue
+2 -1
View File
@@ -53,7 +53,8 @@ const { columns, columnChecks, data, getData, getDataByPage, loading, mobilePagi
key: 'index',
title: $t('common.index'),
align: 'center',
width: 64
width: 64,
render: (_, index) => index + 1
},
{
key: 'configKey',
src/views/system/oss/index.vue
+2 -1
View File
@@ -60,7 +60,8 @@ const { columns, columnChecks, data, getData, getDataByPage, loading, mobilePagi
key: 'index',
title: $t('common.index'),
align: 'center',
width: 64
width: 64,
render: (_, index) => index + 1
},
{
key: 'ossId',
src/views/system/post/index.vue
+2 -1
View File
@@ -51,7 +51,8 @@ const { columns, columnChecks, data, getData, getDataByPage, loading, mobilePagi
key: 'index',
title: $t('common.index'),
align: 'center',
width: 64
width: 64,
render: (_, index) => index + 1
},
{
key: 'postCode',
src/views/system/role/index.vue
+2 -1
View File
@@ -58,7 +58,8 @@ const { columns, columnChecks, data, getData, getDataByPage, loading, mobilePagi
key: 'index',
title: $t('common.index'),
align: 'center',
width: 64
width: 64,
render: (_, index) => index + 1
},
{
key: 'roleName',