salix-front/src/pages/Customer/Card/CustomerBillingData.vue

115 lines
3.8 KiB
Vue

<script setup>
import { ref } from 'vue';
import { useI18n } from 'vue-i18n';
import { useRoute } from 'vue-router';
import FetchData from 'components/FetchData.vue';
import FormModel from 'components/FormModel.vue';
import VnRow from 'components/ui/VnRow.vue';
import VnInput from 'src/components/common/VnInput.vue';
import VnSelect from 'src/components/common/VnSelect.vue';
import VnSelectDialog from 'src/components/common/VnSelectDialog.vue';
import CreateBankEntityForm from 'src/components/CreateBankEntityForm.vue';
const { t } = useI18n();
const route = useRoute();
const payMethods = ref([]);
const bankEntitiesOptions = ref([]);
const bankEntitiesRef = ref(null);
const filter = {
fields: ['id', 'bic', 'name'],
order: 'bic ASC',
limit: 30,
};
const getBankEntities = (data, formData) => {
bankEntitiesRef.value.fetch();
formData.bankEntityFk = Number(data.id);
};
</script>
<template>
<FetchData @on-fetch="(data) => (payMethods = data)" auto-load url="PayMethods" />
<FetchData
ref="bankEntitiesRef"
@on-fetch="(data) => (bankEntitiesOptions = data)"
:filter="filter"
auto-load
url="BankEntities"
/>
<FormModel
:url-update="`Clients/${route.params.id}`"
:url="`Clients/${route.params.id}/getCard`"
auto-load
model="customer"
>
<template #form="{ data, validate }">
<VnRow>
<VnSelect
:label="t('Billing data')"
:options="payMethods"
hide-selected
option-label="name"
option-value="id"
v-model="data.payMethod"
/>
<VnInput :label="t('Due day')" clearable v-model="data.dueDay" />
</VnRow>
<VnRow>
<VnInput :label="t('IBAN')" clearable v-model="data.iban">
<template #append>
<QIcon name="info" class="cursor-info">
<QTooltip>{{ t('components.iban_tooltip') }}</QTooltip>
</QIcon>
</template>
</VnInput>
<VnSelectDialog
:label="t('Swift / BIC')"
:options="bankEntitiesOptions"
:acls="[{ model: 'BankEntity', props: '*', accessType: 'WRITE' }]"
:rules="validate('Worker.bankEntity')"
hide-selected
option-label="name"
option-value="id"
v-model="data.bankEntityFk"
>
<template #form>
<CreateBankEntityForm
@on-data-saved="getBankEntities($event, data)"
/>
</template>
<template #option="scope">
<QItem v-bind="scope.itemProps">
<QItemSection v-if="scope.opt">
<QItemLabel>{{ scope.opt.bic }} </QItemLabel>
<QItemLabel caption> {{ scope.opt.name }}</QItemLabel>
</QItemSection>
</QItem>
</template>
</VnSelectDialog>
</VnRow>
<VnRow>
<QCheckbox :label="t('Received LCR')" v-model="data.hasLcr" />
<QCheckbox :label="t('VNL core received')" v-model="data.hasCoreVnl" />
<QCheckbox :label="t('VNL B2B received')" v-model="data.hasSepaVnl" />
</VnRow>
</template>
</FormModel>
</template>
<i18n>
es:
Billing data: Forma de pago
Due day: Vencimiento
IBAN: IBAN
Swift / BIC: Swift / BIC
Received LCR: Recibido LCR
VNL core received: Recibido core VNL
VNL B2B received: Recibido B2B VNL
</i18n>