From c5972f1b591fc612d1397c5003bbab978518ec1b Mon Sep 17 00:00:00 2001
From: ibuler <ibuler@qq.com>
Date: Thu, 8 Sep 2022 15:11:18 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E8=A7=A3=E5=86=B3=20form=20group=20?=
 =?UTF-8?q?=E4=B8=8D=E9=9A=90=E8=97=8F=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/AutoDataForm/index.vue         | 48 ++++++----
 src/components/AutoDataForm/utils.js          | 12 ++-
 src/components/FormFields/AssetAccounts.vue   | 10 +-
 .../ProtocolSettingDialog.vue                 | 92 ++++++++++++-------
 .../FormFields/ProtocolSelector/index.vue     |  9 +-
 src/components/FormGroupHeader/index.vue      |  2 +-
 .../assets/Platform/PlatformCreateUpdate.vue  |  1 +
 src/views/tickets/index.vue                   |  2 +-
 8 files changed, 113 insertions(+), 63 deletions(-)

diff --git a/src/components/AutoDataForm/index.vue b/src/components/AutoDataForm/index.vue
index 7c47630ca..7222d0d6c 100644
--- a/src/components/AutoDataForm/index.vue
+++ b/src/components/AutoDataForm/index.vue
@@ -1,20 +1,24 @@
 <template>
   <DataForm
+    v-if="!loading"
     ref="dataForm"
-    v-loading="loading"
     :fields="totalFields"
     :form="iForm"
     v-bind="$attrs"
     v-on="$listeners"
   >
-    <FormGroupHeader
+    <span
       v-for="(group, i) in groups"
       :slot="'id:'+group.name"
       :key="'group-'+group.name"
-      :group="group"
-      :index="i"
-      :line="i !== 0"
-    />
+    >
+      <FormGroupHeader
+        v-if="!groupHidden(group, i)"
+        :group="group"
+        :index="i"
+        :line="i !== 0"
+      />
+    </span>
   </DataForm>
 </template>
 
@@ -66,16 +70,16 @@ export default {
     this.optionUrlMetaAndGenerateColumns()
   },
   methods: {
-    optionUrlMetaAndGenerateColumns() {
-      this.$store.dispatch('common/getUrlMeta', { url: this.url }).then(data => {
-        this.remoteMeta = data.actions[this.method.toUpperCase()] || {}
-        this.generateColumns()
-        this.cleanFormValue()
-      }).catch(err => {
-        this.$log.error(err)
-      }).finally(() => {
-        this.loading = false
-      })
+    async optionUrlMetaAndGenerateColumns() {
+      let data = { actions: {}}
+      if (this.url) {
+        data = await this.$store.dispatch('common/getUrlMeta', { url: this.url })
+      }
+      this.remoteMeta = data.actions[this.method.toUpperCase()] || {}
+      this.generateColumns()
+      this.cleanFormValue()
+      this.loading = false
+      console.log('Loading: ', this.groups)
     },
     generateColumns() {
       const generator = new FormFieldGenerator()
@@ -114,6 +118,18 @@ export default {
       } else {
         field.attrs.error = error
       }
+    },
+    groupHidden(group, i) {
+      for (const field of group.fields) {
+        let hidden = field.hidden
+        if (typeof hidden === 'function') {
+          hidden = hidden(this.iForm)
+        }
+        if (!hidden) {
+          return false
+        }
+      }
+      return true
     }
   }
 }
diff --git a/src/components/AutoDataForm/utils.js b/src/components/AutoDataForm/utils.js
index e77c07c21..eda6b93bb 100644
--- a/src/components/AutoDataForm/utils.js
+++ b/src/components/AutoDataForm/utils.js
@@ -148,13 +148,15 @@ export class FormFieldGenerator {
   }
   generateFieldGroup(field, fieldsMeta, remoteFieldsMeta) {
     const [groupTitle, fields] = field
-    this.groups.push({
+    const _fields = this.generateFields(fields, fieldsMeta, remoteFieldsMeta)
+    const group = {
       id: groupTitle,
       title: groupTitle,
-      name: fields[0],
-      fields: fields
-    })
-    return this.generateFields(fields, fieldsMeta, remoteFieldsMeta)
+      fields: _fields,
+      name: _fields[0].id
+    }
+    this.groups.push(group)
+    return _fields
   }
   generateFields(_fields, fieldsMeta, remoteFieldsMeta) {
     let fields = []
diff --git a/src/components/FormFields/AssetAccounts.vue b/src/components/FormFields/AssetAccounts.vue
index f1c0fc6dc..d9e93872f 100644
--- a/src/components/FormFields/AssetAccounts.vue
+++ b/src/components/FormFields/AssetAccounts.vue
@@ -3,19 +3,21 @@
     <el-table :data="accounts" style="width: 100%">
       <el-table-column prop="username" label="用户名" width="180" />
       <el-table-column prop="privileged" label="特权账号">
-        <template slot-scope="scope">
+        <template v-slot="scope">
           <i class="fa text-primary" :class="scope.row['privileged'] ? 'fa-check' : ''" />
         </template>
       </el-table-column>
       <el-table-column fixed="right" align="right" label="操作" width="135" class-name="buttons">
-        <template slot-scope="scope">
+        <template v-slot="scope">
           <el-button type="danger" icon="el-icon-minus" size="mini" @click="removeAccount(scope.row)" />
           <el-button type="primary" icon="el-icon-edit" size="mini" @click="onEditClick(scope.row)" />
         </template>
       </el-table-column>
     </el-table>
-    <el-button size="mini" type="primary" @click="onAddClick">添加</el-button>
-    <el-button size="mini" type="success" @click="onAddClick">模版添加</el-button>
+    <div class="actions">
+      <el-button size="mini" type="primary" @click="onAddClick">添加</el-button>
+      <el-button size="mini" type="success" @click="onAddClick">模版添加</el-button>
+    </div>
     <Dialog
       v-if="visible"
       :title="this.$tc('assets.AddAccount')"
diff --git a/src/components/FormFields/ProtocolSelector/ProtocolSettingDialog.vue b/src/components/FormFields/ProtocolSelector/ProtocolSettingDialog.vue
index 5c99668df..a8af9a8d1 100644
--- a/src/components/FormFields/ProtocolSelector/ProtocolSettingDialog.vue
+++ b/src/components/FormFields/ProtocolSelector/ProtocolSettingDialog.vue
@@ -16,7 +16,7 @@
       <el-link :href="platformDetail" class="link-more" target="_blank">查看</el-link>
       <i class="fa fa-external-link" />
     </el-alert>
-    <DataForm
+    <AutoDataForm
       class="data-form"
       :form="form"
       :disabled="iDisabled"
@@ -27,12 +27,12 @@
 </template>
 
 <script>
-import { Dialog, DataForm } from '@/components'
+import { Dialog, AutoDataForm } from '@/components'
 export default {
   name: 'ProtocolSetting',
   components: {
     Dialog,
-    DataForm
+    AutoDataForm
   },
   props: {
     item: {
@@ -46,44 +46,65 @@ export default {
   },
   data() {
     return {
-      form: this.item.setting || {},
+      defaultSetting: {
+        required: false,
+        default: true,
+        is_active: true
+      },
+      loading: true,
+      form: {},
       iDisabled: this.disabled,
       platformDetail: '#/console/assets/platforms/' + this.$route.query['platform'],
       config: {
         hasSaveContinue: false,
         hasButtons: !this.disabled,
+        url: '',
         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' }
+          [
+            'Hello', [
+              {
+                id: 'required',
+                label: '必须配置',
+                helpText: '新建资产时，必须开启该协议',
+                type: 'switch'
+              },
+              {
+                id: 'as_default',
+                label: '默认配置',
+                helpText: '新建资产时，默认配置',
+                type: 'switch'
+              }
             ]
-          },
-          {
-            id: 'sftp_home',
-            label: 'SFTP home',
-            type: 'input',
-            helpText: this.$t('assets.SFTPHelpMessage'),
-            hidden: () => this.item.name !== 'sftp'
-          }
+          ],
+          [
+            'Protocol', [
+              {
+                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'
+              }
+            ]
+          ]
         ]
       }
     }
@@ -94,7 +115,8 @@ export default {
       this.$emit('update:visible', false)
     },
     onOpen() {
-      this.form = this.item.setting
+      this.form = this.item.setting || this.defaultSetting
+      console.log('Item: ', this.item, this.form)
     }
   }
 }
diff --git a/src/components/FormFields/ProtocolSelector/index.vue b/src/components/FormFields/ProtocolSelector/index.vue
index 18a86f3fe..c85f9e505 100644
--- a/src/components/FormFields/ProtocolSelector/index.vue
+++ b/src/components/FormFields/ProtocolSelector/index.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <div v-for="(item, index) in items" :key="item.name" style="display: flex;margin-top: 8px;">
-      <el-input v-model="item.port" class="input-with-select" v-bind="$attrs">
+      <el-input v-model="item.port" :placeholder="portPlaceholder" class="input-with-select" v-bind="$attrs">
         <el-select
           slot="prepend"
           v-model="item.name"
@@ -89,6 +89,13 @@ export default {
       return this.choices.filter(proto => {
         return this.selectedProtocolNames.indexOf(proto.name) === -1
       })
+    },
+    portPlaceholder() {
+      if (this.settingReadonly) {
+        return '端口'
+      } else {
+        return '默认端口'
+      }
     }
   },
   watch: {
diff --git a/src/components/FormGroupHeader/index.vue b/src/components/FormGroupHeader/index.vue
index 07ac38aa8..82821ec22 100644
--- a/src/components/FormGroupHeader/index.vue
+++ b/src/components/FormGroupHeader/index.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="form-group-header">
     <div v-if="line" class="hr-line-dashed" />
-    <h3>{{ group.title }}</h3>
+    <h3>{{ group['title'] }} </h3>
   </div>
 </template>
 
diff --git a/src/views/assets/Platform/PlatformCreateUpdate.vue b/src/views/assets/Platform/PlatformCreateUpdate.vue
index 256137e63..b6e2d70a2 100644
--- a/src/views/assets/Platform/PlatformCreateUpdate.vue
+++ b/src/views/assets/Platform/PlatformCreateUpdate.vue
@@ -85,6 +85,7 @@ export default {
           }
         },
         protocols: {
+          label: '支持的协议',
           ...assetMeta.protocols,
           el: {
             choices: []
diff --git a/src/views/tickets/index.vue b/src/views/tickets/index.vue
index 7d5ea090b..a7a9f256a 100644
--- a/src/views/tickets/index.vue
+++ b/src/views/tickets/index.vue
@@ -3,7 +3,7 @@
     <el-badge
       v-if="props.tab === 'AssignedTicketList'"
       slot="badge"
-      slot-scope="props"
+      v-slot="props"
       :value="getBadgeValue(props)"
       size="mini"
       type="primary"