perf: 解决 form group 不隐藏的问题

2025-09-18 16:32:28 +00:00 · 2022-09-08 15:11:18 +08:00
parent c2d97b58ee
commit c5972f1b59
8 changed files with 113 additions and 63 deletions
--- 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
    }
  }
 }
--- 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 = []
--- 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')"
--- 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)
    }
  }
 }
--- 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: {
--- 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>

--- 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: []
--- 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"