From f0596406020e8efe3539e0b684b12d15fc7ac109 Mon Sep 17 00:00:00 2001
From: ibuler <ibuler@qq.com>
Date: Sun, 1 May 2022 12:20:44 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96=E9=80=89=E6=8B=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../FormFields/ProtocolSelector.vue           | 68 ++++++-------------
 1 file changed, 19 insertions(+), 49 deletions(-)

diff --git a/src/components/FormFields/ProtocolSelector.vue b/src/components/FormFields/ProtocolSelector.vue
index d32b9b643..a00009408 100644
--- a/src/components/FormFields/ProtocolSelector.vue
+++ b/src/components/FormFields/ProtocolSelector.vue
@@ -1,8 +1,8 @@
 <template>
   <div>
     <div v-for="(item, index) in items" :key="index" style="display: flex;margin-top: 8px;">
-      <el-input v-model="item.value" class="input-with-select" v-bind="$attrs">
-        <el-select slot="prepend" v-model="item.select" @change="handleProtocolChange">
+      <el-input v-model="item.port" class="input-with-select" v-bind="$attrs">
+        <el-select slot="prepend" v-model="item.name" @change="handleProtocolChange($event, item)">
           <el-option v-for="p of remainProtocols" :key="p.name" :label="p.name" :value="p.name" />
         </el-select>
       </el-input>
@@ -20,7 +20,7 @@
           type="primary"
           icon="el-icon-plus"
           style="flex-shrink: 0;"
-          :disabled="remainProtocols.length === 0 || !item.value"
+          :disabled="remainProtocols.length === 0 || !item.port"
           size="mini"
           @click="handleAdd(index)"
         />
@@ -47,13 +47,8 @@ export default {
   },
   data() {
     return {
-      select: '',
-      items: [
-        {
-          value: '',
-          select: ''
-        }
-      ]
+      name: '',
+      items: []
     }
   },
   computed: {
@@ -64,27 +59,21 @@ export default {
       })
     },
     values() {
-      const data = []
-      this.items.map(i => {
-        data.push(`${i.select}/${i.value}`)
+      return this.items.map(item => {
+        return `${item.name}/${item.port}`
       })
-      return data
     },
     itemsMap() {
       const mapper = {}
       for (const item of this.items) {
-        mapper[item.select] = item
+        mapper[item.name] = item
       }
       return mapper
     },
     remainProtocols() {
-      const remain = []
-      for (const item of this.protocols) {
-        if (!this.itemsMap[item.name]) {
-          remain.push(item)
-        }
-      }
-      return remain
+      return this.protocols.filter(proto => {
+        return !this.itemsMap[proto.name]
+      })
     }
   },
   watch: {
@@ -98,13 +87,9 @@ export default {
   },
   mounted() {
     if (this.value.length !== 0) {
-      this.items = []
-      this.value.forEach(v => {
-        const data = v.split('/')
-        this.items.push({
-          value: data[1],
-          select: data[0]
-        })
+      this.items = this.value.map(item => {
+        const proto = item.split('/')
+        return { name: proto[0], port: proto[1] }
       })
     }
   },
@@ -118,27 +103,12 @@ export default {
       })
     },
     handleAdd(index) {
-      this.items.push(
-        {
-          value: '',
-          select: ''
-        }
-      )
+      this.items.push({ ...this.remainProtocols[0] })
     },
-    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
+    handleProtocolChange(evt, item) {
+      const selected = this.protocols.find(item => item.name === evt)
+      item.name = selected.name
+      item.port = selected.port
     }
   }
 }