feat: initial commit
This commit is contained in:
gin
@@ -0,0 +1,170 @@
|
||||
<template>
|
||||
<div class="main" v-loading="loading">
|
||||
<!-- v-loading指令 可以直接调用Loading动画 -->
|
||||
<el-row :gutter="2">
|
||||
<el-col :span="24" class="card-box">
|
||||
<el-card>
|
||||
<template #header><span>Redis信息</span></template>
|
||||
<el-descriptions :column="4">
|
||||
<el-descriptions-item
|
||||
v-for="(item, index) in cacheInfoTable"
|
||||
:key="index"
|
||||
:label="item.field"
|
||||
:span="item.span"
|
||||
>{{ item.value }}</el-descriptions-item
|
||||
>
|
||||
</el-descriptions>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="40">
|
||||
<el-col :span="12" class="card-box">
|
||||
<el-card>
|
||||
<template #header><span>命令统计</span></template>
|
||||
<div ref="commandChartRef" style="height: 420px" />
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="12" class="card-box">
|
||||
<el-card>
|
||||
<template #header><span>内存信息</span></template>
|
||||
<div ref="memoryChartRef" style="height: 420px" />
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { getCacheInfoApi, RedisCacheInfoDTO } from "@/api/system/monitor";
|
||||
import { onBeforeMount, ref } from "vue";
|
||||
import * as echarts from "echarts";
|
||||
/** 组件name最好和菜单表中的router_name一致 */
|
||||
defineOptions({
|
||||
name: "CacheInfo"
|
||||
});
|
||||
|
||||
const loading = ref(true);
|
||||
|
||||
const cacheInfoTable = ref([]);
|
||||
const commandChartRef = ref(null);
|
||||
const memoryChartRef = ref(null);
|
||||
|
||||
async function getList() {
|
||||
loading.value = true;
|
||||
const { data } = await getCacheInfoApi().finally(() => {
|
||||
loading.value = false;
|
||||
});
|
||||
const cacheInfo = data as RedisCacheInfoDTO;
|
||||
|
||||
cacheInfoTable.value = [
|
||||
{
|
||||
field: "Redis版本",
|
||||
value: cacheInfo.info.redis_version
|
||||
},
|
||||
{
|
||||
field: "运行模式",
|
||||
value: cacheInfo.info.redis_mode == "standalone" ? "单机" : "集群"
|
||||
},
|
||||
{
|
||||
field: "端口",
|
||||
value: cacheInfo.info.tcp_port
|
||||
},
|
||||
{
|
||||
field: "客户端数",
|
||||
value: cacheInfo.info.connected_clients
|
||||
},
|
||||
{
|
||||
field: "运行时间(天)",
|
||||
value: cacheInfo.info.uptime_in_days
|
||||
},
|
||||
{
|
||||
field: "使用内存",
|
||||
value: cacheInfo.info.used_memory_human
|
||||
},
|
||||
{
|
||||
field: "使用CPU",
|
||||
value: parseFloat(cacheInfo.info.used_cpu_user_children).toFixed(2)
|
||||
},
|
||||
{
|
||||
field: "内存配置",
|
||||
value: cacheInfo.info.total_system_memory_human
|
||||
},
|
||||
{
|
||||
field: "AOF是否开启",
|
||||
value: cacheInfo.info.aof_enabled == "0" ? "否" : "是"
|
||||
},
|
||||
{
|
||||
field: "RDB是否成功",
|
||||
value: cacheInfo.info.rdb_last_bgsave_status
|
||||
},
|
||||
{
|
||||
field: "Key数量",
|
||||
value: cacheInfo.dbSize
|
||||
},
|
||||
|
||||
{
|
||||
field: "网络入口/出口",
|
||||
value: `${cacheInfo.info.instantaneous_input_kbps} kbs/ ${cacheInfo.info.instantaneous_output_kbps} kbs`
|
||||
}
|
||||
];
|
||||
|
||||
const commandChartInstance = echarts.init(commandChartRef.value, "macarons");
|
||||
commandChartInstance.setOption({
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
formatter: "{a} <br/>{b} : {c} ({d}%)"
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "命令统计",
|
||||
type: "pie",
|
||||
roseType: "radius",
|
||||
radius: [15, 95],
|
||||
center: ["40%", "50%"],
|
||||
data: cacheInfo.commandStats,
|
||||
animationEasing: "cubicInOut",
|
||||
animationDuration: 1000
|
||||
}
|
||||
]
|
||||
});
|
||||
const memoryChartInstance = echarts.init(memoryChartRef.value, "macarons");
|
||||
memoryChartInstance.setOption({
|
||||
tooltip: {
|
||||
formatter: `{b} <br/>{a} : ${cacheInfo.info.used_memory_human}`
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "峰值",
|
||||
type: "gauge",
|
||||
min: 0,
|
||||
max: 1000,
|
||||
detail: {
|
||||
formatter: cacheInfo.info.used_memory_human
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: parseFloat(cacheInfo.info.used_memory_human),
|
||||
name: "内存消耗"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
});
|
||||
}
|
||||
|
||||
onBeforeMount(() => {
|
||||
getList();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.el-row {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.el-row:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,39 @@
|
||||
// 抽离可公用的工具函数等用于系统管理页面逻辑
|
||||
import { computed } from "vue";
|
||||
import { useDark } from "@pureadmin/utils";
|
||||
|
||||
export function usePublicHooks() {
|
||||
const { isDark } = useDark();
|
||||
|
||||
const switchStyle = computed(() => {
|
||||
return {
|
||||
"--el-switch-on-color": "#6abe39",
|
||||
"--el-switch-off-color": "#e84749"
|
||||
};
|
||||
});
|
||||
|
||||
const tagStyle = computed(() => {
|
||||
return (status: number) => {
|
||||
return status === 1
|
||||
? {
|
||||
"--el-tag-text-color": isDark.value ? "#6abe39" : "#389e0d",
|
||||
"--el-tag-bg-color": isDark.value ? "#172412" : "#f6ffed",
|
||||
"--el-tag-border-color": isDark.value ? "#274a17" : "#b7eb8f"
|
||||
}
|
||||
: {
|
||||
"--el-tag-text-color": isDark.value ? "#e84749" : "#cf1322",
|
||||
"--el-tag-bg-color": isDark.value ? "#2b1316" : "#fff1f0",
|
||||
"--el-tag-border-color": isDark.value ? "#58191c" : "#ffa39e"
|
||||
};
|
||||
};
|
||||
});
|
||||
|
||||
return {
|
||||
/** 当前网页是否为`dark`模式 */
|
||||
isDark,
|
||||
/** 表现更鲜明的`el-switch`组件 */
|
||||
switchStyle,
|
||||
/** 表现更鲜明的`el-tag`组件 */
|
||||
tagStyle
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,133 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import { useHook } from "./utils/hook";
|
||||
import { PureTableBar } from "@/components/RePureTableBar";
|
||||
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
|
||||
|
||||
import Delete from "@iconify-icons/ep/delete";
|
||||
import Search from "@iconify-icons/ep/search";
|
||||
import Refresh from "@iconify-icons/ep/refresh";
|
||||
|
||||
/** 组件name最好和菜单表中的router_name一致 */
|
||||
defineOptions({
|
||||
name: "OnlineUser"
|
||||
});
|
||||
|
||||
const tableRef = ref();
|
||||
|
||||
const searchFormRef = ref();
|
||||
const {
|
||||
searchFormParams,
|
||||
pageLoading,
|
||||
columns,
|
||||
dataList,
|
||||
pagination,
|
||||
onSearch,
|
||||
resetForm,
|
||||
getList,
|
||||
handleLogout
|
||||
} = useHook();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="main">
|
||||
<!-- 搜索栏 -->
|
||||
<el-form
|
||||
ref="searchFormRef"
|
||||
:inline="true"
|
||||
:model="searchFormParams"
|
||||
class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px]"
|
||||
>
|
||||
<el-form-item label="登录IP：" prop="ipAddress">
|
||||
<el-input
|
||||
v-model="searchFormParams.ipAddress"
|
||||
placeholder="请输入IP地址"
|
||||
clearable
|
||||
class="!w-[200px]"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="用户名：" prop="username">
|
||||
<el-input
|
||||
v-model="searchFormParams.username"
|
||||
placeholder="请选择用户名称"
|
||||
clearable
|
||||
class="!w-[200px]"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button
|
||||
type="primary"
|
||||
:icon="useRenderIcon(Search)"
|
||||
:loading="pageLoading"
|
||||
@click="onSearch"
|
||||
>
|
||||
搜索
|
||||
</el-button>
|
||||
<el-button
|
||||
:icon="useRenderIcon(Refresh)"
|
||||
@click="resetForm(searchFormRef, tableRef)"
|
||||
>
|
||||
重置
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<!-- table bar 包裹 table -->
|
||||
<PureTableBar title="登录日志列表" :columns="columns" @refresh="onSearch">
|
||||
<template v-slot="{ size, dynamicColumns }">
|
||||
<pure-table
|
||||
border
|
||||
ref="tableRef"
|
||||
align-whole="center"
|
||||
showOverflowTooltip
|
||||
table-layout="auto"
|
||||
:loading="pageLoading"
|
||||
:size="size"
|
||||
adaptive
|
||||
:data="dataList"
|
||||
:columns="dynamicColumns"
|
||||
:pagination="pagination"
|
||||
:paginationSmall="size === 'small' ? true : false"
|
||||
:header-cell-style="{
|
||||
background: 'var(--el-table-row-hover-bg-color)',
|
||||
color: 'var(--el-text-color-primary)'
|
||||
}"
|
||||
@page-size-change="getList"
|
||||
@page-current-change="getList"
|
||||
>
|
||||
<template #operation="{ row }">
|
||||
<el-popconfirm
|
||||
:title="`是否确认强制退出用户${row.username}`"
|
||||
@confirm="handleLogout(row)"
|
||||
>
|
||||
<template #reference>
|
||||
<el-button
|
||||
class="reset-margin"
|
||||
link
|
||||
type="danger"
|
||||
:size="size"
|
||||
:icon="useRenderIcon(Delete)"
|
||||
>
|
||||
强制退出
|
||||
</el-button>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
</template>
|
||||
</pure-table>
|
||||
</template>
|
||||
</PureTableBar>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
:deep(.el-dropdown-menu__item i) {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.search-form {
|
||||
:deep(.el-form-item) {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,141 @@
|
||||
import dayjs from "dayjs";
|
||||
import { message } from "@/utils/message";
|
||||
import {
|
||||
OnlineUserQuery,
|
||||
getOnlineUserListApi,
|
||||
logoutOnlineUserApi
|
||||
} from "@/api/system/monitor";
|
||||
import { reactive, ref, onMounted, toRaw } from "vue";
|
||||
import { PaginationProps } from "@pureadmin/table";
|
||||
import { CommonUtils } from "@/utils/common";
|
||||
|
||||
export function useHook() {
|
||||
const pagination: PaginationProps = {
|
||||
total: 0,
|
||||
pageSize: 10,
|
||||
currentPage: 1,
|
||||
background: true
|
||||
};
|
||||
|
||||
const timeRange = ref([]);
|
||||
|
||||
const searchFormParams = reactive<OnlineUserQuery>({
|
||||
ipAddress: undefined,
|
||||
username: undefined
|
||||
});
|
||||
|
||||
// 该分页使用前端分页 所以需要一个原始数组来保存原有数据
|
||||
let originalDataList = [];
|
||||
const dataList = ref([]);
|
||||
const pageLoading = ref(true);
|
||||
|
||||
const columns: TableColumnList = [
|
||||
{
|
||||
label: "会话编号",
|
||||
prop: "tokenId",
|
||||
minWidth: 100
|
||||
},
|
||||
{
|
||||
label: "用户名",
|
||||
prop: "username",
|
||||
minWidth: 120
|
||||
},
|
||||
{
|
||||
label: "所属部门",
|
||||
prop: "deptName",
|
||||
minWidth: 120
|
||||
},
|
||||
{
|
||||
label: "IP地址",
|
||||
prop: "ipAddress",
|
||||
minWidth: 120
|
||||
},
|
||||
{
|
||||
label: "登录地点",
|
||||
prop: "loginLocation",
|
||||
minWidth: 120
|
||||
},
|
||||
{
|
||||
label: "操作系统",
|
||||
prop: "operationSystem",
|
||||
minWidth: 120
|
||||
},
|
||||
{
|
||||
label: "浏览器",
|
||||
prop: "browser",
|
||||
minWidth: 120
|
||||
},
|
||||
{
|
||||
label: "登录时间",
|
||||
minWidth: 160,
|
||||
prop: "loginTime",
|
||||
formatter: ({ loginTime }) =>
|
||||
dayjs(loginTime).format("YYYY-MM-DD HH:mm:ss")
|
||||
},
|
||||
{
|
||||
label: "操作",
|
||||
fixed: "right",
|
||||
width: 140,
|
||||
slot: "operation"
|
||||
}
|
||||
];
|
||||
|
||||
async function onSearch() {
|
||||
// 点击搜索的时候 需要重置分页
|
||||
pagination.currentPage = 1;
|
||||
|
||||
pageLoading.value = true;
|
||||
|
||||
const { data } = await getOnlineUserListApi(
|
||||
toRaw(searchFormParams)
|
||||
).finally(() => {
|
||||
pageLoading.value = false;
|
||||
});
|
||||
|
||||
originalDataList = data.rows;
|
||||
pagination.total = data.rows.length;
|
||||
|
||||
getList();
|
||||
}
|
||||
|
||||
function resetForm(formEl, tableRef) {
|
||||
if (!formEl) return;
|
||||
// 清空查询参数
|
||||
formEl.resetFields();
|
||||
tableRef.getTableRef().clearSort();
|
||||
pagination.currentPage = 1;
|
||||
// 重置分页并查询
|
||||
onSearch();
|
||||
}
|
||||
|
||||
async function getList() {
|
||||
dataList.value = CommonUtils.paginateList(originalDataList, pagination);
|
||||
}
|
||||
|
||||
async function handleLogout(row) {
|
||||
await logoutOnlineUserApi(row.tokenId).then(() => {
|
||||
message(`您强制登出了用户:${row.username}`, {
|
||||
type: "success"
|
||||
});
|
||||
// 刷新列表
|
||||
onSearch();
|
||||
});
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
onSearch();
|
||||
});
|
||||
|
||||
return {
|
||||
searchFormParams,
|
||||
pageLoading,
|
||||
columns,
|
||||
dataList,
|
||||
pagination,
|
||||
timeRange,
|
||||
onSearch,
|
||||
getList,
|
||||
resetForm,
|
||||
handleLogout
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,243 @@
|
||||
<template>
|
||||
<div class="main" v-loading="loading">
|
||||
<!-- 注意template和div之间 不要加注释 会导致后续的页面渲染空白 -->
|
||||
<!-- v-loading指令 可以直接调用Loading动画 -->
|
||||
<el-row :gutter="30">
|
||||
<el-col :span="12" class="card-box">
|
||||
<el-card>
|
||||
<template #header><span>CPU</span></template>
|
||||
<el-table
|
||||
:data="cpuInfoTable"
|
||||
:show-header="true"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-table-column prop="field" label="属性" />
|
||||
<el-table-column prop="value" label="值" />
|
||||
</el-table>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="12" class="card-box">
|
||||
<el-card>
|
||||
<template #header><span>内存</span></template>
|
||||
<el-table
|
||||
:data="memoryInfoTable"
|
||||
:show-header="true"
|
||||
style="width: 100%"
|
||||
:cell-class-name="cellClassName"
|
||||
>
|
||||
<el-table-column prop="field" label="属性" />
|
||||
<el-table-column prop="machine" label="服务器" />
|
||||
<el-table-column prop="jvm" label="JVM" />
|
||||
</el-table>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24" class="card-box">
|
||||
<el-card>
|
||||
<template #header><span>服务器信息</span></template>
|
||||
<el-descriptions :column="2">
|
||||
<el-descriptions-item
|
||||
v-for="(item, index) in serverInfoTable"
|
||||
:key="index"
|
||||
:label="item.field"
|
||||
>{{ item.value }}</el-descriptions-item
|
||||
>
|
||||
</el-descriptions>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="2">
|
||||
<el-col :span="24" class="card-box">
|
||||
<el-card>
|
||||
<template #header><span>JVM信息</span></template>
|
||||
<el-descriptions :column="2">
|
||||
<el-descriptions-item
|
||||
v-for="(item, index) in jvmInfoTable"
|
||||
:key="index"
|
||||
:label="item.field"
|
||||
:span="item.span"
|
||||
>{{ item.value }}</el-descriptions-item
|
||||
>
|
||||
</el-descriptions>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24" class="card-box">
|
||||
<el-card>
|
||||
<template #header><span>磁盘状态</span></template>
|
||||
<el-table
|
||||
:data="diskInfoTable"
|
||||
:show-header="true"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-table-column prop="dirName" label="盘符路径" />
|
||||
<el-table-column prop="sysTypeName" label="文件系统" />
|
||||
<el-table-column prop="typeName" label="盘符类型" />
|
||||
<el-table-column prop="total" label="总大小" />
|
||||
<el-table-column prop="free" label="可用大小" />
|
||||
<el-table-column prop="used" label="已用大小" />
|
||||
<el-table-column
|
||||
prop="usage"
|
||||
label="已用百分比"
|
||||
:formatter="(row, column, cellValue) => cellValue + '%'"
|
||||
width="180"
|
||||
/>
|
||||
</el-table>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { getServerInfoApi, ServerInfo } from "@/api/system/monitor";
|
||||
import { onBeforeMount, ref } from "vue";
|
||||
|
||||
/** 组件name最好和菜单表中的router_name一致 */
|
||||
defineOptions({
|
||||
name: "ServerInfo"
|
||||
});
|
||||
|
||||
const loading = ref(true);
|
||||
|
||||
const cpuInfoTable = ref([]);
|
||||
const memoryInfoTable = ref([]);
|
||||
const serverInfoTable = ref([]);
|
||||
const jvmInfoTable = ref([]);
|
||||
const diskInfoTable = ref([]);
|
||||
|
||||
async function getList() {
|
||||
loading.value = true;
|
||||
const { data } = await getServerInfoApi().finally(() => {
|
||||
loading.value = false;
|
||||
});
|
||||
const serverInfo = data as ServerInfo;
|
||||
|
||||
cpuInfoTable.value = [
|
||||
{
|
||||
field: "核心数",
|
||||
value: serverInfo.cpuInfo.cpuNum
|
||||
},
|
||||
{
|
||||
field: "用户使用率",
|
||||
value: serverInfo.cpuInfo.used + "%"
|
||||
},
|
||||
{
|
||||
field: "系统使用率",
|
||||
value: serverInfo.cpuInfo.sys + "%"
|
||||
},
|
||||
{
|
||||
field: "当前空闲率",
|
||||
value: serverInfo.cpuInfo.free + "%"
|
||||
}
|
||||
];
|
||||
|
||||
memoryInfoTable.value = [
|
||||
{
|
||||
field: "总内存",
|
||||
machine: serverInfo.memoryInfo.total + "G",
|
||||
jvm: serverInfo.jvmInfo.total + "M"
|
||||
},
|
||||
{
|
||||
field: "已用内存",
|
||||
machine: serverInfo.memoryInfo.used + "G",
|
||||
jvm: serverInfo.jvmInfo.used + "M"
|
||||
},
|
||||
{
|
||||
field: "剩余内存",
|
||||
machine: serverInfo.memoryInfo.free + "G",
|
||||
jvm: serverInfo.jvmInfo.free + "M"
|
||||
},
|
||||
{
|
||||
field: "使用率",
|
||||
machine: serverInfo.memoryInfo.usage + "%",
|
||||
jvm: serverInfo.jvmInfo.usage + "%",
|
||||
// 设置warning 页面上会红字显示
|
||||
warning: serverInfo.jvmInfo.usage > 30
|
||||
}
|
||||
];
|
||||
|
||||
serverInfoTable.value = [
|
||||
{
|
||||
field: "服务器名称",
|
||||
value: serverInfo.systemInfo.computerName
|
||||
},
|
||||
{
|
||||
field: "操作系统",
|
||||
value: serverInfo.systemInfo.osName
|
||||
},
|
||||
{
|
||||
field: "服务器IP",
|
||||
value: serverInfo.systemInfo.computerIp
|
||||
},
|
||||
{
|
||||
field: "系统架构",
|
||||
value: serverInfo.systemInfo.osArch
|
||||
}
|
||||
];
|
||||
|
||||
jvmInfoTable.value = [
|
||||
{
|
||||
field: "JDK名称",
|
||||
value: serverInfo.jvmInfo.name,
|
||||
span: 1
|
||||
},
|
||||
{
|
||||
field: "JDK版本",
|
||||
value: serverInfo.jvmInfo.version,
|
||||
span: 1
|
||||
},
|
||||
{
|
||||
field: "启动时间",
|
||||
value: serverInfo.jvmInfo.startTime,
|
||||
span: 1
|
||||
},
|
||||
{
|
||||
field: "运行时长",
|
||||
value: serverInfo.jvmInfo.runTime,
|
||||
span: 1
|
||||
},
|
||||
{
|
||||
field: "安装路径",
|
||||
value: serverInfo.jvmInfo.home,
|
||||
span: 2
|
||||
},
|
||||
{
|
||||
field: "项目路径",
|
||||
value: serverInfo.systemInfo.userDir,
|
||||
span: 2
|
||||
},
|
||||
{
|
||||
field: "运行参数",
|
||||
value: serverInfo.jvmInfo.inputArgs,
|
||||
span: 2
|
||||
}
|
||||
];
|
||||
|
||||
diskInfoTable.value = serverInfo.diskInfos;
|
||||
}
|
||||
|
||||
function cellClassName({ row }) {
|
||||
if (row.warning) {
|
||||
return "text-red-500";
|
||||
}
|
||||
}
|
||||
|
||||
onBeforeMount(() => {
|
||||
getList();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.el-row {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.el-row:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user