src/pages/Item/components/ItemProposalProxy.vue

@@ -1,12 +1,19 @@
 <script setup>
 import ItemProposal from './ItemProposal.vue';
-import VnImg from 'src/components/ui/VnImg.vue';
-import FetchedTags from 'components/ui/FetchedTags.vue';
-import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
 import { ref } from 'vue';
-const emit = defineEmits(['onDialogClosed', 'itemReplaced']);
 const popupProxyRef = ref(null);
+import { useDialogPluginComponent } from 'quasar';
+const emit = defineEmits([
+    'onDialogClosed',
+    'itemReplaced',
+    'confirm',
+    'cancel',
+    ...useDialogPluginComponent.emits,
+]);
+defineExpose({ show: () => dialogRef.value.show(), hide: () => dialogRef.value.hide() });
 
+const { dialogRef, onDialogHide, onDialogOK, onDialogCancel } =
+    useDialogPluginComponent();
 const $props = defineProps({
     itemLack: {
         type: Object,
@@ -26,14 +33,20 @@ const $props = defineProps({
 });
 </script>
 <template>
-    <QPopupProxy ref="popupProxyRef">
+    <QDialog
+        ref="dialogRef"
+        full-width
+        transition-show="scale"
+        transition-hide="scale"
+        persistent
+    >
         <QCard>
             <QCardSection class="row items-center q-pb-none">
                 <span class="text-h6 text-grey">{{ $t('Item proposal') }}</span>
                 <QSpace />
                 <QBtn icon="close" flat round dense v-close-popup />
             </QCardSection>
-            <QCardSection class="row items-center">
+            <QCardSection>
                 <!-- <VnImg :id="itemLack.id" class="rounded image-wrapper"></VnImg>
                 <QBtn flat class="link text-blue">
                     {{ itemLack.longName }}
@@ -54,5 +67,5 @@ const $props = defineProps({
                 ></ItemProposal
             ></QCardSection>
         </QCard>
-    </QPopupProxy>
+    </QDialog>
 </template>

src/pages/Ticket/Negative/TicketLackDetail.vue

@@ -16,6 +16,8 @@ import VnImg from 'src/components/ui/VnImg.vue';
 import TicketLackTable from './TicketLackTable.vue';
 import ItemProposalProxy from 'src/pages/Item/components/ItemProposalProxy.vue';
 import VnPopupProxy from 'src/components/common/VnPopupProxy.vue';
+import { useQuasar } from 'quasar';
+const quasar = useQuasar();
 
 const { t } = useI18n();
 const URL_KEY = 'Tickets/ItemLack';
@@ -107,10 +109,17 @@ function onBuysFetched(data) {
 function onTicketLackFetched(data) {
     itemLack.value = data[0];
 }
-const closeDialogs = (refs, evt) => {
-    changeItemDialogRef.value.hide();
-    changeQuantityDialogRef.value.hide();
-    changeStateDialogRef.value.hide();
+const showItemProposal = () => {
+    quasar
+        .dialog({
+            component: ItemProposalProxy,
+            componentProps: {
+                itemLack: itemLack.value,
+                replaceAction: true,
+                sales: selectedRows.value,
+            },
+        })
+        .onOk(itemProposalEvt);
 };
 </script>
 
@@ -198,14 +207,18 @@ const closeDialogs = (refs, evt) => {
                     @click="showProposalDialog = true"
                     :disable="selectedRows.length < 1"
                 >
-                    <QIcon name="import_export" class="rotate-90"></QIcon>
-                    <ItemProposalProxy
+                    <QIcon
+                        name="import_export"
+                        class="rotate-90"
+                        @click="showItemProposal"
+                    ></QIcon>
+                    <!-- <ItemProposalProxy
                         ref="proposalDialogRef"
                         :item-lack="itemLack"
                         :replace-action="true"
                         :sales="selectedRows"
                         @item-replaced="itemProposalEvt"
-                    ></ItemProposalProxy>
+                    ></ItemProposalProxy> -->
                     <QTooltip bottom anchor="bottom right">
                         {{ t('itemProposal') }}
                     </QTooltip>