feat: Sistema de gestión de impresoras persistente
- 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
This commit is contained in:
36
app/components/printers/Selector.vue
Normal file
36
app/components/printers/Selector.vue
Normal file
@@ -0,0 +1,36 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user