61 lines
1.4 KiB
Vue
61 lines
1.4 KiB
Vue
<script setup lang="ts">
|
|
|
|
const labelPrinter = useLabelPrinterStore()
|
|
|
|
|
|
const { $api } = useNuxtApp()
|
|
|
|
const labelWidth = ref(50)
|
|
const labelHeight = ref(30)
|
|
const zpl = ref(`^XA
|
|
^FO5,5
|
|
^GB545,325,3^FS
|
|
^CF0,30
|
|
^FO20,20^FDHello from Bluetooth!^FS
|
|
^FO20,100^BY2
|
|
^BXN,10,200
|
|
^FD12345678901234567^FS
|
|
^XZ`)
|
|
|
|
|
|
|
|
async function handlePrint() {
|
|
const dpmm = 12
|
|
const res = await $api("/api/print/label", {
|
|
method: "POST",
|
|
body: JSON.stringify({
|
|
zpl: zpl.value,
|
|
width: labelWidth.value,
|
|
height: labelHeight.value,
|
|
dpmm,
|
|
}),
|
|
})
|
|
await labelPrinter.print(res, { density: 5, pages: 1 })
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<UCard class="p-4">
|
|
<div class="flex gap-2 mb-2">
|
|
<UButton @click="labelPrinter.connect('serial')">Connect S </UButton>
|
|
<UButton @click="labelPrinter.connect('ble')">Connect B</UButton>
|
|
<UButton color="red" @click="labelPrinter.disconnect">Disconnect</UButton>
|
|
<UButton color="primary" @click="handlePrint" :disabled="!labelPrinter.connected">Print</UButton>
|
|
</div>
|
|
|
|
{{labelPrinter.info}}
|
|
|
|
{{labelPrinter.printProgress}}
|
|
|
|
<UFormGroup label="Breite">
|
|
<UInput v-model="labelWidth"><template #trailing>mm</template></UInput>
|
|
</UFormGroup>
|
|
<UFormGroup label="Höhe">
|
|
<UInput v-model="labelHeight"><template #trailing>mm</template></UInput>
|
|
</UFormGroup>
|
|
<UFormGroup label="ZPL">
|
|
<UTextarea v-model="zpl" rows="6" />
|
|
</UFormGroup>
|
|
</UCard>
|
|
</template>
|