614 lines
22 KiB
Vue
614 lines
22 KiB
Vue
<script setup>
|
|
import { computed, nextTick, onMounted, onUnmounted, ref, toRefs } from 'vue';
|
|
import { useI18n } from 'vue-i18n';
|
|
import { QBtn, QCheckbox, useQuasar } from 'quasar';
|
|
import axios from 'axios';
|
|
import HandleSplited from 'pages/Ticket/Negative/components/HandleSplited.vue';
|
|
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 { useVnConfirm } from 'composables/useVnConfirm';
|
|
import VnLv from 'src/components/ui/VnLv.vue';
|
|
import FetchedTags from 'components/ui/FetchedTags.vue';
|
|
import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
|
|
import TickerSplit from '../Card/TicketSplit.vue';
|
|
import TicketMassiveUpdate from '../Card/TicketMassiveUpdate.vue';
|
|
import VnPaginate from 'src/components/ui/VnPaginate.vue';
|
|
import FetchData from 'src/components/FetchData.vue';
|
|
import VnSelect from 'components/common/VnSelect.vue';
|
|
import VnInput from 'src/components/common/VnInput.vue';
|
|
import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
|
|
import { toDate, toHour } from 'src/filters';
|
|
import useNotify from 'src/composables/useNotify.js';
|
|
import { useStateStore } from 'stores/useStateStore';
|
|
import { useDialogPluginComponent } from 'quasar';
|
|
import { useSession } from 'src/composables/useSession';
|
|
import ZoneDescriptorProxy from 'pages/Zone/Card/ZoneDescriptorProxy.vue';
|
|
|
|
const { openConfirmationModal } = useVnConfirm();
|
|
const { t } = useI18n();
|
|
const URL_KEY = 'Tickets/ItemLack';
|
|
const editableStates = ref([]);
|
|
const { notify } = useNotify();
|
|
const stateStore = useStateStore();
|
|
const proposalDialogRef = ref();
|
|
const splitDialogRef = ref();
|
|
const changeStateDialogRef = ref();
|
|
const changeQuantityDialogRef = ref();
|
|
const showSplitDialog = ref(false);
|
|
const showProposalDialog = ref(false);
|
|
const showChangeQuantityDialog = ref(false);
|
|
const showChangeStateDialog = ref(false);
|
|
const componentIsRendered = ref(false);
|
|
const showFree = ref(true);
|
|
const resultSplit = ref([]);
|
|
const selectedRows = ref([]);
|
|
const session = useSession();
|
|
import { useRoute } from 'vue-router';
|
|
import VnSelectDialog from 'src/components/common/VnSelectDialog.vue';
|
|
import VnRow from 'src/components/ui/VnRow.vue';
|
|
const route = useRoute();
|
|
const token = session.getTokenMultimedia();
|
|
const itemLack = ref(null);
|
|
const originalRowDataCopy = ref(null);
|
|
// const $props = defineProps({
|
|
// item: {
|
|
// type: Number,
|
|
// required: true,
|
|
// },
|
|
// filter: {
|
|
// type: Object,
|
|
// required: false,
|
|
// default: () => {
|
|
// true;
|
|
// },
|
|
// },
|
|
// });
|
|
onMounted(() => {
|
|
stateStore.rightDrawer = false;
|
|
nextTick(() => {
|
|
componentIsRendered.value = true;
|
|
});
|
|
});
|
|
onUnmounted(() => {
|
|
stateStore.rightDrawer = true;
|
|
});
|
|
|
|
const copyOriginalRowsData = (rows) => {
|
|
originalRowDataCopy.value = JSON.parse(JSON.stringify(rows));
|
|
};
|
|
const getInputEvents = (colField, props) => ({
|
|
'update:modelValue': () => saveChange(colField, props),
|
|
'keyup.enter': () => saveChange(colField, props),
|
|
});
|
|
const saveChange = async (field, { rowIndex, row }) => {
|
|
try {
|
|
switch (field) {
|
|
// case 'split':
|
|
// showSplitDialog.value =true
|
|
// // await split({ simple: true }, [row]);
|
|
|
|
// break;
|
|
case 'code':
|
|
await axios.post(`Tickets/state`, {
|
|
ticketFk: row.ticketFk,
|
|
code: row[field],
|
|
});
|
|
break;
|
|
|
|
case 'quantity':
|
|
await axios.post(`Sales/${row.saleFk}/updateQuantity`, {
|
|
quantity: +row.quantity,
|
|
});
|
|
break;
|
|
|
|
default:
|
|
console.error(field, { rowIndex, row });
|
|
break;
|
|
}
|
|
notify('globals.dataSaved', 'positive');
|
|
} catch (err) {
|
|
console.error('Error saving changes', err);
|
|
}
|
|
};
|
|
const entityId = computed(() => route.params.id);
|
|
const item = ref({});
|
|
function isComponentVn(col) {
|
|
return tableColumnComponents?.value[col.name]?.component === 'span' ?? false;
|
|
}
|
|
|
|
// const onDetailDialogHide = (evt) => {
|
|
// if (evt?.type === 'refresh') ticketDetailRef.value.reload();
|
|
// };
|
|
|
|
const tableColumnComponents = computed(() => ({
|
|
status: {
|
|
component: 'span',
|
|
props: {},
|
|
event: () => ({}),
|
|
sortable: false,
|
|
},
|
|
ticketFk: {
|
|
component: QBtn,
|
|
props: { color: 'blue', sortable: true, flat: true },
|
|
event: () => ({}),
|
|
sortable: true,
|
|
},
|
|
shipped: {
|
|
component: 'span',
|
|
props: {},
|
|
event: () => ({}),
|
|
},
|
|
theoreticalhour: {
|
|
component: 'span',
|
|
props: {},
|
|
event: () => ({}),
|
|
},
|
|
state: {
|
|
style: 'width: 160px',
|
|
component: VnSelect,
|
|
type: 'select',
|
|
filterValue: null,
|
|
|
|
props: {
|
|
'option-value': 'code',
|
|
'option-label': 'name',
|
|
'emit-value': true,
|
|
'map-options': true,
|
|
'use-input': true,
|
|
'hide-selected': true,
|
|
dense: true,
|
|
options: editableStates.value,
|
|
},
|
|
event: getInputEvents,
|
|
},
|
|
zoneName: {
|
|
component: QBtn,
|
|
props: { color: 'blue', sortable: true, flat: true },
|
|
event: () => ({}),
|
|
},
|
|
nickname: {
|
|
component: 'span',
|
|
props: {},
|
|
event: () => ({}),
|
|
},
|
|
quantity: {
|
|
component: VnInput,
|
|
props: {
|
|
type: 'number',
|
|
min: 0,
|
|
class: 'input-number',
|
|
},
|
|
event: getInputEvents,
|
|
style: 'width: 100px',
|
|
},
|
|
|
|
alertLevelCode: {
|
|
component: 'span',
|
|
props: {},
|
|
event: () => ({}),
|
|
},
|
|
}));
|
|
|
|
const columns = computed(() => [
|
|
{
|
|
name: 'status',
|
|
align: 'center',
|
|
sortable: false,
|
|
},
|
|
{
|
|
name: 'ticketFk',
|
|
label: t('negative.detail.ticketFk'),
|
|
field: 'ticketFk',
|
|
align: 'left',
|
|
sortable: true,
|
|
},
|
|
{
|
|
name: 'shipped',
|
|
label: t('negative.detail.shipped'),
|
|
field: 'shipped',
|
|
align: 'left',
|
|
format: (val) => toDate(val),
|
|
sortable: true,
|
|
},
|
|
{
|
|
name: 'theoreticalhour',
|
|
label: t('negative.detail.theoreticalhour'),
|
|
field: 'theoreticalhour',
|
|
align: 'left',
|
|
sortable: true,
|
|
format: (val) => toHour(val),
|
|
},
|
|
{
|
|
name: 'state',
|
|
label: t('negative.detail.state'),
|
|
field: 'code',
|
|
align: 'left',
|
|
sortable: true,
|
|
},
|
|
{
|
|
name: 'zoneName',
|
|
label: t('negative.detail.zoneName'),
|
|
field: 'zoneName',
|
|
align: 'left',
|
|
sortable: true,
|
|
},
|
|
{
|
|
name: 'nickname',
|
|
label: t('negative.detail.nickname'),
|
|
field: 'nickname',
|
|
align: 'left',
|
|
sortable: true,
|
|
},
|
|
{
|
|
name: 'quantity',
|
|
label: t('negative.detail.quantity'),
|
|
field: 'quantity',
|
|
align: 'left',
|
|
sortable: true,
|
|
style: 'width: 100px',
|
|
},
|
|
]);
|
|
const { dialogRef, onDialogHide } = useDialogPluginComponent();
|
|
// const { filter } = toRefs($props);
|
|
const emit = defineEmits([...useDialogPluginComponent.emits, 'selection', 'close']);
|
|
function rowsHasSelected(selection) {
|
|
emit(
|
|
'selection',
|
|
selection
|
|
//.map(({ ticketFk }) => ticketFk)
|
|
);
|
|
}
|
|
|
|
const itemLackForm = ref();
|
|
// const split = async ({ simple }, data = []) => {
|
|
// openConfirmationModal(
|
|
// t('negative.detail.split.confirmSplitSelected'),
|
|
// t('negative.detail.split.splitQuestion'),
|
|
// null,
|
|
// () => {
|
|
// showSplitDialog.value = true;
|
|
// resultSplit.value = [{}];
|
|
// // const body = simple ? data : selectedRows.value;
|
|
// // axios.post(`Tickets/split`, body).then((data) => {
|
|
// // resultSplit.value = data;
|
|
// // });
|
|
// }
|
|
// );
|
|
// };
|
|
|
|
// const split = async ({ simple }, data = []) => {
|
|
// openConfirmationModal(
|
|
// t('negative.modalSplit.title'),
|
|
// t('splitQuestion'),
|
|
// () => {
|
|
// const body = simple ? data : selectedRows.value;
|
|
// axios.post(`Tickets/split`, body).then((data) => {
|
|
// resultSplit.value = data;
|
|
// });
|
|
// }
|
|
// );
|
|
// };
|
|
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 handleRows = (rows) => {
|
|
if (showFree.value) return rows.filter(({ alertLevel }) => alertLevel === 0);
|
|
return rows.sort(freeFirst);
|
|
};
|
|
const quasar = useQuasar();
|
|
|
|
const split = async () => {
|
|
const body = selectedRows.value;
|
|
|
|
// const {data} = await axios.post(`Tickets/split`, body);
|
|
// resultSplit.value = data;
|
|
resultSplit.value = [
|
|
{ ticket: 32, newTicket: 1000005, status: 'split' },
|
|
{ ticket: 32, newTicket: 1000006, status: 'noSplit' },
|
|
{ ticket: 32, newTicket: 1000007, status: 'error' },
|
|
];
|
|
quasar.dialog({
|
|
component: HandleSplited,
|
|
componentProps: {
|
|
tickets: resultSplit.value,
|
|
},
|
|
});
|
|
};
|
|
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;
|
|
ticket.itemFk = itemProposalSelected.value.id;
|
|
ticket.quantity *= 2;
|
|
selectedRows.value.push({ ticketFk: ticket.ticketFk });
|
|
itemProposalSelected.value.available -= ticket.quantity;
|
|
itemLack.value.lack += ticket.quantity;
|
|
}
|
|
};
|
|
</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="`Tickets/itemLack`"
|
|
:filter="{ id: entityId }"
|
|
@on-fetch="(data) => (itemLack = data[0])"
|
|
auto-load
|
|
/>
|
|
<!-- <Teleport to="#st-actions" v-if="stateStore?.isSubToolbarShown()">
|
|
<QBtnGroup push style="column-gap: 1px"
|
|
><QBtn
|
|
:label="t('proposal.replace')"
|
|
@click="emit('close')"
|
|
color="primary"
|
|
icon="save"
|
|
>
|
|
<QTooltip>{{ t('globals.cancel') }}</QTooltip>
|
|
</QBtn></QBtnGroup
|
|
>
|
|
</Teleport> -->
|
|
<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" @click="showProposalDialog = true">
|
|
<QIcon name="import_export" class="rotate-90"></QIcon>
|
|
<ItemProposal
|
|
ref="proposalDialogRef"
|
|
:item="item"
|
|
:tickets="selectedRows"
|
|
></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">
|
|
{{ itemLack }}
|
|
{{ selectedRows }}
|
|
<VnPaginate
|
|
:data-key="URL_KEY"
|
|
:url="`${URL_KEY}/${entityId}`"
|
|
ref="itemLackForm"
|
|
@on-fetch="copyOriginalRowsData($event)"
|
|
auto-load
|
|
>
|
|
<!-- :rows="rows" -->
|
|
<template #body="{ rows }">
|
|
<VnLv class="q-mb-lg image">
|
|
<template #label>
|
|
<QImg
|
|
:src="`/api/Images/catalog/50x50/${entityId}/download?access_token=${token}`"
|
|
spinner-color="primary"
|
|
:ratio="1"
|
|
height="50px"
|
|
width="50px"
|
|
class="image remove-bg"
|
|
:alt="'asdads'"
|
|
/>
|
|
</template>
|
|
<template #value>
|
|
<QBtn flat class="link text-blue">
|
|
{{ item.longName }}
|
|
<ItemDescriptorProxy :id="entityId" />
|
|
</QBtn>
|
|
<QBadge
|
|
text-color="white"
|
|
color="red"
|
|
:label="itemLack.lack"
|
|
/>
|
|
|
|
<FetchedTags class="q-ml-md" :item="item" :max-length="5" />
|
|
</template>
|
|
</VnLv>
|
|
<!-- <ItemDescriptorProxy :id="entityId" />
|
|
<span class="text-h6">{{ item.longName }}</span>
|
|
<span class="text-h6"
|
|
><sub>{{ item.longName }}</sub></span
|
|
> -->
|
|
<!-- <VnRow style="align-items: center">
|
|
<div>
|
|
</div>
|
|
<QIcon name="arrow_right" size="lg" />
|
|
<VnSelectDialog action-icon="call_split"></VnSelectDialog
|
|
></VnRow> -->
|
|
<QTable
|
|
ref="tableRef"
|
|
:columns="columns"
|
|
:rows="handleRows(rows)"
|
|
row-key="ticketFk"
|
|
selection="multiple"
|
|
v-model:selected="selectedRows"
|
|
@update:selected="rowsHasSelected"
|
|
:grid="$q.screen.lt.md"
|
|
hide-bottom
|
|
>
|
|
<template #body="props">
|
|
<QTr>
|
|
<QTd>
|
|
<!-- <QIcon
|
|
v-if="resultSplit.length > 0"
|
|
:name="getIcon(props.key, 'name')"
|
|
:color="getIcon(props.key, 'color')"
|
|
class="fill-icon q-mr-sm"
|
|
size="xs"
|
|
style="font-weight: bold"
|
|
/> -->
|
|
<QCheckbox v-model="props.selected" />
|
|
</QTd>
|
|
<QTd v-for="col in props.cols" :key="col.name">
|
|
<template
|
|
v-if="tableColumnComponents[col.name]?.component"
|
|
>
|
|
<component
|
|
:is="
|
|
tableColumnComponents[col.name].component
|
|
"
|
|
v-bind="tableColumnComponents[col.name].props"
|
|
v-model="props.row[col.field]"
|
|
v-on="
|
|
tableColumnComponents[col.name].event(
|
|
col.field,
|
|
props
|
|
)
|
|
"
|
|
:style="tableColumnComponents[col.name].style"
|
|
>
|
|
<template v-if="isComponentVn(col)">{{
|
|
col.value
|
|
}}</template>
|
|
<template v-if="col.name === 'status'">
|
|
<QIcon
|
|
v-if="props.row.isRookie"
|
|
name="vn:person"
|
|
size="xs"
|
|
color="primary"
|
|
class="cursor-pointer"
|
|
>
|
|
<QTooltip>{{
|
|
t('negative.detail.isRookie')
|
|
}}</QTooltip>
|
|
</QIcon>
|
|
<QIcon
|
|
v-if="props.row.peticionCompra"
|
|
name="vn:buyrequest"
|
|
size="xs"
|
|
color="primary"
|
|
class="cursor-pointer"
|
|
>
|
|
<QTooltip>{{
|
|
t(
|
|
'negative.detail.peticionCompra'
|
|
)
|
|
}}</QTooltip>
|
|
</QIcon>
|
|
<QIcon
|
|
v-if="props.row.turno"
|
|
name="vn:calendar"
|
|
size="xs"
|
|
color="primary"
|
|
class="cursor-pointer"
|
|
>
|
|
<QTooltip>{{
|
|
t('negative.detail.turno')
|
|
}}</QTooltip>
|
|
</QIcon>
|
|
</template>
|
|
<template v-if="col.name === 'ticketFk'"
|
|
>{{ col.value }}
|
|
<ItemDescriptorProxy
|
|
:id="$props.entityId"
|
|
/></template>
|
|
<template v-if="col.name === 'zoneName'">
|
|
{{ col.value }}
|
|
<ZoneDescriptorProxy
|
|
:id="props.row.zoneFk"
|
|
/>
|
|
</template>
|
|
</component>
|
|
</template>
|
|
</QTd>
|
|
</QTr>
|
|
</template>
|
|
</QTable>
|
|
</template>
|
|
</VnPaginate></div
|
|
></QPage>
|
|
|
|
<!--<HandleSplited
|
|
ref="splitDialogRef"
|
|
@hide="onDialogHide"
|
|
v-model="showSplitDialog"
|
|
:tickets="resultSplit"
|
|
></HandleSplited>-->
|
|
</template>
|