105 lines
2.8 KiB
Vue
105 lines
2.8 KiB
Vue
<script setup>
|
|
import { computed, ref } from 'vue';
|
|
import { useI18n } from 'vue-i18n';
|
|
import FetchData from 'components/FetchData.vue';
|
|
import VnSelectFilter from 'components/common/VnSelectFilter.vue';
|
|
import VnInputDate from 'components/common/VnInputDate.vue';
|
|
import VnInputTime from 'components/common/VnInputTime.vue';
|
|
import VnInput from 'components/common/VnInput.vue';
|
|
|
|
const props = defineProps({
|
|
formData: {
|
|
type: Object,
|
|
default: () => ({}),
|
|
},
|
|
roadmapFk: {
|
|
type: [Number, String],
|
|
required: true,
|
|
},
|
|
layout: {
|
|
type: String,
|
|
default: 'row',
|
|
},
|
|
});
|
|
|
|
const { t } = useI18n();
|
|
const warehouseList = ref([]);
|
|
const form = computed(() => props.formData);
|
|
const isDialog = computed(() => props.layout === 'dialog');
|
|
</script>
|
|
<template>
|
|
<FetchData
|
|
url="Warehouses"
|
|
auto-load
|
|
:filter="{ fields: ['id', 'name'] }"
|
|
sort-by="name"
|
|
limit="30"
|
|
@on-fetch="(data) => (warehouseList = data)"
|
|
/>
|
|
<div :class="[isDialog ? 'column' : 'form-gap', 'full-width flex']">
|
|
<QCardSection class="flex-grow q-px-none flex-1">
|
|
<VnSelectFilter
|
|
v-model.number="form.warehouseFk"
|
|
class="full-width"
|
|
:label="t('Warehouse')"
|
|
:options="warehouseList"
|
|
option-value="id"
|
|
option-label="name"
|
|
emit-value
|
|
map-options
|
|
use-input
|
|
hide-selected
|
|
autofocus
|
|
:input-debounce="0"
|
|
/>
|
|
</QCardSection>
|
|
<div :class="[!isDialog ? 'flex-2' : null, 'form-gap flex no-wrap']">
|
|
<QCardSection class="row q-px-none flex-1">
|
|
<VnInputDate
|
|
v-model="form.eta"
|
|
class="full-width"
|
|
:label="t('ETA date')"
|
|
/>
|
|
</QCardSection>
|
|
<QCardSection class="row q-px-none flex-1">
|
|
<VnInputTime
|
|
v-model="form.eta"
|
|
class="full-width"
|
|
:label="t('ETA hour')"
|
|
/>
|
|
</QCardSection>
|
|
</div>
|
|
<QCardSection class="q-px-none flex-1">
|
|
<VnInput
|
|
v-model="form.description"
|
|
class="full-width"
|
|
:label="t('Description')"
|
|
type="textarea"
|
|
:rows="1"
|
|
/>
|
|
</QCardSection>
|
|
</div>
|
|
</template>
|
|
<style lang="scss" scoped>
|
|
.form-gap {
|
|
gap: 16px;
|
|
}
|
|
|
|
.flex-1 {
|
|
flex: 1;
|
|
}
|
|
|
|
.flex-2 {
|
|
flex: 2;
|
|
}
|
|
</style>
|
|
<i18n>
|
|
es:
|
|
Warehouse: Almacén
|
|
ETA date: Fecha ETA
|
|
ETA hour: Hora ETA
|
|
Description: Descripción
|
|
Remove stop: Eliminar parada
|
|
Add stop: Añadir parada
|
|
</i18n>
|