From 0ca7d3a2ad9b1b733f65a7e4a7a4de8c981202c4 Mon Sep 17 00:00:00 2001 From: ibuler Date: Tue, 7 May 2024 17:30:16 +0800 Subject: [PATCH] =?UTF-8?q?perf:=20=E4=BF=AE=E6=94=B9=E6=88=91=E7=9A=84?= =?UTF-8?q?=E8=B5=84=E4=BA=A7=20table?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Apps/GrantedAssets/index.vue | 23 +- src/components/Cards/DetailCard/auto.vue | 133 +++++++----- src/components/Cards/DetailCard/index.vue | 6 +- .../TableFormatters/AccountInfoFormatter.vue | 16 +- src/layout/components/NavHeader/index.vue | 4 +- src/layout/components/Page/index.vue | 2 +- src/styles/menu.scss | 10 +- src/views/ops/Job/QuickJob.vue | 4 +- .../User/UserDetail/UserGrantedAssets.vue | 4 +- src/views/users/User/UserDetail/UserInfo.vue | 11 +- src/views/workbench/myassets/index.vue | 202 ++++-------------- 11 files changed, 167 insertions(+), 248 deletions(-) diff --git a/src/components/Apps/GrantedAssets/index.vue b/src/components/Apps/GrantedAssets/index.vue index 8a8e435d9..d0edb6ff4 100644 --- a/src/components/Apps/GrantedAssets/index.vue +++ b/src/components/Apps/GrantedAssets/index.vue @@ -33,6 +33,10 @@ export default { vm.tableConfig.url = url } }, + actions: { + type: Object, + default: null + }, getShowUrl: { type: Function, default({ row, col }) { @@ -62,7 +66,7 @@ export default { columnsExclude: ['spec_info'], columnsShow: { min: ['name', 'address', 'accounts'], - default: ['name', 'address', 'platform', 'view_account', 'connectivity'] + default: ['name', 'address', 'platform', 'connectivity', 'view_account', 'actions'] }, columnsMeta: { name: { @@ -71,8 +75,14 @@ export default { route: 'AssetDetail' } }, + labels: { + formatterArgs: { + showEditBtn: false + } + }, actions: { - has: false + // has: this.actions !== null, + ...this.actions }, view_account: { label: this.$t('Account'), @@ -80,6 +90,11 @@ export default { width: '100px' }, connectivity: connectivityMeta + }, + tableAttrs: { + rowClassName({ row }) { + return !row.is_active ? 'row_disabled' : '' + } } }, headerActions: { @@ -102,4 +117,8 @@ export default { diff --git a/src/components/Cards/DetailCard/auto.vue b/src/components/Cards/DetailCard/auto.vue index 6e61f5d8b..a6cf9b555 100644 --- a/src/components/Cards/DetailCard/auto.vue +++ b/src/components/Cards/DetailCard/auto.vue @@ -1,7 +1,7 @@ @@ -59,6 +59,9 @@ export default { }, hasObject() { return Object.keys(this.iObject).length > 0 + }, + validItems() { + return this.items.filter(item => this.isHidden(item)) } }, async mounted() { @@ -82,6 +85,77 @@ export default { } return formatter }, + isHidden(item) { + let has = item.has + if (typeof has === 'function') { + has = has() + } + if (has === undefined) { + has = true + } + return has + }, + parseValue(value, tp) { + if (value === null || value === '') { + value = '-' + } else if (value === 0) { + value = 0 + } else if (tp === 'datetime') { + value = toSafeLocalDateStr(value) + } else if (tp === 'labeled_choice') { + value = value?.['label'] + } else if (tp === 'related_field' || tp === 'nested object' || value?.name) { + value = value?.['name'] + } else if (tp === 'm2m_related_field') { + value = value?.map(item => item['name']).join(', ') + } else if (tp === 'boolean') { + value = value ? this.$t('Yes') : this.$t('No') + } + return value + }, + parseArrayValue(value, excludes, label) { + if (Array.isArray(value)) { + const tp = typeof value[0] + for (const [index, item] of value.entries()) { + let object = {} + if (tp === 'object') { + const firstValue = value[0] + if (firstValue.hasOwnProperty('name')) { + value.forEach(item => { + const fieldName = `${name}.${item.name}` + if (excludes.includes(fieldName)) { + return + } + object = { + key: item.label, + value: item.value + } + }) + } else { + const fieldName = `${name}.${item.name}` + if (excludes.includes(fieldName)) { + continue + } + object = { + key: item.label, + value: item.value + } + } + } else if (tp === 'string') { + object = { + value: value[index] + } + if (index === 0) { + object['key'] = label + } + } + if (index !== value.length - 1) { + object['class'] = 'array-item' + } + this.items.push(object) + } + } + }, async optionAndGenFields() { const data = await this.$store.dispatch('common/getUrlMeta', { url: this.url }) let remoteMeta = data.actions['GET'] || {} @@ -94,6 +168,7 @@ export default { const excludes = (this.excludes || []).concat(defaultExcludes) fields = fields.filter(item => !excludes.includes(item)) const defaultFormatter = this.defaultFormatter(fields) + for (const name of fields) { if (typeof name === 'object') { this.items.push(name) @@ -121,62 +196,10 @@ export default { } if (Array.isArray(value)) { - const tp = typeof value[0] - for (const [index, item] of value.entries()) { - let object = {} - if (tp === 'object') { - const firstValue = value[0] - if (firstValue.hasOwnProperty('name')) { - value.forEach(item => { - const fieldName = `${name}.${item.name}` - if (excludes.includes(fieldName)) { - return - } - object = { - key: item.label, - value: item.value - } - }) - } else { - const fieldName = `${name}.${item.name}` - if (excludes.includes(fieldName)) { - continue - } - object = { - key: item.label, - value: item.value - } - } - } else if (tp === 'string') { - object = { - value: value[index] - } - if (index === 0) { - object['key'] = label - } - } - if (index !== value.length - 1) { - object['class'] = 'array-item' - } - this.items.push(object) - } + this.parseArrayValue(value, excludes, label) continue } - if (value === null || value === '') { - value = '-' - } else if (value === 0) { - value = 0 - } else if (fieldMeta.type === 'datetime') { - value = toSafeLocalDateStr(value) - } else if (fieldMeta.type === 'labeled_choice') { - value = value?.['label'] - } else if (fieldMeta.type === 'related_field' || fieldMeta.type === 'nested object' || value?.name) { - value = value?.['name'] - } else if (fieldMeta.type === 'm2m_related_field') { - value = value?.map(item => item['name']).join(', ') - } else if (fieldMeta.type === 'boolean') { - value = value ? this.$t('Yes') : this.$t('No') - } + value = this.parseValue(value, fieldMeta.type) if (value === undefined) { if (this.showUndefine) { diff --git a/src/components/Cards/DetailCard/index.vue b/src/components/Cards/DetailCard/index.vue index 43a47e876..de4dc1923 100644 --- a/src/components/Cards/DetailCard/index.vue +++ b/src/components/Cards/DetailCard/index.vue @@ -85,13 +85,8 @@ export default { } } - &:hover { - } - >>> .el-form-item__label { padding-right: 8%; - //white-space: nowrap; - //text-overflow: ellipsis; overflow: hidden; span { @@ -102,6 +97,7 @@ export default { >>> .el-form-item__content { font-size: 13px; + line-height: 40px; } >>> .el-tag--mini { diff --git a/src/components/Table/TableFormatters/AccountInfoFormatter.vue b/src/components/Table/TableFormatters/AccountInfoFormatter.vue index e51138e46..ee4e60a94 100644 --- a/src/components/Table/TableFormatters/AccountInfoFormatter.vue +++ b/src/components/Table/TableFormatters/AccountInfoFormatter.vue @@ -6,11 +6,14 @@ @show="getAsyncItems" >
+
+ {{ $t('No accounts') }} +
{{ account.name }}({{ account.username }})
- {{ $t('View') }} + {{ $t('View') }} @@ -34,7 +37,7 @@ export default { }, methods: { async getAsyncItems() { - const userId = this.$route.params.id + const userId = this.$route.params.id || 'self' const url = `/api/v1/perms/users/${userId}/assets/${this.row.id}` this.$axios.get(url).then(res => { this.accountData = res?.permed_accounts || [] @@ -48,6 +51,7 @@ export default { .detail-content { max-height: 150px; overflow-y: auto; + min-width: 300px; } .detail-item { @@ -59,4 +63,12 @@ export default { background-color: #F5F7FA; } } + +.el-button--text { + color: var(--color-link); + + &:hover { + color: var(--color-link); + } +} diff --git a/src/layout/components/NavHeader/index.vue b/src/layout/components/NavHeader/index.vue index 3b60c0003..4a2ebce6a 100644 --- a/src/layout/components/NavHeader/index.vue +++ b/src/layout/components/NavHeader/index.vue @@ -246,11 +246,11 @@ export default { .organization { border-radius: 3px; - background-color: rgba(255, 255, 255, .15); + background-color: rgba(0, 0, 0, .12); padding-left: 10px !important; &:hover { - background-color: rgba(0, 0, 0, .12); + background-color: rgba(0, 0, 0, .18); } } diff --git a/src/layout/components/Page/index.vue b/src/layout/components/Page/index.vue index 62cf2a71e..c4dccd439 100644 --- a/src/layout/components/Page/index.vue +++ b/src/layout/components/Page/index.vue @@ -98,7 +98,7 @@ export default { } .page-content { - height: calc(100% - 90px); + height: calc(100% - 10px); overflow-x: hidden; overflow-y: auto; } diff --git a/src/styles/menu.scss b/src/styles/menu.scss index 6450dc1be..bf37a8fa9 100644 --- a/src/styles/menu.scss +++ b/src/styles/menu.scss @@ -31,11 +31,7 @@ .el-menu-item, .el-submenu-sidebar .el-menu-item { background-color: $subMenuBg; color: $menuText; - list-style: circle inside; - - span { - //padding-left: 10px; - } + list-style: disc inside; &.submenu-title-noDropdown { list-style: none; @@ -56,10 +52,6 @@ color: $subMenuActiveText; list-style-type: disc; } - - i { - //color: $menuText; - } } i.fa { diff --git a/src/views/ops/Job/QuickJob.vue b/src/views/ops/Job/QuickJob.vue index 2592a1cdf..0d8890082 100644 --- a/src/views/ops/Job/QuickJob.vue +++ b/src/views/ops/Job/QuickJob.vue @@ -200,10 +200,10 @@ export default { label: 'PostgreSQL', value: 'postgresql' }, { - label: 'SQL Server', value: 'sqlserver' + label: 'SQLServer', value: 'sqlserver' }, { - label: 'HUAWEI', value: 'huawei' + label: 'CloudEngine', value: 'huawei' } ], callback: (option) => { diff --git a/src/views/users/User/UserDetail/UserGrantedAssets.vue b/src/views/users/User/UserDetail/UserGrantedAssets.vue index 4c7f4ebd9..0bcfccdf7 100644 --- a/src/views/users/User/UserDetail/UserGrantedAssets.vue +++ b/src/views/users/User/UserDetail/UserGrantedAssets.vue @@ -18,8 +18,8 @@ export default { }, data() { return { - treeUrl: `/api/v1/perms/users/${this.object.id}/nodes/children/tree/?cache_policy=1`, - tableUrl: `/api/v1/perms/users/${this.object.id}/assets/?cache_policy=1&all=1` + treeUrl: `/api/v1/perms/users/${this.object.id}/nodes/children/tree/`, + tableUrl: `/api/v1/perms/users/${this.object.id}/assets/?all=1` } } } diff --git a/src/views/users/User/UserDetail/UserInfo.vue b/src/views/users/User/UserDetail/UserInfo.vue index caebe2390..9d6c7e9bd 100644 --- a/src/views/users/User/UserDetail/UserInfo.vue +++ b/src/views/users/User/UserDetail/UserInfo.vue @@ -202,6 +202,9 @@ export default { key: this.$t('OrgsAndRoles'), has: this.$store.getters.currentOrgIsRoot, formatter: (item, val) => { + if (!this.$store.getters.currentOrgIsRoot) { + return '' + } const doms = [] const orgsRoles = this.object.orgs_roles const allowKeyMaxLength = 50 @@ -211,14 +214,14 @@ export default { prettyKey = key.substring(0, allowKeyMaxLength - 3) + '...' } const item = prettyKey + ': ' + value.join(', ') - doms.push([item,
]) + doms.push([item,
]) }) return
{doms}
} }, - 'mfa_level', 'source', - 'wecom_id', 'dingtalk_id', 'feishu_id', - 'mfa_level', 'source', 'created_by', 'date_joined', 'date_expired', + 'wecom_id', 'dingtalk_id', 'feishu_id', 'mfa_level', + 'source', 'labels', + 'created_by', 'date_joined', 'date_expired', 'date_password_last_updated', 'last_login', 'comment' ], relationConfig: { diff --git a/src/views/workbench/myassets/index.vue b/src/views/workbench/myassets/index.vue index 17f2e6b99..6c70d3d66 100644 --- a/src/views/workbench/myassets/index.vue +++ b/src/views/workbench/myassets/index.vue @@ -1,178 +1,54 @@