for_client/src/test/index.vue

<template>
    <HcNewCard>
        <template #header>
            <el-button size="large" type="success" @click="connectReader">连接读卡器</el-button>
        </template>
        <template #extra>
            <el-button size="large" type="warning" @click="clearTable">清除表格</el-button>
            <el-button size="large" type="danger" @click="closeLink">关闭链接</el-button>
        </template>
        <hc-table :column="tableColumn" :datas="tableData" :is-index="false" />
    </HcNewCard>
</template>

<script setup>
import { onUnmounted, ref } from 'vue'

const tableColumn = [{ key: 'epc', name: 'EPC' }]
const tableData = ref([])

//连接设备
let device
const connectReader = async () => {
    tableData.value = []
    const devices = await navigator.hid.requestDevice({
        filters: [{ vendorId: 1240, productId: 831 }],
    })
    if (devices.length <= 0) return
    device = devices[0]
    // 检查设备是否打开
    if (!device.opened) {
        await device.open() // 打开设备
    }
    console.log(device)
    // 电脑接收到来自设备的消息回调
    device.oninputreport = (event) => {
        const array = new Uint8Array(event.data.buffer)
        const data = array.slice(10, array[0] - 1)
        let hexstr = ''
        const res = new Uint8Array(data)
        for (const data of res) {
            hexstr += (Array(2).join(0) + data.toString(16).toUpperCase()).slice(-2) + '' // 将字节数据转换成（XX ）形式字符串
        }
        tableData.value.push({ epc: hexstr })
    }
}

//清除表格
const clearTable = () => {
    tableData.value = []
}

//关闭设备连接
const closeLink = async () => {
    if ((device != null) && (device?.opened)) {
        await device.close() // 关闭设备
        await device.forget() // 遗忘设备
        clearTable()
        device = null
    }
}

//页面卸载
onUnmounted(() => {
    closeLink()
})
</script>

<style lang="scss" scoped>

</style>