josedario87
e97b2b4d8e
- Crear modelo Printer con campos: id, name, host, deviceId, timeout, isDefault - Almacenamiento persistente en data/printers.json - APIs CRUD: GET/POST /api/printers, GET/PUT/DELETE /api/printers/:id - API para seleccionar impresora activa: POST /api/printers/select - Endpoint de impresión ahora usa la impresora seleccionada o la especificada por printerId - Composable usePrinters() para el cliente - UI: Selector de impresora en sidebar, tab Impresoras en mobile - Componentes: PrintersList, PrintersCard, PrintersForm, PrintersSelector
37 lines
878 B
Vue
37 lines
878 B
Vue
<script setup lang="ts">
|
|
const printers = usePrinters()
|
|
|
|
// Cargar impresoras al montar
|
|
onMounted(() => {
|
|
printers.fetchPrinters()
|
|
})
|
|
|
|
const options = computed(() =>
|
|
printers.printers.value.map(p => ({
|
|
label: p.name + (p.isDefault ? ' (default)' : ''),
|
|
value: p.id
|
|
}))
|
|
)
|
|
|
|
async function handleChange(value: string) {
|
|
await printers.selectPrinter(value)
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex items-center gap-2">
|
|
<UIcon name="i-heroicons-printer" class="w-5 h-5 text-gray-500" />
|
|
<USelect
|
|
v-if="printers.printers.value.length > 0"
|
|
:model-value="printers.selectedPrinterId.value"
|
|
:items="options"
|
|
placeholder="Seleccionar impresora"
|
|
class="min-w-[200px]"
|
|
@update:model-value="handleChange"
|
|
/>
|
|
<span v-else class="text-sm text-gray-500">
|
|
No hay impresoras configuradas
|
|
</span>
|
|
</div>
|
|
</template>
|