398 lines
11 KiB
Vue
398 lines
11 KiB
Vue
<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" size="small" :body-style="{ padding: '12px' }">
|
|
<a-tabs
|
|
class="terminal-tabs"
|
|
hide-add
|
|
size="small"
|
|
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 class="pane-box">
|
|
<!-- 非开始页的ssh主机 -->
|
|
<TerminalSSH
|
|
v-if="pane.id !== '0' && pane.host.hostType === 'ssh'"
|
|
:id="pane.id"
|
|
:hostId="pane.host.hostId"
|
|
@connect="fnTerminalConnect"
|
|
@close="fnTerminalClose"
|
|
>
|
|
</TerminalSSH>
|
|
|
|
<!-- 非开始页的telnet主机 -->
|
|
<TerminalTelnet
|
|
v-if="pane.id !== '0' && pane.host.hostType === 'telnet'"
|
|
:id="pane.id"
|
|
:hostId="pane.host.hostId"
|
|
init-cmd="help"
|
|
:disable="true"
|
|
@connect="fnTerminalConnect"
|
|
@close="fnTerminalClose"
|
|
>
|
|
</TerminalTelnet>
|
|
|
|
<!-- 开始页 -->
|
|
<div v-if="pane.id === '0'">
|
|
<!-- 提示选择主机 -->
|
|
<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>
|
|
|
|
<!-- 主机列表 -->
|
|
<a-list
|
|
v-show="tabState.activeKey === '0' && hostState.show"
|
|
:header="t('views.tool.terminal.hostSelectHeader')"
|
|
:grid="{ gutter: 16, column: 4, lg: 4, md: 2, xs: 1 }"
|
|
:data-source="hostState.data"
|
|
row-key="hostId"
|
|
>
|
|
<!-- 插槽-加载更多 -->
|
|
<template #loadMore>
|
|
<div style="text-align: center">
|
|
<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>
|
|
</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"
|
|
size="small"
|
|
@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" placement="bottomRight">
|
|
<a-button type="ghost" shape="circle" size="small">
|
|
<template #icon><EllipsisOutlined /></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>
|
|
.pane-box {
|
|
height: calc(100vh - 200px);
|
|
overflow-x: hidden;
|
|
}
|
|
</style>
|