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

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"
+    >
+      <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() {
+    async optionUrlMetaAndGenerateColumns() {
-      this.$store.dispatch('common/getUrlMeta', { url: this.url }).then(data => {
+      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()
-      }).catch(err => {
-        this.$log.error(err)
-      }).finally(() => {
       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
     }
   }
 }

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,
-      fields: fields
+      name: _fields[0].id
-    })
+    }
-    return this.generateFields(fields, fieldsMeta, remoteFieldsMeta)
+    this.groups.push(group)
+    return _fields
   }
   generateFields(_fields, fieldsMeta, remoteFieldsMeta) {
     let fields = []

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>
+    <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')"

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,19 +46,38 @@ 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: [
+          [
+            'Hello', [
               {
                 id: 'required',
                 label: '必须配置',
-            helpText: '资产上必须开启该协议',
+                helpText: '新建资产时，必须开启该协议',
                 type: 'switch'
               },
+              {
+                id: 'as_default',
+                label: '默认配置',
+                helpText: '新建资产时，默认配置',
+                type: 'switch'
+              }
+            ]
+          ],
+          [
+            'Protocol', [
               {
                 id: 'console',
                 label: 'Console',
@@ -85,6 +104,8 @@ export default {
                 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)
     }
   }
 }

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: {

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>
 

src/views/assets/Platform/PlatformCreateUpdate.vue

@@ -85,6 +85,7 @@ export default {
           }
         },
         protocols: {
+          label: '支持的协议',
           ...assetMeta.protocols,
           el: {
             choices: []

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"