From c97b3ffbdf94e082d9c3db9926a8d0de7be48d01 Mon Sep 17 00:00:00 2001
From: ibuler <ibuler@qq.com>
Date: Wed, 7 Sep 2022 17:12:25 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E4=BF=AE=E6=94=B9=20protocol=20selecto?=
 =?UTF-8?q?r?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ProtocolSettingDialog.vue                 | 118 ++++++++++++++++++
 .../index.vue}                                |  30 ++---
 src/components/FormFields/index.js            |   2 +-
 .../DatabaseCreateUpdate.vue                  |   1 -
 .../AssetCreateUpdate/HostCreateUpdate.vue    |   9 +-
 .../assets/Platform/PlatformCreateUpdate.vue  |   3 +-
 .../assets/Platform/ProtocolSettingDialog.vue |  38 ++++--
 7 files changed, 168 insertions(+), 33 deletions(-)
 create mode 100644 src/components/FormFields/ProtocolSelector/ProtocolSettingDialog.vue
 rename src/components/FormFields/{ProtocolSelector.vue => ProtocolSelector/index.vue} (90%)

diff --git a/src/components/FormFields/ProtocolSelector/ProtocolSettingDialog.vue b/src/components/FormFields/ProtocolSelector/ProtocolSettingDialog.vue
new file mode 100644
index 000000000..5c99668df
--- /dev/null
+++ b/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>
diff --git a/src/components/FormFields/ProtocolSelector.vue b/src/components/FormFields/ProtocolSelector/index.vue
similarity index 90%
rename from src/components/FormFields/ProtocolSelector.vue
rename to src/components/FormFields/ProtocolSelector/index.vue
index 9565ae56b..db4e45b02 100644
--- a/src/components/FormFields/ProtocolSelector.vue
+++ b/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
-      }
-    },
-    disableSetting: {
-      type: Function,
-      default: (item) => {
-        return false
-      }
-    },
-    onSettingClick: {
-      type: Function,
-      default: (item) => {
-        alert('Click setting: ' + item.name + ', port: ' + item.port)
+        return true
       }
     }
   },
@@ -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
     }
   }
 }
diff --git a/src/components/FormFields/index.js b/src/components/FormFields/index.js
index e3647c98d..4439d4d5c 100644
--- a/src/components/FormFields/index.js
+++ b/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,
diff --git a/src/views/assets/Asset/AssetCreateUpdate/DatabaseCreateUpdate.vue b/src/views/assets/Asset/AssetCreateUpdate/DatabaseCreateUpdate.vue
index f9965911c..a9a218cc6 100644
--- a/src/views/assets/Asset/AssetCreateUpdate/DatabaseCreateUpdate.vue
+++ b/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/',
diff --git a/src/views/assets/Asset/AssetCreateUpdate/HostCreateUpdate.vue b/src/views/assets/Asset/AssetCreateUpdate/HostCreateUpdate.vue
index 8c84d118b..5a32dc8f5 100644
--- a/src/views/assets/Asset/AssetCreateUpdate/HostCreateUpdate.vue
+++ b/src/views/assets/Asset/AssetCreateUpdate/HostCreateUpdate.vue
@@ -34,8 +34,12 @@ export default {
       hasDetailInMsg: false
     }
   },
-  mounted() {
-    this.setPlatformInitial()
+  async mounted() {
+    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
     }
   }
 }
diff --git a/src/views/assets/Platform/PlatformCreateUpdate.vue b/src/views/assets/Platform/PlatformCreateUpdate.vue
index 7db09d90c..662dd93d6 100644
--- a/src/views/assets/Platform/PlatformCreateUpdate.vue
+++ b/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']
         },
diff --git a/src/views/assets/Platform/ProtocolSettingDialog.vue b/src/views/assets/Platform/ProtocolSettingDialog.vue
index 9a1532501..2b69d6e34 100644
--- a/src/views/assets/Platform/ProtocolSettingDialog.vue
+++ b/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
     }
   }
 }