diff --git a/src/layout/components/GenericCreateUpdateForm/index.vue b/src/layout/components/GenericCreateUpdateForm/index.vue
index d6410303f..e0cf50b8d 100644
--- a/src/layout/components/GenericCreateUpdateForm/index.vue
+++ b/src/layout/components/GenericCreateUpdateForm/index.vue
@@ -37,6 +37,10 @@ export default {
       type: Object,
       default: () => ({})
     },
+    afterGetFormValue: {
+      type: Function,
+      default: (value) => value
+    },
     // 提交前，清理form的值
     cleanFormValue: {
       type: Function,
@@ -61,13 +65,14 @@ export default {
         return this.$t('common.createSuccessMsg')
       }
     },
-    // 更新成功的msg
+    // 保存成功，继续添加的msg
     saveSuccessContinueMsg: {
       type: String,
       default: function() {
         return this.$t('common.saveSuccessContinueMsg')
       }
     },
+    // 更新成功的msg
     updateSuccessMsg: {
       type: String,
       default: function() {
@@ -93,7 +98,9 @@ export default {
     objectDetailRoute: {
       type: Object,
       default: function() {
-        const routeName = this.$route.name.replace('Update', 'Detail').replace('Create', 'Detail')
+        const routeName = this.$route.name
+          .replace('Update', 'Detail')
+          .replace('Create', 'Detail')
         return { name: routeName }
       }
     },
@@ -233,7 +240,8 @@ export default {
     try {
       const values = await this.getFormValue()
       this.$log.debug('Final object is: ', values)
-      this.form = Object.assign(this.form, values)
+      const formValue = Object.assign(this.form, values)
+      this.form = this.afterGetFormValue(formValue)
     } finally {
       this.loading = false
     }
diff --git a/src/views/settings/Ldap.vue b/src/views/settings/Ldap.vue
deleted file mode 100644
index 42b0cd57f..000000000
--- a/src/views/settings/Ldap.vue
+++ /dev/null
@@ -1,262 +0,0 @@
-<template>
-  <div>
-    <IBox>
-      <GenericCreateUpdateForm
-        :fields="selectFields"
-        :url="url"
-        :fields-meta="fieldsMeta"
-        :get-method="getMethod"
-        :more-buttons="moreButtons"
-        :has-detail-in-msg="false"
-      />
-    </IBox>
-    <Dialog
-      :title="$t('setting.importLdapUserTitle')"
-      :visible.sync="dialogLdapUserImport"
-      :destroy-on-close="true"
-    >
-      <el-alert type="success"> {{ $t('setting.importLdapUserTip') }}</el-alert>
-      <ListTable
-        ref="listTable"
-        class="listTable"
-        :table-config="tableConfig"
-        :header-actions="headerActions"
-        @error="handlerListTableXHRError($event)"
-      />
-      <div slot="footer">
-        <el-button @click="dialogLdapUserImport=false">{{ $t('common.Cancel') }}</el-button>
-        <el-button type="primary" :loading="dialogLdapUserImportLoginStatus" @click="importUserClick">{{ $t('common.Import') }}</el-button>
-      </div>
-    </Dialog>
-
-    <Dialog
-      :visible.sync="dialogVisible"
-      :title="$t('setting.testLdapLoginTitle') "
-      :destroy-on-close="true"
-      :loading-status="testLdapLoginStatus"
-      @confirm="testUerLoginClick()"
-      @cancel="dialogVisible = false"
-    >
-      <el-form
-        :model="userLoginForm"
-        label-position="right"
-        label-width="17%"
-      >
-        <el-form-item :label="$t('setting.username')">
-          <el-input
-            v-model="userLoginForm.username"
-            :placeholder="$t('setting.usernamePlaceholder')"
-            autocomplete="off"
-          />
-
-        </el-form-item>
-        <el-form-item :label="$t('setting.password')">
-          <el-input
-            v-model="userLoginForm.password"
-            type="password"
-            :placeholder="$t('setting.passwordPlaceholder')"
-            autocomplete="off"
-          />
-        </el-form-item>
-      </el-form>
-    </Dialog>
-  </div>
-</template>
-<script>
-import Dialog from '@/components/Dialog'
-import GenericCreateUpdateForm from '@/layout/components/GenericCreateUpdateForm'
-import {
-  testLdapSetting, testLdapUserLogin,
-  importLdapUser, refreshLdapUserCache, StartLdapUserCache
-} from '@/api/settings'
-import ListTable from '@/components/ListTable'
-import { IBox } from '@/components'
-
-export default {
-  name: 'Ldap',
-  components: {
-    GenericCreateUpdateForm,
-    ListTable,
-    IBox,
-    Dialog
-  },
-  data() {
-    return {
-      loading: true,
-      testLdapLoginStatus: false,
-      dialogVisible: false,
-      dialogLdapUserImport: false,
-      dialogLdapUserImportLoginStatus: false,
-      selectFields: [
-        [
-          this.$t('setting.LDAPServerInfo'),
-          [
-            'AUTH_LDAP_SERVER_URI', 'AUTH_LDAP_BIND_DN', 'AUTH_LDAP_BIND_PASSWORD'
-          ]
-        ],
-        [
-          this.$t('setting.LDAPUser'),
-          [
-            'AUTH_LDAP_SEARCH_OU', 'AUTH_LDAP_SEARCH_FILTER', 'AUTH_LDAP_USER_ATTR_MAP'
-          ]
-        ],
-        [
-          this.$t('common.Other'),
-          [
-            'AUTH_LDAP'
-          ]
-        ]
-      ],
-      fieldsMeta: {
-        AUTH_LDAP_USER_ATTR_MAP: {
-          el: {
-            type: 'textarea'
-          }
-        }
-      },
-      url: '/api/v1/settings/setting/?category=ldap',
-      moreButtons: [
-        {
-          title: this.$t('setting.ldapConnectTest'),
-          callback: function(value, form) {
-            if (value['AUTH_LDAP_BIND_PASSWORD'] === undefined) {
-              value['AUTH_LDAP_BIND_PASSWORD'] = ''
-            }
-            testLdapSetting(value).then(resp => {
-              this.$message.success(resp)
-            }).catch(err => {
-              const response = err.response
-              this.$message.error(response.data)
-            })
-          }.bind(this)
-        },
-        {
-          title: this.$t('setting.ldapLoginTest'),
-          callback: function(value, form) {
-            this.dialogVisible = true
-          }.bind(this)
-        },
-        {
-          title: this.$t('setting.ldapBulkImport'),
-          callback: function(value, form) {
-            this.dialogLdapUserImport = true
-          }.bind(this)
-        }
-      ],
-      userLoginForm: {
-        username: '',
-        password: ''
-      },
-      tableConfig: {
-        url: '/api/v1/settings/ldap/users/',
-        columns: ['username', 'name', 'email', 'existing'],
-        columnsMeta: {
-          username: {
-            label: this.$t('users.Username'),
-            width: '180px'
-          },
-          name: {
-            label: this.$t('users.Name'),
-            width: '180px'
-          },
-          email: {
-            label: this.$t('users.Email')
-          },
-          existing: {
-            label: this.$t('users.Existing'),
-            width: '120px'
-          }
-
-        }
-      },
-      headerActions: {
-        hasCreate: false,
-        hasBulkDelete: false,
-        hasUpload: false,
-        hasExport: false,
-        hasImport: false,
-        hasUpdate: false,
-        hasRefresh: true,
-        extraActions: [
-          {
-            name: 'refresh',
-            title: this.$t('setting.refreshLdapUser'),
-            type: 'primary',
-            has: true,
-            can: true,
-            callback: function() {
-              refreshLdapUserCache().then(res => {
-                this.$message.success(this.$t('setting.refreshLdapCache'))
-                StartLdapUserCache()
-              })
-            }.bind(this)
-          }
-        ]
-      }
-    }
-  },
-  mounted() {
-    Object.assign(this.initialData, this.object)
-    if (this.object.AUTH_LDAP_USER_ATTR_MAP !== null) {
-      this.initialData.AUTH_LDAP_USER_ATTR_MAP = JSON.stringify(this.object.AUTH_LDAP_USER_ATTR_MAP)
-    }
-    this.loading = false
-  },
-  methods: {
-    cleanFormValue(data) {
-      if (data['AUTH_LDAP_BIND_PASSWORD'] === '') {
-        delete data['AUTH_LDAP_BIND_PASSWORD']
-      }
-      if (data['AUTH_LDAP_USER_ATTR_MAP']) {
-        data['AUTH_LDAP_USER_ATTR_MAP'] = JSON.parse(data['AUTH_LDAP_USER_ATTR_MAP'])
-      }
-      return {
-        ldap: data
-      }
-    },
-    getMethod() {
-      return 'put'
-    },
-    testUerLoginClick() {
-      this.testLdapLoginStatus = true
-      testLdapUserLogin(this.userLoginForm).then(res => {
-        this.$message.success(res)
-      }).catch(err => {
-        const response = err.response
-        this.$message.error(response.data)
-        // eslint-disable-next-line no-return-assign
-      }).finally(() => this.testLdapLoginStatus = false)
-    },
-    importUserClick() {
-      this.dialogLdapUserImportLoginStatus = true
-      const selectIds = []
-      this.$refs.listTable.selectedRows.forEach((item, index) => { selectIds.push(item.id) })
-      const data = {
-        username_list: selectIds
-      }
-      if (selectIds.length === 0) {
-        this.$message.error(this.$t('setting.unselectedUser'))
-        this.dialogLdapUserImportLoginStatus = false
-      } else {
-        importLdapUser(data).then(res => {
-          this.$message.success(res.msg)
-          // eslint-disable-next-line no-return-assign
-        }).finally(() => this.dialogLdapUserImportLoginStatus = false)
-      }
-    },
-    handlerListTableXHRError(errMsg) {
-      if (this.dialogLdapUserImport) {
-        setTimeout(this.$refs.listTable.reloadTable, 30000)
-      }
-    }
-  }
-}
-</script>
-
-<style scoped>
-
-.listTable ::v-deep .table-action-right-side{
-  padding-top: 0px !important;
-}
-
-</style>
diff --git a/src/views/settings/Ldap/ImportDialog.vue b/src/views/settings/Ldap/ImportDialog.vue
new file mode 100644
index 000000000..536ed6526
--- /dev/null
+++ b/src/views/settings/Ldap/ImportDialog.vue
@@ -0,0 +1,123 @@
+<template>
+  <Dialog
+    :title="$t('setting.importLdapUserTitle')"
+    :visible.sync="show"
+    :destroy-on-close="true"
+  >
+    <el-alert type="success"> {{ $t('setting.importLdapUserTip') }}</el-alert>
+    <ListTable
+      ref="listTable"
+      class="listTable"
+      :table-config="tableConfig"
+      :header-actions="headerActions"
+      @error="handlerListTableXHRError($event)"
+    />
+    <div slot="footer">
+      <el-button @click="hiddenDialog">{{ $t('common.Cancel') }}</el-button>
+      <el-button type="primary" :loading="dialogLdapUserImportLoginStatus" @click="importUserClick">{{ $t('common.Import') }}</el-button>
+    </div>
+  </Dialog>
+</template>
+
+<script>
+import ListTable from '@/components/ListTable'
+import Dialog from '@/components/Dialog'
+import { importLdapUser, refreshLdapUserCache, StartLdapUserCache } from '@/api/settings'
+
+export default {
+  name: 'ImportDialog',
+  components: {
+    ListTable,
+    Dialog
+  },
+  props: {
+    show: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      dialogLdapUserImportLoginStatus: true,
+      headerActions: {
+        hasCreate: false,
+        hasBulkDelete: false,
+        hasUpload: false,
+        hasExport: false,
+        hasImport: false,
+        hasUpdate: false,
+        hasRefresh: true,
+        extraActions: [
+          {
+            name: 'refresh',
+            title: this.$t('setting.refreshLdapUser'),
+            type: 'primary',
+            has: true,
+            can: true,
+            callback: function() {
+              refreshLdapUserCache().then(res => {
+                this.$message.success(this.$t('setting.refreshLdapCache'))
+                StartLdapUserCache()
+              })
+            }.bind(this)
+          }
+        ]
+      },
+      tableConfig: {
+        url: '/api/v1/settings/ldap/users/',
+        columns: ['username', 'name', 'email', 'existing'],
+        columnsMeta: {
+          username: {
+            label: this.$t('users.Username'),
+            width: '180px'
+          },
+          name: {
+            label: this.$t('users.Name'),
+            width: '180px'
+          },
+          email: {
+            label: this.$t('users.Email')
+          },
+          existing: {
+            label: this.$t('users.Existing'),
+            width: '120px'
+          }
+        }
+      }
+    }
+  },
+  methods: {
+    importUserClick() {
+      this.dialogLdapUserImportLoginStatus = true
+      const selectIds = []
+      this.$refs.listTable.selectedRows.forEach((item, index) => {
+        selectIds.push(item.id)
+      })
+      const data = {
+        username_list: selectIds
+      }
+      if (selectIds.length === 0) {
+        this.$message.error(this.$t('setting.unselectedUser'))
+        this.dialogLdapUserImportLoginStatus = false
+      } else {
+        importLdapUser(data).then(res => {
+          this.$message.success(res.msg)
+          // eslint-disable-next-line no-return-assign
+        }).finally(() => this.dialogLdapUserImportLoginStatus = false)
+      }
+    },
+    handlerListTableXHRError(errMsg) {
+      if (this.dialogLdapUserImport) {
+        setTimeout(this.$refs.listTable.reloadTable, 30000)
+      }
+    },
+    hiddenDialog() {
+      this.$emit('update:show', false)
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/settings/Ldap/TestLoginDialog.vue b/src/views/settings/Ldap/TestLoginDialog.vue
new file mode 100644
index 000000000..f1ee9a1ca
--- /dev/null
+++ b/src/views/settings/Ldap/TestLoginDialog.vue
@@ -0,0 +1,66 @@
+<template>
+  <Dialog
+    :visible.sync="show"
+    :title="$t('setting.testLdapLoginTitle') "
+    :destroy-on-close="true"
+    :loading-status="testLdapLoginStatus"
+    @confirm="testUserLoginClick()"
+    @cancel="dialogVisible = false"
+  >
+    <el-form
+      :model="userLoginForm"
+      label-position="right"
+      label-width="17%"
+    >
+      <el-form-item :label="$t('setting.username')">
+        <el-input
+          v-model="userLoginForm.username"
+          :placeholder="$t('setting.usernamePlaceholder')"
+          autocomplete="off"
+        />
+      </el-form-item>
+      <el-form-item :label="$t('setting.password')">
+        <el-input
+          v-model="userLoginForm.password"
+          type="password"
+          :placeholder="$t('setting.passwordPlaceholder')"
+          autocomplete="off"
+        />
+      </el-form-item>
+    </el-form>
+  </Dialog>
+</template>
+
+<script>
+import { testLdapUserLogin } from '@/api/settings'
+
+export default {
+  name: 'TestLoginDialog',
+  data() {
+    return {
+      show: false,
+      testLdapLoginStatus: false,
+      userLoginForm: {
+        username: '',
+        password: ''
+      }
+    }
+  },
+  methods: {
+    testUserLoginClick() {
+      this.testLdapLoginStatus = true
+      testLdapUserLogin(this.userLoginForm).then(res => {
+        this.$message.success(res)
+      }).catch(err => {
+        const response = err.response
+        this.$message.error(response.data)
+        // eslint-disable-next-line no-return-assign
+      }).finally(() => this.testLdapLoginStatus = false)
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/settings/Ldap/index.vue b/src/views/settings/Ldap/index.vue
new file mode 100644
index 000000000..e58be1f03
--- /dev/null
+++ b/src/views/settings/Ldap/index.vue
@@ -0,0 +1,127 @@
+<template>
+  <div>
+    <IBox>
+      <GenericCreateUpdateForm
+        :fields="selectFields"
+        :url="url"
+        :fields-meta="fieldsMeta"
+        :get-method="getMethod"
+        :more-buttons="moreButtons"
+        :has-detail-in-msg="false"
+        :after-get-form-value="changeFormValue"
+        :clean-form-value="cleanFormValue"
+      />
+      <ImportDialog :show.sync="dialogLdapUserImport" />
+      <TestLoginDialog :show.sync="dialogTest" />
+    </IBox>
+  </div>
+</template>
+<script>
+import GenericCreateUpdateForm from '@/layout/components/GenericCreateUpdateForm'
+import { testLdapSetting } from '@/api/settings'
+import ImportDialog from './ImportDialog'
+import TestLoginDialog from './TestLoginDialog'
+import { IBox } from '@/components'
+
+export default {
+  name: 'Ldap',
+  components: {
+    GenericCreateUpdateForm,
+    IBox,
+    ImportDialog,
+    TestLoginDialog
+  },
+  data() {
+    return {
+      loading: true,
+      object: {},
+      dialogTest: false,
+      dialogLdapUserImport: false,
+      selectFields: [
+        [
+          this.$t('setting.LDAPServerInfo'),
+          [
+            'AUTH_LDAP_SERVER_URI', 'AUTH_LDAP_BIND_DN', 'AUTH_LDAP_BIND_PASSWORD'
+          ]
+        ],
+        [
+          this.$t('setting.LDAPUser'),
+          [
+            'AUTH_LDAP_SEARCH_OU', 'AUTH_LDAP_SEARCH_FILTER', 'AUTH_LDAP_USER_ATTR_MAP'
+          ]
+        ],
+        [
+          this.$t('common.Other'),
+          [
+            'AUTH_LDAP'
+          ]
+        ]
+      ],
+      fieldsMeta: {
+        AUTH_LDAP_USER_ATTR_MAP: {
+          el: {
+            type: 'textarea'
+          }
+        }
+      },
+      url: '/api/v1/settings/setting/?category=ldap',
+      moreButtons: [
+        {
+          title: this.$t('setting.ldapConnectTest'),
+          callback: function(value, form) {
+            if (value['AUTH_LDAP_BIND_PASSWORD'] === undefined) {
+              value['AUTH_LDAP_BIND_PASSWORD'] = ''
+            }
+            testLdapSetting(value).then(resp => {
+              this.$message.success(resp)
+            }).catch(err => {
+              const response = err.response
+              this.$message.error(response.data)
+            })
+          }.bind(this)
+        },
+        {
+          title: this.$t('setting.ldapLoginTest'),
+          callback: function(value, form) {
+            this.dialogTest = true
+          }.bind(this)
+        },
+        {
+          title: this.$t('setting.ldapBulkImport'),
+          callback: function(value, form) {
+            this.dialogLdapUserImport = true
+          }.bind(this)
+        }
+      ]
+    }
+  },
+  mounted() {
+    this.loading = false
+  },
+  methods: {
+    getMethod() {
+      return 'put'
+    },
+    changeFormValue(obj) {
+      obj.AUTH_LDAP_USER_ATTR_MAP = JSON.stringify(obj.AUTH_LDAP_USER_ATTR_MAP)
+      return obj
+    },
+    cleanFormValue(data) {
+      if (data['AUTH_LDAP_BIND_PASSWORD'] === '') {
+        delete data['AUTH_LDAP_BIND_PASSWORD']
+      }
+      if (data['AUTH_LDAP_USER_ATTR_MAP']) {
+        data['AUTH_LDAP_USER_ATTR_MAP'] = JSON.parse(data['AUTH_LDAP_USER_ATTR_MAP'])
+      }
+      return data
+    }
+  }
+}
+</script>
+
+<style scoped>
+.listTable ::v-deep .table-action-right-side{
+  padding-top: 0px !important;
+}
+
+</style>