perf: 修改 host

src/components/AutoDataForm/utils.js

@@ -1,6 +1,5 @@
 import Vue from 'vue'
 import Select2 from '@/components/FormFields/Select2'
-import NestedField from '@/components/AutoDataForm/components/NestedField'
 import Swicher from '@/components/FormFields/Swicher'
 import rules from '@/components/DataForm/rules'
 import { assignIfNot } from '@/utils/common'
@@ -34,6 +33,9 @@ export class FormFieldGenerator {
         if (fieldRemoteMeta.required) {
           field.el.clearable = false
         }
+        if (fieldRemoteMeta.child && fieldRemoteMeta.child.type === 'nested object') {
+          field.el.valueIsObj = true
+        }
         break
       case 'string':
         type = 'input'
@@ -50,12 +52,8 @@ export class FormFieldGenerator {
         field.component = Swicher
         break
       case 'nested object':
-        type = 'nestedField'
-        field.component = NestedField
-        field.label = ''
-        field.labelWidth = 0
-        field.el.fields = this.generateNestFields(field, fieldMeta, fieldRemoteMeta)
-        field.el.errors = {}
+        field.component = Select2
+        field.el.valueIsObj = true
         Vue.$log.debug('All fields in generate: ', field.el.allFields)
         break
       default:

src/components/FormFields/Select2.vue

@@ -2,8 +2,8 @@
   <el-select
     ref="select"
     v-model="iValue"
-    v-loading="!initialized"
     v-loadmore="loadMore"
+    v-loading="!initialized"
     :options="iOptions"
     :remote="remote"
     :remote-method="filterOptions"
@@ -78,7 +78,7 @@ export default {
     },
     // 初始化值，也就是选中的值
     value: {
-      type: [Array, String, Number, Boolean],
+      type: [Array, String, Number, Boolean, Object],
       default() {
         return this.multiple ? [] : ''
       }
@@ -90,6 +90,10 @@ export default {
     disabled: {
       type: Boolean,
       default: false
+    },
+    valueIsObj: {
+      type: Boolean,
+      default: false
     }
   },
   data() {
@@ -137,7 +141,16 @@ export default {
         if (noValue && !this.initialized) {
           return
         }
-        this.$emit('input', val)
+        let value = val
+        if (this.valueIsObj) {
+          if (Array.isArray(val)) {
+            value = val.map((v) => ({ pk: v }))
+          } else {
+            value = { pk: val }
+          }
+        }
+        this.$log.debug('set iValue', value)
+        this.$emit('input', value)
       },
       get() {
         return this.value
@@ -197,9 +210,6 @@ export default {
     iAjax(newValue, oldValue) {
       this.$log.debug('Select url changed: ', oldValue, ' => ', newValue)
       this.refresh()
-    },
-    value(iNew) {
-      this.iValue = iNew
     }
   },
   async mounted() {
@@ -325,7 +335,13 @@ export default {
       })
     },
     getSelectedOptions() {
-      const values = this.iValue
+      let values = this.iValue
+      if (!values) {
+        return this.multiple ? [] : ''
+      }
+      if (!this.multiple) {
+        values = [values]
+      }
       return this.iOptions.filter((v) => {
         return values.indexOf(v.value) !== -1
       })

src/views/assets/Asset/AssetCreateUpdate.vue

@@ -15,12 +15,12 @@ export default {
     return {
       initial: {},
       fields: [
-        [this.$t('common.Basic'), ['hostname', 'ip', 'platform', 'public_ip', 'domain']],
-        [this.$t('assets.Protocol'), ['protocols']],
-        [this.$t('assets.Node'), ['nodes']],
-        this.$route.params.id ? null : [this.$t('assets.Account'), ['accounts']],
-        [this.$t('assets.Label'), ['labels']],
-        [this.$t('common.Other'), ['is_active', 'comment']]
+        [this.$t('common.Basic'), ['hostname', 'ip', 'platform', 'domain']]
+        // [this.$t('assets.Protocol'), ['protocols']],
+        // [this.$t('assets.Node'), ['nodes']],
+        // this.$route.params.id ? null : [this.$t('assets.Account'), ['accounts']],
+        // [this.$t('assets.Label'), ['labels']],
+        // [this.$t('common.Other'), ['is_active', 'comment']]
       ],
       fieldsMeta: assetFieldsMeta(),
       url: '/api/v1/assets/assets/',

src/views/assets/Host/HostCreateUpdate.vue

@@ -4,7 +4,7 @@
 
 <script>
 import GenericCreateUpdatePage from '@/layout/components/GenericCreateUpdatePage'
-import { assetFieldsMeta } from '@/views/assets/const'
+import { assetFieldsMeta } from '../const'
 
 export default {
   name: 'HostCreateUpdate',
@@ -15,17 +15,16 @@ export default {
     return {
       loading: true,
       platform: {},
-      initial: {
-      },
+      initial: {},
       fields: [
-        [this.$t('common.Basic'), ['hostname', 'ip', 'platform', 'public_ip', 'domain']],
+        [this.$t('common.Basic'), ['hostname', 'ip', 'platform', 'domain']],
         [this.$t('assets.Protocols'), ['protocols']],
-        [this.$t('assets.Auth'), ['admin_user']],
         [this.$t('assets.Node'), ['nodes']],
+        this.$route.params.id ? null : [this.$t('assets.Account'), ['accounts']],
         [this.$t('assets.Label'), ['labels']],
         [this.$t('common.Other'), ['is_active', 'comment']]
       ],
-      fieldsMeta: assetFieldsMeta(),
+      fieldsMeta: assetFieldsMeta(this),
       url: '/api/v1/assets/assets/',
       createSuccessNextRoute: { name: 'AssetDetail' },
       hasDetailInMsg: false
@@ -52,6 +51,7 @@ export default {
         admin_user: this.platform['admin_user_default']
       }
       const limits = this.platform['type_limits']
+      console.log('Fields meta: ', this.fieldsMeta)
       this.fieldsMeta.protocols.el.choices = limits['protocols_limit']
       this.initial = initial
       this.loading = false

src/views/assets/const.js

@@ -1,45 +1,25 @@
 import i18n from '@/i18n/i18n'
-import { groupedDropdownToCascader } from '@/utils/common'
 import ProtocolSelector from '@/components/FormFields/ProtocolSelector'
+import AssetAccounts from '@/components/FormFields/AssetAccounts'
 import rules from '@/components/DataForm/rules'
 
-export const AssetProtocols = [
-  {
-    title: 'SSH',
-    name: 'SSH',
-    type: 'primary',
-    group: i18n.t('assets.HostProtocol'),
-    has: true
-  },
-  {
-    title: 'RDP',
-    name: 'RDP',
-    type: 'primary',
-    has: true
-  },
-  {
-    title: 'VNC',
-    name: 'VNC',
-    type: 'primary',
-    has: true
-  },
-  {
-    title: 'Telnet',
-    name: 'Telnet',
-    type: 'primary',
-    has: true
-  }
-]
-
-export const AssetCascader = groupedDropdownToCascader(AssetProtocols)
-
-export const assetFieldsMeta = () => {
+export const assetFieldsMeta = (vm) => {
   return {
+    ip: {
+      label: i18n.t('assets.ipDomain')
+    },
     protocols: {
       component: ProtocolSelector,
-      el: {
-        choices: []
-      }
+      on: {
+        input: ([value], updateForm) => {
+          console.log('protocls: ', value)
+          console.log('this is: ', this)
+          vm.fieldsMeta.accounts.el.protocols = value.map(item => {
+            return item.split('/')[0]
+          })
+        }
+      },
+      el: {}
     },
     platform: {
       el: {
@@ -63,16 +43,12 @@ export const assetFieldsMeta = () => {
         }
       }
     },
-    admin_user: {
+    accounts: {
+      component: AssetAccounts,
+      label: '',
       el: {
-        multiple: false,
-        ajax: {
-          url: '/api/v1/assets/system-users/?type=admin',
-          transformOption: (item) => {
-            const username = item.username || '*'
-            return { label: item.name + '(' + username + ')', value: item.id }
-          }
-        }
+        protocols: [],
+        default: []
       }
     },
     nodes: {