From b0f0c550633efdbd1cf2f89f29ef5efb09ba4cbd Mon Sep 17 00:00:00 2001
From: ibuler <ibuler@qq.com>
Date: Mon, 8 Jun 2020 13:41:01 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=E5=88=9B=E5=BB=BA?=
 =?UTF-8?q?=E6=98=AF=E9=80=89=E6=8B=A9=E9=BB=98=E8=AE=A4=E7=9A=84=E8=B5=84?=
 =?UTF-8?q?=E4=BA=A7=E5=92=8C=E8=8A=82=E7=82=B9=20feat:=20=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96protocols=E9=80=89=E6=8B=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/AutoDataZTree/index.vue        |  3 +-
 .../ListTable/TableAction/LeftSide.vue        | 11 ++-
 src/i18n/langs/cn.json                        |  1 +
 src/i18n/langs/en.json                        |  1 +
 src/styles/element-ui.scss                    | 12 +++
 src/views/assets/Asset/AssetCreateUpdate.vue  | 12 ++-
 src/views/assets/Asset/AssetList.vue          |  5 +-
 .../Asset/components/Protocols}/index.vue     | 74 ++++++++++++++++---
 .../AssetPermissionCreateUpdate.vue           | 12 ++-
 .../AssetPermission/AssetPermissionList.vue   |  4 +
 10 files changed, 114 insertions(+), 21 deletions(-)
 rename src/{components/CustomInput => views/assets/Asset/components/Protocols}/index.vue (57%)

diff --git a/src/components/AutoDataZTree/index.vue b/src/components/AutoDataZTree/index.vue
index 0041f7557..705757002 100644
--- 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() {
diff --git a/src/components/ListTable/TableAction/LeftSide.vue b/src/components/ListTable/TableAction/LeftSide.vue
index 2a642680e..e393c70d3 100644
--- 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 }) {
diff --git a/src/i18n/langs/cn.json b/src/i18n/langs/cn.json
index 272201818..aead3e565 100644
--- a/src/i18n/langs/cn.json
+++ b/src/i18n/langs/cn.json
@@ -152,6 +152,7 @@
     "DateLastMonth": "最近一月",
     "DateLast3Months": "最近三月",
     "MFAConfirm": "MFA 认证",
+    "SelectPlaceholder": "请选择",
     "Yes": "是",
     "No": "否",
     "Remove":"删除",
diff --git a/src/i18n/langs/en.json b/src/i18n/langs/en.json
index d87e3c1e9..469f53832 100644
--- 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",
diff --git a/src/styles/element-ui.scss b/src/styles/element-ui.scss
index 557b35ef8..d929830dc 100644
--- 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;
+}
diff --git a/src/views/assets/Asset/AssetCreateUpdate.vue b/src/views/assets/Asset/AssetCreateUpdate.vue
index 1c54dfd0b..2a307d375 100644
--- 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: {
diff --git a/src/views/assets/Asset/AssetList.vue b/src/views/assets/Asset/AssetList.vue
index 441d111ad..59bcdd98d 100644
--- 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',
diff --git a/src/components/CustomInput/index.vue b/src/views/assets/Asset/components/Protocols/index.vue
similarity index 57%
rename from src/components/CustomInput/index.vue
rename to src/views/assets/Asset/components/Protocols/index.vue
index 20ebefe2d..e8cba4ebd 100644
--- a/src/components/CustomInput/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>
diff --git a/src/views/perms/AssetPermission/AssetPermissionCreateUpdate.vue b/src/views/perms/AssetPermission/AssetPermissionCreateUpdate.vue
index 940f69327..ea35d9481 100644
--- 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']],
diff --git a/src/views/perms/AssetPermission/AssetPermissionList.vue b/src/views/perms/AssetPermission/AssetPermissionList.vue
index 2febb4d15..b05af752a 100644
--- 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,