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,28 +104,32 @@ onUnmounted(() => (stateStore.rightDrawer = false));
         @on-fetch="(data) => applyVolumes(data)"
         auto-load
     />
-    <RightMenu v-if="packingTypeVolume.length">
-        <template #right-panel>
-            <QCard
-                v-for="(packingType, index) in packingTypeVolume"
-                :key="index"
-                class="q-pa-md q-mb-md q-ma-md color-vn-text"
-                bordered
-                flat
-                style="border-color: black"
-            >
-                <QCardSection class="column items-center" horizontal>
-                    <span>
-                        {{ t('volume.type') }}:
-                        {{ dashIfEmpty(packingType.description) }}
-                    </span>
-                </QCardSection>
-                <QCardSection class="column items-center" horizontal>
-                    <span> {{ t('volume.volume') }}: {{ packingType.volume }} </span>
-                </QCardSection>
-            </QCard>
-        </template>
-    </RightMenu>
+    <QDrawer
+        v-if="packingTypeVolume.length"
+        side="right"
+        :width="270"
+        v-model="stateStore.rightDrawer"
+    >
+        <QCard
+            v-for="(packingType, index) in packingTypeVolume"
+            :key="index"
+            class="q-pa-md q-mb-md q-ma-md color-vn-text"
+            bordered
+            flat
+            style="border-color: black"
+        >
+            <QCardSection class="column items-center" horizontal>
+                <span>
+                    {{ t('volume.type') }}:
+                    {{ dashIfEmpty(packingType.description) }}
+                </span>
+            </QCardSection>
+            <QCardSection class="column items-center" horizontal>
+                <span> {{ t('volume.volume') }}: {{ packingType.volume }} </span>
+            </QCardSection>
+        </QCard>
+    </QDrawer>
+
     <VnTable
         ref="tableRef"
         data-key="TicketVolume"