feat: refs #6321 updates

This commit is contained in:
Javier Segarra 2024-09-24 22:11:41 +02:00
parent 7da3f132ea
commit d7f37eff32
7 changed files with 172 additions and 86 deletions

View File

@ -1,15 +1,14 @@
<script setup>
import { ref, computed, onUnmounted } from 'vue';
import axios from 'axios';
// import axios from 'axios';
import { useI18n } from 'vue-i18n';
import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
import FetchedTags from 'components/ui/FetchedTags.vue';
import VnImg from 'src/components/ui/VnImg.vue';
import { toCurrency } from 'filters/index';
import VnStockValueDisplay from 'src/components/ui/VnStockValueDisplay.vue';
// import { useDialogPluginComponent } from 'quasar';
import VnTable from 'src/components/VnTable/VnTable.vue';
import VnInputNumber from 'src/components/common/VnInputNumber.vue';
import VnInput from 'src/components/common/VnInput.vue';
const MATCH_VALUES = [5, 6, 7, 8];
const { t } = useI18n();
@ -43,10 +42,10 @@ const proposalSelected = ref([]);
const quantity = ref(-1);
const defaultColumnAttrs = {
align: 'center',
sortable: true,
sortable: false,
};
const ticket = computed(() => $props.sales[0]);
const saleFk = computed(() => ticket.value.saleFk);
const sale = computed(() => $props.sales[0]);
const saleFk = computed(() => sale.value.saleFk);
const statusConditionalValue = (row) => {
const total = MATCH_VALUES.reduce((acc, i) => acc + row[`match${i}`], 0);
return total;
@ -62,26 +61,39 @@ const columns = computed(() => [
label: t('proposal.available'),
name: 'available',
field: 'available',
type: 'number',
},
{
...defaultColumnAttrs,
label: t('proposal.difference'),
name: 'difference',
columnClass: 'shrink',
style: 'max-width: 75px',
columnFilter: {
component: 'input',
type: 'number',
columnClass: 'shrink',
},
},
{
...defaultColumnAttrs,
label: t('proposal.compatibility'),
name: 'status',
field: statusConditionalValue,
sortable: true,
},
// {
// ...defaultColumnAttrs,
// label: t('proposal.difference'),
// name: 'difference',
// style: 'max-width: 75px',
// },
// {
// ...defaultColumnAttrs,
// label: t('proposal.compatibility'),
// name: 'status',
// field: statusConditionalValue,
// sortable: true,
// },
{
...defaultColumnAttrs,
label: t('proposal.counter'),
name: 'counter',
field: 'counter',
columnClass: 'shrink',
style: 'max-width: 75px',
columnFilter: {
component: 'input',
type: 'number',
columnClass: 'shrink',
},
},
{
@ -91,23 +103,30 @@ const columns = computed(() => [
name: 'longName',
field: 'longName',
columnClass: 'expand',
columnFilter: { class: 'expand' },
},
{
...defaultColumnAttrs,
label: t('proposal.price2'),
name: 'price2',
class: 'shrink',
style: 'max-width: 75px',
columnFilter: {
component: 'input',
type: 'number',
columnClass: 'shrink',
},
},
{
...defaultColumnAttrs,
label: t('proposal.minQuantity'),
name: 'minQuantity',
field: 'minQuantity',
component: 'input',
type: 'number',
class: 'shrink',
style: 'max-width: 75px',
columnFilter: {
component: 'input',
type: 'number',
columnClass: 'shrink',
},
},
{
...defaultColumnAttrs,
@ -126,13 +145,14 @@ async function confirm() {
// };
// const { data } = await axios.post('Sales/replaceItem', params);
const params = [saleFk.value, proposalSelected.value[0].id, quantity.value];
const { data } = await axios.post('Applications/sale_replaceItem/execute-proc', {
schema: 'vn',
params,
});
// const { data } = await axios.post('Applications/sale_replaceItem/execute-proc', {
// schema: 'vn',
// params,
// });
proposalTableRef.value.reload();
emit('itemReplaced', {
type: 'refresh',
quantity: quantity.value,
itemProposal: proposalSelected.value[0],
...params,
});
@ -153,18 +173,23 @@ onUnmounted(() => {});
function handleSelection(value, _) {
quantity.value = value.available;
}
// const isSelectionAvailable = (data) => {
// if (!data?.row) return false;
// const { row } = data;
// return $props.replaceAction && row.available >= Math.abs($props.itemLack.lack);
// };
const isSelectionAvailable = (itemProposal) => {
const { price2 } = itemProposal;
const salePrice = sale.value.price;
// debugger;
const byPrice = (100 * price2) / salePrice > 30;
if (byPrice) {
return byPrice;
}
const byQuantity =
(100 * itemProposal.available) / Math.abs($props.itemLack.lack) < 30;
return byQuantity;
// return $props.replaceAction && row.available >= Math.abs($props.itemLack.lack);
};
// watch(proposalSelected, ({ available }) => (quantity.value = available));
</script>
<template>
<div style="min-width: 65vw">
{{ sales }}
<br />
{{ itemLack }}
<VnTable
ref="proposalTableRef"
data-key="ItemsGetSimilar"
@ -197,16 +222,21 @@ function handleSelection(value, _) {
:loading="isLoading"
@click="confirm"
style="padding-block: 8px"
:disable="proposalSelected.length < 1 || quantity === 0"
:disable="
proposalSelected.length < 1 ||
quantity === 0 ||
quantity > Math.abs(itemLack.lack)
"
/>
<VnInputNumber
v-model.number="quantity"
<VnInput
v-model="quantity"
v-if="proposalSelected.length > 0"
@update:model-value="(val) => (quantity = val)"
type="number"
min="0"
:max="Math.abs(itemLack.lack)"
:label="t('proposal.quantityToReplace')"
dense
autofocus
class="q-ml-xs"
/></div
></template>
@ -215,39 +245,77 @@ function handleSelection(value, _) {
<QCheckbox
class="q-ma-xs"
flat
:disable="isSelectionAvailable(props.row)"
v-model="props.selected"
@update:model-value="(evt, _) => handleSelection(props.row, null)"
>
<QTooltip>
<span v-if="isSelectionAvailable(props.row)">{{
t('proposal.available')
}}</span>
<span v-else>{{ t('proposal.available') }}</span>
</QTooltip>
</QCheckbox>
</template>
<template #column-longName="{ row }">
<!-- <QTd align="left" class="text-primary"> -->
<QTooltip>
{{ row.id }}
</QTooltip>
<!-- <QBtn flat color="blue" dense>{{ }}</QBtn> -->
<span class="link">{{ row.longName }}</span>
<ItemDescriptorProxy :id="row.id" />
<div style="display: flex; flex-direction: row">
<div style="display: flex; flex-direction: column">
<span style="font-size: xx-small">{{ row.price2 }}</span>
<VnImg
:id="row.id"
spinner-color="primary"
:ratio="1"
height="50px"
width="50px"
class="image remove-bg"
/>
<span style="font-size: xx-small">ID: {{ row.id }}</span>
<QTd style="max-width: 800px">
<QTooltip>
{{ row.id }}
</QTooltip>
<!-- <QBtn flat color="blue" dense>{{ }}</QBtn> -->
<span style="font-size: x-small">({{ row.id }})</span
><span class="link">{{ row.longName }}</span>
<ItemDescriptorProxy :id="row.id" />
<div style="display: flex; flex-direction: row">
<div style="display: flex; flex-direction: column">
<!-- -->
<VnImg
:id="row.id"
spinner-color="primary"
:ratio="1"
height="50px"
width="50px"
class="image remove-bg"
/>
<!-- <span style="font-size: xx-small">ID:</span> -->
</div>
<div
style="
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
"
>
<FetchedTags :item="row" class="q-mb-xs" />
<div
:style="{
background: gradientStyle(
statusConditionalValue(row)
),
}"
class="compatibility"
>
<QTooltip>
{{ compatibilityItem(statusConditionalValue(row)) }}
</QTooltip>
</div>
</div>
</div>
<div style="display: flex; align-items: center">
<FetchedTags :item="row" />
</div>
</div>
<!-- </QTd> -->
</QTd>
</template>
<template #column-status="{ row }">
<template #column-available="{ row }">
{{ row.available }}
</template>
<template #column-counter="{ row }">
{{ row.counter }}
</template>
<template #column-minQuantity="{ row }">
{{ row.minQuantity }}
</template>
<!-- <template #column-status="{ row }">
<div
:style="{ background: gradientStyle(statusConditionalValue(row)) }"
class="compatibility"
@ -256,14 +324,21 @@ function handleSelection(value, _) {
{{ compatibilityItem(statusConditionalValue(row)) }}
</QTooltip>
</div>
</template>
</template> -->
<template #column-price2="{ row }">
<QTooltip>
{{ toCurrency(row.price2) }}
</QTooltip>
<span :class="[conditionalValuePrice(row.price2)]">{{
toCurrency(row.price2)
}}</span>
<div
style="
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
"
>
<VnStockValueDisplay :value="sales[0].price - row.price2" />
<span :class="[conditionalValuePrice(row.price2)]">{{
toCurrency(row.price2)
}}</span>
</div>
</template>
<template #column-difference="{ row }">
<VnStockValueDisplay :value="sales[0].price - row.price2" />
@ -273,7 +348,8 @@ function handleSelection(value, _) {
</template>
<style lang="scss">
.compatibility {
height: 10px;
height: 1vh;
width: 100%;
}
.match {
@ -292,3 +368,7 @@ function handleSelection(value, _) {
font-size: 16px;
}
</style>
<i18n>
en:
</i18n>

View File

@ -25,7 +25,7 @@ const $props = defineProps({
</script>
<template>
<QPopupProxy>
<QCard class="q-pa-sm">
<QCard>
<QCardSection class="row items-center q-pb-none">
<span class="text-h6 text-grey">{{ $t('Item proposal') }}</span>
<QSpace />

View File

@ -100,7 +100,7 @@ proposal:
value8: value8
available: Available
minQuantity: minQuantity
price2: price2
price2: Price
located: Located
counter: Counter
groupingPrice: Grouping Price

View File

@ -90,6 +90,9 @@ itemType:
temperature: Temperatura
itemProposal: Artículos similares
proposal:
substitutionAvailable: Sustitución disponible
notSubstitutionAvailableByPrice: Sustitución no disponible, 30% de diferencia por precio o cantidad
compatibility: Compatibilidad
title: Items de sustitución para los tickets seleccionados
itemFk: Item
longName: Nombre

View File

@ -30,7 +30,7 @@ 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);
@ -76,8 +76,11 @@ defineExpose({ reload });
// return rows;
// };
const itemProposalEvt = ({ itemProposal }) => {
const itemProposalEvt = (data) => {
const { itemProposal, quantity } = data;
itemProposalSelected.value = itemProposal;
// badgeLackRef.value.reload();
itemLack.value.lack += +quantity;
tableRef.value.reload();
// replaceItem();
};
@ -134,8 +137,8 @@ const itemProposalSelected = ref(null);
<QBtnGroup push style="column-gap: 1px">
<TicketMassiveUpdate
:disable="selectedRows.length < 2"
label="negative.buttonsUpdate.state"
tooltip="negative.detail.modal.changeState.title"
:label="t('negative.buttonsUpdate.state')"
:tooltip="t('negative.detail.modal.changeState.title')"
>
<ChangeStateDialog
ref="changeStateDialogRef"
@ -143,10 +146,10 @@ const itemProposalSelected = ref(null);
></ChangeStateDialog>
</TicketMassiveUpdate>
<TicketMassiveUpdate
label="negative.buttonsUpdate.quantity"
:label="t('negative.buttonsUpdate.quantity')"
:tooltip="t('negative.detail.modal.changeQuantity.title')"
@click="showChangeQuantityDialog = true"
:disable="selectedRows.length < 2"
tooltip="negative.detail.modal.changeQuantity.title"
>
<ChangeQuantityDialog
ref="changeQuantityDialogRef"
@ -210,6 +213,7 @@ const itemProposalSelected = ref(null);
"
>
<QBadge
ref="badgeLackRef"
class="q-ml-xs"
v-if="itemLack"
text-color="white"

View File

@ -177,7 +177,7 @@ const itemLackForm = ref();
const reload = async (data) => {
// window.location.reload();
console.err(data);
console.error(data);
};
defineExpose({ reload });
const emit = defineEmits(['update:selection']);
@ -187,7 +187,6 @@ watch(selectedRows, () => emit('update:selection', selectedRows));
</script>
<template>
{{ selectedRows }}
<FetchData
url="States/editableStates"
@on-fetch="(data) => (editableStates = data)"

View File

@ -268,9 +268,9 @@ negative:
totalNegative: 'Total negatives'
days: Days
buttonsUpdate:
itemProposal: artículo
state: Estado
quantity: Cantidad
itemProposal: Item
state: State
quantity: Quantity
modalOrigin:
title: 'Update negatives'
question: 'Select a state to update'