feat: 优化创建是选择默认的资产和节点 feat: 优化protocols选择

2025-09-19 09:43:32 +00:00 · 2020-06-08 13:41:01 +08:00
parent 1ec46d11ce
commit b0f0c55063
10 changed files with 114 additions and 21 deletions
--- a/src/components/AutoDataZTree/index.vue
+++ b/src/components/AutoDataZTree/index.vue
@@ -73,7 +73,6 @@ export default {
    }
  },
  mounted() {
-
  },
  methods: {
    editTreeNode: function() {
@@ -96,9 +95,11 @@ export default {
      if (treeNode.meta.type === 'node') {
        this.currentNode = treeNode
        this.currentNodeId = treeNode.meta.node.id
+        this.$route.query['node'] = this.currentNodeId
        this.$emit('urlChange', `${this.setting.url}?node_id=${treeNode.meta.node.id}&show_current_asset=null`)
      } else if (treeNode.meta.type === 'asset') {
        this.$emit('urlChange', `${this.setting.url}?asset_id=${treeNode.meta.asset.id}&show_current_asset=null`)
+        this.$route.query['asset'] = treeNode.meta.asset.id
      }
    },
    removeTreeNode: function() {
--- a/src/components/ListTable/TableAction/LeftSide.vue
+++ b/src/components/ListTable/TableAction/LeftSide.vue
@@ -24,7 +24,7 @@ export default {
      default: ''
    },
    createRoute: {
-      type: String,
+      type: [String, Object],
      default: function() {
        return this.$route.name.replace('List', 'Create')
      }
@@ -112,8 +112,13 @@ export default {
  },
  methods: {
    handleCreate() {
-      const routeName = this.createRoute
-      this.$router.push({ name: routeName })
+      let route = {}
+      if (typeof this.createRoute === 'string') {
+        route.name = this.createRoute
+      } else {
+        route = this.createRoute
+      }
+      this.$router.push(route)
      this.$log.debug('handle create')
    },
    defaultBulkDeleteCallback({ selectedRows, reloadTable }) {
--- a/src/i18n/langs/cn.json
+++ b/src/i18n/langs/cn.json
@@ -152,6 +152,7 @@
    "DateLastMonth": "最近一月",
    "DateLast3Months": "最近三月",
    "MFAConfirm": "MFA 认证",
+    "SelectPlaceholder": "请选择",
    "Yes": "是",
    "No": "否",
    "Remove":"删除",
--- a/src/i18n/langs/en.json
+++ b/src/i18n/langs/en.json
@@ -151,6 +151,7 @@
    "DateLastMonth": "Last month",
    "DateLast3Months": "Last 3 months",
    "MFAConfirm": "MFA Confirm",
+    "SelectPlaceholder": "Select",
    "Yes": "Yes",
    "Remove":"Remove",
    "No": "No",
--- a/src/styles/element-ui.scss
+++ b/src/styles/element-ui.scss
@@ -11,6 +11,10 @@ $--color-info: #23c6c8;
 $--color-warning: #f8ac59;
 $--color-danger: #ed5565;

+$--color-text-primary: #303133;
+/// color|1|Font Color|2
+$--color-text-regular: #606266;
+
 .el-upload {
  input[type="file"] {
    display: none !important;
@@ -434,3 +438,11 @@ a {
 .el-alert .el-alert__description {
  margin: 1px 0 0;
 }
+
+.el-input-group__prepend div.el-select .el-input__inner {
+  color: $--color-text-primary;
+}
+
+.el-input-group__prepend div.el-select .el-input__inner:hover {
+  color: $--color-text-primary;
+}
--- a/src/views/assets/Asset/AssetCreateUpdate.vue
+++ b/src/views/assets/Asset/AssetCreateUpdate.vue
@@ -4,17 +4,23 @@

 <script>
 import GenericCreateUpdatePage from '@/layout/components/GenericCreateUpdatePage'
-import CustomInput from '@/components/CustomInput'
+import Protocols from './components/Protocols'
 export default {
  name: 'AssetCreateUpdate',
  components: {
    GenericCreateUpdatePage
  },
  data() {
+    const nodesInitial = []
+    if (this.$route.query['node']) {
+      nodesInitial.push(this.$route.query.node)
+    }
    return {
      initial: {
        is_active: true,
-        platform: 'Linux'
+        platform: 'Linux',
+        protocols: ['ssh/22'],
+        nodes: nodesInitial
      },
      fields: [
        [this.$t('assets.Basic'), ['hostname', 'ip', 'platform', 'public_ip', 'domain']],
@@ -26,7 +32,7 @@ export default {
      ],
      fieldsMeta: {
        protocols: {
-          component: CustomInput
+          component: Protocols
        },
        platform: {
          el: {
--- a/src/views/assets/Asset/AssetList.vue
+++ b/src/views/assets/Asset/AssetList.vue
@@ -77,7 +77,10 @@ export default {
        }
      },
      headerActions: {
-        createRoute: 'AssetCreate',
+        createRoute: {
+          name: 'AssetCreate',
+          query: this.$route.query
+        },
        extraMoreActions: [
          {
            name: 'DeactiveSelected',
--- a/src/views/assets/Asset/components/Protocols/index.vue
+++ b/src/views/assets/Asset/components/Protocols/index.vue
@@ -1,17 +1,14 @@
 <template>
  <div>
    <div v-for="(item,index) in items" :key="index" style="display: flex;justify-content: space-around;margin-top: 8px;">
-      <el-input v-model="item.value" :placeholder="placeholder" class="input-with-select" v-bind="$attrs">
-        <el-select slot="prepend" v-model="item.select" placeholder="请选择">
-          <el-option label="ssh" value="ssh" />
-          <el-option label="vnc" value="vnc" />
-          <el-option label="rdp" value="rdp" />
-          <el-option label="telnet" value="telnet" />
+      <el-input v-model="item.value" class="input-with-select" v-bind="$attrs">
+        <el-select slot="prepend" v-model="item.select" @change="handleProtocolChange">
+          <el-option v-for="p of remainProtocols" :key="p.name" :label="p.name" :value="p.name" />
        </el-select>
      </el-input>
-      <div style="display: flex">
+      <div style="display: flex" class="input-button">
        <el-button type="danger" icon="el-icon-minus" style="flex-shrink: 0;" size="mini" :disabled="items.length===1" @click="handleDelete(index)" />
-        <el-button type="success" icon="el-icon-plus" style="flex-shrink: 0;" size="mini" @click="handleAdd(index)" />
+        <el-button type="primary" icon="el-icon-plus" style="flex-shrink: 0;" size="mini" @click="handleAdd(index)" />
      </div>
    </div>
  </div>
@@ -27,10 +24,6 @@ export default {
    title: {
      type: String,
      default: ''
-    },
-    placeholder: {
-      type: String,
-      default: () => ''
    }
  },
  data() {
@@ -41,6 +34,24 @@ export default {
          value: '',
          select: ''
        }
+      ],
+      protocols: [
+        {
+          name: 'ssh',
+          port: 22
+        },
+        {
+          name: 'rdp',
+          port: 3389
+        },
+        {
+          name: 'telnet',
+          port: 23
+        },
+        {
+          name: 'vnc',
+          port: 5901
+        }
      ]
    }
  },
@@ -51,6 +62,22 @@ export default {
        data.push(`${i.select}/${i.value}`)
      })
      return data
+    },
+    itemsMap() {
+      const mapper = {}
+      for (const item of this.items) {
+        mapper[item.select] = item
+      }
+      return mapper
+    },
+    remainProtocols() {
+      const remain = []
+      for (const item of this.protocols) {
+        if (!this.itemsMap[item.name]) {
+          remain.push(item)
+        }
+      }
+      return remain
    }
  },
  watch: {
@@ -90,6 +117,21 @@ export default {
          select: ''
        }
      )
+    },
+    handleProtocolChange(val) {
+      let port = 22
+      switch (val) {
+        case 'rdp':
+          port = 3389
+          break
+        case 'telnet':
+          port = 23
+          break
+        case 'vnc':
+          port = 5901
+          break
+      }
+      this.itemsMap[val].value = port
    }
  }
 }
@@ -111,4 +153,12 @@ export default {
  .el-select /deep/ .el-input__inner {
    width: 100px;
  }
+
+  .input-button {
+    margin-top: 4px;
+  }
+  .input-button /deep/ .el-button.el-button--mini {
+    height: 25px;
+    padding: 5px;
+  }
 </style>
--- a/src/views/perms/AssetPermission/AssetPermissionCreateUpdate.vue
+++ b/src/views/perms/AssetPermission/AssetPermissionCreateUpdate.vue
@@ -11,11 +11,21 @@ export default {
    GenericCreateUpdatePage
  },
  data() {
+    const nodesInitial = []
+    if (this.$route.query['node']) {
+      nodesInitial.push(this.$route.query.node)
+    }
+    const assetsInitial = []
+    if (this.$route.query['asset']) {
+      assetsInitial.push(this.$route.query.asset)
+    }
    return {
      initial: {
        is_active: true,
        actions: ['all', 'connect', 'updownload', 'upload_file', 'download_file'],
-        date_expired: '2099-12-31 00:00:00 +0800'
+        date_expired: '2099-12-31 00:00:00 +0800',
+        nodes: nodesInitial,
+        assets: assetsInitial
      },
      fields: [
        [this.$t('perms.Basic'), ['name']],
--- a/src/views/perms/AssetPermission/AssetPermissionList.vue
+++ b/src/views/perms/AssetPermission/AssetPermissionList.vue
@@ -97,6 +97,10 @@ export default {
        }
      },
      headerActions: {
+        createRoute: {
+          name: 'AssetPermissionCreate',
+          query: this.$route.query
+        },
        hasRightActions: false,
        hasBulkDelete: false,
        hasBulkUpdate: false,