117 lines
3.8 KiB
Vue
117 lines
3.8 KiB
Vue
<script setup>
|
|
import { useI18n } from 'vue-i18n';
|
|
import { reactive, ref, onMounted, onBeforeMount } from 'vue';
|
|
import { useRouter, useRoute } from 'vue-router';
|
|
import FormModel from 'components/FormModel.vue';
|
|
import VnInput from 'src/components/common/VnInput.vue';
|
|
import VnRow from 'components/ui/VnRow.vue';
|
|
import VnLocation from 'src/components/common/VnLocation.vue';
|
|
|
|
const { t } = useI18n();
|
|
const route = useRoute();
|
|
const router = useRouter();
|
|
|
|
const viewAction = ref();
|
|
const updateAddressId = ref(null);
|
|
const newAddressForm = reactive({
|
|
nickname: null,
|
|
street: null,
|
|
postalCode: null,
|
|
city: null,
|
|
provinceFk: null,
|
|
phone: null,
|
|
mobile: null,
|
|
province: null,
|
|
});
|
|
|
|
const onDataSaved = () => {
|
|
router.push({ name: 'SupplierAddresses' });
|
|
};
|
|
|
|
const updateAddressForm = (addressData) => {
|
|
for (let key in newAddressForm) {
|
|
if (key in addressData) {
|
|
newAddressForm[key] = addressData[key];
|
|
}
|
|
}
|
|
};
|
|
|
|
onBeforeMount(() => {
|
|
viewAction.value = route.query.addressData ? 'update' : 'create';
|
|
|
|
if (viewAction.value === 'create') newAddressForm.supplierFk = route.params.id;
|
|
});
|
|
|
|
onMounted(() => {
|
|
if (viewAction.value === 'update' && route.query.addressData) {
|
|
const addressData = JSON.parse(route.query.addressData);
|
|
updateAddressId.value = addressData.id;
|
|
updateAddressForm(addressData);
|
|
}
|
|
});
|
|
function handleLocation(data, location) {
|
|
const { town, code, provinceFk, countryFk } = location ?? {};
|
|
data.postalCode = code;
|
|
data.city = town;
|
|
data.provinceFk = provinceFk;
|
|
data.countryFk = countryFk;
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<QPage>
|
|
<FormModel
|
|
model="supplierAddresses"
|
|
:form-initial-data="newAddressForm"
|
|
:url-update="
|
|
viewAction !== 'create' ? `SupplierAddresses/${updateAddressId}` : null
|
|
"
|
|
:url-create="viewAction === 'create' ? 'SupplierAddresses' : null"
|
|
:observe-form-changes="viewAction === 'create'"
|
|
@on-data-saved="onDataSaved()"
|
|
>
|
|
<template #form="{ data, validate }">
|
|
<VnRow>
|
|
<VnInput
|
|
v-model="data.nickname"
|
|
:label="t('supplier.addresses.name')"
|
|
/>
|
|
<VnInput
|
|
v-model="data.street"
|
|
:label="t('supplier.addresses.street')"
|
|
/>
|
|
</VnRow>
|
|
<VnRow>
|
|
<VnLocation
|
|
:rules="validate('Worker.postcode')"
|
|
:roles-allowed-to-create="['deliveryAssistant']"
|
|
:acls="[{ model: 'Town', props: '*', accessType: 'WRITE' }]"
|
|
:location="
|
|
data.postalCode
|
|
? {
|
|
postcode: data.postalCode,
|
|
city: data.city,
|
|
province: data.province,
|
|
country: data.province.country,
|
|
}
|
|
: null
|
|
"
|
|
@update:model-value="(location) => handleLocation(data, location)"
|
|
>
|
|
</VnLocation>
|
|
</VnRow>
|
|
<VnRow>
|
|
<VnInput
|
|
v-model="data.phone"
|
|
:label="t('supplier.addresses.phone')"
|
|
/>
|
|
<VnInput
|
|
v-model="data.mobile"
|
|
:label="t('supplier.addresses.mobile')"
|
|
/>
|
|
</VnRow>
|
|
</template>
|
|
</FormModel>
|
|
</QPage>
|
|
</template>
|