rjl
89773bd49b
新增题库模块，包含题目管理页面和Excel导入导出功能 优化比赛管理功能，包括分组管理、硬件绑定和题目配置 重构比赛添加流程，增加重置功能和数据校验 添加Excel工具函数，支持读取和导出Excel文件 更新依赖，添加xlsx库支持
113 lines
3.8 KiB
Vue
113 lines
3.8 KiB
Vue
<script setup lang="ts">
|
|
import { NButton, NGrid, NGridItem, NInput, NUpload } from 'naive-ui'
|
|
import { useHardwareBinding, useHardwareExcel, useQuickGenerate } from './useHardwareBinding'
|
|
|
|
const props = defineProps<{
|
|
config?: {
|
|
groupCount: number
|
|
teamCount: number
|
|
}
|
|
}>()
|
|
|
|
const { hardwareGroups, validate, reset } = useHardwareBinding(props)
|
|
const { handleDownloadTemplate, handleUpload } = useHardwareExcel(props, hardwareGroups)
|
|
const { quickGenerate } = useQuickGenerate(props, hardwareGroups)
|
|
|
|
defineExpose({ validate, reset })
|
|
</script>
|
|
|
|
<template>
|
|
<div class="h-full">
|
|
<div class="mb-8 flex items-center justify-between">
|
|
<div>
|
|
<h2 class="mb-2 text-3xl text-gray-800 font-bold">
|
|
点阵笔硬件绑定
|
|
</h2>
|
|
<p class="text-gray-400">
|
|
请将点阵笔序列号 (SN) 绑定至对应队伍。建议使用扫码枪快速录入。
|
|
</p>
|
|
</div>
|
|
<div class="flex gap-4">
|
|
<NButton secondary type="primary" @click="handleDownloadTemplate">
|
|
<template #icon>
|
|
<icon-ic-baseline-download class="text-icon" />
|
|
</template>
|
|
下载模板
|
|
</NButton>
|
|
<NUpload :show-file-list="false" :custom-request="handleUpload" accept=".xlsx, .xls">
|
|
<NButton type="primary" color="#1a202c">
|
|
<template #icon>
|
|
<icon-ic-baseline-upload class="text-icon" />
|
|
</template>
|
|
导入配置
|
|
</NButton>
|
|
</NUpload>
|
|
<NButton secondary type="success" @click="quickGenerate('order')">
|
|
<template #icon>
|
|
<icon-ic-baseline-settings-backup-restore class="text-icon" />
|
|
</template>
|
|
快速顺序生成
|
|
</NButton>
|
|
<NButton type="info" @click="quickGenerate('random')">
|
|
<template #icon>
|
|
<icon-ic-baseline-settings-backup-restore class="text-icon" />
|
|
</template>
|
|
快速随机生成
|
|
</NButton>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 状态提示栏 -->
|
|
<div class="mb-8 flex items-start gap-3 border border-indigo-100 rounded-lg bg-indigo-50 p-4">
|
|
<div class="i-carbon-radar mt-0.5 text-xl text-indigo-500" />
|
|
<div>
|
|
<div class="text-sm text-indigo-900 font-bold">
|
|
自动发现模式已开启
|
|
</div>
|
|
<div class="mt-1 text-xs text-indigo-400">
|
|
系统将自动扫描正在书写的点阵笔并提示绑定。请确保基站已通电。
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 硬件状态卡片 -->
|
|
<NGrid :x-gap="24" :y-gap="24" cols="1 m:2 l:3" responsive="screen">
|
|
<NGridItem v-for="(group, idx) in hardwareGroups" :key="idx">
|
|
<div class="border border-gray-100 rounded-2xl bg-[#F8FAFC] p-4">
|
|
<div class="mb-4 text-gray-800 font-bold">
|
|
硬件绑定: 第 {{ idx + 1 }} 分组
|
|
</div>
|
|
|
|
<div class="flex flex-col gap-3">
|
|
<div v-for="pen in group.pens" :key="pen.label" class="flex items-center gap-3 rounded-lg bg-white p-2">
|
|
<div class="w-8 text-center text-gray-400 font-bold">
|
|
{{ pen.label }}
|
|
</div>
|
|
<div class="flex-1">
|
|
<NInput
|
|
v-model:value="pen.sn" size="small" placeholder="点阵笔 SN" class="bg-transparent"
|
|
:bordered="false"
|
|
/>
|
|
</div>
|
|
<!-- 扫描图标 -->
|
|
<!-- <div class="i-carbon-qr-code text-gray-300" /> -->
|
|
<icon-ic-baseline-edit class="text-xl text-blue-500" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</NGridItem>
|
|
</NGrid>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
:deep(.n-input) {
|
|
background-color: transparent;
|
|
}
|
|
|
|
:deep(.n-input__input-el) {
|
|
font-weight: bold;
|
|
color: #4b5563;
|
|
}
|
|
</style>
|