Add trans detail page router

admin/src/components.d.ts

@@ -22,6 +22,10 @@ declare module '@vue/runtime-core' {
     AMenu: typeof import('ant-design-vue/es')['Menu']
     AMenuItem: typeof import('ant-design-vue/es')['MenuItem']
     AModal: typeof import('ant-design-vue/es')['Modal']
+    APopconfirm: typeof import('ant-design-vue/es')['Popconfirm']
+    ARangePicker: typeof import('ant-design-vue/es')['RangePicker']
+    ASelect: typeof import('ant-design-vue/es')['Select']
+    ASelectOption: typeof import('ant-design-vue/es')['SelectOption']
     ASubMenu: typeof import('ant-design-vue/es')['SubMenu']
     ATable: typeof import('ant-design-vue/es')['Table']
     ATag: typeof import('ant-design-vue/es')['Tag']

admin/src/router/index.ts

@@ -51,7 +51,13 @@ export const allowRouter: Array<IMenubarList> = [
                         //   path: '/admin/global-transactions/unfinished',
                         //   component: Components['UnfinishedTransactions'],
                         //   meta: { title: 'Unfinished Transactions' },
-                    }
+                    }, 
+                    {
+                        name: 'TransactionDetail',
+                        path: '/admin/global-transactions/detail/:gid',
+                        component: Components['DialogTransactionDetail'],
+                        meta: { title: 'Transaction Detail' }
+                    },
                 ]
             },
             {

admin/src/views/Dashboard/GlobalTransactions/AllTransactions.vue

@@ -55,7 +55,7 @@
     </div>
     <a-divider />
     <div>
-        <a-table :columns="columns" :data-source="dataSource" :loading="loading" :pagination="false" :scroll="{ x: true }">
+        <a-table :columns="columns" :data-source="dataSource" :loading="loading" :pagination="false" :scroll="{ x: true }" size="small" >
             <template #bodyCell="{column, record}">
                 <template v-if="column.key === 'status'">
                     <span>
@@ -66,8 +66,9 @@
                     </span>
                 </template>
                 <template v-else-if="column.key === 'action'">
-                    <span>
-                        <a class="mr-2 font-medium" @click="handleTransactionDetail(record.gid)">Detail</a>
+                    <span style="width: 190px; display: block;">
+                        <a class="mr-2 font-medium" @click="handleTransactionDetail(record.gid)">Dialog</a>
+                        <a class="mr-2 font-medium" target="_blank" :href="'./detail/'+record.gid">Page</a>
                         <a-popconfirm
                             title="Force stop it?"
                             ok-text="Yes, stop it"
@@ -98,7 +99,7 @@
 import { forceStopTransaction, IListAllTransactionsReq, listAllTransactions } from '/@/api/api_dtm'
 import { computed, ref } from 'vue-demi'
 import { usePagination } from 'vue-request'
-import DialogTransactionDetail from './_Components/DialogTransactionDetail.vue'
+import DialogTransactionDetail from './DialogTransactionDetail.vue'
 
 const gid = ref('')
 const status = ref('')

admin/src/views/Dashboard/GlobalTransactions/_Components/DialogTransactionDetail.vue → admin/src/views/Dashboard/GlobalTransactions/DialogTransactionDetail.vue

@@ -1,8 +1,8 @@
 <template>
     <div>
-        <a-modal v-model:visible="visible" title="Transaction Detail" width="100%" wrap-class-name="full-modal">
+        <a-modal v-model:visible="visible" :closable="closeable" title="Transaction Detail" width="100%" wrap-class-name="full-modal">
             <template #footer>
-                <a-button type="primary" @click="close">Close</a-button>
+                <a-button type="primary" @click="close" v-if="closeable">Close</a-button>
             </template>            
             <h2>Transaction Info</h2> 
             <a-button type="primary" @click="refresh" :loading="loading" >Refresh</a-button>      
@@ -37,19 +37,21 @@
 import { ref } from 'vue'
 import { getTransaction } from '/@/api/api_dtm'
 import screenfull from '/@/components/Screenfull/index.vue'
+import { useRoute } from 'vue-router';
+import { string } from 'vue-types';
 // import VueJsonPretty from 'vue-json-pretty';
 // import 'vue-json-pretty/lib/styles.css'
+const route = useRoute();
 
 const loading = ref(false)
 const dataSource = ref<Branches[]>([])
 const transaction = ref<Transaction>()
 const visible = ref(false)
 const textVal = ref('')
+const closeable = ref(true)
 
 
-
-let _gid = '';
-
+let _gid = <string>route.params.gid;
 const open = async(gid: string) => {
     _gid = gid;
     loading.value = true;
@@ -60,6 +62,10 @@ const open = async(gid: string) => {
     visible.value = true
     loading.value = false;
 }
+if(_gid) {
+    open(<string>route.params.gid);
+    closeable.value = false;
+}
 
 const close = async() => {    
     visible.value = false;