perf: gateway

src/views/assets/Domain/DomainDetail/GatewayCreateUpdate.vue

@@ -6,6 +6,7 @@
 import GenericCreateUpdatePage from '@/layout/components/GenericCreateUpdatePage'
 import { Select2, UploadKey } from '@/components'
 import { UpdateToken } from '@/components/FormFields'
+import ProtocolSelector from '../components/ProtocolSelector'
 
 export default {
   name: 'GatewayCreateUpdate',
@@ -13,23 +14,17 @@ export default {
   data() {
     return {
       initial: {
-        protocol: 'ssh',
-        port: 22,
-        domain: this.$route.query.domain,
-        is_active: true
+        is_active: true,
+        protocols: '',
+        domain: this.$route.query.domain
       },
       fields: [
-        [this.$t('common.Basic'), ['name', 'ip', 'port', 'protocol', 'domain']],
+        [this.$t('common.Basic'), ['name', 'address']],
+        [this.$t('assets.Network'), ['domain', 'protocols']],
         [this.$t('assets.Auth'), ['username', 'password', 'private_key', 'passphrase']],
         [this.$t('common.Other'), ['is_active', 'comment']]
       ],
       fieldsMeta: {
-        ip: {
-          type: 'input',
-          el: {
-            type: 'input'
-          }
-        },
         domain: {
           component: Select2,
           el: {
@@ -40,17 +35,25 @@ export default {
             multiple: false
           }
         },
-        protocol: {
-          helpText: this.$t('assets.GatewayProtocolHelpText')
+        protocols: {
+          component: ProtocolSelector,
+          el: {
+          },
+          hidden: (form) => {
+            const fieldsMeta = this.fieldsMeta
+            if (form['protocols']) {
+              fieldsMeta['protocols'].el.choices = form['protocols']
+            }
+          }
         },
         password: {
           component: UpdateToken
         },
-        is_active: {
-          type: 'switch'
-        },
         private_key: {
           component: UploadKey
+        },
+        is_active: {
+          type: 'switch'
         }
       },
       updateSuccessNextRoute: {
@@ -87,6 +90,9 @@ export default {
       }
     }
   },
+  mounted() {
+    console.log('---', this.object)
+  },
   methods: {
   }
 }

src/views/assets/Domain/components/ProtocolSelector/index.vue

@@ -0,0 +1,116 @@
+<template>
+  <div class="hide-setting">
+    <div v-for="item in items" :key="item.name" style="display: flex;margin-top: 8px;">
+      <el-input v-model="item.port" :placeholder="portPlaceholder" class="input-with-select" v-bind="$attrs">
+        <el-select
+          slot="prepend"
+          v-model="item.name"
+          class="prepend"
+          :disabled="true"
+        >
+          <el-option :key="item.name" :label="item.name" :value="item.name" />
+        </el-select>
+      </el-input>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    value: {
+      type: [Array],
+      default: () => []
+    },
+    title: {
+      type: String,
+      default: ''
+    },
+    choices: {
+      type: Array,
+      default: () => ([{ 'name': 'ssh', 'port': 22 }])
+    }
+  },
+  data() {
+    return {
+      name: '',
+      items: [],
+      settingItem: {},
+      showDialog: false
+    }
+  },
+  computed: {
+    selectedProtocolNames() {
+      return this.items.map(item => item.name)
+    },
+    remainProtocols() {
+      return this.choices
+    },
+    portPlaceholder() {
+      if (this.settingReadonly) {
+        return this.$t('applications.port')
+      } else {
+        return this.$t('assets.DefaultPort')
+      }
+    }
+  },
+  watch: {
+    choices: {
+      handler(value) {
+        this.setDefaultItems(value)
+      }
+    },
+    items: {
+      handler(value) {
+        this.$emit('input', value)
+      },
+      immediate: true,
+      deep: true
+    }
+  },
+  mounted() {
+    this.setDefaultItems(this.choices)
+  },
+  methods: {
+    setDefaultItems(choices) {
+      this.items = choices
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+.el-select .el-input {
+  width: 130px;
+}
+
+.el-select {
+  max-width: 120px;
+}
+
+.input-with-select {
+  flex-shrink: 1;
+  width: calc(100%) !important;
+}
+
+.input-with-select .el-input-group__prepend {
+  background-color: #fff;
+}
+
+.el-select ::v-deep .el-input__inner {
+  width: 110px;
+}
+
+.input-button {
+  margin-top: 4px;
+}
+
+.input-button ::v-deep .el-button.el-button--mini {
+  height: 25px;
+  padding: 5px;
+}
+.el-input-group__append .el-button {
+  font-size: 14px;
+  color: #1a1a1a;
+  padding: 9px 20px;
+}
+</style>