feat: refs #7553 refs #7356 added VnTable in TicketVolume & fixed QBadge in summary

src/pages/Ticket/Card/TicketSummary.vue

@@ -137,11 +137,14 @@ async function changeState(value) {
                     :url="ticketUrl + 'basic-data/step-one'"
                     :text="t('globals.summary.basicData')"
                 />
-                <VnLv :label="t('ticket.summary.state')">
+                <VnLv v-if="ticket.ticketState" :label="t('ticket.summary.state')">
                     <template #value>
-                        <QChip :color="ticket.ticketState?.state?.classColor ?? 'dark'">
-                            {{ ticket.ticketState?.state?.name }}
-                        </QChip>
+                        <QBadge
+                            text-color="black"
+                            :color="ticket.ticketState.state.classColor"
+                        >
+                            {{ ticket.ticketState.state.name }}
+                        </QBadge>
                     </template>
                 </VnLv>
                 <VnLv :label="t('ticket.summary.salesPerson')">

src/pages/Ticket/Card/TicketVolume.vue

@@ -11,11 +11,13 @@ import FetchData from 'components/FetchData.vue';
 import { useStateStore } from 'stores/useStateStore';
 import { dashIfEmpty } from 'src/filters';
 import axios from 'axios';
+import VnTable from 'src/components/VnTable/VnTable.vue';
 
 const route = useRoute();
 const stateStore = useStateStore();
 const { t } = useI18n();
 const salesRef = ref(null);
+const tableRef = ref();
 
 watch(
     () => route.params.id,
@@ -34,37 +36,34 @@ const salesFilter = computed(() => ({
 
 const sales = ref([]);
 const packingTypeVolume = ref([]);
-const rows = computed(() => sales.value);
 
 const columns = computed(() => [
     {
+        align: 'left',
         label: t('volume.item'),
-        name: 'item',
-        align: 'left',
+        name: 'itemFk',
     },
     {
+        align: 'left',
         label: t('volume.description'),
-        name: 'description',
-        align: 'left',
+        name: 'concept',
+        columnClass: 'expand',
     },
     {
+        align: 'left',
         label: t('volume.packingType'),
-        name: 'quantity',
-        field: (row) => row.item.itemPackingTypeFk,
-        align: 'left',
-        format: (val) => dashIfEmpty(val),
+        name: 'itemPackingTypeFk',
+        format: (row, dashIfEmpty) => dashIfEmpty(row.item.itemPackingTypeFk),
     },
     {
+        align: 'left',
         label: t('volume.quantity'),
         name: 'quantity',
-        field: 'quantity',
-        align: 'left',
     },
     {
-        label: t('volume.volumeQuantity'),
-        name: 'quantity',
-        field: (row) => row.saleVolume?.volume,
         align: 'left',
+        label: t('volume.volumeQuantity'),
+        name: 'volume',
     },
 ]);
 
@@ -124,30 +123,28 @@ onUnmounted(() => (stateStore.rightDrawer = false));
             </QCard>
         </template>
     </RightMenu>
-    <QTable
-        :rows="rows"
+    <VnTable
+        ref="tableRef"
+        data-key="TicketVolume"
+        :url="`Tickets/${route.params.id}/getSales`"
         :columns="columns"
-        row-key="id"
-        :pagination="{ rowsPerPage: 0 }"
-        class="full-width q-mt-md"
-        :no-data-label="t('globals.noResults')"
+        :right-search="false"
+        :column-search="false"
+        auto-load
     >
-        <template #body-cell-item="{ row }">
-            <QTd>
-                <QBtn flat class="link" @click.stop>
+        <template #column-itemFk="{ row }">
+            <span class="link">
                 {{ row.itemFk }}
                 <ItemDescriptorProxy :id="row.itemFk" />
-                </QBtn>
-            </QTd>
+            </span>
         </template>
-        <template #body-cell-description="{ row }">
-            <QTd>
-                <div class="column">
+        <template #column-concept="{ row }">
             <span>{{ row.item.name }}</span>
-                    <span class="color-vn-label">{{ row.item.subName }}</span>
+            <span class="color-vn-label q-pl-md">{{ row.item.subName }}</span>
             <FetchedTags :item="row.item" :max-length="6" />
-                </div>
-            </QTd>
         </template>
-    </QTable>
+        <template #column-volume="{ rowIndex }">
+            <span>{{ packingTypeVolume?.[rowIndex]?.volume }}</span>
+        </template>
+    </VnTable>
 </template>