salix-front/src/pages/FixedAsset/FixedAssetList.vue

367 lines
14 KiB
Vue

<script setup>
import { computed, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import { useState } from 'src/composables/useState';
import VnTable from 'src/components/VnTable/VnTable.vue';
import VnSection from 'src/components/common/VnSection.vue';
import { dashIfEmpty, toCurrency, toDate } from 'src/filters';
import FixedAssetFilter from './FixedAssetFilter.vue';
import VnInput from 'src/components/common/VnInput.vue';
import VnRow from 'src/components/ui/VnRow.vue';
import VnInputNumber from 'src/components/common/VnInputNumber.vue';
import VnSelect from 'src/components/common/VnSelect.vue';
import VnInputDate from 'src/components/common/VnInputDate.vue';
import VnAccountNumber from 'src/components/common/VnAccountNumber.vue';
const user = useState().getUser();
const { t } = useI18n();
const tableRef = ref();
const dataKey = 'FixedAssetList';
const columns = computed(() => [
{
align: 'right',
name: 'id',
label: t('globals.id'),
width: '35px',
chip: {
condition: () => true,
},
isId: true,
},
{
align: 'left',
name: 'description',
label: t('globals.description'),
cardVisible: true,
columnClass: 'expand',
},
{
name: 'companyFk',
label: t('globals.company'),
component: 'select',
attrs: {
url: 'companies',
optionValue: 'code',
},
format: ({ company }) => company?.code,
cardVisible: true,
},
{
name: 'value',
label: t('fixedAsset.value'),
component: 'number',
format: ({ value }) => toCurrency(value),
cardVisible: true,
columnFilter: false,
},
{
align: 'center',
name: 'firstAmortizated',
label: t('fixedAsset.firstAmortizated'),
toolTip: t('fixedAsset.firstAmortizatedTooltip'),
component: 'date',
format: ({ firstAmortizated }) => dashIfEmpty(toDate(firstAmortizated)),
cardVisible: true,
},
{
align: 'center',
name: 'lastAmortizated',
label: t('fixedAsset.lastAmortizated'),
toolTip: t('fixedAsset.lastAmortizatedTooltip'),
component: 'date',
format: ({ lastAmortizated }) => dashIfEmpty(toDate(lastAmortizated)),
cardVisible: true,
},
{
align: 'center',
name: 'finished',
label: t('fixedAsset.finished'),
toolTip: t('fixedAsset.finishedTooltip'),
component: 'date',
format: ({ finished }) => dashIfEmpty(toDate(finished)),
cardVisible: true,
},
{
align: 'center',
name: 'discharged',
label: t('fixedAsset.discharged'),
toolTip: t('fixedAsset.dischargedTooltip'),
component: 'date',
format: ({ discharged }) => dashIfEmpty(toDate(discharged)),
cardVisible: true,
},
{
name: 'amortization',
label: t('fixedAsset.amortization'),
component: 'number',
format: ({ amortization }) => toCurrency(amortization),
cardVisible: true,
columnFilter: false,
},
{
name: 'nature',
label: t('fixedAsset.nature'),
component: 'select',
attrs: {
url: 'Ppes/getNatures',
optionValue: 'nature',
optionLabel: 'nature',
},
format: ({ nature }) => dashIfEmpty(nature),
cardVisible: true,
},
{
name: 'plan',
label: t('fixedAsset.plan'),
toolTip: t('fixedAsset.planTooltip'),
component: 'select',
attrs: {
url: 'PpePlans',
optionValue: 'rate',
optionLabel: 'days',
},
format: ({ plan }) => dashIfEmpty(`${plan?.rate * 100}% - ${plan?.days} days`),
cardVisible: true,
},
{
name: 'group',
label: t('globals.group'),
component: 'select',
attrs: {
url: 'PpeGroups',
optionValue: 'id',
optionLabel: 'description',
},
format: ({ group }) => dashIfEmpty(group?.description),
cardVisible: true,
},
{
name: 'locationFk',
label: t('fixedAsset.location'),
component: 'select',
attrs: {
url: 'PpeLocations',
optionValue: 'code',
optionLabel: 'description',
},
format: ({ location }) =>
dashIfEmpty(`${location?.code} - ${location?.description}`),
cardVisible: true,
},
{
labelAbbreviation: t('fixedAsset.isInvestmentAssetAbbr'),
label: t('fixedAsset.isInvestmentAsset'),
toolTip: t('fixedAsset.isInvestmentAsset'),
name: 'isInvestmentAsset',
component: 'checkbox',
cardVisible: true,
},
{
labelAbbreviation: t('fixedAsset.isDoneAbbr'),
label: t('fixedAsset.isDone'),
toolTip: t('fixedAsset.isDone'),
name: 'isDone',
component: 'checkbox',
cardVisible: true,
},
]);
</script>
<template>
<VnSection
:data-key="dataKey"
:columns="columns"
prefix="fixedAsset"
:array-data-props="{
url: 'ppes/filter',
}"
>
<template #advanced-menu>
<FixedAssetFilter :data-key="dataKey" />
</template>
<template #body>
<VnTable
ref="tableRef"
:data-key="dataKey"
:columns="columns"
redirect="fixed-asset"
:create="{
urlCreate: 'Ppes/createFixedAsset',
title: t('fixedAsset.createFixedAsset'),
onDataSaved: ({ id }) => tableRef.redirect(id),
formInitialData: {
nature: 'INMOVILIZADO',
companyFk: user.companyFk,
},
}"
:disable-option="{ card: true }"
:right-search="false"
>
<template #more-create-dialog="{ data }">
<div class="col-span-2">
<VnRow>
<VnInput
v-model="data.id"
:label="$t('globals.id')"
required
/>
<VnInputNumber
v-model="data.value"
:label="$t('fixedAsset.value')"
required
/>
</VnRow>
<VnRow>
<VnInput
v-model="data.description"
:label="$t('globals.description')"
required
/>
</VnRow>
<VnRow>
<VnInputDate
v-model="data.firstAmortizated"
:label="$t('fixedAsset.firstAmortizated')"
placeholder="dd-mm-aaaa"
/>
<VnInputDate
v-model="data.lastAmortizated"
:label="$t('fixedAsset.lastAmortizated')"
placeholder="dd-mm-aaaa"
/>
</VnRow>
<VnRow>
<VnSelect
url="Ppes/getSubaccounts"
v-model="data.account"
:label="$t('fixedAsset.account')"
option-value="code"
option-label="code"
hide-selected
>
<template #option="scope">
<QItem v-bind="scope.itemProps">
<QItemSection>
<QItemLabel>{{
`${scope.opt?.description}`
}}</QItemLabel>
<QItemLabel caption>
{{ `#${scope.opt?.code}` }}
</QItemLabel>
</QItemSection>
</QItem>
</template>
</VnSelect>
<VnSelect
url="Ppes/getEndowments"
v-model="data.endowment"
:label="$t('fixedAsset.endowment')"
option-value="code"
option-label="code"
hide-selected
>
<template #option="scope">
<QItem v-bind="scope.itemProps">
<QItemSection>
<QItemLabel>{{
`${scope.opt?.description}`
}}</QItemLabel>
<QItemLabel caption>
{{ `#${scope.opt?.code}` }}
</QItemLabel>
</QItemSection>
</QItem>
</template>
</VnSelect>
</VnRow>
<VnRow>
<VnAccountNumber
:label="$t('fixedAsset.elementAccount')"
v-model="data.elementAccount"
required
/>
<VnSelect
url="PpePlans"
v-model="data.planFk"
:label="$t('fixedAsset.plan')"
option-value="id"
:option-label="
(value) => `${value.rate * 100}% - ${value.days} days`
"
hide-selected
>
<template #option="scope">
<QItem v-bind="scope.itemProps">
<QItemSection>
<QItemLabel>{{
`${scope.opt?.rate * 100}% - ${scope.opt?.days} days`
}}</QItemLabel>
<QItemLabel caption>
{{ `#${scope.opt?.id}` }}
</QItemLabel>
</QItemSection>
</QItem>
</template>
</VnSelect>
</VnRow>
<VnRow>
<VnSelect
url="Ppes/getNatures"
v-model="data.nature"
:label="$t('fixedAsset.nature')"
option-value="nature"
option-label="nature"
hide-selected
/>
<VnSelect
url="PpeGroups"
v-model="data.groupFk"
:label="$t('globals.group')"
option-value="id"
option-label="description"
hide-selected
/>
</VnRow>
<VnRow>
<VnSelect
url="Companies"
:fields="['id', 'code']"
v-model="data.companyFk"
:label="$t('globals.company')"
option-value="id"
option-label="code"
hide-selected
/>
<VnSelect
url="PpeLocations"
v-model="data.locationFk"
:label="$t('fixedAsset.location')"
option-value="code"
:option-label="
(value) => `${value.code} - ${value.description}`
"
hide-selected
>
<template #option="scope">
<QItem v-bind="scope.itemProps">
<QItemSection>
<QItemLabel>{{
`${scope.opt?.description}`
}}</QItemLabel>
<QItemLabel caption>
{{ `#${scope.opt?.code}` }}
</QItemLabel>
</QItemSection>
</QItem>
</template>
</VnSelect>
</VnRow>
</div>
</template>
</VnTable>
</template>
</VnSection>
</template>