120 lines
3.3 KiB
Vue
120 lines
3.3 KiB
Vue
<script setup>
|
|
import { reactive, ref, onMounted, nextTick, computed } from 'vue';
|
|
import { useI18n } from 'vue-i18n';
|
|
import VnInput from 'src/components/common/VnInput.vue';
|
|
|
|
import VnSelect from 'src/components/common/VnSelect.vue';
|
|
import FetchData from 'components/FetchData.vue';
|
|
import VnRow from 'components/ui/VnRow.vue';
|
|
import FormModelPopup from './FormModelPopup.vue';
|
|
import { useState } from 'src/composables/useState';
|
|
|
|
const emit = defineEmits(['onDataSaved']);
|
|
const { t } = useI18n();
|
|
const bicInputRef = ref(null);
|
|
const state = useState();
|
|
|
|
const customer = computed(() => state.get('customer'));
|
|
|
|
const countriesFilter = {
|
|
fields: ['id', 'name', 'code'],
|
|
};
|
|
|
|
const bankEntityFormData = reactive({
|
|
name: null,
|
|
bic: null,
|
|
countryFk: customer.value?.countryFk,
|
|
});
|
|
|
|
const countriesOptions = ref([]);
|
|
|
|
const onDataSaved = (...args) => {
|
|
emit('onDataSaved', ...args);
|
|
};
|
|
|
|
onMounted(async () => {
|
|
await nextTick();
|
|
bicInputRef.value.focus();
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<FetchData
|
|
url="Countries"
|
|
auto-load
|
|
@on-fetch="(data) => (countriesOptions = data)"
|
|
/>
|
|
<FormModelPopup
|
|
url-create="bankEntities"
|
|
model="bankEntity"
|
|
:title="t('title')"
|
|
:subtitle="t('subtitle')"
|
|
:form-initial-data="bankEntityFormData"
|
|
:filter="countriesFilter"
|
|
@on-data-saved="onDataSaved"
|
|
>
|
|
<template #form-inputs="{ data, validate }">
|
|
<VnRow>
|
|
<VnInput
|
|
:label="t('name')"
|
|
v-model="data.name"
|
|
:required="true"
|
|
:rules="validate('bankEntity.name')"
|
|
/>
|
|
<VnInput
|
|
ref="bicInputRef"
|
|
:label="t('swift')"
|
|
v-model="data.bic"
|
|
:required="true"
|
|
:rules="validate('bankEntity.bic')"
|
|
/>
|
|
</VnRow>
|
|
<VnRow>
|
|
<div class="col">
|
|
<VnSelect
|
|
:label="t('country')"
|
|
v-model="data.countryFk"
|
|
:options="countriesOptions"
|
|
option-value="id"
|
|
option-label="name"
|
|
hide-selected
|
|
:required="true"
|
|
:rules="validate('bankEntity.countryFk')"
|
|
/>
|
|
</div>
|
|
<div
|
|
v-if="
|
|
countriesOptions.find((c) => c.id === data.countryFk)?.code ==
|
|
'ES'
|
|
"
|
|
class="col"
|
|
>
|
|
<VnInput
|
|
:label="t('id')"
|
|
v-model="data.id"
|
|
:required="true"
|
|
:rules="validate('city.name')"
|
|
/>
|
|
</div>
|
|
</VnRow>
|
|
</template>
|
|
</FormModelPopup>
|
|
</template>
|
|
|
|
<i18n>
|
|
en:
|
|
title: New bank entity
|
|
subtitle: Please, ensure you put the correct data!
|
|
name: Name
|
|
swift: Swift
|
|
country: Country
|
|
id: Entity code
|
|
es:
|
|
title: Nueva entidad bancaria
|
|
subtitle: ¡Por favor, asegúrate de poner los datos correctos!
|
|
name: Nombre
|
|
swift: Swift
|
|
country: País
|
|
id: Código de la entidad
|
|
</i18n>
|