feat: refs #6321 updates
This commit is contained in:
parent
7da3f132ea
commit
d7f37eff32
|
@ -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',
|
||||
style: 'max-width: 75px',
|
||||
columnFilter: {
|
||||
component: 'input',
|
||||
type: 'number',
|
||||
class: 'shrink',
|
||||
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,22 +245,32 @@ 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"> -->
|
||||
<QTd style="max-width: 800px">
|
||||
<QTooltip>
|
||||
{{ row.id }}
|
||||
</QTooltip>
|
||||
<!-- <QBtn flat color="blue" dense>{{ }}</QBtn> -->
|
||||
<span class="link">{{ row.longName }}</span>
|
||||
<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">
|
||||
<span style="font-size: xx-small">{{ row.price2 }}</span>
|
||||
<!-- -->
|
||||
|
||||
<VnImg
|
||||
:id="row.id"
|
||||
spinner-color="primary"
|
||||
|
@ -239,15 +279,43 @@ function handleSelection(value, _) {
|
|||
width="50px"
|
||||
class="image remove-bg"
|
||||
/>
|
||||
<span style="font-size: xx-small">ID: {{ row.id }}</span>
|
||||
<!-- <span style="font-size: xx-small">ID:</span> -->
|
||||
</div>
|
||||
<div style="display: flex; align-items: center">
|
||||
<FetchedTags :item="row" />
|
||||
<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>
|
||||
<!-- </QTd> -->
|
||||
</div>
|
||||
</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>
|
||||
<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>
|
||||
|
|
|
@ -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 />
|
||||
|
|
|
@ -100,7 +100,7 @@ proposal:
|
|||
value8: value8
|
||||
available: Available
|
||||
minQuantity: minQuantity
|
||||
price2: price2
|
||||
price2: Price
|
||||
located: Located
|
||||
counter: Counter
|
||||
groupingPrice: Grouping Price
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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"
|
||||
|
|
|
@ -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)"
|
||||
|
|
|
@ -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'
|
||||
|
|
Loading…
Reference in New Issue