Add route form
This commit is contained in:
Kevin Martinez
parent
e1ac98cf3e
commit
a68f53d9f7
|
|
@ -128,13 +128,14 @@ async function save() {
|
|||
|
||||
try {
|
||||
const body = $props.mapper ? $props.mapper(formData.value) : formData.value;
|
||||
let response
|
||||
if ($props.urlCreate) {
|
||||
await axios.post($props.urlCreate, body);
|
||||
response = await axios.post($props.urlCreate, body);
|
||||
notify('globals.dataCreated', 'positive');
|
||||
} else {
|
||||
await axios.patch($props.urlUpdate || $props.url, body);
|
||||
response = await axios.patch($props.urlUpdate || $props.url, body);
|
||||
}
|
||||
emit('onDataSaved', formData.value);
|
||||
emit('onDataSaved', formData.value, response);
|
||||
originalData.value = JSON.parse(JSON.stringify(formData.value));
|
||||
hasChanges.value = false;
|
||||
} catch (err) {
|
||||
|
|
|
|||
|
|
@ -807,7 +807,9 @@ export default {
|
|||
pageTitles: {
|
||||
routes: 'Routes',
|
||||
cmrsList: 'External CMRs list',
|
||||
RouteList: 'List'
|
||||
RouteList: 'List',
|
||||
create: 'Create',
|
||||
basicData: 'Basic Data'
|
||||
},
|
||||
cmr: {
|
||||
list: {
|
||||
|
|
|
|||
|
|
@ -806,7 +806,9 @@ export default {
|
|||
pageTitles: {
|
||||
routes: 'Rutas',
|
||||
cmrsList: 'Listado de CMRs externos',
|
||||
RouteList: 'Listado'
|
||||
RouteList: 'Listado',
|
||||
create: 'Crear',
|
||||
basicData: 'Datos básicos',
|
||||
},
|
||||
cmr: {
|
||||
list: {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,21 @@
|
|||
<script setup>
|
||||
import { useStateStore } from 'stores/useStateStore';
|
||||
import LeftMenu from 'components/LeftMenu.vue';
|
||||
// import ShelvingDescriptor from 'pages/Shelving/Card/ShelvingDescriptor.vue';
|
||||
|
||||
const stateStore = useStateStore();
|
||||
</script>
|
||||
<template>
|
||||
<QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
|
||||
<QScrollArea class="fit">
|
||||
<!-- <ShelvingDescriptor />-->
|
||||
<QSeparator />
|
||||
<LeftMenu source="card" />
|
||||
</QScrollArea>
|
||||
</QDrawer>
|
||||
<QPageContainer>
|
||||
<QPage>
|
||||
<RouterView></RouterView>
|
||||
</QPage>
|
||||
</QPageContainer>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,215 @@
|
|||
<script setup>
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { ref } from 'vue';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import VnRow from 'components/ui/VnRow.vue';
|
||||
import FetchData from 'components/FetchData.vue';
|
||||
import FormModel from 'components/FormModel.vue';
|
||||
import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
|
||||
import VnSelectFilter from 'components/common/VnSelectFilter.vue';
|
||||
import VnInputDate from 'components/common/VnInputDate.vue';
|
||||
import VnInput from 'components/common/VnInput.vue';
|
||||
import axios from 'axios';
|
||||
import VnInputTime from 'components/common/VnInputTime.vue';
|
||||
|
||||
const { t } = useI18n();
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const shelvingId = route.params?.id || null;
|
||||
const isNew = Boolean(!shelvingId);
|
||||
const defaultInitialData = {
|
||||
agencyModeFk: null,
|
||||
created: null,
|
||||
description: '',
|
||||
vehicleFk: null,
|
||||
workerFk: null,
|
||||
};
|
||||
|
||||
const workerList = ref([]);
|
||||
const agencyList = ref([]);
|
||||
const vehicleList = ref([]);
|
||||
|
||||
const routeFilter = {
|
||||
fields: [
|
||||
'id',
|
||||
'workerFk',
|
||||
'agencyModeFk',
|
||||
'created',
|
||||
'm3',
|
||||
'warehouseFk',
|
||||
'description',
|
||||
'vehicleFk',
|
||||
'kmStart',
|
||||
'kmEnd',
|
||||
'started',
|
||||
'finished',
|
||||
'cost',
|
||||
'zoneFk',
|
||||
'isOk',
|
||||
],
|
||||
include: [
|
||||
{ relation: 'agencyMode', scope: { fields: ['id', 'name'] } },
|
||||
{
|
||||
relation: 'vehicle',
|
||||
scope: { fields: ['id', 'm3'] },
|
||||
},
|
||||
{ relation: 'zone', scope: { fields: ['id', 'name'] } },
|
||||
{
|
||||
relation: 'worker',
|
||||
scope: {
|
||||
fields: ['id'],
|
||||
include: {
|
||||
relation: 'user',
|
||||
scope: {
|
||||
fields: ['id'],
|
||||
include: { relation: 'emailUser', scope: { fields: ['email'] } },
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
const onSave = (data, response) => {
|
||||
if (isNew) {
|
||||
axios.post(`Routes/${response.data?.id}/updateWorkCenter`);
|
||||
// TODO: Add summary
|
||||
// router.push({ name: 'RouteSummary', params: { id: response.data?.id } });
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
<VnSubToolbar />
|
||||
<FetchData
|
||||
url="Workers/search"
|
||||
:filter="{ fields: ['id', 'nickname'] }"
|
||||
sort-by="nickname ASC"
|
||||
limit="30"
|
||||
@on-fetch="(data) => (workerList = data)"
|
||||
auto-load
|
||||
/>
|
||||
<FetchData
|
||||
url="AgencyModes/isActive"
|
||||
:filter="{ fields: ['id', 'name'] }"
|
||||
sort-by="name ASC"
|
||||
limit="30"
|
||||
@on-fetch="(data) => (agencyList = data)"
|
||||
auto-load
|
||||
/>
|
||||
<FetchData
|
||||
url="Vehicles"
|
||||
:filter="{ fields: ['id', 'numberPlate'] }"
|
||||
sort-by="numberPlate ASC"
|
||||
limit="30"
|
||||
@on-fetch="(data) => (vehicleList = data)"
|
||||
auto-load
|
||||
/>
|
||||
<FormModel
|
||||
:url="isNew ? null : `Routes/${shelvingId}`"
|
||||
:url-create="isNew ? 'Routes' : null"
|
||||
:observe-form-changes="!isNew"
|
||||
:filter="routeFilter"
|
||||
model="route"
|
||||
:auto-load="!isNew"
|
||||
:form-initial-data="defaultInitialData"
|
||||
@on-data-saved="onSave"
|
||||
>
|
||||
<template #form="{ data }">
|
||||
<VnRow class="row q-gutter-md q-mb-md">
|
||||
<div class="col">
|
||||
<VnSelectFilter
|
||||
:label="t('Worker')"
|
||||
v-model="data.workerFk"
|
||||
:options="workerList"
|
||||
option-value="id"
|
||||
option-label="nickname"
|
||||
emit-value
|
||||
map-options
|
||||
use-input
|
||||
:input-debounce="0"
|
||||
>
|
||||
<template #option="{ itemProps, opt }">
|
||||
<QItem v-bind="itemProps">
|
||||
<QItemSection>
|
||||
<QItemLabel>{{ opt.name }}</QItemLabel>
|
||||
<QItemLabel caption>
|
||||
{{ opt.nickname }},{{ opt.code }}
|
||||
</QItemLabel>
|
||||
</QItemSection>
|
||||
</QItem>
|
||||
</template>
|
||||
</VnSelectFilter>
|
||||
</div>
|
||||
<div class="col">
|
||||
<VnSelectFilter
|
||||
:label="t('Vehicle')"
|
||||
v-model="data.vehicleFk"
|
||||
:options="vehicleList"
|
||||
option-value="id"
|
||||
option-label="numberPlate"
|
||||
emit-value
|
||||
map-options
|
||||
use-input
|
||||
:input-debounce="0"
|
||||
/>
|
||||
</div>
|
||||
</VnRow>
|
||||
<VnRow class="row q-gutter-md q-mb-md">
|
||||
<div class="col">
|
||||
<VnSelectFilter
|
||||
:label="t('Agency')"
|
||||
v-model="data.agencyModeFk"
|
||||
:options="agencyList"
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
emit-value
|
||||
map-options
|
||||
use-input
|
||||
:input-debounce="0"
|
||||
/>
|
||||
</div>
|
||||
<div class="col">
|
||||
<VnInputDate v-model="data.created" :label="t('Created')" />
|
||||
</div>
|
||||
</VnRow>
|
||||
<template v-if="!isNew">
|
||||
<VnRow class="row q-gutter-md q-mb-md">
|
||||
<div class="col">
|
||||
<VnInput
|
||||
v-model="data.kmStart"
|
||||
:label="t('Km Start')"
|
||||
clearable
|
||||
/>
|
||||
</div>
|
||||
<div class="col">
|
||||
<VnInput v-model="data.kmEnd" :label="t('Km End')" clearable />
|
||||
</div>
|
||||
</VnRow>
|
||||
<VnRow class="row q-gutter-md q-mb-md">
|
||||
<div class="col">
|
||||
<VnInputTime
|
||||
v-model="data.started"
|
||||
:label="t('Hour started')"
|
||||
clearable
|
||||
/>
|
||||
</div>
|
||||
<div class="col">
|
||||
<VnInputTime
|
||||
v-model="data.finished"
|
||||
:label="t('Hour finished')"
|
||||
clearable
|
||||
/>
|
||||
</div>
|
||||
</VnRow>
|
||||
</template>
|
||||
<VnRow class="row q-gutter-md q-mb-md">
|
||||
<div class="col">
|
||||
<VnInput
|
||||
v-model="data.description"
|
||||
:label="t('Description')"
|
||||
clearable
|
||||
/>
|
||||
</div>
|
||||
</VnRow>
|
||||
</template>
|
||||
</FormModel>
|
||||
</template>
|
||||
|
|
@ -371,14 +371,14 @@ const updateWorker = (row, worker) => {
|
|||
</QTable>
|
||||
</template>
|
||||
</VnPaginate>
|
||||
<!-- <QPageSticky :offset="[20, 20]">-->
|
||||
<!-- <RouterLink :to="{ name: 'ShelvingCreate' }">-->
|
||||
<!-- <QBtn fab icon="add" color="primary" />-->
|
||||
<!-- <QTooltip>-->
|
||||
<!-- {{ t('shelving.list.newShelving') }}-->
|
||||
<!-- </QTooltip>-->
|
||||
<!-- </RouterLink>-->
|
||||
<!-- </QPageSticky>-->
|
||||
<QPageSticky :offset="[20, 20]">
|
||||
<RouterLink :to="{ name: 'RouteCreate' }">
|
||||
<QBtn fab icon="add" color="primary" />
|
||||
<QTooltip>
|
||||
{{ t('newRoute') }}
|
||||
</QTooltip>
|
||||
</RouterLink>
|
||||
</QPageSticky>
|
||||
</QPage>
|
||||
</template>
|
||||
|
||||
|
|
@ -389,6 +389,8 @@ const updateWorker = (row, worker) => {
|
|||
}
|
||||
</style>
|
||||
<i18n>
|
||||
en:
|
||||
newRoute: New Route
|
||||
es:
|
||||
ID: ID
|
||||
Worker: Trabajador
|
||||
|
|
@ -398,4 +400,5 @@ es:
|
|||
Description: Descripción
|
||||
Hour started: Hora inicio
|
||||
Hour finished: Hora fin
|
||||
newRoute: Nueva Ruta
|
||||
</i18n>
|
||||
|
|
|
|||
|
|
@ -38,6 +38,32 @@ export default {
|
|||
},
|
||||
component: () => import('src/pages/Route/RouteList.vue'),
|
||||
},
|
||||
{
|
||||
path: 'create',
|
||||
name: 'RouteCreate',
|
||||
meta: {
|
||||
title: 'create',
|
||||
},
|
||||
component: () => import('src/pages/Route/Card/RouteForm.vue'),
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: 'RouteCard',
|
||||
path: ':id',
|
||||
component: () => import('src/pages/Route/Card/RouteCard.vue'),
|
||||
// TODO: Add summary
|
||||
redirect: { name: 'RouteBasicData' },
|
||||
children: [
|
||||
{
|
||||
name: 'RouteBasicData',
|
||||
path: 'basic-data',
|
||||
meta: {
|
||||
title: 'basicData',
|
||||
icon: 'vn:settings',
|
||||
},
|
||||
component: () => import('pages/Route/Card/RouteForm.vue'),
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
|
|
|
|||
Loading…
Reference in New Issue