feat:新增功能
webshell模块（以下功能有待认真测试，此次提交为方便后端接口调试） 1.界面布局基本完成 2.多tab页实现多xshell连接（存在问题有待调整） 3.关闭功能（关闭所有连接）
This commit is contained in:
hanyuxia
230
nezha-fronted/src/components/cli/webSSH.vue
Normal file
230
nezha-fronted/src/components/cli/webSSH.vue
Normal file
@@ -0,0 +1,230 @@
|
||||
<style lang="scss">
|
||||
@import './webSSH.scss';
|
||||
</style>
|
||||
<template>
|
||||
<el-dialog class="console-dialog"
|
||||
:visible.sync="consoleShow"
|
||||
width="70%"
|
||||
:customClass="{'dailog-custom' :isFullScreen == true}"
|
||||
@close="closeDailog"
|
||||
@opened="initDialog">
|
||||
|
||||
<div style='position: relative;border:solid 0px red;'>
|
||||
<el-menu mode="horizontal" @select="handleSelect" style='position: absolute;left:0px;top:0px;'>
|
||||
<el-submenu index="1" style="width:40px;">
|
||||
<template slot="title" ><i class="el-icon-setting " style="position: absolute;left: 10px;top: 9px;"></i></template>
|
||||
<el-submenu index="1-1">
|
||||
<template slot="title">文字大小</template>
|
||||
<el-menu-item index="1-1-1">最小</el-menu-item>
|
||||
<el-menu-item index="1-1-2">小</el-menu-item>
|
||||
<el-menu-item index="1-1-3">中</el-menu-item>
|
||||
<el-menu-item index="1-1-4">大</el-menu-item>
|
||||
</el-submenu>
|
||||
<el-submenu index="1-2" >
|
||||
<template slot="title">字体</template>
|
||||
<el-menu-item index="1-2-1">Monosapace</el-menu-item>
|
||||
<el-menu-item index="1-2-2">Courier New</el-menu-item>
|
||||
</el-submenu>
|
||||
</el-submenu>
|
||||
<el-submenu index="2" style="width:50px;">
|
||||
<template slot="title" ><i class="el-icon-upload console-title-icon" style="position: absolute;left: 10px;top: 9px;"></i></template>
|
||||
<el-menu-item index="2-1" @click="download">下载</el-menu-item>
|
||||
<el-menu-item index="2-2" @click="upload">上传</el-menu-item>
|
||||
</el-submenu>
|
||||
</el-menu>
|
||||
|
||||
<el-tabs v-model="editableTabsValue" @tab-click="handleClick" @tab-remove="removeTab" closable style='width:100%' type="border-card">
|
||||
<el-tab-pane
|
||||
v-for="(item, index) in editableTabs"
|
||||
:key="item.name"
|
||||
:label="item.title"
|
||||
:name="item.name"
|
||||
>
|
||||
<!-- tab显示的内容 -->
|
||||
<span slot="label" > <i class="el-icon-aim"></i>{{item.title}}</span>
|
||||
<my-console :terminal="item.terminal" :ref="'console'+index" :idIndex="index"></my-console>
|
||||
</el-tab-pane>
|
||||
|
||||
</el-tabs>
|
||||
<!--
|
||||
<el-button size='mini' style='position: absolute;right:50px;top:5px;'>设置</el-button>
|
||||
|
||||
<button type="button" aria-label="Close" class="el-dialog__headerbtn"><i class="el-dialog__close el-icon el-icon-close"></i></button>
|
||||
-->
|
||||
<i style='right:103px;' class="el-icon-minus console-title-icon"></i>
|
||||
<i style='right:70px;;' @click="fullScreen" class="el-icon-full-screen console-title-icon"></i>
|
||||
<i style='right:38px;' class="el-icon-copy-document console-title-icon" ></i>
|
||||
<i style='right:8px;' @click="closeConsole" class="el-icon-close console-title-icon"></i>
|
||||
<!--el-icon-setting el-icon-minus el-icon-full-screen el-icon-copy-document-->
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Console from './console'
|
||||
import uuidv1 from "uuid/v1";
|
||||
|
||||
export default {
|
||||
name: 'webSSH',
|
||||
components: {
|
||||
'my-console': Console
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
consoleShow:false,
|
||||
isFullScreen:false,
|
||||
/*
|
||||
terminal: {
|
||||
//pid: 1,
|
||||
//name: 'terminal',
|
||||
cols: 400,
|
||||
rows: 400,
|
||||
assetId:'',
|
||||
uuid:'',
|
||||
},
|
||||
*/
|
||||
//activeName:'',
|
||||
editableTabsValue: '-1',//当前显示的console
|
||||
editableTabs: [/*
|
||||
{
|
||||
title: '用户管理',
|
||||
name: '1',
|
||||
content: '用户管理内容',
|
||||
terminal: {
|
||||
cols: 400,
|
||||
rows: 400,
|
||||
width:'',
|
||||
height:'',
|
||||
assetId:0,
|
||||
accountId:0,
|
||||
uuid:'aaadwdwd',
|
||||
},
|
||||
}, {
|
||||
title: '角色管理',
|
||||
name: '2',
|
||||
content: '角色管理内容'
|
||||
},*/ ],
|
||||
tabIndex: -1,//添加tab的时候使用，暂留
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getUuid(){
|
||||
let uuid = uuidv1();
|
||||
let now = new Date().getTime();
|
||||
uuid = uuid+"-"+now+"-"+now;
|
||||
return uuid;
|
||||
},
|
||||
addConsole(id,host,accountId,port){
|
||||
let uuid = this.getUuid();
|
||||
let newTabName = ++this.tabIndex + '';
|
||||
let title = host;
|
||||
if(port){
|
||||
title = title+":"+port;
|
||||
}
|
||||
const console = {
|
||||
title:title,
|
||||
name:newTabName,
|
||||
terminal: {
|
||||
cols: 825,
|
||||
rows: 800,
|
||||
width:500,
|
||||
height:400,
|
||||
assetId:id,
|
||||
accountId:accountId,
|
||||
uuid:uuid,
|
||||
},
|
||||
};
|
||||
this.editableTabsValue = newTabName;
|
||||
this.editableTabs.push(console);
|
||||
},
|
||||
show(id,host,accountId,port){
|
||||
this.addConsole(id,host,accountId,port);
|
||||
this.consoleShow = true;
|
||||
},
|
||||
initDialog(){
|
||||
|
||||
},
|
||||
|
||||
//可以做最小化的处理，点击窗口外的空白处会调用此方法
|
||||
closeDailog(){
|
||||
//alert('closeDailog');
|
||||
},
|
||||
closeConsole(){
|
||||
//关闭所有连接
|
||||
this.editableTabs.forEach((tab, index) => {
|
||||
this.$refs['console'+index][0].closeSocket();
|
||||
});
|
||||
|
||||
this.editableTabs = [];
|
||||
this.editableTabsValue= '-1',//当前显示的consol
|
||||
this.tabIndex = -1
|
||||
|
||||
this.consoleShow = false;
|
||||
},
|
||||
handleClick(){
|
||||
|
||||
},
|
||||
removeTab(targetName) {
|
||||
let tabs = this.editableTabs;
|
||||
let activeName = this.editableTabsValue;
|
||||
if (activeName === targetName) {
|
||||
tabs.forEach((tab, index) => {
|
||||
if (tab.name === targetName) {
|
||||
let nextTab = tabs[index + 1] || tabs[index - 1];
|
||||
if (nextTab) {
|
||||
activeName = nextTab.name;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
this.editableTabsValue = activeName;
|
||||
this.editableTabs = tabs.filter(tab => tab.name !== targetName);
|
||||
//关闭此console的链接
|
||||
//?????????????????
|
||||
|
||||
if(this.editableTabs.length<=0){
|
||||
this.closeConsole();
|
||||
}
|
||||
},
|
||||
handleSelect(key, keyPath) {
|
||||
//alert(key, keyPath);
|
||||
},
|
||||
download(){
|
||||
|
||||
},
|
||||
upload(){
|
||||
//alert('upload');
|
||||
},
|
||||
fullScreen(){
|
||||
isFullScreen = true;
|
||||
|
||||
//const dailog = document.getElementById("consoleDailog");
|
||||
//dailog.style.width = `${100}%`;
|
||||
},
|
||||
/*
|
||||
addTab(targetName) {
|
||||
let newTabName = ++this.tabIndex + '';
|
||||
this.editableTabs.push({
|
||||
title: 'New Tab',
|
||||
name: newTabName,
|
||||
content: 'New Tab content'
|
||||
});
|
||||
this.editableTabsValue = newTabName;
|
||||
},
|
||||
*/
|
||||
|
||||
|
||||
},
|
||||
watch: {
|
||||
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user