feat: 主机连接记录.
This commit is contained in:
lijiahangmax
@@ -0,0 +1,171 @@
|
||||
<template>
|
||||
<!-- 搜索 -->
|
||||
<a-card class="general-card table-search-card">
|
||||
<a-query-header :model="formModel"
|
||||
label-align="left"
|
||||
@submit="fetchTableData"
|
||||
@reset="reset"
|
||||
@keyup.enter="() => fetchTableData()">
|
||||
<!-- 用户 -->
|
||||
<a-form-item field="userId" label="用户" label-col-flex="50px">
|
||||
<user-selector v-model="formModel.userId"
|
||||
placeholder="请选择用户"
|
||||
allow-clear />
|
||||
</a-form-item>
|
||||
<!-- 主机 -->
|
||||
<a-form-item field="hostId" label="主机" label-col-flex="50px">
|
||||
<a-input-number v-model="formModel.hostId"
|
||||
placeholder="FIXME 请输入主机"
|
||||
allow-clear
|
||||
hide-button />
|
||||
</a-form-item>
|
||||
<!-- 主机地址 -->
|
||||
<a-form-item field="hostAddress" label="主机地址" label-col-flex="50px">
|
||||
<a-input v-model="formModel.hostAddress" placeholder="请输入主机地址" allow-clear />
|
||||
</a-form-item>
|
||||
<!-- 状态 -->
|
||||
<a-form-item field="status" label="状态" label-col-flex="50px">
|
||||
<a-select v-model="formModel.status"
|
||||
placeholder="请选择状态"
|
||||
:options="toOptions(connectStatusKey)"
|
||||
allow-clear />
|
||||
</a-form-item>
|
||||
<!-- token -->
|
||||
<a-form-item field="token" label="token" label-col-flex="50px">
|
||||
<a-input v-model="formModel.token" placeholder="请输入token" allow-clear />
|
||||
</a-form-item>
|
||||
<!-- 开始时间 -->
|
||||
<a-form-item field="startTime" label="开始时间" label-col-flex="50px">
|
||||
<a-range-picker v-model="timeRange"
|
||||
:time-picker-props="{ defaultValue: ['00:00:00', '23:59:59'] }"
|
||||
show-time
|
||||
format="YYYY-MM-DD HH:mm:ss"
|
||||
@ok="timeRangePicked" />
|
||||
</a-form-item>
|
||||
</a-query-header>
|
||||
</a-card>
|
||||
<!-- 表格 -->
|
||||
<a-card class="general-card table-card">
|
||||
<template #title>
|
||||
<!-- 左侧操作 -->
|
||||
<div class="table-left-bar-handle">
|
||||
<!-- 标题 -->
|
||||
<div class="table-title">
|
||||
主机连接日志 - 用户
|
||||
</div>
|
||||
</div>
|
||||
<!-- 右侧操作 -->
|
||||
<div class="table-right-bar-handle" />
|
||||
</template>
|
||||
<!-- table -->
|
||||
<a-table row-key="id"
|
||||
class="table-wrapper-8"
|
||||
ref="tableRef"
|
||||
label-align="left"
|
||||
:loading="loading"
|
||||
:columns="columns"
|
||||
:data="tableRenderData"
|
||||
:pagination="pagination"
|
||||
@page-change="(page) => fetchTableData(page, pagination.pageSize)"
|
||||
@page-size-change="(size) => fetchTableData(1, size)"
|
||||
:bordered="false">
|
||||
<!-- 主机地址 -->
|
||||
<template #hostAddress="{ record }">
|
||||
<span class="copy-left" title="复制" @click="copy(record.hostAddress)">
|
||||
<icon-copy />
|
||||
</span>
|
||||
<span>{{ record.hostAddress }}</span>
|
||||
</template>
|
||||
<!-- 状态 -->
|
||||
<template #status="{ record }">
|
||||
<span class="circle" :style="{
|
||||
background: getDictValue(connectStatusKey, record.status, 'color')
|
||||
}" />
|
||||
{{ getDictValue(connectStatusKey, record.status) }}
|
||||
</template>
|
||||
</a-table>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'asset-host-connect-log-table'
|
||||
};
|
||||
</script>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import type { HostConnectLogQueryRequest, HostConnectLogQueryResponse } from '@/api/asset/host-connect-log';
|
||||
import { reactive, ref, onMounted } from 'vue';
|
||||
import { getHostConnectLogPage } from '@/api/asset/host-connect-log';
|
||||
import useLoading from '@/hooks/loading';
|
||||
import columns from '../types/table.columns';
|
||||
import { connectStatusKey } from '../types/const';
|
||||
import { usePagination } from '@/types/table';
|
||||
import { useDictStore } from '@/store';
|
||||
import useCopy from '@/hooks/copy';
|
||||
import UserSelector from '@/components/user/user/user-selector.vue';
|
||||
|
||||
const emits = defineEmits(['openAdd', 'openUpdate']);
|
||||
|
||||
const tableRenderData = ref<HostConnectLogQueryResponse[]>([]);
|
||||
|
||||
const pagination = usePagination();
|
||||
const { loading, setLoading } = useLoading();
|
||||
const { toOptions, getDictValue } = useDictStore();
|
||||
const { copy } = useCopy();
|
||||
|
||||
const timeRange = ref<string[]>([]);
|
||||
const formModel = reactive<HostConnectLogQueryRequest>({
|
||||
userId: undefined,
|
||||
hostId: undefined,
|
||||
hostAddress: undefined,
|
||||
type: undefined,
|
||||
token: undefined,
|
||||
status: undefined,
|
||||
startTimeStart: undefined,
|
||||
startTimeEnd: undefined,
|
||||
});
|
||||
|
||||
// 选择时间
|
||||
const timeRangePicked = (e: string[]) => {
|
||||
formModel.startTimeStart = e[0];
|
||||
formModel.startTimeEnd = e[1];
|
||||
};
|
||||
|
||||
// 加载数据
|
||||
const doFetchTableData = async (request: HostConnectLogQueryRequest) => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const { data } = await getHostConnectLogPage(request);
|
||||
tableRenderData.value = data.rows;
|
||||
pagination.total = data.total;
|
||||
pagination.current = request.page;
|
||||
pagination.pageSize = request.limit;
|
||||
} catch (e) {
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// 切换页码
|
||||
const fetchTableData = (page = 1, limit = pagination.pageSize, form = formModel) => {
|
||||
doFetchTableData({ page, limit, ...form });
|
||||
};
|
||||
|
||||
// 重置
|
||||
const reset = () => {
|
||||
timeRange.value = [];
|
||||
formModel.startTimeStart = undefined;
|
||||
formModel.startTimeEnd = undefined;
|
||||
fetchTableData();
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
fetchTableData();
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
|
||||
</style>
|
||||
41
orion-ops-ui/src/views/asset/host-connect-log/index.vue
Normal file
41
orion-ops-ui/src/views/asset/host-connect-log/index.vue
Normal file
@@ -0,0 +1,41 @@
|
||||
<template>
|
||||
<div class="layout-container" v-if="render">
|
||||
<!-- 列表-表格 -->
|
||||
<host-connect-log-table />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'assetHostConnectLog'
|
||||
};
|
||||
</script>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import HostConnectLogTable from './components/host-connect-log-table.vue';
|
||||
import { ref, onBeforeMount, onUnmounted } from 'vue';
|
||||
import { useCacheStore, useDictStore } from '@/store';
|
||||
import { dictKeys } from './types/const';
|
||||
|
||||
const render = ref(false);
|
||||
const table = ref();
|
||||
const modal = ref();
|
||||
|
||||
// 加载字典配置
|
||||
onBeforeMount(async () => {
|
||||
const dictStore = useDictStore();
|
||||
await dictStore.loadKeys(dictKeys);
|
||||
render.value = true;
|
||||
});
|
||||
|
||||
// 重置缓存
|
||||
onUnmounted(() => {
|
||||
const cacheStore = useCacheStore();
|
||||
cacheStore.reset('users', 'hosts');
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,5 @@
|
||||
// 主机连接状态 字典项
|
||||
export const connectStatusKey = 'hostConnectStatus';
|
||||
|
||||
// 加载的字典值
|
||||
export const dictKeys = [connectStatusKey];
|
||||
@@ -0,0 +1,74 @@
|
||||
import type { TableColumnData } from '@arco-design/web-vue/es/table/interface';
|
||||
import { dateFormat } from '@/utils';
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: 'id',
|
||||
dataIndex: 'id',
|
||||
slotName: 'id',
|
||||
width: 70,
|
||||
align: 'left',
|
||||
fixed: 'left',
|
||||
}, {
|
||||
title: '用户id',
|
||||
dataIndex: 'userId',
|
||||
slotName: 'userId',
|
||||
width: 110,
|
||||
align: 'left',
|
||||
}, {
|
||||
title: '主机id',
|
||||
dataIndex: 'hostId',
|
||||
slotName: 'hostId',
|
||||
width: 110,
|
||||
align: 'left',
|
||||
}, {
|
||||
title: '主机名称',
|
||||
dataIndex: 'hostName',
|
||||
slotName: 'hostName',
|
||||
align: 'left',
|
||||
ellipsis: true,
|
||||
tooltip: true,
|
||||
}, {
|
||||
title: '主机地址',
|
||||
dataIndex: 'hostAddress',
|
||||
slotName: 'hostAddress',
|
||||
align: 'left',
|
||||
ellipsis: true,
|
||||
tooltip: true,
|
||||
}, {
|
||||
title: 'token',
|
||||
dataIndex: 'token',
|
||||
slotName: 'token',
|
||||
align: 'left',
|
||||
width: 180,
|
||||
ellipsis: true,
|
||||
tooltip: true,
|
||||
}, {
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
slotName: 'status',
|
||||
align: 'left',
|
||||
ellipsis: true,
|
||||
tooltip: true,
|
||||
}, {
|
||||
title: '开始时间',
|
||||
dataIndex: 'startTime',
|
||||
slotName: 'startTime',
|
||||
align: 'left',
|
||||
width: 180,
|
||||
render: ({ record }) => {
|
||||
return record.startTime && dateFormat(new Date(record.startTime));
|
||||
},
|
||||
}, {
|
||||
title: '结束时间',
|
||||
dataIndex: 'endTime',
|
||||
slotName: 'endTime',
|
||||
align: 'left',
|
||||
width: 180,
|
||||
render: ({ record }) => {
|
||||
return record.endTime && dateFormat(new Date(record.endTime));
|
||||
},
|
||||
},
|
||||
] as TableColumnData[];
|
||||
|
||||
export default columns;
|
||||
@@ -63,7 +63,6 @@
|
||||
data.forEach(s => {
|
||||
config.value[s.type] = s;
|
||||
});
|
||||
console.log(config.value);
|
||||
} catch ({ message }) {
|
||||
Message.error(`配置加载失败 ${message}`);
|
||||
setVisible(false);
|
||||
|
||||
Reference in New Issue
Block a user