From 4de6e9cc57bd2c9209322cbcfa683de8fb09dc33 Mon Sep 17 00:00:00 2001
From: guochunsi <1595020186@qq.com>
Date: Fri, 23 Jan 2026 18:43:30 +0800
Subject: [PATCH] a

---
 src/views/recruit/newstucheckin/index.vue | 173 ++++++++++++++++++++--
 1 file changed, 159 insertions(+), 14 deletions(-)

diff --git a/src/views/recruit/newstucheckin/index.vue b/src/views/recruit/newstucheckin/index.vue
index 1251f98..2e7a226 100644
--- a/src/views/recruit/newstucheckin/index.vue
+++ b/src/views/recruit/newstucheckin/index.vue
@@ -133,19 +133,74 @@
             </el-tag>
           </template>
         </el-table-column>
-        <el-table-column prop="isDormApply" label="住宿申请" align="center" width="100">
+        <el-table-column prop="isRoom" label="是否住宿" align="center" width="120">
           <template #default="scope">
-            <el-tag v-if="scope.row.isDormApply == '1'" type="success">通过</el-tag>
-            <el-tag v-else-if="scope.row.isDormApply == '0'" type="danger">未通过</el-tag>
+            <template v-if="scope.row.isRoom == '1'">
+              <DetailPopover
+                title="住宿信息"
+                :title-icon="InfoFilled"
+                :width="320"
+                :items="[
+                  {
+                    label: '住宿申请',
+                    layout: 'horizontal'
+                  },
+                  {
+                    label: '宿舍号',
+                    layout: 'horizontal'
+                  },
+                  {
+                    label: '床位号',
+                    layout: 'horizontal'
+                  }
+                ]">
+                <template #reference>
+                  <el-tag type="success" class="dorm-tag">
+                    {{ getStatusConfig(yes_no_type, scope.row.isRoom)?.label }}
+                    <el-icon class="info-icon"><InfoFilled /></el-icon>
+                  </el-tag>
+                </template>
+                <!-- 住宿申请状态 -->
+                <template #content-0>
+                  <div class="dorm-apply-content">
+                    <ClickableTag 
+                      v-if="scope.row.isDormApply == '1'"
+                      type="success"
+                      size="small"
+                      :left-icon="CircleCheck"
+                      :right-icon="null">
+                      申请通过
+                    </ClickableTag>
+                    <ClickableTag 
+                      v-else-if="scope.row.isDormApply == '0'"
+                      type="danger"
+                      size="small"
+                      :left-icon="CircleClose"
+                      :right-icon="null">
+                      未通过
+                    </ClickableTag>
+                    <span v-else class="empty-text">-</span>
+                  </div>
+                </template>
+                <!-- 宿舍号 -->
+                <template #content-1>
+                  <div class="dorm-room-content">
+                    <span :class="scope.row.roomNo ? 'room-text' : 'empty-text'">
+                      {{ scope.row.roomNo || '-' }}
+                    </span>
+                  </div>
+                </template>
+                <!-- 床位号 -->
+                <template #content-2>
+                  <el-tag v-if="scope.row.bedNo" size="small" type="sucess" effect="dark">
+                    {{ scope.row.bedNo }}号
+                  </el-tag>
+                </template>
+              </DetailPopover>
+            </template>
+            <span v-else>{{ getStatusConfig(yes_no_type, scope.row.isRoom)?.label }}</span>
           </template>
         </el-table-column>
-        <el-table-column prop="isRoom" label="是否住宿" align="center" width="100">
-          <template #default="scope">
-            <span>{{ getStatusConfig(yes_no_type, scope.row.isRoom)?.label }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column prop="roomNo" label="宿舍号" align="center" width="80" show-overflow-tooltip />
-        <el-table-column prop="bedNo" label="床位号" align="center" width="80" show-overflow-tooltip />
         <el-table-column prop="degreeOfEducation" label="文化程度" align="center" show-overflow-tooltip >
           <template #default="scope">
             <span>{{ getStatusConfig(eduList, scope.row.degreeOfEducation)?.label }}</span>
@@ -153,8 +208,16 @@
         </el-table-column>
         <el-table-column prop="residenceDetail" label="居住地址" align="center" show-overflow-tooltip />
         <el-table-column prop="parentName" label="家庭联系人" width="100" align="center" show-overflow-tooltip />
-        <el-table-column prop="parentTelOne" label="家长电话1" align="center" show-overflow-tooltip />
-        <el-table-column prop="parentTelTwo" label="家长电话2" align="center" show-overflow-tooltip />
+        <el-table-column label="家长电话" align="center" show-overflow-tooltip>
+          <template #default="scope">
+            <div v-if="scope.row.parentTelOne || scope.row.parentTelTwo" class="parent-tel">
+              <span v-if="scope.row.parentTelOne" class="tel-item">{{ scope.row.parentTelOne }}</span>
+              <span v-if="scope.row.parentTelOne && scope.row.parentTelTwo" class="tel-separator">/</span>
+              <span v-if="scope.row.parentTelTwo" class="tel-item">{{ scope.row.parentTelTwo }}</span>
+            </div>
+            <span v-else class="empty-text">-</span>
+          </template>
+        </el-table-column>
         <el-table-column prop="remarks" label="备注" align="center" show-overflow-tooltip />
         <el-table-column label="操作" width="100" align="center" fixed="right">
           <template #default="scope">
@@ -197,6 +260,9 @@ import request from '/@/utils/request'
 import { getStatusConfig } from '/@/config/global'
 import { getDeptList, getClassListByRole } from '/@/api/basic/basicclass'
 import { getList } from '/@/api/recruit/recruitstudentplangroup'
+import DetailPopover from '/@/components/DetailPopover/index.vue'
+import ClickableTag from '/@/components/ClickableTag/index.vue'
+import { InfoFilled, CircleCheck, CircleClose, HomeFilled, Grid } from '@element-plus/icons-vue'
 
 const StuCheckIn = defineAsyncComponent(() => import('./stu-check-in.vue'))
 const TeacherNameNo = defineAsyncComponent(() => import('/@/components/TeacherNameNo/index.vue'))
@@ -347,7 +413,7 @@ const handleExportOut = async () => {
 }
 
 // 查询报到状态字典
-const getCheckInStatusData = async () => {
+const getDictsData = async () => {
   try {
     const data = await getDictsByTypes(['check_in_status','finance_student_source'])
     checkInStatusData.value = data.data.check_in_status || []
@@ -373,7 +439,7 @@ const init = async () => {
     classList.value = classData.data || []
     
     // 获取字典数据
-    await getCheckInStatusData()
+    await getDictsData()
     
     getDataList()
   } catch (error) {
@@ -387,4 +453,83 @@ onMounted(() => {
 </script>
 
 <style lang="scss" scoped>
+.parent-tel {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  
+  .tel-item {
+    color: #303133;
+  }
+  
+  .tel-separator {
+    color: #909399;
+    margin: 0 2px;
+  }
+}
+
+.empty-text {
+  color: #909399;
+}
+
+.dorm-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  
+  &:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  }
+  
+  .info-icon {
+    font-size: 12px;
+    opacity: 0.8;
+  }
+}
+
+// 住宿申请状态内容
+.dorm-apply-content {
+  display: flex;
+  align-items: center;
+}
+
+// 宿舍号内容
+.dorm-room-content {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  
+  .room-icon {
+    color: var(--el-color-primary);
+    font-size: 16px;
+  }
+  
+  .room-text {
+    color: var(--el-color-primary);
+    font-weight: 600;
+    font-size: 15px;
+  }
+}
+
+// 床位号内容
+.dorm-bed-content {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  
+  .bed-icon {
+    color: var(--el-color-primary);
+    font-size: 16px;
+  }
+  
+  .bed-text {
+    color: var(--el-color-primary);
+    font-weight: 600;
+    font-size: 15px;
+  }
+}
 </style>