refactor: refs #7553 modified QDrawer and table columns

src/pages/Ticket/Card/TicketVolume.vue

@@ -1,11 +1,10 @@
 <script setup>
-import { ref, computed, onMounted, onUnmounted, watch, nextTick } from 'vue';
+import { ref, computed, onUnmounted, watch, nextTick } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
 
 import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
 import FetchedTags from 'components/ui/FetchedTags.vue';
-import RightMenu from 'src/components/common/RightMenu.vue';
 import FetchData from 'components/FetchData.vue';
 
 import { useStateStore } from 'stores/useStateStore';
@@ -42,28 +41,36 @@ const columns = computed(() => [
         align: 'left',
         label: t('volume.item'),
         name: 'itemFk',
+        chip: {
+            condition: () => true,
+        },
+        isId: true,
     },
     {
         align: 'left',
         label: t('volume.description'),
         name: 'concept',
         columnClass: 'expand',
+        cardVisible: true,
     },
     {
         align: 'left',
         label: t('volume.packingType'),
         name: 'itemPackingTypeFk',
+        cardVisible: true,
         format: (row, dashIfEmpty) => dashIfEmpty(row.item.itemPackingTypeFk),
     },
     {
         align: 'left',
         label: t('volume.quantity'),
         name: 'quantity',
+        cardVisible: true,
     },
     {
         align: 'left',
         label: t('volume.volumeQuantity'),
         name: 'volume',
+        cardVisible: true,
     },
 ]);
 
@@ -86,10 +93,6 @@ const applyVolumes = async (salesData) => {
     }
 };
 
-onMounted(() => {
-    stateStore.rightDrawer = true;
-});
-
 onUnmounted(() => (stateStore.rightDrawer = false));
 </script>
 
@@ -101,8 +104,12 @@ onUnmounted(() => (stateStore.rightDrawer = false));
         @on-fetch="(data) => applyVolumes(data)"
         auto-load
     />
-    <RightMenu v-if="packingTypeVolume.length">
-        <template #right-panel>
+    <QDrawer
+        v-if="packingTypeVolume.length"
+        side="right"
+        :width="270"
+        v-model="stateStore.rightDrawer"
+    >
         <QCard
             v-for="(packingType, index) in packingTypeVolume"
             :key="index"
@@ -121,8 +128,8 @@ onUnmounted(() => (stateStore.rightDrawer = false));
                 <span> {{ t('volume.volume') }}: {{ packingType.volume }} </span>
             </QCardSection>
         </QCard>
-        </template>
-    </RightMenu>
+    </QDrawer>
+
     <VnTable
         ref="tableRef"
         data-key="TicketVolume"