perf: update create drawer

2026-01-29 21:28:52 +00:00 · 2025-01-02 17:19:52 +08:00
parent 504adad9fe
commit f605192fe1
17 changed files with 247 additions and 174 deletions
--- 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"
--- 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',
--- 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>
--- 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"
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -641,3 +641,8 @@ li.rmenu i.fa {
 }


+.el-form-item {
+  .CodeMirror {
+    height: 200px;
+  }
+}
--- 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}/`
        }
      }
    }
--- 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,
--- 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: {
--- 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: {
--- 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',
--- 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: {
--- 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',
--- 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()
    }
  }
 }
--- 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'
--- 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']],
--- 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: {
--- 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: {