perf: 修改 protocol selector

src/components/FormFields/ProtocolSelector/ProtocolSettingDialog.vue

@@ -0,0 +1,118 @@
+<template>
+  <Dialog
+    :title="'平台协议配置：' + item.name"
+    :destroy-on-close="true"
+    :show-cancel="false"
+    :show-confirm="false"
+    :close-on-click-modal="false"
+    class="setting-dialog"
+    width="70%"
+    v-bind="$attrs"
+    @open="onOpen"
+    v-on="$listeners"
+  >
+    <el-alert type="success">
+      继承自平台配置，如需更改，请更改平台中的配置
+      <el-link :href="platformDetail" class="link-more" target="_blank">查看</el-link>
+      <i class="fa fa-external-link" />
+    </el-alert>
+    <DataForm
+      class="data-form"
+      :form="form"
+      :disabled="iDisabled"
+      v-bind="config"
+      @submit="onSubmit"
+    />
+  </Dialog>
+</template>
+
+<script>
+import { Dialog, DataForm } from '@/components'
+export default {
+  name: 'ProtocolSetting',
+  components: {
+    Dialog,
+    DataForm
+  },
+  props: {
+    item: {
+      type: Object,
+      default: () => ({})
+    },
+    disabled: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data() {
+    return {
+      form: this.item.setting || {},
+      iDisabled: this.disabled,
+      platformDetail: '#/console/assets/platforms/' + this.$route.query['platform'],
+      config: {
+        hasSaveContinue: false,
+        hasButtons: !this.disabled,
+        fields: [
+          {
+            id: 'required',
+            label: '必须配置',
+            helpText: '资产上必须开启该协议',
+            type: 'switch'
+          },
+          {
+            id: 'console',
+            label: 'Console',
+            type: 'switch',
+            hidden: () => this.item.name !== 'rdp'
+          },
+          {
+            id: 'security',
+            label: 'Security',
+            hidden: () => this.item.name !== 'rdp',
+            type: 'radio-group',
+            options: [
+              { label: 'Any', value: 'any' },
+              { label: 'RDP', value: 'rdp' },
+              { label: 'NLA', value: 'nla' },
+              { label: 'TLS', value: 'tls' }
+            ]
+          },
+          {
+            id: 'sftp_home',
+            label: 'SFTP home',
+            type: 'input',
+            helpText: this.$t('assets.SFTPHelpMessage'),
+            hidden: () => this.item.name !== 'sftp'
+          }
+        ]
+      }
+    }
+  },
+  methods: {
+    onSubmit(form) {
+      this.item.setting = form
+      this.$emit('update:visible', false)
+    },
+    onOpen() {
+      this.form = this.item.setting
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.data-form >>> .el-form-item.form-buttons {
+  padding-top: 10px;
+  margin-bottom: 0;
+}
+
+.setting-dialog >>> .el-dialog__body {
+  padding-top: 10px;
+}
+.link-more {
+  font-size: 10px;
+  margin-left: 10px;
+  border-bottom: solid 1px;
+  color: inherit;
+}
+</style>

src/components/FormFields/ProtocolSelector/index.vue

@@ -14,7 +14,6 @@
           v-if="showSetting(item)"
           slot="append"
           icon="el-icon-setting"
-          :disabled="disableSetting(item)"
           @click="onSettingClick(item)"
         />
       </el-input>
@@ -38,11 +37,19 @@
         />
       </div>
     </div>
+    <ProtocolSettingDialog
+      :visible.sync="showDialog"
+      :item="settingItem"
+    />
   </div>
 </template>
 
 <script>
+import ProtocolSettingDialog from './ProtocolSettingDialog'
 export default {
+  components: {
+    ProtocolSettingDialog
+  },
   props: {
     value: {
       type: [Array],
@@ -59,19 +66,7 @@ export default {
     showSetting: {
       type: Function,
       default: (item) => {
-        return false
+        return true
-      }
-    },
-    disableSetting: {
-      type: Function,
-      default: (item) => {
-        return false
-      }
-    },
-    onSettingClick: {
-      type: Function,
-      default: (item) => {
-        alert('Click setting: ' + item.name + ', port: ' + item.port)
       }
     }
   },
@@ -79,7 +74,8 @@ export default {
     return {
       name: '',
       items: [],
-      settingItem: {}
+      settingItem: {},
+      showDialog: false
     }
   },
   computed: {
@@ -131,6 +127,10 @@ export default {
       if (choices.length !== 0) {
         this.items = [choices[0]]
       }
+    },
+    onSettingClick(item) {
+      this.settingItem = item
+      this.showDialog = true
     }
   }
 }

src/components/FormFields/index.js

@@ -1,4 +1,3 @@
-import DatetimeRangePicker from './DatetimeRangePicker'
 import Link from './Link'
 import PasswordInput from './PasswordInput'
 import Select2 from './Select2'
@@ -11,6 +10,7 @@ import UpdateToken from './UpdateToken'
 import JsonEditor from './JsonEditor'
 import Text from './Text'
 import NestedObjectSelect2 from './NestedObjectSelect2'
+import DatetimeRangePicker from './DatetimeRangePicker'
 
 export default {
   DatetimeRangePicker,

src/views/assets/Asset/AssetCreateUpdate/DatabaseCreateUpdate.vue

@@ -21,7 +21,6 @@ export default {
       initial: {
         is_active: true,
         platform: parseInt(platformId),
-        protocols: ['mysql/22'],
         nodes: nodesInitial
       },
       url: '/api/v1/assets/databases/',

src/views/assets/Asset/AssetCreateUpdate/HostCreateUpdate.vue

@@ -34,8 +34,12 @@ export default {
       hasDetailInMsg: false
     }
   },
-  mounted() {
+  async mounted() {
-    this.setPlatformInitial()
+    try {
+      await this.setPlatformInitial()
+    } finally {
+      this.loading = false
+    }
   },
   methods: {
     async setPlatformInitial() {
@@ -56,7 +60,6 @@ export default {
 
       const constraints = this.platform['type_constraints']
       this.fieldsMeta.protocols.el.choices = constraints['protocols']
-      this.loading = false
     }
   }
 }

src/views/assets/Platform/PlatformCreateUpdate.vue

@@ -98,8 +98,7 @@ export default {
             onSettingClick: (item) => {
               this.settingItem = item
               this.showDialog = true
-            },
+            }
-            disableSetting: (item) => item.name !== 'rdp'
           },
           hidden: (formValue) => !formValue['protocols_enabled']
         },

src/views/assets/Platform/ProtocolSettingDialog.vue

@@ -7,9 +7,10 @@
     :close-on-click-modal="false"
     width="70%"
     v-bind="$attrs"
+    @open="onOpen"
     v-on="$listeners"
   >
-    <DataForm class="data-form" v-bind="config" @submit="onSubmit" />
+    <DataForm class="data-form" :form="form" v-bind="config" @submit="onSubmit" />
   </Dialog>
 </template>
 
@@ -24,28 +25,37 @@ export default {
   props: {
     item: {
       type: Object,
-      default: () => ({})
+      default: () => ({ name: '', port: 0 })
     }
   },
   data() {
     return {
+      form: this.item.setting || {},
       config: {
-        form: {
-          console: true,
-          security: 'any'
-        },
         hasSaveContinue: false,
         fields: [
+          {
+            id: 'required',
+            label: '必须配置',
+            helpText: '资产上必须开启该协议',
+            type: 'switch'
+          },
           {
             id: 'console',
             label: 'Console',
-            type: 'switch'
+            type: 'switch',
+            hidden: () => this.item.name !== 'rdp'
           },
           {
             id: 'security',
             label: 'Security',
+            hidden: () => this.item.name !== 'rdp',
             type: 'radio-group',
             options: [
+              {
+                label: 'Any',
+                value: 'any'
+              },
               {
                 label: 'RDP',
                 value: 'rdp'
@@ -57,12 +67,15 @@ export default {
               {
                 label: 'TLS',
                 value: 'tls'
-              },
-              {
-                label: 'Any',
-                value: 'any'
               }
             ]
+          },
+          {
+            id: 'sftp_home',
+            label: 'SFTP home',
+            type: 'input',
+            helpText: this.$t('assets.SFTPHelpMessage'),
+            hidden: () => this.item.name !== 'sftp'
           }
         ]
       }
@@ -72,6 +85,9 @@ export default {
     onSubmit(form) {
       this.item.setting = form
       this.$emit('update:visible', false)
+    },
+    onOpen() {
+      this.form = this.item.setting
     }
   }
 }