From d2d583ef184437c8b135944f9cb5a52fde4e4813 Mon Sep 17 00:00:00 2001
From: SMFMgit <3534253741@qq.com>
Date: Sun, 9 Mar 2025 14:21:11 +0800
Subject: [PATCH] =?UTF-8?q?=E5=9C=A8=E8=AE=BE=E5=A4=87=E7=AE=A1=E7=90=86?=
 =?UTF-8?q?=E7=95=8C=E9=9D=A2=E5=AE=9E=E7=8E=B0=E4=BA=86=E8=8A=82=E7=9B=AE?=
 =?UTF-8?q?=E7=BB=91=E5=AE=9A=EF=BC=8C=E5=B9=B6=E5=A2=9E=E5=8A=A0=E4=BA=86?=
 =?UTF-8?q?=E5=AF=B9=E5=BA=94=E7=9A=84api?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/device.vue                  | 87 +++++++++++++++++++++++++++++--
 server/trpc/controllers/device.ts |  6 +++
 server/trpc/routers/device.ts     |  8 +++
 3 files changed, 98 insertions(+), 3 deletions(-)

diff --git a/pages/device.vue b/pages/device.vue
index 0a94f6c..a546596 100644
--- a/pages/device.vue
+++ b/pages/device.vue
@@ -173,7 +173,44 @@
               </TableCell>
               <TableCell>{{ device.createdAt.toLocaleDateString() }}</TableCell>
               <TableCell>
-                待实现
+                <div class="flex items-center">
+                  <Label>{{ getProgramName(device.id) || '未绑定节目' }}</Label>
+                  <Popover v-model:open="unfoldCheckbox[device.id]">
+                    <PopoverTrigger as-child>
+                      <Pencil
+                        class="opacity-35 flex-initial w-5 text-right"
+                        :size="12"
+                      />
+                    </PopoverTrigger>
+                    <PopoverContent class="w-[200px] p-2">
+                      <Command>
+                        <CommandEmpty>请选择节目</CommandEmpty>
+                        <CommandList>
+                          <CommandGroup>
+                            <CommandItem
+                              v-for="program in list2"
+                              :key="program.id"
+                              :value="program.id"
+                              @select="(ev: any) => {
+                                if (typeof ev.detail.value === 'number') {
+                                  const selectedProgramId = ev.detail.value;
+                                  bindProgramMutation({ id: device.id, programId: selectedProgramId });
+                                  unfoldCheckbox[device.id] = false;
+                                }
+                              }"
+                            >
+                              {{ program.name }}
+                              <Check
+                                v-if="program.id === getBoundProgramId(device.id)"
+                                class="ml-auto h-4 w-4"
+                              />
+                            </CommandItem>
+                          </CommandGroup>
+                        </CommandList>
+                      </Command>
+                    </PopoverContent>
+                  </Popover>
+                </div>
               </TableCell>
             </TableRow>
           </TableBody>
@@ -186,6 +223,7 @@
 <script setup lang="ts">
 import {
   Activity,
+  Check,
   CreditCard,
   DollarSign,
   Loader2,
@@ -194,6 +232,7 @@ import {
   Users,
 } from 'lucide-vue-next';
 import { toast } from 'vue-sonner';
+import { computed, reactive, ref, unref } from 'vue';
 import {
   Dialog,
   DialogClose,
@@ -206,14 +245,30 @@ import {
 const { $api } = useNuxtApp();
 
 const queryClient = useQueryClient();
-const { data: list, suspense } = useQuery({
+const { data: list, suspense: deviceSuspense } = useQuery({
   queryKey: ['device', 'list'],
   queryFn: () => $api.device.list.query(),
 });
-await suspense();
+await deviceSuspense();
+
+// 获取节目列表
+const { data: list2, suspense: programSuspense } = useQuery({
+  queryKey: ['program', 'list'],
+  queryFn: () => $api.program.list.query(),
+});
+await programSuspense();
 
 const location = ref('');
 const edit_new_location = ref('');
+
+// 用于保存每个设备的 unfoldCheckbox 状态
+const unfoldCheckbox = reactive<{ [key: number]: boolean }>({});
+
+// 初始化每个设备的 unfoldCheckbox 状态
+list.value?.forEach((device) => {
+  unfoldCheckbox[device.id] = false;
+});
+
 const { mutate: createMutation, isPending } = useMutation({
   mutationFn: $api.device.create.mutate,
   onSuccess: () => {
@@ -222,6 +277,7 @@ const { mutate: createMutation, isPending } = useMutation({
   },
   onError: err => useErrorHandler(err),
 });
+
 const { mutate: deleteMutation } = useMutation({
   mutationFn: $api.device.delete.mutate,
   onSuccess: () => {
@@ -230,6 +286,7 @@ const { mutate: deleteMutation } = useMutation({
   },
   onError: err => useErrorHandler(err),
 });
+
 const { mutate: editMutation, isPending: isPending2 } = useMutation({
   mutationFn: $api.device.edit.mutate,
   onSuccess: () => {
@@ -238,4 +295,28 @@ const { mutate: editMutation, isPending: isPending2 } = useMutation({
   },
   onError: err => useErrorHandler(err),
 });
+
+// 绑定节目到设备的 mutation
+const { mutate: bindProgramMutation } = useMutation({
+  mutationFn: $api.device.bindProgram.mutate,
+  onSuccess: () => {
+    queryClient.invalidateQueries({ queryKey: ['device', 'list'] });
+    toast.success('节目绑定成功');
+  },
+  onError: err => useErrorHandler(err),
+});
+
+// 动态获取设备绑定的节目名称
+function getProgramName(deviceId: number): string | undefined {
+  const device = list.value?.find(d => d.id === deviceId);
+  if (!device || !device.programId)
+    return undefined;
+  return list2.value?.find(program => program.id === device.programId)?.name;
+}
+
+// 动态获取设备绑定的节目ID
+function getBoundProgramId(deviceId: number): number | undefined {
+  const device = list.value?.find(d => d.id === deviceId);
+  return device?.programId ?? undefined;
+}
 </script>
diff --git a/server/trpc/controllers/device.ts b/server/trpc/controllers/device.ts
index 495e3f6..b225ca5 100644
--- a/server/trpc/controllers/device.ts
+++ b/server/trpc/controllers/device.ts
@@ -21,6 +21,12 @@ export class DeviceController {
       .where(eq(devices.id, id));
     return '设备名修改成功';
   }
+  async bindProgram(id: number, programId: number) {
+    await db.update(devices)
+      .set({ programId })
+      .where(eq(devices.id, id));
+    return '节目绑定成功';
+  }
 
   async getInfo(id: number) {
     const device = await db.query.devices.findFirst({
diff --git a/server/trpc/routers/device.ts b/server/trpc/routers/device.ts
index b8aa16b..587e924 100644
--- a/server/trpc/routers/device.ts
+++ b/server/trpc/routers/device.ts
@@ -4,6 +4,7 @@ import { protectedProcedure, requireRoles, router } from '../trpc';
 const locationZod = z.string()
   .max(20, { message: '设备名不能超过20个字符' });
 const deviceIdZod = z.number();
+const programIdZod = z.number();
 
 export const deviceRouter = router({
   create: protectedProcedure
@@ -27,6 +28,13 @@ export const deviceRouter = router({
       return await ctx.deviceController.edit(input.id, input.new_location);
     }),
 
+  bindProgram: protectedProcedure
+    .use(requireRoles(['admin']))
+    .input(z.object({ id: deviceIdZod, programId: programIdZod }))
+    .mutation(async ({ ctx, input }) => {
+      return await ctx.deviceController.bindProgram(input.id, input.programId);
+    }),
+
   info: protectedProcedure
     .use(requireRoles(['admin']))
     .input(z.object({ id: deviceIdZod }))