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

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() {

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
+      let route = {}
-      this.$router.push({ name: routeName })
+      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 }) {

src/i18n/langs/cn.json

@@ -152,6 +152,7 @@
     "DateLastMonth": "最近一月",
     "DateLast3Months": "最近三月",
     "MFAConfirm": "MFA 认证",
+    "SelectPlaceholder": "请选择",
     "Yes": "是",
     "No": "否",
     "Remove":"删除",

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",

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;
+}

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: {

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',

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-input v-model="item.value" class="input-with-select" v-bind="$attrs">
-        <el-select slot="prepend" v-model="item.select" placeholder="请选择">
+        <el-select slot="prepend" v-model="item.select" @change="handleProtocolChange">
-          <el-option label="ssh" value="ssh" />
+          <el-option v-for="p of remainProtocols" :key="p.name" :label="p.name" :value="p.name" />
-          <el-option label="vnc" value="vnc" />
-          <el-option label="rdp" value="rdp" />
-          <el-option label="telnet" value="telnet" />
         </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>

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']],

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,