forked from verdnatura/salix-front
refs #6280 feat use VnLocation in CustomerCreate
This commit is contained in:
parent
810dd81b34
commit
68ba851e6e
|
@ -2,12 +2,11 @@
|
||||||
import { reactive, ref } from 'vue';
|
import { reactive, ref } from 'vue';
|
||||||
import { useI18n } from 'vue-i18n';
|
import { useI18n } from 'vue-i18n';
|
||||||
|
|
||||||
import CustomerCreateNewPostcode from 'src/components/CreateNewPostcodeForm.vue';
|
|
||||||
import FetchData from 'components/FetchData.vue';
|
import FetchData from 'components/FetchData.vue';
|
||||||
import FormModel from 'components/FormModel.vue';
|
import FormModel from 'components/FormModel.vue';
|
||||||
import VnRow from 'components/ui/VnRow.vue';
|
import VnRow from 'components/ui/VnRow.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 VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
|
import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
|
||||||
|
|
||||||
const { t } = useI18n();
|
const { t } = useI18n();
|
||||||
|
@ -133,96 +132,15 @@ const onPostcodeCreated = async () => {
|
||||||
</VnRow>
|
</VnRow>
|
||||||
<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
|
||||||
v-model="data.postcode"
|
|
||||||
:label="t('Postcode')"
|
|
||||||
:rules="validate('Worker.postcode')"
|
|
||||||
:roles-allowed-to-create="['deliveryAssistant']"
|
|
||||||
:options="postcodesOptions"
|
:options="postcodesOptions"
|
||||||
option-label="code"
|
v-model="data.location"
|
||||||
option-value="code"
|
@update:model-value="(data)=> console.log(data)"
|
||||||
hide-selected
|
>
|
||||||
>
|
</VnLocation>
|
||||||
<template #form>
|
|
||||||
<CustomerCreateNewPostcode
|
|
||||||
@on-data-saved="onPostcodeCreated($event)"
|
|
||||||
/>
|
|
||||||
</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">
|
|
||||||
<!-- ciudades -->
|
|
||||||
<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>
|
||||||
|
|
||||||
<VnRow class="row q-gutter-md q-mb-md">
|
<VnRow class="row q-gutter-md q-mb-md">
|
||||||
<div class="col">
|
<div class="col">
|
||||||
<QInput v-model="data.userName" :label="t('Web user')" />
|
<QInput v-model="data.userName" :label="t('Web user')" />
|
||||||
|
|
Loading…
Reference in New Issue