fix: 修复不能禁用的问题 (#751)

perf: 优化系统用户创建

Co-authored-by: ibuler <ibuler@qq.com>

src/components/AutoDataForm/utils.js

@@ -2,6 +2,7 @@ import Vue from 'vue'
 import Select2 from '@/components/Select2'
 import NestedField from '@/components/AutoDataForm/components/NestedField'
 import rules from '@/components/DataForm/rules'
+import { assignIfNot } from '@/utils/common'
 
 export class FormFieldGenerator {
   constructor() {
@@ -109,19 +110,21 @@ export class FormFieldGenerator {
     return field
   }
   generateField(name, fieldsMeta, remoteFieldsMeta) {
-    let field = { id: name, prop: name, el: {}, attrs: {}}
+    let field = { id: name, prop: name, el: {}, attrs: {}, rules: [] }
     const remoteFieldMeta = remoteFieldsMeta[name] || {}
-    Vue.$log.debug('FieldsMeta: ', fieldsMeta, name)
     const fieldMeta = fieldsMeta[name] || {}
-    Vue.$log.debug('FieldMeta is: ', fieldMeta)
     field.label = remoteFieldMeta.label
     field.helpText = remoteFieldMeta.help_text
     field = this.generateFieldByType(remoteFieldMeta.type, field, fieldMeta, remoteFieldMeta)
     field = this.generateFieldByName(name, field)
     field = this.generateFieldByOther(field, fieldMeta, remoteFieldMeta)
-    const el = Object.assign(field.el || {}, fieldMeta.el || {})
-    field = Object.assign(field, fieldMeta || {}, { el: el })
+    const el = assignIfNot(fieldMeta.el || {}, field.el)
+    const rules = fieldMeta.rules || field.rules
+    field = Object.assign(field, fieldMeta)
+    field.el = el
+    field.rules = rules
     _.set(field, 'attrs.error', '')
+    Vue.$log.debug('Generate field: ', name, field)
     return field
   }
   generateFieldGroup(field, fieldsMeta, remoteFieldsMeta) {

src/utils/common.js

@@ -1,3 +1,5 @@
+const _ = require('lodash')
+
 function getTimeUnits(u) {
   const units = {
     'd': '天',
@@ -200,6 +202,12 @@ export function sleep(time) {
   return new Promise((resolve) => setTimeout(resolve, time))
 }
 
+function customizer(objValue, srcValue) {
+  return _.isUndefined(objValue) ? srcValue : objValue
+}
+
+export const assignIfNot = _.partialRight(_.assignInWith, customizer)
+
 const scheme = document.location.protocol
 const port = document.location.port ? ':' + document.location.port : ''
 const BASE_URL = scheme + '//' + document.location.hostname + port

src/views/assets/SystemUser/SystemUserCreate/database.vue

@@ -4,13 +4,13 @@
 
 <script>
 import GenericCreateUpdatePage from '@/layout/components/GenericCreateUpdatePage'
-import UploadKey from '@/components/UploadKey'
-import { Required } from '@/components/DataForm/rules'
+import getFields from './fields'
 
 export default {
   name: 'SystemUserCreateUpdate',
   components: { GenericCreateUpdatePage },
   data() {
+    const fields = getFields.bind(this)()
     return {
       initial: {
         login_mode: 'auto',
@@ -25,120 +25,15 @@ export default {
         [this.$t('common.Other'), ['comment']]
       ],
       fieldsMeta: {
-        login_mode: {
-          helpText: this.$t('assets.LoginModeHelpMessage'),
-          hidden: (form) => {
-            if (form.protocol === 'k8s') {
-              return true
-            }
-          },
-          on: {
-            input: ([value], updateForm) => {
-              if (value === 'manual') {
-                updateForm({ auto_push: false })
-                updateForm({ auto_generate_key: false })
-              }
-            }
-          }
-        },
-        username: {
-          el: {
-            disabled: false
-          },
-          rules: [Required],
-          hidden: (form) => {
-            if (form.login_mode === 'auto') {
-              this.fieldsMeta.username.rules = [Required]
-            } else {
-              this.fieldsMeta.username.rules[0].required = false
-            }
-            if (!form.username_same_with_user) {
-              this.fieldsMeta.username.rules = [Required]
-            } else {
-              this.fieldsMeta.username.rules[0].required = false
-            }
-            if (['mysql', 'postgresql', 'mariadb', 'oracle'].indexOf(form.protocol) !== -1) {
-              this.fieldsMeta.username.rules = [Required]
-              this.fieldsMeta.username.rules[0].required = true
-            }
-          }
-        },
-        private_key: {
-          component: UploadKey,
-          hidden: (form) => {
-            if (form.login_mode !== 'auto') {
-              return true
-            }
-            if (form.protocol === 'k8s') {
-              return true
-            }
-            return form.auto_generate_key === true
-          }
-        },
-        username_same_with_user: {
-          type: 'switch',
-          helpText: this.$t('assets.UsernameHelpMessage'),
-          hidden: (form) => {
-            this.fieldsMeta.username.el.disabled = form.username_same_with_user
-            return form.protocol === 'k8s'
-          },
-          el: {
-            disabled: false
-          }
-        },
-        protocol: {
-          rules: [Required],
-          el: {
-            disabled: true,
-            style: 'width:100%'
-          },
-          on: {
-            input: ([value], updateForm) => {
-              if (['ssh', 'rdp'].indexOf(value) === -1) {
-                updateForm({ auto_push: false })
-                updateForm({ auto_generate_key: false })
-              }
-            }
-          }
-        },
-        update_password: {
-          label: this.$t('users.UpdatePassword'),
-          type: 'checkbox',
-          hidden: (formValue) => {
-            if (formValue.update_password || formValue.protocol === 'k8s') {
-              return true
-            }
-            if (formValue.login_mode === 'manual') {
-              return true
-            }
-            return !this.$route.params.id
-          }
-        },
-        password: {
-          helpText: this.$t('assets.PasswordHelpMessage'),
-          hidden: form => {
-            if (form.login_mode !== 'auto' || form.protocol === 'k8s' || form.auto_generate_key) {
-              return true
-            }
-            if (!this.$route.params.id) {
-              return false
-            }
-            return !form.update_password
-          }
-        }
+        login_mode: fields.login_mode,
+        username: fields.username,
+        private_key: fields.private_key,
+        username_same_with_user: fields.username_same_with_user,
+        protocol: fields.protocol,
+        update_password: fields.update_password,
+        password: fields.password
       },
-      url: '/api/v1/assets/system-users/',
-      authHiden: false
-    }
-  },
-  method: {
-
-  },
-  mounted() {
-    const params = this.$route.params
-    const method = params.id ? 'update' : 'create'
-    if (method === 'update') {
-      this.fieldsMeta.username_same_with_user.el.disabled = true
+      url: '/api/v1/assets/system-users/'
     }
   }
 }

src/views/assets/SystemUser/SystemUserCreate/fields.js

@@ -0,0 +1,179 @@
+import { Required } from '@/components/DataForm/rules'
+import UploadKey from '@/components/UploadKey'
+import i18n from '@/i18n/i18n'
+import { Select2 } from '@/components'
+
+function getFields() {
+  const login_mode = {
+    helpText: i18n.t('assets.LoginModeHelpMessage'),
+    on: {
+      input: ([value], updateForm) => {
+        if (value === 'manual') {
+          updateForm({ auto_push: false })
+          updateForm({ auto_generate_key: false })
+        }
+      }
+    }
+  }
+
+  const username = {
+    el: {
+      disabled: false
+    },
+    on: {
+      input: ([value], updateForm) => {
+        updateForm({ home: `/home/${value}` })
+      }
+    },
+    rules: [Object.assign({}, Required)],
+    hidden: (form) => {
+      if (form.login_mode === 'manual' || form.username_same_with_user) {
+        this.fieldsMeta.username.rules[0].required = false
+      } else {
+        this.fieldsMeta.username.rules[0].required = true
+      }
+
+      if (form.username_same_with_user) {
+        this.fieldsMeta.username.el.disabled = true
+      } else {
+        this.fieldsMeta.username.el.disabled = false
+      }
+    }
+  }
+
+  const private_key = {
+    component: UploadKey,
+    hidden: (form) => {
+      if (form.login_mode !== 'auto') {
+        return true
+      }
+      return form.auto_generate_key === true
+    }
+  }
+
+  const username_same_with_user = {
+    type: 'switch',
+    helpText: this.$t('assets.UsernameHelpMessage'),
+    el: {
+      disabled: false
+    },
+    hidden: form => {
+      const params = this.$route.params
+      const method = params.id ? 'update' : 'create'
+      if (method === 'update') {
+        this.fieldsMeta.username_same_with_user.el.disabled = true
+      }
+    }
+  }
+
+  const auto_generate_key = {
+    type: 'switch',
+    label: this.$t('assets.AutoGenerateKey'),
+    hidden: form => {
+      if (JSON.stringify(this.$route.params) !== '{}') {
+        return true
+      }
+      if (form.protocol === 'k8s') {
+        return true
+      }
+
+      if (form.login_mode === 'manual') {
+        this.fieldsMeta.auto_generate_key.el.disabled = true
+      } else {
+        this.fieldsMeta.auto_generate_key.el.disabled = false
+      }
+    },
+    el: {
+      disabled: false
+    }
+  }
+
+  const protocol = {
+    rules: [Required],
+    el: {
+      style: 'width:100%',
+      disabled: true
+    }
+  }
+
+  const cmd_filters = {
+    component: Select2,
+    el: {
+      multiple: true,
+      value: [],
+      ajax: {
+        url: '/api/v1/assets/cmd-filters/'
+      }
+    }
+  }
+
+  const auto_push = {
+    type: 'switch',
+    el: {
+      disabled: false
+    },
+    hidden: form => {
+      if (form.login_mode === 'manual') {
+        this.fieldsMeta.auto_push.el.disabled = true
+      } else {
+        this.fieldsMeta.auto_push.el.disabled = false
+      }
+    },
+    on: {
+      input: ([value], updateForm) => {
+        if (!value) {
+          updateForm({ auto_generate_key: value })
+        }
+      }
+    }
+  }
+
+  const update_password = {
+    label: this.$t('users.UpdatePassword'),
+    type: 'checkbox',
+    hidden: (formValue) => {
+      if (formValue.update_password) {
+        return true
+      }
+      if (formValue.login_mode === 'manual') {
+        return true
+      }
+      return !this.$route.params.id
+    }
+  }
+
+  const password = {
+    helpText: this.$t('assets.PasswordHelpMessage'),
+    hidden: form => {
+      if (form.login_mode !== 'auto' || form.auto_generate_key) {
+        return true
+      }
+      if (!this.$route.params.id) {
+        return false
+      }
+      return !form.update_password
+    }
+  }
+
+  const system_groups = {
+    label: this.$t('assets.LinuxUserAffiliateGroup'),
+    hidden: (item) => !item.auto_push || item.username_same_with_user,
+    helpText: this.$t('assets.GroupsHelpMessage')
+  }
+
+  return {
+    login_mode: login_mode,
+    username: username,
+    private_key: private_key,
+    username_same_with_user: username_same_with_user,
+    auto_generate_key: auto_generate_key,
+    protocol: protocol,
+    cmd_filters: cmd_filters,
+    auto_push: auto_push,
+    update_password: update_password,
+    password: password,
+    system_groups: system_groups
+  }
+}
+
+export default getFields

src/views/assets/SystemUser/SystemUserCreate/k8s.vue

@@ -26,10 +26,17 @@ export default {
       ],
       fieldsMeta: {
         token: {
-          rules: [Required],
+          rules: [Object.assign({}, Required)],
           el: {
             type: 'textarea',
             autosize: { minRows: 3 }
+          },
+          hidden: form => {
+            const params = this.$route.params
+            const method = params.id ? 'update' : 'create'
+            if (method === 'update') {
+              this.fieldsMeta.token.rules[0].required = false
+            }
           }
         },
         protocol: {
@@ -40,18 +47,7 @@ export default {
           }
         }
       },
-      url: '/api/v1/assets/system-users/',
-      authHiden: false
-    }
-  },
-  method: {
-
-  },
-  mounted() {
-    const params = this.$route.params
-    const method = params.id ? 'update' : 'create'
-    if (method === 'update') {
-      this.fieldsMeta.token.rules[0].required = false
+      url: '/api/v1/assets/system-users/'
     }
   }
 }

src/views/assets/SystemUser/SystemUserCreate/rdp.vue

@@ -4,12 +4,13 @@
 
 <script>
 import GenericCreateUpdatePage from '@/layout/components/GenericCreateUpdatePage'
-import { Required } from '@/components/DataForm/rules'
+import getFields from './fields'
 
 export default {
   name: 'SystemUserCreateUpdate',
   components: { GenericCreateUpdatePage },
   data() {
+    const fields = getFields.bind(this)()
     return {
       initial: {
         login_mode: 'auto',
@@ -28,131 +29,23 @@ export default {
         [this.$t('common.Other'), ['comment']]
       ],
       fieldsMeta: {
-        login_mode: {
-          helpText: this.$t('assets.LoginModeHelpMessage'),
-          hidden: (form) => {
-            if (form.protocol === 'k8s') {
-              return true
-            }
-          },
-          on: {
-            input: ([value], updateForm) => {
-              if (value === 'manual') {
-                updateForm({ auto_push: false })
-                updateForm({ auto_generate_key: false })
-              }
-            }
-          }
-        },
-        username: {
-          el: {
-            disabled: false
-          },
-          rules: [Required],
-          hidden: (form) => {
-            if (form.login_mode === 'auto') {
-              this.fieldsMeta.username.rules = [Required]
-            } else {
-              this.fieldsMeta.username.rules[0].required = false
-            }
-            if (!form.username_same_with_user) {
-              this.fieldsMeta.username.rules = [Required]
-            } else {
-              this.fieldsMeta.username.rules[0].required = false
-            }
-          }
-        },
-        username_same_with_user: {
-          type: 'switch',
-          helpText: this.$t('assets.UsernameHelpMessage'),
-          hidden: (form) => {
-            this.fieldsMeta.username.el.disabled = form.username_same_with_user
-            return form.protocol === 'k8s'
-          },
-          el: {
-            disabled: false
-          }
-        },
-        auto_push: {
-          type: 'switch',
-          el: {
-            disabled: false
-          },
-          hidden: form => {
-            if (form.login_mode === 'manual') { this.fieldsMeta.auto_push.el.disabled = true }
-          },
-          on: {
-            input: ([value], updateForm) => {
-              if (!value) {
-                updateForm({ auto_generate_key: value })
-              }
-            }
-          }
-        },
-        protocol: {
-          rules: [Required],
-          el: {
-            style: 'width:100%',
-            disabled: true
-          },
-          on: {
-            input: ([value], updateForm) => {
-              if (['ssh', 'rdp'].indexOf(value) === -1) {
-                updateForm({ auto_push: false })
-                updateForm({ auto_generate_key: false })
-              }
-            }
-          }
-        },
+        login_mode: fields.login_mode,
+        username: fields.username,
+        username_same_with_user: fields.username_same_with_user,
+        auto_push: fields.auto_push,
+        protocol: fields.protocol,
         ad_domain: {
           label: this.$t('assets.AdDomain'),
-          hidden: (form) => ['rdp'].indexOf(form.protocol) === -1,
           helpText: this.$t('assets.AdDomainHelpText')
         },
-        update_password: {
-          label: this.$t('users.UpdatePassword'),
-          type: 'checkbox',
-          hidden: (formValue) => {
-            if (formValue.update_password || formValue.protocol === 'k8s') {
-              return true
-            }
-            if (formValue.login_mode === 'manual') {
-              return true
-            }
-            return !this.$route.params.id
-          }
-        },
-        password: {
-          helpText: this.$t('assets.PasswordHelpMessage'),
-          hidden: form => {
-            if (form.login_mode !== 'auto' || form.protocol === 'k8s' || form.auto_generate_key) {
-              return true
-            }
-            if (!this.$route.params.id) {
-              return false
-            }
-            return !form.update_password
-          }
-        },
-        system_groups: {
-          label: this.$t('assets.LinuxUserAffiliateGroup'),
-          hidden: (item) => ['ssh', 'rdp'].indexOf(item.protocol) === -1 || !item.auto_push || item.username_same_with_user,
-          helpText: this.$t('assets.GroupsHelpMessage')
-        }
+        update_password: fields.update_password,
+        password: fields.password,
+        system_groups: fields.system_groups
       },
-      url: '/api/v1/assets/system-users/',
-      authHiden: false
+      url: '/api/v1/assets/system-users/'
     }
   },
   method: {
-
-  },
-  mounted() {
-    const params = this.$route.params
-    const method = params.id ? 'update' : 'create'
-    if (method === 'update') {
-      this.fieldsMeta.username_same_with_user.el.disabled = true
-    }
   }
 }
 </script>

src/views/assets/SystemUser/SystemUserCreate/ssh.vue

@@ -4,17 +4,14 @@
 
 <script>
 import GenericCreateUpdatePage from '@/layout/components/GenericCreateUpdatePage'
-import UploadKey from '@/components/UploadKey'
-import { Select2 } from '@/components'
 import { Required } from '@/components/DataForm/rules'
-
-// const asciiProtocols = ['ssh', 'telnet', 'mysql']
-const graphProtocols = ['vnc', 'rdp', 'k8s']
+import getFields from './fields'
 
 export default {
   name: 'SystemUserCreateUpdate',
   components: { GenericCreateUpdatePage },
   data() {
+    const fields = getFields.bind(this)()
     return {
       initial: {
         login_mode: 'auto',
@@ -29,185 +26,30 @@ export default {
       fields: [
         [this.$t('common.Basic'), ['name', 'login_mode', 'username', 'username_same_with_user', 'priority', 'protocol']],
         [this.$t('assets.AutoPush'), ['auto_push', 'sudo', 'shell', 'home', 'system_groups']],
-        [this.$t('common.Auth'), ['auto_generate_key', 'update_password', 'password', 'private_key', 'token', 'ad_domain']],
+        [this.$t('common.Auth'), ['auto_generate_key', 'update_password', 'password', 'private_key']],
         [this.$t('common.Command filter'), ['cmd_filters']],
         [this.$t('common.Other'), ['sftp_root', 'comment']]
       ],
       fieldsMeta: {
-        login_mode: {
-          helpText: this.$t('assets.LoginModeHelpMessage'),
-          hidden: (form) => {
-            if (form.protocol === 'k8s') {
-              return true
-            }
-          },
-          on: {
-            input: ([value], updateForm) => {
-              if (value === 'manual') {
-                updateForm({ auto_push: false })
-                updateForm({ auto_generate_key: false })
-              }
-            }
-          }
-        },
-        username: {
-          el: {
-            disabled: false
-          },
-          on: {
-            input: ([value], updateForm) => {
-              updateForm({ home: `/home/${value}` })
-            }
-          },
-          rules: [Required],
-          hidden: (form) => {
-            if (form.login_mode === 'auto') {
-              this.fieldsMeta.username.rules = [Required]
-            } else {
-              this.fieldsMeta.username.rules[0].required = false
-            }
-            if (!form.username_same_with_user) {
-              this.fieldsMeta.username.rules = [Required]
-            } else {
-              this.fieldsMeta.username.rules[0].required = false
-            }
-            if (['mysql', 'postgresql', 'mariadb', 'oracle'].indexOf(form.protocol) !== -1) {
-              this.fieldsMeta.username.rules = [Required]
-              this.fieldsMeta.username.rules[0].required = true
-            }
-          }
-        },
-        private_key: {
-          component: UploadKey,
-          hidden: (form) => {
-            if (form.login_mode !== 'auto') {
-              return true
-            }
-            if (form.protocol === 'k8s') {
-              return true
-            }
-            return form.auto_generate_key === true
-          }
-        },
-        username_same_with_user: {
-          type: 'switch',
-          helpText: this.$t('assets.UsernameHelpMessage'),
-          hidden: (form) => {
-            this.fieldsMeta.username.el.disabled = form.username_same_with_user
-            return form.protocol === 'k8s'
-          },
-          el: {
-            disabled: false
-          }
-        },
-        auto_generate_key: {
-          type: 'switch',
-          label: this.$t('assets.AutoGenerateKey'),
-          hidden: form => {
-            this.fieldsMeta.auto_generate_key.el.disabled = ['ssh', 'rdp'].indexOf(form.protocol) === -1 || form.login_mode === 'manual'
-            if (JSON.stringify(this.$route.params) !== '{}') {
-              return true
-            }
-            if (form.protocol === 'k8s') {
-              return true
-            }
-          },
-          el: {
-            disabled: false
-          }
-        },
-        token: {
-          rules: [Required],
-          el: {
-            type: 'textarea',
-            autosize: { minRows: 3 }
-          },
-          hidden: form => {
-            return form.protocol !== 'k8s'
-          }
-        },
-        protocol: {
-          rules: [Required],
-          el: {
-            style: 'width:100%',
-            disabled: true
-          },
-          on: {
-            input: ([value], updateForm) => {
-              if (['ssh', 'rdp'].indexOf(value) === -1) {
-                updateForm({ auto_push: false })
-                updateForm({ auto_generate_key: false })
-              }
-            }
-          }
-        },
-        ad_domain: {
-          label: this.$t('assets.AdDomain'),
-          hidden: (form) => ['rdp'].indexOf(form.protocol) === -1,
-          helpText: this.$t('assets.AdDomainHelpText')
-        },
-        cmd_filters: {
-          component: Select2,
-          hidden: (form) => graphProtocols.indexOf(form.protocol) !== -1,
-          el: {
-            multiple: true,
-            value: [],
-            ajax: {
-              url: '/api/v1/assets/cmd-filters/'
-            }
-          }
-        },
-        auto_push: {
-          type: 'switch',
-          el: {
-            disabled: false
-          },
-          hidden: form => {
-            this.fieldsMeta.auto_push.el.disabled = ['ssh', 'rdp'].indexOf(form.protocol) === -1 || form.login_mode === 'manual'
-          },
-          on: {
-            input: ([value], updateForm) => {
-              if (!value) {
-                updateForm({ auto_generate_key: value })
-              }
-            }
-          }
-        },
+        login_mode: fields.login_mode,
+        username: fields.username,
+        private_key: fields.private_key,
+        username_same_with_user: fields.username_same_with_user,
+        auto_generate_key: fields.auto_generate_key,
+        protocol: fields.protocol,
+        cmd_filters: fields.cmd_filters,
+        auto_push: fields.auto_push,
         sftp_root: {
           rules: [Required],
-          helpText: this.$t('assets.SFTPHelpMessage'),
-          hidden: (item) => item.protocol !== 'ssh'
+          helpText: this.$t('assets.SFTPHelpMessage')
         },
         sudo: {
           rules: [Required],
           helpText: this.$t('assets.SudoHelpMessage'),
           hidden: (item) => item.protocol !== 'ssh' || !item.auto_push
         },
-        update_password: {
-          label: this.$t('users.UpdatePassword'),
-          type: 'checkbox',
-          hidden: (formValue) => {
-            if (formValue.update_password || formValue.protocol === 'k8s') {
-              return true
-            }
-            if (formValue.login_mode === 'manual') {
-              return true
-            }
-            return !this.$route.params.id
-          }
-        },
-        password: {
-          helpText: this.$t('assets.PasswordHelpMessage'),
-          hidden: form => {
-            if (form.login_mode !== 'auto' || form.protocol === 'k8s' || form.auto_generate_key) {
-              return true
-            }
-            if (!this.$route.params.id) {
-              return false
-            }
-            return !form.update_password
-          }
-        },
+        update_password: fields.update_password,
+        password: fields.password,
         shell: {
           hidden: (item) => item.protocol !== 'ssh' || !item.auto_push,
           rules: [Required]
@@ -217,25 +59,12 @@ export default {
           hidden: (item) => item.protocol !== 'ssh' || !item.auto_push || item.username_same_with_user,
           helpText: this.$t('assets.HomeHelpMessage')
         },
-        system_groups: {
-          label: this.$t('assets.LinuxUserAffiliateGroup'),
-          hidden: (item) => ['ssh', 'rdp'].indexOf(item.protocol) === -1 || !item.auto_push || item.username_same_with_user,
-          helpText: this.$t('assets.GroupsHelpMessage')
-        }
+        system_groups: fields.system_groups
       },
-      url: '/api/v1/assets/system-users/',
-      authHiden: false
+      url: '/api/v1/assets/system-users/'
     }
   },
   method: {
-
-  },
-  mounted() {
-    const params = this.$route.params
-    const method = params.id ? 'update' : 'create'
-    if (method === 'update') {
-      this.fieldsMeta.username_same_with_user.el.disabled = true
-    }
   }
 }
 </script>

src/views/assets/SystemUser/SystemUserCreate/vncAndTelnet.vue

@@ -4,7 +4,7 @@
 
 <script>
 import GenericCreateUpdatePage from '@/layout/components/GenericCreateUpdatePage'
-import { Required } from '@/components/DataForm/rules'
+import getFields from '@/views/assets/SystemUser/SystemUserCreate/fields'
 
 // const asciiProtocols = ['ssh', 'telnet', 'mysql']
 
@@ -12,6 +12,7 @@ export default {
   name: 'SystemUserCreateUpdate',
   components: { GenericCreateUpdatePage },
   data() {
+    const fields = getFields.bind(this)()
     return {
       initial: {
         login_mode: 'auto',
@@ -24,90 +25,14 @@ export default {
         [this.$t('common.Other'), ['comment']]
       ],
       fieldsMeta: {
-        login_mode: {
-          helpText: this.$t('assets.LoginModeHelpMessage')
-        },
-        username: {
-          el: {
-            disabled: false
-          },
-          rules: [Required],
-          hidden: (form) => {
-            if (form.login_mode === 'auto') {
-              this.fieldsMeta.username.rules = [Required]
-            } else {
-              this.fieldsMeta.username.rules[0].required = false
-            }
-            if (!form.username_same_with_user) {
-              this.fieldsMeta.username.rules = [Required]
-            } else {
-              this.fieldsMeta.username.rules[0].required = false
-            }
-          }
-        },
-        username_same_with_user: {
-          type: 'switch',
-          helpText: this.$t('assets.UsernameHelpMessage'),
-          hidden: (form) => {
-            this.fieldsMeta.username.el.disabled = form.username_same_with_user
-          },
-          el: {
-            disabled: false
-          }
-        },
-        protocol: {
-          rules: [Required],
-          el: {
-            disabled: true,
-            style: 'width:100%'
-          },
-          on: {
-            input: ([value], updateForm) => {
-              if (['ssh', 'rdp'].indexOf(value) === -1) {
-                updateForm({ auto_push: false })
-                updateForm({ auto_generate_key: false })
-              }
-            }
-          }
-        },
-        update_password: {
-          label: this.$t('users.UpdatePassword'),
-          type: 'checkbox',
-          hidden: (formValue) => {
-            if (formValue.update_password || formValue.protocol === 'k8s') {
-              return true
-            }
-            if (formValue.login_mode === 'manual') {
-              return true
-            }
-            return !this.$route.params.id
-          }
-        },
-        password: {
-          helpText: this.$t('assets.PasswordHelpMessage'),
-          hidden: form => {
-            if (form.login_mode !== 'auto' || form.protocol === 'k8s' || form.auto_generate_key) {
-              return true
-            }
-            if (!this.$route.params.id) {
-              return false
-            }
-            return !form.update_password
-          }
-        }
+        login_mode: fields.login_mode,
+        username: fields.username,
+        username_same_with_user: fields.username_same_with_user,
+        protocol: fields.protocol,
+        update_password: fields.update_password,
+        password: fields.password
       },
-      url: '/api/v1/assets/system-users/',
-      authHiden: false
-    }
-  },
-  method: {
-
-  },
-  mounted() {
-    const params = this.$route.params
-    const method = params.id ? 'update' : 'create'
-    if (method === 'update') {
-      this.fieldsMeta.username_same_with_user.el.disabled = true
+      url: '/api/v1/assets/system-users/'
     }
   }
 }