OMC/fe.ems.vue3
1
0
Fork 0
Code Issues Releases 3 Activity

feat: 新增终端主机页面

Browse Source
This commit is contained in:
TsMask
2024-02-28 17:35:44 +08:00
parent 87b2fd965c
commit e86ae12801
5 changed files with 920 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

385
src/views/tool/terminal/index.vue Normal file
View File

@@ -0,0 +1,385 @@
<script lang="ts" setup>
import { PageContainer } from 'antdv-pro-layout';
import { Modal } from 'ant-design-vue/lib';
import TerminalSSH from '@/components/TerminalSSH/index.vue';
import TerminalTelnet from '@/components/TerminalTelnet/index.vue';
import { reactive, toRaw } from 'vue';
import { parseDuration } from '@/utils/date-utils';
import { listNeHost } from '@/api/ne/neHost';
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
import { useRouter } from 'vue-router';
import useI18n from '@/hooks/useI18n';
const { t } = useI18n();
const router = useRouter();
/**主机对象信息状态类型 */
type HostStateType = {
/**显示主机列表 */
show: boolean;
/**加载等待 */
loading: boolean;
/**查询参数 */
params: {
pageNum: number;
pageSize: number;
};
/**数据总数 */
total: number;
data: Record<string, any>[];
};
/**主机对象信息状态 */
const hostState: HostStateType = reactive({
show: false,
loading: false,
params: {
pageNum: 1,
pageSize: 20,
},
total: 0,
data: [],
});
/**查询主机信息列表, pageNum初始页数 */
function fnGetHostList(pageNum?: number) {
if (hostState.loading) return;
hostState.loading = true;
if (pageNum) {
hostState.params.pageNum = pageNum;
}
// 超过总数不请求
if (hostState.data.length >= hostState.total && hostState.total !== 0) {
hostState.loading = false;
return;
}
listNeHost(toRaw(hostState.params)).then(res => {
if (res.code === RESULT_CODE_SUCCESS && Array.isArray(res.rows)) {
hostState.total = res.total;
hostState.data = hostState.data.concat(res.rows);
// 页数+
if (hostState.data.length < hostState.total) {
hostState.params.pageNum += 1;
}
}
hostState.loading = false;
});
}
/**选择主机 */
function fnSelectHost() {
if (hostState.loading) return;
hostState.show = true;
fnGetHostList(1);
}
/**连接主机 */
function fnConnectHost(data: Record<string, any>) {
const id = `${Date.now()}`;
tabState.panes.push({
id,
status: false,
host: data,
});
tabState.activeKey = id;
}
/**标签对象信息状态类型 */
type TabStateType = {
/**激活选中 */
activeKey: string;
/**页签数据 */
panes: {
id: string;
status: boolean;
host: Record<string, any>;
connectStamp?: string;
}[];
};
/**标签对象信息状态 */
const tabState: TabStateType = reactive({
activeKey: '0',
panes: [
{
id: '0',
host: {
hostId: '0',
title: t('views.tool.terminal.start'),
type: '0',
},
status: true,
},
],
});
/**
* 终端连接状态
* @param data 主机连接结果
*/
function fnTerminalConnect(data: Record<string, any>) {
const { id, timeStamp } = data;
const seconds = timeStamp / 1000;
// 获取当前项下标
const tab = tabState.panes.find(item => item.id === id);
if (tab) {
tab.status = true;
tab.connectStamp = parseDuration(seconds);
}
}
/**
* 终端关闭状态
* @param data 主机连接结果
*/
function fnTerminalClose(data: Record<string, any>) {
const { id } = data;
// 获取当前项下标
const tab = tabState.panes.find(item => item.id === id);
if (tab) {
tab.status = false;
}
}
/**
* 标签更多菜单项
* @param key 菜单key
*/
function fnTabMenu(key: string | number) {
// 跳转主机创建
if (key === 'new') {
router.push({ name: 'NeHost_2135' });
}
// 刷新当前
if (key === 'reload') {
const tabIndex = tabState.panes.findIndex(
item => item.id === tabState.activeKey
);
if (tabIndex) {
const tab = tabState.panes[tabIndex];
Modal.confirm({
title: t('common.tipTitle'),
content: t('views.tool.terminal.reloadTip', {
num: `${tab.host.hostType} - ${tab.host.title}`,
}),
onOk() {
tabState.panes.splice(tabIndex, 1);
tab.host && fnConnectHost(tab.host);
},
});
}
}
// 关闭当前
if (key === 'current') {
fnTabClose(tabState.activeKey);
}
// 关闭其他
if (key === 'other') {
Modal.confirm({
title: t('common.tipTitle'),
content: t('views.tool.terminal.otherTip'),
onOk() {
hostState.show = false;
tabState.panes = tabState.panes.filter(
tab => tab.id === '0' || tab.id === tabState.activeKey
);
tabState.activeKey = tabState.activeKey;
},
});
}
// 关闭全部
if (key === 'all') {
Modal.confirm({
title: t('common.tipTitle'),
content: t('views.tool.terminal.allTip'),
onOk() {
hostState.show = false;
tabState.panes.splice(1);
tabState.activeKey = '0';
},
});
}
}
/**
* 导航标签关闭
* @param id 标签的key
*/
function fnTabClose(id: string) {
// 获取当前项下标
const tabIndex = tabState.panes.findIndex(tab => tab.id === id);
if (tabIndex === -1) return;
const item = tabState.panes[tabIndex];
Modal.confirm({
title: t('common.tipTitle'),
content: t('views.tool.terminal.closeTip', {
num: `${item.host.hostType} - ${item.host.title}`,
}),
onOk() {
tabState.panes.splice(tabIndex, 1);
// 激活前一项标签
tabState.activeKey = tabState.panes[tabIndex - 1].id;
},
});
}
</script>
<template>
<PageContainer>
<a-card :bordered="false" :body-style="{ padding: '12px' }">
<a-tabs
class="terminal-tabs"
hide-add
tab-position="top"
type="editable-card"
:tab-bar-gutter="8"
:tab-bar-style="{ margin: '0' }"
v-model:activeKey="tabState.activeKey"
@edit="(hostId:any) => fnTabClose(hostId as string)"
>
<a-tab-pane
v-for="pane in tabState.panes"
:key="pane.id"
:closable="tabState.panes.length > 1"
>
<template #tab>
<a-badge
:status="pane.status ? 'success' : 'error'"
:text="pane.host.title"
/>
</template>
<div style="height: 650px">
<TerminalSSH
v-if="pane.id !== '0' && pane.host.hostType === 'ssh'"
:id="pane.id"
:hostId="pane.host.hostId"
@connect="fnTerminalConnect"
@close="fnTerminalClose"
>
</TerminalSSH>
<TerminalTelnet
v-if="pane.id !== '0' && pane.host.hostType === 'telnet'"
:id="pane.id"
:hostId="pane.host.hostId"
init-cmd="help"
@connect="fnTerminalConnect"
@close="fnTerminalClose"
>
</TerminalTelnet>
<div v-if="pane.id === '0'">
<a-list
v-show="tabState.activeKey === '0' && hostState.show"
:header="t('views.tool.terminal.hostSelectHeader')"
:grid="{ gutter: 16, column: 4 }"
:data-source="hostState.data"
style="height: 650px; overflow-x: hidden"
>
<template #loadMore>
<div
:style="{
textAlign: 'center',
marginTop: '12px',
height: '32px',
lineHeight: '32px',
}"
>
<a-button
@click="fnGetHostList()"
:loading="hostState.loading"
>
{{
t('views.tool.terminal.hostSelectMore', {
num: hostState.total - hostState.data.length,
})
}}
</a-button>
</div>
</template>
<template #renderItem="{ item }">
<a-list-item>
<a-card size="small" :title="item.title">
<template #extra>
<a-button
type="primary"
shape="round"
size="small"
@click="fnConnectHost(item)"
>
<template #icon><LinkOutlined /></template>
{{ item.hostType.toUpperCase() }}
</a-button>
</template>
<div>{{ `${item.addr}:${item.port}` }}</div>
</a-card>
</a-list-item>
</template>
</a-list>
<a-result
:title="t('views.tool.terminal.hostSelectTitle')"
v-show="tabState.activeKey === '0' && !hostState.show"
>
<template #extra>
<a-button
key="hostState"
type="primary"
@click="fnSelectHost()"
>
{{ t('views.tool.terminal.hostSelectShow') }}
</a-button>
</template>
</a-result>
</div>
</div>
</a-tab-pane>
<template #rightExtra>
<a-space :size="8" align="center">
<a-tooltip placement="topRight">
<template #title>
{{ t('views.tool.terminal.new') }}
</template>
<a-button type="default" shape="circle" @click="fnTabMenu('new')">
<template #icon><PlusOutlined /></template>
</a-button>
</a-tooltip>
<div v-show="tabState.activeKey !== '0'">
<a-tooltip placement="topRight">
<template #title>
{{ t('views.tool.terminal.more') }}
</template>
<a-dropdown
:trigger="['click', 'hover']"
placement="bottomRight"
>
<a-button type="ghost" shape="circle">
<template #icon><DashOutlined /></template>
</a-button>
<template #overlay>
<a-menu @click="({ key }:any) => fnTabMenu(key)">
<a-menu-item key="reload">
{{ t('views.tool.terminal.reload') }}
</a-menu-item>
<a-menu-item key="current">
{{ t('views.tool.terminal.current') }}
</a-menu-item>
<a-menu-item key="other">
{{ t('views.tool.terminal.other') }}
</a-menu-item>
<a-menu-item key="all">
{{ t('views.tool.terminal.all') }}
</a-menu-item>
</a-menu>
</template>
</a-dropdown>
</a-tooltip>
</div>
</a-space>
</template>
</a-tabs>
</a-card>
</PageContainer>
</template>
<style lang="less" scoped></style>