fix: 修改terminal login成功后再打开窗口

2023-01-10 17:53:29 +08:00
parent 1b50d5858f
commit b5c0fccdf6
5 changed files with 157 additions and 65 deletions
--- a/nezha-fronted/src/assets/css/common/loading.scss
+++ b/nezha-fronted/src/assets/css/common/loading.scss
@@ -259,3 +259,46 @@ loading-hide{
  }
 }
 /** END of circle3 */
+/**===== circle3 =====*/
+.circleMin {
+  display: block;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  height: 50px;
+  width: 50px;
+  margin: -25px 0 0 -25px;
+  border: 4px rgba(0, 0, 0, 0.25) solid;
+  border-top: 4px black solid;
+  border-right: 4px black solid;
+  border-bottom: 4px black solid;
+  border-radius: 50%;
+  -webkit-animation: spinMin 1s infinite linear;
+  animation: spinMin 1s infinite linear;
+}
+
+@-webkit-keyframes spinMin {
+  from {
+    -webkit-transform: rotate(0deg) scale(0.4);
+    transform: rotate(0deg) scale(0.4);
+  }
+  to {
+    -webkit-transform: rotate(359deg) scale(0.4);
+    transform: rotate(359deg) scale(0.4);
+  }
+}
+@keyframes spinMin {
+  from {
+    -webkit-transform: rotate(0deg) scale(0.4);
+    transform: rotate(0deg) scale(0.4);
+    -webkit-transform: rotate(0deg) scale(0.4);
+    transform: rotate(0deg) scale(0.4);
+  }
+  to {
+    -webkit-transform: rotate(359deg) scale(0.4);
+    transform: rotate(359deg) scale(0.4);
+    -webkit-transform: rotate(359deg) scale(0.4);
+    transform: rotate(359deg) scale(0.4);
+  }
+}
+/** END of circle3 */
--- a/nezha-fronted/src/components/cli/consoleNew.vue
+++ b/nezha-fronted/src/components/cli/consoleNew.vue
@@ -107,42 +107,7 @@ export default {
      })
      this.term.open(terminalContainer)
      this.term.focus()
-      const params = {
-        width: this.terminal.width,
-        height: this.terminal.height,
-        cols: this.terminal.cols,
-        rows: this.terminal.rows,
-        host: this.$loadsh.get(this.terminal, 'custom.host', ''),
-        port: this.$loadsh.get(this.terminal, 'custom.port', ''),
-        assetId: this.$loadsh.get(this.terminal, 'assetId', ''),
-        accountId: this.$loadsh.get(this.terminal, 'accountId', ''),
-        authProtocol: this.$loadsh.get(this.terminal, 'custom.authProtocol', ''),
-        authProtocolPort: this.$loadsh.get(this.terminal, 'custom.authProtocolPort', ''),
-        authType: this.$loadsh.get(this.terminal, 'custom.authType', ''),
-        authUsername: this.$loadsh.get(this.terminal, 'custom.authUsername', ''),
-        authPin: this.$loadsh.get(this.terminal, 'custom.authPin', ''),
-        authPriKey: this.$loadsh.get(this.terminal, 'custom.authPriKey', ''),
-        authUserTip: this.$loadsh.get(this.terminal, 'custom.authUserTip', ''),
-        authPinTip: this.$loadsh.get(this.terminal, 'custom.authPinTip', '')
-      }
-      this.$post('/terminal/login', params).then(res => {
-        if (res.code == 200) {
-          this.terminal.uuid = res.data.uuid
-          this.$forceUpdate()
-          this.terminal.userName = res.data.authUsername + '@' + res.data.host
-          this.host = res.data.host
      this.create()
-        } else {
-          if (res.data) {
-            this.terminal.uuid = res.data.uuid
-            this.terminal.userName = res.data.authUsername + '@' + res.data.host
-            this.host = res.data.host
-          }
-          params.name = this.terminal.name
-          this.$emit('loginFail', params)
-          this.$message.error(res.msg)
-        }
-      })
    },
    create () {
      const that = this
@@ -172,6 +137,7 @@ export default {
      this.terminalSocket.onopen = () => {
        this.terminal.isLogin = true
        this.isInit = true
+        this.term.focus()
      }
      // 登录后，你输入的内容从后台服务返回
      this.term.on('data', function (data) {
@@ -288,9 +254,9 @@ export default {
    reconnect () {
      this.terminal.isLogin = false
      this.closeSocket()
-      this.term.off('selection')
-      this.term.off('data')
+      setTimeout(()=>{
        this.beforeCreate()
+      },100)
    },
    closeFileDir () {
      this.showFileDir(false)
--- a/nezha-fronted/src/components/cli/webSSHNew.vue
+++ b/nezha-fronted/src/components/cli/webSSHNew.vue
@@ -88,7 +88,7 @@
      </el-tab-pane>
    </el-tabs>
    <!--弹窗-->
-    <el-dialog :modal-append-to-body='false' :show-close="true" :visible.sync="assetShow" @close="closeAssetCustom" class="nz-dialog webshell-selectAsset" width="620px">
+    <el-dialog :modal-append-to-body='false' :z-index="1000" :show-close="true" :visible.sync="assetShow" @close="closeAssetCustom" class="nz-dialog webshell-selectAsset" width="620px">
      <div slot="title">{{$t('webshell.selAsset')}}</div>
      <selectTable ref="selectTable" v-model="assetContent.assetId" :params="selectPageParams" :columns="columns" :tableFormat="tableFormat" api="asset/asset" value-key="id" search-key="manageIp">
        <template v-slot:searchLeft>
@@ -114,13 +114,13 @@
        <button class="footer__btn footer__btn--light" @click="assetShow=false">
          <span>{{$t('overall.cancel')}}</span>
        </button>
-        <button class="footer__btn" :class="{'webshell-btn-disable':!assetContent.assetId}" :disabled="prevent_opt.save||!assetContent.assetId" @click.prevent="connect">
+        <button class="footer__btn" :class="{'webshell-btn-disable': !assetContent.assetId}" v-my-loading:circleMin="prevent_opt.save" :disabled="prevent_opt.save||!assetContent.assetId" @click.prevent="connect">
          <span>{{$t('webshell.connect')}}</span>
        </button>
      </div>
    </el-dialog>
    <!-- 自定义连接 start -->
-    <el-dialog :modal-append-to-body='false' :show-close="true" :visible.sync="customShow" @close="closeAssetCustom" class="nz-dialog" width="620px" destroy-on-close>
+    <el-dialog :modal-append-to-body='false' :show-close="true" :z-index="1000" :visible.sync="customShow" @close="closeAssetCustom" class="nz-dialog" width="620px" destroy-on-close>
      <div slot="title">{{$t('webshell.connect')}}</div>
      <div >
        <el-form label-width="120px" size="small" :model="customConnect" label-position = "top" :rules=" customConnect.authProtocol ===2 ? rulesCustom2: rulesCustom" ref="customConnect" v-my-loading="assetLoading" class="custom">
@@ -173,7 +173,7 @@
            <button id="asset-edit-cancel" @click="customShow=false" class="footer__btn footer__btn--light" type="button">
              <span>{{$t('overall.cancel')}}</span>
            </button>
-            <button id="asset-edit-save" :disabled="prevent_opt.save" class="footer__btn" @click.prevent="connect" type="button">
+            <button id="asset-edit-save" v-my-loading:circleMin="prevent_opt.save" :disabled="prevent_opt.save" class="footer__btn" @click.prevent="connect" type="button">
              <span>{{$t('webshell.connect')}}</span>
            </button>
          </div>
@@ -188,6 +188,7 @@
 import terminal from './consoleNew'
 import selectTable from '@/components/common/selectTable'
 import { host, port } from '@/components/common/js/validate'
+import { requestsArr } from '@/http'
 export default {
  name: 'webSSH',
  components: {
@@ -357,7 +358,8 @@ export default {
      assetContent: {
        assetId: ''
      },
-      customShow: false
+      customShow: false,
+      connectLoading: false
    }
  },
  methods: {
@@ -520,16 +522,12 @@ export default {
      if (this.assetShow) {
        this.$get('asset/asset/' + this.assetContent.assetId).then(res => {
          const asset = res.data
-          this.addConsole(asset.id, asset.manageIp, '', '', 'asset')
-          this.assetShow = false
-          this.prevent_opt.save = false
+          this.addConsole(asset.id, asset.manageIp, '', '', 'asset', asset)
        })
      } else {
        this.$refs.customConnect.validate((valid) => {
          if (valid) {
            this.addConsole('', this.customConnect.host, '', this.customConnect.port, 'custom')
-            this.customShow = false
-            this.prevent_opt.save = false
          } else {
            this.prevent_opt.save = false
          }
@@ -576,8 +574,10 @@ export default {
        authProtocolPort: '',
        authProtocol: 1
      }
+      this.prevent_opt.save = false
+      requestsArr.forEach(xhr => xhr.cancel('cancel'))
    },
-    addConsole (id, host, accountId, port, type) {
+    addConsole (id, host, accountId, port, type, asset) {
      if (!id) { id = '' }
      if (!host) { host = '' }
      if (!accountId) { accountId = '' }
@@ -609,7 +609,8 @@ export default {
          uuid: uuid,
          type: type,
          username: '',
-          isLogin: false
+          isLogin: false,
+          host: ''
        }
      }
      if (type === 'custom') {
@@ -627,19 +628,58 @@ export default {
          authProtocol: encodeURIComponent(this.customConnect.authProtocol)
        }
      }
+      const terminal = console.terminal
+      const params = {
+        width: terminal.width,
+        height: terminal.height,
+        cols: terminal.cols,
+        rows: terminal.rows,
+        host: this.$loadsh.get(terminal, 'custom.host', ''),
+        port: this.$loadsh.get(terminal, 'custom.port', ''),
+        assetId: this.$loadsh.get(terminal, 'assetId', ''),
+        accountId: this.$loadsh.get(terminal, 'accountId', ''),
+        authProtocol: this.$loadsh.get(terminal, 'custom.authProtocol', ''),
+        authProtocolPort: this.$loadsh.get(terminal, 'custom.authProtocolPort', ''),
+        authType: this.$loadsh.get(terminal, 'custom.authType', ''),
+        authUsername: this.$loadsh.get(terminal, 'custom.authUsername', ''),
+        authPin: this.$loadsh.get(terminal, 'custom.authPin', ''),
+        authPriKey: this.$loadsh.get(terminal, 'custom.authPriKey', ''),
+        authUserTip: this.$loadsh.get(terminal, 'custom.authUserTip', ''),
+        authPinTip: this.$loadsh.get(terminal, 'custom.authPinTip', '')
+      }
+      this.$post('/terminal/login', params).then(res => {
+        if (res.code == 200) {
+          terminal.uuid = res.data.uuid
+          this.$forceUpdate()
+          terminal.userName = res.data.authUsername + '@' + res.data.host
+          terminal.host = res.data.host
          if (id) {
-        this.$get('/asset/asset/' + id).then(res => {
-          console.terminal.terminalType = res.data.type.authProtocol
+            console.terminal.terminalType = asset.type.authProtocol
            console.terminal.username = ''
            this.editableTabsValue = newTabName
            this.editableTabs.push(console)
-        })
+            this.assetShow = false
          } else {
            console.terminal.username = ''
            console.terminal.terminalType = this.customConnect.authProtocol
            this.editableTabsValue = newTabName
            this.editableTabs.push(console)
+            this.customShow = false
          }
+          this.prevent_opt.save = false
+        } else {
+          this.prevent_opt.save = false
+          if (res === 'cancel') return
+          if (res.data) {
+            terminal.uuid = res.data.uuid
+            terminal.userName = res.data.authUsername + '@' + res.data.host
+            this.host = res.data.host
+          }
+          params.name = terminal.name
+          // this.$emit('loginFail', params)
+          this.$message.error(res.msg)
+        }
+      })
    },
    duplicate (item, index) {
      if (item.terminal.assetId) {
@@ -685,10 +725,49 @@ export default {
      }
    },
    reconnect (item, index) {
-      this.$refs['console' + index][0].reconnect()
      if (this.$refs['popover' + index] && this.$refs['popover' + index][0]) {
        this.$refs['popover' + index][0].doClose()
      }
+      const terminal = item.terminal
+      const params = {
+        width: terminal.width,
+        height: terminal.height,
+        cols: terminal.cols,
+        rows: terminal.rows,
+        host: this.$loadsh.get(terminal, 'custom.host', ''),
+        port: this.$loadsh.get(terminal, 'custom.port', ''),
+        assetId: this.$loadsh.get(terminal, 'assetId', ''),
+        accountId: this.$loadsh.get(terminal, 'accountId', ''),
+        authProtocol: this.$loadsh.get(terminal, 'custom.authProtocol', ''),
+        authProtocolPort: this.$loadsh.get(terminal, 'custom.authProtocolPort', ''),
+        authType: this.$loadsh.get(terminal, 'custom.authType', ''),
+        authUsername: this.$loadsh.get(terminal, 'custom.authUsername', ''),
+        authPin: this.$loadsh.get(terminal, 'custom.authPin', ''),
+        authPriKey: this.$loadsh.get(terminal, 'custom.authPriKey', ''),
+        authUserTip: this.$loadsh.get(terminal, 'custom.authUserTip', ''),
+        authPinTip: this.$loadsh.get(terminal, 'custom.authPinTip', '')
+      }
+      this.$post('/terminal/login', params).then(res => {
+        if (res.code == 200) {
+          terminal.uuid = res.data.uuid
+          this.$forceUpdate()
+          terminal.userName = res.data.authUsername + '@' + res.data.host
+          terminal.host = res.data.host
+          this.prevent_opt.save = false
+          this.$refs['console' + index][0].reconnect()
+        } else {
+          this.prevent_opt.save = false
+          if (res === 'cancel') return
+          if (res.data) {
+            terminal.uuid = res.data.uuid
+            terminal.userName = res.data.authUsername + '@' + res.data.host
+            this.host = res.data.host
+          }
+          params.name = terminal.name
+          // this.$emit('loginFail', params)
+          this.$message.error(res.msg)
+        }
+      })
    },
    showFileDir (item, index) {
      this.$refs['console' + index][0].showFileDir(true)
--- a/nezha-fronted/src/components/common/globalSearch/globalSearch.vue
+++ b/nezha-fronted/src/components/common/globalSearch/globalSearch.vue
@@ -2,7 +2,7 @@
  <div class="global-search-bac" v-if="globalShow" @click.self="close">
    <div class="global-search-box" :class="firstShow? '' : 'search-after'" @click.self="close">
      <div class="global-search-input" :class="firstShow? '' : 'search-after'">
-        <i class="nz-icon nz-icon-search" v-my-loading:circle3.scaleMin.icon="loading"></i>
+        <i class="nz-icon nz-icon-search" v-my-loading:circleMin.icon="loading"></i>
        <el-input v-model="searchStr" @input="searchAll" ref="searchStr" :placeholder="$t('globalSearch.placeholder')" @keydown.native="inputKeydown" clearable></el-input>
        <div @click="close" class="global-search-cancel">
          {{$t('overall.cancel')}}
--- a/nezha-fronted/src/components/page/config/system/license.vue
+++ b/nezha-fronted/src/components/page/config/system/license.vue
@@ -436,6 +436,10 @@ export default {
  mounted () {
    this.licenseGetData()
    this.licenseGetStatus()
+    window.addEventListener('resize', this.getLayout)
+  },
+  beforeDestroy () {
+    window.removeEventListener('resize', this.getLayout)
  }
 }
 </script>