perf: for perfect drawer create update detail or any

src/components/Table/DrawerListTable/index.vue

@@ -103,11 +103,13 @@ export default {
       }
       const columnsMeta = config.columnsMeta
       for (const value of Object.values(columnsMeta)) {
-        if (
+        const formatter = value?.formatter
-          value.formatter && value.formatter.name === 'AmountFormatter' &&
+        const formatterArgs = value?.formatterArgs
-          value.formatterArgs && value.formatterArgs.drawer !== false
+        // console.log('>>> name: ', key)
-        ) {
+        // console.log('>>> formatter: ', formatter)
-          value.formatterArgs.onClick = this.onDetail
+        const detailFormaters = ['AmountFormatter', 'DetailFormatter']
+        if (formatter && detailFormaters.includes(formatter.name) && formatterArgs.drawer !== false) {
+          formatterArgs.onClick = this.onDetail
         }
       }
       return config
@@ -160,22 +162,35 @@ export default {
           this.$route[key][k] = value[k]
         }
       }
-
       this.drawerComponent = ''
     },
-    getDetailDrawerTitle({ col, row, cellValue, route }) {
+    getDetailDrawerTitle({ col, row, cellValue, payload = {}}) {
+      this.$log.debug('>>> getDetailDrawerTitle: ', col, row, cellValue, payload)
+      const { detailRoute = {}, formatterArgs = {}} = payload
+      const getTitle = formatterArgs.getDrawerTitle || this.getTitle
+      this.$log.debug('>>> getTitle: ', getTitle)
+      if (getTitle && typeof getTitle === 'function') {
+        return getTitle({ col, row, cellValue })
+      }
+      if (formatterArgs.title) {
+        return formatterArgs.title
+      }
+      const resolvedRoute = this.resolveRoute(detailRoute)
       let title = cellValue || row.name
-      const resource = route?.meta?.title || route?.name
+      let resource = resolvedRoute?.meta?.title || resolvedRoute?.name
+      resource = resource.replace('Detail', '').replace('详情', '')
 
       if (resource) {
         title = `${resource}: ${title}`
       }
-
       return title
     },
-    getDefaultTitle({ row, col, cellValue, detailRoute }) {
+    getActionDrawerTitle({ action, row, col, cellValue, payload }) {
+      if (action === 'detail') {
+        return this.getDetailDrawerTitle({ col, row, cellValue, payload })
+      }
+
       let title = this.title
-      let dispatchAction = ''
       if (!title && this.resource) {
         title = this.resource
       }
@@ -187,18 +202,15 @@ export default {
       if (!title) {
         title = this.$t('NoTitle')
       }
-      const action = this.action
+      let actionLabel = ''
       if (action === 'clone' || action === 'create') {
-        dispatchAction = this.$t('Create')
+        actionLabel = this.$t('Create')
       } else if (action === 'update') {
-        dispatchAction = this.$t('Update')
+        actionLabel = this.$t('Update')
       } else if (action === 'detail') {
-        dispatchAction = this.$t('Detail')
+        actionLabel = this.$t('Detail')
-      }
-      title = dispatchAction + this.$t('WordSep') + toLowerCaseExcludeAbbr(title)
-      if (this.action === 'detail') {
-        title = this.getDetailDrawerTitle({ row, col, cellValue, route: detailRoute })
       }
+      title = actionLabel + this.$t('WordSep') + toLowerCaseExcludeAbbr(title)
       return title
     },
     getDefaultDrawer(action) {
@@ -238,14 +250,28 @@ export default {
         return matched[0]
       }
     },
-    getDetailComponent(r) {
+    getDetailComponent({ detailRoute }) {
-      const route = this.resolveRoute(r)
+      const route = this.resolveRoute(detailRoute)
       if (route) {
         return route.components.default
       }
     },
-    async showDrawer(action, { row, col, cellValue, detailRoute }) {
+    getDrawerComponent(action, payload) {
-      this.drawerTitle = this.getDefaultTitle({ row, col, cellValue, detailRoute })
+      switch (action) {
+        case 'create':
+          return this.createDrawer
+        case 'update':
+          return this.updateDrawer || this.createDrawer
+        case 'detail':
+          return this.detailDrawer || this.getDetailComponent(payload)
+        case 'clone':
+          return this.createDrawer || this.getDefaultDrawer('create')
+        default:
+          return this.createDrawer
+      }
+    },
+
+    async showDrawer(action, { row = {}, col = {}, cellValue = '', payload = {}} = {}) {
       try {
         // 1. 先重置状态
         this.drawerVisible = false
@@ -255,17 +281,8 @@ export default {
         await this.$nextTick()
 
         // 3. 设置组件
-        if (action === 'create') {
+        this.drawerComponent = this.getDrawerComponent(action, payload)
-          this.drawerComponent = this.createDrawer
+        this.drawerTitle = this.getActionDrawerTitle({ action, row, col, cellValue, payload })
-        } else if (action === 'update') {
-          this.drawerComponent = this.updateDrawer || this.createDrawer
-        } else if (action === 'detail') {
-          this.drawerComponent = this.detailDrawer || this.getDetailComponent(detailRoute)
-        } else if (action === 'clone') {
-          this.drawerComponent = this.createDrawer || this.getDefaultDrawer('create')
-        } else {
-          this.drawerComponent = this.createDrawer
-        }
 
         // 4. 如果没有组件，尝试获取默认组件
         if (!this.drawerComponent) {
@@ -309,12 +326,24 @@ export default {
       }
       this.$refs.ListTable.reloadTable()
     },
-    async onDetail({ row, col, cellValue, detailRoute }) {
+    async onDetail({ row, col, cellValue, detailRoute, formatterArgs }) {
+      this.$log.debug('>>> onDetail: ', detailRoute, formatterArgs)
       this.$route.params.id = row.id
+      // 因为使用 detail formatter 时，id 可能并非 row 的，比如 execution 的 task id
+      const query = detailRoute?.query || {}
+      const params = detailRoute?.params || {}
+      for (const key in query) {
+        this.$route.query[key] = query[key]
+      }
+      for (const key in params) {
+        this.$route.params[key] = params[key]
+      }
+      // 有可能来自 params 或者 row
+      const id = params.id || row.id
       await this.$store.dispatch('common/setDrawerActionMeta', {
-        action: 'detail', row: row, col: col, id: row.id
+        action: 'detail', row: row, col: col, id: id
       })
-      await this.showDrawer('detail', { row, col, cellValue, detailRoute })
+      await this.showDrawer('detail', { row, col, cellValue, payload: { detailRoute, formatterArgs }})
     },
     async onCreate(meta) {
       if (!meta) {
@@ -322,7 +351,7 @@ export default {
       }
       this.$route.params.id = ''
       await this.$store.dispatch('common/setDrawerActionMeta', { action: 'create', ...meta })
-      await this.showDrawer('create')
+      await this.showDrawer('create', {})
     },
     async onClone({ row, col }) {
       this.$route.params.id = ''

src/components/Table/TableFormatters/DetailFormatter.vue

@@ -90,13 +90,21 @@ export default {
     }
   },
   methods: {
+    getTitle() {
+      return this.formatterArgs.getTitle({
+        col: this.col,
+        row: this.row,
+        cellValue: this.cellValue,
+        index: this.index
+      })
+    },
     handleClick() {
       if (this.formatterArgs.beforeClick) {
         this.formatterArgs.beforeClick(this.callbackArgs)
       }
 
       if (this.formatterArgs.onClick) {
-        return this.formatterArgs.onClick({ ...this.callbackArgs, detailRoute: this.getDetailRoute() })
+        return this.formatterArgs.onClick({ ...this.callbackArgs, detailRoute: this.getDetailRoute(), formatterArgs: this.formatterArgs })
       }
 
       if (this.preventClick) {

src/views/accounts/Automation/BaseExecutionList.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <GenericListTable
+    <DrawerListTable
       :header-actions="headerActions"
       :table-config="tableConfig"
     />
@@ -9,7 +9,7 @@
 </template>
 
 <script>
-import GenericListTable from '@/layout/components/GenericListTable/index.vue'
+import DrawerListTable from '@/components/Table/DrawerListTable/index.vue'
 
 import { openTaskPage } from '@/utils/jms'
 import { DetailFormatter } from '@/components/Table/TableFormatters'
@@ -21,7 +21,7 @@ export default {
   name: 'AccountDiscoverTaskExecutionList',
   components: {
     ReportDialog,
-    GenericListTable
+    DrawerListTable
   },
   props: {
     url: {