forked from verdnatura/salix-front
refs #7283 fixedPrices
This commit is contained in:
parent
b668d07e2d
commit
fe78de0c47
|
|
@ -1,7 +1,7 @@
|
||||||
<script setup>
|
<script setup>
|
||||||
import { onMounted, ref, reactive, computed, onUnmounted, watch } from 'vue';
|
import { onMounted, ref, reactive, computed, onUnmounted, watch } from 'vue';
|
||||||
import { useI18n } from 'vue-i18n';
|
import { useI18n } from 'vue-i18n';
|
||||||
|
import { toDate } from 'src/filters';
|
||||||
import FetchData from 'components/FetchData.vue';
|
import FetchData from 'components/FetchData.vue';
|
||||||
import FetchedTags from 'components/ui/FetchedTags.vue';
|
import FetchedTags from 'components/ui/FetchedTags.vue';
|
||||||
import VnInput from 'src/components/common/VnInput.vue';
|
import VnInput from 'src/components/common/VnInput.vue';
|
||||||
|
|
@ -10,7 +10,7 @@ import VnInputDate from 'src/components/common/VnInputDate.vue';
|
||||||
import EditTableCellValueForm from 'src/components/EditTableCellValueForm.vue';
|
import EditTableCellValueForm from 'src/components/EditTableCellValueForm.vue';
|
||||||
import ItemFixedPriceFilter from './ItemFixedPriceFilter.vue';
|
import ItemFixedPriceFilter from './ItemFixedPriceFilter.vue';
|
||||||
import ItemDescriptorProxy from './Card/ItemDescriptorProxy.vue';
|
import ItemDescriptorProxy from './Card/ItemDescriptorProxy.vue';
|
||||||
|
import VnTable from 'components/VnTable/VnTable.vue';
|
||||||
import { useStateStore } from 'stores/useStateStore';
|
import { useStateStore } from 'stores/useStateStore';
|
||||||
import { dashIfEmpty } from 'src/filters';
|
import { dashIfEmpty } from 'src/filters';
|
||||||
import { useVnConfirm } from 'composables/useVnConfirm';
|
import { useVnConfirm } from 'composables/useVnConfirm';
|
||||||
|
|
@ -27,7 +27,7 @@ const { t } = useI18n();
|
||||||
const { openConfirmationModal } = useVnConfirm();
|
const { openConfirmationModal } = useVnConfirm();
|
||||||
const state = useState();
|
const state = useState();
|
||||||
const { notify } = useNotify();
|
const { notify } = useNotify();
|
||||||
|
const tableRef = ref();
|
||||||
const editTableCellDialogRef = ref(null);
|
const editTableCellDialogRef = ref(null);
|
||||||
const user = state.getUser();
|
const user = state.getUser();
|
||||||
const fixedPrices = ref([]);
|
const fixedPrices = ref([]);
|
||||||
|
|
@ -111,86 +111,81 @@ const defaultColumnAttrs = {
|
||||||
const columns = computed(() => [
|
const columns = computed(() => [
|
||||||
{
|
{
|
||||||
label: t('item.fixedPrice.itemId'),
|
label: t('item.fixedPrice.itemId'),
|
||||||
name: 'itemId',
|
name: 'itemFk',
|
||||||
field: 'itemFk',
|
align: 'left',
|
||||||
...defaultColumnAttrs,
|
isId: true,
|
||||||
columnFilter: {
|
chip: {
|
||||||
...defaultColumnFilter,
|
condition: () => true,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: t('globals.description'),
|
label: t('globals.description'),
|
||||||
field: 'name',
|
|
||||||
name: 'description',
|
name: 'description',
|
||||||
...defaultColumnAttrs,
|
align: 'left',
|
||||||
columnFilter: {
|
create: true,
|
||||||
...defaultColumnFilter,
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: t('item.fixedPrice.groupingPrice'),
|
label: t('item.fixedPrice.groupingPrice'),
|
||||||
field: 'rate2',
|
name: 'rate2',
|
||||||
name: 'groupingPrice',
|
align: 'left',
|
||||||
...defaultColumnAttrs,
|
create: true,
|
||||||
columnFilter: {
|
|
||||||
...defaultColumnFilter,
|
|
||||||
},
|
|
||||||
format: (val) => toCurrency(val),
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: t('item.fixedPrice.packingPrice'),
|
label: t('item.fixedPrice.packingPrice'),
|
||||||
field: 'rate3',
|
name: 'rate3',
|
||||||
name: 'packingPrice',
|
align: 'left',
|
||||||
...defaultColumnAttrs,
|
create: true,
|
||||||
columnFilter: {
|
|
||||||
...defaultColumnFilter,
|
|
||||||
},
|
|
||||||
format: (val) => dashIfEmpty(val),
|
|
||||||
},
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
label: t('item.fixedPrice.minPrice'),
|
label: t('item.fixedPrice.minPrice'),
|
||||||
field: 'minPrice',
|
|
||||||
name: 'minPrice',
|
name: 'minPrice',
|
||||||
...defaultColumnAttrs,
|
align: 'left',
|
||||||
columnFilter: {
|
create: true,
|
||||||
...defaultColumnFilter,
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: t('item.fixedPrice.started'),
|
label: t('item.fixedPrice.started'),
|
||||||
field: 'started',
|
|
||||||
name: 'started',
|
name: 'started',
|
||||||
...defaultColumnAttrs,
|
align: 'left',
|
||||||
columnFilter: null,
|
create: true,
|
||||||
|
format: (row) => toDate(row.started),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: t('item.fixedPrice.ended'),
|
label: t('item.fixedPrice.ended'),
|
||||||
field: 'ended',
|
|
||||||
name: 'ended',
|
name: 'ended',
|
||||||
...defaultColumnAttrs,
|
align: 'left',
|
||||||
columnFilter: null,
|
create: true,
|
||||||
|
format: (row) => toDate(row.ended),
|
||||||
},
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
label: t('item.fixedPrice.warehouse'),
|
label: t('item.fixedPrice.warehouse'),
|
||||||
field: 'warehouseFk',
|
name: 'warehouseFk',
|
||||||
name: 'warehouse',
|
|
||||||
...defaultColumnAttrs,
|
|
||||||
columnFilter: {
|
columnFilter: {
|
||||||
component: VnSelect,
|
component: 'select',
|
||||||
type: 'select',
|
|
||||||
filterValue: null,
|
|
||||||
event: getColumnInputEvents,
|
|
||||||
attrs: {
|
attrs: {
|
||||||
options: warehousesOptions.value,
|
url: 'Warehouses',
|
||||||
'option-value': 'id',
|
optionValue: 'id',
|
||||||
'option-label': 'name',
|
optionLabel: 'name',
|
||||||
dense: true,
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
component: 'select',
|
||||||
|
attrs: {
|
||||||
|
url: 'Warehouses',
|
||||||
|
fields: ['id', 'name'],
|
||||||
|
},
|
||||||
|
disable: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
align: 'right',
|
||||||
|
label: '',
|
||||||
|
name: 'tableActions',
|
||||||
|
actions: [
|
||||||
|
{
|
||||||
|
title: t('Delete'),
|
||||||
|
icon: 'delete',
|
||||||
|
},
|
||||||
|
],
|
||||||
},
|
},
|
||||||
{ name: 'deleteAction', align: 'center' },
|
|
||||||
]);
|
]);
|
||||||
|
|
||||||
const editTableFieldsOptions = [
|
const editTableFieldsOptions = [
|
||||||
|
|
@ -364,212 +359,32 @@ onUnmounted(() => (stateStore.rightDrawer = false));
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<FetchData
|
<VnTable
|
||||||
url="Warehouses"
|
ref="tableRef"
|
||||||
:filter="{ order: ['name'] }"
|
data-key="ItemFixedPrices"
|
||||||
|
url="FixedPrices/filter"
|
||||||
|
:create="{
|
||||||
|
urlCreate: 'PriceFixed',
|
||||||
|
title: 'Create Item',
|
||||||
|
onDataSaved: () => tableRef.redirect(),
|
||||||
|
formInitialData: {},
|
||||||
|
}"
|
||||||
|
order="id ASC"
|
||||||
|
:columns="columns"
|
||||||
auto-load
|
auto-load
|
||||||
@on-fetch="(data) => onWarehousesFetched(data)"
|
:is-editable="false"
|
||||||
/>
|
:use-model="true"
|
||||||
<RightMenu>
|
>
|
||||||
<template #right-panel>
|
<template #column-description="{ row }">
|
||||||
<ItemFixedPriceFilter
|
<div class="row column full-width justify-between items-start">
|
||||||
data-key="ItemFixedPrices"
|
{{ row?.description }}
|
||||||
:warehouses-options="warehousesOptions"
|
<div v-if="row?.description" class="subName">
|
||||||
/>
|
{{ row?.subName.toUpperCase() }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<FetchedTags :item="row" :max-length="6" />
|
||||||
</template>
|
</template>
|
||||||
</RightMenu>
|
</VnTable>
|
||||||
<QPage class="column items-center q-pa-md">
|
|
||||||
<QTable
|
|
||||||
:rows="fixedPrices"
|
|
||||||
:columns="columns"
|
|
||||||
row-key="id"
|
|
||||||
selection="multiple"
|
|
||||||
v-model:selected="rowsSelected"
|
|
||||||
:pagination="{ rowsPerPage: 0 }"
|
|
||||||
class="full-width q-mt-md"
|
|
||||||
:no-data-label="t('globals.noResults')"
|
|
||||||
>
|
|
||||||
<template #top-row="{ cols }">
|
|
||||||
<QTr>
|
|
||||||
<QTd />
|
|
||||||
<QTd
|
|
||||||
v-for="(col, index) in cols"
|
|
||||||
:key="index"
|
|
||||||
style="max-width: 100px"
|
|
||||||
>
|
|
||||||
<component
|
|
||||||
:is="col.columnFilter.component"
|
|
||||||
v-if="col.columnFilter"
|
|
||||||
v-model="col.columnFilter.filterValue"
|
|
||||||
v-bind="col.columnFilter.attrs"
|
|
||||||
v-on="col.columnFilter.event(col)"
|
|
||||||
dense
|
|
||||||
/>
|
|
||||||
</QTd>
|
|
||||||
</QTr>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<template #body-cell-itemId="props">
|
|
||||||
<QTd>
|
|
||||||
<VnSelect
|
|
||||||
url="Items/withName"
|
|
||||||
hide-selected
|
|
||||||
option-label="id"
|
|
||||||
option-value="id"
|
|
||||||
v-model="props.row.itemFk"
|
|
||||||
v-on="getRowUpdateInputEvents(props, true, 'select')"
|
|
||||||
>
|
|
||||||
<template #option="scope">
|
|
||||||
<QItem v-bind="scope.itemProps">
|
|
||||||
<QItemSection>
|
|
||||||
<QItemLabel> #{{ scope.opt?.id }} </QItemLabel>
|
|
||||||
<QItemLabel caption>{{ scope.opt?.name }}</QItemLabel>
|
|
||||||
</QItemSection>
|
|
||||||
</QItem>
|
|
||||||
</template>
|
|
||||||
</VnSelect>
|
|
||||||
</QTd>
|
|
||||||
</template>
|
|
||||||
<template #body-cell-description="{ row }">
|
|
||||||
<QTd class="col">
|
|
||||||
<span class="link">
|
|
||||||
{{ row.name }}
|
|
||||||
</span>
|
|
||||||
<ItemDescriptorProxy :id="row.itemFk" />
|
|
||||||
<FetchedTags :item="row" :max-length="6" />
|
|
||||||
</QTd>
|
|
||||||
</template>
|
|
||||||
<template #body-cell-groupingPrice="props">
|
|
||||||
<QTd class="col">
|
|
||||||
<VnInput
|
|
||||||
v-model.number="props.row.rate2"
|
|
||||||
v-on="getRowUpdateInputEvents(props)"
|
|
||||||
>
|
|
||||||
<template #append>€</template>
|
|
||||||
</VnInput>
|
|
||||||
</QTd>
|
|
||||||
</template>
|
|
||||||
<template #body-cell-packingPrice="props">
|
|
||||||
<QTd class="col">
|
|
||||||
<VnInput
|
|
||||||
v-model.number="props.row.rate3"
|
|
||||||
v-on="getRowUpdateInputEvents(props)"
|
|
||||||
>
|
|
||||||
<template #append>€</template>
|
|
||||||
</VnInput>
|
|
||||||
</QTd>
|
|
||||||
</template>
|
|
||||||
<template #body-cell-minPrice="props">
|
|
||||||
<QTd class="col">
|
|
||||||
<div class="row">
|
|
||||||
<QCheckbox
|
|
||||||
class="col"
|
|
||||||
:model-value="props.row.hasMinPrice"
|
|
||||||
@update:model-value="updateMinPrice($event, props)"
|
|
||||||
:false-value="0"
|
|
||||||
:true-value="1"
|
|
||||||
:toggle-indeterminate="false"
|
|
||||||
/>
|
|
||||||
<VnInput
|
|
||||||
class="col"
|
|
||||||
:disable="!props.row.hasMinPrice"
|
|
||||||
v-model.number="props.row.minPrice"
|
|
||||||
v-on="getRowUpdateInputEvents(props)"
|
|
||||||
type="number"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</QTd>
|
|
||||||
</template>
|
|
||||||
<template #body-cell-started="props">
|
|
||||||
<QTd class="col" style="min-width: 160px">
|
|
||||||
<VnInputDate
|
|
||||||
v-model="props.row.started"
|
|
||||||
v-on="getRowUpdateInputEvents(props, false, 'date')"
|
|
||||||
v-bind="
|
|
||||||
isBigger(props.row.started)
|
|
||||||
? { 'bg-color': 'warning', 'is-outlined': true }
|
|
||||||
: {}
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
</QTd>
|
|
||||||
</template>
|
|
||||||
<template #body-cell-ended="props">
|
|
||||||
<QTd class="col" style="min-width: 150px">
|
|
||||||
<VnInputDate
|
|
||||||
v-model="props.row.ended"
|
|
||||||
v-on="getRowUpdateInputEvents(props, false, 'date')"
|
|
||||||
v-bind="
|
|
||||||
isLower(props.row.ended)
|
|
||||||
? { 'bg-color': 'warning', 'is-outlined': true }
|
|
||||||
: {}
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
</QTd>
|
|
||||||
</template>
|
|
||||||
<template #body-cell-warehouse="props">
|
|
||||||
<QTd class="col">
|
|
||||||
<VnSelect
|
|
||||||
:options="warehousesOptions"
|
|
||||||
hide-selected
|
|
||||||
option-label="name"
|
|
||||||
option-value="id"
|
|
||||||
v-model="props.row.warehouseFk"
|
|
||||||
v-on="getRowUpdateInputEvents(props, false, 'select')"
|
|
||||||
/>
|
|
||||||
</QTd>
|
|
||||||
</template>
|
|
||||||
<template #body-cell-deleteAction="{ row, rowIndex }">
|
|
||||||
<QTd class="col">
|
|
||||||
<QIcon
|
|
||||||
name="delete"
|
|
||||||
size="sm"
|
|
||||||
class="cursor-pointer fill-icon-on-hover"
|
|
||||||
color="primary"
|
|
||||||
@click.stop="
|
|
||||||
openConfirmationModal(
|
|
||||||
t('This row will be removed'),
|
|
||||||
t('Do you want to clone this item?'),
|
|
||||||
() => removePrice(row.id, rowIndex)
|
|
||||||
)
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<QTooltip class="text-no-wrap">
|
|
||||||
{{ t('Delete') }}
|
|
||||||
</QTooltip>
|
|
||||||
</QIcon>
|
|
||||||
</QTd>
|
|
||||||
</template>
|
|
||||||
<template #bottom-row>
|
|
||||||
<QTd align="center">
|
|
||||||
<QIcon
|
|
||||||
@click.stop="addRow()"
|
|
||||||
class="fill-icon-on-hover"
|
|
||||||
color="primary"
|
|
||||||
name="add_circle"
|
|
||||||
size="sm"
|
|
||||||
>
|
|
||||||
<QTooltip>
|
|
||||||
{{ t('Add fixed price') }}
|
|
||||||
</QTooltip>
|
|
||||||
</QIcon>
|
|
||||||
</QTd>
|
|
||||||
</template>
|
|
||||||
</QTable>
|
|
||||||
<QPageSticky v-if="rowsSelected.length" :offset="[20, 20]">
|
|
||||||
<QBtn @click="openEditTableCellDialog()" color="primary" fab icon="edit" />
|
|
||||||
<QTooltip>
|
|
||||||
{{ t('Edit fixed price(s)') }}
|
|
||||||
</QTooltip>
|
|
||||||
</QPageSticky>
|
|
||||||
<QDialog ref="editTableCellDialogRef">
|
|
||||||
<EditTableCellValueForm
|
|
||||||
edit-url="FixedPrices/editFixedPrice"
|
|
||||||
:rows="rowsSelected"
|
|
||||||
:fields-options="editTableFieldsOptions"
|
|
||||||
@on-data-saved="onEditCellDataSaved()"
|
|
||||||
/>
|
|
||||||
</QDialog>
|
|
||||||
</QPage>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<i18n>
|
<i18n>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue