perf: 优化 detail

2025-05-13 10:34:22 +00:00 · 2024-12-31 14:22:50 +08:00 · 2024-12-31 14:22:50 +08:00 · 559177ea32
commit 559177ea32
parent 8fabd32426
19 changed files with 93 additions and 78 deletions
--- a/src/components/Apps/AssetSelect/dialog.vue
+++ b/src/components/Apps/AssetSelect/dialog.vue
@ -2,7 +2,6 @@
  <Dialog
    :close-on-click-modal="false"
    :title="$tc('Assets')"
-    :disabled-status="!isLoaded"
    custom-class="asset-select-dialog"
    top="2vh"
    v-bind="$attrs"
@ -23,8 +22,8 @@
      :url="baseUrl"
      class="tree-table"
      v-bind="$attrs"
-      v-on="$listeners"
      @loaded="handleTableLoaded"
+      v-on="$listeners"
    />
  </Dialog>
 </template>
--- a/src/components/Cards/DetailCard/auto.vue
+++ b/src/components/Cards/DetailCard/auto.vue
@ -37,7 +37,7 @@ export default {
      type: Array,
      default: null
    },
-    showUndefine: {
+    showUndefined: {
      type: Boolean,
      default: true
    },
@ -225,7 +225,7 @@ export default {
        value = this.parseValue(value, fieldMeta.type)

        if (value === undefined) {
-          if (this.showUndefine) {
+          if (this.showUndefined) {
            value = '-'
          } else {
            continue
--- a/src/components/Cards/DetailCard/index.vue
+++ b/src/components/Cards/DetailCard/index.vue
@ -75,7 +75,7 @@ export default {
  line-height: 2;

  ::v-deep .el-form-item {
-    //border-bottom: 1px dashed #EBEEF5;
+    border-bottom: 1px dashed #F4F4F4;
    padding: 1px 0;
    margin-bottom: 0;
    text-align: end;
--- a/src/components/Cards/RelationCard/index.vue
+++ b/src/components/Cards/RelationCard/index.vue
@ -340,13 +340,13 @@ b, strong {
 }

 tr td {
-  line-height: 1.42857;
+  line-height: 1.4;
  padding: 8px 0;
  vertical-align: top;
 }

 tr.item td {
-  border-top: 1px solid #e7eaec;
+  border-top: 1px dashed #EBEEF5;
 }

 .box-margin {
--- a/src/components/Drawer/index.vue
+++ b/src/components/Drawer/index.vue
@ -85,6 +85,12 @@ export default {
    padding-bottom: 20px;
  }

+  .page-submenu {
+    .el-tabs__item.is-top {
+      padding: 0 10px;
+    }
+  }
+
  .el-form {
    margin-right: 30px;
    height: 100%;
--- a/src/views/assets/Asset/AssetDetail/Account.vue
+++ b/src/views/assets/Asset/AssetDetail/Account.vue
@ -21,16 +21,12 @@
          @onConfirm="onConfirm"
        />
      </template>
-      <template #right>
-        <QuickActions :actions="quickActions" :title="title" type="primary" />
-      </template>
    </TwoCol>
  </div>
 </template>

 <script>
 import { AccountListTable } from '@/components'
-import QuickActions from '@/components/QuickActions'
 import AccountTemplateDialog from '@/views/assets/Asset/AssetCreateUpdate/components/AccountTemplateDialog'
 import { openTaskPage } from '@/utils/jms'
 import TwoCol from '@/layout/components/Page/TwoColPage.vue'
@ -39,7 +35,6 @@ export default {
  name: 'Detail',
  components: {
    TwoCol,
-    QuickActions,
    AccountListTable,
    AccountTemplateDialog
  },
--- a/src/views/assets/Asset/AssetDetail/AssetCommand.vue
+++ b/src/views/assets/Asset/AssetDetail/AssetCommand.vue
@ -1,17 +1,13 @@
 <template>
-  <TwoCol>
-    <BaseList :asset-id="object.id" :is-page="false" />
-  </TwoCol>
+  <BaseList :asset-id="object.id" :is-page="false" />
 </template>

 <script>
 import BaseList from '@/views/sessions/CommandList/index.vue'
-import TwoCol from '@/layout/components/Page/TwoColPage.vue'

 export default {
  name: 'AssetCommand',
  components: {
-    TwoCol,
    BaseList
  },
  props: {
--- a/src/views/assets/Asset/AssetDetail/Detail.vue
+++ b/src/views/assets/Asset/AssetDetail/Detail.vue
@ -204,21 +204,21 @@ export default {
        url: `/api/v1/assets/assets/${this.object.id}/`,
        object: this.object,
        nested: 'spec_info',
-        showUndefine: true
+        showUndefined: true
      },
      customInfoConfig: {
        title: this.$t('CustomInfo'),
        url: `/api/v1/assets/assets/${this.object.id}/`,
        object: this.object,
        nested: 'custom_info',
-        showUndefine: false
+        showUndefined: false
      },
      gatheredInfoConfig: {
        url: `/api/v1/assets/hosts/${this.object.id}/`,
        title: this.$t('HardwareInfo'),
        object: this.object,
        nested: 'gathered_info',
-        showUndefine: false
+        showUndefined: false
      }
    }
  },
--- a/src/views/assets/Asset/AssetDetail/PermUser.vue
+++ b/src/views/assets/Asset/AssetDetail/PermUser.vue
@ -1,10 +1,12 @@
 <template>
  <div>
    <TwoCol>
-      <ListTable ref="ListTable" :header-actions="headerActions" :table-config="tableConfig" />
-    </TwoCol>
-    <TwoCol>
-      <PermUserGroupCard v-bind="UserGroupCardConfig" />
+      <template>
+        <ListTable ref="ListTable" :header-actions="headerActions" :table-config="tableConfig" />
+      </template>
+      <template #right>
+        <PermUserGroupCard v-bind="UserGroupCardConfig" />
+      </template>
    </TwoCol>
    <GenericListTableDialog
      :visible.sync="GenericListTableDialogConfig.visible"
@ -39,19 +41,12 @@ export default {
      tableConfig: {
        url: `/api/v1/assets/assets/${this.object.id}/perm-users/`,
        columns: [
-          'name', 'username', 'email', 'phone', 'wechat',
-          'groups_display', 'system_roles', 'org_roles', 'source',
-          'is_valid', 'login_blocked', 'mfa_enabled',
-          'mfa_force_enabled', 'is_expired',
-          'last_login', 'date_joined', 'date_password_last_updated',
-          'comment', 'created_by', 'actions'
+          'name', 'username', 'email',
+          'comment', 'created_by'
        ],
        columnsShow: {
-          min: ['name', 'username', 'actions'],
-          default: [
-            'name', 'username',
-            'source', 'is_valid', 'actions'
-          ]
+          min: ['name', 'username'],
+          default: ['name', 'username']
        },
        columnsMeta: {
          name: {
--- a/src/views/assets/Asset/AssetList/components/BaseList.vue
+++ b/src/views/assets/Asset/AssetList/components/BaseList.vue
@ -86,12 +86,15 @@ export default {
    extraQuery: {
      type: Object,
      default: () => ({})
+    },
+    defaultColumns: {
+      type: Array,
+      default: null
    }
  },
  data() {
    const vm = this
    const defaultConfig = getDefaultConfig(vm)
-    console.log('Default config: ', defaultConfig)

    const recentPlatforms = [
      {
@ -113,6 +116,7 @@ export default {
      type: 'primary',
      icon: '',
      split: true,
+      has: this.headerActions.hasCrate,
      callback: () => {
        this.showPlatform = false
        console.log('Create action')
@ -220,7 +224,12 @@ export default {
        node: this.$route.query?.node || this.$route.query?.node_id || ''
      }
      this.$router.push({
-        query: { _platform: createProps.platform, _type: createProps.type, _category: createProps.category, _node: createProps.node }
+        query: {
+          _platform: createProps.platform,
+          _type: createProps.type,
+          _category: createProps.category,
+          _node: createProps.node
+        }
      })
      this.$store.dispatch('common/setDrawerActionMeta', {
        action: 'create',
--- a/src/views/assets/Asset/AssetList/components/const.js
+++ b/src/views/assets/Asset/AssetList/components/const.js
@ -122,7 +122,7 @@ export function getDefaultConfig(vm) {
    columnsExclude: ['spec_info', 'auto_config'],
    columnsShow: {
      min: ['name', 'address', 'actions'],
-      default: [
+      default: vm.defaultColumns || [
        'name', 'address', 'accounts_amount', 'platform',
        'connectivity', 'actions'
      ]
--- a/src/views/assets/Domain/DomainDetail/AssetList.vue
+++ b/src/views/assets/Domain/DomainDetail/AssetList.vue
@ -1,16 +1,20 @@
 <template>
  <div>
-    <BaseList ref="AssetBaseList" v-bind="tableConfig" />
-    <AddAssetDialog :object="object" :setting="AddAssetSetting" @close="handleAddAssetDialogClose" />
+    <TwoCol>
+      <BaseList ref="AssetBaseList" v-bind="tableConfig" />
+    </TwoCol>
+    <AddAssetDialog :object="object" :setting="addAssetSetting" @close="handleAddAssetDialogClose" />
  </div>
 </template>

 <script>
 import BaseList from '../../Asset/AssetList/components/BaseList'
 import AddAssetDialog from '@/views/assets/Domain/components/AddAssetDialog.vue'
+import TwoCol from '@/layout/components/Page/TwoColPage.vue'

 export default {
  components: {
+    TwoCol,
    AddAssetDialog,
    BaseList
  },
@ -25,7 +29,7 @@ export default {
    return {
      tableConfig: {
        category: 'all',
-        url: `/api/v1/assets/assets/?domain=${this.$route.params.id}&exclude_platform=Gateway`,
+        url: `/api/v1/assets/assets/?domain=${this.object.id}&exclude_platform=Gateway`,
        tableConfig: {
          columnsMeta: {
            actions: {
@ -48,7 +52,7 @@ export default {
              title: this.$t('Add'),
              type: 'primary',
              callback: function() {
-                this.AddAssetSetting.AddAssetDialogVisible = true
+                this.addAssetSetting.addAssetDialogVisible = true
              }.bind(this)
            }
          ]
@ -78,14 +82,14 @@ export default {
          }
        ]
      },
-      AddAssetSetting: {
-        AddAssetDialogVisible: false
+      addAssetSetting: {
+        addAssetDialogVisible: false
      }
    }
  },
  methods: {
    handleAddAssetDialogClose() {
-      this.AddAssetSetting.AddAssetDialogVisible = false
+      this.addAssetSetting.addAssetDialogVisible = false
      this.reloadTable()
    },
    removeAsset(rows) {
--- a/src/views/assets/Domain/DomainDetail/GatewayList.vue
+++ b/src/views/assets/Domain/DomainDetail/GatewayList.vue
@ -46,7 +46,7 @@ export default {
        columnsShow: {
          min: ['name', 'actions'],
          default: [
-            'name', 'address', 'protocols',
+            'name', 'address',
            'connectivity', 'actions'
          ]
        },
--- a/src/views/assets/Domain/components/AddAssetDialog.vue
+++ b/src/views/assets/Domain/components/AddAssetDialog.vue
@ -1,15 +1,16 @@
 <template>
  <Dialog
-    v-if="setting.AddAssetDialogVisible"
+    v-if="setting.addAssetDialogVisible"
    :destroy-on-close="true"
+    :modal="false"
    :show-cancel="false"
    :show-confirm="false"
    :title="$tc('AddAssetInDomain')"
-    :visible.sync="setting.AddAssetDialogVisible"
+    :visible.sync="setting.addAssetDialogVisible"
    after
    custom-class="asset-select-dialog"
    top="15vh"
-    width="50vw"
+    width="600px"
  >
    <GenericCreateUpdateForm
      v-bind="formConfig"
@ -20,7 +21,7 @@
 <script>
 import Dialog from '@/components/Dialog'
 import { GenericCreateUpdateForm } from '@/layout/components'
-import AssetSelect from '@/components/Apps/AssetSelect/index.vue'
+import { Select2 } from '@/components'

 export default {
  components: {
@ -31,7 +32,7 @@ export default {
    setting: {
      type: Object,
      default: () => {
-        return { AddAssetDialogVisible: false }
+        return { addAssetDialogVisible: false }
      }
    },
    object: {
@ -58,12 +59,12 @@ export default {
        fields: ['assets'],
        fieldsMeta: {
          assets: {
-            type: 'assetSelect',
-            component: AssetSelect,
-            label: this.$t('Asset'),
+            label: this.$t('Assets'),
+            component: Select2,
+            type: 'select2',
            el: {
              value: [],
-              baseUrl: '/api/v1/assets/assets/?domain_enabled=true',
+              url: '/api/v1/assets/assets/?domain_enabled=true',
              treeUrlQuery: {
                domain_enabled: true
              },
@ -86,7 +87,7 @@ export default {
  },
  methods: {
    onSubmitSuccess(res) {
-      this.setting.AddAssetDialogVisible = false
+      this.setting.addAssetDialogVisible = false
      this.$emit('close', res)
    }
  }
@ -95,7 +96,6 @@ export default {

 <style lang="less" scoped>
 .dialog ::v-deep form {
-  padding: 0 40px;
 }

 .dialog ::v-deep .el-dialog__footer {
--- a/src/views/assets/Domain/components/AddGatewayDialog.vue
+++ b/src/views/assets/Domain/components/AddGatewayDialog.vue
@ -92,7 +92,6 @@ export default {

 <style lang="less" scoped>
 .dialog ::v-deep form {
-  padding: 0 40px;
 }

 .dialog ::v-deep .el-dialog__footer {
--- a/src/views/assets/Platform/PlatformDetail/Assets.vue
+++ b/src/views/assets/Platform/PlatformDetail/Assets.vue
@ -1,13 +1,17 @@
 <template>
-  <BaseList v-bind="config" />
+  <TwoCol>
+    <BaseList v-bind="config" />
+  </TwoCol>
 </template>

 <script>
 import BaseList from '../../Asset/AssetList/components/BaseList'
 import { DetailFormatter } from '@/components/Table/TableFormatters'
+import TwoCol from '@/layout/components/Page/TwoColPage.vue'

 export default {
  components: {
+    TwoCol,
    BaseList
  },
  props: {
@ -22,7 +26,14 @@ export default {
      config: {
        category: 'all',
        url: `/api/v1/assets/assets/?platform=${this.object.id}`,
+        defaultColumns: [
+          'name', 'address'
+        ],
        tableConfig: {
+          columnsShow: {
+            min: ['name'],
+            default: ['name']
+          },
          columnsMeta: {
            name: {
              formatter: DetailFormatter,
--- a/src/views/settings/Applet/AppletHost/AppletHostDetail/Detail.vue
+++ b/src/views/settings/Applet/AppletHost/AppletHostDetail/Detail.vue
@ -165,7 +165,7 @@ export default {
        url: `/api/v1/assets/assets/${this.object.id}/`,
        object: this.object,
        nested: 'spec_info',
-        showUndefine: false,
+        showUndefined: false,
        excludes: ['spec_info.script']
      },
      detailInfoConfig: {
@ -173,7 +173,7 @@ export default {
        title: this.$t('HardwareInfo'),
        object: this.object,
        nested: 'info',
-        showUndefine: false
+        showUndefined: false
      }
    }
  },
--- a/src/views/users/Group/UserGroupDetail/GroupUser.vue
+++ b/src/views/users/Group/UserGroupDetail/GroupUser.vue
@ -1,16 +1,19 @@
 <template>
-  <TwoCol>
-    <template>
-      <GenericListTable
-        ref="listTable"
-        :header-actions="headerActions"
-        :table-config="tableConfig"
-      />
-    </template>
-    <template #right>
-      <RelationCard :key="relationKey" v-bind="relationConfig" @addSuccess="addSuccess" />
-    </template>
-  </TwoCol>
+  <div>
+    <TwoCol>
+      <template>
+        <GenericListTable
+          ref="listTable"
+          :header-actions="headerActions"
+          :table-config="tableConfig"
+        />
+      </template>
+      <template #right>
+        <RelationCard :key="relationKey" v-bind="relationConfig" @addSuccess="addSuccess" />
+      </template>
+    </TwoCol>
+    <TwoCol />
+  </div>
 </template>

 <script>
@ -34,7 +37,6 @@ export default {
    }
  },
  data() {
-    const vm = this
    return {
      quickActions: [
        {
@ -69,14 +71,14 @@ export default {
      tableConfig: {
        url: `/api/v1/users/users/?group_id=${this.object.id}`,
        columns: [
-          'name', 'username', 'is_valid', 'delete_action'
+          'name', 'delete_action'
        ],
        columnsMeta: {
          name: {
            formatter: DetailFormatter,
            formatterArgs: {
-              route: 'UserDetail',
-              can: vm.$hasPerm('user.view_user')
+              can: false,
+              getTitle: ({ row }) => row.name + '(' + row.username + ')'
            }
          },
          delete_action: {
--- a/src/views/users/User/components/InviteUsersDialog.vue
+++ b/src/views/users/User/components/InviteUsersDialog.vue
@ -94,7 +94,6 @@ export default {

 <style lang="less" scoped>
 .dialog ::v-deep form {
-  padding: 0 40px;
 }

 .dialog ::v-deep .el-dialog__footer {