forked from verdnatura/salix-front
feat: refs #6321 changes
This commit is contained in:
parent
de454313cf
commit
aa53feea39
|
@ -7,8 +7,10 @@ import VnStockValueDisplay from 'src/components/ui/VnStockValueDisplay.vue';
|
||||||
import VnTable from 'src/components/VnTable/VnTable.vue';
|
import VnTable from 'src/components/VnTable/VnTable.vue';
|
||||||
import axios from 'axios';
|
import axios from 'axios';
|
||||||
import notifyResults from 'src/utils/notifyResults';
|
import notifyResults from 'src/utils/notifyResults';
|
||||||
|
import FetchData from 'components/FetchData.vue';
|
||||||
|
|
||||||
|
const MATCH = 'match';
|
||||||
|
|
||||||
const MATCH_VALUES = [5, 6, 7, 8];
|
|
||||||
const { t } = useI18n();
|
const { t } = useI18n();
|
||||||
const $props = defineProps({
|
const $props = defineProps({
|
||||||
itemLack: {
|
itemLack: {
|
||||||
|
@ -34,6 +36,7 @@ const filter = computed(() => ({
|
||||||
itemFk: $props.itemLack.itemFk,
|
itemFk: $props.itemLack.itemFk,
|
||||||
sales: saleFk.value,
|
sales: saleFk.value,
|
||||||
}));
|
}));
|
||||||
|
|
||||||
const proposalTableRef = ref(null);
|
const proposalTableRef = ref(null);
|
||||||
const defaultColumnAttrs = {
|
const defaultColumnAttrs = {
|
||||||
align: 'center',
|
align: 'center',
|
||||||
|
@ -45,13 +48,12 @@ const columns = computed(() => [
|
||||||
label: t('proposal.available'),
|
label: t('proposal.available'),
|
||||||
name: 'available',
|
name: 'available',
|
||||||
field: 'available',
|
field: 'available',
|
||||||
columnClass: 'shrink',
|
|
||||||
style: 'max-width: 75px',
|
|
||||||
columnFilter: {
|
columnFilter: {
|
||||||
component: 'input',
|
component: 'input',
|
||||||
type: 'number',
|
type: 'number',
|
||||||
columnClass: 'shrink',
|
columnClass: 'shrink',
|
||||||
},
|
},
|
||||||
|
columnClass: 'shrink',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
...defaultColumnAttrs,
|
...defaultColumnAttrs,
|
||||||
|
@ -145,28 +147,32 @@ const columns = computed(() => [
|
||||||
},
|
},
|
||||||
]);
|
]);
|
||||||
|
|
||||||
const compatibilityItem = (value) => 100 * (value / MATCH_VALUES.length);
|
function extractMatchValues(obj) {
|
||||||
|
return Object.keys(obj)
|
||||||
|
.filter((key) => key.startsWith(MATCH))
|
||||||
|
.map((key) => parseInt(key.replace(MATCH, ''), 10));
|
||||||
|
}
|
||||||
const gradientStyle = (value) => {
|
const gradientStyle = (value) => {
|
||||||
let color = 'white';
|
let color = 'white';
|
||||||
const perc = parseFloat(compatibilityItem(value));
|
const perc = parseFloat(value);
|
||||||
switch (true) {
|
switch (true) {
|
||||||
case perc >= 0 && perc < 33:
|
case perc >= 0 && perc < 33:
|
||||||
color = 'orange';
|
color = 'primary';
|
||||||
break;
|
break;
|
||||||
case perc >= 33 && perc < 66:
|
case perc >= 33 && perc < 66:
|
||||||
color = 'yellow';
|
color = 'warning';
|
||||||
break;
|
break;
|
||||||
|
|
||||||
default:
|
default:
|
||||||
color = 'green';
|
color = 'secondary';
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
return color;
|
return color;
|
||||||
};
|
};
|
||||||
const statusConditionalValue = (row) => {
|
const statusConditionalValue = (row) => {
|
||||||
const total = MATCH_VALUES.reduce((acc, i) => acc + row[`match${i}`], 0);
|
const matches = extractMatchValues(row);
|
||||||
return total;
|
const value = matches.reduce((acc, i) => acc + row[`${MATCH}${i}`], 0);
|
||||||
|
return 100 * (value / matches.length);
|
||||||
};
|
};
|
||||||
|
|
||||||
const emit = defineEmits(['onDialogClosed', 'itemReplaced']);
|
const emit = defineEmits(['onDialogClosed', 'itemReplaced']);
|
||||||
|
@ -196,11 +202,11 @@ async function change({ itemFk: substitutionFk }) {
|
||||||
console.error(error);
|
console.error(error);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
const ticketConfig = ref({});
|
||||||
const isSelectionAvailable = (itemProposal) => {
|
const isSelectionAvailable = (itemProposal) => {
|
||||||
const { price2 } = itemProposal;
|
const { price2 } = itemProposal;
|
||||||
const salePrice = sale.value.price;
|
const salePrice = sale.value.price;
|
||||||
const byPrice = (100 * price2) / salePrice > 30;
|
const byPrice = (100 * price2) / salePrice > ticketConfig.value.lackAlertPrice;
|
||||||
if (byPrice) {
|
if (byPrice) {
|
||||||
return byPrice;
|
return byPrice;
|
||||||
}
|
}
|
||||||
|
@ -208,15 +214,26 @@ const isSelectionAvailable = (itemProposal) => {
|
||||||
(100 * itemProposal.available) / Math.abs($props.itemLack.lack) < 30;
|
(100 * itemProposal.available) / Math.abs($props.itemLack.lack) < 30;
|
||||||
return byQuantity;
|
return byQuantity;
|
||||||
};
|
};
|
||||||
|
async function handleTicketConfig(data) {
|
||||||
|
ticketConfig.value = data[0];
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
|
<FetchData
|
||||||
|
url="TicketConfigs"
|
||||||
|
:filter="{ fields: ['lackAlertPrice'] }"
|
||||||
|
@on-fetch="handleTicketConfig"
|
||||||
|
auto-load
|
||||||
|
/>
|
||||||
|
|
||||||
<VnTable
|
<VnTable
|
||||||
|
v-if="ticketConfig"
|
||||||
|
auto-load
|
||||||
data-cy="proposalTable"
|
data-cy="proposalTable"
|
||||||
ref="proposalTableRef"
|
ref="proposalTableRef"
|
||||||
data-key="ItemsGetSimilar"
|
data-key="ItemsGetSimilar"
|
||||||
url="Items/getSimilar"
|
url="Items/getSimilar"
|
||||||
:user-filter="filter"
|
:user-filter="filter"
|
||||||
auto-load
|
|
||||||
:columns="columns"
|
:columns="columns"
|
||||||
class="full-width q-mt-md"
|
class="full-width q-mt-md"
|
||||||
row-key="id"
|
row-key="id"
|
||||||
|
@ -231,19 +248,11 @@ const isSelectionAvailable = (itemProposal) => {
|
||||||
class="flex"
|
class="flex"
|
||||||
style="max-width: 100%; flex-shrink: 50px; flex-wrap: nowrap"
|
style="max-width: 100%; flex-shrink: 50px; flex-wrap: nowrap"
|
||||||
>
|
>
|
||||||
<QTooltip>
|
|
||||||
{{ row.id }}
|
|
||||||
</QTooltip>
|
|
||||||
|
|
||||||
<div
|
<div
|
||||||
class="middle full-width"
|
class="middle full-width"
|
||||||
:style="{
|
:class="[`proposal-${gradientStyle(statusConditionalValue(row))}`]"
|
||||||
background: gradientStyle(statusConditionalValue(row)),
|
|
||||||
}"
|
|
||||||
>
|
>
|
||||||
<QTooltip>
|
<QTooltip> {{ statusConditionalValue(row) }}% </QTooltip>
|
||||||
{{ compatibilityItem(statusConditionalValue(row)) }}%
|
|
||||||
</QTooltip>
|
|
||||||
</div>
|
</div>
|
||||||
<div style="flex: 2 0 100%; align-content: center">
|
<div style="flex: 2 0 100%; align-content: center">
|
||||||
<div>
|
<div>
|
||||||
|
@ -285,6 +294,7 @@ const isSelectionAvailable = (itemProposal) => {
|
||||||
</VnTable>
|
</VnTable>
|
||||||
</template>
|
</template>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
@import 'src/css/quasar.variables.scss';
|
||||||
.middle {
|
.middle {
|
||||||
float: left;
|
float: left;
|
||||||
margin-right: 2px;
|
margin-right: 2px;
|
||||||
|
@ -296,6 +306,15 @@ const isSelectionAvailable = (itemProposal) => {
|
||||||
.not-match {
|
.not-match {
|
||||||
color: inherit;
|
color: inherit;
|
||||||
}
|
}
|
||||||
|
.proposal-warning {
|
||||||
|
background-color: $warning;
|
||||||
|
}
|
||||||
|
.proposal-secondary {
|
||||||
|
background-color: $secondary;
|
||||||
|
}
|
||||||
|
.proposal-primary {
|
||||||
|
background-color: $primary;
|
||||||
|
}
|
||||||
.text {
|
.text {
|
||||||
margin: 0.05rem;
|
margin: 0.05rem;
|
||||||
padding: 1px;
|
padding: 1px;
|
||||||
|
|
|
@ -40,7 +40,7 @@ const filterLack = ref({
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
where: { ...$props.filter },
|
where: { ...$props.filter },
|
||||||
order: 'ts.alertLevelCODE ASC',
|
order: 'ts.alertLevelCode ASC',
|
||||||
});
|
});
|
||||||
|
|
||||||
const selectedRows = ref([]);
|
const selectedRows = ref([]);
|
||||||
|
@ -190,7 +190,7 @@ function onBuysFetched(data) {
|
||||||
<FetchData
|
<FetchData
|
||||||
:url="`Buys/latestBuysFilter`"
|
:url="`Buys/latestBuysFilter`"
|
||||||
:fields="['longName']"
|
:fields="['longName']"
|
||||||
:filter="{ where: { 'i.id': '2' } }"
|
:filter="{ where: { 'i.id': entityId } }"
|
||||||
@on-fetch="onBuysFetched"
|
@on-fetch="onBuysFetched"
|
||||||
auto-load
|
auto-load
|
||||||
/>
|
/>
|
||||||
|
|
|
@ -238,7 +238,6 @@ negative:
|
||||||
peticionCompra: 'Ticket request'
|
peticionCompra: 'Ticket request'
|
||||||
isRookie: 'Is rookie'
|
isRookie: 'Is rookie'
|
||||||
turno: 'Turn line'
|
turno: 'Turn line'
|
||||||
showFree: Show Free lines
|
|
||||||
isBasket: 'Basket'
|
isBasket: 'Basket'
|
||||||
hasSubstitution: 'Has substitution'
|
hasSubstitution: 'Has substitution'
|
||||||
hasToIgnore: VIP
|
hasToIgnore: VIP
|
||||||
|
|
|
@ -266,7 +266,6 @@ negative:
|
||||||
peticionCompra: 'Petición compra'
|
peticionCompra: 'Petición compra'
|
||||||
isRookie: 'Cliente nuevo'
|
isRookie: 'Cliente nuevo'
|
||||||
turno: 'Linea turno'
|
turno: 'Linea turno'
|
||||||
showFree: Solo estado libre
|
|
||||||
isBasket: 'Cesta'
|
isBasket: 'Cesta'
|
||||||
hasSubstitution: 'Tiene sustitución'
|
hasSubstitution: 'Tiene sustitución'
|
||||||
hasToIgnore: VIP
|
hasToIgnore: VIP
|
||||||
|
|
|
@ -245,7 +245,6 @@ export default {
|
||||||
title: 'negative',
|
title: 'negative',
|
||||||
icon: 'exposure',
|
icon: 'exposure',
|
||||||
},
|
},
|
||||||
// redirect: { name: 'TicketNegative' },
|
|
||||||
component: () =>
|
component: () =>
|
||||||
import('src/pages/Ticket/Negative/TicketLackList.vue'),
|
import('src/pages/Ticket/Negative/TicketLackList.vue'),
|
||||||
path: '',
|
path: '',
|
||||||
|
|
Loading…
Reference in New Issue