日志管理、在线用户
This commit is contained in:
parent
c5ff7daad7
commit
b476eb1c59
@ -72,6 +72,7 @@ export function useColumns(propsRef: ComputedRef<BasicTableProps>) {
|
||||
.map((column) => {
|
||||
//默认 ellipsis 为true
|
||||
column.ellipsis = typeof column.ellipsis === 'undefined' ? { tooltip: true } : false;
|
||||
column.align = typeof column.align === 'undefined' ?'center':column.align ;
|
||||
const { edit, title, helpMessage, helpMessageProps } = column;
|
||||
// 支持 helpMessage
|
||||
if (helpMessage) {
|
||||
|
||||
102
src/views/logger/emailLog/columns.ts
Normal file
102
src/views/logger/emailLog/columns.ts
Normal file
@ -0,0 +1,102 @@
|
||||
import { h } from 'vue';
|
||||
export const columns = [
|
||||
{
|
||||
type: 'selection',
|
||||
width: 50,
|
||||
fixed:"left"
|
||||
},
|
||||
{
|
||||
title: 'ID',
|
||||
key: 'id',
|
||||
fixed: 'left',
|
||||
width: 50,
|
||||
},
|
||||
{
|
||||
title: '日志标题',
|
||||
key: 'title',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '日志类型',
|
||||
key: 'type',
|
||||
width: 100,
|
||||
render(record) {
|
||||
let typeText = '';
|
||||
switch (record.type) {
|
||||
case 1:
|
||||
typeText = '登录';
|
||||
break;
|
||||
case 2:
|
||||
typeText = '注册';
|
||||
break;
|
||||
case 3:
|
||||
typeText = '找回密码';
|
||||
break;
|
||||
case 4:
|
||||
typeText = '业务';
|
||||
break;
|
||||
case 5:
|
||||
typeText = '其他';
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
return h('span', typeText || '-');
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '模板编号',
|
||||
key: 'code',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '接收人邮箱',
|
||||
key: 'receiveEmail',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '接收人类型',
|
||||
key: 'status',
|
||||
width: 100,
|
||||
render(record) {
|
||||
let typeText = '';
|
||||
switch (record.receiveType) {
|
||||
case 1:
|
||||
typeText = '系统用户';
|
||||
break;
|
||||
case 2:
|
||||
typeText = '会员用户';
|
||||
break;
|
||||
case 3:
|
||||
typeText = '其他';
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
return h('span', typeText || '-');
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '请求耗时',
|
||||
key: 'consumeTime',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '日志状态',
|
||||
key: 'status',
|
||||
width: 100,
|
||||
render(record) {
|
||||
return h('span', record.status === 1 ? '已读' : '未读');
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '创建人',
|
||||
key: 'createUser',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
key: 'createTime',
|
||||
width: 180,
|
||||
}
|
||||
];
|
||||
154
src/views/logger/emailLog/edit.vue
Normal file
154
src/views/logger/emailLog/edit.vue
Normal file
@ -0,0 +1,154 @@
|
||||
<template>
|
||||
<basicModal @register="modalRegister" ref="modalRef" class="basicModal basicFormModal">
|
||||
<template #default>
|
||||
<n-descriptions class="margin-top" :column="2" bordered :labelStyle="{ width: '120px' }" label-placement="left">
|
||||
<n-descriptions-item label="日志标题:">{{ formData.title }}</n-descriptions-item>
|
||||
<n-descriptions-item label="日志类型:">{{ getTyepText(formData.type) }}</n-descriptions-item>
|
||||
<n-descriptions-item label="模板编号:">{{ formData.code }}</n-descriptions-item>
|
||||
<n-descriptions-item label="接收人邮箱:">{{ formData.receiveEmail }}</n-descriptions-item>
|
||||
<n-descriptions-item label="接收人类型:">{{
|
||||
getReviceType(formData.receiveType)
|
||||
}}</n-descriptions-item>
|
||||
<n-descriptions-item label="请求耗时:">{{ formData.consumeTime }}s</n-descriptions-item>
|
||||
<n-descriptions-item label="业务类型:">{{
|
||||
formData.bizType ? (formData.bizType == 1 ? '订单' : '其他') : ''
|
||||
}}</n-descriptions-item>
|
||||
<n-descriptions-item label="业务ID:">{{ formData.bizId }}</n-descriptions-item>
|
||||
<n-descriptions-item label="日志状态:">{{
|
||||
formData.status == 1 ? '已读' : '未读'
|
||||
}}</n-descriptions-item>
|
||||
<n-descriptions-item label="请求状态">
|
||||
{{ formData.status ? '失败' : '成功' }}
|
||||
</n-descriptions-item>
|
||||
<n-descriptions-item label="业务内容" :span="3">
|
||||
{{ formData.bizContent }}
|
||||
</n-descriptions-item>
|
||||
<n-descriptions-item label="请求参数" :span="3">
|
||||
{{ formData.param }}
|
||||
</n-descriptions-item>
|
||||
<n-descriptions-item label="返回结果" :span="3">
|
||||
{{ formData.result }}
|
||||
</n-descriptions-item>
|
||||
<n-descriptions-item label="错误描述" :span="3">
|
||||
{{ formData.error }}
|
||||
</n-descriptions-item>
|
||||
</n-descriptions>
|
||||
</template>
|
||||
<template #action>
|
||||
<n-button @click="handleClose">取消</n-button>
|
||||
</template>
|
||||
</basicModal>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { getEmailLogDetail } from '@/api/logger/emailLog';
|
||||
import { onMounted, ref } from 'vue';
|
||||
import { useModal } from '@/components/Modal';
|
||||
|
||||
/**
|
||||
* 定义参数变量
|
||||
*/
|
||||
const emit = defineEmits(['success', 'update:visible']);
|
||||
const formData = ref({});
|
||||
const [modalRegister, { openModal }] = useModal({
|
||||
title: '邮件日志详情',
|
||||
subBtuText: '确定',
|
||||
width: 800,
|
||||
});
|
||||
|
||||
/**
|
||||
* 定义接收的参数
|
||||
*/
|
||||
const props = defineProps({
|
||||
visible: {
|
||||
type: Boolean,
|
||||
required: true,
|
||||
default: false,
|
||||
},
|
||||
emailLogId: {
|
||||
type: Number,
|
||||
required: true,
|
||||
default: 0,
|
||||
},
|
||||
});
|
||||
|
||||
/**
|
||||
* 关闭窗体
|
||||
*/
|
||||
const handleClose = () => {
|
||||
emit('update:visible', false);
|
||||
};
|
||||
|
||||
/**
|
||||
* 设置表单数据
|
||||
*/
|
||||
const setFormData = async () => {
|
||||
const data = await getEmailLogDetail(props.emailLogId);
|
||||
formData.value = data;
|
||||
};
|
||||
/**
|
||||
* 获取接收人类型描述
|
||||
*/
|
||||
const getReviceType = (type) => {
|
||||
let typeText = '';
|
||||
switch (type) {
|
||||
case 1:
|
||||
typeText = '系统用户';
|
||||
break;
|
||||
case 2:
|
||||
typeText = '会员用户';
|
||||
break;
|
||||
case 3:
|
||||
typeText = '其他';
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
return typeText;
|
||||
};
|
||||
|
||||
/**
|
||||
* 获取日志类型描述
|
||||
* @param type 类型
|
||||
*/
|
||||
const getTyepText = (type) => {
|
||||
let typeText = '';
|
||||
switch (type) {
|
||||
case 1:
|
||||
typeText = '登录';
|
||||
break;
|
||||
case 2:
|
||||
typeText = '注册';
|
||||
break;
|
||||
case 3:
|
||||
typeText = '找回密码';
|
||||
break;
|
||||
case 4:
|
||||
typeText = '业务';
|
||||
break;
|
||||
case 5:
|
||||
typeText = '其他';
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
return typeText;
|
||||
};
|
||||
|
||||
/**
|
||||
* 钩子函数
|
||||
*/
|
||||
onMounted(() => {
|
||||
if (props.emailLogId) {
|
||||
setFormData();
|
||||
}
|
||||
});
|
||||
//导出方法
|
||||
defineExpose({
|
||||
openModal,
|
||||
});
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
:deep(.n-descriptions__body .n-descriptions__table .n-descriptions__cell) {
|
||||
word-break: break-all;
|
||||
}
|
||||
</style>
|
||||
162
src/views/logger/emailLog/index.vue
Normal file
162
src/views/logger/emailLog/index.vue
Normal file
@ -0,0 +1,162 @@
|
||||
<template>
|
||||
<div>
|
||||
<n-card :bordered="false" class="pt-3 mb-3 proCard">
|
||||
<BasicForm @register="register" @submit="handleSubmit" @reset="handleReset">
|
||||
<template #statusSlot="{ model, field }">
|
||||
<n-input v-model:value="model[field]" />
|
||||
</template>
|
||||
</BasicForm>
|
||||
</n-card>
|
||||
<n-card :bordered="false" class="proCard">
|
||||
<BasicTable :columns="columns" :request="loadDataTable" :row-key="(row) => row.id" ref="basicTableRef"
|
||||
:actionColumn="actionColumn" @update:checked-row-keys="onCheckedRow" :autoScrollX="true">
|
||||
<template #tableTitle>
|
||||
<n-space>
|
||||
<n-button type="error" @click="handleDelete" :disabled="!rowKeys.length"
|
||||
v-perm="['sys:emailLog:batchDelete']">
|
||||
<template #icon>
|
||||
<n-icon>
|
||||
<DeleteOutlined />
|
||||
</n-icon>
|
||||
</template>
|
||||
删除
|
||||
</n-button>
|
||||
</n-space>
|
||||
</template>
|
||||
</BasicTable>
|
||||
</n-card>
|
||||
<editDialog ref="createModalRef" :emailLogId="emailLogId" v-if="editVisible" v-model:visible="editVisible" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { h, nextTick, reactive, ref, unref } from 'vue';
|
||||
import { useMessage, useDialog } from 'naive-ui';
|
||||
import { TableAction } from '@/components/Table';
|
||||
import { BasicForm, useForm } from '@/components/Form/index';
|
||||
import { getEmailLogList, emailLogDelete, emailLogBatchDelete } from '@/api/logger/emailLog';
|
||||
import { columns } from './columns';
|
||||
import { DeleteOutlined, EyeOutlined } from '@vicons/antd';
|
||||
import editDialog from './edit.vue';
|
||||
import { basicModal, useModal } from '@/components/Modal';
|
||||
import { schemas } from './querySchemas';
|
||||
import { renderIcon } from '@/utils';
|
||||
|
||||
const message = useMessage();
|
||||
const dialog = useDialog()
|
||||
const basicTableRef = ref();
|
||||
const createModalRef = ref();
|
||||
const editVisible = ref(false);
|
||||
const emailLogId = ref(0);
|
||||
const rowKeys = ref([]);
|
||||
|
||||
const showModal = ref(false);
|
||||
const formParams = reactive({
|
||||
title: '',
|
||||
bizType: '',
|
||||
type: '',
|
||||
status: '',
|
||||
});
|
||||
|
||||
const actionColumn = reactive({
|
||||
width: 200,
|
||||
title: '操作',
|
||||
align: 'center',
|
||||
key: 'action',
|
||||
fixed: 'right',
|
||||
render(record) {
|
||||
return h(TableAction as any, {
|
||||
style: 'button',
|
||||
actions: [
|
||||
{
|
||||
label: '详情',
|
||||
icon: renderIcon(EyeOutlined),
|
||||
type: 'info',
|
||||
onClick: handleDetail.bind(null, record),
|
||||
auth: ['sys:emailLog:detail'],
|
||||
},
|
||||
{
|
||||
label: '删除',
|
||||
icon: renderIcon(DeleteOutlined),
|
||||
type: 'error',
|
||||
onClick: handleDelete.bind(null, record),
|
||||
auth: ['sys:emailLog:delete'],
|
||||
},
|
||||
],
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
function addTable() {
|
||||
showModal.value = true;
|
||||
}
|
||||
|
||||
const loadDataTable = async (res) => {
|
||||
const result = await getEmailLogList({ ...formParams, ...res });
|
||||
return result;
|
||||
};
|
||||
|
||||
function onCheckedRow(keys) {
|
||||
rowKeys.value = keys;
|
||||
}
|
||||
|
||||
function reloadTable(noRefresh = '') {
|
||||
basicTableRef.value.reload(noRefresh ? {} : { pageNo: 1 });
|
||||
}
|
||||
|
||||
function handleSubmit(values: Recordable) {
|
||||
for (const key in formParams) {
|
||||
formParams[key] = '';
|
||||
}
|
||||
for (const key in values) {
|
||||
formParams[key] = values[key];
|
||||
}
|
||||
reloadTable();
|
||||
}
|
||||
|
||||
function handleReset(values: Recordable) {
|
||||
for (const key in formParams) {
|
||||
formParams[key] = '';
|
||||
}
|
||||
for (const key in values) {
|
||||
formParams[key] = values[key];
|
||||
}
|
||||
reloadTable();
|
||||
}
|
||||
|
||||
const [register, { }] = useForm({
|
||||
gridProps: { cols: '1 s:1 m:2 l:3 xl:4 2xl:4' },
|
||||
labelWidth: 80,
|
||||
schemas,
|
||||
});
|
||||
|
||||
/**
|
||||
* 执行查看
|
||||
*/
|
||||
async function handleDetail(record: Recordable) {
|
||||
emailLogId.value = record.id;
|
||||
editVisible.value = true;
|
||||
await nextTick();
|
||||
createModalRef.value.openModal();
|
||||
}
|
||||
/**
|
||||
* 执行删除
|
||||
* @param id 参数
|
||||
*/
|
||||
async function handleDelete(record) {
|
||||
dialog.warning({
|
||||
title: '提示',
|
||||
content: '确定要删除？',
|
||||
positiveText: '确定',
|
||||
negativeText: '取消',
|
||||
onPositiveClick: async () => {
|
||||
record.id ? await emailLogDelete(record.id) : await emailLogBatchDelete(rowKeys.value);
|
||||
message.success('删除成功');
|
||||
reloadTable();
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
72
src/views/logger/emailLog/querySchemas.ts
Normal file
72
src/views/logger/emailLog/querySchemas.ts
Normal file
@ -0,0 +1,72 @@
|
||||
import { FormSchema } from '@/components/Form/index';
|
||||
export const schemas: FormSchema[] = [
|
||||
{
|
||||
field: 'title',
|
||||
component: 'NInput',
|
||||
label: '短信标题',
|
||||
componentProps: {
|
||||
placeholder: '请输入短信标题',
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'receiveType',
|
||||
component: 'NSelect',
|
||||
label: '接收类型',
|
||||
componentProps: {
|
||||
placeholder: '请选择接收类型',
|
||||
clearable: true,
|
||||
options: [
|
||||
{
|
||||
label: '系统用户',
|
||||
value: '1',
|
||||
},
|
||||
{
|
||||
label: '会员用户',
|
||||
value: '2',
|
||||
},
|
||||
{
|
||||
label: '其他',
|
||||
value: '3',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'bizType',
|
||||
component: 'NSelect',
|
||||
label: '业务类型',
|
||||
componentProps: {
|
||||
placeholder: '请选择业务类型',
|
||||
clearable: true,
|
||||
options: [
|
||||
{
|
||||
label: '订单',
|
||||
value: '1',
|
||||
},
|
||||
{
|
||||
label: '其他',
|
||||
value: '2',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'status',
|
||||
component: 'NSelect',
|
||||
label: '状态',
|
||||
componentProps: {
|
||||
placeholder: '请选择状态',
|
||||
clearable: true,
|
||||
options: [
|
||||
{
|
||||
label: '已读',
|
||||
value: '1',
|
||||
},
|
||||
{
|
||||
label: '未读',
|
||||
value: '0',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
];
|
||||
81
src/views/logger/fileLog/columns.ts
Normal file
81
src/views/logger/fileLog/columns.ts
Normal file
@ -0,0 +1,81 @@
|
||||
import { h } from 'vue';
|
||||
export const columns = [
|
||||
{
|
||||
type: 'selection',
|
||||
width: 50,
|
||||
fixed:"left"
|
||||
},
|
||||
{
|
||||
title: 'ID',
|
||||
key: 'id',
|
||||
fixed: 'left',
|
||||
width: 50,
|
||||
},
|
||||
{
|
||||
title: '文件名称',
|
||||
key: 'originalName',
|
||||
width: 200,
|
||||
render(record) {
|
||||
return h(
|
||||
'a',
|
||||
{
|
||||
href: record.filePath,
|
||||
target: '_blank',
|
||||
},
|
||||
record.originalName,
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '日志类型',
|
||||
key: 'type',
|
||||
width: 100,
|
||||
render(record) {
|
||||
let typeText = '';
|
||||
switch (record.type) {
|
||||
case 0:
|
||||
typeText = '单个文件';
|
||||
break;
|
||||
case 1:
|
||||
typeText = '多个文件';
|
||||
break;
|
||||
case 2:
|
||||
typeText = '其他';
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
return h('span', typeText || '-');
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '文件类型',
|
||||
key: 'fileType',
|
||||
align:'center',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '文件大小',
|
||||
key: 'fileSize',
|
||||
width: 100,
|
||||
customRender({ record }) {
|
||||
return h('span', record.fileSize + 'B');
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '文件后缀',
|
||||
key: 'fileExtension',
|
||||
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '创建人',
|
||||
key: 'createUser',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
key: 'createTime',
|
||||
width: 180,
|
||||
}
|
||||
];
|
||||
101
src/views/logger/fileLog/edit.vue
Normal file
101
src/views/logger/fileLog/edit.vue
Normal file
@ -0,0 +1,101 @@
|
||||
<template>
|
||||
<basicModal @register="modalRegister" ref="modalRef" class="basicModal basicFormModal">
|
||||
<template #default>
|
||||
<n-descriptions class="margin-top" :column="2" bordered :labelStyle="{ width: '120px' }" label-placement="left">
|
||||
<n-descriptions-item label="文件名称:"><a :href="formData.filePath" target="_blank">{{
|
||||
formData.originalName
|
||||
}}</a></n-descriptions-item>
|
||||
<n-descriptions-item label="文件类型:">{{ formData.fileType }}</n-descriptions-item>
|
||||
<n-descriptions-item label="文件大小:">{{ formData.fileSize }}B</n-descriptions-item>
|
||||
<n-descriptions-item label="请求耗时:">{{ formData.consumeTime }}s</n-descriptions-item>
|
||||
<n-descriptions-item label="业务类型:">{{
|
||||
formData.bizType ? (formData.bizType == 1 ? '订单' : '其他') : ''
|
||||
}}</n-descriptions-item>
|
||||
<n-descriptions-item label="业务ID:">{{ formData.bizId }}</n-descriptions-item>
|
||||
<n-descriptions-item label="业务内容" :span="3">
|
||||
{{ formData.bizContent }}
|
||||
</n-descriptions-item>
|
||||
<n-descriptions-item label="请求状态" :span="3">
|
||||
{{ formData.status ? '失败' : '成功' }}
|
||||
</n-descriptions-item>
|
||||
<n-descriptions-item label="请求参数" :span="3">
|
||||
{{ formData.param }}
|
||||
</n-descriptions-item>
|
||||
<n-descriptions-item label="返回结果" :span="3">
|
||||
{{ formData.result }}
|
||||
</n-descriptions-item>
|
||||
<n-descriptions-item label="错误描述" :span="3">
|
||||
{{ formData.error }}
|
||||
</n-descriptions-item>
|
||||
</n-descriptions>
|
||||
</template>
|
||||
<template #action>
|
||||
<n-button @click="handleClose">取消</n-button>
|
||||
</template>
|
||||
</basicModal>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { getFileLogDetail } from '@/api/logger/fileLog';
|
||||
import { onMounted, ref } from 'vue';
|
||||
import { useModal } from '@/components/Modal';
|
||||
|
||||
/**
|
||||
* 定义参数变量
|
||||
*/
|
||||
const emit = defineEmits(['success', 'update:visible']);
|
||||
const formData = ref({});
|
||||
const [modalRegister, { openModal }] = useModal({
|
||||
title: '文件日志详情',
|
||||
subBtuText: '确定',
|
||||
width: 800,
|
||||
});
|
||||
|
||||
/**
|
||||
* 定义接收的参数
|
||||
*/
|
||||
const props = defineProps({
|
||||
visible: {
|
||||
type: Boolean,
|
||||
required: true,
|
||||
default: false,
|
||||
},
|
||||
fileLogId: {
|
||||
type: Number,
|
||||
required: true,
|
||||
default: 0,
|
||||
},
|
||||
});
|
||||
|
||||
/**
|
||||
* 关闭窗体
|
||||
*/
|
||||
const handleClose = () => {
|
||||
emit('update:visible', false);
|
||||
};
|
||||
|
||||
/**
|
||||
* 设置表单数据
|
||||
*/
|
||||
const setFormData = async () => {
|
||||
const data = await getFileLogDetail(props.fileLogId);
|
||||
formData.value = data;
|
||||
};
|
||||
|
||||
/**
|
||||
* 钩子函数
|
||||
*/
|
||||
onMounted(() => {
|
||||
if (props.fileLogId) {
|
||||
setFormData();
|
||||
}
|
||||
});
|
||||
//导出方法
|
||||
defineExpose({
|
||||
openModal,
|
||||
});
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
:deep(.n-descriptions__body .n-descriptions__table .n-descriptions__cell) {
|
||||
word-break: break-all;
|
||||
}
|
||||
</style>
|
||||
162
src/views/logger/fileLog/index.vue
Normal file
162
src/views/logger/fileLog/index.vue
Normal file
@ -0,0 +1,162 @@
|
||||
<template>
|
||||
<div>
|
||||
<n-card :bordered="false" class="pt-3 mb-3 proCard">
|
||||
<BasicForm @register="register" @submit="handleSubmit" @reset="handleReset">
|
||||
<template #statusSlot="{ model, field }">
|
||||
<n-input v-model:value="model[field]" />
|
||||
</template>
|
||||
</BasicForm>
|
||||
</n-card>
|
||||
<n-card :bordered="false" class="proCard">
|
||||
<BasicTable :columns="columns" :request="loadDataTable" :row-key="(row) => row.id" ref="basicTableRef"
|
||||
:actionColumn="actionColumn" @update:checked-row-keys="onCheckedRow" :autoScrollX="true">
|
||||
<template #tableTitle>
|
||||
<n-space>
|
||||
<n-button type="error" @click="handleDelete" :disabled="!rowKeys.length"
|
||||
v-perm="['sys:fileLog:batchDelete']">
|
||||
<template #icon>
|
||||
<n-icon>
|
||||
<DeleteOutlined />
|
||||
</n-icon>
|
||||
</template>
|
||||
删除
|
||||
</n-button>
|
||||
</n-space>
|
||||
</template>
|
||||
</BasicTable>
|
||||
</n-card>
|
||||
<editDialog ref="createModalRef" :fileLogId="fileLogId" v-if="editVisible" v-model:visible="editVisible" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { h, nextTick, reactive, ref, unref } from 'vue';
|
||||
import { useMessage, useDialog } from 'naive-ui';
|
||||
import { TableAction } from '@/components/Table';
|
||||
import { BasicForm, useForm } from '@/components/Form/index';
|
||||
import { getFileLogList, fileLogDelete, fileLogBatchDelete } from '@/api/logger/fileLog';
|
||||
import { columns } from './columns';
|
||||
import { DeleteOutlined, EyeOutlined } from '@vicons/antd';
|
||||
import editDialog from './edit.vue';
|
||||
import { basicModal, useModal } from '@/components/Modal';
|
||||
import { schemas } from './querySchemas';
|
||||
import { renderIcon } from '@/utils';
|
||||
|
||||
const message = useMessage();
|
||||
const dialog = useDialog()
|
||||
const basicTableRef = ref();
|
||||
const createModalRef = ref();
|
||||
const editVisible = ref(false);
|
||||
const fileLogId = ref(0);
|
||||
const rowKeys = ref([]);
|
||||
|
||||
const showModal = ref(false);
|
||||
const formParams = reactive({
|
||||
title: '',
|
||||
bizType: '',
|
||||
type: '',
|
||||
status: '',
|
||||
});
|
||||
|
||||
const actionColumn = reactive({
|
||||
width: 200,
|
||||
title: '操作',
|
||||
align: 'center',
|
||||
key: 'action',
|
||||
fixed: 'right',
|
||||
render(record) {
|
||||
return h(TableAction as any, {
|
||||
style: 'button',
|
||||
actions: [
|
||||
{
|
||||
label: '详情',
|
||||
icon: renderIcon(EyeOutlined),
|
||||
type: 'info',
|
||||
onClick: handleDetail.bind(null, record),
|
||||
auth: ['sys:fileLog:detail'],
|
||||
},
|
||||
{
|
||||
label: '删除',
|
||||
icon: renderIcon(DeleteOutlined),
|
||||
type: 'error',
|
||||
onClick: handleDelete.bind(null, record),
|
||||
auth: ['sys:fileLog:delete'],
|
||||
},
|
||||
],
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
function addTable() {
|
||||
showModal.value = true;
|
||||
}
|
||||
|
||||
const loadDataTable = async (res) => {
|
||||
const result = await getFileLogList({ ...formParams, ...res });
|
||||
return result;
|
||||
};
|
||||
|
||||
function onCheckedRow(keys) {
|
||||
rowKeys.value = keys;
|
||||
}
|
||||
|
||||
function reloadTable(noRefresh = '') {
|
||||
basicTableRef.value.reload(noRefresh ? {} : { pageNo: 1 });
|
||||
}
|
||||
|
||||
function handleSubmit(values: Recordable) {
|
||||
for (const key in formParams) {
|
||||
formParams[key] = '';
|
||||
}
|
||||
for (const key in values) {
|
||||
formParams[key] = values[key];
|
||||
}
|
||||
reloadTable();
|
||||
}
|
||||
|
||||
function handleReset(values: Recordable) {
|
||||
for (const key in formParams) {
|
||||
formParams[key] = '';
|
||||
}
|
||||
for (const key in values) {
|
||||
formParams[key] = values[key];
|
||||
}
|
||||
reloadTable();
|
||||
}
|
||||
|
||||
const [register, { }] = useForm({
|
||||
gridProps: { cols: '1 s:1 m:2 l:3 xl:4 2xl:4' },
|
||||
labelWidth: 80,
|
||||
schemas,
|
||||
});
|
||||
|
||||
/**
|
||||
* 执行查看
|
||||
*/
|
||||
async function handleDetail(record: Recordable) {
|
||||
fileLogId.value = record.id;
|
||||
editVisible.value = true;
|
||||
await nextTick();
|
||||
createModalRef.value.openModal();
|
||||
}
|
||||
/**
|
||||
* 执行删除
|
||||
* @param id 参数
|
||||
*/
|
||||
async function handleDelete(record) {
|
||||
dialog.warning({
|
||||
title: '提示',
|
||||
content: '确定要删除？',
|
||||
positiveText: '确定',
|
||||
negativeText: '取消',
|
||||
onPositiveClick: async () => {
|
||||
record.id ? await fileLogDelete(record.id) : await fileLogBatchDelete(rowKeys.value);
|
||||
message.success('删除成功');
|
||||
reloadTable();
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
34
src/views/logger/fileLog/querySchemas.ts
Normal file
34
src/views/logger/fileLog/querySchemas.ts
Normal file
@ -0,0 +1,34 @@
|
||||
import { FormSchema } from '@/components/Form/index';
|
||||
export const schemas: FormSchema[] = [
|
||||
{
|
||||
field: 'fileName',
|
||||
component: 'NInput',
|
||||
label: '文件名称',
|
||||
componentProps: {
|
||||
placeholder: '请输入文件名称',
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'fileType',
|
||||
component: 'NSelect',
|
||||
label: '文件类型',
|
||||
componentProps: {
|
||||
clearable: true,
|
||||
placeholder: '请选择文件类型',
|
||||
options: [
|
||||
{
|
||||
label: '文档',
|
||||
value: '1',
|
||||
},
|
||||
{
|
||||
label: '视频',
|
||||
value: '2',
|
||||
},
|
||||
{
|
||||
label: '其他',
|
||||
value: '3',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
];
|
||||
79
src/views/logger/smsLog/columns.ts
Normal file
79
src/views/logger/smsLog/columns.ts
Normal file
@ -0,0 +1,79 @@
|
||||
import { h } from 'vue';
|
||||
export const columns = [
|
||||
{
|
||||
type: 'selection',
|
||||
width: 50,
|
||||
fixed:"left"
|
||||
},
|
||||
{
|
||||
title: 'ID',
|
||||
key: 'id',
|
||||
fixed: 'left',
|
||||
width: 50,
|
||||
},
|
||||
{
|
||||
title: '日志标题',
|
||||
key: 'title',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '日志类型',
|
||||
key: 'typeText',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '模板编号',
|
||||
key: 'number',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '接收人手机',
|
||||
key: 'receiveMobile',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '接收人类型',
|
||||
key: 'receiveType',
|
||||
width: 100,
|
||||
render(record ) {
|
||||
let typeText = '';
|
||||
switch (record.receiveType) {
|
||||
case 1:
|
||||
typeText = '系统用户';
|
||||
break;
|
||||
case 2:
|
||||
typeText = '会员用户';
|
||||
break;
|
||||
case 3:
|
||||
typeText = '其他';
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
return h('span', typeText || '-');
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '请求耗时',
|
||||
key: 'consumeTime',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '日志状态',
|
||||
key: 'status',
|
||||
width: 100,
|
||||
render(record ) {
|
||||
return h('span', record.status === 1 ? '已读' : '未读');
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '创建人',
|
||||
width: 100,
|
||||
key: 'createUser',
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
key: 'createTime',
|
||||
width: 180,
|
||||
},
|
||||
];
|
||||
154
src/views/logger/smsLog/edit.vue
Normal file
154
src/views/logger/smsLog/edit.vue
Normal file
@ -0,0 +1,154 @@
|
||||
<template>
|
||||
<basicModal @register="modalRegister" ref="modalRef" class="basicModal basicFormModal">
|
||||
<template #default>
|
||||
<n-descriptions class="margin-top" :column="2" bordered :labelStyle="{ width: '120px' }" label-placement="left">
|
||||
<n-descriptions-item label="日志标题">{{ formData.title }}</n-descriptions-item>
|
||||
<n-descriptions-item label="日志类型">{{ getTyepText(formData.type) }}</n-descriptions-item>
|
||||
<n-descriptions-item label="日志类型">{{ formData.typeText }}</n-descriptions-item>
|
||||
<n-descriptions-item label="模板编号">{{ formData.number }}</n-descriptions-item>
|
||||
<n-descriptions-item label="接收人手机">{{ formData.receiveMobile }}</n-descriptions-item>
|
||||
<n-descriptions-item label="接收人类型">{{
|
||||
getReviceType(formData.receiveType)
|
||||
}}</n-descriptions-item>
|
||||
<n-descriptions-item label="请求耗时">{{ formData.consumeTime }}s</n-descriptions-item>
|
||||
<n-descriptions-item label="业务类型">{{
|
||||
formData.bizType ? (formData.bizType == 1 ? '订单' : '其他') : ''
|
||||
}}</n-descriptions-item>
|
||||
<n-descriptions-item label="业务ID">{{ formData.bizId }}</n-descriptions-item>
|
||||
<n-descriptions-item label="日志状态">{{
|
||||
formData.status == 1 ? '已读' : '未读'
|
||||
}}</n-descriptions-item>
|
||||
<n-descriptions-item label="请求状态" :span="3">
|
||||
{{ formData.status ? '失败' : '成功' }}
|
||||
</n-descriptions-item>
|
||||
<n-descriptions-item label="业务内容" :span="3">
|
||||
{{ formData.bizContent }}
|
||||
</n-descriptions-item>
|
||||
<n-descriptions-item label="请求参数" :span="3">
|
||||
{{ formData.param }}
|
||||
</n-descriptions-item>
|
||||
<n-descriptions-item label="返回结果" :span="3">
|
||||
{{ formData.result }}
|
||||
</n-descriptions-item>
|
||||
<n-descriptions-item label="错误描述" :span="3">
|
||||
{{ formData.error }}
|
||||
</n-descriptions-item>
|
||||
</n-descriptions>
|
||||
</template>
|
||||
<template #action>
|
||||
<n-button @click="handleClose">取消</n-button>
|
||||
</template>
|
||||
</basicModal>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { getSmsLogDetail } from '@/api/logger/smsLog';
|
||||
import { onMounted, ref } from 'vue';
|
||||
import { useModal } from '@/components/Modal';
|
||||
|
||||
/**
|
||||
* 定义参数变量
|
||||
*/
|
||||
const emit = defineEmits(['success', 'update:visible']);
|
||||
const formData = ref({});
|
||||
const [modalRegister, { openModal}] = useModal({
|
||||
title: '短信日志详情',
|
||||
subBtuText: '确定',
|
||||
width: 800,
|
||||
});
|
||||
|
||||
/**
|
||||
* 定义接收的参数
|
||||
*/
|
||||
const props = defineProps({
|
||||
visible: {
|
||||
type: Boolean,
|
||||
required: true,
|
||||
default: false,
|
||||
},
|
||||
smsLogId: {
|
||||
type: Number,
|
||||
required: true,
|
||||
default: 0,
|
||||
},
|
||||
});
|
||||
|
||||
/**
|
||||
* 关闭窗体
|
||||
*/
|
||||
const handleClose = () => {
|
||||
emit('update:visible', false);
|
||||
};
|
||||
|
||||
/**
|
||||
* 设置表单数据
|
||||
*/
|
||||
const setFormData = async () => {
|
||||
const data = await getSmsLogDetail(props.smsLogId);
|
||||
formData.value = data;
|
||||
};
|
||||
/**
|
||||
* 获取接收人类型描述
|
||||
*/
|
||||
const getReviceType = (type) => {
|
||||
let typeText = '';
|
||||
switch (type) {
|
||||
case 1:
|
||||
typeText = '系统用户';
|
||||
break;
|
||||
case 2:
|
||||
typeText = '会员用户';
|
||||
break;
|
||||
case 3:
|
||||
typeText = '其他';
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
return typeText;
|
||||
};
|
||||
|
||||
/**
|
||||
* 获取日志类型描述
|
||||
*/
|
||||
const getTyepText = (type) => {
|
||||
let typeText = '';
|
||||
switch (type) {
|
||||
case 1:
|
||||
typeText = '登录';
|
||||
break;
|
||||
case 2:
|
||||
typeText = '注册';
|
||||
break;
|
||||
case 3:
|
||||
typeText = '找回密码';
|
||||
break;
|
||||
case 4:
|
||||
typeText = '业务';
|
||||
break;
|
||||
case 5:
|
||||
typeText = '其他';
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
return typeText;
|
||||
};
|
||||
|
||||
/**
|
||||
* 钩子函数
|
||||
*/
|
||||
onMounted(() => {
|
||||
if (props.smsLogId) {
|
||||
setFormData();
|
||||
}
|
||||
});
|
||||
//导出方法
|
||||
defineExpose({
|
||||
openModal,
|
||||
});
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
:deep(.n-descriptions__body .n-descriptions__table .n-descriptions__cell) {
|
||||
word-break: break-all;
|
||||
}
|
||||
</style>
|
||||
162
src/views/logger/smsLog/index.vue
Normal file
162
src/views/logger/smsLog/index.vue
Normal file
@ -0,0 +1,162 @@
|
||||
<template>
|
||||
<div>
|
||||
<n-card :bordered="false" class="pt-3 mb-3 proCard">
|
||||
<BasicForm @register="register" @submit="handleSubmit" @reset="handleReset">
|
||||
<template #statusSlot="{ model, field }">
|
||||
<n-input v-model:value="model[field]" />
|
||||
</template>
|
||||
</BasicForm>
|
||||
</n-card>
|
||||
<n-card :bordered="false" class="proCard">
|
||||
<BasicTable :columns="columns" :request="loadDataTable" :row-key="(row) => row.id" ref="basicTableRef"
|
||||
:actionColumn="actionColumn" @update:checked-row-keys="onCheckedRow" :autoScrollX="true">
|
||||
<template #tableTitle>
|
||||
<n-space>
|
||||
<n-button type="error" @click="handleDelete" :disabled="!rowKeys.length"
|
||||
v-perm="['sys:smsLog:batchDelete']">
|
||||
<template #icon>
|
||||
<n-icon>
|
||||
<DeleteOutlined />
|
||||
</n-icon>
|
||||
</template>
|
||||
删除
|
||||
</n-button>
|
||||
</n-space>
|
||||
</template>
|
||||
</BasicTable>
|
||||
</n-card>
|
||||
<editDialog ref="createModalRef" :smsLogId="smsLogId" v-if="editVisible" v-model:visible="editVisible" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { h, nextTick, reactive, ref, unref } from 'vue';
|
||||
import { useMessage, useDialog } from 'naive-ui';
|
||||
import { TableAction } from '@/components/Table';
|
||||
import { BasicForm, useForm } from '@/components/Form/index';
|
||||
import { getSmsLogList, smsLogDelete, smsLogBatchDelete } from '@/api/logger/smsLog';
|
||||
import { columns } from './columns';
|
||||
import { DeleteOutlined, EyeOutlined } from '@vicons/antd';
|
||||
import editDialog from './edit.vue';
|
||||
import { basicModal, useModal } from '@/components/Modal';
|
||||
import { schemas } from './querySchemas';
|
||||
import { renderIcon } from '@/utils';
|
||||
|
||||
const message = useMessage();
|
||||
const dialog = useDialog()
|
||||
const basicTableRef = ref();
|
||||
const createModalRef = ref();
|
||||
const editVisible = ref(false);
|
||||
const smsLogId = ref(0);
|
||||
const rowKeys = ref([]);
|
||||
|
||||
const showModal = ref(false);
|
||||
const formParams = reactive({
|
||||
title: '',
|
||||
bizType: '',
|
||||
type: '',
|
||||
status: '',
|
||||
});
|
||||
|
||||
const actionColumn = reactive({
|
||||
width: 200,
|
||||
title: '操作',
|
||||
align: 'center',
|
||||
key: 'action',
|
||||
fixed: 'right',
|
||||
render(record) {
|
||||
return h(TableAction as any, {
|
||||
style: 'button',
|
||||
actions: [
|
||||
{
|
||||
label: '详情',
|
||||
icon: renderIcon(EyeOutlined),
|
||||
type: 'info',
|
||||
onClick: handleDetail.bind(null, record),
|
||||
auth: ['sys:smsLog:detail'],
|
||||
},
|
||||
{
|
||||
label: '删除',
|
||||
icon: renderIcon(DeleteOutlined),
|
||||
type: 'error',
|
||||
onClick: handleDelete.bind(null, record),
|
||||
auth: ['sys:smsLog:delete'],
|
||||
},
|
||||
],
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
function addTable() {
|
||||
showModal.value = true;
|
||||
}
|
||||
|
||||
const loadDataTable = async (res) => {
|
||||
const result = await getSmsLogList({ ...formParams, ...res });
|
||||
return result;
|
||||
};
|
||||
|
||||
function onCheckedRow(keys) {
|
||||
rowKeys.value = keys;
|
||||
}
|
||||
|
||||
function reloadTable(noRefresh = '') {
|
||||
basicTableRef.value.reload(noRefresh ? {} : { pageNo: 1 });
|
||||
}
|
||||
|
||||
function handleSubmit(values: Recordable) {
|
||||
for (const key in formParams) {
|
||||
formParams[key] = '';
|
||||
}
|
||||
for (const key in values) {
|
||||
formParams[key] = values[key];
|
||||
}
|
||||
reloadTable();
|
||||
}
|
||||
|
||||
function handleReset(values: Recordable) {
|
||||
for (const key in formParams) {
|
||||
formParams[key] = '';
|
||||
}
|
||||
for (const key in values) {
|
||||
formParams[key] = values[key];
|
||||
}
|
||||
reloadTable();
|
||||
}
|
||||
|
||||
const [register, { }] = useForm({
|
||||
gridProps: { cols: '1 s:1 m:2 l:3 xl:4 2xl:4' },
|
||||
labelWidth: 80,
|
||||
schemas,
|
||||
});
|
||||
|
||||
/**
|
||||
* 执行查看
|
||||
*/
|
||||
async function handleDetail(record: Recordable) {
|
||||
smsLogId.value = record.id;
|
||||
editVisible.value = true;
|
||||
await nextTick();
|
||||
createModalRef.value.openModal();
|
||||
}
|
||||
/**
|
||||
* 执行删除
|
||||
* @param id 参数
|
||||
*/
|
||||
async function handleDelete(record) {
|
||||
dialog.warning({
|
||||
title: '提示',
|
||||
content: '确定要删除？',
|
||||
positiveText: '确定',
|
||||
negativeText: '取消',
|
||||
onPositiveClick: async () => {
|
||||
record.id ? await smsLogDelete(record.id) : await smsLogBatchDelete(rowKeys.value);
|
||||
message.success('删除成功');
|
||||
reloadTable();
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
72
src/views/logger/smsLog/querySchemas.ts
Normal file
72
src/views/logger/smsLog/querySchemas.ts
Normal file
@ -0,0 +1,72 @@
|
||||
import { FormSchema } from '@/components/Form/index';
|
||||
export const schemas: FormSchema[] = [
|
||||
{
|
||||
field: 'title',
|
||||
component: 'NInput',
|
||||
label: '短信标题',
|
||||
componentProps: {
|
||||
placeholder: '请输入短信标题',
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'receiveType',
|
||||
component: 'NSelect',
|
||||
label: '接收类型',
|
||||
componentProps: {
|
||||
placeholder: '请选择接收类型',
|
||||
clearable: true,
|
||||
options: [
|
||||
{
|
||||
label: '系统用户',
|
||||
value: '1',
|
||||
},
|
||||
{
|
||||
label: '会员用户',
|
||||
value: '2',
|
||||
},
|
||||
{
|
||||
label: '其他',
|
||||
value: '3',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'bizType',
|
||||
component: 'NSelect',
|
||||
label: '业务类型',
|
||||
componentProps: {
|
||||
placeholder: '请选择业务类型',
|
||||
clearable: true,
|
||||
options: [
|
||||
{
|
||||
label: '订单',
|
||||
value: '1',
|
||||
},
|
||||
{
|
||||
label: '其他',
|
||||
value: '2',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'status',
|
||||
component: 'NSelect',
|
||||
label: '状态',
|
||||
componentProps: {
|
||||
placeholder: '请选择状态',
|
||||
clearable: true,
|
||||
options: [
|
||||
{
|
||||
label: '已读',
|
||||
value: '1',
|
||||
},
|
||||
{
|
||||
label: '未读',
|
||||
value: '0',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
];
|
||||
58
src/views/monitor/online/columns.ts
Normal file
58
src/views/monitor/online/columns.ts
Normal file
@ -0,0 +1,58 @@
|
||||
import { h } from 'vue';
|
||||
|
||||
export const columns = [
|
||||
{
|
||||
title: '序号',
|
||||
render: (_, index) => {
|
||||
return `${index + 1}`
|
||||
},
|
||||
fixed: 'left',
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
title: '会话编号',
|
||||
key: 'tokenId',
|
||||
width: 300,
|
||||
},
|
||||
{
|
||||
title: '登录名称',
|
||||
key: 'username',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '部门名称',
|
||||
key: 'deptName',
|
||||
width: 150,
|
||||
},
|
||||
{
|
||||
title: 'IP地址',
|
||||
key: 'ipAddr',
|
||||
width: 150,
|
||||
},
|
||||
{
|
||||
title: '登录地点',
|
||||
key: 'loginLocation',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '浏览器',
|
||||
key: 'browser',
|
||||
width: 150,
|
||||
},
|
||||
{
|
||||
title: '操作系统',
|
||||
key: 'os',
|
||||
width: 150,
|
||||
},
|
||||
{
|
||||
title: '登录时间',
|
||||
key: 'loginTime',
|
||||
width: 180,
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
fixed: 'right',
|
||||
key: 'action',
|
||||
width: 100,
|
||||
},
|
||||
];
|
||||
128
src/views/monitor/online/index.vue
Normal file
128
src/views/monitor/online/index.vue
Normal file
@ -0,0 +1,128 @@
|
||||
<template>
|
||||
<PageWrapper>
|
||||
<n-card :bordered="false" class="pt-3 mb-3 proCard">
|
||||
<BasicForm @register="register" @submit="handleSubmit" @reset="handleReset">
|
||||
<template #statusSlot="{ model, field }">
|
||||
<n-input v-model:value="model[field]" />
|
||||
</template>
|
||||
</BasicForm>
|
||||
</n-card>
|
||||
<n-card :bordered="false" class="proCard">
|
||||
<n-data-table :columns="columns" :style="{ minHeight: fwbHeight + 'px' }"
|
||||
:paginate-single-page="false"
|
||||
:data="onlineTableData.slice((pager.page - 1) * pager.size, pager.page * pager.size)">
|
||||
<!-- <template #bodyCell="{ column, record,index }">
|
||||
<template v-if="column.key === 'index'">
|
||||
{{index+1}}
|
||||
</template>
|
||||
<template v-if="column.key === 'action'">
|
||||
<n-space>
|
||||
<n-button type="danger" @click="handleDelete(record.tokenId)">
|
||||
强退
|
||||
</n-button>
|
||||
</n-space>
|
||||
</template>
|
||||
</template> -->
|
||||
</n-data-table>
|
||||
<pagination style="justify-content: flex-end" class="mt-10 flex" v-model="pager" @change="loadTable" />
|
||||
</n-card>
|
||||
</PageWrapper>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { reactive, ref, onMounted } from 'vue';
|
||||
import { columns } from './columns';
|
||||
import { schemas } from './querySchemas';
|
||||
import { useForm } from '@/components/Form/index';
|
||||
import { getOnlineList, onlineOut } from '@/api/monitor/online';
|
||||
import { useMessage, useDialog } from 'naive-ui';
|
||||
const onlineTableData = ref([]);
|
||||
|
||||
/**
|
||||
* 定义查询参数
|
||||
*/
|
||||
const formParams = reactive({
|
||||
ipAddr: '',
|
||||
username: '',
|
||||
});
|
||||
const message = useMessage();
|
||||
const dialog = useDialog()
|
||||
/**
|
||||
* 定义分页参数
|
||||
*/
|
||||
const pager = ref({
|
||||
page: 1,
|
||||
size: 10,
|
||||
jumper:true,
|
||||
count: onlineTableData.value.length,
|
||||
});
|
||||
const fwbHeight = document.body.clientHeight - 420;
|
||||
|
||||
/**
|
||||
* 加载数据列表
|
||||
*/
|
||||
const loadTable = async () => {
|
||||
onlineTableData.value = await getOnlineList({ ...formParams });
|
||||
console.log(onlineTableData.value)
|
||||
pager.value.count = onlineTableData.value.length;
|
||||
};
|
||||
|
||||
/**
|
||||
* 注册
|
||||
*/
|
||||
const [register, { }] = useForm({
|
||||
gridProps: { cols: '1 s:1 m:2 l:3 xl:4 2xl:4' },
|
||||
labelWidth: 80,
|
||||
schemas,
|
||||
});
|
||||
|
||||
/**
|
||||
* 执行提交表单
|
||||
* @param values 参数
|
||||
*/
|
||||
function handleSubmit(values) {
|
||||
for (const key in formParams) {
|
||||
formParams[key] = '';
|
||||
}
|
||||
for (const key in values) {
|
||||
formParams[key] = values[key];
|
||||
}
|
||||
loadTable();
|
||||
}
|
||||
|
||||
/**
|
||||
* 执行重置
|
||||
*/
|
||||
function handleReset() {
|
||||
for (const key in formParams) {
|
||||
formParams[key] = '';
|
||||
}
|
||||
pager.value.page = 1;
|
||||
loadTable();
|
||||
}
|
||||
|
||||
/**
|
||||
* 执行删除
|
||||
* @param id 参数
|
||||
*/
|
||||
async function handleDelete(id) {
|
||||
Modal.confirm({
|
||||
title: '提示',
|
||||
content: '确定要强退？',
|
||||
onOk: async () => {
|
||||
await onlineOut(id);
|
||||
message.success('强退成功');
|
||||
loadTable();
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 钩子函数
|
||||
*/
|
||||
onMounted(() => {
|
||||
loadTable();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
19
src/views/monitor/online/querySchemas.ts
Normal file
19
src/views/monitor/online/querySchemas.ts
Normal file
@ -0,0 +1,19 @@
|
||||
import { FormSchema } from '@/components/Form/index';
|
||||
export const schemas: FormSchema[] = [
|
||||
{
|
||||
field: 'ipAddr',
|
||||
component: 'NInput',
|
||||
label: '登录IP',
|
||||
componentProps: {
|
||||
placeholder: '请输入登录IP',
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'username',
|
||||
component: 'NInput',
|
||||
label: '登录账号',
|
||||
componentProps: {
|
||||
placeholder: '请输入登录账号',
|
||||
},
|
||||
},
|
||||
];
|
||||
161
src/views/system/logger/loginLog.vue
Normal file
161
src/views/system/logger/loginLog.vue
Normal file
@ -0,0 +1,161 @@
|
||||
<template>
|
||||
<div>
|
||||
<n-card :bordered="false" class="pt-3 mb-3 proCard">
|
||||
<BasicForm @register="register" @submit="handleSubmit" @reset="handleReset">
|
||||
<template #statusSlot="{ model, field }">
|
||||
<n-input v-model:value="model[field]" />
|
||||
</template>
|
||||
</BasicForm>
|
||||
</n-card>
|
||||
<n-card :bordered="false" class="proCard">
|
||||
<BasicTable :columns="columns" :request="loadDataTable" :row-key="(row) => row.id" ref="basicTableRef"
|
||||
:actionColumn="actionColumn" @update:checked-row-keys="onCheckedRow" :autoScrollX="true">
|
||||
<template #tableTitle>
|
||||
<n-space>
|
||||
<n-button type="error" @click="handleDelete" :disabled="!rowKeys.length"
|
||||
v-perm="['sys:loginLog:batchDelete']">
|
||||
<template #icon>
|
||||
<n-icon>
|
||||
<DeleteOutlined />
|
||||
</n-icon>
|
||||
</template>
|
||||
删除
|
||||
</n-button>
|
||||
</n-space>
|
||||
</template>
|
||||
</BasicTable>
|
||||
</n-card>
|
||||
<editDialog ref="createModalRef" :loginlogId="loginlogId" v-if="editVisible" v-model:visible="editVisible" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { h, nextTick, reactive, ref, unref } from 'vue';
|
||||
import { useMessage, useDialog } from 'naive-ui';
|
||||
import { TableAction } from '@/components/Table';
|
||||
import { BasicForm, useForm } from '@/components/Form/index';
|
||||
import { getLoginLogList, loginLogDelete, loginLogBatchDelete } from '@/api/system/loginLog';
|
||||
import { columns } from './loginLog/columns';
|
||||
import {DeleteOutlined,EyeOutlined} from '@vicons/antd';
|
||||
import editDialog from './loginLog/edit.vue';
|
||||
import { basicModal, useModal } from '@/components/Modal';
|
||||
import { schemas } from './loginLog/querySchemas';
|
||||
import { renderIcon } from '@/utils';
|
||||
|
||||
const message = useMessage();
|
||||
const dialog = useDialog()
|
||||
const basicTableRef = ref();
|
||||
const createModalRef = ref();
|
||||
const editVisible = ref(false);
|
||||
const loginlogId = ref(0);
|
||||
const rowKeys = ref([]);
|
||||
|
||||
const showModal = ref(false);
|
||||
const formParams = reactive({
|
||||
username: '',
|
||||
type: '',
|
||||
status: '',
|
||||
});
|
||||
|
||||
const actionColumn = reactive({
|
||||
width: 200,
|
||||
title: '操作',
|
||||
align: 'center',
|
||||
key: 'action',
|
||||
fixed: 'right',
|
||||
render(record) {
|
||||
return h(TableAction as any, {
|
||||
style: 'button',
|
||||
actions: [
|
||||
{
|
||||
label: '详情',
|
||||
icon: renderIcon(EyeOutlined),
|
||||
type: 'info',
|
||||
onClick: handleDetail.bind(null, record),
|
||||
auth: ['sys:loginLog:detail'],
|
||||
},
|
||||
{
|
||||
label: '删除',
|
||||
icon: renderIcon(DeleteOutlined),
|
||||
type: 'error',
|
||||
onClick: handleDelete.bind(null, record),
|
||||
auth: ['sys:loginLog:delete'],
|
||||
},
|
||||
],
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
function addTable() {
|
||||
showModal.value = true;
|
||||
}
|
||||
|
||||
const loadDataTable = async (res) => {
|
||||
const result = await getLoginLogList({ ...formParams, ...res });
|
||||
return result;
|
||||
};
|
||||
|
||||
function onCheckedRow(keys) {
|
||||
rowKeys.value = keys;
|
||||
}
|
||||
|
||||
function reloadTable(noRefresh = '') {
|
||||
basicTableRef.value.reload(noRefresh ? {} : { pageNo: 1 });
|
||||
}
|
||||
|
||||
function handleSubmit(values: Recordable) {
|
||||
for (const key in formParams) {
|
||||
formParams[key] = '';
|
||||
}
|
||||
for (const key in values) {
|
||||
formParams[key] = values[key];
|
||||
}
|
||||
reloadTable();
|
||||
}
|
||||
|
||||
function handleReset(values: Recordable) {
|
||||
for (const key in formParams) {
|
||||
formParams[key] = '';
|
||||
}
|
||||
for (const key in values) {
|
||||
formParams[key] = values[key];
|
||||
}
|
||||
reloadTable();
|
||||
}
|
||||
|
||||
const [register, { }] = useForm({
|
||||
gridProps: { cols: '1 s:1 m:2 l:3 xl:4 2xl:4' },
|
||||
labelWidth: 80,
|
||||
schemas,
|
||||
});
|
||||
|
||||
/**
|
||||
* 执行查看
|
||||
*/
|
||||
async function handleDetail(record: Recordable) {
|
||||
loginlogId.value = record.id;
|
||||
editVisible.value = true;
|
||||
await nextTick();
|
||||
createModalRef.value.openModal();
|
||||
}
|
||||
/**
|
||||
* 执行删除
|
||||
* @param id 参数
|
||||
*/
|
||||
async function handleDelete(record) {
|
||||
dialog.warning({
|
||||
title: '提示',
|
||||
content: '确定要删除？',
|
||||
positiveText: '确定',
|
||||
negativeText: '取消',
|
||||
onPositiveClick: async () => {
|
||||
record.id ? await loginLogDelete(record.id) : await loginLogBatchDelete(rowKeys.value);
|
||||
message.success('删除成功');
|
||||
reloadTable();
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
87
src/views/system/logger/loginLog/columns.ts
Normal file
87
src/views/system/logger/loginLog/columns.ts
Normal file
@ -0,0 +1,87 @@
|
||||
import { h } from 'vue';
|
||||
import { NTag } from 'naive-ui';
|
||||
|
||||
export const columns = [
|
||||
{
|
||||
type: 'selection',
|
||||
width: 50,
|
||||
fixed:"left"
|
||||
},
|
||||
{
|
||||
title: 'ID',
|
||||
key: 'id',
|
||||
fixed: 'left',
|
||||
width: 50,
|
||||
},
|
||||
{
|
||||
title: '操作用户',
|
||||
key: 'username',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '请求ip',
|
||||
key: 'ip',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '浏览器',
|
||||
key: 'browser',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '操作系统',
|
||||
key: 'os',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '操作类型',
|
||||
key: 'typeText',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '操作来源',
|
||||
key: 'sourceText',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '请求方式',
|
||||
key: 'requestMethod',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '请求URL',
|
||||
key: 'url',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '请求地区',
|
||||
key: 'location',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '请求耗时',
|
||||
key: 'consumeTime',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
key: 'status',
|
||||
render(record) {
|
||||
return h(
|
||||
NTag,
|
||||
{
|
||||
type: record.status == 0 ? 'success' : 'error',
|
||||
},
|
||||
{
|
||||
default: () => (record.status == 0 ? '正常' : '异常'),
|
||||
},
|
||||
);
|
||||
},
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
key: 'createTime',
|
||||
width: 180,
|
||||
},
|
||||
];
|
||||
109
src/views/system/logger/loginLog/edit.vue
Normal file
109
src/views/system/logger/loginLog/edit.vue
Normal file
@ -0,0 +1,109 @@
|
||||
<template>
|
||||
<basicModal @register="modalRegister" ref="modalRef" class="basicModal basicFormModal">
|
||||
<template #default>
|
||||
<n-descriptions class="margin-top" :column="2" bordered :labelStyle="{ width: '120px' }" label-placement="left">
|
||||
<n-descriptions-item label="操作用户">
|
||||
{{ formData.createUser }}
|
||||
</n-descriptions-item>
|
||||
<n-descriptions-item label="IP地址">
|
||||
{{ formData.ip }}
|
||||
</n-descriptions-item>
|
||||
<n-descriptions-item label="操作系统">
|
||||
{{ formData.os }}
|
||||
</n-descriptions-item>
|
||||
<n-descriptions-item label="操作浏览器">
|
||||
{{ formData.browser }}
|
||||
</n-descriptions-item>
|
||||
<n-descriptions-item label="请求耗时"> {{ formData.consumeTime }}s </n-descriptions-item>
|
||||
<n-descriptions-item label="请求地区">
|
||||
{{ formData.location }}
|
||||
</n-descriptions-item>
|
||||
<n-descriptions-item label="请求方式">
|
||||
{{ formData.requestMethod }}
|
||||
</n-descriptions-item>
|
||||
<n-descriptions-item label="请求状态">
|
||||
<n-tag :color="formData.status ? 'danger' : 'success'">{{
|
||||
formData.status ? '异常' : '正常'
|
||||
}}</n-tag>
|
||||
</n-descriptions-item>
|
||||
<n-descriptions-item label="调用方法" :span="3">
|
||||
{{ formData.method }}
|
||||
</n-descriptions-item>
|
||||
<n-descriptions-item label="请求参数" :span="3">
|
||||
{{ formData.param }}
|
||||
</n-descriptions-item>
|
||||
<n-descriptions-item label="返回结果" :span="3">
|
||||
{{ formData.result }}
|
||||
</n-descriptions-item>
|
||||
</n-descriptions>
|
||||
</template>
|
||||
<template #action>
|
||||
<n-button @click="handleClose">取消</n-button>
|
||||
</template>
|
||||
</basicModal>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { getLoginLogDetail } from '@/api/system/loginLog';
|
||||
import { onMounted, ref } from 'vue';
|
||||
import { useModal } from '@/components/Modal';
|
||||
|
||||
/**
|
||||
* 定义参数变量
|
||||
*/
|
||||
const emit = defineEmits(['success', 'update:visible']);
|
||||
const formData = ref({});
|
||||
const [modalRegister, { openModal, setSubLoading }] = useModal({
|
||||
title: '登录日志详情',
|
||||
subBtuText: '确定',
|
||||
width: 800,
|
||||
});
|
||||
|
||||
/**
|
||||
* 定义接收的参数
|
||||
*/
|
||||
const props = defineProps({
|
||||
visible: {
|
||||
type: Boolean,
|
||||
required: true,
|
||||
default: false,
|
||||
},
|
||||
loginlogId: {
|
||||
type: Number,
|
||||
required: true,
|
||||
default: 0,
|
||||
},
|
||||
});
|
||||
|
||||
/**
|
||||
* 关闭窗体
|
||||
*/
|
||||
const handleClose = () => {
|
||||
emit('update:visible', false);
|
||||
};
|
||||
|
||||
/**
|
||||
* 设置表单数据
|
||||
*/
|
||||
const setFormData = async () => {
|
||||
const data = await getLoginLogDetail(props.loginlogId);
|
||||
formData.value = data;
|
||||
};
|
||||
|
||||
/**
|
||||
* 钩子函数
|
||||
*/
|
||||
onMounted(() => {
|
||||
if (props.loginlogId) {
|
||||
setFormData();
|
||||
}
|
||||
});
|
||||
//导出方法
|
||||
defineExpose({
|
||||
openModal,
|
||||
});
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
:deep(.ant-descriptions__body .ant-descriptions__table .ant-descriptions__cell) {
|
||||
word-break: break-all;
|
||||
}
|
||||
</style>
|
||||
49
src/views/system/logger/loginLog/querySchemas.ts
Normal file
49
src/views/system/logger/loginLog/querySchemas.ts
Normal file
@ -0,0 +1,49 @@
|
||||
import { FormSchema } from '@/components/Form/index';
|
||||
export const schemas: FormSchema[] = [
|
||||
{
|
||||
field: 'username',
|
||||
component: 'NInput',
|
||||
label: '操作用户',
|
||||
componentProps: {
|
||||
placeholder: '请输入操作用户',
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'type',
|
||||
component: 'NSelect',
|
||||
label: '请求类型',
|
||||
componentProps: {
|
||||
placeholder: '请选择请求类型',
|
||||
clearable: true,
|
||||
options: [
|
||||
{
|
||||
label: '登录',
|
||||
value: '0',
|
||||
},
|
||||
{
|
||||
label: '退出',
|
||||
value: '1',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'status',
|
||||
component: 'NSelect',
|
||||
label: '请求状态',
|
||||
componentProps: {
|
||||
placeholder: '请选择状态',
|
||||
clearable: true,
|
||||
options: [
|
||||
{
|
||||
label: '正常',
|
||||
value: '0',
|
||||
},
|
||||
{
|
||||
label: '异常',
|
||||
value: '1',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
];
|
||||
161
src/views/system/logger/operLog.vue
Normal file
161
src/views/system/logger/operLog.vue
Normal file
@ -0,0 +1,161 @@
|
||||
<template>
|
||||
<div>
|
||||
<n-card :bordered="false" class="pt-3 mb-3 proCard">
|
||||
<BasicForm @register="register" @submit="handleSubmit" @reset="handleReset">
|
||||
<template #statusSlot="{ model, field }">
|
||||
<n-input v-model:value="model[field]" />
|
||||
</template>
|
||||
</BasicForm>
|
||||
</n-card>
|
||||
<n-card :bordered="false" class="proCard">
|
||||
<BasicTable :columns="columns" :request="loadDataTable" :row-key="(row) => row.id" ref="basicTableRef"
|
||||
:actionColumn="actionColumn" @update:checked-row-keys="onCheckedRow" :autoScrollX="true">
|
||||
<template #tableTitle>
|
||||
<n-space>
|
||||
<n-button type="error" @click="handleDelete" :disabled="!rowKeys.length"
|
||||
v-perm="['sys:operLog:batchDelete']">
|
||||
<template #icon>
|
||||
<n-icon>
|
||||
<DeleteOutlined />
|
||||
</n-icon>
|
||||
</template>
|
||||
删除
|
||||
</n-button>
|
||||
</n-space>
|
||||
</template>
|
||||
</BasicTable>
|
||||
</n-card>
|
||||
<editDialog ref="createModalRef" :operlogId="operlogId" v-if="editVisible" v-model:visible="editVisible" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { h, nextTick, reactive, ref, unref } from 'vue';
|
||||
import { useMessage, useDialog } from 'naive-ui';
|
||||
import {TableAction } from '@/components/Table';
|
||||
import { BasicForm, useForm } from '@/components/Form/index';
|
||||
import { getOperLogList, operLogDelete, operLogBatchDelete } from '@/api/system/operLog';
|
||||
import { columns } from './operLog/columns';
|
||||
import {DeleteOutlined,EyeOutlined} from '@vicons/antd';
|
||||
import editDialog from './operLog/edit.vue';
|
||||
import { basicModal, useModal } from '@/components/Modal';
|
||||
import { schemas } from './operLog/querySchemas';
|
||||
import { renderIcon } from '@/utils';
|
||||
|
||||
const message = useMessage();
|
||||
const dialog = useDialog()
|
||||
const basicTableRef = ref();
|
||||
const createModalRef = ref();
|
||||
const editVisible = ref(false);
|
||||
const operlogId = ref(0);
|
||||
const rowKeys = ref([]);
|
||||
|
||||
const showModal = ref(false);
|
||||
const formParams = reactive({
|
||||
username: '',
|
||||
type: '',
|
||||
status: '',
|
||||
});
|
||||
|
||||
const actionColumn = reactive({
|
||||
width: 200,
|
||||
title: '操作',
|
||||
align: 'center',
|
||||
key: 'action',
|
||||
fixed: 'right',
|
||||
render(record) {
|
||||
return h(TableAction as any, {
|
||||
style: 'button',
|
||||
actions: [
|
||||
{
|
||||
label: '详情',
|
||||
icon: renderIcon(EyeOutlined),
|
||||
type: 'info',
|
||||
onClick: handleDetail.bind(null, record),
|
||||
auth: ['sys:operLog:detail'],
|
||||
},
|
||||
{
|
||||
label: '删除',
|
||||
icon: renderIcon(DeleteOutlined),
|
||||
type: 'error',
|
||||
onClick: handleDelete.bind(null, record),
|
||||
auth: ['sys:operLog:delete'],
|
||||
},
|
||||
],
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
function addTable() {
|
||||
showModal.value = true;
|
||||
}
|
||||
|
||||
const loadDataTable = async (res) => {
|
||||
const result = await getOperLogList({ ...formParams, ...res });
|
||||
return result;
|
||||
};
|
||||
|
||||
function onCheckedRow(keys) {
|
||||
rowKeys.value = keys;
|
||||
}
|
||||
|
||||
function reloadTable(noRefresh = '') {
|
||||
basicTableRef.value.reload(noRefresh ? {} : { pageNo: 1 });
|
||||
}
|
||||
|
||||
function handleSubmit(values: Recordable) {
|
||||
for (const key in formParams) {
|
||||
formParams[key] = '';
|
||||
}
|
||||
for (const key in values) {
|
||||
formParams[key] = values[key];
|
||||
}
|
||||
reloadTable();
|
||||
}
|
||||
|
||||
function handleReset(values: Recordable) {
|
||||
for (const key in formParams) {
|
||||
formParams[key] = '';
|
||||
}
|
||||
for (const key in values) {
|
||||
formParams[key] = values[key];
|
||||
}
|
||||
reloadTable();
|
||||
}
|
||||
|
||||
const [register, { }] = useForm({
|
||||
gridProps: { cols: '1 s:1 m:2 l:3 xl:4 2xl:4' },
|
||||
labelWidth: 80,
|
||||
schemas,
|
||||
});
|
||||
|
||||
/**
|
||||
* 执行查看
|
||||
*/
|
||||
async function handleDetail(record: Recordable) {
|
||||
operlogId.value = record.id;
|
||||
editVisible.value = true;
|
||||
await nextTick();
|
||||
createModalRef.value.openModal();
|
||||
}
|
||||
/**
|
||||
* 执行删除
|
||||
* @param id 参数
|
||||
*/
|
||||
async function handleDelete(record) {
|
||||
dialog.warning({
|
||||
title: '提示',
|
||||
content: '确定要删除？',
|
||||
positiveText: '确定',
|
||||
negativeText: '取消',
|
||||
onPositiveClick: async () => {
|
||||
record.id ? await operLogDelete(record.id) : await operLogBatchDelete(rowKeys.value);
|
||||
message.success('删除成功');
|
||||
reloadTable();
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
92
src/views/system/logger/operLog/columns.ts
Normal file
92
src/views/system/logger/operLog/columns.ts
Normal file
@ -0,0 +1,92 @@
|
||||
import { h } from 'vue';
|
||||
import { NTag } from 'naive-ui';
|
||||
|
||||
export const columns = [
|
||||
{
|
||||
type: 'selection',
|
||||
width: 50,
|
||||
fixed:"left"
|
||||
},
|
||||
{
|
||||
title: 'ID',
|
||||
key: 'id',
|
||||
fixed: 'left',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '日志标题',
|
||||
key: 'title',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '操作用户',
|
||||
key: 'createUser',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '请求ip',
|
||||
key: 'ip',
|
||||
width: 140,
|
||||
},
|
||||
{
|
||||
title: '浏览器',
|
||||
key: 'browser',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '操作系统',
|
||||
key: 'os',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '操作类型',
|
||||
key: 'typeText',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '操作来源',
|
||||
key: 'sourceText',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '请求方式',
|
||||
key: 'requestMethod',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '请求URL',
|
||||
key: 'url',
|
||||
width: 150,
|
||||
},
|
||||
{
|
||||
title: '请求地区',
|
||||
key: 'location',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '请求耗时',
|
||||
key: 'consumeTime',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
key: 'status',
|
||||
render(record) {
|
||||
return h(
|
||||
NTag,
|
||||
{
|
||||
type: record.status == 0 ? 'success' : 'error',
|
||||
},
|
||||
{
|
||||
default: () => (record.status == 0 ? '正常' : '异常'),
|
||||
},
|
||||
);
|
||||
},
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
key: 'createTime',
|
||||
width: 180,
|
||||
}
|
||||
];
|
||||
109
src/views/system/logger/operLog/edit.vue
Normal file
109
src/views/system/logger/operLog/edit.vue
Normal file
@ -0,0 +1,109 @@
|
||||
<template>
|
||||
<basicModal @register="modalRegister" ref="modalRef" class="basicModal basicFormModal">
|
||||
<template #default>
|
||||
<n-descriptions class="margin-top" :column="2" bordered :labelStyle="{ width: '120px' }" label-placement="left">
|
||||
<n-descriptions-item label="日志标题">
|
||||
{{ formData.title }}
|
||||
</n-descriptions-item>
|
||||
<n-descriptions-item label="操作用户">
|
||||
{{ formData.createUser }}
|
||||
</n-descriptions-item>
|
||||
<n-descriptions-item label="IP地址">
|
||||
{{ formData.ip }}
|
||||
</n-descriptions-item>
|
||||
<n-descriptions-item label="操作系统">
|
||||
{{ formData.os }}
|
||||
</n-descriptions-item>
|
||||
<n-descriptions-item label="操作浏览器">
|
||||
{{ formData.browser }}
|
||||
</n-descriptions-item>
|
||||
<n-descriptions-item label="请求耗时"> {{ formData.consumeTime }}s </n-descriptions-item>
|
||||
<n-descriptions-item label="请求方式">
|
||||
{{ formData.requestMethod }}
|
||||
</n-descriptions-item>
|
||||
<n-descriptions-item label="请求状态">
|
||||
<n-tag :type="formData.status ? 'danger' : 'success'">{{
|
||||
formData.status ? '异常' : '正常'
|
||||
}}</n-tag>
|
||||
</n-descriptions-item>
|
||||
<n-descriptions-item label="调用方法" :span="3">
|
||||
{{ formData.method }}
|
||||
</n-descriptions-item>
|
||||
<n-descriptions-item label="请求参数" :span="3">
|
||||
{{ formData.param }}
|
||||
</n-descriptions-item>
|
||||
<n-descriptions-item label="返回结果" :span="3">
|
||||
{{ formData.result }}
|
||||
</n-descriptions-item>
|
||||
</n-descriptions>
|
||||
</template>
|
||||
<template #action>
|
||||
<n-button @click="handleClose">取消</n-button>
|
||||
</template>
|
||||
</basicModal>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { getOperLogDetail } from '@/api/system/operLog';
|
||||
import { onMounted, ref } from 'vue';
|
||||
import { useModal } from '@/components/Modal';
|
||||
|
||||
/**
|
||||
* 定义参数变量
|
||||
*/
|
||||
const emit = defineEmits(['success', 'update:visible']);
|
||||
const formData = ref({});
|
||||
const [modalRegister, { openModal, setSubLoading }] = useModal({
|
||||
title: '操作日志详情',
|
||||
subBtuText: '确定',
|
||||
width: 800,
|
||||
});
|
||||
|
||||
/**
|
||||
* 定义接收的参数
|
||||
*/
|
||||
const props = defineProps({
|
||||
visible: {
|
||||
type: Boolean,
|
||||
required: true,
|
||||
default: false,
|
||||
},
|
||||
operlogId: {
|
||||
type: Number,
|
||||
required: true,
|
||||
default: 0,
|
||||
},
|
||||
});
|
||||
|
||||
/**
|
||||
* 关闭窗体
|
||||
*/
|
||||
const handleClose = () => {
|
||||
emit('update:visible', false);
|
||||
};
|
||||
|
||||
/**
|
||||
* 设置表单数据
|
||||
*/
|
||||
const setFormData = async () => {
|
||||
const data = await getOperLogDetail(props.operlogId);
|
||||
formData.value = data;
|
||||
};
|
||||
|
||||
/**
|
||||
* 钩子函数
|
||||
*/
|
||||
onMounted(() => {
|
||||
if (props.operlogId) {
|
||||
setFormData();
|
||||
}
|
||||
});
|
||||
//导出方法
|
||||
defineExpose({
|
||||
openModal,
|
||||
});
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
:deep(.ant-descriptions__body .ant-descriptions__table .ant-descriptions__cell) {
|
||||
word-break: break-all;
|
||||
}
|
||||
</style>
|
||||
30
src/views/system/logger/operLog/querySchemas.ts
Normal file
30
src/views/system/logger/operLog/querySchemas.ts
Normal file
@ -0,0 +1,30 @@
|
||||
import { FormSchema } from '@/components/Form/index';
|
||||
export const schemas: FormSchema[] = [
|
||||
{
|
||||
field: 'title',
|
||||
component: 'NInput',
|
||||
label: '日志标题',
|
||||
componentProps: {
|
||||
placeholder: '请输入日志标题',
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'status',
|
||||
component: 'NSelect',
|
||||
label: '请求状态',
|
||||
componentProps: {
|
||||
placeholder: '请选择状态',
|
||||
clearable: true,
|
||||
options: [
|
||||
{
|
||||
label: '正常',
|
||||
value: '0',
|
||||
},
|
||||
{
|
||||
label: '异常',
|
||||
value: '1',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
];
|
||||
11
src/views/system/role/querySchemas.ts
Normal file
11
src/views/system/role/querySchemas.ts
Normal file
@ -0,0 +1,11 @@
|
||||
import { FormSchema } from '@/components/Form/index';
|
||||
export const schemas: FormSchema[] = [
|
||||
{
|
||||
field: 'name',
|
||||
component: 'NInput',
|
||||
label: '角色名称',
|
||||
componentProps: {
|
||||
placeholder: '请输入角色名称',
|
||||
},
|
||||
},
|
||||
];
|
||||
Loading…
Reference in New Issue
Block a user