forked from verdnatura/salix-front
Se crea la tarjeta que muestra el listado de consignatarios existentes y la tarjeta de creacion
This commit is contained in:
carlosfonseca
parent
19d793a939
commit
d2ee8a98eb
|
|
@ -0,0 +1,241 @@
|
||||||
|
<script setup>
|
||||||
|
import { onBeforeMount, reactive, ref } from 'vue';
|
||||||
|
import { useI18n } from 'vue-i18n';
|
||||||
|
import { useRoute } from 'vue-router';
|
||||||
|
|
||||||
|
import FetchData from 'components/FetchData.vue';
|
||||||
|
import FormModel from 'components/FormModel.vue';
|
||||||
|
import VnRow from 'components/ui/VnRow.vue';
|
||||||
|
import VnInput from 'src/components/common/VnInput.vue';
|
||||||
|
import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
|
||||||
|
import CustomerCreateNewPostcode from 'src/components/CreateNewPostcodeForm.vue';
|
||||||
|
import VnSelectCreate from 'src/components/common/VnSelectCreate.vue';
|
||||||
|
|
||||||
|
const { t } = useI18n();
|
||||||
|
const route = useRoute();
|
||||||
|
|
||||||
|
const formInitialData = reactive({
|
||||||
|
isDefaultAddress: false,
|
||||||
|
nickname: null,
|
||||||
|
street: null,
|
||||||
|
postalCode: null,
|
||||||
|
city: null,
|
||||||
|
provinceFk: null,
|
||||||
|
agencyModeFk: null,
|
||||||
|
phone: null,
|
||||||
|
mobile: null,
|
||||||
|
incotermsFk: null,
|
||||||
|
customsAgentFk: null,
|
||||||
|
});
|
||||||
|
|
||||||
|
const agencyModes = ref([]);
|
||||||
|
const incoterms = ref([]);
|
||||||
|
const customsAgents = ref([]);
|
||||||
|
const postcodeFetchDataRef = ref(null);
|
||||||
|
const citiesLocationOptions = ref([]);
|
||||||
|
const provincesLocationOptions = ref([]);
|
||||||
|
const postcodesOptions = ref([]);
|
||||||
|
const urlCreate = ref('');
|
||||||
|
|
||||||
|
onBeforeMount(() => {
|
||||||
|
urlCreate.value = `Clients/${route.params.id}/createAddress`;
|
||||||
|
});
|
||||||
|
|
||||||
|
const onPostcodeCreated = async () => {
|
||||||
|
postcodeFetchDataRef.value.fetch();
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<FetchData
|
||||||
|
@on-fetch="(data) => (postcodesOptions = data)"
|
||||||
|
auto-load
|
||||||
|
url="Postcodes/location"
|
||||||
|
/>
|
||||||
|
<FetchData
|
||||||
|
@on-fetch="(data) => (citiesLocationOptions = data)"
|
||||||
|
auto-load
|
||||||
|
url="Towns/location"
|
||||||
|
/>
|
||||||
|
<FetchData
|
||||||
|
@on-fetch="(data) => (provincesLocationOptions = data)"
|
||||||
|
auto-load
|
||||||
|
url="Provinces/location"
|
||||||
|
/>
|
||||||
|
<fetch-data
|
||||||
|
@on-fetch="(data) => (agencyModes = data)"
|
||||||
|
auto-load
|
||||||
|
url="AgencyModes/isActive"
|
||||||
|
/>
|
||||||
|
<fetch-data @on-fetch="(data) => (incoterms = data)" auto-load url="Incoterms" />
|
||||||
|
<fetch-data
|
||||||
|
@on-fetch="(data) => (customsAgents = data)"
|
||||||
|
auto-load
|
||||||
|
url="CustomsAgents"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<FormModel
|
||||||
|
:form-initial-data="formInitialData"
|
||||||
|
:observe-form-changes="false"
|
||||||
|
model="client"
|
||||||
|
:url-create="urlCreate"
|
||||||
|
>
|
||||||
|
<template #form="{ data, validate }">
|
||||||
|
<VnRow class="row q-gutter-md q-mb-md">
|
||||||
|
<div class="col">
|
||||||
|
<QCheckbox :label="t('Default')" v-model="data.isDefaultAddress" />
|
||||||
|
</div>
|
||||||
|
</VnRow>
|
||||||
|
|
||||||
|
<VnRow class="row q-gutter-md q-mb-md">
|
||||||
|
<div class="col">
|
||||||
|
<VnInput :label="t('Consignee')" v-model="data.nickname" />
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<VnInput :label="t('Street address')" v-model="data.street" />
|
||||||
|
</div>
|
||||||
|
</VnRow>
|
||||||
|
|
||||||
|
<VnRow class="row q-gutter-md q-mb-md">
|
||||||
|
<div class="col">
|
||||||
|
<VnSelectCreate
|
||||||
|
:label="t('Postcode')"
|
||||||
|
:options="postcodesOptions"
|
||||||
|
:roles-allowed-to-create="['deliveryAssistant']"
|
||||||
|
:rules="validate('Worker.postcode')"
|
||||||
|
hide-selected
|
||||||
|
option-label="code"
|
||||||
|
option-value="code"
|
||||||
|
v-model="data.postalCode"
|
||||||
|
>
|
||||||
|
<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('Agency')"
|
||||||
|
:options="agencyModes"
|
||||||
|
hide-selected
|
||||||
|
option-label="name"
|
||||||
|
option-value="id"
|
||||||
|
v-model="data.agencyModeFk"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</VnRow>
|
||||||
|
|
||||||
|
<VnRow class="row q-gutter-md q-mb-md">
|
||||||
|
<div class="col">
|
||||||
|
<VnInput :label="t('Phone')" v-model="data.phone" />
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<VnInput :label="t('Mobile')" v-model="data.mobile" />
|
||||||
|
</div>
|
||||||
|
</VnRow>
|
||||||
|
|
||||||
|
<VnRow class="row q-gutter-md q-mb-md">
|
||||||
|
<div class="col">
|
||||||
|
<VnSelectFilter
|
||||||
|
:label="t('Incoterms')"
|
||||||
|
:options="incoterms"
|
||||||
|
hide-selected
|
||||||
|
option-label="name"
|
||||||
|
option-value="code"
|
||||||
|
v-model="data.incotermsFk"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<VnSelectFilter
|
||||||
|
:label="t('Customs agent')"
|
||||||
|
:options="customsAgents"
|
||||||
|
hide-selected
|
||||||
|
option-label="fiscalName"
|
||||||
|
option-value="id"
|
||||||
|
v-model="data.customsAgentFk"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</VnRow>
|
||||||
|
</template>
|
||||||
|
</FormModel>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<i18n>
|
||||||
|
es:
|
||||||
|
Default: Predeterminado
|
||||||
|
Consignee: Consignatario
|
||||||
|
Street address: Dirección postal
|
||||||
|
Postcode: Código postal
|
||||||
|
City: Población
|
||||||
|
Province: Provincia
|
||||||
|
Agency: Agencia
|
||||||
|
Phone: Teléfono
|
||||||
|
Mobile: Movíl
|
||||||
|
Incoterms: Incoterms
|
||||||
|
Customs agent: Agente de aduanas
|
||||||
|
</i18n>
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
<template>
|
||||||
|
<div class="flex justify-center">Customer consignee edit</div>
|
||||||
|
</template>
|
||||||
|
|
@ -1,3 +1,113 @@
|
||||||
|
<script setup>
|
||||||
|
import { ref } from 'vue';
|
||||||
|
import { useI18n } from 'vue-i18n';
|
||||||
|
import { useRoute, useRouter } from 'vue-router';
|
||||||
|
|
||||||
|
import FetchData from 'components/FetchData.vue';
|
||||||
|
import FormModel from 'components/FormModel.vue';
|
||||||
|
|
||||||
|
const { t } = useI18n();
|
||||||
|
const route = useRoute();
|
||||||
|
const router = useRouter();
|
||||||
|
|
||||||
|
const provincesLocation = ref([]);
|
||||||
|
|
||||||
|
const setProvince = (provinceFk) => {
|
||||||
|
const result = provincesLocation.value.filter(
|
||||||
|
(province) => province.id === provinceFk
|
||||||
|
);
|
||||||
|
return result[0].name || '';
|
||||||
|
};
|
||||||
|
|
||||||
|
const toCustomerConsigneeCreate = () => {
|
||||||
|
router.push({ name: 'CustomerConsigneeCreate' });
|
||||||
|
};
|
||||||
|
|
||||||
|
const toCustomerConsigneeEdit = () => {
|
||||||
|
router.push({ name: 'CustomerConsigneeEdit' });
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="flex justify-center">Consignees</div>
|
<FetchData
|
||||||
|
@on-fetch="(data) => (provincesLocation = data)"
|
||||||
|
auto-load
|
||||||
|
url="Provinces/location"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<FormModel
|
||||||
|
:observe-form-changes="false"
|
||||||
|
:url="`Clients/${route.params.id}/addresses`"
|
||||||
|
auto-load
|
||||||
|
model="customer"
|
||||||
|
>
|
||||||
|
<template #form="{ data }">
|
||||||
|
<div v-if="data?.length">
|
||||||
|
<div v-for="(item, index) in data" :key="index">
|
||||||
|
<div
|
||||||
|
:class="{
|
||||||
|
'consignees-card': true,
|
||||||
|
'q-mb-md': index + 1 === data.length ? false : true,
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<div class="consignees-card-icon">
|
||||||
|
<QIcon name="star" size="md" color="primary" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div>
|
||||||
|
<div class="text-weight-bold">
|
||||||
|
{{ item.nickname }} - #{{ item.id }}
|
||||||
|
</div>
|
||||||
|
<div>{{ item.street }}</div>
|
||||||
|
<div>
|
||||||
|
{{ item.postalCode }} - {{ item.city }},
|
||||||
|
{{ setProvince(item.provinceFk) }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex">
|
||||||
|
<QCheckbox
|
||||||
|
:label="t('Is equalizated')"
|
||||||
|
v-model="item.isEqualizated"
|
||||||
|
class="q-mr-lg"
|
||||||
|
@click.stop="toCustomerConsigneeEdit()"
|
||||||
|
/>
|
||||||
|
<QCheckbox
|
||||||
|
:label="t('Is logiflora allowed')"
|
||||||
|
v-model="item.isLogifloraAllowed"
|
||||||
|
@click.stop="toCustomerConsigneeEdit()"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</FormModel>
|
||||||
|
<QPageSticky :offset="[18, 18]">
|
||||||
|
<QBtn @click.stop="toCustomerConsigneeCreate()" color="primary" fab icon="add" />
|
||||||
|
<QTooltip>
|
||||||
|
{{ t('New consignee') }}
|
||||||
|
</QTooltip>
|
||||||
|
</QPageSticky>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.consignees-card {
|
||||||
|
border: 2px solid var(--vn-light-gray);
|
||||||
|
border-radius: 10px;
|
||||||
|
padding: 10px;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
.consignees-card-icon {
|
||||||
|
margin: 0 15px 0 5px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<i18n>
|
||||||
|
es:
|
||||||
|
Is equalizated: Recargo de equivalencia
|
||||||
|
Is logiflora allowed: Compra directa en Holanda
|
||||||
|
New consignee: Nuevo consignatario
|
||||||
|
</i18n>
|
||||||
|
|
|
||||||
|
|
@ -152,13 +152,42 @@ export default {
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: 'consignees',
|
path: 'consignees',
|
||||||
name: 'CustomerConsignees',
|
name: 'ConsigneesCard',
|
||||||
meta: {
|
redirect: { name: 'CustomerConsignees' },
|
||||||
title: 'consignees',
|
children: [
|
||||||
icon: 'vn:delivery',
|
{
|
||||||
},
|
path: '',
|
||||||
component: () =>
|
name: 'CustomerConsignees',
|
||||||
import('src/pages/Customer/Card/CustomerConsignees.vue'),
|
meta: {
|
||||||
|
icon: 'vn:delivery',
|
||||||
|
title: 'consignees',
|
||||||
|
},
|
||||||
|
component: () =>
|
||||||
|
import('src/pages/Customer/Card/CustomerConsignees.vue'),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: 'create',
|
||||||
|
name: 'CustomerConsigneeCreate',
|
||||||
|
meta: {
|
||||||
|
title: 'consignee-create',
|
||||||
|
},
|
||||||
|
component: () =>
|
||||||
|
import(
|
||||||
|
'src/pages/Customer/Card/CustomerConsigneeCreate.vue'
|
||||||
|
),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: 'edit',
|
||||||
|
name: 'CustomerConsigneeEdit',
|
||||||
|
meta: {
|
||||||
|
title: 'consignee-edit',
|
||||||
|
},
|
||||||
|
component: () =>
|
||||||
|
import(
|
||||||
|
'src/pages/Customer/Card/CustomerConsigneeEdit.vue'
|
||||||
|
),
|
||||||
|
},
|
||||||
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: 'notes',
|
path: 'notes',
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue