277 lines
10 KiB
Vue
277 lines
10 KiB
Vue
<script setup>
|
|
import { computed, nextTick, onMounted, onUnmounted, ref } from 'vue';
|
|
import { useI18n } from 'vue-i18n';
|
|
import { QBtn, QCheckbox } from 'quasar';
|
|
import axios from 'axios';
|
|
import ChangeQuantityDialog from 'pages/Ticket/Negative/components/ChangeQuantityDialog.vue';
|
|
import ChangeStateDialog from 'pages/Ticket/Negative/components/ChangeStateDialog.vue';
|
|
import ItemProposal from 'pages/Item/components/ItemProposal.vue';
|
|
import FetchedTags from 'components/ui/FetchedTags.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 ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
|
|
import useNotify from 'src/composables/useNotify.js';
|
|
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';
|
|
const { t } = useI18n();
|
|
const URL_KEY = 'Tickets/ItemLack';
|
|
const editableStates = ref([]);
|
|
const stateStore = useStateStore();
|
|
const proposalDialogRef = ref();
|
|
const changeStateDialogRef = ref();
|
|
const changeQuantityDialogRef = ref();
|
|
const showProposalDialog = ref(false);
|
|
const showChangeQuantityDialog = ref(false);
|
|
const showFree = ref(true);
|
|
const selectedRows = 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 = ({ itemProposal }) => {
|
|
itemProposalSelected.value = itemProposal;
|
|
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;
|
|
// ticket.quantity *= 2;
|
|
selectedRows.value.push({ ticketFk: ticket.ticketFk });
|
|
itemProposalSelected.value.available -= ticket.quantity;
|
|
itemLack.value.lack += ticket.quantity;
|
|
// tableRef.value.rows.pop();
|
|
console.log(store.data);
|
|
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];
|
|
// itemLackForm.value.fetch();
|
|
}
|
|
"
|
|
auto-load
|
|
/>
|
|
<VnSubToolbar>
|
|
<template #st-data>
|
|
<QBtnGroup push style="column-gap: 1px">
|
|
<TicketMassiveUpdate
|
|
:disable="selectedRows.length < 2"
|
|
label="negative.buttonsUpdate.state"
|
|
tooltip="negative.detail.modal.changeState.title"
|
|
>
|
|
<ChangeStateDialog
|
|
ref="changeStateDialogRef"
|
|
:selected-rows="selectedRows"
|
|
></ChangeStateDialog>
|
|
</TicketMassiveUpdate>
|
|
<!-- <QBtn >
|
|
<QTooltip bottom anchor="bottom right">
|
|
{{ t() }}
|
|
</QTooltip>
|
|
</QBtn> -->
|
|
<TicketMassiveUpdate
|
|
label="negative.buttonsUpdate.quantity"
|
|
@click="showChangeQuantityDialog = true"
|
|
:disable="selectedRows.length < 2"
|
|
tooltip="negative.detail.modal.changeQuantity.title"
|
|
>
|
|
<ChangeQuantityDialog
|
|
ref="changeQuantityDialogRef"
|
|
:selected-rows="selectedRows"
|
|
>
|
|
</ChangeQuantityDialog>
|
|
</TicketMassiveUpdate>
|
|
<!-- <TicketMassiveUpdate
|
|
icon="refresh"
|
|
color="primary"
|
|
label="negative.buttonsUpdate.itemProposal"
|
|
@click="showChangeQuantityDialog = true"
|
|
:disable="selectedRows.length < 2"
|
|
tooltip="negative.buttonsUpdate.itemProposal"
|
|
>
|
|
</TicketMassiveUpdate> -->
|
|
<!-- <QBtn
|
|
color="primary"
|
|
@click="
|
|
openConfirmationModal(
|
|
t('negative.detail.modal.split.title'),
|
|
t('negative.detail.modal.split.subTitle'),
|
|
split,
|
|
() => (showSplitDialog = true)
|
|
)
|
|
"
|
|
:disable="selectedRows.length < 1"
|
|
icon="call_split"
|
|
>
|
|
<QTooltip bottom anchor="bottom right">
|
|
{{ t('globals.split') }}
|
|
</QTooltip>
|
|
</QBtn> -->
|
|
<QBtn color="primary" icon="vn:splitline">
|
|
<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">
|
|
<QIcon name="import_export" class="rotate-90"></QIcon>
|
|
<ItemProposal
|
|
ref="proposalDialogRef"
|
|
:item="item"
|
|
:item-lack="itemLack"
|
|
:replace-action="true"
|
|
:tickets="selectedRows"
|
|
@refresh-data="itemProposalEvt"
|
|
></ItemProposal>
|
|
<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 q-pa-md">
|
|
<!-- <p>item:{{ item }}</p>
|
|
<p>itemLack:{{ itemLack }}</p>
|
|
<p>selectedRows:{{ selectedRows }}</p>
|
|
<p>itemProposalSelected:{{ itemProposalSelected }}</p> -->
|
|
<VnPaginate
|
|
:data-key="URL_KEY"
|
|
:url="`${URL_KEY}/${entityId}`"
|
|
ref="itemLackForm"
|
|
@on-fetch="copyOriginalRowsData"
|
|
auto-load
|
|
>
|
|
<template #body="{ rows }">
|
|
<!-- <VnLv >
|
|
<template #label> -->
|
|
<div class="q-mb-lg image" style="display: flex; align-items: center">
|
|
<VnImg :id="item.id" class="rounded image-wrapper"></VnImg>
|
|
<QBtn flat class="link text-blue">
|
|
{{ item.longName }}
|
|
<ItemDescriptorProxy :id="entityId" />
|
|
</QBtn>
|
|
<QBadge
|
|
v-if="itemLack"
|
|
text-color="white"
|
|
:color="itemLack.lack === 0 ? 'green' : 'red'"
|
|
:label="itemLack.lack"
|
|
/>
|
|
<FetchedTags class="q-ml-md" :item="item" :max-length="5" />
|
|
</div>
|
|
{{ rows }}
|
|
<!-- </template>
|
|
<template #value> </template>
|
|
</VnLv> -->
|
|
</template>
|
|
</VnPaginate>
|
|
</div>
|
|
<TicketLackTable></TicketLackTable>
|
|
</QPage>
|
|
|
|
<!--<HandleSplited
|
|
ref="splitDialogRef"
|
|
@hide="onDialogHide"
|
|
v-model="showSplitDialog"
|
|
:tickets="resultSplit"
|
|
></HandleSplited>-->
|
|
</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;
|
|
}
|
|
</style>
|