114 lines
3.5 KiB
Vue
114 lines
3.5 KiB
Vue
|
<script setup>
|
||
|
|
import { reactive, ref } from 'vue';
|
||
|
|
import { useI18n } from 'vue-i18n';
|
||
|
|
|
||
|
|
import FetchData from 'components/FetchData.vue';
|
||
|
|
import VnRow from 'components/ui/VnRow.vue';
|
||
|
|
import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
|
||
|
|
import VnInput from 'src/components/common/VnInput.vue';
|
||
|
|
import FormModelPopup from './FormModelPopup.vue';
|
||
|
|
|
||
|
|
const emit = defineEmits(['onDataSaved']);
|
||
|
|
|
||
|
|
const { t } = useI18n();
|
||
|
|
|
||
|
|
const thermographFormData = reactive({
|
||
|
|
thermographId: null,
|
||
|
|
model: 'DISPOSABLE',
|
||
|
|
warehouseId: null,
|
||
|
|
temperatureFk: 'cool',
|
||
|
|
});
|
||
|
|
|
||
|
|
const thermographsModels = ref(null);
|
||
|
|
const warehousesOptions = ref([]);
|
||
|
|
const temperaturesOptions = ref([]);
|
||
|
|
|
||
|
|
const onDataSaved = (dataSaved) => {
|
||
|
|
emit('onDataSaved', dataSaved);
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<FetchData
|
||
|
|
@on-fetch="(data) => (thermographsModels = data)"
|
||
|
|
auto-load
|
||
|
|
url="Thermographs/getThermographModels"
|
||
|
|
/>
|
||
|
|
<FetchData
|
||
|
|
@on-fetch="(data) => (warehousesOptions = data)"
|
||
|
|
auto-load
|
||
|
|
url="Warehouses"
|
||
|
|
:filter="{ fields: ['id', 'name'], order: 'name ASC', limit: 30 }"
|
||
|
|
/>
|
||
|
|
<FetchData
|
||
|
|
@on-fetch="(data) => (temperaturesOptions = data)"
|
||
|
|
auto-load
|
||
|
|
url="Temperatures"
|
||
|
|
/>
|
||
|
|
<FormModelPopup
|
||
|
|
url-create="Thermographs/createThermograph"
|
||
|
|
model="thermograph"
|
||
|
|
:title="t('New thermograph')"
|
||
|
|
:form-initial-data="thermographFormData"
|
||
|
|
@on-data-saved="onDataSaved($event)"
|
||
|
|
>
|
||
|
|
<template #form-inputs="{ data, validate }">
|
||
|
|
<VnRow class="row q-gutter-md q-mb-md">
|
||
|
|
<div class="col">
|
||
|
|
<VnInput
|
||
|
|
:label="t('Identifier')"
|
||
|
|
v-model="data.thermographId"
|
||
|
|
:required="true"
|
||
|
|
:rules="validate('thermograph.id')"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="col">
|
||
|
|
<VnSelectFilter
|
||
|
|
:label="t('Model')"
|
||
|
|
:options="thermographsModels"
|
||
|
|
hide-selected
|
||
|
|
option-label="value"
|
||
|
|
option-value="value"
|
||
|
|
v-model="data.model"
|
||
|
|
:required="true"
|
||
|
|
:rules="validate('thermograph.model')"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</VnRow>
|
||
|
|
<VnRow class="row q-gutter-md q-mb-xl">
|
||
|
|
<div class="col">
|
||
|
|
<VnSelectFilter
|
||
|
|
:label="t('Warehouse')"
|
||
|
|
:options="warehousesOptions"
|
||
|
|
hide-selected
|
||
|
|
option-label="name"
|
||
|
|
option-value="id"
|
||
|
|
v-model="data.warehouseId"
|
||
|
|
:required="true"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div class="col">
|
||
|
|
<VnSelectFilter
|
||
|
|
:label="t('Temperature')"
|
||
|
|
:options="temperaturesOptions"
|
||
|
|
hide-selected
|
||
|
|
option-label="name"
|
||
|
|
option-value="code"
|
||
|
|
v-model="data.temperatureFk"
|
||
|
|
:required="true"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</VnRow>
|
||
|
|
</template>
|
||
|
|
</FormModelPopup>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<i18n>
|
||
|
|
es:
|
||
|
|
Identifier: Identificador
|
||
|
|
Model: Modelo
|
||
|
|
Warehouse: Almacén
|
||
|
|
Temperature: Temperatura
|
||
|
|
</i18n>
|