src/components/VnTable/VnTable.vue

@@ -314,6 +314,15 @@ function handleOnDataSaved(_, res) {
     if (_.onDataSaved) _.onDataSaved({ CrudModelRef: CrudModelRef.value });
     else $props.create.onDataSaved(_);
 }
+function handleClick(event, btn, row) {
+    if (event.ctrlKey) {
+        event.preventDefault();
+        event.stopPropagation();
+        btn.action(row, event);
+    } else {
+        btn.action(row);
+    }
+}
 </script>
 <template>
     <QDrawer
@@ -534,7 +543,7 @@ function handleOnDataSaved(_, res) {
                             :style="`visibility: ${
                                 (btn.show && btn.show(row)) ?? true ? 'visible' : 'hidden'
                             }`"
-                            @click="btn.action(row)"
+                            @click="handleClick($event, btn, row)"
                         />
                     </QTd>
                 </template>
@@ -648,7 +657,13 @@ function handleOnDataSaved(_, res) {
                                             ? 'text-primary-light'
                                             : 'color-vn-text '
                                     "
-                                    @click="btn.action(row)"
+                                    @click="(evt) => btn.action(row, evt)"
+                                    @click.ctrl="
+                                        (evt) => {
+                                            console.error('ctrl click', btn, evt);
+                                            btn.action(row, '_blank');
+                                        }
+                                    "
                                 />
                             </QCardSection>
                         </QCard>

src/pages/Ticket/TicketList.vue

@@ -1,7 +1,7 @@
 <script setup>
 import axios from 'axios';
 import { computed, ref, onMounted } from 'vue';
-import { useRoute } from 'vue-router';
+import { useRoute, useRouter } from 'vue-router';
 import { useStateStore } from 'stores/useStateStore';
 import { useI18n } from 'vue-i18n';
 import { toDate, toCurrency } from 'src/filters/index';
@@ -16,6 +16,8 @@ import RightMenu from 'src/components/common/RightMenu.vue';
 import TicketFilter from './TicketFilter.vue';
 
 const route = useRoute();
+const router = useRouter();
+
 const { t } = useI18n();
 const { viewSummary } = useSummaryDialog();
 const tableRef = ref();
@@ -136,7 +138,15 @@ const columns = computed(() => [
             {
                 title: t('ticketList.summary'),
                 icon: 'preview',
-                action: (row) => viewSummary(row.id, TicketSummary),
+                action: (row, evt) => {
+                    if (evt && evt.ctrlKey) {
+                        const url = router.resolve({
+                            params: { id: row.id },
+                            name: 'TicketCard',
+                        }).href;
+                        window.open(url, '_blank');
+                    } else viewSummary(row.id, TicketSummary);
+                },
             },
         ],
     },
@@ -252,7 +262,6 @@ onMounted(() => {
         auto-load
     >
         <template #more-create-dialog="{ data }">
-            {{ data }}
             <VnRow>
                 <VnSelect
                     url="Clients"