feat: #6321 replace dialog into layout

src/pages/Ticket/Negative/TicketLackList.vue

@@ -4,6 +4,7 @@ import { useI18n } from 'vue-i18n';
 import { useStateStore } from 'stores/useStateStore';
 import VnPaginate from 'components/ui/VnPaginate.vue';
 import TicketLackFilter from 'pages/Ticket/Negative/TicketLackFilter.vue';
+import TicketLackDetail from 'pages/Ticket/Negative/TicketLackDetail.vue';
 // import TicketLackDialogProxy from 'src/pages/Ticket/Negative/TicketLackDialogProxy.vue';
 import NegativeOriginDialog from 'pages/Ticket/Negative/NegativeOriginDialog.vue';
 import TotalNegativeOriginDialog from 'pages/Ticket/Negative/TotalNegativeOriginDialog.vue';
@@ -23,13 +24,8 @@ import { useRoute, useRouter } from 'vue-router';
 
 const route = useRoute();
 const router = useRouter();
-const viewSummary = ({ itemFk: id }) => {
+const viewSummary = async (row) => {
-    router.push({
+    currentRow.value = row;
-        name: 'TicketLackCard',
-        params: {
-            id: '1',
-        },
-    });
 };
 const originDialogRef = ref();
 const totalNegativeDialogRef = ref();
@@ -117,7 +113,18 @@ const columns = computed(() => [
         <VnSubToolbar class="bg-vn-dark justify-end">
             <template #st-actions>
                 <!-- <div class="flex items-center q-ml-lg" style="column-gap: 1px"> -->
-                <QBtnGroup push style="column-gap: 1px">
+                <QBtnGroup v-if="currentRow" push style="column-gap: 1px"
+                    ><QBtn
+                        :label="t('globals.cancel')"
+                        @click="currentRow = null"
+                        color="primary"
+                        flat
+                        icon="close"
+                    >
+                        <QTooltip>{{ t('negative.totalNegative') }}</QTooltip>
+                    </QBtn></QBtnGroup
+                >
+                <QBtnGroup push style="column-gap: 1px" v-if="!currentRow">
                     <QBtn
                         color="primary"
                         :disable="!selectedRows?.length"
@@ -137,7 +144,7 @@ const columns = computed(() => [
                 <!-- </div> -->
             </template>
         </VnSubToolbar>
-        <div class="list">
+        <div v-show="!currentRow" class="list">
             <VnPaginate data-key="NegativeList" :url="`Tickets/itemLack`" auto-load>
                 <template #body="{ rows }">
                     <QTable
@@ -206,6 +213,9 @@ const columns = computed(() => [
                 </template>
             </VnPaginate>
         </div>
+        <div v-if="currentRow" class="list">
+            <TicketLackDetail :id="currentRow?.itemFk"></TicketLackDetail>
+        </div>
         <!--
         <TicketLackDialogProxy
             ref="dialogRef"

src/router/modules/ticket.js

@@ -39,14 +39,6 @@ export default {
                     },
                     component: () =>
                         import('src/pages/Ticket/Negative/TicketLackList.vue'),
-                    children: [
-                        {
-                            name: 'TicketLackCard',
-                            path: ':id/edit',
-                            component: () =>
-                                import('src/pages/Ticket/Negative/TicketLackDetail.vue'),
-                        },
-                    ],
                 },
                 {
                     name: 'TicketCreate',