handle replaceItem

src/pages/Item/components/ItemProposal.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed } from 'vue';
+import { ref, computed, onUnmounted } from 'vue';
 import { useI18n } from 'vue-i18n';
 import VnPaginate from 'components/ui/VnPaginate.vue';
 import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
@@ -28,6 +28,16 @@ const $props = defineProps({
         required: true,
         default: () => {},
     },
+    itemLack: {
+        type: Object,
+        required: true,
+        default: () => {},
+    },
+    replaceAction: {
+        type: Boolean,
+        required: false,
+        default: false,
+    },
     tickets: {
         type: Array,
         required: false,
@@ -173,9 +183,11 @@ async function confirm() {
     // }
     // onDialogOK({ data: true });
     emit('refreshData', { type: 'refresh', itemProposal: proposalSelected.value[0] });
+    proposalSelected.value = null;
+    popupProxyRef.value.hide();
 }
 const { dialogRef, onDialogOK, onDialogCancel } = useDialogPluginComponent();
-
+const popupProxyRef = ref(null);
 // Definir el emisor de eventos
 const emit = defineEmits(['dialogClosed', 'refreshData']);
 
@@ -184,10 +196,12 @@ function onDialogClose() {
     // Emitir el evento personalizado
     emit('dialogClosed', { data: true });
 }
+onUnmounted(() => {});
 </script>
 <template>
     <QPopupProxy ref="popupProxyRef">
         <QCard class="q-pa-lg">
+            <!-- {{ itemLack }} -->
             <QCardSection v-if="false" class="row items-center q-pb-none">
                 <VnLv class="image">
                     <template #label>
@@ -226,7 +240,7 @@ function onDialogClose() {
                     }} -->
                 </span>
             </QCardSection>
-            <QCardActions>
+            <QCardActions v-if="$props.replaceAction">
                 <QBtn
                     :label="t('globals.removeSelection')"
                     color="primary"
@@ -257,7 +271,7 @@ function onDialogClose() {
             <QCardSection class="row items-center justify-center column items-stretch">
                 <!-- <VnRow style="display: flex"> -->
                 <div>
-                    {{ proposalSelected }}
+                    <!-- {{ proposalSelected }} -->
                     <VnPaginate
                         :append="false"
                         data-key="ItemsGetSimilar"
@@ -276,6 +290,7 @@ function onDialogClose() {
                                 :columns="columns"
                                 row-key="id"
                                 selection="single"
+                                disa
                                 :pagination="{ rowsPerPage: 0 }"
                                 class="full-width q-mt-md"
                                 :no-data-label="t('globals.noResults')"
@@ -288,6 +303,34 @@ function onDialogClose() {
                                 hide-pagination
                                 hide-bottom
                             >
+                                <template #body-selection="scope">
+                                    <QTd align="center" v-if="$props.replaceAction"
+                                        ><QCheckbox
+                                            v-model="scope.selected"
+                                            :disable="
+                                                !(
+                                                    scope.row.available >=
+                                                    itemLack.lack * -1
+                                                )
+                                            "
+                                        >
+                                            <QTooltip
+                                                v-if="
+                                                    !(
+                                                        scope.row.available >=
+                                                        itemLack.lack * -1
+                                                    )
+                                                "
+                                            >
+                                                Nop</QTooltip
+                                            >
+                                        </QCheckbox>
+                                        <!-- <div v-else class="q-ml-sm">
+                                            <QIcon name="info" size="sm"></QIcon>
+                                            </div
+                                    >--></QTd
+                                    >
+                                </template>
                                 <template #top-row>
                                     <!-- <QTr>
                                         <QTd />

src/pages/Ticket/Negative/TicketLackDetail.vue

@@ -345,7 +345,7 @@ const replaceItem = () => {
         if (ticket.quantity > itemProposalSelected.value.available) continue;
         originalRowDataCopy.value.splice(originalRowDataCopy.value.indexOf(ticket));
         ticket.itemFk = itemProposalSelected.value.id;
-        ticket.quantity *= 2;
+        // ticket.quantity *= 2;
         selectedRows.value.push({ ticketFk: ticket.ticketFk });
         itemProposalSelected.value.available -= ticket.quantity;
         itemLack.value.lack += ticket.quantity;
@@ -450,6 +450,8 @@ const replaceItem = () => {
                     <ItemProposal
                         ref="proposalDialogRef"
                         :item="item"
+                        :item-lack="itemLack"
+                        :replace-action="true"
                         :tickets="selectedRows"
                         @refresh-data="itemProposalEvt"
                     ></ItemProposal>
@@ -493,7 +495,7 @@ const replaceItem = () => {
                             </QBtn>
                             <QBadge
                                 text-color="white"
-                                color="red"
+                                :color="itemLack.lack === 0 ? 'green' : 'red'"
                                 :label="itemLack.lack"
                             />