262 lines
9.6 KiB
Vue
262 lines
9.6 KiB
Vue
<script setup>
|
|
import { computed, onMounted, onUnmounted, ref } from 'vue';
|
|
import { useI18n } from 'vue-i18n';
|
|
import ChangeQuantityDialog from 'pages/Ticket/Negative/components/ChangeQuantityDialog.vue';
|
|
import ChangeStateDialog from 'pages/Ticket/Negative/components/ChangeStateDialog.vue';
|
|
import FetchedTags from 'components/ui/FetchedTags.vue';
|
|
import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
|
|
import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
|
|
import TicketTransfer from '../Card/TicketTransfer.vue';
|
|
import TicketMassiveUpdate from '../Card/TicketMassiveUpdate.vue';
|
|
import VnPaginate from 'src/components/ui/VnPaginate.vue';
|
|
import FetchData from 'src/components/FetchData.vue';
|
|
import { useStateStore } from 'stores/useStateStore';
|
|
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';
|
|
import { toCurrency } from 'filters/index';
|
|
|
|
const { t } = useI18n();
|
|
const URL_KEY = 'Tickets/ItemLack';
|
|
const editableStates = ref([]);
|
|
const stateStore = useStateStore();
|
|
const proposalDialogRef = ref();
|
|
const tableRef = ref();
|
|
const changeStateDialogRef = ref();
|
|
const changeQuantityDialogRef = ref();
|
|
const showProposalDialog = ref(false);
|
|
const showChangeQuantityDialog = ref(false);
|
|
const showFree = ref(true);
|
|
const selectedRows = ref([]);
|
|
const badgeLackRef = ref();
|
|
const route = useRoute();
|
|
const itemLack = ref(null);
|
|
const originalRowDataCopy = ref(null);
|
|
onMounted(() => {
|
|
stateStore.rightDrawer = false;
|
|
});
|
|
onUnmounted(() => {
|
|
stateStore.rightDrawer = true;
|
|
});
|
|
|
|
const copyOriginalRowsData = (rows) => {
|
|
originalRowDataCopy.value = JSON.parse(JSON.stringify(rows));
|
|
};
|
|
const entityId = computed(() => route.params.id);
|
|
const item = ref({});
|
|
|
|
const itemLackForm = ref();
|
|
|
|
const reload = async () => {
|
|
itemLackForm.value.fetch();
|
|
};
|
|
defineExpose({ reload });
|
|
|
|
// Función de comparación
|
|
// function freeFirst({ alertLevel: a }, { alertLevel: b }) {
|
|
// const DEFAULT = 0;
|
|
// // Si el estado de 'a' es 'free' y el de 'b' no lo es, 'a' viene primero
|
|
// if (a === DEFAULT && b !== DEFAULT) {
|
|
// return -1;
|
|
// }
|
|
// // Si el estado de 'b' es 'free' y el de 'a' no lo es, 'b' viene primero
|
|
// if (b === DEFAULT && a !== DEFAULT) {
|
|
// return 1;
|
|
// }
|
|
// // En cualquier otro caso, no se cambia el orden
|
|
// return 0;
|
|
// }
|
|
// const { store } = useArrayData(URL_KEY);
|
|
// const handleRows = (rows) => {
|
|
// // rows.forEach((row) => (row.concept = item.value.name));
|
|
// rows = rows.sort(freeFirst);
|
|
// if (showFree.value) return rows.filter(({ alertLevel }) => alertLevel === 0);
|
|
// return rows;
|
|
// };
|
|
|
|
const itemProposalEvt = (data) => {
|
|
const { itemProposal, quantity } = data;
|
|
itemProposalSelected.value = itemProposal;
|
|
// badgeLackRef.value.reload();
|
|
itemLack.value.lack += +quantity;
|
|
tableRef.value.reload();
|
|
// replaceItem();
|
|
};
|
|
const itemProposalSelected = ref(null);
|
|
// const replaceItem = () => {
|
|
// const rows = handleRows(originalRowDataCopy.value).sort((row) => row.quantity);
|
|
// for (const ticket of rows) {
|
|
// if (ticket.quantity > itemProposalSelected.value.available) continue;
|
|
// originalRowDataCopy.value.splice(originalRowDataCopy.value.indexOf(ticket));
|
|
// ticket.itemFk = itemProposalSelected.value.id;
|
|
// selectedRows.value.push({ ticketFk: ticket.ticketFk });
|
|
// itemProposalSelected.value.available -= ticket.quantity;
|
|
// itemLack.value.lack += ticket.quantity;
|
|
// const index = store.data.findIndex((t) => t.ticketFk === ticket.ticketFk);
|
|
// store.data.splice(index, 1);
|
|
// console.log(ticket);
|
|
// useArrayData('ItemsGetSimilar').store.data[1].available =
|
|
// itemProposalSelected.value.available;
|
|
// }
|
|
// };
|
|
</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': '2' } }"
|
|
@on-fetch="(data) => Object.assign(item.value, data[0])"
|
|
auto-load
|
|
/>
|
|
<FetchData
|
|
:url="`Tickets/itemLack`"
|
|
:params="{ itemFk: entityId }"
|
|
@on-fetch="
|
|
(data) => {
|
|
itemLack = data[0];
|
|
}
|
|
"
|
|
auto-load
|
|
/>
|
|
<VnSubToolbar>
|
|
<template #st-data>
|
|
<QBtnGroup push style="column-gap: 1px">
|
|
<TicketMassiveUpdate
|
|
:disable="selectedRows.length < 2"
|
|
:label="t('negative.buttonsUpdate.state')"
|
|
:tooltip="t('negative.detail.modal.changeState.title')"
|
|
>
|
|
<ChangeStateDialog
|
|
ref="changeStateDialogRef"
|
|
:selected-rows="selectedRows"
|
|
></ChangeStateDialog>
|
|
</TicketMassiveUpdate>
|
|
<TicketMassiveUpdate
|
|
:label="t('negative.buttonsUpdate.quantity')"
|
|
:tooltip="t('negative.detail.modal.changeQuantity.title')"
|
|
@click="showChangeQuantityDialog = true"
|
|
:disable="selectedRows.length < 2"
|
|
>
|
|
<ChangeQuantityDialog
|
|
ref="changeQuantityDialogRef"
|
|
:selected-rows="selectedRows"
|
|
>
|
|
</ChangeQuantityDialog>
|
|
</TicketMassiveUpdate>
|
|
<QBtn
|
|
color="primary"
|
|
icon="vn:splitline"
|
|
:disable="selectedRows.length < 1"
|
|
>
|
|
<QTooltip>{{ t('ticketSale.transferLines') }}</QTooltip>
|
|
<TicketTransfer
|
|
class="full-width"
|
|
:transfer="{
|
|
sales: selectedRows,
|
|
lastActiveTickets: selectedRows.map((row) => row.ticketFk),
|
|
}"
|
|
></TicketTransfer>
|
|
</QBtn>
|
|
<QBtn
|
|
color="primary"
|
|
@click="showProposalDialog = true"
|
|
:disable="selectedRows.length < 1"
|
|
>
|
|
<QIcon name="import_export" class="rotate-90"></QIcon>
|
|
<ItemProposalProxy
|
|
ref="proposalDialogRef"
|
|
:item-lack="itemLack"
|
|
:replace-action="true"
|
|
:sales="selectedRows"
|
|
@item-replaced="itemProposalEvt"
|
|
></ItemProposalProxy>
|
|
<QTooltip bottom anchor="bottom right">
|
|
{{ t('itemProposal') }}
|
|
</QTooltip>
|
|
</QBtn>
|
|
</QBtnGroup>
|
|
<QCheckbox v-model="showFree" :label="t('negative.detail.showFree')" />
|
|
</template>
|
|
</VnSubToolbar>
|
|
<QPage>
|
|
<div class="full-width" style="padding-bottom: 0px">
|
|
<VnPaginate
|
|
:data-key="URL_KEY"
|
|
:url="`${URL_KEY}/${entityId}`"
|
|
ref="itemLackForm"
|
|
@on-fetch="copyOriginalRowsData"
|
|
auto-load
|
|
class="full-width q-pa-md"
|
|
>
|
|
<template #body>
|
|
<div style="display: flex; align-items: center">
|
|
<VnImg :id="item.id" class="rounded image-wrapper"></VnImg>
|
|
<div
|
|
style="
|
|
display: flex;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
"
|
|
>
|
|
<QBadge
|
|
ref="badgeLackRef"
|
|
class="q-ml-xs"
|
|
v-if="itemLack"
|
|
text-color="white"
|
|
:color="itemLack.lack === 0 ? 'green' : 'red'"
|
|
:label="itemLack.lack"
|
|
/>
|
|
<!-- <QBadge
|
|
color="secondary"
|
|
class="q-ml-xs q-mt-xs"
|
|
v-if="itemLack"
|
|
:label="toCurrency(itemLack.quantity * itemLack.price)"
|
|
outline
|
|
/> -->
|
|
</div>
|
|
<QBtn flat class="link text-blue">
|
|
{{ item.longName }}
|
|
<ItemDescriptorProxy :id="entityId" />
|
|
</QBtn>
|
|
<FetchedTags class="q-ml-md" :item="item" />
|
|
</div>
|
|
</template>
|
|
</VnPaginate>
|
|
</div>
|
|
|
|
<TicketLackTable
|
|
ref="tableRef"
|
|
:filter="{ alertLevel: showFree }"
|
|
@update:selection="({ value }, _) => (selectedRows = value)"
|
|
></TicketLackTable>
|
|
</QPage>
|
|
</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>
|