refactor(TravelThermograph): refs #7527 use popups
This commit is contained in:
parent
16a3a76530
commit
a672fd96e7
|
@ -0,0 +1,136 @@
|
|||
<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 VnSelect from 'components/common/VnSelect.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';
|
||||
import filter from './RouteFilter.js';
|
||||
import VnSelectWorker from 'src/components/common/VnSelectWorker.vue';
|
||||
|
||||
const { t } = useI18n();
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const shelvingId = ref(route.params?.id || null);
|
||||
const isNew = Boolean(!shelvingId.value);
|
||||
const defaultInitialData = {
|
||||
agencyModeFk: null,
|
||||
dated: null,
|
||||
description: '',
|
||||
vehicleFk: null,
|
||||
workerFk: null,
|
||||
isOk: false,
|
||||
};
|
||||
const maxDistance = ref();
|
||||
const onSave = (data, response) => {
|
||||
if (isNew) {
|
||||
axios.post(`Routes/${response?.id}/updateWorkCenter`);
|
||||
router.push({ name: 'RouteSummary', params: { id: response?.id } });
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
<VnSubToolbar v-if="isNew" />
|
||||
<FetchData
|
||||
url="RouteConfigs/findOne"
|
||||
@on-fetch="({ kmMax }) => (maxDistance = kmMax)"
|
||||
auto-load
|
||||
sort-by="id ASC"
|
||||
/>
|
||||
<FormModel
|
||||
:url-create="isNew ? 'Routes' : null"
|
||||
:observe-form-changes="!isNew"
|
||||
:filter="filter"
|
||||
model="Route"
|
||||
:auto-load="!isNew"
|
||||
:form-initial-data="isNew ? defaultInitialData : null"
|
||||
@on-data-saved="onSave"
|
||||
>
|
||||
<template #form="{ data }">
|
||||
<VnRow>
|
||||
<VnSelectWorker v-model="data.workerFk" />
|
||||
<VnSelect
|
||||
:label="t('Vehicle')"
|
||||
v-model="data.vehicleFk"
|
||||
url="Vehicles/active"
|
||||
sort-by="numberPlate ASC"
|
||||
option-value="id"
|
||||
option-label="numberPlate"
|
||||
:input-debounce="0"
|
||||
/>
|
||||
</VnRow>
|
||||
<VnRow>
|
||||
<VnSelect
|
||||
:label="t('Agency')"
|
||||
v-model="data.agencyModeFk"
|
||||
url="AgencyModes/isActive"
|
||||
sort-by="name"
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
:input-debounce="0"
|
||||
/>
|
||||
<VnInputDate v-model="data.dated" :label="t('Dated')" />
|
||||
</VnRow>
|
||||
<template v-if="!isNew">
|
||||
<VnRow>
|
||||
<VnInput v-model="data.kmStart" :label="t('Km Start')" clearable />
|
||||
<QInput
|
||||
v-model.number="data.kmEnd"
|
||||
:label="t('Km End')"
|
||||
clearable
|
||||
type="number"
|
||||
/>
|
||||
</VnRow>
|
||||
<VnRow>
|
||||
<VnInputTime
|
||||
v-model="data.started"
|
||||
:label="t('Hour started')"
|
||||
clearable
|
||||
/>
|
||||
<VnInputTime
|
||||
v-model="data.finished"
|
||||
:label="t('Hour finished')"
|
||||
clearable
|
||||
/>
|
||||
<div class="col flex items-center">
|
||||
<QCheckbox
|
||||
size="sm"
|
||||
v-model="data.isOk"
|
||||
:label="t('Is served')"
|
||||
clearable
|
||||
/>
|
||||
</div>
|
||||
</VnRow>
|
||||
</template>
|
||||
<VnInput
|
||||
v-model="data.description"
|
||||
:label="t('Description')"
|
||||
type="textarea"
|
||||
:rows="3"
|
||||
clearable
|
||||
/>
|
||||
</template>
|
||||
</FormModel>
|
||||
</template>
|
||||
<i18n>
|
||||
es:
|
||||
Worker: Trabajador
|
||||
Vehicle: Vehículo
|
||||
Agency: Agencia
|
||||
Km Start: Km de inicio
|
||||
Km End: Km de fin
|
||||
Hour started: Hora inicio
|
||||
Hour finished: Hora fin
|
||||
Description: Descripción
|
||||
Is served: Se ha servido
|
||||
Dated: Fecha
|
||||
The km can not exceed: La distancia debe ser inferior a {maxDistance}
|
||||
en:
|
||||
The km can not exceed: Distance must be lesser than {maxDistance}
|
||||
</i18n>
|
|
@ -4,7 +4,7 @@ import { useRoute, useRouter } from 'vue-router';
|
|||
import { useI18n } from 'vue-i18n';
|
||||
import { useQuasar } from 'quasar';
|
||||
|
||||
import VnPaginate from 'src/components/ui/VnPaginate.vue';
|
||||
import VnTable from 'src/components/VnTable/VnTable.vue';
|
||||
import VnConfirm from 'components/ui/VnConfirm.vue';
|
||||
import FetchData from 'src/components/FetchData.vue';
|
||||
|
||||
|
@ -13,6 +13,7 @@ import useNotify from 'src/composables/useNotify.js';
|
|||
import { toDate, toCelsius } from 'src/filters';
|
||||
import { downloadFile } from 'src/composables/downloadFile';
|
||||
import { useArrayData } from 'src/composables/useArrayData';
|
||||
import TravelThermographsForm from './TravelThermographsForm.vue';
|
||||
|
||||
const route = useRoute();
|
||||
const quasar = useQuasar();
|
||||
|
@ -23,7 +24,8 @@ const { notify } = useNotify();
|
|||
const travel = computed(() => useArrayData('Travel').store.data);
|
||||
const thermographPaginateRef = ref();
|
||||
const warehouses = ref([]);
|
||||
|
||||
const showForm = ref(false);
|
||||
const formData = ref({});
|
||||
const thermographFilter = {
|
||||
include: [
|
||||
{
|
||||
|
@ -38,8 +40,10 @@ const thermographFilter = {
|
|||
fields: ['id', 'name'],
|
||||
},
|
||||
},
|
||||
{
|
||||
relation: 'dms',
|
||||
},
|
||||
],
|
||||
where: { travelFk: route.params.id },
|
||||
order: ['created'],
|
||||
};
|
||||
|
||||
|
@ -59,23 +63,23 @@ const TableColumns = computed(() => {
|
|||
},
|
||||
{
|
||||
label: t('travel.thermographs.carrier'),
|
||||
field: (row) => row.agencyMode?.name,
|
||||
name: 'agencyModeFk',
|
||||
align: 'left',
|
||||
format: (row) => row.agencyMode?.name,
|
||||
},
|
||||
{
|
||||
label: t('globals.maxTemperature'),
|
||||
field: 'maxTemperature',
|
||||
name: 'maxTemperature',
|
||||
align: 'left',
|
||||
format: (val) => toCelsius(val),
|
||||
format: ({ maxTemperature }) => toCelsius(maxTemperature),
|
||||
},
|
||||
{
|
||||
label: t('globals.minTemperature'),
|
||||
field: 'minTemperature',
|
||||
name: 'minTemperature',
|
||||
align: 'left',
|
||||
format: (val) => toCelsius(val),
|
||||
format: ({ minTemperature }) => toCelsius(minTemperature),
|
||||
},
|
||||
{
|
||||
label: t('globals.state'),
|
||||
|
@ -88,60 +92,47 @@ const TableColumns = computed(() => {
|
|||
field: 'warehouseFk',
|
||||
name: 'destination',
|
||||
align: 'left',
|
||||
format: (val) =>
|
||||
warehouses.value.find((warehouse) => warehouse.id === val)?.name,
|
||||
format: ({ warehouseFk }) =>
|
||||
warehouses.value.find((warehouse) => warehouse.id === warehouseFk)?.name,
|
||||
},
|
||||
{
|
||||
label: t('globals.created'),
|
||||
field: 'created',
|
||||
name: 'created',
|
||||
align: 'left',
|
||||
format: (val) => toDate(val),
|
||||
format: ({ created }) => toDate(created),
|
||||
},
|
||||
{
|
||||
name: 'downloadFile',
|
||||
align: 'left',
|
||||
columnFilter: false,
|
||||
},
|
||||
{
|
||||
name: 'editFile',
|
||||
align: 'left',
|
||||
columnFilter: false,
|
||||
},
|
||||
{
|
||||
name: 'removeThermograph',
|
||||
align: 'left',
|
||||
columnFilter: false,
|
||||
},
|
||||
];
|
||||
});
|
||||
|
||||
const openRemoveDialog = async (id) => {
|
||||
quasar
|
||||
.dialog({
|
||||
component: VnConfirm,
|
||||
componentProps: {
|
||||
message: t('Are you sure you want to remove the thermograph?'),
|
||||
},
|
||||
})
|
||||
.onOk(async () => {
|
||||
await removeThermograph(id);
|
||||
});
|
||||
};
|
||||
|
||||
const redirectToThermographForm = (action, id) => {
|
||||
const routeDetails = {
|
||||
name: action === 'create' ? 'TravelThermographsCreate' : 'TravelThermographsEdit',
|
||||
};
|
||||
|
||||
if (action === 'edit' && id) {
|
||||
routeDetails.query = { id };
|
||||
} else if (action === 'create') {
|
||||
routeDetails.query = { agencyModeFk: travel.value?.agencyModeFk };
|
||||
}
|
||||
router.push(routeDetails);
|
||||
quasar.dialog({
|
||||
component: VnConfirm,
|
||||
componentProps: {
|
||||
message: t('Are you sure you want to remove the thermograph?'),
|
||||
promise: () => removeThermograph(id),
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
const removeThermograph = async (id) => {
|
||||
await axios.delete(`Travels/deleteThermograph?id=${id}`);
|
||||
await thermographPaginateRef.value.fetch();
|
||||
await thermographPaginateRef.value.reload();
|
||||
notify(t('Thermograph removed'), 'positive');
|
||||
};
|
||||
</script>
|
||||
|
@ -154,75 +145,77 @@ const removeThermograph = async (id) => {
|
|||
@on-fetch="(data) => (warehouses = data)"
|
||||
auto-load
|
||||
/>
|
||||
<VnPaginate
|
||||
<VnTable
|
||||
ref="thermographPaginateRef"
|
||||
data-key="TravelThermographs"
|
||||
url="TravelThermographs"
|
||||
:user-filter="thermographFilter"
|
||||
:filter="{ where: { travelFk: route.params.id } }"
|
||||
:columns="TableColumns"
|
||||
auto-load
|
||||
>
|
||||
<template #body="{ rows }">
|
||||
<QTable
|
||||
:rows="rows"
|
||||
:columns="TableColumns"
|
||||
:no-data-label="t('No results')"
|
||||
row-key="id"
|
||||
class="full-width q-mt-md"
|
||||
<template #column-downloadFile="{ row }">
|
||||
<QIcon
|
||||
name="cloud_download"
|
||||
color="primary"
|
||||
size="sm"
|
||||
class="cursor-pointer"
|
||||
@click="downloadFile(row.dmsFk)"
|
||||
>
|
||||
<template #body-cell-downloadFile="{ row }">
|
||||
<QTd auto-width>
|
||||
<QIcon
|
||||
name="cloud_download"
|
||||
color="primary"
|
||||
size="sm"
|
||||
class="cursor-pointer"
|
||||
@click="downloadFile(row.dmsFk)"
|
||||
>
|
||||
<QTooltip>{{ t('Download file') }}</QTooltip>
|
||||
</QIcon>
|
||||
</QTd>
|
||||
</template>
|
||||
<template #body-cell-editFile="{ row }">
|
||||
<QTd auto-width>
|
||||
<QIcon
|
||||
name="edit"
|
||||
color="primary"
|
||||
size="sm"
|
||||
class="cursor-pointer"
|
||||
@click="redirectToThermographForm('edit', row.id)"
|
||||
>
|
||||
<QTooltip>{{ t('Edit file') }}</QTooltip>
|
||||
</QIcon>
|
||||
</QTd>
|
||||
</template>
|
||||
<template #body-cell-removeThermograph="{ row }">
|
||||
<QTd auto-width>
|
||||
<QIcon
|
||||
name="delete"
|
||||
color="primary"
|
||||
size="sm"
|
||||
class="cursor-pointer"
|
||||
@click="openRemoveDialog(row.id)"
|
||||
>
|
||||
<QTooltip>{{ t('Remove thermograph') }}</QTooltip>
|
||||
</QIcon>
|
||||
</QTd>
|
||||
</template>
|
||||
</QTable>
|
||||
<QTooltip>{{ t('Download file') }}</QTooltip>
|
||||
</QIcon>
|
||||
</template>
|
||||
</VnPaginate>
|
||||
<template #column-editFile="{ row }">
|
||||
<QIcon
|
||||
name="edit"
|
||||
color="primary"
|
||||
size="sm"
|
||||
class="cursor-pointer"
|
||||
@click="
|
||||
() => {
|
||||
formData = row;
|
||||
showForm = !showForm;
|
||||
}
|
||||
"
|
||||
>
|
||||
<QTooltip>{{ t('Edit file') }}</QTooltip>
|
||||
</QIcon>
|
||||
</template>
|
||||
<template #column-removeThermograph="{ row }">
|
||||
<QIcon
|
||||
name="delete"
|
||||
color="primary"
|
||||
size="sm"
|
||||
class="cursor-pointer"
|
||||
@click="openRemoveDialog(row.id)"
|
||||
>
|
||||
<QTooltip>{{ t('Remove thermograph') }}</QTooltip>
|
||||
</QIcon>
|
||||
</template>
|
||||
</VnTable>
|
||||
<QPageSticky :offset="[20, 20]">
|
||||
<QBtn
|
||||
fab
|
||||
icon="add"
|
||||
color="primary"
|
||||
@click="redirectToThermographForm('create')"
|
||||
@click="
|
||||
() => {
|
||||
formData = { dms: {} };
|
||||
showForm = !showForm;
|
||||
}
|
||||
"
|
||||
v-shortcut="'+'"
|
||||
/>
|
||||
<QTooltip class="text-no-wrap">
|
||||
{{ t('Add thermograph') }}
|
||||
</QTooltip>
|
||||
</QPageSticky>
|
||||
<QDialog v-model="showForm">
|
||||
<TravelThermographsForm
|
||||
:form-initial-data="formData"
|
||||
:agencyModeFk="travel?.agencyModeFk"
|
||||
/>
|
||||
</QDialog>
|
||||
</template>
|
||||
|
||||
<i18n>
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
<script setup>
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { ref, onBeforeMount } from 'vue';
|
||||
import { ref, onBeforeMount, useAttrs } from 'vue';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
|
||||
import FetchData from 'components/FetchData.vue';
|
||||
|
@ -11,22 +11,14 @@ import VnInput from 'src/components/common/VnInput.vue';
|
|||
import CreateThermographForm from 'src/components/CreateThermographForm.vue';
|
||||
|
||||
import { useState } from 'src/composables/useState';
|
||||
import { useStateStore } from 'stores/useStateStore';
|
||||
import axios from 'axios';
|
||||
import useNotify from 'src/composables/useNotify.js';
|
||||
import VnInputNumber from 'src/components/common/VnInputNumber.vue';
|
||||
import FormModelPopup from 'src/components/FormModelPopup.vue';
|
||||
|
||||
const props = defineProps({
|
||||
viewAction: {
|
||||
type: String,
|
||||
default: 'create',
|
||||
},
|
||||
});
|
||||
|
||||
const stateStore = useStateStore();
|
||||
const attrs = useAttrs();
|
||||
const { t } = useI18n();
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const state = useState();
|
||||
const { notify } = useNotify();
|
||||
|
||||
|
@ -37,26 +29,23 @@ const dmsTypesOptions = ref([]);
|
|||
const companiesOptions = ref([]);
|
||||
const warehousesOptions = ref([]);
|
||||
const temperaturesOptions = ref([]);
|
||||
const thermographForm = ref({});
|
||||
const inputFileRef = ref(null);
|
||||
const agencyModeOptions = ref([]);
|
||||
|
||||
onBeforeMount(async () => {
|
||||
if (props.viewAction === 'create') {
|
||||
setCreateDefaultParams();
|
||||
} else {
|
||||
await setEditDefaultParams();
|
||||
}
|
||||
const $props = defineProps({
|
||||
agencyModeFk: {
|
||||
type: Number,
|
||||
default: undefined,
|
||||
},
|
||||
});
|
||||
|
||||
if (route.query.thermographData) {
|
||||
const thermographData = JSON.parse(route.query.thermographData);
|
||||
for (let key in thermographForm.value) {
|
||||
thermographForm.value[key] = thermographData[key];
|
||||
}
|
||||
onBeforeMount(async () => {
|
||||
if (!attrs['form-initial-data'].thermographFk) {
|
||||
await setCreateDefaultParams();
|
||||
}
|
||||
});
|
||||
|
||||
const fetchDmsTypes = async () => {
|
||||
async function fetchDmsTypes() {
|
||||
const params = {
|
||||
filter: {
|
||||
where: { code: 'thermograph' },
|
||||
|
@ -64,74 +53,68 @@ const fetchDmsTypes = async () => {
|
|||
};
|
||||
const { data } = await axios.get('DmsTypes/findOne', { params });
|
||||
return data;
|
||||
};
|
||||
}
|
||||
|
||||
const setCreateDefaultParams = async () => {
|
||||
async function setCreateDefaultParams() {
|
||||
const dataResponse = await fetchDmsTypes();
|
||||
thermographForm.value.companyId = user.value.companyFk;
|
||||
thermographForm.value.warehouseId = user.value.warehouseFk;
|
||||
thermographForm.value.reference = route.params.id;
|
||||
thermographForm.value.dmsTypeId = dataResponse.id;
|
||||
thermographForm.value.state = 'Ok';
|
||||
thermographForm.value.agencyModeFk = +route.query.agencyModeFk;
|
||||
thermographForm.value.description = t('travel.thermographs.travelFileDescription', {
|
||||
travelId: route.params.id,
|
||||
}).toUpperCase();
|
||||
};
|
||||
attrs['form-initial-data'].companyFk = user.value.companyFk;
|
||||
attrs['form-initial-data'].warehouseFk = user.value.warehouseFk;
|
||||
attrs['form-initial-data'].dms.reference = route.params.id;
|
||||
attrs['form-initial-data'].dms.dmsTypeFk = dataResponse.id;
|
||||
attrs['form-initial-data'].state = 'Ok';
|
||||
attrs['form-initial-data'].agencyModeFk = $props.agencyModeFk;
|
||||
attrs['form-initial-data'].dms.description = t(
|
||||
'travel.thermographs.travelFileDescription',
|
||||
{
|
||||
travelId: route.params.id,
|
||||
},
|
||||
).toUpperCase();
|
||||
}
|
||||
|
||||
const setEditDefaultParams = async () => {
|
||||
const filterObj = { include: { relation: 'dms' } };
|
||||
const filter = encodeURIComponent(JSON.stringify(filterObj));
|
||||
const { data } = await axios.get(
|
||||
`TravelThermographs/${route.query.id}?filter=${filter}`,
|
||||
);
|
||||
async function onSubmit(data) {
|
||||
const dataParsed = {
|
||||
travelThermographFk: data.thermographFk,
|
||||
state: data.result,
|
||||
reference: data.dms.reference,
|
||||
warehouseId: +data.warehouseFk,
|
||||
companyId: +data.dms.companyFk,
|
||||
dmsTypeId: +data.dms.dmsTypeFk,
|
||||
description: data.dms.description,
|
||||
hasFile: data.dms.hasFile,
|
||||
maxTemperature: +data.maxTemperature,
|
||||
minTemperature: +data.minTemperature,
|
||||
temperatureFk: data.temperatureFk,
|
||||
agencyModeFk: +data.agencyModeFk,
|
||||
};
|
||||
|
||||
if (data) {
|
||||
thermographForm.value.thermographFk = data.thermographFk;
|
||||
thermographForm.value.state = data.result;
|
||||
thermographForm.value.reference = data.dms?.reference;
|
||||
thermographForm.value.warehouseId = data.warehouseFk;
|
||||
thermographForm.value.companyId = data.dms?.companyFk;
|
||||
thermographForm.value.dmsTypeId = data.dms?.dmsTypeFk;
|
||||
thermographForm.value.description = data.dms?.description || '';
|
||||
thermographForm.value.hasFile = data.dms?.hasFile;
|
||||
thermographForm.value.hasFileAttached = false;
|
||||
thermographForm.value.maxTemperature = data.maxTemperature;
|
||||
thermographForm.value.minTemperature = data.minTemperature;
|
||||
thermographForm.value.temperatureFk = data.temperatureFk;
|
||||
thermographForm.value.travelThermographFk = data.id;
|
||||
thermographForm.value.agencyModeFk = data.agencyModeFk;
|
||||
}
|
||||
};
|
||||
|
||||
const onSubmit = async () => {
|
||||
const formData = new FormData();
|
||||
if (Array.isArray(thermographForm.value.files)) {
|
||||
thermographForm.value.hasFileAttached = true;
|
||||
thermographForm.value.files.forEach((file) => {
|
||||
if (Array.isArray(data.files)) {
|
||||
dataParsed.hasFileAttached = true;
|
||||
data.files.forEach((file) => {
|
||||
formData.append(file.name, file);
|
||||
});
|
||||
}
|
||||
delete thermographForm.value.files;
|
||||
delete data.files;
|
||||
|
||||
delete dataParsed.dms;
|
||||
await axios.post(`/travels/${route.params.id}/saveThermograph`, formData, {
|
||||
params: thermographForm.value,
|
||||
params: dataParsed,
|
||||
headers: {
|
||||
'Content-Type': 'multipart/form-data',
|
||||
},
|
||||
});
|
||||
router.push({ name: 'TravelThermographsIndex' });
|
||||
notify(t('Thermograph created'), 'positive');
|
||||
};
|
||||
}
|
||||
|
||||
const onThermographCreated = async (data) => {
|
||||
async function onThermographCreated(newThermograph, data) {
|
||||
await fetchTravelThermographsRef.value.fetch();
|
||||
thermographForm.value = {
|
||||
...thermographForm.value,
|
||||
data = {
|
||||
...data,
|
||||
travelThermographFk: data.id,
|
||||
warehouseId: data.warehouseFk,
|
||||
...newThermograph,
|
||||
travelThermographFk: newThermograph.id,
|
||||
warehouseId: newThermograph.warehouseFk,
|
||||
};
|
||||
};
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<FetchData
|
||||
|
@ -167,161 +150,133 @@ const onThermographCreated = async (data) => {
|
|||
auto-load
|
||||
url="AgencyModeIncomings"
|
||||
/>
|
||||
|
||||
<QPage class="column items-center full-width">
|
||||
<QForm
|
||||
:form-initial-data="thermographForm"
|
||||
:observe-form-changes="viewAction === 'create'"
|
||||
:default-actions="true"
|
||||
@submit="onSubmit()"
|
||||
class="full-width"
|
||||
style="max-width: 800px"
|
||||
>
|
||||
<Teleport to="#st-actions" v-if="stateStore?.isSubToolbarShown()">
|
||||
<div>
|
||||
<QBtnGroup push class="q-gutter-x-sm">
|
||||
<slot name="moreActions" />
|
||||
<QBtn
|
||||
color="primary"
|
||||
icon="restart_alt"
|
||||
flat
|
||||
@click="reset()"
|
||||
:label="t('globals.reset')"
|
||||
<FormModelPopup
|
||||
v-if="attrs['form-initial-data'].dms?.dmsTypeFk"
|
||||
v-bind="$attrs"
|
||||
:observe-form-changes="viewAction === 'create'"
|
||||
:save-fn="(data) => onSubmit(data)"
|
||||
>
|
||||
<template #form-inputs="{ data }">
|
||||
<VnRow>
|
||||
<VnSelectDialog
|
||||
:label="t('travel.thermographs.thermograph')"
|
||||
v-model="data.thermographFk"
|
||||
url="TravelThermographs"
|
||||
:fields="['id', 'thermographFk']"
|
||||
:where="{
|
||||
or: [{ travelFk: null }, { travelFk: $route.params.id }],
|
||||
}"
|
||||
sort-by="thermographFk ASC"
|
||||
option-label="thermographFk"
|
||||
option-filter-value="thermographFk"
|
||||
:disable="!!$attrs['form-initial-data'].thermographFk"
|
||||
:tooltip="t('New thermograph')"
|
||||
:roles-allowed-to-create="['logistic']"
|
||||
data-key="travelThermographSelect"
|
||||
>
|
||||
<template #form>
|
||||
<CreateThermographForm
|
||||
@on-data-saved="
|
||||
(newThermograph) =>
|
||||
onThermographCreated(newThermograph, data)
|
||||
"
|
||||
/>
|
||||
<QBtn
|
||||
color="primary"
|
||||
icon="save"
|
||||
@click="onSubmit()"
|
||||
:label="t('globals.save')"
|
||||
/>
|
||||
</QBtnGroup>
|
||||
</div>
|
||||
</Teleport>
|
||||
<QCard class="q-pa-lg">
|
||||
<VnRow>
|
||||
<VnSelectDialog
|
||||
:label="t('travel.thermographs.thermograph')"
|
||||
v-model="thermographForm.travelThermographFk"
|
||||
url="TravelThermographs"
|
||||
:fields="['id', 'thermographFk']"
|
||||
:where="{
|
||||
or: [{ travelFk: null }, { travelFk: $route.params.id }],
|
||||
}"
|
||||
sort-by="thermographFk ASC"
|
||||
option-label="thermographFk"
|
||||
option-filter-value="thermographFk"
|
||||
:disable="viewAction === 'edit'"
|
||||
:tooltip="t('New thermograph')"
|
||||
:roles-allowed-to-create="['logistic']"
|
||||
data-key="travelThermographSelect"
|
||||
>
|
||||
<template #form>
|
||||
<CreateThermographForm
|
||||
@on-data-saved="onThermographCreated"
|
||||
/>
|
||||
</template>
|
||||
</VnSelectDialog>
|
||||
<VnInput
|
||||
v-model="thermographForm.state"
|
||||
:label="t('globals.state')"
|
||||
/>
|
||||
</VnRow>
|
||||
<VnRow>
|
||||
<VnSelect
|
||||
:label="t('travel.thermographs.carrier')"
|
||||
v-model="thermographForm.agencyModeFk"
|
||||
:options="agencyModeOptions"
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
/>
|
||||
</template>
|
||||
</VnSelectDialog>
|
||||
<VnInput v-model="data.result" :label="t('globals.state')" />
|
||||
</VnRow>
|
||||
<VnRow>
|
||||
<VnSelect
|
||||
:label="t('travel.thermographs.carrier')"
|
||||
v-model="data.agencyModeFk"
|
||||
:options="agencyModeOptions"
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
/>
|
||||
|
||||
<VnInput
|
||||
v-model="thermographForm.reference"
|
||||
:label="t('globals.reference')"
|
||||
/>
|
||||
</VnRow>
|
||||
<VnRow>
|
||||
<VnSelect
|
||||
:label="t('globals.type')"
|
||||
v-model="thermographForm.dmsTypeId"
|
||||
:options="dmsTypesOptions"
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
/>
|
||||
<VnSelect
|
||||
:label="t('globals.company')"
|
||||
v-model="thermographForm.companyId"
|
||||
:options="companiesOptions"
|
||||
option-value="id"
|
||||
option-label="code"
|
||||
/>
|
||||
</VnRow>
|
||||
<VnRow>
|
||||
<VnSelect
|
||||
:label="t('globals.warehouse')"
|
||||
v-model="thermographForm.warehouseId"
|
||||
:options="warehousesOptions"
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
/>
|
||||
<VnSelect
|
||||
:label="t('travel.thermographs.temperature')"
|
||||
:options="temperaturesOptions"
|
||||
hide-selected
|
||||
option-label="name"
|
||||
option-value="code"
|
||||
v-model="thermographForm.temperatureFk"
|
||||
:required="true"
|
||||
/>
|
||||
</VnRow>
|
||||
<VnRow>
|
||||
<VnInputNumber
|
||||
v-model="thermographForm.maxTemperature"
|
||||
:label="t('globals.maxTemperature')"
|
||||
/>
|
||||
<VnInputNumber
|
||||
v-model="thermographForm.minTemperature"
|
||||
:label="t('globals.minTemperature')"
|
||||
/>
|
||||
</VnRow>
|
||||
<VnInput v-model="data.dms.reference" :label="t('globals.reference')" />
|
||||
</VnRow>
|
||||
<VnRow>
|
||||
<VnSelect
|
||||
:label="t('globals.type')"
|
||||
v-model="data.dms.dmsTypeFk"
|
||||
:options="dmsTypesOptions"
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
/>
|
||||
<VnSelect
|
||||
:label="t('globals.company')"
|
||||
v-model="data.dms.companyFk"
|
||||
:options="companiesOptions"
|
||||
option-value="id"
|
||||
option-label="code"
|
||||
/>
|
||||
</VnRow>
|
||||
<VnRow>
|
||||
<VnSelect
|
||||
:label="t('globals.warehouse')"
|
||||
v-model="data.warehouseFk"
|
||||
:options="warehousesOptions"
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
/>
|
||||
<VnSelect
|
||||
:label="t('travel.thermographs.temperature')"
|
||||
:options="temperaturesOptions"
|
||||
hide-selected
|
||||
option-label="name"
|
||||
option-value="code"
|
||||
v-model="data.temperatureFk"
|
||||
:required="true"
|
||||
/>
|
||||
</VnRow>
|
||||
<VnRow>
|
||||
<VnInputNumber
|
||||
v-model="data.maxTemperature"
|
||||
:label="t('globals.maxTemperature')"
|
||||
/>
|
||||
<VnInputNumber
|
||||
v-model="data.minTemperature"
|
||||
:label="t('globals.minTemperature')"
|
||||
/>
|
||||
</VnRow>
|
||||
|
||||
<VnRow v-if="viewAction === 'edit'" class="row q-gutter-md q-mb-md">
|
||||
<QInput
|
||||
:label="t('globals.description')"
|
||||
type="textarea"
|
||||
v-model="thermographForm.description"
|
||||
fill-input
|
||||
/>
|
||||
</VnRow>
|
||||
<VnRow>
|
||||
<QFile
|
||||
ref="inputFileRef"
|
||||
:label="t('globals.file')"
|
||||
multiple
|
||||
:accept="allowedContentTypes"
|
||||
v-model="thermographForm.files"
|
||||
>
|
||||
<template #append>
|
||||
<QIcon
|
||||
name="vn:attach"
|
||||
class="cursor-pointer q-mr-sm"
|
||||
@click="inputFileRef.pickFiles()"
|
||||
>
|
||||
<QTooltip>{{ t('Select files') }}</QTooltip>
|
||||
</QIcon>
|
||||
<QIcon name="info" class="cursor-pointer">
|
||||
<QTooltip>{{
|
||||
t('globals.allowedFilesText', {
|
||||
allowedContentTypes: allowedContentTypes,
|
||||
})
|
||||
}}</QTooltip>
|
||||
</QIcon>
|
||||
</template>
|
||||
</QFile>
|
||||
</VnRow>
|
||||
</QCard>
|
||||
</QForm>
|
||||
</QPage>
|
||||
<VnRow v-if="viewAction === 'edit'" class="row q-gutter-md q-mb-md">
|
||||
<QInput
|
||||
:label="t('globals.description')"
|
||||
type="textarea"
|
||||
v-model="data.description"
|
||||
fill-input
|
||||
/>
|
||||
</VnRow>
|
||||
<VnRow>
|
||||
<QFile
|
||||
ref="inputFileRef"
|
||||
:label="t('globals.file')"
|
||||
multiple
|
||||
:accept="allowedContentTypes"
|
||||
v-model="data.files"
|
||||
>
|
||||
<template #append>
|
||||
<QIcon
|
||||
name="vn:attach"
|
||||
class="cursor-pointer q-mr-sm"
|
||||
@click="inputFileRef.pickFiles()"
|
||||
>
|
||||
<QTooltip>{{ t('Select files') }}</QTooltip>
|
||||
</QIcon>
|
||||
<QIcon name="info" class="cursor-pointer">
|
||||
<QTooltip>{{
|
||||
t('globals.allowedFilesText', {
|
||||
allowedContentTypes: allowedContentTypes,
|
||||
})
|
||||
}}</QTooltip>
|
||||
</QIcon>
|
||||
</template>
|
||||
</QFile>
|
||||
</VnRow>
|
||||
</template>
|
||||
</FormModelPopup>
|
||||
</template>
|
||||
<i18n>
|
||||
es:
|
||||
|
|
|
@ -16,7 +16,7 @@ const routeCard = {
|
|||
title: 'basicData',
|
||||
icon: 'vn:settings',
|
||||
},
|
||||
component: () => import('pages/Route/Card/RouteForm.vue'),
|
||||
component: () => import('pages/Route/Card/RouteBasicData.vue'),
|
||||
},
|
||||
{
|
||||
name: 'RouteSummary',
|
||||
|
|
|
@ -42,37 +42,9 @@ const travelCard = {
|
|||
title: 'thermographs',
|
||||
icon: 'vn:thermometer',
|
||||
},
|
||||
redirect: {
|
||||
name: 'TravelThermographsIndex',
|
||||
},
|
||||
children: [
|
||||
{
|
||||
name: 'TravelThermographsIndex',
|
||||
path: 'index',
|
||||
component: () =>
|
||||
import('src/pages/Travel/Card/TravelThermographs.vue'),
|
||||
},
|
||||
{
|
||||
name: 'TravelThermographsCreate',
|
||||
path: 'create',
|
||||
props: { viewAction: 'create' },
|
||||
component: () =>
|
||||
import(
|
||||
'src/pages/Travel/Card/TravelThermographsForm.vue'
|
||||
),
|
||||
},
|
||||
{
|
||||
name: 'TravelThermographsEdit',
|
||||
path: 'edit',
|
||||
props: { viewAction: 'edit' },
|
||||
component: () =>
|
||||
import(
|
||||
'src/pages/Travel/Card/TravelThermographsForm.vue'
|
||||
),
|
||||
},
|
||||
],
|
||||
component: () => import('src/pages/Travel/Card/TravelThermographs.vue'),
|
||||
},
|
||||
]
|
||||
],
|
||||
};
|
||||
|
||||
export default {
|
||||
|
|
Loading…
Reference in New Issue