feat: itemProposalProxy

src/pages/Item/components/ItemProposal.vue

@@ -94,7 +94,7 @@ const columns = computed(() => [
         ...defaultColumnAttrs,
         label: t('proposal.difference'),
         name: 'difference',
-        format: (item) => (item.id % 2 === 0 ? 10 : -10),
+        format: ({ id }) => (id % 2 === 0 ? 10 : -10),
         columnFilter: {
             component: 'input',
             type: 'number',
@@ -226,14 +226,14 @@ function onDialogClose() {
 onUnmounted(() => {});
 </script>
 <template>
-    <QPopupProxy ref="popupProxyRef">
+    <!-- <QPopupProxy ref="popupProxyRef"> -->
-        <QCard style="min-width: 500px">
+    <!-- <QCard style="min-width: 500px">
-            <QCardSection class="row items-center justify-center column items-stretch">
+        <QCardSection class="row items-center justify-center column items-stretch"> -->
     <!-- <VnRow style="display: flex"> -->
-                <div style="width: 62vw">
+    <div style="min-width: 65vw">
         <!-- {{ proposalSelected }} -->
-                    {{ $props.itemLack.itemFk }}
+        <!-- {{ $props.itemLack.itemFk }}
-                    {{ $props.itemLack.warehouseFk }}
+        {{ $props.itemLack.warehouseFk }} -->
         <!-- {{ rows[1].available }} -->
         <VnTable
             data-key="ItemsGetSimilar"
@@ -262,22 +262,22 @@ onUnmounted(() => {});
                 <div v-if="$props.replaceAction" style="display: flex">
                     <QBtn
                         :label="t('globals.replace')"
+                        class="q-py-xs"
                         color="primary"
                         :loading="isLoading"
                         @click="confirm"
-                                    :disable="
+                        style="padding-block: 8px"
-                                        proposalSelected.length < 1 || quantity === 0
+                        :disable="proposalSelected.length < 1 || quantity === 0"
-                                    "
-                                    unelevated
                     />
                     <VnInputNumber
                         v-model.number="quantity"
-                                    v-if="quantity > -1"
+                        v-if="proposalSelected.length > 0"
                         @update:model-value="(val) => (quantity = val)"
                         type="number"
                         min="0"
                         :label="t('proposal.quantityToReplace')"
-                                    class="q-ml-lg"
+                        dense
+                        class="q-ml-xs"
                     /></div
             ></template>
             <!-- <template #body="scope">{{ scope }}</template> -->
@@ -285,15 +285,9 @@ onUnmounted(() => {});
                 <QTd align="center" v-if="$props.replaceAction"
                     ><QCheckbox
                         v-model="scope.selected"
-                                    :disable="
+                        :disable="!(scope.row.available >= itemLack.lack * -1)"
-                                        !(scope.row.available >= itemLack.lack * -1)
-                                    "
-                                >
-                                    <QTooltip
-                                        v-if="
-                                            !(scope.row.available >= itemLack.lack * -1)
-                                        "
                     >
+                        <QTooltip v-if="!(scope.row.available >= itemLack.lack * -1)">
                             Nop</QTooltip
                         >
                     </QCheckbox>
@@ -343,14 +337,14 @@ onUnmounted(() => {});
                 </div>
                 <!-- </QTd> -->
             </template>
-                        <template #column-status="{ value }">
+            <template #column-status="{ row }">
                 <!-- <QTd class="col" align="center"> -->
                 <div
-                                :style="{ background: gradientStyle(value) }"
+                    :style="{ background: gradientStyle(statusConditionalValue(row)) }"
                     class="compatibility"
                 >
                     <QTooltip>
-                                    {{ compatibilityItem(value) }}
+                        {{ compatibilityItem(statusConditionalValue(row)) }}
                     </QTooltip>
                 </div>
                 <!-- </QTd> -->
@@ -360,28 +354,28 @@ onUnmounted(() => {});
                                 </template> -->
 
             <template #column-price2="{ row }">
-                            <!-- <QTd
+                <QTd
                     class="col"
                     align="center"
-                                :class="[conditionalValuePrice(value)]"
+                    :class="[conditionalValuePrice(row.price2)]"
-                            > -->
+                >
                     <QTooltip>
                         {{ toCurrency(row.price2) }}
                     </QTooltip>
                     {{ toCurrency(row.price2) }}
-                            <!-- </QTd> -->
+                </QTd>
             </template>
             <template #column-difference="{ row }">
-                            <pre>{{ row.difference }}</pre>
+                <!-- <pre>asdad{{ row }}</pre> -->
                 <!-- <QTd class="col" align="left"> -->
-                            <!-- <VnStockValueDisplay :value="value" /> -->
+                <VnStockValueDisplay :value="row.id % 2 === 0 ? 10 : -10" />
                 <!-- </QTd> -->
             </template>
         </VnTable>
     </div>
-            </QCardSection>
+    <!-- </QCardSection>
-        </QCard>
+    </QCard> -->
-    </QPopupProxy>
+    <!-- </QPopupProxy> -->
 </template>
 <style lang="scss">
 .compatibility {

src/pages/Item/components/ItemProposalProxy.vue

@@ -0,0 +1,30 @@
+<script setup>
+import ItemProposal from './ItemProposal.vue';
+const $props = defineProps({
+    item: {
+        type: Object,
+        required: true,
+        default: () => {},
+    },
+    itemLack: {
+        type: Object,
+        required: true,
+        default: () => {},
+    },
+    replaceAction: {
+        type: Boolean,
+        required: false,
+        default: false,
+    },
+    tickets: {
+        type: Array,
+        required: false,
+        default: () => [],
+    },
+});
+</script>
+<template>
+    <QPopupProxy>
+        <ItemProposal v-bind="$props"></ItemProposal>
+    </QPopupProxy>
+</template>

src/pages/Ticket/Negative/TicketLackDetail.vue

@@ -18,6 +18,7 @@ import { useRoute } from 'vue-router';
 import { useArrayData } from 'src/composables/useArrayData';
 import VnImg from 'src/components/ui/VnImg.vue';
 import TicketLackTable from './TicketLackTable.vue';
+import ItemProposalProxy from 'src/pages/Item/components/ItemProposalProxy.vue';
 const { t } = useI18n();
 const URL_KEY = 'Tickets/ItemLack';
 const editableStates = ref([]);
@@ -199,14 +200,14 @@ const replaceItem = () => {
                 </QBtn>
                 <QBtn color="primary" @click="showProposalDialog = true">
                     <QIcon name="import_export" class="rotate-90"></QIcon>
-                    <ItemProposal
+                    <ItemProposalProxy
                         ref="proposalDialogRef"
                         :item="item"
                         :item-lack="itemLack"
                         :replace-action="true"
                         :tickets="selectedRows"
                         @refresh-data="itemProposalEvt"
-                    ></ItemProposal>
+                    ></ItemProposalProxy>
                     <QTooltip bottom anchor="bottom right">
                         {{ t('itemProposal') }}
                     </QTooltip>