fix(tableList): 优化列表组件一些字段的宽度

2026-01-29 21:28:52 +00:00 · 2020-07-27 14:59:24 +08:00
parent c413623a22
commit 2913699597
24 changed files with 88 additions and 40 deletions
--- a/src/components/AssetUserTable/index.vue
+++ b/src/components/AssetUserTable/index.vue
@@ -120,7 +120,7 @@ export default {
          {
            prop: 'ip',
            label: this.$t('assets.ip'),
-            width: 140
+            width: '120px'
          },
          {
            prop: 'username',
@@ -130,7 +130,7 @@ export default {
          {
            prop: 'version',
            label: this.$t('assets.Version'),
-            width: '50px'
+            width: '70px'
          },
          {
            prop: 'date_created',
--- a/src/views/applications/DatabaseApp/DatabaseAppList.vue
+++ b/src/views/applications/DatabaseApp/DatabaseAppList.vue
@@ -18,7 +18,14 @@ export default {
        ],
        columnsMeta: {
          get_type_display: {
-            label: this.$t('applications.type')
+            label: this.$t('applications.type'),
+            width: '80px'
+          },
+          host: {
+            width: '140px'
+          },
+          port: {
+            width: '60px'
          },
          database: {
            showOverflowTooltip: true
--- a/src/views/applications/RemoteApp/RemoteAppList.vue
+++ b/src/views/applications/RemoteApp/RemoteAppList.vue
@@ -21,7 +21,8 @@ export default {
        ],
        columnsMeta: {
          type: {
-            displayKey: 'get_type_display'
+            displayKey: 'get_type_display',
+            width: '140px'
          },
          asset: {
            showOverflowTooltip: true,
--- a/src/views/assets/AdminUser/AdminUserList.vue
+++ b/src/views/assets/AdminUser/AdminUserList.vue
@@ -33,7 +33,8 @@ export default {
          },
          {
            prop: 'assets_amount',
-            label: this.$t('assets.Assets')
+            label: this.$t('assets.Assets'),
+            width: '80px'
          },
          {
            prop: 'comment',
--- a/src/views/assets/CommandFilter/CommandFilterDetail/Rules.vue
+++ b/src/views/assets/CommandFilter/CommandFilterDetail/Rules.vue
@@ -22,6 +22,15 @@ export default {
        url: `/api/v1/assets/cmd-filters/${this.object.id}/rules/`,
        columns: ['type', 'content', 'priority', 'action', 'comment', 'actions'],
        columnsMeta: {
+          type: {
+            width: '100px'
+          },
+          priority: {
+            width: '70px'
+          },
+          action: {
+            width: '90px'
+          },
          content: {
            showOverflowTooltip: true
          },
--- a/src/views/assets/Domain/DomainDetail/GatewayList.vue
+++ b/src/views/assets/Domain/DomainDetail/GatewayList.vue
@@ -25,8 +25,15 @@ export default {
            sortable: 'custom',
            formatter: DisplayFormatter
          },
+          ip: {
+            width: '140px'
+          },
+          port: {
+            width: '60px'
+          },
          protocol: {
-            sortable: 'custom'
+            sortable: 'custom',
+            width: '100px'
          },
          actions: {
            formatterArgs: {
--- a/src/views/assets/Label/LabelList.vue
+++ b/src/views/assets/Label/LabelList.vue
@@ -29,7 +29,8 @@ export default {
          },
          {
            prop: 'asset_count',
-            label: this.$t('assets.Assets')
+            label: this.$t('assets.Assets'),
+            width: '80px'
          },
          {
            prop: 'id',
--- a/src/views/assets/Platform/PlatformList.vue
+++ b/src/views/assets/Platform/PlatformList.vue
@@ -28,7 +28,8 @@ export default {
          {
            prop: 'base',
            label: this.$t('assets.BasePlatform'),
-            sortable: 'custom'
+            sortable: 'custom',
+            width: '140px'
          },
          {
            prop: 'comment',
--- a/src/views/assets/SystemUser/SystemUserList.vue
+++ b/src/views/assets/SystemUser/SystemUserList.vue
@@ -34,15 +34,18 @@ export default {
          {
            prop: 'protocol',
            label: this.$t('assets.Protocol'),
-            sortable: 'custom'
+            sortable: 'custom',
+            width: '100px'
          },
          {
            prop: 'login_mode_display',
-            label: this.$t('assets.LoginModel')
+            label: this.$t('assets.LoginModel'),
+            width: '120px'
          },
          {
            prop: 'assets_amount',
-            label: this.$t('assets.Assets')
+            label: this.$t('assets.Assets'),
+            width: '80px'
          },
          {
            prop: 'comment',
--- a/src/views/audits/CommandExecutionList.vue
+++ b/src/views/audits/CommandExecutionList.vue
@@ -32,6 +32,7 @@ export default {
        ],
        columnsMeta: {
          hosts: {
+            width: '60px',
            formatter: (row, col, cellValue) => {
              const onClick = () => {
                vm.relationDialog.tableConfig.url = setUrlParam(vm.relationDialog.tableConfig.url, 'commandexecution', row.id)
--- a/src/views/audits/FTPLogList.vue
+++ b/src/views/audits/FTPLogList.vue
@@ -38,7 +38,7 @@ export default {
            showOverflowTooltip: true
          },
          operate: {
-            width: '90px'
+            width: '100px'
          },
          is_success: {
            width: '80px'
--- a/src/views/audits/LoginLogList.vue
+++ b/src/views/audits/LoginLogList.vue
@@ -27,17 +27,20 @@ export default {
            showOverflowTooltip: true
          },
          ip: {
-            width: '140px'
+            width: '110px'
+          },
+          city: {
+            width: '90px'
          },
          status: {
-            width: '80px'
+            width: '85px'
          },
          mfa: {
            label: 'MFA',
            width: '80px'
          },
          type: {
-            width: '100px'
+            width: '110px'
          },
          datetime: {
            width: '160px'
--- a/src/views/audits/OperateLogList.vue
+++ b/src/views/audits/OperateLogList.vue
@@ -23,7 +23,8 @@ export default {
            showOverflowTooltip: true
          },
          resource_type: {
-            showOverflowTooltip: true
+            showOverflowTooltip: true,
+            width: '180px'
          },
          resource: {
            showOverflowTooltip: true
@@ -32,7 +33,7 @@ export default {
            width: '160px'
          },
          remote_addr: {
-            width: '140px'
+            width: '120px'
          },
          action: {
            width: '90px'
--- a/src/views/audits/PasswordChangeLogList.vue
+++ b/src/views/audits/PasswordChangeLogList.vue
@@ -26,7 +26,8 @@ export default {
            showOverflowTooltip: true
          },
          remote_addr: {
-            showOverflowTooltip: true
+            showOverflowTooltip: true,
+            width: '120px'
          },
          datetime: {
            width: '180px'
--- a/src/views/ops/TaskDetail/AdhocDetail/AdhocExecutionHistory.vue
+++ b/src/views/ops/TaskDetail/AdhocDetail/AdhocExecutionHistory.vue
@@ -28,7 +28,7 @@ export default {
          stat: {
            label: this.$t('ops.stat'),
            align: 'center',
-            width: '80px',
+            width: '100px',
            formatter: function(row) {
              const summary = <div>
                <span class='text-primary'>{row.stat.success}</span>/
@@ -52,16 +52,17 @@ export default {
          },
          is_finished: {
            align: 'center',
-            width: '200px',
+            width: '100px',
            label: this.$t('ops.isFinished')
          },
          is_success: {
            align: 'center',
-            width: '200px',
+            width: '100px',
            label: this.$t('ops.isSuccess')
          },
          timedelta: {
            label: this.$t('ops.time'),
+            width: '100px',
            formatter: function(row) {
              return row.timedelta.toFixed(2) + 's'
            }
--- a/src/views/ops/TaskDetail/TaskAdhoc.vue
+++ b/src/views/ops/TaskDetail/TaskAdhoc.vue
@@ -34,6 +34,7 @@ export default {
          },
          hosts: {
            label: this.$t('ops.hosts'),
+            width: '80px',
            formatter: (row, column, cellValue) => {
              if (cellValue instanceof Array) {
                return cellValue.length
@@ -43,7 +44,8 @@ export default {
            showOverflowTooltip: true
          },
          pattern: {
-            label: this.$t('ops.pattern')
+            label: this.$t('ops.pattern'),
+            width: '80px'
          },
          run_as: {
            label: this.$t('ops.runAs'),
@@ -67,6 +69,7 @@ export default {
          },
          actions: {
            prop: 'id',
+            width: '80px',
            formatterArgs: {
              hasEdit: false,
              hasDelete: false,
--- a/src/views/ops/TaskDetail/TaskHistory.vue
+++ b/src/views/ops/TaskDetail/TaskHistory.vue
@@ -27,12 +27,13 @@ export default {
        ],
        columnsMeta: {
          date_start: {
-            formatter: (row) => toSafeLocalDateStr(row.date_start)
+            formatter: (row) => toSafeLocalDateStr(row.date_start),
+            width: '160px'
          },
          stat: {
            label: this.$t('ops.stat'),
            align: 'center',
-            width: '80px',
+            width: '100px',
            formatter: function(row) {
              return (
                <div>
@@ -57,16 +58,17 @@ export default {
          },
          is_finished: {
            align: 'center',
-            width: '200px',
+            width: '100px',
            label: this.$t('ops.isFinished')
          },
          is_success: {
            align: 'center',
-            width: '200px',
+            width: '100px',
            label: this.$t('ops.isSuccess')
          },
          timedelta: {
            label: this.$t('ops.time'),
+            width: '100px',
            formatter: function(row) {
              return row.timedelta.toFixed(2) + 's'
            }
--- a/src/views/perms/AssetPermission/AssetPermissionList.vue
+++ b/src/views/perms/AssetPermission/AssetPermissionList.vue
@@ -35,7 +35,7 @@ export default {
          },
          users_amount: {
            label: this.$t('perms.User'),
-            width: '100px',
+            width: '60px',
            formatter: DetailFormatter,
            formatterArgs: {
              routeQuery: {
@@ -55,7 +55,7 @@ export default {
          },
          assets_amount: {
            label: this.$t('perms.Asset'),
-            width: '100px',
+            width: '60px',
            formatter: DetailFormatter,
            formatterArgs: {
              routeQuery: {
@@ -65,7 +65,7 @@ export default {
          },
          nodes_amount: {
            label: this.$t('perms.Node'),
-            width: '100px',
+            width: '60px',
            formatter: DetailFormatter,
            formatterArgs: {
              routeQuery: {
--- a/src/views/sessions/CommandList.vue
+++ b/src/views/sessions/CommandList.vue
@@ -36,7 +36,7 @@ export default {
          },
          risk_level: {
            label: this.$t('sessions.riskLevel'),
-            width: '120px',
+            width: '105px',
            formatter: (row, col, cellValue) => {
              const display = row.risk_level_display
              if (cellValue === 0) {
--- a/src/views/sessions/SessionDetail/SessionCommandList.vue
+++ b/src/views/sessions/SessionDetail/SessionCommandList.vue
@@ -39,6 +39,7 @@ export default {
          },
          timestamp: {
            label: this.$t('sessions.date'),
+            width: '160px',
            sortable: 'custom',
            formatter: function(row) {
              return toSafeLocalDateStr(row.timestamp * 1000)
--- a/src/views/sessions/SessionList/BaseList.vue
+++ b/src/views/sessions/SessionList/BaseList.vue
@@ -36,7 +36,7 @@ export default {
          index: {
            label: this.$t('sessions.id'),
            align: 'center',
-            width: '60px',
+            width: '40px',
            formatter: function(row, column, cellValue, index) {
              const label = index + 1
              const route = { to: { name: 'SessionDetail', params: { id: row.id }}}
@@ -51,18 +51,19 @@ export default {
          },
          command_amount: {
            label: this.$t('sessions.command'),
-            width: '100px'
+            width: '90px'
          },
          system_user: {
-            showOverflowTooltip: true
+            showOverflowTooltip: true,
+            width: '100px'
          },
          login_from: {
            label: this.$t('sessions.loginFrom'),
-            width: '120px',
+            width: '115px',
            showOverflowTooltip: true
          },
          remote_addr: {
-            width: '120px'
+            width: '105px'
          },
          protocol: {
            label: this.$t('sessions.protocol'),
--- a/src/views/sessions/TerminalList.vue
+++ b/src/views/sessions/TerminalList.vue
@@ -32,7 +32,8 @@ export default {
            label: this.$t('sessions.alive')
          },
          session_online: {
-            label: this.$t('sessions.session')
+            label: this.$t('sessions.session'),
+            width: '80px'
          }
        }
      },
--- a/src/views/tickets/TicketListTable.vue
+++ b/src/views/tickets/TicketListTable.vue
@@ -39,13 +39,14 @@ export default {
          {
            prop: 'type_display',
            label: this.$t('tickets.type'),
-            sortable: 'custom'
+            sortable: 'custom',
+            width: '110px'
          },
          {
            prop: 'status',
            label: this.$t('tickets.status'),
            align: 'center',
-            width: '100px',
+            width: '90px',
            sortable: 'custom',
            formatter: row => {
              if (row.status === 'open') {
@@ -58,7 +59,8 @@ export default {
            prop: 'date_created',
            label: this.$t('tickets.date'),
            sortable: 'custom',
-            formatter: (row) => toSafeLocalDateStr(row.date_created)
+            formatter: (row) => toSafeLocalDateStr(row.date_created),
+            width: '160px'
          }
        ]
      },
--- a/src/views/users/Group/UserGroupList.vue
+++ b/src/views/users/Group/UserGroupList.vue
@@ -16,7 +16,8 @@ export default {
        columns: ['name', 'users_amount', 'comment', 'actions'],
        columnsMeta: {
          users_amount: {
-            label: this.$t('users.Users')
+            label: this.$t('users.Users'),
+            width: '120px'
          }
        },
        detailRoute: 'UserGroupDetail'