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

102 lines
3.5 KiB
Vue

<script setup>
import { ref } from 'vue';
import { useI18n } from 'vue-i18n';
import { useRoute } from 'vue-router';
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 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>
<FormModel :url-update="`Clients/${route.params.id}`" auto-load model="customer">
<template #form="{ data, validate }">
<VnRow>
<VnSelect
auto-load
url="PayMethods"
:label="t('Billing data')"
hide-selected
option-label="name"
option-value="id"
v-model="data.payMethodFk"
/>
<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')"
ref="bankEntitiesRef"
:filter="filter"
auto-load
url="BankEntities"
: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>