From f605192fe15a4c8b5c49a18515b63b556cadf36f Mon Sep 17 00:00:00 2001
From: ibuler <ibuler@qq.com>
Date: Thu, 2 Jan 2025 17:19:52 +0800
Subject: [PATCH] perf: update create drawer

---
 .../AccountListTable/AccountCreateUpdate.vue  |   1 +
 .../Apps/ManyJsonTabs/UserJsonTab.vue         |   1 -
 src/components/Drawer/index.vue               | 279 ++++++++++--------
 .../Table/TableFormatters/DetailFormatter.vue |   1 +
 src/styles/index.scss                         |   5 +
 .../ConnectMethodAclDetail/index.vue          |  13 +-
 .../Cloud/Account/AccountCreateUpdate.vue     |  23 +-
 src/views/ops/Job/JobUpdateCreate.vue         |   2 +-
 src/views/ops/Job/components/Adhoc.vue        |  12 +-
 src/views/ops/Job/components/PlayBook.vue     |  11 +-
 src/views/ops/Template/Adhoc.vue              |  11 +-
 .../ops/Template/Adhoc/AdhocUpdateCreate.vue  |   3 +-
 src/views/ops/Template/Playbook.vue           |  23 +-
 .../Playbook/PlaybookCreateUpdate.vue         |   3 +-
 .../AssetPermissionCreateUpdate.vue           |   1 +
 .../Auth/Ldap/HaSyncSettingDialog.vue         |  16 +-
 .../settings/Auth/Ldap/SyncSettingDialog.vue  |  16 +-
 17 files changed, 247 insertions(+), 174 deletions(-)

diff --git a/src/components/Apps/AccountListTable/AccountCreateUpdate.vue b/src/components/Apps/AccountListTable/AccountCreateUpdate.vue
index fd6278b5b..188eea7fa 100644
--- a/src/components/Apps/AccountListTable/AccountCreateUpdate.vue
+++ b/src/components/Apps/AccountListTable/AccountCreateUpdate.vue
@@ -1,5 +1,6 @@
 <template v-if="iVisible">
   <Drawer
+    :has-footer="true"
     :title="title"
     :visible="iVisible"
     class="drawer"
diff --git a/src/components/Apps/ManyJsonTabs/UserJsonTab.vue b/src/components/Apps/ManyJsonTabs/UserJsonTab.vue
index dc30b40a3..797b0ba54 100644
--- a/src/components/Apps/ManyJsonTabs/UserJsonTab.vue
+++ b/src/components/Apps/ManyJsonTabs/UserJsonTab.vue
@@ -44,7 +44,6 @@ export default {
           columnsMeta: {
             name: {
               label: this.$t('Name'),
-              width: 85,
               formatter: (row) => {
                 const to = {
                   name: 'UserDetail',
diff --git a/src/components/Drawer/index.vue b/src/components/Drawer/index.vue
index 9e08d8fb2..7c23056b9 100644
--- a/src/components/Drawer/index.vue
+++ b/src/components/Drawer/index.vue
@@ -4,6 +4,8 @@
     v-el-drawer-drag-width
     :append-to-body="true"
     :before-close="handleClose"
+    :class="['drawer', { 'drawer__no-footer': !hasFooter }]"
+    :modal="modal"
     :size="size"
     :title="title"
     :visible.sync="iVisible"
@@ -14,10 +16,16 @@
   >
     <div class="drawer__content">
       <slot name="default">
-        <component :is="component" v-if="component" v-bind="componentProps" v-on="componentListeners" />
+        <component
+          :is="component"
+          v-if="component"
+          ref="dynamicComponent"
+          v-bind="componentProps"
+          v-on="componentListeners"
+        />
       </slot>
     </div>
-    <div slot="drawer-footer" class="drawer__footer" />
+    <div v-if="hasFooter" ref="drawerFooter" class="drawer__footer" />
   </el-drawer>
 </template>
 
@@ -49,6 +57,14 @@ export default {
     visible: {
       type: Boolean,
       default: false
+    },
+    modal: {
+      type: Boolean,
+      default: true
+    },
+    hasFooter: {
+      type: Boolean,
+      default: true
     }
   },
   data() {
@@ -67,6 +83,8 @@ export default {
       }
     }
   },
+  mounted() {
+  },
   methods: {
     handleClose(done) {
       this.$emit('close-drawer')
@@ -77,164 +95,191 @@ export default {
 </script>
 
 <style lang='scss' scoped>
-::v-deep .drawer {
-  min-width: 565px;
-
-  .el-card__body {
-    padding-top: 10px;
-    padding-bottom: 20px;
-  }
-
-  .page-submenu {
-    .el-tabs__item.is-top {
-      padding: 0 10px;
+.drawer__no-footer {
+  ::v-deep {
+    .drawer {
+      .page {
+        height: calc(100vh - 55px);
+      }
     }
   }
+}
 
-  .form-buttons {
-    margin-left: 13px;
-  }
+.drawer {
+  ::v-deep {
+    min-width: 565px;
 
-  .el-form {
-    margin-right: 1px;
-    padding-right: 15px;
-    height: 100%;
-
-    // Detail 中
-    &.content {
-      margin-right: 0;
+    .el-card__body {
+      padding-top: 10px;
+      padding-bottom: 20px;
+    }
+
+    .page-submenu {
+      .el-tabs__item.is-top {
+        padding: 0 10px;
+      }
+    }
+
+    .form-buttons {
+      margin-left: 13px;
     }
 
-    // Form 中的子 form
     .el-form {
-      margin-left: 0;
-    }
+      margin-right: 1px;
+      padding-right: 15px;
+      height: 100%;
 
-    .el-form-item {
-      .el-form-item__label {
-        padding-right: 20px;
+      // Detail 中
+      &.content {
+        margin-right: 0;
       }
 
-      .el-radio {
-        line-height: 25px;
-        margin-right: 13px;
-
-        .el-radio__label {
-          padding-left: 5px;
-        }
-      }
-    }
-
-    &.el-form--label-top {
-      .el-radio-group {
-        .el-radio {
-          display: block;
-          padding-bottom: 3px;
-        }
+      // Form 中的子 form
+      .el-form {
+        margin-left: 0;
+        margin-top: 0;
+        margin-bottom: 0;
       }
 
       .el-form-item {
-        padding-left: 12px;
-
         .el-form-item__label {
-          padding: 0 20px 0 0;
-          line-height: 30px;
+          padding-right: 20px;
         }
 
-        .sub-form {
-          margin-left: -1px;
+        .el-radio {
+          line-height: 25px;
+          margin-right: 13px;
 
-          .form-fields {
-            max-height: unset;
+          .el-radio__label {
+            padding-left: 5px;
           }
         }
       }
 
-      &.form-fields {
-        //overflow: auto;
-        //max-height: calc(100vh - 180px);
-      }
-
-      .el-checkbox-group {
-        .el-checkbox {
-          display: block;
-          padding-bottom: 3px;
+      &.el-form--label-top {
+        .el-radio-group {
+          .el-radio {
+            display: block;
+            padding-bottom: 3px;
+          }
         }
-      }
 
-      .el-form-item__content:has(.el-checkbox):not(:has(.el-checkbox-group)) {
-        display: inline-block; /* 更改为 inline-block */
-        //width: unset; /* 这个设置上去后，平台详情中， Automations 会有问题 */
-        vertical-align: bottom;
-      }
+        .el-form-item {
+          padding-left: 12px;
 
-      .el-form-item__content {
-        form {
-          .el-form-item {
-            padding-left: 0;
+          .el-form-item__label {
+            padding: 0 20px 0 0;
+            line-height: 30px;
+          }
+
+          .sub-form {
+            margin-left: -1px;
+
+            .form-fields {
+              max-height: unset;
+            }
+          }
+        }
+
+        &.form-fields {
+          //overflow: auto;
+          //max-height: calc(100vh - 180px);
+        }
+
+        .el-checkbox-group {
+          .el-checkbox {
+            display: block;
+            padding-bottom: 3px;
+          }
+        }
+
+        .el-form-item__content:has(.el-checkbox):not(:has(.el-checkbox-group)) {
+          display: inline-block; /* 更改为 inline-block */
+          //width: unset; /* 这个设置上去后，平台详情中， Automations 会有问题 */
+          vertical-align: bottom;
+        }
+
+        .el-form-item__content {
+          form {
+            .el-form-item {
+              padding-left: 0;
+            }
           }
         }
       }
+
+      .form-group-header {
+        margin-left: 20px;
+      }
     }
 
-    .form-group-header {
-      margin-left: 20px;
+    .el-drawer__header {
+      border-bottom: 1px solid #EBEEF5;
+      margin-bottom: 0;
+      padding: 15px 20px;
+      font-size: 16px;
+      font-weight: 500;
+      color: var(--color-text-primary);
     }
-  }
 
-  .el-drawer__header {
-    border-bottom: 1px solid #EBEEF5;
-    margin-bottom: 0;
-    padding: 15px 20px;
-    font-size: 16px;
-    font-weight: 500;
-    color: var(--color-text-primary);
-  }
+    .sql.container {
+      display: none;
+    }
 
-  .sql.container {
-    display: none;
-  }
+    .page {
+      overflow-y: auto;
 
-  .page {
-    overflow-y: auto;
+      height: calc(100vh - 110px);
+
+      .form-buttons {
+        position: absolute;
+        bottom: 13px;
+        margin-left: 20%;
+        margin-top: 0;
+      }
+
+      &.tab-page {
+        .page-content {
+          padding-right: 0;
+        }
+      }
 
-    &.tab-page {
       .page-content {
-        padding-right: 0;
+        height: unset;
+        padding-right: 20px;
+
+        & > div {
+          margin-bottom: 1px;
+        }
+      }
+
+      .ibox {
+        margin-bottom: 10px;
+        border: none;
       }
     }
 
-    .page-content {
-      height: unset;
-      padding-right: 20px;
-
-      & > div {
-        margin-bottom: 1px;
-      }
+    .drawer__content, .tab-page-content {
+      background: #f3f3f3;
     }
 
-    .ibox {
-      margin-bottom: 10px;
-      border: none;
+    .drawer__footer {
+      border-top: solid 1px #f3f3f3;
     }
-  }
 
-  .drawer__content, .tab-page-content {
-    background: #f3f3f3;
-  }
+    //.el-drawer__header {
+    //  margin-bottom: 20px;
+    //
+    //  span {
+    //    font-size: 16px;
+    //    font-weight: 800;
+    //    color: var(--color-text-primary);
+    //  }
+    //}
 
-  //.el-drawer__header {
-  //  margin-bottom: 20px;
-  //
-  //  span {
-  //    font-size: 16px;
-  //    font-weight: 800;
-  //    color: var(--color-text-primary);
-  //  }
-  //}
-
-  .el-drawer__body {
-    overflow: auto;
+    .el-drawer__body {
+      overflow: auto;
+    }
   }
 }
 </style>
diff --git a/src/components/Table/TableFormatters/DetailFormatter.vue b/src/components/Table/TableFormatters/DetailFormatter.vue
index 1f71f711a..a065a00cd 100644
--- a/src/components/Table/TableFormatters/DetailFormatter.vue
+++ b/src/components/Table/TableFormatters/DetailFormatter.vue
@@ -15,6 +15,7 @@
     <Drawer
       v-if="formatterArgs.drawer && drawerVisible"
       :component="drawerComponent"
+      :has-footer="false"
       :title="iTitle"
       :visible.sync="drawerVisible"
       class="form-drawer"
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 6ee5fb781..709938637 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -641,3 +641,8 @@ li.rmenu i.fa {
 }
 
 
+.el-form-item {
+  .CodeMirror {
+    height: 200px;
+  }
+}
diff --git a/src/views/acl/ConnectMethodAcl/ConnectMethodAclDetail/index.vue b/src/views/acl/ConnectMethodAcl/ConnectMethodAclDetail/index.vue
index bc82317d7..194a827d2 100644
--- a/src/views/acl/ConnectMethodAcl/ConnectMethodAclDetail/index.vue
+++ b/src/views/acl/ConnectMethodAcl/ConnectMethodAclDetail/index.vue
@@ -19,6 +19,14 @@ export default {
     UserJsonTab,
     AssetJsonTab
   },
+  props: {
+    object: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    }
+  },
   data() {
     return {
       TaskDetail: {},
@@ -39,9 +47,10 @@ export default {
           }
         ],
         hasRightSide: true,
+        url: '/api/v1/acls/connect-method-acls/',
         actions: {
-          detailApiUrl: `/api/v1/acls/connect-method-acls/${this.$route.params.id}/`,
-          deleteApiUrl: `/api/v1/acls/connect-method-acls/${this.$route.params.id}/`
+          detailApiUrl: `/api/v1/acls/connect-method-acls/${this.object.id}/`,
+          deleteApiUrl: `/api/v1/acls/connect-method-acls/${this.object.id}/`
         }
       }
     }
diff --git a/src/views/assets/Cloud/Account/AccountCreateUpdate.vue b/src/views/assets/Cloud/Account/AccountCreateUpdate.vue
index 2652b6346..9051020f8 100644
--- a/src/views/assets/Cloud/Account/AccountCreateUpdate.vue
+++ b/src/views/assets/Cloud/Account/AccountCreateUpdate.vue
@@ -34,11 +34,12 @@
 <script>
 import { RequiredChange, specialEmojiCheck } from '@/components/Form/DataForm/rules'
 import { ACCOUNT_PROVIDER_ATTRS_MAP, aliyun } from '../const'
-import { Checkbox, CronTab, IBox, UploadKey } from '@/components'
+import { Checkbox, IBox, UploadKey } from '@/components'
 import { encryptPassword } from '@/utils/crypto'
 import { GenericCreateUpdateForm, Page } from '@/layout/components'
 import SyncInstanceTaskStrategy from './components/SyncInstanceTaskStrategy'
 import { setUrlParam } from '@/utils/common'
+import { crontab, interval, is_periodic } from '@/components/const'
 
 export default {
   components: {
@@ -237,23 +238,9 @@ export default {
               }
             }
           },
-          is_periodic: {
-            type: 'checkbox'
-          },
-          crontab: {
-            component: CronTab,
-            hidden: (formValue) => {
-              return formValue.is_periodic === false
-            },
-            helpText: this.$t('CrontabOfCreateUpdatePage'),
-            helpTextAsTip: true
-          },
-          interval: {
-            hidden: (formValue) => {
-              return formValue.is_periodic === false
-            },
-            helpText: this.$t('IntervalOfCreateUpdatePage')
-          },
+          is_periodic,
+          crontab,
+          interval,
           strategy: {
             label: this.$t('Strategy'),
             component: SyncInstanceTaskStrategy,
diff --git a/src/views/ops/Job/JobUpdateCreate.vue b/src/views/ops/Job/JobUpdateCreate.vue
index d70ee2d95..702511c33 100644
--- a/src/views/ops/Job/JobUpdateCreate.vue
+++ b/src/views/ops/Job/JobUpdateCreate.vue
@@ -12,7 +12,7 @@ import CodeEditor from '@/components/Form/FormFields/CodeEditor'
 import i18n from '@/i18n/i18n'
 import VariableHelpDialog from '@/views/ops/Adhoc/VariableHelpDialog.vue'
 import { Required } from '@/components/Form/DataForm/rules'
-import { crontab, interval } from '@/views/accounts/const'
+import { crontab, interval } from '@/components/const'
 
 export default {
   components: {
diff --git a/src/views/ops/Job/components/Adhoc.vue b/src/views/ops/Job/components/Adhoc.vue
index 5d0ae3609..dc2ab8763 100644
--- a/src/views/ops/Job/components/Adhoc.vue
+++ b/src/views/ops/Job/components/Adhoc.vue
@@ -1,14 +1,18 @@
 <template>
   <div>
-    <GenericListTable :header-actions="headerActions" :table-config="tableConfig" />
+    <GenericListTable
+      :create-drawer="createDrawer"
+      :detail-drawer="detailDrawer"
+      :header-actions="headerActions"
+      :table-config="tableConfig"
+    />
     <JobRunDialog v-if="showJobRunDialog" :item="item" :visible.sync="showJobRunDialog" @submit="runJob" />
   </div>
 </template>
 
 <script>
 import JobRunDialog from '@/views/ops/Job/JobRunDialog'
-import GenericListTable from '@/layout/components/GenericListTable'
-
+import GenericListTable from '@/components/Table/DrawerListTable'
 import { openTaskPage } from '@/utils/jms'
 import { ActionsFormatter, DateFormatter, DetailFormatter } from '@/components/Table/TableFormatters'
 
@@ -20,6 +24,8 @@ export default {
   data() {
     return {
       item: {},
+      createDrawer: () => import('@/views/ops/Job/JobUpdateCreate.vue'),
+      detailDrawer: () => import('@/views/ops/Job/JobDetail/index.vue'),
       tableConfig: {
         url: '/api/v1/ops/jobs/?type=adhoc',
         columnsShow: {
diff --git a/src/views/ops/Job/components/PlayBook.vue b/src/views/ops/Job/components/PlayBook.vue
index 710272cb3..43eee0d5a 100644
--- a/src/views/ops/Job/components/PlayBook.vue
+++ b/src/views/ops/Job/components/PlayBook.vue
@@ -1,13 +1,18 @@
 <template>
   <div>
-    <GenericListTable :header-actions="headerActions" :table-config="tableConfig" />
+    <GenericListTable
+      :create-drawer="createDrawer"
+      :detail-drawer="detailDrawer"
+      :header-actions="headerActions"
+      :table-config="tableConfig"
+    />
     <JobRunDialog v-if="showJobRunDialog" :item="item" :visible.sync="showJobRunDialog" @submit="runJob" />
   </div>
 </template>
 
 <script>
 import JobRunDialog from '@/views/ops/Job/JobRunDialog'
-import GenericListTable from '@/layout/components/GenericListTable'
+import GenericListTable from '@/components/Table/DrawerListTable'
 
 import { openTaskPage } from '@/utils/jms'
 import { ActionsFormatter, DateFormatter, DetailFormatter } from '@/components/Table/TableFormatters'
@@ -19,6 +24,8 @@ export default {
   },
   data() {
     return {
+      createDrawer: () => import('@/views/ops/Job/JobUpdateCreate.vue'),
+      detailDrawer: () => import('@/views/ops/Job/JobDetail/index.vue'),
       item: {},
       tableConfig: {
         url: '/api/v1/ops/jobs/?type=playbook',
diff --git a/src/views/ops/Template/Adhoc.vue b/src/views/ops/Template/Adhoc.vue
index af8ed91ca..145269253 100644
--- a/src/views/ops/Template/Adhoc.vue
+++ b/src/views/ops/Template/Adhoc.vue
@@ -1,9 +1,14 @@
 <template>
-  <GenericListTable :header-actions="headerActions" :table-config="tableConfig" />
+  <GenericListTable
+    :create-drawer="createDrawer"
+    :detail-drawer="detailDrawer"
+    :header-actions="headerActions"
+    :table-config="tableConfig"
+  />
 </template>
 
 <script>
-import GenericListTable from '@/layout/components/GenericListTable'
+import GenericListTable from '@/components/Table/DrawerListTable'
 import { ActionsFormatter } from '@/components/Table/TableFormatters'
 
 export default {
@@ -13,6 +18,8 @@ export default {
   data() {
     const currentUserID = this.$store.state.users.profile.id
     return {
+      createDrawer: () => import('@/views/ops/Template/Adhoc/AdhocUpdateCreate.vue'),
+      detailDrawer: () => import('@/views/ops/Template/Adhoc/AdhocDetail/index.vue'),
       tableConfig: {
         url: '/api/v1/ops/adhocs/',
         columnsShow: {
diff --git a/src/views/ops/Template/Adhoc/AdhocUpdateCreate.vue b/src/views/ops/Template/Adhoc/AdhocUpdateCreate.vue
index 5331f1240..5b1d83b4e 100644
--- a/src/views/ops/Template/Adhoc/AdhocUpdateCreate.vue
+++ b/src/views/ops/Template/Adhoc/AdhocUpdateCreate.vue
@@ -14,7 +14,8 @@ export default {
     return {
       url: '/api/v1/ops/adhocs/',
       fields: [
-        [this.$t('Basic'), ['name', 'module', 'args', 'comment', 'scope']]
+        [this.$t('Basic'), ['name', 'module', 'args', 'scope']],
+        [this.$t('Other'), ['comment']]
       ],
       initial: {
         module: 'shell',
diff --git a/src/views/ops/Template/Playbook.vue b/src/views/ops/Template/Playbook.vue
index 51840df49..9c8616a0d 100644
--- a/src/views/ops/Template/Playbook.vue
+++ b/src/views/ops/Template/Playbook.vue
@@ -1,12 +1,22 @@
 <template>
   <div>
-    <GenericListTable ref="list" :header-actions="headerActions" :table-config="tableConfig" />
-    <UploadDialog v-if="uploadDialogVisible" :visible.sync="uploadDialogVisible" @completed="refreshTable" />
+    <GenericListTable
+      ref="list"
+      :create-drawer="createDrawer"
+      :detail-drawer="detailDrawer"
+      :header-actions="headerActions"
+      :table-config="tableConfig"
+    />
+    <UploadDialog
+      v-if="uploadDialogVisible"
+      :visible.sync="uploadDialogVisible"
+      @completed="refreshTable"
+    />
   </div>
 </template>
 
 <script>
-import GenericListTable from '@/layout/components/GenericListTable'
+import GenericListTable from '@/components/Table/DrawerListTable'
 import UploadDialog from '@/views/ops/Template/Playbook/UploadDialog'
 import { ActionsFormatter } from '@/components/Table/TableFormatters'
 
@@ -18,6 +28,8 @@ export default {
   data() {
     const currentUserID = this.$store.state.users.profile.id
     return {
+      createDrawer: () => import('@/views/ops/Template/Playbook/PlaybookCreateUpdate.vue'),
+      detailDrawer: () => import('@/views/ops/Template/Playbook/PlaybookDetail/index.vue'),
       createDialogVisible: false,
       uploadDialogVisible: false,
       tableConfig: {
@@ -60,7 +72,7 @@ export default {
           callback: (item) => {
             switch (item.name) {
               case 'create':
-                this.$router.push({ name: 'PlaybookCreate' })
+                this.handleCreate()
                 break
               case 'upload':
                 this.uploadDialogVisible = true
@@ -86,6 +98,9 @@ export default {
   methods: {
     refreshTable() {
       this.$refs.list.$refs.ListTable.reloadTable()
+    },
+    handleCreate() {
+      this.$refs.list.onCreate()
     }
   }
 }
diff --git a/src/views/ops/Template/Playbook/PlaybookCreateUpdate.vue b/src/views/ops/Template/Playbook/PlaybookCreateUpdate.vue
index ddcabed20..249b52c9f 100644
--- a/src/views/ops/Template/Playbook/PlaybookCreateUpdate.vue
+++ b/src/views/ops/Template/Playbook/PlaybookCreateUpdate.vue
@@ -13,7 +13,8 @@ export default {
     return {
       url: '/api/v1/ops/playbooks/',
       fields: [
-        [this.$t('Basic'), ['name', 'comment', 'scope']]
+        [this.$t('Basic'), ['name', 'scope']],
+        [this.$t('Other'), ['comment']]
       ],
       createSuccessNextRoute: {
         name: 'Template'
diff --git a/src/views/perms/AssetPermission/AssetPermissionCreateUpdate.vue b/src/views/perms/AssetPermission/AssetPermissionCreateUpdate.vue
index 430e03685..3e09cf817 100644
--- a/src/views/perms/AssetPermission/AssetPermissionCreateUpdate.vue
+++ b/src/views/perms/AssetPermission/AssetPermissionCreateUpdate.vue
@@ -41,6 +41,7 @@ export default {
       },
       fields: [
         [this.$t('Basic'), ['name']],
+        // [this.$t('Resource'), ['users', 'user_groups']],
         [this.$t('User'), ['users', 'user_groups']],
         [this.$t('Asset'), ['assets', 'nodes']],
         [this.$t('Account'), ['accounts']],
diff --git a/src/views/settings/Auth/Ldap/HaSyncSettingDialog.vue b/src/views/settings/Auth/Ldap/HaSyncSettingDialog.vue
index ee7f0f63c..d57187106 100644
--- a/src/views/settings/Auth/Ldap/HaSyncSettingDialog.vue
+++ b/src/views/settings/Auth/Ldap/HaSyncSettingDialog.vue
@@ -19,9 +19,10 @@
 
 <script>
 import { GenericCreateUpdateForm } from '@/layout/components'
-import { CronTab, Dialog } from '@/components'
+import { Dialog } from '@/components'
 import Select2 from '@/components/Form/FormFields/Select2.vue'
 import { Required } from '@/components/Form/DataForm/rules'
+import { crontab, interval, is_periodic } from '@/components/const'
 
 export default {
   name: 'SyncSettingDialog',
@@ -56,16 +57,9 @@ export default {
               return !this.$hasLicense()
             }
           },
-          AUTH_LDAP_HA_SYNC_IS_PERIODIC: {
-            type: 'checkbox'
-          },
-          AUTH_LDAP_HA_SYNC_CRONTAB: {
-            component: CronTab,
-            helpTip: this.$t('CrontabOfCreateUpdatePage')
-          },
-          AUTH_LDAP_HA_SYNC_INTERVAL: {
-            helpText: this.$t('IntervalOfCreateUpdatePage')
-          },
+          AUTH_LDAP_HA_SYNC_IS_PERIODIC: is_periodic,
+          AUTH_LDAP_HA_SYNC_CRONTAB: crontab,
+          AUTH_LDAP_HA_SYNC_INTERVAL: interval,
           AUTH_LDAP_HA_SYNC_RECEIVERS: {
             component: Select2,
             el: {
diff --git a/src/views/settings/Auth/Ldap/SyncSettingDialog.vue b/src/views/settings/Auth/Ldap/SyncSettingDialog.vue
index cf8823933..dd681b334 100644
--- a/src/views/settings/Auth/Ldap/SyncSettingDialog.vue
+++ b/src/views/settings/Auth/Ldap/SyncSettingDialog.vue
@@ -19,9 +19,10 @@
 
 <script>
 import { GenericCreateUpdateForm } from '@/layout/components'
-import { CronTab, Dialog } from '@/components'
+import { Dialog } from '@/components'
 import Select2 from '@/components/Form/FormFields/Select2.vue'
 import { Required } from '@/components/Form/DataForm/rules'
+import { crontab, interval, is_periodic } from '@/components/const'
 
 export default {
   name: 'SyncSettingDialog',
@@ -53,16 +54,9 @@ export default {
               return !this.$hasLicense()
             }
           },
-          AUTH_LDAP_SYNC_IS_PERIODIC: {
-            type: 'checkbox'
-          },
-          AUTH_LDAP_SYNC_CRONTAB: {
-            component: CronTab,
-            helpTip: this.$t('CrontabOfCreateUpdatePage')
-          },
-          AUTH_LDAP_SYNC_INTERVAL: {
-            helpText: this.$t('IntervalOfCreateUpdatePage')
-          },
+          AUTH_LDAP_SYNC_IS_PERIODIC: is_periodic,
+          AUTH_LDAP_SYNC_CRONTAB: crontab,
+          AUTH_LDAP_SYNC_INTERVAL: interval,
           AUTH_LDAP_SYNC_RECEIVERS: {
             component: Select2,
             el: {