NEZ-2498 feat:terminal select asset样式调整

nezha-fronted/src/assets/css/components/cli/webSSHNew.scss

@@ -96,6 +96,64 @@
       }
     }
   }
+
+  .webshell-selectAsset{
+    .el-dialog__header{
+      box-sizing: border-box;
+      height: 48px;
+      padding: 0 20px;
+      display: flex;
+      align-items: center;
+      position: relative;
+      border-bottom: 1px solid $--web-ssh-border-bottom-color2;
+      .el-dialog__headerbtn{
+        top: 0;
+        bottom: 0;
+        margin: auto;
+        display: flex;
+        align-items: center;
+      }
+    }
+    .header-el-dropdown{
+      width: 86px;
+      height: 32px;
+      line-height: 32px;
+      border: 1px solid $--border-color-light;
+      border-right: none;
+      box-sizing: border-box;
+      padding: 0 8px;
+      .el-dropdown-link{
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+        & span:first-of-type{
+          color: $--color-text-primary;
+        }
+        i.el-icon--right{
+          margin-left: 0;
+          color: #999;
+        }
+      }
+    }
+    .header-el-dropdown+.el-input{
+      border-radius: 0 2px 2px 0;
+    }
+    .el-dialog__footer{
+      padding: 15px 20px;
+      border-top: 1px solid $--web-ssh-border-bottom-color2;
+      .footer__btn{
+        margin: 0;
+        &.webshell-btn-disable{
+          background: $--background-color-base;
+          color: $--web-ssh-color-text-disable;
+          cursor: default;
+        }
+      }
+      .footer__btn--light{
+        margin-right: 10px;
+      }
+    }
+  }
 }
 
 .webTerminal{

nezha-fronted/src/assets/css/components/common/selectTable.scss

@@ -0,0 +1,62 @@
+.selectTable{
+  .selectTable-search-input{
+    margin-top: 20px;
+    margin-bottom: 10px;
+    display: flex;
+    .el-input{
+      position: relative;
+      flex: 1;
+      input{
+        border: 1px solid $--border-color-light;
+        box-sizing: border-box;
+        padding-right: 36px;
+      }
+      .el-input__suffix{
+        right: 0;
+        .el-input__suffix-inner{
+          width: 36px;
+          height: 100%;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          font-size: 18px;
+          color: #999;
+        }
+      }
+    }
+  }
+  .el-table {
+    border: 0;
+    background-color: transparent;
+    th,tr,td{
+      border: 0;
+      background-color: transparent;
+    }
+    th.is-leaf{
+      border-bottom: none;
+    }
+    th.gutter {
+      display: table-cell !important;
+    }
+    &::before {
+      height: 0px;
+    }
+    &::after {
+      width: 0;
+    }
+    .el-table__fixed:before {
+      height: 0;
+    }
+    &.el-table--enable-row-hover .el-table__body tr:hover>td{
+      background-color: $--table-row-hover-background-color;
+    }
+    .el-table__row.row-selected{
+      background-color: $--table-row-hover-background-color;
+      color: #FA901C;
+    }
+  }
+  .pagination{
+    padding: 5px 0;
+    border-top: 1px solid $--select-table-border-color;
+  }
+}

nezha-fronted/src/assets/css/components/index.scss

@@ -120,6 +120,7 @@
 @import './page/tool/trace.scss';
 
 @import './common/v-selectpagenew/selectpage.scss';
+@import './common/selectTable.scss';
 @import './common/paramBpx/paramBox.scss';
 @import './common/picker/picker.scss';
 @import './common/threshold/threshold.scss';

nezha-fronted/src/assets/css/themes/theme-dark.scss

@@ -235,6 +235,11 @@ $--alert-rule-color: $--background-color-base;
 /* webSSH */
 $--web-ssh-background-color: $--background-color-disabled;
 $--web-ssh-border-bottom-color: $--background-color-copy;
+$--web-ssh-border-bottom-color2: #19191C;
+$--web-ssh-color-text-disable: #666666;
+
+/* selectTable */
+$--select-table-border-color:rgba(0,0,0,0.18);
 
 /* 图表弹框 */
 $--chart-background-color: $--background-color-empty;

nezha-fronted/src/assets/css/themes/theme-light.scss

@@ -231,6 +231,11 @@ $--alert-rule-color: $--overview-icon-color;
 /* webSSH */
 $--web-ssh-background-color: $--color-text-label;
 $--web-ssh-border-bottom-color: transparent;
+$--web-ssh-border-bottom-color2: #E7EAED;
+$--web-ssh-color-text-disable: #BEBEBE;
+
+/* selectTable */
+$--select-table-border-color:rgba(0,0,0,0.03);
 
 /* 图表弹框 */
 $--chart-background-color: #dde4ed;

nezha-fronted/src/components/cli/webSSHNew.vue

@@ -88,44 +88,39 @@
       </el-tab-pane>
     </el-tabs>
     <!--弹窗-->
-    <el-dialog :modal-append-to-body='false'  :show-close="true" :visible.sync="assetShow" @close="closeAssetCustom" class="nz-dialog" width="620px">
+    <el-dialog :modal-append-to-body='false' :show-close="true" :visible.sync="assetShow" @close="closeAssetCustom" class="nz-dialog webshell-selectAsset" width="620px">
-      <div slot="title">{{$t('webshell.connect')}}</div>
+      <div slot="title">{{$t('webshell.selAsset')}}</div>
-      <div >
+      <selectTable ref="selectTable" v-model="assetContent.assetId" :params="selectPageParams" :columns="columns" :tableFormat="tableFormat" api="asset/asset" value-key="id" search-key="manageIp">
-        <el-form label-width="120px" size="small" :model="assetContent" label-position = "top" :rules="rules" ref="assetConnect" v-my-loading="assetLoading" >
+        <template v-slot:searchLeft>
-          <el-form-item :label='$t("overall.asset")' prop="assetId" class="flex">
+          <el-dropdown trigger="click" class="header-el-dropdown">
-            <el-dropdown trigger="click" class="header-el-dropdown">
+            <span class="el-dropdown-link">
-              <span class="el-dropdown-link">
+              <span>{{selectValue}}</span>
-                <span>{{selectValue}}</span>
+              <span><i class="el-icon-arrow-down el-icon--right"></i></span>
-                <span><i class="el-icon-arrow-down el-icon--right"></i></span>
+            </span>
-              </span>
+            <el-dropdown-menu style="width: 80px" class="el-dropdown__width right-box-select-top right-public-box-dropdown-top" placement="bottom-end" slot="dropdown">
-              <el-dropdown-menu style="width: 118px" class="el-dropdown__width right-box-select-top right-public-box-dropdown-top" placement="bottom-end" slot="dropdown">
+              <el-dropdown-item
-                <el-dropdown-item
+                @click.native="selectAssetAuth(item.label, item.value)"
-                  @click.native="selectAssetAuth(item.label, item.value)"
+                v-for="item in searchMetrics"
-                  v-for="item in searchMetrics"
+                :key="item.value"
-                  :key="item.value"><i class="nz-icon" :class="item.icon" style="margin-right: 5px"/>{{item.label}}</el-dropdown-item>
+                style="padding:0px 10px"
-              </el-dropdown-menu>
+                >
-            </el-dropdown>
+                <i class="nz-icon" :class="item.icon" style="margin-right: 5px"/>{{item.label}}
-            <v-selectpage
+              </el-dropdown-item>
-              ref="selectPage"
+            </el-dropdown-menu>
-              style="flex: 1"
+          </el-dropdown>
-              data="asset/asset"
+        </template>
-              :params="selectPageParams"
+      </selectTable>
-              :tb-columns="columns"
+      <div slot="footer">
-              key-field="id"
+        <button class="footer__btn footer__btn--light" @click="assetShow=false">
-              show-field="manageIp"
+          <span>{{$t('overall.cancel')}}</span>
-              search-field="manageIp"
+        </button>
-              v-model="assetContent.assetId"
+        <button class="footer__btn" :class="{'webshell-btn-disable':!assetContent.assetId}" :disabled="prevent_opt.save||!assetContent.assetId" @click.prevent="connect">
-              size="small"
+          <span>{{$t('webshell.connect')}}</span>
-              :language="language"
+        </button>
-              :placeholder="$t('dashboard.panel.chartForm.selectAsset')"
-              id="box-input-asset-id"
-              :result-format="resultFormat"></v-selectpage>
-            <button :disabled="prevent_opt.save" class="nz-btn nz-btn-size-normal nz-btn-style-normal" type="button" @click.prevent="connect">Connect</button>
-          </el-form-item>
-        </el-form>
       </div>
     </el-dialog>
-    <el-dialog :modal-append-to-body='false'  :show-close="true" :visible.sync="customShow" @close="closeAssetCustom" class="nz-dialog" width="620px" destroy-on-close>
+    <!-- 自定义连接 start -->
+    <el-dialog :modal-append-to-body='false' :show-close="true" :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">
@@ -185,16 +180,19 @@
         </el-form>
       </div>
     </el-dialog>
+    <!-- 自定义连接 end -->
   </div>
 </template>
 
 <script>
 import terminal from './consoleNew'
+import selectTable from '@/components/common/selectTable'
 import { host, port } from '@/components/common/js/validate'
 export default {
   name: 'webSSH',
   components: {
-    terminal
+    terminal,
+    selectTable
   },
   computed: {
     language () { return this.$store.getters.getLanguage },
@@ -217,8 +215,8 @@ export default {
           label: 'SSH'
         },
         {
-          value: 'Telnet',
+          value: 'TELNET',
-          label: 'Telnet'
+          label: 'TELNET'
         }
       ],
       selectPageParams: {
@@ -259,34 +257,32 @@ export default {
         authProtocol: 1
       },
       columns: [
-        { title: 'ID', data: 'id' },
         {
-          title: 'Name',
+          label: 'ID',
-          data: function (row) {
+          prop: 'id',
-            if (row.name.length > 15) {
+          minWidth: 50
-              return row.name.substring(0, 12) + '...'
+        }, {
-            }
+          label: 'Name',
-            return row.name
+          prop: 'name',
-          }
+          minWidth: 100
-        },
+        }, {
-        { title: 'Manage Ip', data: 'manageIp' },
+          label: 'Manage Ip',
-        {
+          prop: 'manageIp',
-          title: 'Type',
+          minWidth: 135
-          data: (row) => {
+        }, {
-            return row.type ? row.type.name : ''
+          label: 'Type',
-          }
+          prop: 'type'
-        },
+        }, {
-        {
+          label: 'Model',
-          title: 'Model',
+          prop: 'model',
-          data: (row) => {
+          minWidth: 120
-            return row.model ? row.model.name : ''
+        }, {
-          }
+          label: 'Datacenter',
-        },
+          prop: 'dc',
-        {
+          minWidth: 96
-          title: 'Datacenter',
+        }, {
-          data: (row) => {
+          label: 'Protocol',
-            return row.dc ? row.dc.name : ''
+          prop: 'protocol'
-          }
         }
       ],
       rules: {
@@ -365,31 +361,53 @@ export default {
     }
   },
   methods: {
+    tableFormat (row, column, cellValue) {
+      let str
+      switch (column.property) {
+        case 'type':
+          str = row.type.name || '-'
+          break
+        case 'model':
+          str = row.model.name || '-'
+          break
+        case 'dc':
+          str = row.dc.name || '-'
+          break
+        case 'protocol':
+          str = this.selectPageParams.authProtocol == 1 ? 'SSH' : 'TELNET'
+          break
+        default:
+          str = cellValue || '-'
+          break
+      }
+      return str
+    },
     selectAssetAuth (val, label) {
-      this.$refs.selectPage.remove()
+      this.assetContent.assetId = ''
       if (val) {
         this.selectValue = val
         if (val === 'SSH') {
-          this.selectPageParams = { authProtocol: 1, pageNumber: 1 }
+          this.selectPageParams = { authProtocol: 1 }
         } else {
-          this.selectPageParams = { authProtocol: 2, pageNumber: 1 }
+          this.selectPageParams = { authProtocol: 2 }
         }
       } else {
         label = 'SSH'
-        this.selectPageParams = { authProtocol: 1, pageNumber: 1 }
+        this.selectPageParams = { authProtocol: 1 }
       }
-      setTimeout(() => {
+      this.$nextTick(() => {
-        this.$refs.selectPage.pageChange()
+        this.$refs.selectTable.pageChange(1)
-      }, 100)
+      })
     },
     assetShowChange () {
       this.assetShow = true
       this.selectValue = 'SSH'
-      this.selectPageParams = { authProtocol: 1, pageNumber: 1 }
+      this.selectPageParams = { authProtocol: 1 }
-      if (this.$refs.selectPage) {
+      this.$nextTick(() => {
-        this.$refs.selectPage.remove()
+        this.$refs.selectTable.filter = ''
-        this.$refs.selectPage.pageChange()
+        this.$refs.selectTable.pageChange(1)
-      }
+      })
+
       // this.getAssetData()
     },
     /* 活动标签切换时触发 */
@@ -500,17 +518,11 @@ export default {
     connect () {
       this.prevent_opt.save = true
       if (this.assetShow) {
-        this.$refs.assetConnect.validate((valid) => {
+        this.$get('asset/asset/' + this.assetContent.assetId).then(res => {
-          if (valid) {
+          const asset = res.data
-            this.$get('asset/asset/' + this.assetContent.assetId).then(res => {
+          this.addConsole(asset.id, asset.manageIp, '', '', 'asset')
-              const asset = res.data
+          this.assetShow = false
-              this.addConsole(asset.id, asset.manageIp, '', '', 'asset')
+          this.prevent_opt.save = false
-              this.assetShow = false
-              this.prevent_opt.save = false
-            })
-          } else {
-            this.prevent_opt.save = false
-          }
         })
       } else {
         this.$refs.customConnect.validate((valid) => {

nezha-fronted/src/components/common/selectTable.vue

@@ -0,0 +1,150 @@
+<template>
+  <div class="selectTable">
+    <div class="selectTable-search-input">
+      <slot name="searchLeft"></slot>
+      <el-input size="small" v-model="filter" @keyup.native="search">
+        <i slot="suffix" class="el-icon-search"></i>
+      </el-input>
+    </div>
+    <el-table
+      v-my-loading="loading"
+      :data="tableData"
+      :row-style="{cursor: 'pointer'}"
+      :cell-style="{height:'32px',padding:'0'}"
+      :header-cell-style="{height:'32px',padding: '0'}"
+      :row-class-name="({row})=>{return row[valueKey] == this.myValue ? 'row-selected':''}"
+      @row-click="rowClick"
+      :height="tableHeight"
+      >
+      <el-table-column
+        v-for="(item, index) in columns"
+        :key="`col-${index}`"
+        :min-width="`${item.minWidth}`"
+        :width="`${item.width}`"
+        :prop="item.prop"
+        :label="item.label"
+        :formatter="tableFormat"
+      >
+      </el-table-column>
+      <template slot="empty">
+        <div v-if="!loading" class="table-no-data">
+          <svg class="icon" aria-hidden="true">
+            <use xlink:href="#nz-icon-no-data-list"></use>
+          </svg>
+          <div class="table-no-data__title">No results found</div>
+        </div>
+        <div v-else>&nbsp;</div>
+      </template>
+    </el-table>
+    <div class="pagination">
+      <el-pagination
+        @current-change="pageChange"
+        :current-page.sync="pageNo"
+        :page-size="pageSize"
+        :total="total"
+        layout="total, prev, pager, next"
+      >
+      </el-pagination>
+    </div>
+  </div>
+</template>
+
+<script>
+import bus from '@/libs/bus'
+export default {
+  name: 'selectTable',
+  model: {
+    prop: 'myValue'
+  },
+  props: {
+    // 当前选中的值
+    myValue: {
+      type: [Number, String]
+    },
+    api: {
+      type: String,
+      require: true
+    },
+    params: {
+      type: Object,
+      default: function () {
+        return {}
+      }
+    },
+    // 作为唯一标识的键名
+    valueKey: {
+      type: String,
+      default: 'id'
+    },
+    // 搜索的键名
+    searchKey: {
+      type: String,
+      default: 'id'
+    },
+    pageSize: {
+      type: Number,
+      default: 10
+    },
+    tableHeight: {
+      type: Number,
+      default: 288
+    },
+    columns: {
+      type: Array,
+      default: function () {
+        return []
+      }
+    },
+    // 展示数据格式化
+    tableFormat: {
+      type: Function,
+      default: function (row, column, cellValue) {
+        return cellValue || '-'
+      }
+    }
+  },
+  data () {
+    return {
+      loading: false,
+      filter: '',
+      tableData: [],
+      pageNo: 1,
+      total: 0
+    }
+  },
+  methods: {
+    getTableData () {
+      this.loading = true
+      const params = {
+        ...this.params,
+        pageNo: this.pageNo,
+        pageSize: this.pageSize,
+        [this.searchKey]: this.filter
+      }
+      this.$get(this.api, params).then(response => {
+        this.loading = false
+        if (response.code === 200) {
+          this.tableData = response.data.list
+          this.total = response.data.total
+        } else {
+          this.$message.error(response.msg)
+        }
+      })
+    },
+    // 当前行点击选中
+    rowClick (row) {
+      const value = this.myValue == row[this.valueKey] ? '' : row[this.valueKey]
+      this.$emit('input', value)
+    },
+    // 搜索关键字
+    search: bus.debounce(function () {
+      this.pageNo = 1
+      this.getTableData()
+    }, 500),
+    pageChange (val) {
+      this.pageNo = val
+      this.getTableData()
+    }
+  }
+}
+</script>

nezha-fronted/src/components/page/tool/ping.vue

@@ -230,13 +230,11 @@ export default {
     // 防止标签输入框失去焦点校验和开始任务校验重复(连续两次message提示)
     validateHost: bus.debounce(function () {
       this.$message.error(this.$t('validate.host'))
-    },
+    }, 50),
-    50),
     // 防止标签输入框失去焦点校验和开始任务校验重复(连续两次message提示)
     validateDuplicate: bus.debounce(function () {
       this.$message.error(this.$t('ping.duplicate') + ' IP')
-    },
+    }, 50),
-    50),
     // 添加标签之前
     beforeAddTag ({ tag, addTag }) {
       if (!ipv4.test(tag.text) && !ipv6.test(tag.text)) {
@@ -395,7 +393,3 @@ export default {
   }
 }
 </script>
-
-<style lang="scss" scoped>
-
-</style>

nezha-fronted/src/components/page/tool/trace.vue

@@ -221,13 +221,11 @@ export default {
     // 防止标签输入框失去焦点校验和开始任务校验重复(连续两次message提示)
     validateHost: bus.debounce(function () {
       this.$message.error(this.$t('validate.host'))
-    },
+    }, 50),
-    50),
     // 防止标签输入框失去焦点校验和开始任务校验重复(连续两次message提示)
     validateDuplicate: bus.debounce(function () {
       this.$message.error(this.$t('ping.duplicate') + ' IP')
-    },
+    }, 50),
-    50),
     // 添加标签之前
     beforeAddTag ({ tag, addTag }) {
       if (!ipv4.test(tag.text) && !ipv6.test(tag.text)) {
@@ -386,7 +384,3 @@ export default {
   }
 }
 </script>
-
-<style lang="scss" scoped>
-
-</style>

nezha-fronted/src/store/terminalFile.js

@@ -26,10 +26,12 @@ const terminalFile = {
       if (!state.messageFunction) {
         state.messageFunction = true
         window.addEventListener('message', function (e) {
-          const data = JSON.parse(e.data) // e.data  里面有自己所传的所有参数  可以根据参数做自己的判断
+          try {
-          if (data.close) {
+            const data = JSON.parse(e.data) // e.data  里面有自己所传的所有参数  可以根据参数做自己的判断
-            state.externalTerminal = false
+            if (data.close) {
-          }
+              state.externalTerminal = false
+            }
+          } catch (error) {}
         })
         window.addEventListener('unload', () => {
           state.externalTerminal = false

nezha-fronted/src/store/user.js

@@ -93,7 +93,6 @@ const user = {
       localStorage.setItem(`nz-user-${res.data.user.id}-theme`, currentTheme)
       const body = document.getElementsByTagName('body')[0]
       body.setAttribute('class', `theme-${currentTheme}`)
-      console.log(res)
       localStorage.setItem('timezoneOffset', moment.tz(res.data.timezone || defaultAppearance.timezone).format('Z'))
       localStorage.setItem('nz-sys-default-cabinet-usize', res.data.defaultCabinetUsize)
       localStorage.setItem('nz-sys-max-terminal-num', res.data.maxTerminalNum)