🔖 升级版本.
This commit is contained in:
lijiahangmax
@@ -0,0 +1,173 @@
|
||||
<template>
|
||||
<a-modal v-model:visible="visible"
|
||||
body-class="modal-form"
|
||||
title-align="start"
|
||||
title="清空主机连接日志"
|
||||
:align-center="false"
|
||||
:draggable="true"
|
||||
:mask-closable="false"
|
||||
:unmount-on-close="true"
|
||||
ok-text="清空"
|
||||
:ok-button-props="{ disabled: loading }"
|
||||
:cancel-button-props="{ disabled: loading }"
|
||||
:on-before-ok="handlerOk"
|
||||
@close="handleClose">
|
||||
<a-spin class="full" :loading="loading">
|
||||
<a-form :model="formModel"
|
||||
label-align="right"
|
||||
:style="{ width: '460px' }"
|
||||
:label-col-props="{ span: 5 }"
|
||||
:wrapper-col-props="{ span: 19 }">
|
||||
<!-- 连接用户 -->
|
||||
<a-form-item field="userId" label="连接用户">
|
||||
<user-selector v-model="formModel.userId"
|
||||
placeholder="请选择用户"
|
||||
allow-clear />
|
||||
</a-form-item>
|
||||
<!-- 连接主机 -->
|
||||
<a-form-item field="hostId" label="连接主机">
|
||||
<host-selector v-model="formModel.hostId"
|
||||
placeholder="请选择主机"
|
||||
allow-clear />
|
||||
</a-form-item>
|
||||
<!-- 主机地址 -->
|
||||
<a-form-item field="hostAddress" label="主机地址">
|
||||
<a-input v-model="formModel.hostAddress"
|
||||
placeholder="请输入主机地址"
|
||||
allow-clear />
|
||||
</a-form-item>
|
||||
<!-- 连接状态 -->
|
||||
<a-form-item field="status" label="连接状态">
|
||||
<a-select v-model="formModel.status"
|
||||
placeholder="请选择状态"
|
||||
:options="toOptions(connectStatusKey)"
|
||||
allow-clear />
|
||||
</a-form-item>
|
||||
<!-- 连接类型 -->
|
||||
<a-form-item field="type" label="连接类型">
|
||||
<a-select v-model="formModel.type"
|
||||
placeholder="请选择类型"
|
||||
:options="toOptions(connectTypeKey)"
|
||||
allow-clear />
|
||||
</a-form-item>
|
||||
<!-- 开始时间 -->
|
||||
<a-form-item field="startTimeRange" label="开始时间">
|
||||
<a-range-picker v-model="formModel.startTimeRange"
|
||||
style="width: 100%"
|
||||
:time-picker-props="{ defaultValue: ['00:00:00', '23:59:59'] }"
|
||||
show-time
|
||||
format="YYYY-MM-DD HH:mm:ss" />
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-spin>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'assetAuditConnectLogClearModal'
|
||||
};
|
||||
</script>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import type { HostConnectLogQueryRequest } from '@/api/asset/host-connect-log';
|
||||
import { ref } from 'vue';
|
||||
import useLoading from '@/hooks/loading';
|
||||
import useVisible from '@/hooks/visible';
|
||||
import { connectStatusKey, connectTypeKey } from '../types/const';
|
||||
import { getHostConnectLogCount, clearHostConnectLog } from '@/api/asset/host-connect-log';
|
||||
import { Message, Modal } from '@arco-design/web-vue';
|
||||
import { useDictStore } from '@/store';
|
||||
import UserSelector from '@/components/user/user/user-selector.vue';
|
||||
import HostSelector from '@/components/asset/host/host-selector.vue';
|
||||
|
||||
const { visible, setVisible } = useVisible();
|
||||
const { loading, setLoading } = useLoading();
|
||||
|
||||
const defaultForm = (): HostConnectLogQueryRequest => {
|
||||
return {
|
||||
userId: undefined,
|
||||
hostId: undefined,
|
||||
hostAddress: undefined,
|
||||
type: undefined,
|
||||
status: undefined,
|
||||
startTimeRange: undefined,
|
||||
};
|
||||
};
|
||||
|
||||
const formModel = ref<HostConnectLogQueryRequest>({});
|
||||
|
||||
const emits = defineEmits(['clear']);
|
||||
|
||||
const { toOptions } = useDictStore();
|
||||
|
||||
// 打开
|
||||
const open = (record: any) => {
|
||||
renderForm({ ...defaultForm(), ...record });
|
||||
setVisible(true);
|
||||
};
|
||||
|
||||
// 渲染表单
|
||||
const renderForm = (record: any) => {
|
||||
formModel.value = Object.assign({}, record);
|
||||
};
|
||||
|
||||
defineExpose({ open });
|
||||
|
||||
// 确定
|
||||
const handlerOk = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
// 获取总数量
|
||||
const { data } = await getHostConnectLogCount(formModel.value);
|
||||
if (data) {
|
||||
// 清空
|
||||
doClear(data);
|
||||
} else {
|
||||
// 无数据
|
||||
Message.warning('当前条件未查询到数据');
|
||||
}
|
||||
} catch (e) {
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
return false;
|
||||
};
|
||||
|
||||
// 执行删除
|
||||
const doClear = (count: number) => {
|
||||
Modal.confirm({
|
||||
title: '删除清空',
|
||||
content: `确定要删除 ${count} 条数据吗? 确定后将立即删除且无法恢复!`,
|
||||
onOk: async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
// 调用删除
|
||||
await clearHostConnectLog(formModel.value);
|
||||
emits('clear');
|
||||
// 清空
|
||||
setVisible(false);
|
||||
handlerClear();
|
||||
} catch (e) {
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 关闭
|
||||
const handleClose = () => {
|
||||
handlerClear();
|
||||
};
|
||||
|
||||
// 清空
|
||||
const handlerClear = () => {
|
||||
setLoading(false);
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,149 @@
|
||||
<template>
|
||||
<a-drawer v-model:visible="visible"
|
||||
title="主机连接日志详情"
|
||||
:width="428"
|
||||
:mask-closable="false"
|
||||
:unmount-on-close="true"
|
||||
ok-text="关闭"
|
||||
:hide-cancel="true"
|
||||
@cancel="handleClose">
|
||||
<a-descriptions class="detail-container"
|
||||
size="large"
|
||||
:label-style="{ display: 'flex', width: '90px' }"
|
||||
:column="1">
|
||||
<!-- id -->
|
||||
<a-descriptions-item label="id">
|
||||
{{ record.id }}
|
||||
</a-descriptions-item>
|
||||
<!-- 连接用户 -->
|
||||
<a-descriptions-item label="连接用户">
|
||||
<span>({{ record.userId }}) {{ record.username }}</span>
|
||||
</a-descriptions-item>
|
||||
<!-- 连接主机 -->
|
||||
<a-descriptions-item label="连接主机">
|
||||
<span>({{ record.hostId }}) {{ record.hostName }}</span>
|
||||
<br>
|
||||
<span class="host-address text-copy"
|
||||
:title="record.hostAddress"
|
||||
@click="copy(record.hostAddress)">
|
||||
{{ record.hostAddress }}
|
||||
</span>
|
||||
</a-descriptions-item>
|
||||
<!-- 连接类型 -->
|
||||
<a-descriptions-item label="连接类型">
|
||||
{{ getDictValue(connectTypeKey, record.type) }}
|
||||
</a-descriptions-item>
|
||||
<!-- 连接状态 -->
|
||||
<a-descriptions-item label="连接状态">
|
||||
{{ getDictValue(connectStatusKey, record.status) }}
|
||||
</a-descriptions-item>
|
||||
<!-- 留痕地址 -->
|
||||
<a-descriptions-item label="留痕地址">
|
||||
<span>{{ record.extra?.location }}</span>
|
||||
<br>
|
||||
<span class="connect-address text-copy"
|
||||
:title="record.extra?.address"
|
||||
@click="copy(record.extra?.address)">
|
||||
{{ record.extra?.address }}
|
||||
</span>
|
||||
</a-descriptions-item>
|
||||
<!-- userAgent -->
|
||||
<a-descriptions-item label="userAgent">
|
||||
{{ record.extra?.userAgent }}
|
||||
</a-descriptions-item>
|
||||
<!-- 错误信息 -->
|
||||
<a-descriptions-item v-if="record.extra?.errorMessage" label="错误信息">
|
||||
{{ record.extra?.errorMessage }}
|
||||
</a-descriptions-item>
|
||||
<!-- 开始时间 -->
|
||||
<a-descriptions-item label="开始时间">
|
||||
{{ dateFormat(new Date(record.startTime)) }}
|
||||
</a-descriptions-item>
|
||||
<!-- 结束时间 -->
|
||||
<a-descriptions-item label="结束时间">
|
||||
{{ dateFormat(new Date(record.endTime)) }}
|
||||
</a-descriptions-item>
|
||||
<!-- traceId -->
|
||||
<a-descriptions-item label="traceId">
|
||||
<span class="text-copy" @click="copy(record.extra?.traceId)">
|
||||
{{ record.extra?.traceId }}
|
||||
</span>
|
||||
</a-descriptions-item>
|
||||
<!-- channelId -->
|
||||
<a-descriptions-item label="channelId">
|
||||
<span class="text-copy" @click="copy(record.extra?.channelId)">
|
||||
{{ record.extra?.channelId }}
|
||||
</span>
|
||||
</a-descriptions-item>
|
||||
<!-- sessionId -->
|
||||
<a-descriptions-item label="sessionId">
|
||||
<span class="text-copy" @click="copy(record.extra?.sessionId)">
|
||||
{{ record.extra?.sessionId }}
|
||||
</span>
|
||||
</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
</a-drawer>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'assetAuditConnectLogDetailDrawer'
|
||||
};
|
||||
</script>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import type { HostConnectLogQueryResponse } from '@/api/asset/host-connect-log';
|
||||
import { ref } from 'vue';
|
||||
import useLoading from '@/hooks/loading';
|
||||
import useVisible from '@/hooks/visible';
|
||||
import { connectStatusKey, connectTypeKey } from '../types/const';
|
||||
import { useDictStore } from '@/store';
|
||||
import { dateFormat } from '@/utils';
|
||||
import useCopy from '@/hooks/copy';
|
||||
|
||||
const { getDictValue } = useDictStore();
|
||||
const { copy } = useCopy();
|
||||
const { visible, setVisible } = useVisible();
|
||||
const { loading, setLoading } = useLoading();
|
||||
|
||||
const record = ref<HostConnectLogQueryResponse>({} as HostConnectLogQueryResponse);
|
||||
|
||||
const emits = defineEmits(['clear']);
|
||||
|
||||
const { toOptions } = useDictStore();
|
||||
|
||||
// 打开
|
||||
const open = (s: any) => {
|
||||
record.value = s;
|
||||
setVisible(true);
|
||||
};
|
||||
|
||||
defineExpose({ open });
|
||||
|
||||
// 关闭
|
||||
const handleClose = () => {
|
||||
handlerClear();
|
||||
};
|
||||
|
||||
// 清空
|
||||
const handlerClear = () => {
|
||||
setLoading(false);
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.detail-container {
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
:deep(.arco-descriptions-item-value) {
|
||||
color: var(--color-text-1);
|
||||
}
|
||||
|
||||
.host-address, .connect-address {
|
||||
margin-top: 4px;
|
||||
display: inline-block;
|
||||
color: rgb(var(--arcoblue-6));
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,319 @@
|
||||
<template>
|
||||
<!-- 搜索 -->
|
||||
<a-card class="general-card table-search-card">
|
||||
<query-header :model="formModel"
|
||||
label-align="left"
|
||||
:itemOptions="{ 5: { span: 2 } }"
|
||||
@submit="fetchTableData"
|
||||
@reset="fetchTableData"
|
||||
@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">
|
||||
<host-selector v-model="formModel.hostId"
|
||||
placeholder="请选择主机"
|
||||
allow-clear />
|
||||
</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>
|
||||
<!-- 类型 -->
|
||||
<a-form-item field="type" label="类型" label-col-flex="50px">
|
||||
<a-select v-model="formModel.type"
|
||||
placeholder="请选择类型"
|
||||
:options="toOptions(connectTypeKey)"
|
||||
allow-clear />
|
||||
</a-form-item>
|
||||
<!-- 开始时间 -->
|
||||
<a-form-item field="startTimeRange" label="开始时间" label-col-flex="50px">
|
||||
<a-range-picker v-model="formModel.startTimeRange"
|
||||
style="width: 100%"
|
||||
:time-picker-props="{ defaultValue: ['00:00:00', '23:59:59'] }"
|
||||
show-time
|
||||
format="YYYY-MM-DD HH:mm:ss" />
|
||||
</a-form-item>
|
||||
</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">
|
||||
<a-space>
|
||||
<!-- 清空 -->
|
||||
<a-button v-permission="['asset:host-connect-log:management:clear']"
|
||||
status="danger"
|
||||
@click="openClear">
|
||||
清空
|
||||
<template #icon>
|
||||
<icon-close />
|
||||
</template>
|
||||
</a-button>
|
||||
<!-- 删除 -->
|
||||
<a-popconfirm :content="`确认删除选中的 ${selectedKeys.length} 条记录吗?`"
|
||||
position="br"
|
||||
type="warning"
|
||||
@ok="deleteSelectRows">
|
||||
<a-button v-permission="['asset:host-connect-log:management:delete']"
|
||||
type="secondary"
|
||||
status="danger"
|
||||
:disabled="selectedKeys.length === 0">
|
||||
删除
|
||||
<template #icon>
|
||||
<icon-delete />
|
||||
</template>
|
||||
</a-button>
|
||||
</a-popconfirm>
|
||||
</a-space>
|
||||
</div>
|
||||
</template>
|
||||
<!-- table -->
|
||||
<a-table row-key="id"
|
||||
ref="tableRef"
|
||||
:loading="loading"
|
||||
v-model:selected-keys="selectedKeys"
|
||||
:row-selection="rowSelection"
|
||||
:columns="columns"
|
||||
:data="tableRenderData"
|
||||
:pagination="pagination"
|
||||
@page-change="(page) => fetchTableData(page, pagination.pageSize)"
|
||||
@page-size-change="(size) => fetchTableData(1, size)"
|
||||
:bordered="false">
|
||||
<!-- 连接用户 -->
|
||||
<template #username="{ record }">
|
||||
{{ record.username }}
|
||||
</template>
|
||||
<!-- 连接主机 -->
|
||||
<template #hostName="{ record }">
|
||||
<span class="host-name" :title="record.hostName">
|
||||
{{ record.hostName }}
|
||||
</span>
|
||||
<br>
|
||||
<span class="host-address text-copy"
|
||||
:title="record.hostAddress"
|
||||
@click="copy(record.hostAddress)">
|
||||
{{ record.hostAddress }}
|
||||
</span>
|
||||
</template>
|
||||
<!-- 状态 -->
|
||||
<template #status="{ record }">
|
||||
<span class="circle" :style="{
|
||||
background: getDictValue(connectStatusKey, record.status, 'color')
|
||||
}" />
|
||||
{{ getDictValue(connectStatusKey, record.status) }}
|
||||
</template>
|
||||
<!-- 留痕地址 -->
|
||||
<template #address="{ record }">
|
||||
<span class="connect-location" :title="record.extra?.location">
|
||||
{{ record.extra?.location }}
|
||||
</span>
|
||||
<br>
|
||||
<span class="connect-address text-copy"
|
||||
:title="record.extra?.address"
|
||||
@click="copy(record.extra?.address)">
|
||||
{{ record.extra?.address }}
|
||||
</span>
|
||||
</template>
|
||||
<!-- 操作 -->
|
||||
<template #handle="{ record }">
|
||||
<div class="table-handle-wrapper">
|
||||
<!-- 详情 -->
|
||||
<a-button type="text"
|
||||
size="mini"
|
||||
@click="openDetail(record)">
|
||||
详情
|
||||
</a-button>
|
||||
<!-- 下线 -->
|
||||
<a-popconfirm v-if="record.status === HostConnectStatus.CONNECTING"
|
||||
content="确认要强制下线吗?"
|
||||
position="left"
|
||||
type="warning"
|
||||
@ok="forceOffline(record)">
|
||||
<a-button v-permission="['asset:host-connect-log:management:force-offline']"
|
||||
type="text"
|
||||
size="mini"
|
||||
status="danger">
|
||||
下线
|
||||
</a-button>
|
||||
</a-popconfirm>
|
||||
<!-- 删除 -->
|
||||
<a-popconfirm content="确认删除这条记录吗?"
|
||||
position="left"
|
||||
type="warning"
|
||||
@ok="deleteRow(record)">
|
||||
<a-button v-permission="['asset:host-connect-log:management:delete']"
|
||||
type="text"
|
||||
size="mini"
|
||||
status="danger">
|
||||
删除
|
||||
</a-button>
|
||||
</a-popconfirm>
|
||||
</div>
|
||||
</template>
|
||||
</a-table>
|
||||
</a-card>
|
||||
<!-- 清空模态框 -->
|
||||
<connect-log-clear-modal ref="clearModal"
|
||||
@clear="fetchTableData" />
|
||||
<!-- 详情模态框 -->
|
||||
<connect-log-detail-drawer ref="detailModal" />
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'assetAuditConnectLogTable'
|
||||
};
|
||||
</script>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import type { HostConnectLogQueryRequest, HostConnectLogQueryResponse } from '@/api/asset/host-connect-log';
|
||||
import { reactive, ref, onMounted } from 'vue';
|
||||
import { deleteHostConnectLog, getHostConnectLogPage, hostForceOffline } from '@/api/asset/host-connect-log';
|
||||
import { connectStatusKey, connectTypeKey, HostConnectStatus } from '../types/const';
|
||||
import { usePagination, useRowSelection } from '@/types/table';
|
||||
import { useDictStore } from '@/store';
|
||||
import { Message } from '@arco-design/web-vue';
|
||||
import columns from '../types/table.columns';
|
||||
import useLoading from '@/hooks/loading';
|
||||
import useCopy from '@/hooks/copy';
|
||||
import UserSelector from '@/components/user/user/user-selector.vue';
|
||||
import HostSelector from '@/components/asset/host/host-selector.vue';
|
||||
import ConnectLogClearModal from './connect-log-clear-modal.vue';
|
||||
import ConnectLogDetailDrawer from './connect-log-detail-drawer.vue';
|
||||
|
||||
const tableRenderData = ref<HostConnectLogQueryResponse[]>([]);
|
||||
const selectedKeys = ref<number[]>([]);
|
||||
const clearModal = ref();
|
||||
const detailModal = ref();
|
||||
|
||||
const pagination = usePagination();
|
||||
const rowSelection = useRowSelection();
|
||||
const { loading, setLoading } = useLoading();
|
||||
const { toOptions, getDictValue } = useDictStore();
|
||||
const { copy } = useCopy();
|
||||
|
||||
const formModel = reactive<HostConnectLogQueryRequest>({
|
||||
userId: undefined,
|
||||
hostId: undefined,
|
||||
hostAddress: undefined,
|
||||
type: undefined,
|
||||
status: undefined,
|
||||
startTimeRange: undefined,
|
||||
});
|
||||
|
||||
// 加载数据
|
||||
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;
|
||||
selectedKeys.value = [];
|
||||
} catch (e) {
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// 切换页码
|
||||
const fetchTableData = (page = 1, limit = pagination.pageSize, form = formModel) => {
|
||||
doFetchTableData({ page, limit, ...form });
|
||||
};
|
||||
|
||||
// 打开清空
|
||||
const openClear = () => {
|
||||
clearModal.value?.open({ ...formModel });
|
||||
};
|
||||
|
||||
// 打开详情
|
||||
const openDetail = (record: HostConnectLogQueryResponse) => {
|
||||
detailModal.value?.open(record);
|
||||
};
|
||||
|
||||
// 强制下线
|
||||
const forceOffline = async (record: HostConnectLogQueryResponse) => {
|
||||
try {
|
||||
setLoading(true);
|
||||
await hostForceOffline({ id: record.id });
|
||||
record.status = HostConnectStatus.FORCE_OFFLINE;
|
||||
record.endTime = Date.now();
|
||||
Message.success('已下线');
|
||||
} catch (e) {
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// 删除选中行
|
||||
const deleteSelectRows = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
// 调用删除接口
|
||||
await deleteHostConnectLog(selectedKeys.value);
|
||||
Message.success(`成功删除 ${selectedKeys.value.length} 条数据`);
|
||||
selectedKeys.value = [];
|
||||
// 重新加载数据
|
||||
fetchTableData();
|
||||
} catch (e) {
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// 删除当前行
|
||||
const deleteRow = async ({ id }: {
|
||||
id: number
|
||||
}) => {
|
||||
try {
|
||||
setLoading(true);
|
||||
// 调用删除接口
|
||||
await deleteHostConnectLog([id]);
|
||||
Message.success('删除成功');
|
||||
selectedKeys.value = [];
|
||||
// 重新加载数据
|
||||
fetchTableData();
|
||||
} catch (e) {
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
fetchTableData();
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.host-name, .connect-location {
|
||||
color: var(--color-text-2);
|
||||
}
|
||||
|
||||
.host-address, .connect-address {
|
||||
margin-top: 4px;
|
||||
display: inline-block;
|
||||
color: var(--color-text-3);
|
||||
}
|
||||
</style>
|
||||
39
orion-ops-ui/src/views/asset-audit/connect-log/index.vue
Normal file
39
orion-ops-ui/src/views/asset-audit/connect-log/index.vue
Normal file
@@ -0,0 +1,39 @@
|
||||
<template>
|
||||
<div class="layout-container" v-if="render">
|
||||
<!-- 列表-表格 -->
|
||||
<connect-log-table />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'assetAuditConnectLog'
|
||||
};
|
||||
</script>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, onBeforeMount, onUnmounted } from 'vue';
|
||||
import { useCacheStore, useDictStore } from '@/store';
|
||||
import { dictKeys } from './types/const';
|
||||
import ConnectLogTable from './components/connect-log-table.vue';
|
||||
|
||||
const render = ref(false);
|
||||
|
||||
// 加载字典配置
|
||||
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,22 @@
|
||||
// 主机连接类型
|
||||
export const HostConnectType = {
|
||||
SSH: 'SSH',
|
||||
SFTP: 'SFTP',
|
||||
};
|
||||
|
||||
// 主机连接状态
|
||||
export const HostConnectStatus = {
|
||||
CONNECTING: 'CONNECTING',
|
||||
COMPLETE: 'COMPLETE',
|
||||
FAILED: 'FAILED',
|
||||
FORCE_OFFLINE: 'FORCE_OFFLINE',
|
||||
};
|
||||
|
||||
// 主机连接状态 字典项
|
||||
export const connectStatusKey = 'hostConnectStatus';
|
||||
|
||||
// 主机连接类型 字典项
|
||||
export const connectTypeKey = 'hostConnectType';
|
||||
|
||||
// 加载的字典值
|
||||
export const dictKeys = [connectStatusKey, connectTypeKey];
|
||||
@@ -0,0 +1,57 @@
|
||||
import type { TableColumnData } from '@arco-design/web-vue/es/table/interface';
|
||||
import { dateFormat } from '@/utils';
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: '连接用户',
|
||||
dataIndex: 'username',
|
||||
slotName: 'username',
|
||||
width: 140,
|
||||
align: 'left',
|
||||
ellipsis: true,
|
||||
}, {
|
||||
title: '连接主机',
|
||||
dataIndex: 'hostName',
|
||||
slotName: 'hostName',
|
||||
align: 'left',
|
||||
ellipsis: true,
|
||||
}, {
|
||||
title: '类型',
|
||||
dataIndex: 'type',
|
||||
slotName: 'type',
|
||||
width: 74,
|
||||
align: 'left',
|
||||
}, {
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
slotName: 'status',
|
||||
align: 'left',
|
||||
width: 106,
|
||||
}, {
|
||||
title: '留痕地址',
|
||||
dataIndex: 'address',
|
||||
slotName: 'address',
|
||||
width: 156,
|
||||
align: 'left',
|
||||
ellipsis: true,
|
||||
}, {
|
||||
title: '连接时间',
|
||||
dataIndex: 'connectTime',
|
||||
slotName: 'connectTime',
|
||||
align: 'left',
|
||||
width: 318,
|
||||
render: ({ record }) => {
|
||||
return (record.startTime && dateFormat(new Date(record.startTime)))
|
||||
+ ' - '
|
||||
+ (record.endTime && dateFormat(new Date(record.endTime)) || '现在');
|
||||
},
|
||||
}, {
|
||||
title: '操作',
|
||||
slotName: 'handle',
|
||||
width: 180,
|
||||
align: 'left',
|
||||
fixed: 'right',
|
||||
},
|
||||
] as TableColumnData[];
|
||||
|
||||
export default columns;
|
||||
@@ -0,0 +1,286 @@
|
||||
<template>
|
||||
<!-- 搜索 -->
|
||||
<a-card class="general-card table-search-card">
|
||||
<query-header :model="formModel"
|
||||
label-align="left"
|
||||
:itemOptions="{ 4: { span: 2 } }"
|
||||
@submit="fetchTableData"
|
||||
@reset="fetchTableData"
|
||||
@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">
|
||||
<host-selector v-model="formModel.hostId"
|
||||
placeholder="请选择主机"
|
||||
allow-clear />
|
||||
</a-form-item>
|
||||
<!-- 操作类型 -->
|
||||
<a-form-item field="type" label="操作类型" label-col-flex="50px">
|
||||
<a-select v-model="formModel.type"
|
||||
placeholder="请选择类型"
|
||||
:options="toOptions(sftpOperatorTypeKey)"
|
||||
allow-clear />
|
||||
</a-form-item>
|
||||
<!-- 执行结果 -->
|
||||
<a-form-item field="result" label="执行结果" label-col-flex="50px">
|
||||
<a-select v-model="formModel.result"
|
||||
placeholder="请选择执行结果"
|
||||
:options="toOptions(sftpOperatorResultKey)"
|
||||
allow-clear />
|
||||
</a-form-item>
|
||||
<!-- 开始时间 -->
|
||||
<a-form-item field="startTimeRange" label="开始时间" label-col-flex="50px">
|
||||
<a-range-picker v-model="formModel.startTimeRange"
|
||||
style="width: 100%"
|
||||
:time-picker-props="{ defaultValue: ['00:00:00', '23:59:59'] }"
|
||||
show-time
|
||||
format="YYYY-MM-DD HH:mm:ss" />
|
||||
</a-form-item>
|
||||
</query-header>
|
||||
</a-card>
|
||||
<!-- 表格 -->
|
||||
<a-card class="general-card table-card">
|
||||
<template #title>
|
||||
<!-- 左侧操作 -->
|
||||
<div class="table-left-bar-handle">
|
||||
<!-- 标题 -->
|
||||
<div class="table-title">
|
||||
SFTP 操作日志
|
||||
</div>
|
||||
</div>
|
||||
<!-- 右侧操作 -->
|
||||
<div class="table-right-bar-handle">
|
||||
<a-space>
|
||||
<!-- 删除 -->
|
||||
<a-popconfirm :content="`确认删除选中的 ${selectedKeys.length} 条记录吗?`"
|
||||
position="br"
|
||||
type="warning"
|
||||
@ok="deleteSelectRows">
|
||||
<a-button v-permission="['infra:operator-log:delete', 'asset:host-sftp-log:management:delete']"
|
||||
type="secondary"
|
||||
status="danger"
|
||||
:disabled="selectedKeys.length === 0">
|
||||
删除
|
||||
<template #icon>
|
||||
<icon-delete />
|
||||
</template>
|
||||
</a-button>
|
||||
</a-popconfirm>
|
||||
</a-space>
|
||||
</div>
|
||||
</template>
|
||||
<!-- table -->
|
||||
<a-table row-key="id"
|
||||
ref="tableRef"
|
||||
:loading="loading"
|
||||
v-model:selected-keys="selectedKeys"
|
||||
:row-selection="rowSelection"
|
||||
:columns="columns"
|
||||
:data="tableRenderData"
|
||||
:pagination="pagination"
|
||||
@page-change="(page) => fetchTableData(page, pagination.pageSize)"
|
||||
@page-size-change="(size) => fetchTableData(1, size)"
|
||||
:bordered="false">
|
||||
<!-- 操作用户 -->
|
||||
<template #username="{ record }">
|
||||
{{ record.username }}
|
||||
</template>
|
||||
<!-- 操作主机 -->
|
||||
<template #hostName="{ record }">
|
||||
<span class="host-name" :title="record.hostName">
|
||||
{{ record.hostName }}
|
||||
</span>
|
||||
<br>
|
||||
<span class="host-address text-copy"
|
||||
:title="record.hostAddress"
|
||||
@click="copy(record.hostAddress)">
|
||||
{{ record.hostAddress }}
|
||||
</span>
|
||||
</template>
|
||||
<!-- 操作类型 -->
|
||||
<template #type="{ record }">
|
||||
{{ getDictValue(sftpOperatorTypeKey, record.type) }}
|
||||
</template>
|
||||
<!-- 操作文件 -->
|
||||
<template #paths="{ record }">
|
||||
<div class="paths-wrapper">
|
||||
<span v-for="path in record.paths"
|
||||
class="path-wrapper text-ellipsis text-copy"
|
||||
:title="path"
|
||||
@click="copy(path)">
|
||||
{{ path }}
|
||||
</span>
|
||||
<!-- 移动目标路径 -->
|
||||
<span class="sub-text" v-if="SftpOperatorType.SFTP_MOVE === record.type">
|
||||
移动到 {{ record.extra?.target }}
|
||||
</span>
|
||||
<!-- 提权信息 -->
|
||||
<span class="sub-text" v-if="SftpOperatorType.SFTP_CHMOD === record.type">
|
||||
提权 {{ record.extra?.mod }} {{ permission10toString(record.extra?.mod as number) }}
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<!-- 执行结果 -->
|
||||
<template #result="{ record }">
|
||||
<a-tag :color="getDictValue(sftpOperatorResultKey, record.result, 'color')">
|
||||
{{ getDictValue(sftpOperatorResultKey, record.result) }}
|
||||
</a-tag>
|
||||
</template>
|
||||
<!-- 留痕地址 -->
|
||||
<template #address="{ record }">
|
||||
<span class="operator-location" :title="record.location">
|
||||
{{ record.location }}
|
||||
</span>
|
||||
<br>
|
||||
<span class="operator-address text-copy"
|
||||
:title="record.address"
|
||||
@click="copy(record.address)">
|
||||
{{ record.address }}
|
||||
</span>
|
||||
</template>
|
||||
<!-- 操作 -->
|
||||
<template #handle="{ record }">
|
||||
<div class="table-handle-wrapper">
|
||||
<!-- 删除 -->
|
||||
<a-popconfirm content="确认删除这条记录吗?"
|
||||
position="left"
|
||||
type="warning"
|
||||
@ok="deleteRow(record)">
|
||||
<a-button v-permission="['infra:operator-log:delete', 'asset:host-sftp-log:management:delete']"
|
||||
type="text"
|
||||
size="mini"
|
||||
status="danger">
|
||||
删除
|
||||
</a-button>
|
||||
</a-popconfirm>
|
||||
</div>
|
||||
</template>
|
||||
</a-table>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'assetAuditSftpLogTable'
|
||||
};
|
||||
</script>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import type { HostSftpLogQueryRequest, HostSftpLogQueryResponse } from '@/api/asset/host-sftp-log';
|
||||
import { reactive, ref, onMounted } from 'vue';
|
||||
import { getHostSftpLogPage, deleteHostSftpLog } from '@/api/asset/host-sftp-log';
|
||||
import { sftpOperatorTypeKey, sftpOperatorResultKey, SftpOperatorType } from '../types/const';
|
||||
import { usePagination, useRowSelection } from '@/types/table';
|
||||
import { useDictStore } from '@/store';
|
||||
import { Message } from '@arco-design/web-vue';
|
||||
import columns from '../types/table.columns';
|
||||
import useLoading from '@/hooks/loading';
|
||||
import useCopy from '@/hooks/copy';
|
||||
import UserSelector from '@/components/user/user/user-selector.vue';
|
||||
import HostSelector from '@/components/asset/host/host-selector.vue';
|
||||
import { permission10toString } from '@/utils/file';
|
||||
|
||||
const tableRenderData = ref<HostSftpLogQueryResponse[]>([]);
|
||||
const selectedKeys = ref<number[]>([]);
|
||||
|
||||
const pagination = usePagination();
|
||||
const rowSelection = useRowSelection();
|
||||
const { loading, setLoading } = useLoading();
|
||||
const { toOptions, getDictValue } = useDictStore();
|
||||
const { copy } = useCopy();
|
||||
|
||||
const formModel = reactive<HostSftpLogQueryRequest>({
|
||||
userId: undefined,
|
||||
hostId: undefined,
|
||||
type: undefined,
|
||||
result: undefined,
|
||||
startTimeRange: undefined,
|
||||
});
|
||||
|
||||
// 加载数据
|
||||
const doFetchTableData = async (request: HostSftpLogQueryRequest) => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const { data } = await getHostSftpLogPage(request);
|
||||
tableRenderData.value = data.rows;
|
||||
pagination.total = data.total;
|
||||
pagination.current = request.page;
|
||||
pagination.pageSize = request.limit;
|
||||
selectedKeys.value = [];
|
||||
} catch (e) {
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// 切换页码
|
||||
const fetchTableData = (page = 1, limit = pagination.pageSize, form = formModel) => {
|
||||
doFetchTableData({ page, limit, ...form });
|
||||
};
|
||||
|
||||
// 删除选中行
|
||||
const deleteSelectRows = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
// 调用删除接口
|
||||
await deleteHostSftpLog(selectedKeys.value);
|
||||
Message.success(`成功删除 ${selectedKeys.value.length} 条数据`);
|
||||
selectedKeys.value = [];
|
||||
// 重新加载数据
|
||||
fetchTableData();
|
||||
} catch (e) {
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// 删除当前行
|
||||
const deleteRow = async ({ id }: {
|
||||
id: number
|
||||
}) => {
|
||||
try {
|
||||
setLoading(true);
|
||||
// 调用删除接口
|
||||
await deleteHostSftpLog([id]);
|
||||
Message.success('删除成功');
|
||||
selectedKeys.value = [];
|
||||
// 重新加载数据
|
||||
fetchTableData();
|
||||
} catch (e) {
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
fetchTableData();
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.host-name, .operator-location {
|
||||
color: var(--color-text-2);
|
||||
}
|
||||
|
||||
.host-address, .operator-address, .sub-text {
|
||||
margin-top: 4px;
|
||||
display: inline-block;
|
||||
color: var(--color-text-3);
|
||||
}
|
||||
|
||||
.paths-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.path-wrapper {
|
||||
display: block;
|
||||
padding: 2px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
39
orion-ops-ui/src/views/asset-audit/sftp-log/index.vue
Normal file
39
orion-ops-ui/src/views/asset-audit/sftp-log/index.vue
Normal file
@@ -0,0 +1,39 @@
|
||||
<template>
|
||||
<div class="layout-container" v-if="render">
|
||||
<!-- 列表-表格 -->
|
||||
<sftp-log-table />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'assetAuditSftpLog'
|
||||
};
|
||||
</script>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, onBeforeMount, onUnmounted } from 'vue';
|
||||
import { useCacheStore, useDictStore } from '@/store';
|
||||
import { dictKeys } from './types/const';
|
||||
import SftpLogTable from './components/sftp-log-table.vue';
|
||||
|
||||
const render = ref(false);
|
||||
|
||||
// 加载字典配置
|
||||
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>
|
||||
14
orion-ops-ui/src/views/asset-audit/sftp-log/types/const.ts
Normal file
14
orion-ops-ui/src/views/asset-audit/sftp-log/types/const.ts
Normal file
@@ -0,0 +1,14 @@
|
||||
// sftp 操作类型
|
||||
export const SftpOperatorType = {
|
||||
SFTP_MOVE: 'host-terminal:sftp-move',
|
||||
SFTP_CHMOD: 'host-terminal:sftp-chmod',
|
||||
};
|
||||
|
||||
// sftp 操作类型 字典项
|
||||
export const sftpOperatorTypeKey = 'sftpOperatorType';
|
||||
|
||||
// sftp 操作结果 字典项
|
||||
export const sftpOperatorResultKey = 'operatorLogResult';
|
||||
|
||||
// 加载的字典值
|
||||
export const dictKeys = [sftpOperatorTypeKey, sftpOperatorResultKey];
|
||||
@@ -0,0 +1,61 @@
|
||||
import type { TableColumnData } from '@arco-design/web-vue/es/table/interface';
|
||||
import { dateFormat } from '@/utils';
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: '操作用户',
|
||||
dataIndex: 'username',
|
||||
slotName: 'username',
|
||||
width: 140,
|
||||
align: 'left',
|
||||
ellipsis: true,
|
||||
}, {
|
||||
title: '操作主机',
|
||||
dataIndex: 'hostName',
|
||||
slotName: 'hostName',
|
||||
width: 180,
|
||||
align: 'left',
|
||||
ellipsis: true,
|
||||
}, {
|
||||
title: '操作类型',
|
||||
dataIndex: 'type',
|
||||
slotName: 'type',
|
||||
width: 116,
|
||||
align: 'left',
|
||||
}, {
|
||||
title: '操作文件',
|
||||
dataIndex: 'paths',
|
||||
slotName: 'paths',
|
||||
align: 'left',
|
||||
}, {
|
||||
title: '执行结果',
|
||||
dataIndex: 'result',
|
||||
slotName: 'result',
|
||||
align: 'left',
|
||||
width: 88,
|
||||
}, {
|
||||
title: '留痕地址',
|
||||
dataIndex: 'address',
|
||||
slotName: 'address',
|
||||
width: 156,
|
||||
align: 'left',
|
||||
ellipsis: true,
|
||||
}, {
|
||||
title: '操作时间',
|
||||
dataIndex: 'startTime',
|
||||
slotName: 'startTime',
|
||||
align: 'center',
|
||||
width: 180,
|
||||
render: ({ record }) => {
|
||||
return (record.startTime && dateFormat(new Date(record.startTime)));
|
||||
},
|
||||
}, {
|
||||
title: '操作',
|
||||
slotName: 'handle',
|
||||
width: 80,
|
||||
align: 'center',
|
||||
fixed: 'right',
|
||||
},
|
||||
] as TableColumnData[];
|
||||
|
||||
export default columns;
|
||||
Reference in New Issue
Block a user