mirror of
https://gitee.com/ccnetcore/Yi
synced 2026-04-04 08:06:37 +08:00
feat:新增pure-admin前端
This commit is contained in:
chenchun
117
Yi.Pure.Vue3/src/views/monitor/online/hook.tsx
Normal file
117
Yi.Pure.Vue3/src/views/monitor/online/hook.tsx
Normal file
@@ -0,0 +1,117 @@
|
||||
import dayjs from "dayjs";
|
||||
import { message } from "@/utils/message";
|
||||
import { getOnlineLogsList } from "@/api/system";
|
||||
import { reactive, ref, onMounted, toRaw } from "vue";
|
||||
import type { PaginationProps } from "@pureadmin/table";
|
||||
|
||||
export function useRole() {
|
||||
const form = reactive({
|
||||
username: ""
|
||||
});
|
||||
const dataList = ref([]);
|
||||
const loading = ref(true);
|
||||
const pagination = reactive<PaginationProps>({
|
||||
total: 0,
|
||||
pageSize: 10,
|
||||
currentPage: 1,
|
||||
background: true
|
||||
});
|
||||
const columns: TableColumnList = [
|
||||
{
|
||||
label: "序号",
|
||||
prop: "id",
|
||||
minWidth: 60
|
||||
},
|
||||
{
|
||||
label: "用户名",
|
||||
prop: "username",
|
||||
minWidth: 100
|
||||
},
|
||||
{
|
||||
label: "登录 IP",
|
||||
prop: "ip",
|
||||
minWidth: 140
|
||||
},
|
||||
{
|
||||
label: "登录地点",
|
||||
prop: "address",
|
||||
minWidth: 140
|
||||
},
|
||||
{
|
||||
label: "操作系统",
|
||||
prop: "system",
|
||||
minWidth: 100
|
||||
},
|
||||
{
|
||||
label: "浏览器类型",
|
||||
prop: "browser",
|
||||
minWidth: 100
|
||||
},
|
||||
{
|
||||
label: "登录时间",
|
||||
prop: "loginTime",
|
||||
minWidth: 180,
|
||||
formatter: ({ loginTime }) =>
|
||||
dayjs(loginTime).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}`);
|
||||
}
|
||||
|
||||
function handleSelectionChange(val) {
|
||||
console.log("handleSelectionChange", val);
|
||||
}
|
||||
|
||||
function handleOffline(row) {
|
||||
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 resetForm = formEl => {
|
||||
if (!formEl) return;
|
||||
formEl.resetFields();
|
||||
onSearch();
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
onSearch();
|
||||
});
|
||||
|
||||
return {
|
||||
form,
|
||||
loading,
|
||||
columns,
|
||||
dataList,
|
||||
pagination,
|
||||
onSearch,
|
||||
resetForm,
|
||||
handleOffline,
|
||||
handleSizeChange,
|
||||
handleCurrentChange,
|
||||
handleSelectionChange
|
||||
};
|
||||
}
|
||||
124
Yi.Pure.Vue3/src/views/monitor/online/index.vue
Normal file
124
Yi.Pure.Vue3/src/views/monitor/online/index.vue
Normal file
@@ -0,0 +1,124 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import { useRole } from "./hook";
|
||||
import { PureTableBar } from "@/components/RePureTableBar";
|
||||
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
|
||||
|
||||
import Plane from "@iconify-icons/ri/plane-line";
|
||||
import Refresh from "@iconify-icons/ep/refresh";
|
||||
|
||||
defineOptions({
|
||||
name: "OnlineUser"
|
||||
});
|
||||
|
||||
const formRef = ref();
|
||||
const {
|
||||
form,
|
||||
loading,
|
||||
columns,
|
||||
dataList,
|
||||
pagination,
|
||||
onSearch,
|
||||
resetForm,
|
||||
handleOffline,
|
||||
handleSizeChange,
|
||||
handleCurrentChange,
|
||||
handleSelectionChange
|
||||
} = useRole();
|
||||
</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="username">
|
||||
<el-input
|
||||
v-model="form.username"
|
||||
placeholder="请输入用户名"
|
||||
clearable
|
||||
class="!w-[180px]"
|
||||
/>
|
||||
</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 v-slot="{ size, dynamicColumns }">
|
||||
<pure-table
|
||||
align-whole="center"
|
||||
showOverflowTooltip
|
||||
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-popconfirm
|
||||
:title="`是否强制下线${row.username}`"
|
||||
@confirm="handleOffline(row)"
|
||||
>
|
||||
<template #reference>
|
||||
<el-button
|
||||
class="reset-margin"
|
||||
link
|
||||
type="primary"
|
||||
:size="size"
|
||||
:icon="useRenderIcon(Plane)"
|
||||
>
|
||||
强退
|
||||
</el-button>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
</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>
|
||||
129
Yi.Pure.Vue3/src/views/monitor/utils.ts
Normal file
129
Yi.Pure.Vue3/src/views/monitor/utils.ts
Normal file
@@ -0,0 +1,129 @@
|
||||
/** 日期、时间选择器快捷选项，常搭配 [DatePicker](https://element-plus.org/zh-CN/component/date-picker.html) 和 [DateTimePicker](https://element-plus.org/zh-CN/component/datetime-picker.html) 的`shortcuts`属性使用 */
|
||||
export const getPickerShortcuts = (): Array<{
|
||||
text: string;
|
||||
value: Date | Function;
|
||||
}> => {
|
||||
return [
|
||||
{
|
||||
text: "今天",
|
||||
value: () => {
|
||||
const today = new Date();
|
||||
today.setHours(0, 0, 0, 0);
|
||||
const todayEnd = new Date();
|
||||
todayEnd.setHours(23, 59, 59, 999);
|
||||
return [today, todayEnd];
|
||||
}
|
||||
},
|
||||
{
|
||||
text: "昨天",
|
||||
value: () => {
|
||||
const yesterday = new Date();
|
||||
yesterday.setDate(yesterday.getDate() - 1);
|
||||
yesterday.setHours(0, 0, 0, 0);
|
||||
const yesterdayEnd = new Date();
|
||||
yesterdayEnd.setDate(yesterdayEnd.getDate() - 1);
|
||||
yesterdayEnd.setHours(23, 59, 59, 999);
|
||||
return [yesterday, yesterdayEnd];
|
||||
}
|
||||
},
|
||||
{
|
||||
text: "前天",
|
||||
value: () => {
|
||||
const beforeYesterday = new Date();
|
||||
beforeYesterday.setDate(beforeYesterday.getDate() - 2);
|
||||
beforeYesterday.setHours(0, 0, 0, 0);
|
||||
const beforeYesterdayEnd = new Date();
|
||||
beforeYesterdayEnd.setDate(beforeYesterdayEnd.getDate() - 2);
|
||||
beforeYesterdayEnd.setHours(23, 59, 59, 999);
|
||||
return [beforeYesterday, beforeYesterdayEnd];
|
||||
}
|
||||
},
|
||||
{
|
||||
text: "本周",
|
||||
value: () => {
|
||||
const today = new Date();
|
||||
const startOfWeek = new Date(
|
||||
today.getFullYear(),
|
||||
today.getMonth(),
|
||||
today.getDate() - today.getDay() + (today.getDay() === 0 ? -6 : 1)
|
||||
);
|
||||
startOfWeek.setHours(0, 0, 0, 0);
|
||||
const endOfWeek = new Date(
|
||||
startOfWeek.getTime() +
|
||||
6 * 24 * 60 * 60 * 1000 +
|
||||
23 * 60 * 60 * 1000 +
|
||||
59 * 60 * 1000 +
|
||||
59 * 1000 +
|
||||
999
|
||||
);
|
||||
return [startOfWeek, endOfWeek];
|
||||
}
|
||||
},
|
||||
{
|
||||
text: "上周",
|
||||
value: () => {
|
||||
const today = new Date();
|
||||
const startOfLastWeek = new Date(
|
||||
today.getFullYear(),
|
||||
today.getMonth(),
|
||||
today.getDate() - today.getDay() - 7 + (today.getDay() === 0 ? -6 : 1)
|
||||
);
|
||||
startOfLastWeek.setHours(0, 0, 0, 0);
|
||||
const endOfLastWeek = new Date(
|
||||
startOfLastWeek.getTime() +
|
||||
6 * 24 * 60 * 60 * 1000 +
|
||||
23 * 60 * 60 * 1000 +
|
||||
59 * 60 * 1000 +
|
||||
59 * 1000 +
|
||||
999
|
||||
);
|
||||
return [startOfLastWeek, endOfLastWeek];
|
||||
}
|
||||
},
|
||||
{
|
||||
text: "本月",
|
||||
value: () => {
|
||||
const today = new Date();
|
||||
const startOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);
|
||||
startOfMonth.setHours(0, 0, 0, 0);
|
||||
const endOfMonth = new Date(
|
||||
today.getFullYear(),
|
||||
today.getMonth() + 1,
|
||||
0
|
||||
);
|
||||
endOfMonth.setHours(23, 59, 59, 999);
|
||||
return [startOfMonth, endOfMonth];
|
||||
}
|
||||
},
|
||||
{
|
||||
text: "上个月",
|
||||
value: () => {
|
||||
const today = new Date();
|
||||
const startOfLastMonth = new Date(
|
||||
today.getFullYear(),
|
||||
today.getMonth() - 1,
|
||||
1
|
||||
);
|
||||
startOfLastMonth.setHours(0, 0, 0, 0);
|
||||
const endOfLastMonth = new Date(
|
||||
today.getFullYear(),
|
||||
today.getMonth(),
|
||||
0
|
||||
);
|
||||
endOfLastMonth.setHours(23, 59, 59, 999);
|
||||
return [startOfLastMonth, endOfLastMonth];
|
||||
}
|
||||
},
|
||||
{
|
||||
text: "本年",
|
||||
value: () => {
|
||||
const today = new Date();
|
||||
const startOfYear = new Date(today.getFullYear(), 0, 1);
|
||||
startOfYear.setHours(0, 0, 0, 0);
|
||||
const endOfYear = new Date(today.getFullYear(), 11, 31);
|
||||
endOfYear.setHours(23, 59, 59, 999);
|
||||
return [startOfYear, endOfYear];
|
||||
}
|
||||
}
|
||||
];
|
||||
};
|
||||
Reference in New Issue
Block a user
