修改舒文，牌位预览列印

web/admin/guadan/statistics_table.aspx

@@ -142,13 +142,15 @@
                 </template>
                 <template #item.todaytotalbookers="{item}">
                     <span>
-                        {{item?.todaytotalbookers + '(男' + '女)'}}
+                        {{item?.todaytotalbookers + '(男: ' + item.bookmale + ', 女:' + item.bookfemale + ')'}}
                     </span>
+                    <button type="button" class="btn btn-outline-primary" @click="showBookDialog(item, '已預約','booking')">查看預約人</button>
                 </template>
                 <template #item.checkin="{item}">
                     <span>
-                        {{item?.checkin + '(男' + '女)'}}
+                        {{item?.checkin + '(男: ' + item.checkinmale + ', 女:' + item.checkinfemale + ')'}}
                     </span>
+                    <button type="button" class="btn btn-outline-primary" @click="showBookDialog(item, '已入住', 'checkin')">查看入住人</button>
                 </template>
                 <template #item.bedusagerate="{ item }">
                     {{ ((item.todaytotalbookers / bedcount) * 100).toFixed(2) + '%' }}
@@ -161,6 +163,38 @@
                 </template>
             </v-data-table>
     </div>
+    <div>
+      <v-dialog v-model="bookerDialog.show" max-width="500">
+        <v-card
+          style="width: 40vw; height: 50vh; display: flex; flex-direction: column;"
+        >
+          <!-- 标题 -->
+          <v-card-title class="text-h5" style="flex: 0 0 auto; background-color: #1976D2; color: white; padding: 16px;">
+            {{ bookerDialog.title }}
+          </v-card-title>
+
+          <!-- 内容撑满 -->
+          <v-card-text
+            style="flex: 1; overflow-y: auto;"
+          >
+            <v-data-table
+                :items="bookerDialog.items"
+                :headers="bookerDialog.headers">
+
+            </v-data-table>
+          </v-card-text>
+
+          <!-- 底部按钮 -->
+          <v-card-actions>
+            <v-spacer></v-spacer>
+            <v-btn text @click="closeBookDialog">關閉</v-btn>
+          </v-card-actions>
+        </v-card>
+      </v-dialog>
+    </div>
+
+
+
 </asp:Content>
 
 <asp:Content ID="Content4" ContentPlaceHolderID="offCanvasRight" Runat="Server">
@@ -201,12 +235,60 @@
                         guadanPeopleCurrentMale: 0,
                         guadanPeopleCurrentFemale: 0
                     },
+                    bookerDialog: {
+                        title: "",
+                        show: false,
+                        items: [],
+                        headers: [
+                            { text: '姓名', value: 'name' },
+                            { text: "性别", value: 'gender'}
+                        ]
+                    }
                 }
             },
             methods: {
+                showBookDialog(item, title, type = null) {
+                    this.bookerDialog.title = title;
+                    this.bookerDialog.show = true;
+                    if (type === 'booking') {
+                        this.getBookerDialogBookingItems(item.date);
+                    }
+                    else if (type === 'checkin') {
+                        this.getBookerDialogCheckInItems(item.date);
+                    }
+                },
+                closeBookDialog() {
+                    this.bookerDialog.show = false;
+                    this.bookerDialog.title = "";
+                    this.bookerDialog.items = [];
+                },
+                async getBookerDialogBookingItems(date) {
+                    try {
+                        const res = await axios.get(HTTP_HOST + 'api/guadan/guest/booking/list', {
+                            params: {
+                                date: date
+                            }
+                        });
+                        this.bookerDialog.items = res.data;
+                    } catch(error) {
+
+                    }
+                },
+                async getBookerDialogCheckInItems(date) {
+                    try {
+                        const res = await axios.get(HTTP_HOST + 'api/guadan/guest/checkin/list', {
+                            params: {
+                                date: date
+                            }
+                        });
+                        this.bookerDialog.items = res.data;
+                    } catch (error) {
+
+                    }
+                },
                 async getList() {
                     try {
-                        const res = await axios.get('/api/guadan/guadanstatisticstable/list', {
+                        const res = await axios.get(HTTP_HOST + 'api/guadan/guadanstatisticstable/list', {
                             params: {
                                 start: this.startDate || '',
                                 end: this.endDate || ''