From 2cfe1947ae7d29b934bc7c621e4d50904d28cd14 Mon Sep 17 00:00:00 2001
From: hanyuxia <hanyuxia@iie.ac.cn>
Date: Wed, 11 Mar 2020 19:16:23 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E6=96=B0=E5=8A=9F=E8=83=BD=20webshell?=
 =?UTF-8?q?=E6=A8=A1=E5=9D=97=201.=E4=B8=8A=E4=BC=A0=E5=8A=9F=E8=83=BD=202?=
 =?UTF-8?q?.=E4=B8=8B=E8=BD=BD=E5=8A=9F=E8=83=BD=EF=BC=88=E8=BF=98?=
 =?UTF-8?q?=E9=9C=80=E8=A6=81=E6=B5=8B=E8=AF=95=EF=BC=8C=E8=BF=9B=E8=A1=8C?=
 =?UTF-8?q?=E4=B8=AD=EF=BC=89=203.header=E9=A1=B6=E9=83=A8=E8=8F=9C?=
 =?UTF-8?q?=E5=8D=95=E5=88=86=E5=89=B2=E7=BA=BF=E5=8F=8Axshell=E5=85=A5?=
 =?UTF-8?q?=E5=8F=A3=E8=A7=92=E6=A0=87=E6=A0=B7=E5=BC=8F=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 nezha-fronted/src/components/cli/webSSH.scss  |  15 +-
 nezha-fronted/src/components/cli/webSSH.vue   | 205 ++++++++++++++----
 .../src/components/common/header.vue          |   7 +-
 .../src/components/common/language/cn.js      |   8 +
 .../src/components/common/language/en.js      |   8 +
 5 files changed, 196 insertions(+), 47 deletions(-)

diff --git a/nezha-fronted/src/components/cli/webSSH.scss b/nezha-fronted/src/components/cli/webSSH.scss
index 76c4b893f..e87291ad2 100644
--- a/nezha-fronted/src/components/cli/webSSH.scss
+++ b/nezha-fronted/src/components/cli/webSSH.scss
@@ -5,7 +5,7 @@
   position: fixed;
   bottom: 0;
   background: #fff;
-  z-index: 9050;
+  z-index: 2000;
   height: 300px;
   #shell-service-resize-mask {
     position: fixed;
@@ -58,11 +58,10 @@
 
   .el-dialog {
     .el-dialog__body{
-      padding: 0px !important;
       overflow-x:hidden !important;/*防止console窗口x轴出现滚动条*/
     }
     .el-dialog__header{
-      padding: 0px !important;
+
     }
   }
   .el-tabs--border-card>.el-tabs__content {
@@ -114,6 +113,16 @@
   .el-submenu__title:hover{
     background-color:#FFF !important;
   }
+
+  .upload-body{
+    text-align: center;
+  }
+  .footer:before{
+    /*content: '';*/
+    /*clear:both;*/
+    /*display: block;*/
+    /*height: 40px;*/
+  }
 }
 .shell-service-max {
   height: 100% !important;
diff --git a/nezha-fronted/src/components/cli/webSSH.vue b/nezha-fronted/src/components/cli/webSSH.vue
index a76cdbcb7..c21648d56 100644
--- a/nezha-fronted/src/components/cli/webSSH.vue
+++ b/nezha-fronted/src/components/cli/webSSH.vue
@@ -24,8 +24,12 @@
         </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: 4px;"></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-menu-item index="2-1" @click="showUploadBox">
+              <div>{{$t('webshell.upload')}}</div>
+          </el-menu-item>
+          <el-menu-item index="2-2" @click="showDownloadBox">
+            <div>{{$t('webshell.download')}}</div>
+          </el-menu-item>
         </el-submenu>
       </el-menu>
 
@@ -62,12 +66,79 @@
       -->
       <!--el-icon-setting  el-icon-minus  el-icon-full-screen  el-icon-copy-document-->
     </div>
+
+    <div >
+      <el-dialog :visible.sync="uploadBox.showUpload" :title="uploadBox.title" :modal-append-to-body='false' :show-close="true" width="500px" @close="closeDialog" class="nz-dialog" >
+        <div >
+          <div class="upload-body">
+
+            <el-row >
+              <el-col :span="24">
+                <el-upload class="upload-demo"
+                           ref="uploadFile" action=""
+                           :file-list="uploadFileList"
+                           :on-change="handleChange"
+                           :auto-upload="false" >
+                  <button type="button" class="nz-btn nz-btn-size-normal nz-btn-style-normal">
+                    <span class="top-tool-btn-txt" >{{$t('webshell.fileSelect')}}</span>
+                  </button>
+                </el-upload>
+              </el-col>
+            </el-row>
+            <el-row style="margin-top: 20px;">
+              <el-col :span="3" style="text-align:center;line-height: 24px;">
+                <label>{{$t('webshell.filePath')}}</label>
+              </el-col>
+              <el-col :span="21">
+                <el-input v-model="uploadFile.path" size="mini"></el-input>
+              </el-col>
+            </el-row>
+          </div>
+          <div slot="footer" class="footer">
+            <div class="el-message-box__btns" style="text-align: right;margin-top: 20px;">
+              <button  @click="upload"  class="el-button el-button--default el-button--small">
+                <span>{{$t('webshell.uploadButtonTitle')}}</span>
+              </button>
+              <button @click="closeDialog"  class="el-button el-button--default el-button--small" >
+                <span>{{$t('overall.cancel')}}</span>
+              </button>
+            </div>
+          </div>
+        </div>
+      </el-dialog>
+      <el-dialog :visible.sync="downloadBox.showDownload" :title="downloadBox.title" :modal-append-to-body='false' :show-close="true" width="500px" @close="closeDownloadDialog" class="nz-dialog" >
+        <div>
+          <div class="upload-body">
+            <el-row style="margin-top: 20px;">
+              <el-col :span="3" style="text-align:center;line-height: 24px;">
+                <label>{{$t('webshell.filePath')}}</label>
+              </el-col>
+              <el-col :span="21">
+                <el-input v-model="downloadFile.path" size="mini"></el-input>
+              </el-col>
+            </el-row>
+          </div>
+          <div slot="footer" class="footer">
+            <div class="el-message-box__btns" style="text-align: right;margin-top: 20px;">
+              <button @click="download"  class="el-button el-button--default el-button--small">
+                <span>{{$t('webshell.downloadButtonTitle')}}</span>
+              </button>
+              <button  @click="closeDownloadDialog"  class="el-button el-button--default el-button--small">
+                <span>{{$t('overall.cancel')}}</span>
+              </button>
+            </div>
+          </div>
+        </div>
+      </el-dialog>
+    </div>
   </div>
 </template>
 
 <script>
   import Console from './console'
   import uuidv1 from "uuid/v1";
+  import axios from 'axios'
+
   export default {
     name: 'webSSH',
     components: {
@@ -81,39 +152,21 @@
         initConsoleHeight:300,//只读,初始化高度
         consoleHeight:300,
         currentTransform:0,
-        /*
-        terminal: {
-          //pid: 1,
-          //name: 'terminal',
-          cols: 400,
-          rows: 400,
-          assetId:'',
-          uuid:'',
-        },
-        */
-        //activeName:'',
         editableTabsValue: '-1',//当前显示的console
         currentIndex:'-1',
-        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的时候使用，暂留
+        editableTabs: [ ],
+        tabIndex: -1,//添加tab的时候使用
+        //upoload-download
+
+        currentUuid:'',
+        uploadBox:{showUpload:false,title:this.$t('webshell.uploadTitle')},
+        uploadFile: {file: '',path: '',uuid: ''},
+        uploadFileList:[],
+        uploadResult:null,
+        downloadBox:{showDownload:false,title:this.$t('webshell.downloadTitle')},
+        downloadFile:{path: '',uuid: ''},
+        downloadFileList:[],
+        downloadResult:null,
       }
     },
     methods: {
@@ -121,6 +174,7 @@
         let uuid = uuidv1();
         let now = new Date().getTime();
         uuid = uuid+"-"+now+"-"+now;
+        this.currentUuid = uuid;
         return uuid;
       },
       addConsole(id,host,accountId,port){
@@ -177,9 +231,6 @@
       },
 
       //可以做最小化的处理，点击窗口外的空白处会调用此方法
-      closeDailog(){
-        //alert('closeDailog');
-      },
       closeConsole(){
         //关闭所有连接
         this.editableTabs.forEach((tab, index) => {
@@ -239,6 +290,7 @@
               this.editableTabs.forEach((tab, index) => {
                 if (tab.name === currentName) {
                   this.$refs['console' + index][0].focusConsole();
+                  this.currentUuid = tab.terminal.uuid;
                 }
               });
             }
@@ -264,14 +316,85 @@
 
       },
       handleSelect(key, keyPath) {
-        //alert(key, keyPath);
+        //alert(keyPath);
+      },
+
+      /*upload--download  start*/
+      closeDialog:function(){
+        this.uploadBox.showUpload=false;
+        this.uploadResult=null;
+        this.uploadFileList=[];
+        this.uploadFile={file: '',path: '',uuid: ''};
+      },
+      closeDownloadDialog(){
+        this.downloadBox.showDownload=false;
+        this.downloadResult=null;
+        this.downloadFileList=[];
+        this.downloadFile={path: '',uuid: ''};
+      },
+      showUploadBox(){
+        this.uploadBox.showUpload=true;
+        //this.uploadBox.width='600px';
+      },
+      /*
+      handleChange(file,fileList) {
+        this.uploadFile.file = file.raw;
+      },
+      */
+      handleChange:function(file,fileList){
+        //if (fileList.length > 0) {
+          //this.uploadFileList = [fileList[fileList.length - 1]]
+        //}
+        //this.uploadFile.file = this.uploadFileList[0];
+        this.uploadFile.file = file;
+      },
+      upload() {
+        //if(this.uploadFile && this.uploadFile.file.raw){
+          let form = new FormData();
+          form.append("uuid", this.currentUuid);
+          form.append("file", this.uploadFile.file.raw);
+          form.append("path", this.uploadFile.path);
+          this.$post('terminal/upload', form,{'Content-Type': 'multipart/form-data'}).then(res => {
+            if(res.code ==  200 ){
+              this.closeDialog();
+              this.$message({duration: 2000, type: 'success', message: this.$t("tip.saveSuccess")});
+            }else{
+              this.$message.error(res.msg);
+            }
+          })
+        //}
+      },
+      showDownloadBox(){
+        this.downloadBox.showDownload=true;
       },
       download(){
+        this.downloadFile.uuid = this.currentUuid;
+        this.$post('terminal/download',this.downloadFile,{responseType:'blob'}).then(res => {
+          let fileName= this.downloadFile.path.substring(this.downloadFile.path.indexOf('/')+1);
+          if(res.code ==  200 ){
+            if(window.navigator.msSaveOrOpenBlob){
+              // 兼容ie11
+              let blobObject = new Blob([res.data]);
+              window.navigator.msSaveOrOpenBlob(blobObject, fileName);
+            }else{
+              let url = URL.createObjectURL(new Blob([res.data]));
+              let a = document.createElement('a');
+              document.body.appendChild(a); //此处增加了将创建的添加到body当中
+              a.href = url;
+              a.download = fileName;
+              a.target = '_blank';
+              a.click();
+              a.remove(); //将a标签移除
+            }
+            this.closeDownloadDialog();
+          }else{
+            this.$message.error(res.msg);
+          }
+        })
+      },
+      /*upload--download  end*/
+
 
-      },
-      upload(){
-        //alert('upload');
-      },
       minScreen(){
         this.consoleShow = false;
         this.$store.commit('minConsole');
diff --git a/nezha-fronted/src/components/common/header.vue b/nezha-fronted/src/components/common/header.vue
index 526750dfd..cfe8130ac 100644
--- a/nezha-fronted/src/components/common/header.vue
+++ b/nezha-fronted/src/components/common/header.vue
@@ -580,7 +580,7 @@
   }
   .header .vertical-line{
     display:inline-block;
-    border-left:solid 2px white;
+    border-left:solid 1px white;
     line-height:30px !important;
     height:30px !important;
     min-width:0px !important;
@@ -620,14 +620,15 @@
     vertical-align:middle;
     line-height: 15px;
     font-size:6px;
-    background-color:orangered;
-    opacity:0.9;color:#4c4c4c;
+    background-color:#ba3939;
+    opacity:0.9;
     border-radius:7px;
     min-width:25px;
     height:15px;
     position:absolute;
     left: 25px;
     bottom: 27px;
+    color:white;
   }
   /* top el-menu-item sytle------end*/
   .el-menu.el-menu--horizontal {
diff --git a/nezha-fronted/src/components/common/language/cn.js b/nezha-fronted/src/components/common/language/cn.js
index 048e472c7..513f87d42 100644
--- a/nezha-fronted/src/components/common/language/cn.js
+++ b/nezha-fronted/src/components/common/language/cn.js
@@ -39,6 +39,14 @@ const cn = {
   },
   webshell:{
     shellTitle:'本地 Shell',
+    upload:'上传',
+    download:'下载',
+    uploadTitle:'上传',
+    downloadTitle:'下载',
+    uploadButtonTitle:'上传',
+    fileSelect:'选择',
+    downloadButtonTitle:'下载',
+    filePath:'文件路径',
   },
   dashboard:{
     title:'仪表盘',
diff --git a/nezha-fronted/src/components/common/language/en.js b/nezha-fronted/src/components/common/language/en.js
index 99dc85fb8..08ebef34d 100644
--- a/nezha-fronted/src/components/common/language/en.js
+++ b/nezha-fronted/src/components/common/language/en.js
@@ -66,6 +66,14 @@ const en = {
   },
   webshell:{
     shellTitle:'Local Shell',
+    upload:'Upload',
+    download:'DownLoad',
+    uploadTitle:'Upload',
+    downloadTitle:'DownLoad',
+    uploadButtonTitle:'Upload',
+    fileSelect:'select',
+    downloadButtonTitle:'Download',
+    filePath:'file path',
   },
   dashboard:{
     title:'Dashboard',