perf: 优化 tab detail 中的一些问题

src/components/Table/DataTable/compenents/el-data-table/el-data-table.vue

@@ -1133,7 +1133,7 @@ export default {
      * @public
      */
     clearSelection() {
-      return this.selectStrategy.clearSelection()
+      return this.selectStrategy?.clearSelection()
     },
     // 弹窗相关
     // 除非树形结构在操作列点击新增, 否则 row 是 MouseEvent

src/components/Table/DataTable/compenents/el-data-table/utils/select-strategy.js

@@ -13,15 +13,28 @@ class StrategyAbstract {
     this.onSelect = this.onSelect.bind(this)
     this.onSelectAll = this.onSelectAll.bind(this)
   }
+
   get elTable() {
     return this.elDataTable.$refs.table
   }
-  onSelectionChange() {}
+
-  onSelect() {}
+  onSelectionChange() {
-  onSelectAll() {}
+  }
-  toggleRowSelection() {}
+
-  clearSelection() {}
+  onSelect() {
-  updateElTableSelection() {}
+  }
+
+  onSelectAll() {
+  }
+
+  toggleRowSelection() {
+  }
+
+  clearSelection() {
+  }
+
+  updateElTableSelection() {
+  }
 }
 
 /**
@@ -34,14 +47,16 @@ class StrategyNormal extends StrategyAbstract {
   onSelectionChange(val) {
     this.elDataTable.selected = val
   }
+
   /**
    * toggleRowSelection和clearSelection的表现与el-table一致
    */
   toggleRowSelection(...args) {
     return this.elTable.toggleRowSelection(...args)
   }
+
   clearSelection() {
-    return this.elTable.clearSelection()
+    return this.elTable?.clearSelection()
   }
 }
 
@@ -65,6 +80,7 @@ class StrategyPersistSelection extends StrategyAbstract {
     const isChosen = selection.indexOf(row) > -1
     this.toggleRowSelection(row, isChosen)
   }
+
   /**
    * 用户切换当前页的多选
    */
@@ -85,7 +101,7 @@ class StrategyPersistSelection extends StrategyAbstract {
     // 判断是全选还是取消全选
     const shouldSelectAll = currentPageSelectedCount < selectableRows.length
 
-    this.elTable.clearSelection()
+    this.elTable?.clearSelection()
 
     if (shouldSelectAll) {
       selectableRows.forEach(row => {
@@ -112,6 +128,7 @@ class StrategyPersistSelection extends StrategyAbstract {
 
     this.elDataTable.$emit('selection-change', this.elDataTable.selected)
   }
+
   /**
    * toggleRowSelection和clearSelection管理elDataTable的selected数组
    * 记得最后要将状态同步到el-table中
@@ -133,10 +150,12 @@ class StrategyPersistSelection extends StrategyAbstract {
     this.elDataTable.$emit('toggle-row-selection', isSelected, row)
     this.updateElTableSelection()
   }
+
   clearSelection() {
     this.elDataTable.selected = []
     this.updateElTableSelection()
   }
+
   /**
    * 将selected状态同步到el-table中
    */
@@ -144,7 +163,7 @@ class StrategyPersistSelection extends StrategyAbstract {
     const { data, id, selected } = this.elDataTable
     const selectedIds = new Set(selected.map(r => r[id]))
 
-    this.elTable.clearSelection()
+    this.elTable?.clearSelection()
 
     data.forEach(row => {
       const shouldBeSelected = selectedIds.has(row[id])

src/components/Table/DataTable/index.vue

@@ -129,7 +129,7 @@ export default {
   watch: {},
   methods: {
     getList() {
-      this.$refs.table.clearSelection()
+      this.$refs.table?.clearSelection()
       return this.$refs.table.getList()
     },
     getData() {

src/components/Table/TableFormatters/ActionsFormatter.vue

@@ -37,6 +37,22 @@ const defaultUpdateCallback = function({ row, col }) {
   this.$router.push(route)
 }
 
+const defaultViewCallback = function({ row, col }) {
+  const id = row.id
+  let route = { params: { id: id }}
+  const viewRoute = this.colActions.viewRoute
+
+  if (typeof updateRoute === 'object') {
+    route = Object.assign(route, viewRoute)
+  } else if (typeof updateRoute === 'function') {
+    route = viewRoute({ row, col })
+  } else {
+    route.name = viewRoute
+  }
+
+  this.$router.push(route)
+}
+
 const defaultCloneCallback = function({ row, col }) {
   const id = row.id
   let route = { query: { clone_from: id }}
@@ -105,6 +121,7 @@ export default {
           cloneRoute: this.$route.name.replace('List', 'Create'),
           performDelete: defaultPerformDelete,
           onUpdate: defaultUpdateCallback,
+          onView: defaultViewCallback,
           onDelete: defaultDeleteCallback,
           onClone: defaultCloneCallback,
           extraActions: []

src/layout/components/GenericCreateUpdateForm/index.vue

@@ -134,14 +134,7 @@ export default {
     // 获取提交的方法
     submitMethod: {
       type: [Function, String],
-      default: function() {
+      default: null
-        const params = this.$route.params
-        if (params.id) {
-          return 'put'
-        } else {
-          return 'post'
-        }
-      }
     },
     // 获取创建和更新的url function
     getUrl: {
@@ -333,7 +326,10 @@ export default {
       } else {
         this.method = this.submitMethod
       }
-      // console.log('Drawer: ', this.drawer, this.submitMethod)
+      // console.log('Drawer: ', this.drawer, this.submitMethod, this.action)
+      if (!this.drawer && !this.method) {
+        this.method = this.$route.params['id'] ? 'put' : 'post'
+      }
       if (this.drawer && !this.submitMethod) {
         if (this.action === 'clone' || this.action === 'create') {
           this.method = 'post'
@@ -424,6 +420,7 @@ export default {
       if (needGetObjectDetail === null) {
         needGetObjectDetail = this.isUpdateMethod() || this.action === 'clone'
       }
+      // console.log('Get form value: ', needGetObjectDetail, this.needGetObjectDetail, this.isUpdateMethod(), this.action)
       if (!needGetObjectDetail) {
         return Object.assign(this.form, this.initial)
       }

src/views/assets/Asset/AssetList/HostList.vue

@@ -12,7 +12,7 @@
 <script>
 import BaseList from './components/BaseList'
 import { ActionsFormatter } from '@/components/Table/TableFormatters'
-import GatewayDialog from '@/components/Apps/GatewayDialog'
+import GatewayDialog from '@/components/Apps/GatewayTestDialog'
 import { openTaskPage } from '@/utils/jms'
 
 export default {

src/views/assets/Asset/AssetList/components/BaseList.vue

@@ -43,7 +43,7 @@
 import ListTable from '@/components/Table/DrawerListTable'
 import AssetBulkUpdateDialog from './AssetBulkUpdateDialog'
 import PlatformDialog from '../components/PlatformDialog'
-import GatewayDialog from '@/components/Apps/GatewayDialog'
+import GatewayDialog from '@/components/Apps/GatewayTestDialog'
 import AccountDiscoverDialog from './AccountDiscoverDialog.vue'
 import AccountCreateUpdate from '@/components/Apps/AccountListTable/AccountCreateUpdate.vue'
 import { getDefaultConfig } from './const'

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

@@ -13,7 +13,7 @@
 </template>
 
 <script>
-import BaseList from '../../Asset/AssetList/components/BaseList'
+import BaseList from '@/views/assets/Asset/AssetList/components/BaseList'
 import AddAssetDialog from '@/views/assets/Domain/components/AddAssetDialog.vue'
 import TwoCol from '@/layout/components/Page/TwoColPage.vue'
 
@@ -63,6 +63,9 @@ export default {
               callback: () => {
                 this.$route.params.id = this.object.id
                 this.addAssetSetting.addAssetDialogVisible = true
+                setTimeout(() => {
+                  this.$route.params.id = null
+                }, 500)
               }
             }
           ]
@@ -100,6 +103,7 @@ export default {
   methods: {
     handleAddAssetDialogClose() {
       this.addAssetSetting.addAssetDialogVisible = false
+      this.$route.params.id = null
       this.reloadTable()
     },
     removeAsset(rows) {

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

@@ -5,18 +5,18 @@
       :create-drawer="createDrawer"
       :detail-drawer="detailDrawer"
       :header-actions="headerActions"
-      :table-config="tableConfig"
       :resource="$tc('Gateway')"
+      :table-config="tableConfig"
     />
-    <GatewayDialog
+    <GatewayTestDialog
-      :cell="cell"
+      :cell="testConfig.cell"
-      :port="port"
+      :port="testConfig.port"
-      :visible.sync="visible"
+      :visible.sync="testConfig.visible"
     />
     <AddGatewayDialog
-      v-if="AddGatewaySetting.addGatewayDialogVisible"
+      v-if="addGatewaySetting.addGatewayDialogVisible"
       :object="transObject"
-      :setting="AddGatewaySetting"
+      :setting="addGatewaySetting"
       @close="handleAddGatewayDialogClose"
     />
   </TwoCol>
@@ -24,7 +24,7 @@
 
 <script>
 import { GenericListTable } from '@/layout/components'
-import GatewayDialog from '@/components/Apps/GatewayDialog'
+import GatewayTestDialog from '@/components/Apps/GatewayTestDialog'
 import { connectivityMeta } from '@/components/Apps/AccountListTable/const'
 import { ArrayFormatter, ChoicesFormatter, DetailFormatter, TagsFormatter } from '@/components/Table/TableFormatters'
 import AddGatewayDialog from '@/views/assets/Domain/components/AddGatewayDialog'
@@ -34,7 +34,7 @@ export default {
   components: {
     TwoCol,
     GenericListTable,
-    GatewayDialog,
+    GatewayTestDialog,
     AddGatewayDialog
   },
   props: {
@@ -146,7 +146,6 @@ export default {
               ]
             }
           }
-
         }
       },
       headerActions: {
@@ -192,7 +191,7 @@ export default {
               }
 
               vm.$nextTick(() => {
-                this.AddGatewaySetting.addGatewayDialogVisible = true
+                this.addGatewaySetting.addGatewayDialogVisible = true
               })
             }
           }
@@ -205,10 +204,12 @@ export default {
           vm.$refs.ListTable.onCreate()
         }
       },
-      port: 0,
+      testConfig: {
-      cell: '',
+        port: 0,
-      visible: false,
+        visible: false,
-      AddGatewaySetting: {
+        cell: ''
+      },
+      addGatewaySetting: {
         addGatewayDialogVisible: false
       }
     }

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

@@ -25,7 +25,7 @@ export default {
       TaskDetail: {},
       config: {
         activeMenu: 'Detail',
-        url: '/api/v1/assets/domains',
+        url: '/api/v1/assets/domains/',
         submenu: [
           {
             title: this.$t('Basic'),

src/views/perms/AssetPermission/AssetPermissionDetail/AssetPermissionDetail.vue

@@ -57,7 +57,7 @@ export default {
       ],
       url: `/api/v1/perms/asset-permissions/${this.object.id}`,
       detailFields: [
-        'name',
+        'id', 'name',
         {
           key: this.$t('Action'),
           value: this.object.actions,

src/views/perms/AssetPermission/AssetPermissionDetail/index.vue

@@ -41,7 +41,7 @@ export default {
         date_expired: ''
       },
       config: {
-        url: '/api/v1/perms/asset-permissions',
+        url: '/api/v1/perms/asset-permissions/',
         activeMenu: 'AssetPermissionDetail',
         submenu: [
           {

src/views/users/User/UserDetail/UserAssetPermissionRules.vue

@@ -1,7 +1,8 @@
 <template>
   <TwoCol>
-    <ListTable
+    <DrawerListTable
       :create-drawer="createDrawer"
+      :detail-drawer="detailDrawer"
       :header-actions="headerActions"
       :table-config="tableConfig"
     />
@@ -9,7 +10,7 @@
 </template>
 
 <script>
-import { DrawerListTable as ListTable } from '@/components'
+import { DrawerListTable } from '@/components'
 import { AssetPermissionTableMeta, UserAssetPermissionListPageSearchConfigOptions } from '@/views/perms/const'
 import TwoCol from '@/layout/components/Page/TwoColPage.vue'
 
@@ -17,7 +18,7 @@ export default {
   name: 'UserAssetPermission',
   components: {
     TwoCol,
-    ListTable
+    DrawerListTable
   },
   props: {
     object: {
@@ -28,16 +29,16 @@ export default {
   data() {
     return {
       createDrawer: () => import('@/views/perms/AssetPermission/AssetPermissionCreateUpdate'),
+      detailDrawer: () => import('@/views/perms/AssetPermission/AssetPermissionDetail/index.vue'),
       tableConfig: {
         url: `/api/v1/perms/asset-permissions/?user_id=${this.object.id}`,
         hasTree: true,
-        columnsExclude: ['actions'],
         columnsExtra: ['action'],
         columnsShow: {
           min: ['name', 'actions'],
           default: [
-            'name', 'users_amount', 'user_groups_amount', 'assets_amount',
+            'name', 'users_amount', 'user_groups_amount',
-            'nodes_amount', 'accounts', 'actions'
+            'assets_amount', 'nodes_amount', 'accounts', 'actions'
           ]
         },
         columnsMeta: AssetPermissionTableMeta