feat: #6321 new route

src/pages/Ticket/Negative/TicketLackDialogProxy.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { toRefs, ref } from 'vue';
-import TicketLackDialog from './TicketLackDialog.vue';
+import TicketLackDetail from './TicketLackDetail.vue';
 import { useSession } from 'src/composables/useSession';
 import { useI18n } from 'vue-i18n';
 
@@ -28,43 +28,38 @@ async function splitSelected() {
 }
 </script>
 <template>
-    <QDialog
-        ref="dialogLackRef"
-        full-width
-        @before-show="() => (hasRowsSelected = false)"
-    >
-        <QCard class="q-pa-sm">
-            <QCardSection class="row items-center q-pb-none">
-                <QImg
-                    :src="`/api/Images/catalog/50x50/${ticket.itemFk}/download?access_token=${token}`"
-                    spinner-color="primary"
-                    :ratio="1"
-                    height="50px"
-                    width="50px"
-                    class="image remove-bg"
-                />
+    <QCard class="q-pa-sm">
+        <QCardSection class="row items-center q-pb-none">
+            <QImg
+                :src="`/api/Images/catalog/50x50/${ticket.itemFk}/download?access_token=${token}`"
+                spinner-color="primary"
+                :ratio="1"
+                height="50px"
+                width="50px"
+                class="image remove-bg"
+            />
 
-                <span class="text-h6 text-grey">{{ ticket.longName }}</span>
-                <QSpace />
-                <QBtn
-                    round
-                    color="primary"
-                    @click="splitSelected()"
-                    :disabled="!hasRowsSelected"
-                >
-                    <QIcon name="call_split"></QIcon>
-                    <QTooltip>
-                        {{ t('globals.split') }}
-                    </QTooltip>
-                </QBtn>
-                <QBtn icon="close" flat round dense v-close-popup />
-            </QCardSection>
-            <QCardSection class="row items-center">
-                <TicketLackDialog
-                    ref="ticketRef"
-                    :id="ticket.itemFk"
-                    @selection="(rows) => (hasRowsSelected = rows.length > 0)"
-                /> </QCardSection></QCard
-    ></QDialog>
+            <span class="text-h6 text-grey">{{ ticket.longName }}</span>
+            <QSpace />
+            <QBtn
+                round
+                color="primary"
+                @click="splitSelected()"
+                :disabled="!hasRowsSelected"
+            >
+                <QIcon name="call_split"></QIcon>
+                <QTooltip>
+                    {{ t('globals.split') }}
+                </QTooltip>
+            </QBtn>
+            <QBtn icon="close" flat round dense v-close-popup />
+        </QCardSection>
+        <QCardSection class="row items-center">
+            <TicketLackDetail
+                ref="ticketRef"
+                :id="ticket.itemFk"
+                @selection="(rows) => (hasRowsSelected = rows.length > 0)"
+            /> </QCardSection
+    ></QCard>
 </template>
 <i18n> </i18n>

src/pages/Ticket/Negative/TicketLackList.vue

@@ -4,7 +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 TicketLackDialogProxy from 'src/pages/Ticket/Negative/TicketLackDialogProxy.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';
 import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
@@ -19,10 +19,17 @@ const showNegativeOriginDialog = ref(false);
 const showTotalNegativeOriginDialog = ref(false);
 const currentRow = ref(null);
 const { dialogRef, onDialogHide } = useDialogPluginComponent();
+import { useRoute, useRouter } from 'vue-router';
 
-const viewSummary = (value) => {
-    showTicketDialog.value = true;
-    currentRow.value = value;
+const route = useRoute();
+const router = useRouter();
+const viewSummary = ({ itemFk: id }) => {
+    router.push({
+        name: 'TicketLackCard',
+        params: {
+            id: '1',
+        },
+    });
 };
 const originDialogRef = ref();
 const totalNegativeDialogRef = ref();
@@ -199,12 +206,12 @@ const columns = computed(() => [
                 </template>
             </VnPaginate>
         </div>
-
+        <!--
         <TicketLackDialogProxy
             ref="dialogRef"
             v-model="showTicketDialog"
             :ticket="currentRow"
-        ></TicketLackDialogProxy>
+        ></TicketLackDialogProxy> -->
         <TotalNegativeOriginDialog
             ref="totalNegativeDialogRef"
             v-model="showTotalNegativeOriginDialog"

src/router/modules/ticket.js

@@ -39,6 +39,14 @@ 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',