salix-front/src/pages/Worker/Card/WorkerOperator.vue

205 lines
7.8 KiB
Vue

<script setup>
import { useI18n } from 'vue-i18n';
import { useRoute } from 'vue-router';
import { ref, computed } from 'vue';
import FetchData from 'components/FetchData.vue';
import VnRow from 'components/ui/VnRow.vue';
import VnSelect from 'src/components/common/VnSelect.vue';
import VnInput from 'src/components/common/VnInput.vue';
import CrudModel from 'components/CrudModel.vue';
import axios from 'axios';
const { t } = useI18n();
const crudModelRef = ref();
const warehousesData = ref([]);
const itemPackingTypesData = ref([]);
const sectorsData = ref([]);
const trainsData = ref([]);
const machinesData = ref([]);
const route = useRoute();
const routeId = computed(() => route.params.id);
const initialData = computed(() => {
return {
workerFk: routeId.value,
numberOfWagons: 2,
trainFk: 1,
itemPackingTypeFk: 'H',
warehouseFk: 60,
sectorFk: null,
labelerFk: null,
linesLimit: 20,
volumenLimit: 0.5,
sizeLimit: null,
isOnReservationMode: 0,
machineFk: null,
};
});
async function insert() {
await axios.post('Operators', initialData.value);
crudModelRef.value.reload();
}
</script>
<template>
<QPage class="column items-center q-pa-md centerCard">
<FetchData url="Trains" @on-fetch="(data) => (trainsData = data)" auto-load />
<FetchData
url="ItemPackingTypes"
@on-fetch="(data) => (itemPackingTypesData = data)"
auto-load
/>
<FetchData
url="Warehouses"
@on-fetch="(data) => (warehousesData = data)"
auto-load
/>
<FetchData url="Printers" @on-fetch="(data) => (PrintersData = data)" auto-load />
<FetchData url="Sectors" @on-fetch="(data) => (sectorsData = data)" auto-load />
<FetchData url="Machines" @on-fetch="(data) => (machinesData = data)" auto-load />
<CrudModel
data-key="workerOperator"
url="Operators"
primary-key="workerFk"
:filter="{ where: { workerFk: route.params.id } }"
:data-required="{ workerFk: route.params.id }"
ref="crudModelRef"
search-url="operator"
auto-load
>
<template #body="{ rows }">
<div v-if="rows.length">
<QCard
flat
bordered
:key="row.$index"
v-for="row of rows"
class="card q-px-md q-mb-sm container"
>
<VnRow>
<VnInput
:label="t('worker.operator.numberOfWagons')"
v-model="row.numberOfWagons"
/>
<VnSelect
:label="t('worker.operator.train')"
:options="trainsData"
hide-selected
v-model="row.trainFk"
/>
</VnRow>
<VnRow>
<VnSelect
:label="t('worker.operator.itemPackingType')"
:options="itemPackingTypesData"
hide-selected
option-label="code"
option-value="code"
v-model="row.itemPackingTypeFk"
/>
<VnSelect
:label="t('worker.operator.warehouse')"
:options="warehousesData"
hide-selected
v-model="row.warehouseFk"
/>
</VnRow>
<VnRow>
<VnSelect
:label="t('worker.operator.sector')"
:options="sectorsData"
hide-selected
option-label="description"
v-model="row.sectorFk"
/>
<VnSelect
:label="t('worker.operator.labeler')"
:options="PrintersData"
hide-selected
option-label="name"
v-model="row.labelerFk"
>
<template #option="scope">
<QItem v-bind="scope.itemProps">
<QItemSection>
<QItemLabel
>ID: {{ scope.opt?.id }}</QItemLabel
>
<QItemLabel caption>
{{ scope.opt?.id }},
{{ scope.opt?.name }}
</QItemLabel>
</QItemSection>
</QItem>
</template>
</VnSelect>
</VnRow>
<VnRow>
<VnInput
:label="t('worker.operator.linesLimit')"
v-model="row.linesLimit"
lazy-rules
/>
<VnInput
:label="t('worker.operator.volumeLimit')"
v-model="row.volumeLimit"
lazy-rules
/>
</VnRow>
<VnRow>
<VnInput
:label="t('worker.operator.sizeLimit')"
v-model="row.sizeLimit"
lazy-rules
/>
<VnInput
:label="t('worker.operator.isOnReservationMode')"
v-model="row.isOnReservationMode"
lazy-rules
/>
</VnRow>
<VnRow>
<VnSelect
:label="t('worker.operator.machine')"
:options="machinesData"
hide-selected
option-label="plate"
v-model="row.machineFk"
/>
</VnRow>
</QCard>
</div>
</template>
</CrudModel>
<QPageSticky position="bottom-right" :offset="[25, 25]">
<QBtn
fab
color="primary"
icon="add"
@click="insert()"
v-if="!crudModelRef?.formData?.length"
/>
</QPageSticky>
</QPage>
</template>
<style lang="scss" scoped>
.btn-delete {
max-width: 4%;
margin-top: 30px;
}
</style>
<i18n>
es:
Model: Modelo
Serial number: Número de serie
Current SIM: SIM actual
Add new device: Añadir nuevo dispositivo
PDA deallocated: PDA desasignada
Remove PDA: Eliminar PDA
Do you want to remove this PDA?: ¿Desea eliminar este PDA?
You can only have one PDA: Solo puedes tener un PDA si no eres autonomo
This PDA is already assigned to another user: Este PDA ya está asignado a otro usuario
</i18n>