perf: 优化 detail

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>

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

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;

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 {

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%;

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
   },

src/views/assets/Asset/AssetDetail/AssetCommand.vue

@@ -1,17 +1,13 @@
 <template>
-  <TwoCol>
   <BaseList :asset-id="object.id" :is-page="false" />
-  </TwoCol>
 </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: {

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
       }
     }
   },

src/views/assets/Asset/AssetDetail/PermUser.vue

@@ -1,10 +1,12 @@
 <template>
   <div>
     <TwoCol>
+      <template>
         <ListTable ref="ListTable" :header-actions="headerActions" :table-config="tableConfig" />
-    </TwoCol>
+      </template>
-    <TwoCol>
+      <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',
+          'name', 'username', 'email',
-          'groups_display', 'system_roles', 'org_roles', 'source',
+          'comment', 'created_by'
-          'is_valid', 'login_blocked', 'mfa_enabled',
-          'mfa_force_enabled', 'is_expired',
-          'last_login', 'date_joined', 'date_password_last_updated',
-          'comment', 'created_by', 'actions'
         ],
         columnsShow: {
-          min: ['name', 'username', 'actions'],
+          min: ['name', 'username'],
-          default: [
+          default: ['name', 'username']
-            'name', 'username',
-            'source', 'is_valid', 'actions'
-          ]
         },
         columnsMeta: {
           name: {

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',

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'
       ]

src/views/assets/Domain/DomainDetail/AssetList.vue

@@ -1,16 +1,20 @@
 <template>
   <div>
+    <TwoCol>
       <BaseList ref="AssetBaseList" v-bind="tableConfig" />
-    <AddAssetDialog :object="object" :setting="AddAssetSetting" @close="handleAddAssetDialogClose" />
+    </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: {
+      addAssetSetting: {
-        AddAssetDialogVisible: false
+        addAssetDialogVisible: false
       }
     }
   },
   methods: {
     handleAddAssetDialogClose() {
-      this.AddAssetSetting.AddAssetDialogVisible = false
+      this.addAssetSetting.addAssetDialogVisible = false
       this.reloadTable()
     },
     removeAsset(rows) {

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'
           ]
         },

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',
+            label: this.$t('Assets'),
-            component: AssetSelect,
+            component: Select2,
-            label: this.$t('Asset'),
+            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 {

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 {

src/views/assets/Platform/PlatformDetail/Assets.vue

@@ -1,13 +1,17 @@
 <template>
+  <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,

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
       }
     }
   },

src/views/users/Group/UserGroupDetail/GroupUser.vue

@@ -1,4 +1,5 @@
 <template>
+  <div>
     <TwoCol>
       <template>
         <GenericListTable
@@ -11,6 +12,8 @@
         <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: false,
-              can: vm.$hasPerm('user.view_user')
+              getTitle: ({ row }) => row.name + '(' + row.username + ')'
             }
           },
           delete_action: {

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 {