salix-front/src/pages/Entry/Card/EntryBuys.vue

<script setup>
import { useStateStore } from 'stores/useStateStore';
import { useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n';
import { onMounted, ref } from 'vue';

import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
import VnTable from 'src/components/VnTable/VnTable.vue';
import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
import FetchedTags from 'components/ui/FetchedTags.vue';
import VnColor from 'src/components/VnColor.vue';

const { t } = useI18n();
const stateStore = useStateStore();
const route = useRoute();
const selectedRows = ref([]);
const columns = [
    {
        name: 'buyFk',
        isId: true,
        visible: false,
        isEditable: false,
    },
    {
        align: 'center',
        label: 'Nv',
        name: 'isIgnored',
        component: 'checkbox',
        width: '35px',
    },
    {
        align: 'center',
        label: 'Id',
        name: 'itemFk',
        component: 'input',
        create: true,
        width: '45px',
    },
    {
        label: '',
        name: 'hex',
        columnSearch: false,
        isEditable: false,
        width: '5px',
    },
    {
        align: 'center',
        label: t('Article'),
        name: 'name',
        width: '100px',
        isEditable: false,
    },
    {
        align: 'center',
        label: t('Size'),
        name: 'size',
        width: '35px',
        isEditable: false,
        style: () => {
            return { color: 'var(--vn-label-color)' };
        },
    },
    {
        align: 'center',
        label: t('Sti.'),
        name: 'stickers',
        component: 'number',
        width: '35px',
    },
    {
        align: 'center',
        label: t('Bucket'),
        name: 'packagingFk',
        component: 'select',
        attrs: {
            url: 'packagings',
            fields: ['id', 'volume'],
            optionLabel: 'id',
        },
        width: '60px',
    },
    {
        align: 'center',
        label: 'Kg',
        name: 'weight',
        component: 'number',
        create: true,
        width: '35px',
    },
    {
        label: 'Pack',
        name: 'packing',
        component: 'number',
        width: '35px',
        style: (row) => {
            if (row.groupingMode === 'grouping') {
                return { color: 'var(--vn-label-color)' };
            }
        },
    },
    {
        label: 'Group',
        name: 'grouping',
        component: 'number',
        width: '35px',
        style: (row) => {
            if (row.groupingMode === 'packing') {
                return { color: 'var(--vn-label-color)' };
            }
        },
    },
    {
        label: t('Quantity'),
        name: 'quantity',
        component: 'number',
        width: '50px',
        style: (row) => {
            if (row?.quantity !== row?.stickers * row?.packing)
                return { color: 'var(--q-negative)' };
        },
    },
    {
        label: t('Amount'),
        name: 'amount',
        component: 'number',
        width: '50px',
    },
    {
        label: t('Package'),
        name: 'price2',
        component: 'number',
        width: '35px',
    },
    {
        label: t('Box'),
        name: 'price3',
        component: 'number',
        width: '35px',
    },
    {
        align: 'center',
        label: 'Min.',
        name: 'minPrice',
        component: 'number',
        width: '35px',
        style: (row) => {
            if (row?.hasMinPrice) {
                return { backgroundColor: 'var(--q-positive)', color: 'black' };
            }
        },
    },
    {
        label: t('P.Sen'),
        name: 'packingOut',
        component: 'number',
        width: '40px',
    },
    {
        align: 'center',
        label: t('Com.'),
        name: 'comment',
        component: 'input',
        width: '55px',
    },
    {
        label: 'Prod.',
        name: 'subName',
        component: 'input',
        width: '45px',
    },
    {
        align: 'center',
        label: 'Tags',
        name: 'tags',
        width: '120px',
        columnSearch: false,
        isEditable: false,
    },
    {
        align: 'center',
        label: 'Comp.',
        name: 'company_name',
        component: 'input',
        width: '35px',
    },
];
onMounted(() => {
    stateStore.rightDrawer = false;
});
</script>
<template>
    <VnSubToolbar />
    <VnTable
        ref="tableRef"
        data-key="EntryBuys"
        :url="`Entries/${route.params.id}/getBuys`"
        :disable-option="{ card: true }"
        :right-search="false"
        :row-click="false"
        :columns="columns"
        class="buyList"
        is-editable
        auto-load
    >
        <template #column-hex>
            <VnColor :colors="['#ff0000', '#ffff00', '#ff0000']" style="height: 100%" />
        </template>
        <template #column-name="{ row }">
            <span class="link">
                {{ row?.name }}
                <ItemDescriptorProxy :id="row?.itemFk" />
            </span>
        </template>
        <template #column-tags="{ row }">
            <FetchedTags :item="row" :columns="3" />
        </template>
        <template #column-stickers="{ row }">
            <span style="color: var(--vn-label-color)">{{ row.printedStickers }}</span>
            <span>/{{ row.stickers }}</span>
        </template>
    </VnTable>
</template>
<style lang="scss" scoped>
.q-checkbox__inner--dark {
    &__inner {
        border-radius: 0% !important;
        background-color: rosybrown;
    }
}
</style>
<i18n>
es:
    Article: Artículo
    Size: Med.
    Sti.: Eti.
    Bucket: Cubo
    Quantity: Cantidad
    Amount: Importe
    Package: Paquete
    Box: Caja
    P.Sen: P.Env
    Com.: Ref.
</i18n>