Merge pull request 'Se crea formulario de actualización de un agente de aduanas y observaciones' (#70) from features/ms_118_update_customs_agent into dev
Reviewed-on: hyervoni/salix-front-mindshore#70
This commit is contained in:
commit
904cef8860
|
|
@ -5,7 +5,6 @@ import { useRoute, useRouter } from 'vue-router';
|
|||
|
||||
import FetchData from 'components/FetchData.vue';
|
||||
import VnPaginate from 'src/components/ui/VnPaginate.vue';
|
||||
import VnLv from 'src/components/ui/VnLv.vue';
|
||||
|
||||
const { t } = useI18n();
|
||||
const route = useRoute();
|
||||
|
|
@ -13,6 +12,38 @@ const router = useRouter();
|
|||
|
||||
const provincesLocation = ref([]);
|
||||
|
||||
const consigneeFilter = {
|
||||
fields: [
|
||||
'id',
|
||||
'isDefaultAddress',
|
||||
'isActive',
|
||||
'nickname',
|
||||
'street',
|
||||
'city',
|
||||
'provinceFk',
|
||||
'phone',
|
||||
'mobile',
|
||||
'isEqualizated',
|
||||
'isLogifloraAllowed',
|
||||
'postalCode',
|
||||
],
|
||||
order: ['isDefaultAddress DESC', 'isActive DESC', 'nickname ASC'],
|
||||
include: [
|
||||
{
|
||||
relation: 'observations',
|
||||
scope: {
|
||||
include: 'observationType',
|
||||
},
|
||||
},
|
||||
{
|
||||
relation: 'province',
|
||||
scope: {
|
||||
fields: ['id', 'name'],
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const setProvince = (provinceFk) => {
|
||||
const result = provincesLocation.value.filter(
|
||||
(province) => province.id === provinceFk
|
||||
|
|
@ -24,8 +55,14 @@ const toCustomerConsigneeCreate = () => {
|
|||
router.push({ name: 'CustomerConsigneeCreate' });
|
||||
};
|
||||
|
||||
const toCustomerConsigneeEdit = () => {
|
||||
router.push({ name: 'CustomerConsigneeEdit' });
|
||||
const toCustomerConsigneeEdit = (consigneeId) => {
|
||||
router.push({
|
||||
name: 'CustomerConsigneeEdit',
|
||||
params: {
|
||||
id: route.params.id,
|
||||
consigneeId,
|
||||
},
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
|
|
@ -42,6 +79,7 @@ const toCustomerConsigneeEdit = () => {
|
|||
:url="`Clients/${route.params.id}/addresses`"
|
||||
order="id"
|
||||
auto-load
|
||||
:filter="consigneeFilter"
|
||||
>
|
||||
<template #body="{ rows }">
|
||||
<QCard
|
||||
|
|
@ -51,7 +89,7 @@ const toCustomerConsigneeEdit = () => {
|
|||
'consignees-card': true,
|
||||
'q-mb-md': index < rows.length - 1,
|
||||
}"
|
||||
@click="toCustomerConsigneeEdit()"
|
||||
@click="toCustomerConsigneeEdit(item.id)"
|
||||
>
|
||||
<div class="consignees-card-icon">
|
||||
<QIcon name="star" size="md" color="primary" />
|
||||
|
|
@ -70,14 +108,36 @@ const toCustomerConsigneeEdit = () => {
|
|||
:label="t('Is equalizated')"
|
||||
v-model="item.isEqualizated"
|
||||
class="q-mr-lg"
|
||||
disable
|
||||
/>
|
||||
<QCheckbox
|
||||
:label="t('Is logiflora allowed')"
|
||||
v-model="item.isLogifloraAllowed"
|
||||
disable
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<QSeparator
|
||||
class="q-mx-lg"
|
||||
v-if="item.observations.length"
|
||||
vertical
|
||||
/>
|
||||
|
||||
<div v-if="item.observations.length">
|
||||
<div
|
||||
:key="index"
|
||||
class="flex q-mb-sm"
|
||||
v-for="(observation, index) in item.observations"
|
||||
>
|
||||
<div class="text-weight-bold q-mr-sm">
|
||||
{{ observation.observationType.description }}:
|
||||
</div>
|
||||
<div>{{ observation.description }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</QCard>
|
||||
|
||||
<QPageSticky :offset="[18, 18]">
|
||||
<QBtn
|
||||
@click.stop="toCustomerConsigneeCreate()"
|
||||
|
|
|
|||
|
|
@ -1,3 +1,94 @@
|
|||
<script setup>
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
|
||||
import { date } from 'quasar';
|
||||
|
||||
import VnPaginate from 'src/components/ui/VnPaginate.vue';
|
||||
|
||||
const { t } = useI18n();
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
|
||||
const noteFilter = {
|
||||
order: 'created DESC',
|
||||
where: {
|
||||
clientFk: `${route.params.id}`,
|
||||
},
|
||||
};
|
||||
|
||||
const toCustomerNoteCreate = () => {
|
||||
router.push({ name: 'CustomerNoteCreate' });
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex justify-center">Notes</div>
|
||||
<QCard class="q-pa-lg">
|
||||
<VnPaginate
|
||||
data-key="CustomerNotes"
|
||||
:url="'clientObservations'"
|
||||
auto-load
|
||||
:filter="noteFilter"
|
||||
>
|
||||
<template #body="{ rows }">
|
||||
<div v-if="rows.length">
|
||||
<QCard
|
||||
v-for="(item, index) in rows"
|
||||
:key="index"
|
||||
:class="{
|
||||
'consignees-card': true,
|
||||
'q-mb-md': index < rows.length - 1,
|
||||
}"
|
||||
>
|
||||
<div class="flex justify-between">
|
||||
<p class="label-color">{{ item.worker.user.nickname }}</p>
|
||||
<p class="label-color">
|
||||
{{
|
||||
date.formatDate(item?.created, 'DD-MM-YYYY HH:mm:ss')
|
||||
}}
|
||||
</p>
|
||||
</div>
|
||||
<h6 class="q-mt-xs q-mb-none">{{ item.text }}</h6>
|
||||
</QCard>
|
||||
</div>
|
||||
|
||||
<div v-else>
|
||||
<h5 class="flex justify-center label-color">
|
||||
{{ t('globals.noResults') }}
|
||||
</h5>
|
||||
</div>
|
||||
|
||||
<QPageSticky :offset="[18, 18]">
|
||||
<QBtn
|
||||
@click.stop="toCustomerConsigneeCreate()"
|
||||
color="primary"
|
||||
fab
|
||||
icon="add"
|
||||
/>
|
||||
<QTooltip>
|
||||
{{ t('New consignee') }}
|
||||
</QTooltip>
|
||||
</QPageSticky>
|
||||
</template>
|
||||
</VnPaginate>
|
||||
</QCard>
|
||||
|
||||
<QPageSticky :offset="[18, 18]">
|
||||
<QBtn @click.stop="toCustomerNoteCreate()" color="primary" fab icon="add" />
|
||||
<QTooltip>
|
||||
{{ t('New consignee') }}
|
||||
</QTooltip>
|
||||
</QPageSticky>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.consignees-card {
|
||||
border: 2px solid var(--vn-light-gray);
|
||||
border-radius: 10px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.label-color {
|
||||
color: var(--vn-label);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -3,6 +3,8 @@ import { onBeforeMount, reactive, ref } from 'vue';
|
|||
import { useI18n } from 'vue-i18n';
|
||||
import { useRoute } from 'vue-router';
|
||||
|
||||
import axios from 'axios';
|
||||
|
||||
import FetchData from 'components/FetchData.vue';
|
||||
import FormModel from 'components/FormModel.vue';
|
||||
import VnRow from 'components/ui/VnRow.vue';
|
||||
|
|
@ -31,16 +33,18 @@ const formInitialData = reactive({
|
|||
|
||||
const townsFetchDataRef = ref(null);
|
||||
const postcodeFetchDataRef = ref(null);
|
||||
const urlCreate = ref('');
|
||||
|
||||
const postcodesOptions = ref([]);
|
||||
const citiesLocationOptions = ref([]);
|
||||
const provincesLocationOptions = ref([]);
|
||||
const agencyModes = ref([]);
|
||||
const incoterms = ref([]);
|
||||
const customsAgents = ref([]);
|
||||
const citiesLocationOptions = ref([]);
|
||||
const provincesLocationOptions = ref([]);
|
||||
const postcodesOptions = ref([]);
|
||||
const urlCreate = ref('');
|
||||
|
||||
onBeforeMount(() => {
|
||||
urlCreate.value = `Clients/${route.params.id}/createAddress`;
|
||||
getCustomsAgents();
|
||||
});
|
||||
|
||||
const onPostcodeCreated = async ({ code, provinceFk, townFk }, formData) => {
|
||||
|
|
@ -50,6 +54,15 @@ const onPostcodeCreated = async ({ code, provinceFk, townFk }, formData) => {
|
|||
formData.provinceFk = provinceFk;
|
||||
formData.city = citiesLocationOptions.value.find((town) => town.id === townFk).name;
|
||||
};
|
||||
|
||||
const getCustomsAgents = async () => {
|
||||
const { data } = await axios.get('CustomsAgents');
|
||||
customsAgents.value = data;
|
||||
};
|
||||
|
||||
const refreshData = () => {
|
||||
getCustomsAgents();
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -76,17 +89,12 @@ const onPostcodeCreated = async ({ code, provinceFk, townFk }, formData) => {
|
|||
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"
|
||||
model="client"
|
||||
>
|
||||
<template #form="{ data, validate }">
|
||||
<VnRow class="row q-gutter-md q-mb-md">
|
||||
|
|
@ -225,7 +233,7 @@ const onPostcodeCreated = async ({ code, provinceFk, townFk }, formData) => {
|
|||
v-model="data.customsAgentFk"
|
||||
>
|
||||
<template #form>
|
||||
<CustomsNewCustomsAgent />
|
||||
<CustomsNewCustomsAgent @on-data-saved="refreshData()" />
|
||||
</template>
|
||||
</VnSelectCreate>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,3 +1,372 @@
|
|||
<script setup>
|
||||
import { onBeforeMount, ref } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useRoute } from 'vue-router';
|
||||
|
||||
import axios from 'axios';
|
||||
|
||||
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 VnSelectCreate from 'src/components/common/VnSelectCreate.vue';
|
||||
import CustomerCreateNewPostcode from 'src/components/CreateNewPostcodeForm.vue';
|
||||
import CustomsNewCustomsAgent from 'src/pages/Customer/components/CustomerNewCustomsAgent.vue';
|
||||
|
||||
const { t } = useI18n();
|
||||
const route = useRoute();
|
||||
|
||||
const townsFetchDataRef = ref(null);
|
||||
const postcodeFetchDataRef = ref(null);
|
||||
const urlUpdate = ref('');
|
||||
|
||||
const postcodesOptions = ref([]);
|
||||
const citiesLocationOptions = ref([]);
|
||||
const provincesLocationOptions = ref([]);
|
||||
const agencyModes = ref([]);
|
||||
const incoterms = ref([]);
|
||||
const customsAgents = ref([]);
|
||||
const observationTypes = ref([]);
|
||||
const notes = ref([]);
|
||||
|
||||
onBeforeMount(() => {
|
||||
urlUpdate.value = `Clients/${route.params.id}/updateAddress/${route.params.consigneeId}`;
|
||||
});
|
||||
|
||||
const onPostcodeCreated = async ({ code, provinceFk, townFk }, formData) => {
|
||||
await postcodeFetchDataRef.value.fetch();
|
||||
await townsFetchDataRef.value.fetch();
|
||||
formData.postalCode = code;
|
||||
formData.provinceFk = provinceFk;
|
||||
formData.city = citiesLocationOptions.value.find((town) => town.id === townFk).name;
|
||||
};
|
||||
|
||||
const getData = async (observations) => {
|
||||
observationTypes.value = observations;
|
||||
|
||||
if (observationTypes.value.length) {
|
||||
const filter = {
|
||||
fields: ['id', 'addressFk', 'observationTypeFk', 'description'],
|
||||
where: { addressFk: `${route.params.consigneeId}` },
|
||||
};
|
||||
const { data } = await axios.get('AddressObservations', {
|
||||
params: { filter: JSON.stringify(filter) },
|
||||
});
|
||||
|
||||
if (data.length) {
|
||||
notes.value = data
|
||||
.map((observation) => {
|
||||
const type = observationTypes.value.find(
|
||||
(type) => type.id === observation.observationTypeFk
|
||||
);
|
||||
return type
|
||||
? {
|
||||
$isNew: false,
|
||||
$oldData: null,
|
||||
$orgIndex: null,
|
||||
addressFk: `${route.params.consigneeId}`,
|
||||
description: observation.description,
|
||||
observationTypeFk: type.id,
|
||||
}
|
||||
: null;
|
||||
})
|
||||
.filter((item) => item !== null);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const addNote = () => {
|
||||
notes.value.push({
|
||||
$isNew: true,
|
||||
$oldData: null,
|
||||
$orgIndex: null,
|
||||
addressFk: `${route.params.consigneeId}`,
|
||||
description: '',
|
||||
observationTypeFk: '',
|
||||
});
|
||||
};
|
||||
|
||||
const deleteNote = (index) => {
|
||||
notes.value.splice(index, 1);
|
||||
};
|
||||
|
||||
const onDataSaved = () => {
|
||||
const payload = {
|
||||
creates: notes.value,
|
||||
};
|
||||
console.log(payload);
|
||||
axios.post('AddressObservations/crud', payload);
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex justify-center">Customer consignee edit</div>
|
||||
<FetchData
|
||||
ref="postcodeFetchDataRef"
|
||||
@on-fetch="(data) => (postcodesOptions = data)"
|
||||
auto-load
|
||||
url="Postcodes/location"
|
||||
/>
|
||||
<FetchData
|
||||
ref="townsFetchDataRef"
|
||||
@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"
|
||||
/>
|
||||
<fetch-data @on-fetch="getData" auto-load url="ObservationTypes" />
|
||||
|
||||
<FormModel
|
||||
:observe-form-changes="false"
|
||||
:url-update="urlUpdate"
|
||||
:url="`Addresses/${route.params.consigneeId}`"
|
||||
@on-data-saved="onDataSaved()"
|
||||
auto-load
|
||||
model="client"
|
||||
>
|
||||
<template #form="{ data, validate }">
|
||||
<VnRow class="row q-gutter-md q-mb-md">
|
||||
<div class="col">
|
||||
<QCheckbox :label="t('Enabled')" v-model="data.isActive" />
|
||||
</div>
|
||||
<div class="col">
|
||||
<QCheckbox
|
||||
:label="t('Is equalizated')"
|
||||
v-model="data.isEqualizated"
|
||||
/>
|
||||
</div>
|
||||
<div class="col">
|
||||
<QCheckbox
|
||||
:label="t('Is Loginflora allowed')"
|
||||
v-model="data.isLogifloraAllowed"
|
||||
/>
|
||||
</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, 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">
|
||||
<!-- 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">
|
||||
<VnSelectCreate
|
||||
:label="t('Customs agent')"
|
||||
:options="customsAgents"
|
||||
hide-selected
|
||||
option-label="fiscalName"
|
||||
option-value="id"
|
||||
v-model="data.customsAgentFk"
|
||||
>
|
||||
<template #form>
|
||||
<CustomsNewCustomsAgent />
|
||||
</template>
|
||||
</VnSelectCreate>
|
||||
</div>
|
||||
</VnRow>
|
||||
|
||||
<h4 class="q-mb-xs">{{ t('Notes') }}</h4>
|
||||
<VnRow
|
||||
:key="index"
|
||||
class="row q-gutter-md q-mb-md"
|
||||
v-for="(note, index) in notes"
|
||||
>
|
||||
<div class="col">
|
||||
<VnSelectFilter
|
||||
:label="t('Observation type')"
|
||||
:options="observationTypes"
|
||||
hide-selected
|
||||
option-label="description"
|
||||
option-value="id"
|
||||
v-model="note.observationTypeFk"
|
||||
/>
|
||||
</div>
|
||||
<div class="col">
|
||||
<VnInput :label="t('Description')" v-model="note.description" />
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<QIcon
|
||||
@click.stop="deleteNote(index)"
|
||||
class="cursor-pointer"
|
||||
color="primary"
|
||||
name="delete"
|
||||
size="sm"
|
||||
>
|
||||
<QTooltip>
|
||||
{{ t('Remove') }}
|
||||
</QTooltip>
|
||||
</QIcon>
|
||||
</div>
|
||||
</VnRow>
|
||||
|
||||
<QIcon
|
||||
@click.stop="addNote()"
|
||||
class="cursor-pointer add-icon q-mt-md"
|
||||
name="add"
|
||||
size="sm"
|
||||
>
|
||||
<QTooltip>
|
||||
{{ t('Add note') }}
|
||||
</QTooltip>
|
||||
</QIcon>
|
||||
</template>
|
||||
</FormModel>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.add-icon {
|
||||
background-color: $primary;
|
||||
border-radius: 50px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<i18n>
|
||||
es:
|
||||
Enabled: Activo
|
||||
Is equalizated: Recargo de equivalencia
|
||||
Is Loginflora allowed: Compra directa en Holanda
|
||||
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
|
||||
Notes: Notas
|
||||
Observation type: Tipo de observación
|
||||
Description: Descripción
|
||||
Add note: Añadir nota
|
||||
Remove note: Eliminar nota
|
||||
</i18n>
|
||||
|
|
|
|||
|
|
@ -18,6 +18,8 @@ const initialData = reactive({
|
|||
});
|
||||
|
||||
const onDataSaved = (dataSaved) => {
|
||||
console.log('onDataSaved()');
|
||||
console.log(dataSaved);
|
||||
emit('onDataSaved', dataSaved);
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,52 @@
|
|||
<script setup>
|
||||
import { onMounted, reactive } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
|
||||
import FormModel from 'components/FormModel.vue';
|
||||
import VnRow from 'components/ui/VnRow.vue';
|
||||
|
||||
const { t } = useI18n();
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
|
||||
const initialData = reactive({
|
||||
text: null,
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
initialData.clientFk = `${route.params.id}`;
|
||||
});
|
||||
|
||||
const toCustomerNotes = () => {
|
||||
console.log('toCustomerNotes()');
|
||||
router.push({
|
||||
name: 'CustomerNotes',
|
||||
params: {
|
||||
id: route.params.id,
|
||||
},
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<FormModel
|
||||
:form-initial-data="initialData"
|
||||
:observe-form-changes="false"
|
||||
url-create="ClientObservations"
|
||||
@on-data-saved="toCustomerNotes()"
|
||||
>
|
||||
<template #form="{ data }">
|
||||
<VnRow class="row q-gutter-md q-mb-md">
|
||||
<div class="col">
|
||||
<QInput :label="t('Note')" type="textarea" v-model="data.text" />
|
||||
</div>
|
||||
</VnRow>
|
||||
</template>
|
||||
</FormModel>
|
||||
</template>
|
||||
|
||||
<i18n>
|
||||
es:
|
||||
Note: Nota
|
||||
</i18n>
|
||||
|
|
@ -176,6 +176,11 @@ export default {
|
|||
'src/pages/Customer/components/CustomerConsigneeCreate.vue'
|
||||
),
|
||||
},
|
||||
{
|
||||
path: ':consigneeId',
|
||||
name: 'CustomerConsigneeEditCard',
|
||||
redirect: { name: 'CustomerConsigneeEdit' },
|
||||
children: [
|
||||
{
|
||||
path: 'edit',
|
||||
name: 'CustomerConsigneeEdit',
|
||||
|
|
@ -189,14 +194,35 @@ export default {
|
|||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
path: 'notes',
|
||||
name: 'NotesCard',
|
||||
redirect: { name: 'CustomerNotes' },
|
||||
children: [
|
||||
{
|
||||
path: '',
|
||||
name: 'CustomerNotes',
|
||||
meta: {
|
||||
title: 'notes',
|
||||
icon: 'vn:notes',
|
||||
},
|
||||
component: () => import('src/pages/Customer/Card/CustomerNotes.vue'),
|
||||
component: () =>
|
||||
import('src/pages/Customer/Card/CustomerNotes.vue'),
|
||||
},
|
||||
{
|
||||
path: 'create',
|
||||
name: 'CustomerNoteCreate',
|
||||
meta: {
|
||||
title: 'note-create',
|
||||
},
|
||||
component: () =>
|
||||
import(
|
||||
'src/pages/Customer/components/CustomerNoteCreate.vue'
|
||||
),
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
path: 'credits',
|
||||
|
|
|
|||
Loading…
Reference in New Issue