refs #5888 feat: change layout
This commit is contained in:
parent
6bfa710864
commit
13504be081
|
|
@ -8,29 +8,22 @@ import FormModel from 'components/FormModel.vue';
|
||||||
import VnRow from 'components/ui/VnRow.vue';
|
import VnRow from 'components/ui/VnRow.vue';
|
||||||
import VnInput from 'src/components/common/VnInput.vue';
|
import VnInput from 'src/components/common/VnInput.vue';
|
||||||
import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
|
import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
|
||||||
import CustomerCreateNewPostcode from 'src/components/CreateNewPostcodeForm.vue';
|
import VnLocation from 'src/components/common/VnLocation.vue';
|
||||||
import VnSelectCreate from 'src/components/common/VnSelectCreate.vue';
|
|
||||||
|
|
||||||
const { t } = useI18n();
|
const { t } = useI18n();
|
||||||
const route = useRoute();
|
const route = useRoute();
|
||||||
|
|
||||||
const townsFetchDataRef = ref(null);
|
|
||||||
const postcodeFetchDataRef = ref(null);
|
|
||||||
const typesTaxes = ref([]);
|
const typesTaxes = ref([]);
|
||||||
const typesTransactions = ref([]);
|
const typesTransactions = ref([]);
|
||||||
const citiesLocationOptions = ref([]);
|
|
||||||
const provincesLocationOptions = ref([]);
|
|
||||||
const countriesOptions = ref([]);
|
|
||||||
const postcodesOptions = ref([]);
|
const postcodesOptions = ref([]);
|
||||||
|
|
||||||
const onPostcodeCreated = async ({ code, provinceFk, townFk, countryFk }, formData) => {
|
function handleLocation(data, location) {
|
||||||
await postcodeFetchDataRef.value.fetch();
|
const { town, code, provinceFk, countryFk } = location ?? {};
|
||||||
await townsFetchDataRef.value.fetch();
|
data.postcode = code;
|
||||||
formData.postcode = code;
|
data.city = town;
|
||||||
formData.provinceFk = provinceFk;
|
data.provinceFk = provinceFk;
|
||||||
formData.city = citiesLocationOptions.value.find((town) => town.id === townFk).name;
|
data.countryFk = countryFk;
|
||||||
formData.countryFk = countryFk;
|
}
|
||||||
};
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
|
@ -40,28 +33,6 @@ const onPostcodeCreated = async ({ code, provinceFk, townFk, countryFk }, formDa
|
||||||
@on-fetch="(data) => (typesTransactions = data)"
|
@on-fetch="(data) => (typesTransactions = data)"
|
||||||
url="SageTransactionTypes"
|
url="SageTransactionTypes"
|
||||||
/>
|
/>
|
||||||
<FetchData
|
|
||||||
ref="townsFetchDataRef"
|
|
||||||
@on-fetch="(data) => (citiesLocationOptions = data)"
|
|
||||||
auto-load
|
|
||||||
url="Towns/location"
|
|
||||||
/>
|
|
||||||
<FetchData
|
|
||||||
@on-fetch="(data) => (provincesLocationOptions = data)"
|
|
||||||
auto-load
|
|
||||||
url="Provinces/location"
|
|
||||||
/>
|
|
||||||
<FetchData
|
|
||||||
@on-fetch="(data) => (countriesOptions = data)"
|
|
||||||
auto-load
|
|
||||||
url="Countries"
|
|
||||||
/>
|
|
||||||
<FetchData
|
|
||||||
ref="postcodeFetchDataRef"
|
|
||||||
url="Postcodes/location"
|
|
||||||
@on-fetch="(data) => (postcodesOptions = data)"
|
|
||||||
auto-load
|
|
||||||
/>
|
|
||||||
<FormModel
|
<FormModel
|
||||||
:url-update="`Clients/${route.params.id}/updateFiscalData`"
|
:url-update="`Clients/${route.params.id}/updateFiscalData`"
|
||||||
:url="`Clients/${route.params.id}/getCard`"
|
:url="`Clients/${route.params.id}/getCard`"
|
||||||
|
|
@ -114,94 +85,14 @@ const onPostcodeCreated = async ({ code, provinceFk, townFk, countryFk }, formDa
|
||||||
|
|
||||||
<VnRow class="row q-gutter-md q-mb-md">
|
<VnRow class="row q-gutter-md q-mb-md">
|
||||||
<div class="col">
|
<div class="col">
|
||||||
<VnSelectCreate
|
<VnLocation
|
||||||
:label="t('Postcode')"
|
|
||||||
:options="postcodesOptions"
|
|
||||||
:roles-allowed-to-create="['deliveryAssistant']"
|
|
||||||
:rules="validate('Worker.postcode')"
|
:rules="validate('Worker.postcode')"
|
||||||
hide-selected
|
:roles-allowed-to-create="['deliveryAssistant']"
|
||||||
option-label="code"
|
:options="postcodesOptions"
|
||||||
option-value="code"
|
v-model="data.location"
|
||||||
v-model="data.postcode"
|
@update:model-value="(location) => handleLocation(data, location)"
|
||||||
>
|
>
|
||||||
<template #form>
|
</VnLocation>
|
||||||
<CustomerCreateNewPostcode
|
|
||||||
@on-data-saved="onPostcodeCreated($event, data)"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
<template #option="scope">
|
|
||||||
<QItem v-bind="scope.itemProps">
|
|
||||||
<QItemSection v-if="scope.opt">
|
|
||||||
<QItemLabel>{{ scope.opt.code }}</QItemLabel>
|
|
||||||
<QItemLabel caption
|
|
||||||
>{{ scope.opt.code }} -
|
|
||||||
{{ scope.opt.town.name }} ({{
|
|
||||||
scope.opt.town.province.name
|
|
||||||
}},
|
|
||||||
{{
|
|
||||||
scope.opt.town.province.country.country
|
|
||||||
}})</QItemLabel
|
|
||||||
>
|
|
||||||
</QItemSection>
|
|
||||||
</QItem>
|
|
||||||
</template>
|
|
||||||
</VnSelectCreate>
|
|
||||||
</div>
|
|
||||||
<div class="col">
|
|
||||||
<VnSelectFilter
|
|
||||||
:label="t('City')"
|
|
||||||
:options="citiesLocationOptions"
|
|
||||||
hide-selected
|
|
||||||
option-label="name"
|
|
||||||
option-value="name"
|
|
||||||
v-model="data.city"
|
|
||||||
>
|
|
||||||
<template #option="scope">
|
|
||||||
<QItem v-bind="scope.itemProps">
|
|
||||||
<QItemSection>
|
|
||||||
<QItemLabel>{{ scope.opt.name }}</QItemLabel>
|
|
||||||
<QItemLabel caption>
|
|
||||||
{{
|
|
||||||
`${scope.opt.name}, ${scope.opt.province.name} (${scope.opt.province.country.country})`
|
|
||||||
}}
|
|
||||||
</QItemLabel>
|
|
||||||
</QItemSection>
|
|
||||||
</QItem>
|
|
||||||
</template>
|
|
||||||
</VnSelectFilter>
|
|
||||||
</div>
|
|
||||||
</VnRow>
|
|
||||||
|
|
||||||
<VnRow class="row q-gutter-md q-mb-md">
|
|
||||||
<div class="col">
|
|
||||||
<VnSelectFilter
|
|
||||||
:label="t('Province')"
|
|
||||||
:options="provincesLocationOptions"
|
|
||||||
hide-selected
|
|
||||||
option-label="name"
|
|
||||||
option-value="id"
|
|
||||||
v-model="data.provinceFk"
|
|
||||||
>
|
|
||||||
<template #option="scope">
|
|
||||||
<QItem v-bind="scope.itemProps">
|
|
||||||
<QItemSection>
|
|
||||||
<QItemLabel>{{
|
|
||||||
`${scope.opt.name} (${scope.opt.country.country})`
|
|
||||||
}}</QItemLabel>
|
|
||||||
</QItemSection>
|
|
||||||
</QItem>
|
|
||||||
</template>
|
|
||||||
</VnSelectFilter>
|
|
||||||
</div>
|
|
||||||
<div class="col">
|
|
||||||
<VnSelectFilter
|
|
||||||
:label="t('Country')"
|
|
||||||
:options="countriesOptions"
|
|
||||||
hide-selected
|
|
||||||
option-label="country"
|
|
||||||
option-value="id"
|
|
||||||
v-model="data.countryFk"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</VnRow>
|
</VnRow>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -8,31 +8,24 @@ import FormModel from 'components/FormModel.vue';
|
||||||
import VnRow from 'components/ui/VnRow.vue';
|
import VnRow from 'components/ui/VnRow.vue';
|
||||||
import VnInput from 'src/components/common/VnInput.vue';
|
import VnInput from 'src/components/common/VnInput.vue';
|
||||||
import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
|
import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
|
||||||
import VnSelectCreate from 'src/components/common/VnSelectCreate.vue';
|
import VnLocation from 'src/components/common/VnLocation.vue';
|
||||||
import CustomerCreateNewPostcode from 'src/components/CreateNewPostcodeForm.vue';
|
|
||||||
|
|
||||||
const route = useRoute();
|
const route = useRoute();
|
||||||
const { t } = useI18n();
|
const { t } = useI18n();
|
||||||
|
|
||||||
const postcodeFetchDataRef = ref(null);
|
|
||||||
const townsFetchDataRef = ref(null);
|
|
||||||
const sageTaxTypesOptions = ref([]);
|
const sageTaxTypesOptions = ref([]);
|
||||||
const sageWithholdingsOptions = ref([]);
|
const sageWithholdingsOptions = ref([]);
|
||||||
const sageTransactionTypesOptions = ref([]);
|
const sageTransactionTypesOptions = ref([]);
|
||||||
const supplierActivitiesOptions = ref([]);
|
const supplierActivitiesOptions = ref([]);
|
||||||
const postcodesOptions = ref([]);
|
const postcodesOptions = ref([]);
|
||||||
const provincesLocationOptions = ref([]);
|
|
||||||
const townsLocationOptions = ref([]);
|
|
||||||
const countriesOptions = ref([]);
|
|
||||||
|
|
||||||
const onPostcodeCreated = async ({ code, provinceFk, townFk, countryFk }, formData) => {
|
function handleLocation(data, location) {
|
||||||
await postcodeFetchDataRef.value.fetch();
|
const { town, code, provinceFk, countryFk } = location ?? {};
|
||||||
await townsFetchDataRef.value.fetch();
|
data.postcode = code;
|
||||||
formData.postCode = code;
|
data.city = town;
|
||||||
formData.provinceFk = provinceFk;
|
data.provinceFk = provinceFk;
|
||||||
formData.city = townsLocationOptions.value.find((town) => town.id === townFk).name;
|
data.countryFk = countryFk;
|
||||||
formData.countryFk = countryFk;
|
}
|
||||||
};
|
|
||||||
</script>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
<FetchData
|
<FetchData
|
||||||
|
|
@ -55,28 +48,6 @@ const onPostcodeCreated = async ({ code, provinceFk, townFk, countryFk }, formDa
|
||||||
auto-load
|
auto-load
|
||||||
@on-fetch="(data) => (supplierActivitiesOptions = data)"
|
@on-fetch="(data) => (supplierActivitiesOptions = data)"
|
||||||
/>
|
/>
|
||||||
<FetchData
|
|
||||||
ref="postcodeFetchDataRef"
|
|
||||||
url="Postcodes/location"
|
|
||||||
@on-fetch="(data) => (postcodesOptions = data)"
|
|
||||||
auto-load
|
|
||||||
/>
|
|
||||||
<FetchData
|
|
||||||
ref="townsFetchDataRef"
|
|
||||||
@on-fetch="(data) => (townsLocationOptions = data)"
|
|
||||||
auto-load
|
|
||||||
url="Towns/location"
|
|
||||||
/>
|
|
||||||
<FetchData
|
|
||||||
@on-fetch="(data) => (provincesLocationOptions = data)"
|
|
||||||
auto-load
|
|
||||||
url="Provinces/location"
|
|
||||||
/>
|
|
||||||
<FetchData
|
|
||||||
@on-fetch="(data) => (countriesOptions = data)"
|
|
||||||
auto-load
|
|
||||||
url="Countries"
|
|
||||||
/>
|
|
||||||
<FormModel
|
<FormModel
|
||||||
:url="`Suppliers/${route.params.id}`"
|
:url="`Suppliers/${route.params.id}`"
|
||||||
:url-update="`Suppliers/${route.params.id}/updateFiscalData`"
|
:url-update="`Suppliers/${route.params.id}/updateFiscalData`"
|
||||||
|
|
@ -172,100 +143,20 @@ const onPostcodeCreated = async ({ code, provinceFk, townFk, countryFk }, formDa
|
||||||
clearable
|
clearable
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
</VnRow>
|
||||||
|
<VnRow class="row q-gutter-md q-mb-md">
|
||||||
<div class="col">
|
<div class="col">
|
||||||
<VnSelectCreate
|
<VnLocation
|
||||||
:label="t('supplier.fiscalData.postcode')"
|
:rules="validate('Worker.postcode')"
|
||||||
v-model="data.postCode"
|
|
||||||
:options="postcodesOptions"
|
|
||||||
:rules="validate('supplier.postCode')"
|
|
||||||
:roles-allowed-to-create="['deliveryAssistant']"
|
:roles-allowed-to-create="['deliveryAssistant']"
|
||||||
option-label="code"
|
:options="postcodesOptions"
|
||||||
option-value="code"
|
v-model="data.location"
|
||||||
hide-selected
|
@update:model-value="(location) => handleLocation(data, location)"
|
||||||
>
|
>
|
||||||
<template #form>
|
</VnLocation>
|
||||||
<CustomerCreateNewPostcode
|
|
||||||
@on-data-saved="onPostcodeCreated($event, data)"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
<template #option="scope">
|
|
||||||
<QItem v-bind="scope.itemProps">
|
|
||||||
<QItemSection v-if="scope.opt">
|
|
||||||
<QItemLabel>{{ scope.opt.code }}</QItemLabel>
|
|
||||||
<QItemLabel caption
|
|
||||||
>{{ scope.opt.code }} -
|
|
||||||
{{ scope.opt.town.name }} ({{
|
|
||||||
scope.opt.town.province.name
|
|
||||||
}},
|
|
||||||
{{
|
|
||||||
scope.opt.town.province.country.country
|
|
||||||
}})</QItemLabel
|
|
||||||
>
|
|
||||||
</QItemSection>
|
|
||||||
</QItem>
|
|
||||||
</template>
|
|
||||||
</VnSelectCreate>
|
|
||||||
</div>
|
</div>
|
||||||
</VnRow>
|
</VnRow>
|
||||||
<VnRow class="row q-gutter-md q-mb-md">
|
<VnRow class="row q-gutter-md q-mb-md">
|
||||||
<div class="col">
|
|
||||||
<VnSelectFilter
|
|
||||||
:label="t('supplier.fiscalData.city')"
|
|
||||||
:options="townsLocationOptions"
|
|
||||||
v-model="data.city"
|
|
||||||
option-value="name"
|
|
||||||
option-label="name"
|
|
||||||
hide-selected
|
|
||||||
:rules="validate('supplier.city')"
|
|
||||||
>
|
|
||||||
<template #option="scope">
|
|
||||||
<QItem v-bind="scope.itemProps">
|
|
||||||
<QItemSection>
|
|
||||||
<QItemLabel>{{ scope.opt.name }}</QItemLabel>
|
|
||||||
<QItemLabel caption
|
|
||||||
>{{ scope.opt.name }},
|
|
||||||
{{ scope.opt.province.name }} ({{
|
|
||||||
scope.opt.province.country.country
|
|
||||||
}})</QItemLabel
|
|
||||||
>
|
|
||||||
</QItemSection>
|
|
||||||
</QItem>
|
|
||||||
</template>
|
|
||||||
</VnSelectFilter>
|
|
||||||
</div>
|
|
||||||
<div class="col">
|
|
||||||
<VnSelectFilter
|
|
||||||
:label="t('supplier.fiscalData.provinceFk')"
|
|
||||||
:options="provincesLocationOptions"
|
|
||||||
hide-selected
|
|
||||||
option-label="name"
|
|
||||||
option-value="id"
|
|
||||||
v-model="data.provinceFk"
|
|
||||||
>
|
|
||||||
<template #option="scope">
|
|
||||||
<QItem v-bind="scope.itemProps">
|
|
||||||
<QItemSection>
|
|
||||||
<QItemLabel>{{
|
|
||||||
`${scope.opt.name} (${scope.opt.country.country})`
|
|
||||||
}}</QItemLabel>
|
|
||||||
</QItemSection>
|
|
||||||
</QItem>
|
|
||||||
</template>
|
|
||||||
</VnSelectFilter>
|
|
||||||
</div>
|
|
||||||
</VnRow>
|
|
||||||
<VnRow class="row q-gutter-md q-mb-md">
|
|
||||||
<div class="col">
|
|
||||||
<VnSelectFilter
|
|
||||||
:label="t('supplier.fiscalData.country')"
|
|
||||||
:options="countriesOptions"
|
|
||||||
hide-selected
|
|
||||||
option-label="country"
|
|
||||||
option-value="id"
|
|
||||||
v-model="data.countryFk"
|
|
||||||
:rules="validate('postcode.countryFk')"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="col flex justify-around">
|
<div class="col flex justify-around">
|
||||||
<QCheckbox
|
<QCheckbox
|
||||||
v-model="data.isTrucker"
|
v-model="data.isTrucker"
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue