salix-front/src/pages/Ticket/Negative/TicketLackDetail.vue

<script setup>
import { computed, onMounted, onUnmounted, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import ChangeQuantityDialog from './components/ChangeQuantityDialog.vue';
import ChangeStateDialog from './components/ChangeStateDialog.vue';
import ChangeItemDialog from './components/ChangeItemDialog.vue';
import TicketTransferProxy from '../Card/TicketTransferProxy.vue';
import FetchData from 'src/components/FetchData.vue';
import { useStateStore } from 'stores/useStateStore';
import { useState } from 'src/composables/useState';

import { useRoute } from 'vue-router';
import TicketLackTable from './TicketLackTable.vue';
import VnPopupProxy from 'src/components/common/VnPopupProxy.vue';
import ItemProposalProxy from 'src/pages/Item/components/ItemProposalProxy.vue';

import { useQuasar } from 'quasar';
const quasar = useQuasar();
const { t } = useI18n();
const editableStates = ref([]);
const stateStore = useStateStore();
const tableRef = ref();
const changeItemDialogRef = ref(null);
const changeStateDialogRef = ref(null);
const changeQuantityDialogRef = ref(null);
const showChangeQuantityDialog = ref(false);
const selectedRows = ref([]);
const route = useRoute();
onMounted(() => {
    stateStore.rightDrawer = false;
});
onUnmounted(() => {
    stateStore.rightDrawer = true;
});

const entityId = computed(() => route.params.itemFk);
const item = ref({});

const itemProposalSelected = ref(null);
const reload = async () => {
    tableRef.value.tableRef.reload();
};
defineExpose({ reload });
const filter = computed(() => ({
    scopeDays: route.query.days,
    showType: true,
    alertLevelCode: 'FREE',
    date: Date.vnNew(),
    warehouseFk: useState().getUser().value.warehouseFk,
}));
const itemProposalEvt = (data) => {
    const { itemProposal } = data;
    itemProposalSelected.value = itemProposal;
    reload();
};

function onBuysFetched(data) {
    Object.assign(item.value, data[0]);
}
const showItemProposal = () => {
    quasar
        .dialog({
            component: ItemProposalProxy,
            componentProps: {
                filter: filter.value,
                itemLack: tableRef.value.itemLack,
                replaceAction: true,
                sales: selectedRows.value,
            },
        })
        .onOk(itemProposalEvt);
};
</script>

<template>
    <FetchData
        url="States/editableStates"
        @on-fetch="(data) => (editableStates = data)"
        auto-load
    />
    <FetchData
        :url="`Items/${entityId}/getCard`"
        :fields="['longName']"
        @on-fetch="(data) => (item = data)"
        auto-load
    />
    <FetchData
        :url="`Buys/latestBuysFilter`"
        :fields="['longName']"
        :filter="{ where: { 'i.id': entityId } }"
        @on-fetch="onBuysFetched"
        auto-load
    />

    <TicketLackTable
        ref="tableRef"
        :filter="filter"
        @update:selection="({ value }, _) => (selectedRows = value)"
    >
        <template #top-right>
            <QBtnGroup push class="q-mr-lg" style="column-gap: 1px">
                <QBtn
                    data-cy="transferLines"
                    color="primary"
                    :disable="!(selectedRows.length === 1)"
                >
                    <template #default>
                        <QIcon name="vn:splitline" />
                        <QIcon name="vn:ticket" />

                        <QTooltip>{{ t('ticketSale.transferLines') }} </QTooltip>
                        <TicketTransferProxy
                            ref="transferFormRef"
                            split="true"
                            :ticket="selectedRows"
                            :transfer="{
                                sales: selectedRows,
                                lastActiveTickets: selectedRows.map((row) => row.id),
                            }"
                            @ticket-transferred="reload"
                        ></TicketTransferProxy>
                    </template>
                </QBtn>
                <QBtn
                    color="primary"
                    @click="showItemProposal"
                    :disable="!(selectedRows.length === 1)"
                    data-cy="itemProposal"
                >
                    <QIcon name="import_export" class="rotate-90" />
                    <QTooltip bottom anchor="bottom right">
                        {{ t('itemProposal') }}
                    </QTooltip>
                </QBtn>
                <VnPopupProxy
                    data-cy="changeItem"
                    icon="sync"
                    :disable="!(selectedRows.length === 1)"
                    :tooltip="t('negative.detail.modal.changeItem.title')"
                >
                    <template #extraIcon> <QIcon name="vn:item" /> </template>
                    <template v-slot="{ popup }">
                        <ChangeItemDialog
                            ref="changeItemDialogRef"
                            @update-item="popup.hide()"
                            :selected-rows="selectedRows"
                    /></template>
                </VnPopupProxy>
                <VnPopupProxy
                    data-cy="changeState"
                    icon="sync"
                    :disable="!(selectedRows.length === 1)"
                    :tooltip="t('negative.detail.modal.changeState.title')"
                >
                    <template #extraIcon> <QIcon name="vn:eye" /> </template>
                    <template v-slot="{ popup }">
                        <ChangeStateDialog
                            ref="changeStateDialogRef"
                            @update-state="popup.hide()"
                            :selected-rows="selectedRows"
                    /></template>
                </VnPopupProxy>
                <VnPopupProxy
                    data-cy="changeQuantity"
                    icon="sync"
                    :disable="!(selectedRows.length === 1)"
                    :tooltip="t('negative.detail.modal.changeQuantity.title')"
                    @click="showChangeQuantityDialog = true"
                >
                    <template #extraIcon> <QIcon name="exposure" /> </template>
                    <template v-slot="{ popup }">
                        <ChangeQuantityDialog
                            ref="changeQuantityDialogRef"
                            @update-quantity="popup.hide()"
                            :selected-rows="selectedRows"
                    /></template>
                </VnPopupProxy> </QBtnGroup
        ></template>
    </TicketLackTable>
</template>
<style lang="scss" scoped>
.list-enter-active,
.list-leave-active {
    transition: all 1s ease;
}
.list-enter-from,
.list-leave-to {
    opacity: 0;
    background-color: $primary;
}
.q-table.q-table__container > div:first-child {
    border-radius: unset;
}
</style>