feat: 完成在线用户、登录日志、操作日志页面
This commit is contained in:
橙子
12
Yi.Pure.Vue3/src/api/monitor/online.ts
Normal file
12
Yi.Pure.Vue3/src/api/monitor/online.ts
Normal file
@@ -0,0 +1,12 @@
|
||||
import { http } from "@/utils/http";
|
||||
import type { Result, ResultPage } from "@/api/result";
|
||||
|
||||
/** 查询在线用户列表 */
|
||||
export const getOnlineList = (query?: object) => {
|
||||
return http.request<ResultPage>("get", "/online", { params: query });
|
||||
};
|
||||
|
||||
/** 强退用户 */
|
||||
export const forceLogout = (tokenId?: object) => {
|
||||
return http.request<Result>("delete", `/online/${tokenId}`, {});
|
||||
};
|
||||
@@ -101,6 +101,9 @@ const onLogin = async (formEl: FormInstance | undefined) => {
|
||||
message(t("login.pureLoginFail"), { type: "error" });
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
getCode();
|
||||
})
|
||||
.finally(() => (loading.value = false));
|
||||
}
|
||||
});
|
||||
|
||||
173
Yi.Pure.Vue3/src/views/monitor/logs/login/hook.tsx
Normal file
173
Yi.Pure.Vue3/src/views/monitor/logs/login/hook.tsx
Normal file
@@ -0,0 +1,173 @@
|
||||
import dayjs from "dayjs";
|
||||
import { message } from "@/utils/message";
|
||||
import { getKeyList } from "@pureadmin/utils";
|
||||
import { usePublicHooks } from "@/views/system/hooks";
|
||||
import type { PaginationProps } from "@pureadmin/table";
|
||||
import { type Ref, reactive, ref, onMounted, toRaw } from "vue";
|
||||
import { getLoginLoglist } from "@/api/log/loginLog";
|
||||
|
||||
export function useRole(tableRef: Ref) {
|
||||
const form = reactive({
|
||||
loginUser: "",
|
||||
state: "",
|
||||
creationTime: [],
|
||||
skipCount: 1,
|
||||
maxResultCount: 10
|
||||
});
|
||||
const dataList = ref([]);
|
||||
const loading = ref(true);
|
||||
const selectedNum = ref(0);
|
||||
const { tagStyle } = usePublicHooks();
|
||||
|
||||
const pagination = reactive<PaginationProps>({
|
||||
total: 0,
|
||||
pageSize: 10,
|
||||
currentPage: 1,
|
||||
background: true
|
||||
});
|
||||
const columns: TableColumnList = [
|
||||
{
|
||||
label: "勾选列", // 如果需要表格多选，此处label必须设置
|
||||
type: "selection",
|
||||
fixed: "left",
|
||||
reserveSelection: true // 数据刷新后保留选项
|
||||
},
|
||||
{
|
||||
label: "序号",
|
||||
prop: "id",
|
||||
minWidth: 90
|
||||
},
|
||||
{
|
||||
label: "登录用户",
|
||||
prop: "loginUser",
|
||||
minWidth: 100
|
||||
},
|
||||
{
|
||||
label: "登录 IP",
|
||||
prop: "loginIp",
|
||||
minWidth: 140
|
||||
},
|
||||
{
|
||||
label: "登录地点",
|
||||
prop: "loginLocation",
|
||||
minWidth: 140
|
||||
},
|
||||
{
|
||||
label: "操作系统",
|
||||
prop: "os",
|
||||
minWidth: 100
|
||||
},
|
||||
{
|
||||
label: "浏览器类型",
|
||||
prop: "browser",
|
||||
minWidth: 100
|
||||
},
|
||||
{
|
||||
label: "登录状态",
|
||||
prop: "state",
|
||||
minWidth: 100,
|
||||
cellRenderer: ({ row, props }) => (
|
||||
<el-tag size={props.size} style={tagStyle.value(1)}>
|
||||
{1 === 1 ? "成功" : "失败"}
|
||||
</el-tag>
|
||||
)
|
||||
},
|
||||
{
|
||||
label: "登录行为",
|
||||
prop: "logMsg",
|
||||
minWidth: 100
|
||||
},
|
||||
{
|
||||
label: "登录时间",
|
||||
prop: "creationTime",
|
||||
minWidth: 180,
|
||||
formatter: ({ creationTime }) =>
|
||||
dayjs(creationTime).format("YYYY-MM-DD HH:mm:ss")
|
||||
}
|
||||
];
|
||||
function handleSizeChange(val: number) {
|
||||
form.maxResultCount = val;
|
||||
onSearch();
|
||||
}
|
||||
|
||||
function handleCurrentChange(val: number) {
|
||||
form.skipCount = val;
|
||||
onSearch();
|
||||
}
|
||||
|
||||
/** 当CheckBox选择项发生变化时会触发该事件 */
|
||||
function handleSelectionChange(val) {
|
||||
selectedNum.value = val.length;
|
||||
// 重置表格高度
|
||||
tableRef.value.setAdaptive();
|
||||
}
|
||||
|
||||
/** 取消选择 */
|
||||
function onSelectionCancel() {
|
||||
selectedNum.value = 0;
|
||||
// 用于多选表格，清空用户的选择
|
||||
tableRef.value.getTableRef().clearSelection();
|
||||
}
|
||||
|
||||
/** 批量删除 */
|
||||
function onbatchDel() {
|
||||
// 返回当前选中的行
|
||||
const curSelected = tableRef.value.getTableRef().getSelectionRows();
|
||||
// 接下来根据实际业务，通过选中行的某项数据，比如下面的id，调用接口进行批量删除
|
||||
message(`已删除序号为 ${getKeyList(curSelected, "id")} 的数据`, {
|
||||
type: "success"
|
||||
});
|
||||
tableRef.value.getTableRef().clearSelection();
|
||||
onSearch();
|
||||
}
|
||||
|
||||
/** 清空日志 */
|
||||
function clearAll() {
|
||||
// 根据实际业务，调用接口删除所有日志数据
|
||||
message("已删除所有日志数据", {
|
||||
type: "success"
|
||||
});
|
||||
onSearch();
|
||||
}
|
||||
|
||||
async function onSearch() {
|
||||
loading.value = true;
|
||||
const { data } = await getLoginLoglist(
|
||||
toRaw({
|
||||
...form,
|
||||
startTime: form.creationTime[0],
|
||||
endTime: form.creationTime[1]
|
||||
})
|
||||
);
|
||||
dataList.value = data.items;
|
||||
pagination.total = data.totalCount;
|
||||
loading.value = false;
|
||||
}
|
||||
|
||||
const resetForm = formEl => {
|
||||
if (!formEl) return;
|
||||
formEl.resetFields();
|
||||
onSearch();
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
onSearch();
|
||||
});
|
||||
|
||||
return {
|
||||
form,
|
||||
loading,
|
||||
columns,
|
||||
dataList,
|
||||
pagination,
|
||||
selectedNum,
|
||||
onSearch,
|
||||
clearAll,
|
||||
resetForm,
|
||||
onbatchDel,
|
||||
handleSizeChange,
|
||||
onSelectionCancel,
|
||||
handleCurrentChange,
|
||||
handleSelectionChange
|
||||
};
|
||||
}
|
||||
164
Yi.Pure.Vue3/src/views/monitor/logs/login/index.vue
Normal file
164
Yi.Pure.Vue3/src/views/monitor/logs/login/index.vue
Normal file
@@ -0,0 +1,164 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import { useRole } from "./hook";
|
||||
import { getPickerShortcuts } from "../../utils";
|
||||
import { PureTableBar } from "@/components/RePureTableBar";
|
||||
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
|
||||
|
||||
import Delete from "@iconify-icons/ep/delete";
|
||||
import Refresh from "@iconify-icons/ep/refresh";
|
||||
|
||||
defineOptions({
|
||||
name: "LoginLog"
|
||||
});
|
||||
|
||||
const formRef = ref();
|
||||
const tableRef = ref();
|
||||
|
||||
const {
|
||||
form,
|
||||
loading,
|
||||
columns,
|
||||
dataList,
|
||||
pagination,
|
||||
selectedNum,
|
||||
onSearch,
|
||||
clearAll,
|
||||
resetForm,
|
||||
onbatchDel,
|
||||
handleSizeChange,
|
||||
onSelectionCancel,
|
||||
handleCurrentChange,
|
||||
handleSelectionChange
|
||||
} = useRole(tableRef);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="main">
|
||||
<el-form
|
||||
ref="formRef"
|
||||
:inline="true"
|
||||
:model="form"
|
||||
class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px] overflow-auto"
|
||||
>
|
||||
<el-form-item label="用户名" prop="loginUser">
|
||||
<el-input
|
||||
v-model="form.loginUser"
|
||||
placeholder="请输入用户名"
|
||||
clearable
|
||||
class="!w-[150px]"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="登录状态" prop="state">
|
||||
<el-select
|
||||
v-model="form.state"
|
||||
placeholder="请选择"
|
||||
clearable
|
||||
class="!w-[150px]"
|
||||
>
|
||||
<el-option label="成功" :value="true" />
|
||||
<el-option label="失败" :value="false" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="登录时间" prop="creationTime">
|
||||
<el-date-picker
|
||||
v-model="form.creationTime"
|
||||
:shortcuts="getPickerShortcuts()"
|
||||
type="datetimerange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期时间"
|
||||
end-placeholder="结束日期时间"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button
|
||||
type="primary"
|
||||
:icon="useRenderIcon('ri:search-line')"
|
||||
:loading="loading"
|
||||
@click="onSearch"
|
||||
>
|
||||
搜索
|
||||
</el-button>
|
||||
<el-button :icon="useRenderIcon(Refresh)" @click="resetForm(formRef)">
|
||||
重置
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<PureTableBar
|
||||
title="登录日志"
|
||||
:columns="columns"
|
||||
@refresh="onSearch"
|
||||
>
|
||||
<template #buttons>
|
||||
<el-popconfirm title="确定要删除所有日志数据吗？" @confirm="clearAll">
|
||||
<template #reference>
|
||||
<el-button type="danger" :icon="useRenderIcon(Delete)">
|
||||
清空日志
|
||||
</el-button>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
</template>
|
||||
<template v-slot="{ size, dynamicColumns }">
|
||||
<div
|
||||
v-if="selectedNum > 0"
|
||||
v-motion-fade
|
||||
class="bg-[var(--el-fill-color-light)] w-full h-[46px] mb-2 pl-4 flex items-center"
|
||||
>
|
||||
<div class="flex-auto">
|
||||
<span
|
||||
style="font-size: var(--el-font-size-base)"
|
||||
class="text-[rgba(42,46,54,0.5)] dark:text-[rgba(220,220,242,0.5)]"
|
||||
>
|
||||
已选 {{ selectedNum }} 项
|
||||
</span>
|
||||
<el-button type="primary" text @click="onSelectionCancel">
|
||||
取消选择
|
||||
</el-button>
|
||||
</div>
|
||||
<el-popconfirm title="是否确认删除?" @confirm="onbatchDel">
|
||||
<template #reference>
|
||||
<el-button type="danger" text class="mr-1"> 批量删除 </el-button>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
</div>
|
||||
<pure-table
|
||||
ref="tableRef"
|
||||
row-key="id"
|
||||
align-whole="center"
|
||||
table-layout="auto"
|
||||
:loading="loading"
|
||||
:size="size"
|
||||
adaptive
|
||||
:adaptiveConfig="{ offsetBottom: 108 }"
|
||||
:data="dataList"
|
||||
:columns="dynamicColumns"
|
||||
:pagination="{ ...pagination, size }"
|
||||
:header-cell-style="{
|
||||
background: 'var(--el-fill-color-light)',
|
||||
color: 'var(--el-text-color-primary)'
|
||||
}"
|
||||
@selection-change="handleSelectionChange"
|
||||
@page-size-change="handleSizeChange"
|
||||
@page-current-change="handleCurrentChange"
|
||||
/>
|
||||
</template>
|
||||
</PureTableBar>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
:deep(.el-dropdown-menu__item i) {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
margin: 24px 24px 0 !important;
|
||||
}
|
||||
|
||||
.search-form {
|
||||
:deep(.el-form-item) {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
79
Yi.Pure.Vue3/src/views/monitor/logs/operation/detail.vue
Normal file
79
Yi.Pure.Vue3/src/views/monitor/logs/operation/detail.vue
Normal file
@@ -0,0 +1,79 @@
|
||||
<script setup lang="tsx">
|
||||
import { ref } from "vue";
|
||||
import "vue-json-pretty/lib/styles.css";
|
||||
import VueJsonPretty from "vue-json-pretty";
|
||||
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
});
|
||||
|
||||
const columns = [
|
||||
{
|
||||
label: "IP 地址",
|
||||
prop: "operIp"
|
||||
},
|
||||
{
|
||||
label: "地点",
|
||||
prop: "operLocation"
|
||||
},
|
||||
{
|
||||
label: "所属模块",
|
||||
prop: "title"
|
||||
},
|
||||
{
|
||||
label: "请求时间",
|
||||
prop: "creationTime"
|
||||
},
|
||||
{
|
||||
label: "请求方法",
|
||||
prop: "requestMethod"
|
||||
},
|
||||
{
|
||||
label: "请求接口",
|
||||
prop: "method",
|
||||
copy: true
|
||||
}
|
||||
];
|
||||
|
||||
const dataList = ref([
|
||||
{
|
||||
title: "响应体",
|
||||
name: "requestResult",
|
||||
data:
|
||||
(props.data[0] as any).requestResult == null
|
||||
? ""
|
||||
: JSON.parse((props.data[0] as any).requestResult)
|
||||
},
|
||||
{
|
||||
title: "请求体",
|
||||
name: "requestParam",
|
||||
data:
|
||||
(props.data[0] as any).requestParam == null
|
||||
? ""
|
||||
: JSON.parse((props.data[0] as any).requestParam)
|
||||
}
|
||||
]);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<el-scrollbar>
|
||||
<PureDescriptions border :data="data" :columns="columns" :column="5" />
|
||||
</el-scrollbar>
|
||||
<el-tabs :modelValue="'requestResult'" type="border-card" class="mt-4">
|
||||
<el-tab-pane
|
||||
v-for="(item, index) in dataList"
|
||||
:key="index"
|
||||
:name="item.name"
|
||||
:label="item.title"
|
||||
>
|
||||
<el-scrollbar max-height="calc(100vh - 240px)">
|
||||
<vue-json-pretty v-model:data="item.data" />
|
||||
</el-scrollbar>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</template>
|
||||
192
Yi.Pure.Vue3/src/views/monitor/logs/operation/hook.tsx
Normal file
192
Yi.Pure.Vue3/src/views/monitor/logs/operation/hook.tsx
Normal file
@@ -0,0 +1,192 @@
|
||||
import dayjs from "dayjs";
|
||||
import { message } from "@/utils/message";
|
||||
import { getKeyList } from "@pureadmin/utils";
|
||||
import { usePublicHooks } from "@/views/system/hooks";
|
||||
import type { PaginationProps } from "@pureadmin/table";
|
||||
import { type Ref, reactive, ref, onMounted, toRaw } from "vue";
|
||||
import { getOperLoglist } from "@/api/log/operLog";
|
||||
import { addDialog } from "@/components/ReDialog/index";
|
||||
import Detail from "./detail.vue";
|
||||
|
||||
export function useRole(tableRef: Ref) {
|
||||
const form = reactive({
|
||||
title: "",
|
||||
state: "",
|
||||
creationTime: [],
|
||||
skipCount: 1,
|
||||
maxResultCount: 10
|
||||
});
|
||||
const dataList = ref([]);
|
||||
const loading = ref(true);
|
||||
const selectedNum = ref(0);
|
||||
const { tagStyle } = usePublicHooks();
|
||||
|
||||
const pagination = reactive<PaginationProps>({
|
||||
total: 0,
|
||||
pageSize: 10,
|
||||
currentPage: 1,
|
||||
background: true
|
||||
});
|
||||
const columns: TableColumnList = [
|
||||
{
|
||||
label: "勾选列", // 如果需要表格多选，此处label必须设置
|
||||
type: "selection",
|
||||
fixed: "left",
|
||||
reserveSelection: true // 数据刷新后保留选项
|
||||
},
|
||||
{
|
||||
label: "序号",
|
||||
prop: "id",
|
||||
minWidth: 200
|
||||
},
|
||||
{
|
||||
label: "操作人员",
|
||||
prop: "operUser",
|
||||
minWidth: 100
|
||||
},
|
||||
{
|
||||
label: "所属模块",
|
||||
prop: "title",
|
||||
minWidth: 140
|
||||
},
|
||||
{
|
||||
label: "操作类型",
|
||||
prop: "operType",
|
||||
minWidth: 100,
|
||||
cellRenderer: ({ row, props }) => (
|
||||
<el-tag size={props.size} style={tagStyle.value(1)}>
|
||||
{row.operType}
|
||||
</el-tag>
|
||||
)
|
||||
},
|
||||
{
|
||||
label: "操作 IP",
|
||||
prop: "operIp",
|
||||
minWidth: 100
|
||||
},
|
||||
{
|
||||
label: "操作地点",
|
||||
prop: "operLocation",
|
||||
minWidth: 140
|
||||
},
|
||||
{
|
||||
label: "操作状态",
|
||||
prop: "status",
|
||||
minWidth: 100,
|
||||
cellRenderer: ({ row, props }) => (
|
||||
<el-tag size={props.size} style={tagStyle.value(1)}>
|
||||
{1 === 1 ? "成功" : "失败"}
|
||||
</el-tag>
|
||||
)
|
||||
},
|
||||
{
|
||||
label: "操作时间",
|
||||
prop: "operatingTime",
|
||||
minWidth: 180,
|
||||
formatter: ({ operatingTime }) =>
|
||||
dayjs(operatingTime).format("YYYY-MM-DD HH:mm:ss")
|
||||
},
|
||||
{
|
||||
label: "操作",
|
||||
fixed: "right",
|
||||
slot: "operation"
|
||||
}
|
||||
];
|
||||
|
||||
function handleSizeChange(val: number) {
|
||||
console.log(`${val} items per page`);
|
||||
}
|
||||
|
||||
function handleCurrentChange(val: number) {
|
||||
console.log(`current page: ${val}`);
|
||||
}
|
||||
|
||||
/** 当CheckBox选择项发生变化时会触发该事件 */
|
||||
function handleSelectionChange(val) {
|
||||
selectedNum.value = val.length;
|
||||
// 重置表格高度
|
||||
tableRef.value.setAdaptive();
|
||||
}
|
||||
|
||||
/** 取消选择 */
|
||||
function onSelectionCancel() {
|
||||
selectedNum.value = 0;
|
||||
// 用于多选表格，清空用户的选择
|
||||
tableRef.value.getTableRef().clearSelection();
|
||||
}
|
||||
|
||||
/** 批量删除 */
|
||||
function onbatchDel() {
|
||||
// 返回当前选中的行
|
||||
const curSelected = tableRef.value.getTableRef().getSelectionRows();
|
||||
// 接下来根据实际业务，通过选中行的某项数据，比如下面的id，调用接口进行批量删除
|
||||
message(`已删除序号为 ${getKeyList(curSelected, "id")} 的数据`, {
|
||||
type: "success"
|
||||
});
|
||||
tableRef.value.getTableRef().clearSelection();
|
||||
onSearch();
|
||||
}
|
||||
|
||||
/** 清空日志 */
|
||||
function clearAll() {
|
||||
// 根据实际业务，调用接口删除所有日志数据
|
||||
message("已删除所有日志数据", {
|
||||
type: "success"
|
||||
});
|
||||
onSearch();
|
||||
}
|
||||
|
||||
async function onSearch() {
|
||||
loading.value = true;
|
||||
const { data } = await getOperLoglist(
|
||||
toRaw({
|
||||
...form,
|
||||
startTime: form.creationTime[0],
|
||||
endTime: form.creationTime[1]
|
||||
})
|
||||
);
|
||||
dataList.value = data.items;
|
||||
pagination.total = data.totalCount;
|
||||
loading.value = false;
|
||||
}
|
||||
|
||||
const resetForm = formEl => {
|
||||
if (!formEl) return;
|
||||
formEl.resetFields();
|
||||
onSearch();
|
||||
};
|
||||
|
||||
function onDetail(row) {
|
||||
addDialog({
|
||||
title: "操作日志详情",
|
||||
fullscreen: true,
|
||||
hideFooter: true,
|
||||
contentRenderer: () => Detail,
|
||||
props: {
|
||||
data: [row]
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
onSearch();
|
||||
});
|
||||
|
||||
return {
|
||||
form,
|
||||
loading,
|
||||
columns,
|
||||
dataList,
|
||||
pagination,
|
||||
selectedNum,
|
||||
onDetail,
|
||||
onSearch,
|
||||
clearAll,
|
||||
resetForm,
|
||||
onbatchDel,
|
||||
handleSizeChange,
|
||||
onSelectionCancel,
|
||||
handleCurrentChange,
|
||||
handleSelectionChange
|
||||
};
|
||||
}
|
||||
176
Yi.Pure.Vue3/src/views/monitor/logs/operation/index.vue
Normal file
176
Yi.Pure.Vue3/src/views/monitor/logs/operation/index.vue
Normal file
@@ -0,0 +1,176 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import { useRole } from "./hook";
|
||||
import { getPickerShortcuts } from "../../utils";
|
||||
import { PureTableBar } from "@/components/RePureTableBar";
|
||||
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
|
||||
|
||||
import Delete from "@iconify-icons/ep/delete";
|
||||
import Refresh from "@iconify-icons/ep/refresh";
|
||||
import View from "@iconify-icons/ep/view";
|
||||
|
||||
defineOptions({
|
||||
name: "OperationLog"
|
||||
});
|
||||
|
||||
const formRef = ref();
|
||||
const tableRef = ref();
|
||||
|
||||
const {
|
||||
form,
|
||||
timeQuery,
|
||||
loading,
|
||||
columns,
|
||||
dataList,
|
||||
pagination,
|
||||
selectedNum,
|
||||
onSearch,
|
||||
clearAll,
|
||||
resetForm,
|
||||
onbatchDel,
|
||||
handleSizeChange,
|
||||
onSelectionCancel,
|
||||
handleCurrentChange,
|
||||
handleSelectionChange,
|
||||
onDetail
|
||||
} = useRole(tableRef);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="main">
|
||||
<el-form
|
||||
ref="formRef"
|
||||
:inline="true"
|
||||
:model="form"
|
||||
class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px] overflow-auto"
|
||||
>
|
||||
<el-form-item label="所属模块" prop="title">
|
||||
<el-input
|
||||
v-model="form.title"
|
||||
placeholder="请输入所属模块"
|
||||
clearable
|
||||
class="!w-[170px]"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="操作状态" prop="state">
|
||||
<el-select
|
||||
v-model="form.state"
|
||||
placeholder="请选择"
|
||||
clearable
|
||||
class="!w-[150px]"
|
||||
>
|
||||
<el-option label="成功" :value="true" />
|
||||
<el-option label="失败" :value="false" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="操作时间" prop="creationTime">
|
||||
<el-date-picker
|
||||
v-model="form.creationTime"
|
||||
:shortcuts="getPickerShortcuts()"
|
||||
type="datetimerange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期时间"
|
||||
end-placeholder="结束日期时间"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button
|
||||
type="primary"
|
||||
:icon="useRenderIcon('ri:search-line')"
|
||||
:loading="loading"
|
||||
@click="onSearch"
|
||||
>
|
||||
搜索
|
||||
</el-button>
|
||||
<el-button :icon="useRenderIcon(Refresh)" @click="resetForm(formRef)">
|
||||
重置
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<PureTableBar title="操作日志" :columns="columns" @refresh="onSearch">
|
||||
<template #buttons>
|
||||
<el-popconfirm title="确定要删除所有日志数据吗？" @confirm="clearAll">
|
||||
<template #reference>
|
||||
<el-button type="danger" :icon="useRenderIcon(Delete)">
|
||||
清空日志
|
||||
</el-button>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
</template>
|
||||
<template v-slot="{ size, dynamicColumns }">
|
||||
<div
|
||||
v-if="selectedNum > 0"
|
||||
v-motion-fade
|
||||
class="bg-[var(--el-fill-color-light)] w-full h-[46px] mb-2 pl-4 flex items-center"
|
||||
>
|
||||
<div class="flex-auto">
|
||||
<span
|
||||
style="font-size: var(--el-font-size-base)"
|
||||
class="text-[rgba(42,46,54,0.5)] dark:text-[rgba(220,220,242,0.5)]"
|
||||
>
|
||||
已选 {{ selectedNum }} 项
|
||||
</span>
|
||||
<el-button type="primary" text @click="onSelectionCancel">
|
||||
取消选择
|
||||
</el-button>
|
||||
</div>
|
||||
<el-popconfirm title="是否确认删除?" @confirm="onbatchDel">
|
||||
<template #reference>
|
||||
<el-button type="danger" text class="mr-1"> 批量删除 </el-button>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
</div>
|
||||
<pure-table
|
||||
ref="tableRef"
|
||||
row-key="id"
|
||||
align-whole="center"
|
||||
table-layout="auto"
|
||||
:loading="loading"
|
||||
:size="size"
|
||||
adaptive
|
||||
:adaptiveConfig="{ offsetBottom: 108 }"
|
||||
:data="dataList"
|
||||
:columns="dynamicColumns"
|
||||
:pagination="{ ...pagination, size }"
|
||||
:header-cell-style="{
|
||||
background: 'var(--el-fill-color-light)',
|
||||
color: 'var(--el-text-color-primary)'
|
||||
}"
|
||||
@selection-change="handleSelectionChange"
|
||||
@page-size-change="handleSizeChange"
|
||||
@page-current-change="handleCurrentChange"
|
||||
>
|
||||
<template #operation="{ row }">
|
||||
<el-button
|
||||
class="reset-margin !outline-none"
|
||||
link
|
||||
type="primary"
|
||||
:size="size"
|
||||
:icon="useRenderIcon(View)"
|
||||
@click="onDetail(row)"
|
||||
>
|
||||
详情
|
||||
</el-button>
|
||||
</template>
|
||||
</pure-table>
|
||||
</template>
|
||||
</PureTableBar>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
:deep(.el-dropdown-menu__item i) {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
margin: 24px 24px 0 !important;
|
||||
}
|
||||
|
||||
.search-form {
|
||||
:deep(.el-form-item) {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
73
Yi.Pure.Vue3/src/views/monitor/logs/system/detail.vue
Normal file
73
Yi.Pure.Vue3/src/views/monitor/logs/system/detail.vue
Normal file
@@ -0,0 +1,73 @@
|
||||
<script setup lang="tsx">
|
||||
import { ref } from "vue";
|
||||
import "vue-json-pretty/lib/styles.css";
|
||||
import VueJsonPretty from "vue-json-pretty";
|
||||
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
});
|
||||
|
||||
const columns = [
|
||||
{
|
||||
label: "IP 地址",
|
||||
prop: "operIp"
|
||||
},
|
||||
{
|
||||
label: "地点",
|
||||
prop: "operLocation"
|
||||
},
|
||||
{
|
||||
label: "所属模块",
|
||||
prop: "title"
|
||||
},
|
||||
{
|
||||
label: "请求时间",
|
||||
prop: "creationTime"
|
||||
},
|
||||
{
|
||||
label: "请求方法",
|
||||
prop: "requestMethod"
|
||||
},
|
||||
{
|
||||
label: "请求接口",
|
||||
prop: "method",
|
||||
copy: true
|
||||
}
|
||||
];
|
||||
|
||||
const dataList = ref([
|
||||
{
|
||||
title: "响应体",
|
||||
name: "requestResult",
|
||||
data: (props.data[0] as any).requestResult
|
||||
},
|
||||
{
|
||||
title: "请求体",
|
||||
name: "requestParam",
|
||||
data: (props.data[0] as any).requestParam
|
||||
}
|
||||
]);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<el-scrollbar>
|
||||
<PureDescriptions border :data="data" :columns="columns" :column="5" />
|
||||
</el-scrollbar>
|
||||
<el-tabs :modelValue="'requestResult'" type="border-card" class="mt-4">
|
||||
<el-tab-pane
|
||||
v-for="(item, index) in dataList"
|
||||
:key="index"
|
||||
:name="item.name"
|
||||
:label="item.title"
|
||||
>
|
||||
<el-scrollbar max-height="calc(100vh - 240px)">
|
||||
<vue-json-pretty v-model:data="item.data" />
|
||||
</el-scrollbar>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</template>
|
||||
244
Yi.Pure.Vue3/src/views/monitor/logs/system/hook.tsx
Normal file
244
Yi.Pure.Vue3/src/views/monitor/logs/system/hook.tsx
Normal file
@@ -0,0 +1,244 @@
|
||||
import dayjs from "dayjs";
|
||||
import Detail from "../detail.vue";
|
||||
import { message } from "@/utils/message";
|
||||
import { addDialog } from "@/components/ReDialog";
|
||||
import type { PaginationProps } from "@pureadmin/table";
|
||||
import { type Ref, reactive, ref, onMounted, toRaw } from "vue";
|
||||
import { getKeyList, useCopyToClipboard } from "@pureadmin/utils";
|
||||
import { getSystemLogsList, getSystemLogsDetail } from "@/api/system";
|
||||
import Info from "@iconify-icons/ri/question-line";
|
||||
|
||||
export function useRole(tableRef: Ref) {
|
||||
const form = reactive({
|
||||
module: "",
|
||||
requestTime: ""
|
||||
});
|
||||
const dataList = ref([]);
|
||||
const loading = ref(true);
|
||||
const selectedNum = ref(0);
|
||||
const { copied, update } = useCopyToClipboard();
|
||||
|
||||
const pagination = reactive<PaginationProps>({
|
||||
total: 0,
|
||||
pageSize: 10,
|
||||
currentPage: 1,
|
||||
background: true
|
||||
});
|
||||
|
||||
// const getLevelType = (type, text = false) => {
|
||||
// switch (type) {
|
||||
// case 0:
|
||||
// return text ? "debug" : "primary";
|
||||
// case 1:
|
||||
// return text ? "info" : "success";
|
||||
// case 2:
|
||||
// return text ? "warn" : "info";
|
||||
// case 3:
|
||||
// return text ? "error" : "warning";
|
||||
// case 4:
|
||||
// return text ? "fatal" : "danger";
|
||||
// }
|
||||
// };
|
||||
|
||||
const columns: TableColumnList = [
|
||||
{
|
||||
label: "勾选列", // 如果需要表格多选，此处label必须设置
|
||||
type: "selection",
|
||||
fixed: "left",
|
||||
reserveSelection: true // 数据刷新后保留选项
|
||||
},
|
||||
{
|
||||
label: "ID",
|
||||
prop: "id",
|
||||
minWidth: 90
|
||||
},
|
||||
{
|
||||
label: "所属模块",
|
||||
prop: "module",
|
||||
minWidth: 100
|
||||
},
|
||||
{
|
||||
headerRenderer: () => (
|
||||
<span class="flex-c">
|
||||
请求接口
|
||||
<iconifyIconOffline
|
||||
icon={Info}
|
||||
class="ml-1 cursor-help"
|
||||
v-tippy={{
|
||||
content: "双击下面请求接口进行拷贝"
|
||||
}}
|
||||
/>
|
||||
</span>
|
||||
),
|
||||
prop: "url",
|
||||
minWidth: 140
|
||||
},
|
||||
{
|
||||
label: "请求方法",
|
||||
prop: "method",
|
||||
minWidth: 140
|
||||
},
|
||||
{
|
||||
label: "IP 地址",
|
||||
prop: "ip",
|
||||
minWidth: 100
|
||||
},
|
||||
{
|
||||
label: "地点",
|
||||
prop: "address",
|
||||
minWidth: 140
|
||||
},
|
||||
{
|
||||
label: "操作系统",
|
||||
prop: "system",
|
||||
minWidth: 100
|
||||
},
|
||||
{
|
||||
label: "浏览器类型",
|
||||
prop: "browser",
|
||||
minWidth: 100
|
||||
},
|
||||
// {
|
||||
// label: "级别",
|
||||
// prop: "level",
|
||||
// minWidth: 90,
|
||||
// cellRenderer: ({ row, props }) => (
|
||||
// <el-tag size={props.size} type={getLevelType(row.level)} effect="plain">
|
||||
// {getLevelType(row.level, true)}
|
||||
// </el-tag>
|
||||
// )
|
||||
// },
|
||||
{
|
||||
label: "请求耗时",
|
||||
prop: "takesTime",
|
||||
minWidth: 100,
|
||||
cellRenderer: ({ row, props }) => (
|
||||
<el-tag
|
||||
size={props.size}
|
||||
type={row.takesTime < 1000 ? "success" : "warning"}
|
||||
effect="plain"
|
||||
>
|
||||
{row.takesTime} ms
|
||||
</el-tag>
|
||||
)
|
||||
},
|
||||
{
|
||||
label: "请求时间",
|
||||
prop: "requestTime",
|
||||
minWidth: 180,
|
||||
formatter: ({ requestTime }) =>
|
||||
dayjs(requestTime).format("YYYY-MM-DD HH:mm:ss")
|
||||
},
|
||||
{
|
||||
label: "操作",
|
||||
fixed: "right",
|
||||
slot: "operation"
|
||||
}
|
||||
];
|
||||
|
||||
function handleSizeChange(val: number) {
|
||||
console.log(`${val} items per page`);
|
||||
}
|
||||
|
||||
function handleCurrentChange(val: number) {
|
||||
console.log(`current page: ${val}`);
|
||||
}
|
||||
|
||||
/** 当CheckBox选择项发生变化时会触发该事件 */
|
||||
function handleSelectionChange(val) {
|
||||
selectedNum.value = val.length;
|
||||
// 重置表格高度
|
||||
tableRef.value.setAdaptive();
|
||||
}
|
||||
|
||||
/** 取消选择 */
|
||||
function onSelectionCancel() {
|
||||
selectedNum.value = 0;
|
||||
// 用于多选表格，清空用户的选择
|
||||
tableRef.value.getTableRef().clearSelection();
|
||||
}
|
||||
|
||||
/** 拷贝请求接口，表格单元格被双击时触发 */
|
||||
function handleCellDblclick({ url }, { property }) {
|
||||
if (property !== "url") return;
|
||||
update(url);
|
||||
copied.value
|
||||
? message(`${url} 已拷贝`, { type: "success" })
|
||||
: message("拷贝失败", { type: "warning" });
|
||||
}
|
||||
|
||||
/** 批量删除 */
|
||||
function onbatchDel() {
|
||||
// 返回当前选中的行
|
||||
const curSelected = tableRef.value.getTableRef().getSelectionRows();
|
||||
// 接下来根据实际业务，通过选中行的某项数据，比如下面的id，调用接口进行批量删除
|
||||
message(`已删除序号为 ${getKeyList(curSelected, "id")} 的数据`, {
|
||||
type: "success"
|
||||
});
|
||||
tableRef.value.getTableRef().clearSelection();
|
||||
onSearch();
|
||||
}
|
||||
|
||||
/** 清空日志 */
|
||||
function clearAll() {
|
||||
// 根据实际业务，调用接口删除所有日志数据
|
||||
message("已删除所有日志数据", {
|
||||
type: "success"
|
||||
});
|
||||
onSearch();
|
||||
}
|
||||
|
||||
function onDetail(row) {
|
||||
getSystemLogsDetail({ id: row.id }).then(res => {
|
||||
addDialog({
|
||||
title: "系统日志详情",
|
||||
fullscreen: true,
|
||||
hideFooter: true,
|
||||
contentRenderer: () => Detail,
|
||||
props: {
|
||||
data: [res]
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
async function onSearch() {
|
||||
loading.value = true;
|
||||
const { data } = await getSystemLogsList(toRaw(form));
|
||||
dataList.value = data.items;
|
||||
pagination.total = data.totalCount;
|
||||
|
||||
setTimeout(() => {
|
||||
loading.value = false;
|
||||
}, 500);
|
||||
}
|
||||
|
||||
const resetForm = formEl => {
|
||||
if (!formEl) return;
|
||||
formEl.resetFields();
|
||||
onSearch();
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
onSearch();
|
||||
});
|
||||
|
||||
return {
|
||||
form,
|
||||
loading,
|
||||
columns,
|
||||
dataList,
|
||||
pagination,
|
||||
selectedNum,
|
||||
onSearch,
|
||||
onDetail,
|
||||
clearAll,
|
||||
resetForm,
|
||||
onbatchDel,
|
||||
handleSizeChange,
|
||||
onSelectionCancel,
|
||||
handleCellDblclick,
|
||||
handleCurrentChange,
|
||||
handleSelectionChange
|
||||
};
|
||||
}
|
||||
170
Yi.Pure.Vue3/src/views/monitor/logs/system/index.vue
Normal file
170
Yi.Pure.Vue3/src/views/monitor/logs/system/index.vue
Normal file
@@ -0,0 +1,170 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import { useRole } from "./hook";
|
||||
import { getPickerShortcuts } from "../../utils";
|
||||
import { PureTableBar } from "@/components/RePureTableBar";
|
||||
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
|
||||
|
||||
import View from "@iconify-icons/ep/view";
|
||||
import Delete from "@iconify-icons/ep/delete";
|
||||
import Refresh from "@iconify-icons/ep/refresh";
|
||||
|
||||
defineOptions({
|
||||
name: "SystemLog"
|
||||
});
|
||||
|
||||
const formRef = ref();
|
||||
const tableRef = ref();
|
||||
|
||||
const {
|
||||
form,
|
||||
loading,
|
||||
columns,
|
||||
dataList,
|
||||
pagination,
|
||||
selectedNum,
|
||||
onSearch,
|
||||
onDetail,
|
||||
clearAll,
|
||||
resetForm,
|
||||
onbatchDel,
|
||||
handleSizeChange,
|
||||
onSelectionCancel,
|
||||
handleCellDblclick,
|
||||
handleCurrentChange,
|
||||
handleSelectionChange
|
||||
} = useRole(tableRef);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="main">
|
||||
<el-form
|
||||
ref="formRef"
|
||||
:inline="true"
|
||||
:model="form"
|
||||
class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px] overflow-auto"
|
||||
>
|
||||
<el-form-item label="所属模块" prop="module">
|
||||
<el-input
|
||||
v-model="form.module"
|
||||
placeholder="请输入所属模块"
|
||||
clearable
|
||||
class="!w-[170px]"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="请求时间" prop="requestTime">
|
||||
<el-date-picker
|
||||
v-model="form.requestTime"
|
||||
:shortcuts="getPickerShortcuts()"
|
||||
type="datetimerange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期时间"
|
||||
end-placeholder="结束日期时间"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button
|
||||
type="primary"
|
||||
:icon="useRenderIcon('ri:search-line')"
|
||||
:loading="loading"
|
||||
@click="onSearch"
|
||||
>
|
||||
搜索
|
||||
</el-button>
|
||||
<el-button :icon="useRenderIcon(Refresh)" @click="resetForm(formRef)">
|
||||
重置
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<PureTableBar
|
||||
title="系统日志（仅演示，操作后不生效）"
|
||||
:columns="columns"
|
||||
@refresh="onSearch"
|
||||
>
|
||||
<template #buttons>
|
||||
<el-popconfirm title="确定要删除所有日志数据吗？" @confirm="clearAll">
|
||||
<template #reference>
|
||||
<el-button type="danger" :icon="useRenderIcon(Delete)">
|
||||
清空日志
|
||||
</el-button>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
</template>
|
||||
<template v-slot="{ size, dynamicColumns }">
|
||||
<div
|
||||
v-if="selectedNum > 0"
|
||||
v-motion-fade
|
||||
class="bg-[var(--el-fill-color-light)] w-full h-[46px] mb-2 pl-4 flex items-center"
|
||||
>
|
||||
<div class="flex-auto">
|
||||
<span
|
||||
style="font-size: var(--el-font-size-base)"
|
||||
class="text-[rgba(42,46,54,0.5)] dark:text-[rgba(220,220,242,0.5)]"
|
||||
>
|
||||
已选 {{ selectedNum }} 项
|
||||
</span>
|
||||
<el-button type="primary" text @click="onSelectionCancel">
|
||||
取消选择
|
||||
</el-button>
|
||||
</div>
|
||||
<el-popconfirm title="是否确认删除?" @confirm="onbatchDel">
|
||||
<template #reference>
|
||||
<el-button type="danger" text class="mr-1"> 批量删除 </el-button>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
</div>
|
||||
<pure-table
|
||||
ref="tableRef"
|
||||
row-key="id"
|
||||
align-whole="center"
|
||||
table-layout="auto"
|
||||
:loading="loading"
|
||||
:size="size"
|
||||
adaptive
|
||||
:adaptiveConfig="{ offsetBottom: 108 }"
|
||||
:data="dataList"
|
||||
:columns="dynamicColumns"
|
||||
:pagination="{ ...pagination, size }"
|
||||
:header-cell-style="{
|
||||
background: 'var(--el-fill-color-light)',
|
||||
color: 'var(--el-text-color-primary)'
|
||||
}"
|
||||
@selection-change="handleSelectionChange"
|
||||
@page-size-change="handleSizeChange"
|
||||
@page-current-change="handleCurrentChange"
|
||||
@cell-dblclick="handleCellDblclick"
|
||||
>
|
||||
<template #operation="{ row }">
|
||||
<el-button
|
||||
class="reset-margin !outline-none"
|
||||
link
|
||||
type="primary"
|
||||
:size="size"
|
||||
:icon="useRenderIcon(View)"
|
||||
@click="onDetail(row)"
|
||||
>
|
||||
详情
|
||||
</el-button>
|
||||
</template>
|
||||
</pure-table>
|
||||
</template>
|
||||
</PureTableBar>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
:deep(.el-dropdown-menu__item i) {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
margin: 24px 24px 0 !important;
|
||||
}
|
||||
|
||||
.search-form {
|
||||
:deep(.el-form-item) {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -3,10 +3,13 @@ import { message } from "@/utils/message";
|
||||
import { getOnlineLogsList } from "@/api/system";
|
||||
import { reactive, ref, onMounted, toRaw } from "vue";
|
||||
import type { PaginationProps } from "@pureadmin/table";
|
||||
import {forceLogout, getOnlineList} from "@/api/monitor/online";
|
||||
|
||||
export function useRole() {
|
||||
const form = reactive({
|
||||
username: ""
|
||||
userName: "",
|
||||
skipCount: 1,
|
||||
maxResultCount: 10
|
||||
});
|
||||
const dataList = ref([]);
|
||||
const loading = ref(true);
|
||||
@@ -19,27 +22,27 @@ export function useRole() {
|
||||
const columns: TableColumnList = [
|
||||
{
|
||||
label: "序号",
|
||||
prop: "id",
|
||||
minWidth: 60
|
||||
prop: "connnectionId",
|
||||
minWidth: 200
|
||||
},
|
||||
{
|
||||
label: "用户名",
|
||||
prop: "username",
|
||||
prop: "userName",
|
||||
minWidth: 100
|
||||
},
|
||||
{
|
||||
label: "登录 IP",
|
||||
prop: "ip",
|
||||
prop: "ipaddr",
|
||||
minWidth: 140
|
||||
},
|
||||
{
|
||||
label: "登录地点",
|
||||
prop: "address",
|
||||
prop: "loginLocation",
|
||||
minWidth: 140
|
||||
},
|
||||
{
|
||||
label: "操作系统",
|
||||
prop: "system",
|
||||
prop: "os",
|
||||
minWidth: 100
|
||||
},
|
||||
{
|
||||
@@ -49,10 +52,10 @@ export function useRole() {
|
||||
},
|
||||
{
|
||||
label: "登录时间",
|
||||
prop: "loginTime",
|
||||
prop: "creationTime",
|
||||
minWidth: 180,
|
||||
formatter: ({ loginTime }) =>
|
||||
dayjs(loginTime).format("YYYY-MM-DD HH:mm:ss")
|
||||
formatter: ({ creationTime }) =>
|
||||
dayjs(creationTime).format("YYYY-MM-DD HH:mm:ss")
|
||||
},
|
||||
{
|
||||
label: "操作",
|
||||
@@ -62,33 +65,32 @@ export function useRole() {
|
||||
];
|
||||
|
||||
function handleSizeChange(val: number) {
|
||||
console.log(`${val} items per page`);
|
||||
form.maxResultCount = val;
|
||||
onSearch();
|
||||
}
|
||||
|
||||
function handleCurrentChange(val: number) {
|
||||
console.log(`current page: ${val}`);
|
||||
form.skipCount = val;
|
||||
onSearch();
|
||||
}
|
||||
|
||||
/** 当CheckBox选择项发生变化时会触发该事件 */
|
||||
function handleSelectionChange(val) {
|
||||
console.log("handleSelectionChange", val);
|
||||
console.log(val);
|
||||
}
|
||||
|
||||
function handleOffline(row) {
|
||||
message(`${row.username}已被强制下线`, { type: "success" });
|
||||
async function handleOffline(row) {
|
||||
await forceLogout(row.connnectionId);
|
||||
message(`${row.userName}已被强制下线`, { type: "success" });
|
||||
onSearch();
|
||||
}
|
||||
|
||||
async function onSearch() {
|
||||
loading.value = true;
|
||||
const { data } = await getOnlineLogsList(toRaw(form));
|
||||
dataList.value = data.list;
|
||||
pagination.total = data.total;
|
||||
pagination.pageSize = data.pageSize;
|
||||
pagination.currentPage = data.currentPage;
|
||||
|
||||
setTimeout(() => {
|
||||
loading.value = false;
|
||||
}, 500);
|
||||
const { data } = await getOnlineList(toRaw(form));
|
||||
dataList.value = data.items;
|
||||
pagination.total = data.totalCount;
|
||||
loading.value = false;
|
||||
}
|
||||
|
||||
const resetForm = formEl => {
|
||||
|
||||
@@ -35,9 +35,9 @@ const {
|
||||
:model="form"
|
||||
class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px] overflow-auto"
|
||||
>
|
||||
<el-form-item label="用户名" prop="username">
|
||||
<el-form-item label="用户名" prop="userName">
|
||||
<el-input
|
||||
v-model="form.username"
|
||||
v-model="form.userName"
|
||||
placeholder="请输入用户名"
|
||||
clearable
|
||||
class="!w-[180px]"
|
||||
@@ -58,11 +58,7 @@ const {
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<PureTableBar
|
||||
title="在线用户（仅演示，操作后不生效）"
|
||||
:columns="columns"
|
||||
@refresh="onSearch"
|
||||
>
|
||||
<PureTableBar title="在线用户" :columns="columns" @refresh="onSearch">
|
||||
<template v-slot="{ size, dynamicColumns }">
|
||||
<pure-table
|
||||
align-whole="center"
|
||||
@@ -85,7 +81,7 @@ const {
|
||||
>
|
||||
<template #operation="{ row }">
|
||||
<el-popconfirm
|
||||
:title="`是否强制下线${row.username}`"
|
||||
:title="`是否强制下线${row.userName}`"
|
||||
@confirm="handleOffline(row)"
|
||||
>
|
||||
<template #reference>
|
||||
|
||||
Reference in New Issue
Block a user