完善团队成员明细展示

src/views/project-management/personnel-dispatch/construction-personnel.vue

@@ -8,7 +8,7 @@
   5. 导入导出团队成员数据
 -->
 <template>
-  <GiPageLayout>
+  <GiPageLayout class="construction-personnel-page">
     <!-- 页面头部 -->
     <div class="page-header">
       <div class="header-left">
@@ -828,15 +828,22 @@ onMounted(() => {
   border-radius: 8px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
   margin-bottom: 24px;
+  max-height: calc(100vh - 300px);
+  overflow: hidden;
   
   .arco-table-container {
     overflow-x: auto;
-    overflow-y: visible;
+    overflow-y: auto;
+    max-height: calc(100vh - 350px);
   }
   
   .arco-table {
     overflow: visible;
   }
+  
+  .arco-table-body {
+    overflow-y: auto;
+  }
 }
 
 
@@ -917,6 +924,28 @@ onMounted(() => {
   }
 }
 
+// 页面滚动修复
+.construction-personnel-page {
+  height: 100vh;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  
+  :deep(.gi-page-layout) {
+    height: 100%;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+  }
+  
+  :deep(.gi-page-layout-content) {
+    flex: 1;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+  }
+}
+
 // 响应式设计
 @media (max-width: 768px) {
   .page-header {

src/views/project-management/personnel-dispatch/index.vue

@@ -237,31 +237,37 @@
 
         <!-- 团队成员明细 -->
         <div class="detail-section">
-          <div class="section-header">
+          <div class="section-header team-members-header">
-            <h3>团队成员明细</h3>
+            <div class="header-left">
-            <a-button size="small" @click="openPersonnelManagement">
+              <h3>团队成员明细</h3>
+              <span class="member-count" v-if="currentProject.teamMembers && currentProject.teamMembers.length > 0">
+                ({{ currentProject.teamMembers.length }}人)
+              </span>
+            </div>
+            <a-button size="small" @click="openPersonnelManagement" class="add-member-btn">
               <template #icon><icon-user-group /></template>
               添加成员
             </a-button>
           </div>
           <div class="team-members">
             <div 
-              v-for="member in currentProject.teamMembers" 
+              v-for="(member, index) in currentProject.teamMembers" 
               :key="member.id"
               class="member-item"
+              :style="{ animationDelay: `${index * 0.1}s` }"
               @click="editMemberPosition(member)"
             >
               <div class="member-avatar">
                 <icon-user />
               </div>
               <div class="member-info">
-                <div class="member-name">{{ member.name }}</div>
+                <div class="member-name">{{ member.name || '未设置姓名' }}</div>
-                <div class="member-position">{{ member.position }}</div>
+                <div class="member-position">{{ member.position || '未设置岗位' }}</div>
                 <div class="member-details">
                   <span class="member-status" :class="member.status">
                     {{ member.status === 'available' ? '在线' : '离线' }}
                   </span>
-                  <span class="member-date">入职: {{ member.joinDate }}</span>
+                  <span class="member-date">入职: {{ member.joinDate || '未设置' }}</span>
                 </div>
               </div>
               <div class="member-actions">
@@ -453,15 +459,18 @@ const mapProjectRespToProjectCard = (projectResp: any): any => {
   // 处理团队成员数据 - 使用后端返回的真实数据
   const teamMembers = projectResp.teamMembers ? projectResp.teamMembers.map((member: any) => {
     console.log('处理团队成员数据:', member) // 添加调试日志
+    console.log('成员userName字段:', member.userName)
+    console.log('成员name字段:', member.name)
+    
     const mappedMember = {
       id: member.memberId,
-      name: member.name, // 修复：使用正确的姓名字段
+      name: member.userName || member.name || '未设置姓名', // 修复：优先使用userName字段
-      position: member.roleTypeDesc || member.jobCodeDesc,
+      position: member.roleTypeDesc || member.jobCodeDesc || '未设置岗位',
       phone: member.phone || '', // 后端数据中的电话字段
       email: member.email || '', // 后端数据中的邮箱字段
       status: member.status === 'ACTIVE' ? 'available' : 'offline',
       skills: [], // 后端数据中没有技能字段
-      joinDate: member.joinDate,
+      joinDate: member.joinDate || '未设置',
       remark: member.remark || member.jobDesc || '',
       // 保留原始数据用于后续处理
       originalData: member
@@ -533,18 +542,32 @@ const loadKanbanData = async () => {
         ...(response.data.pendingProjects || [])
       ]
       
+      console.log('后端返回的所有项目数据:', allProjects)
+      console.log('后端返回的preparingProjects:', response.data.preparingProjects)
+      console.log('后端返回的ongoingProjects:', response.data.ongoingProjects)
+      console.log('后端返回的inProgressProjects:', response.data.inProgressProjects)
+      console.log('后端返回的pendingProjects:', response.data.pendingProjects)
+      
       // 根据项目状态分类
       allProjects.forEach(project => {
+        console.log('处理项目:', project.projectName || project.name)
+        console.log('项目团队成员:', project.teamMembers)
+        console.log('项目状态:', project.status, typeof project.status)
+        
         const mappedProject = mapProjectRespToProjectCard(project)
+        console.log('映射后的项目:', mappedProject.name)
+        console.log('映射后的团队成员:', mappedProject.teamMembers)
         
         // 确保状态比较时类型一致，将字符串转换为数字进行比较
         const status = typeof project.status === 'string' ? parseInt(project.status) : project.status
         
         if (status === 0) {
           // status: 0 表示准备中
+          console.log('添加到准备中项目:', mappedProject.name)
           preparingProjects.value.push(mappedProject)
         } else if (status === 1) {
           // status: 1 表示进行中
+          console.log('添加到进行中项目:', mappedProject.name)
           ongoingProjects.value.push(mappedProject)
         }
         // status: 其他值表示未开工，我们不需要显示
@@ -629,10 +652,12 @@ const openProjectDetail = async (project: any) => {
   try {
     loading.value = true
     console.log('正在获取项目详情，项目ID:', project.id)
+    console.log('传入的项目数据:', project)
     
     // 首先检查传入的项目数据是否已经包含团队成员信息
     if (project.teamMembers && project.teamMembers.length > 0) {
       console.log('项目数据已包含团队成员信息，直接使用')
+      console.log('团队成员数据:', project.teamMembers)
       currentProject.value = project
       projectDetailVisible.value = true
       return
@@ -643,7 +668,9 @@ const openProjectDetail = async (project: any) => {
     
     if (response.data) {
       // 使用映射函数处理后端数据
+      console.log('API返回的原始数据:', response.data)
       currentProject.value = mapProjectRespToProjectCard(response.data)
+      console.log('映射后的项目数据:', currentProject.value)
       projectDetailVisible.value = true
     } else {
       // 如果API没有返回数据，使用传入的项目数据作为后备
@@ -1135,98 +1162,238 @@ onMounted(async () => {
     }
   }
 
-  .team-members {
+  .team-members-header {
-    .member-item {
+    .header-left {
       display: flex;
       align-items: center;
-      gap: 12px;
+      gap: 8px;
-      padding: 12px;
+      
-      border: 1px solid #f0f0f0;
+      h3 {
-      border-radius: 6px;
+        margin: 0;
-      margin-bottom: 8px;
+        color: #1d2129;
-      cursor: pointer;
+        font-size: 18px;
+        font-weight: 600;
+      }
+      
+      .member-count {
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        color: white;
+        padding: 2px 8px;
+        border-radius: 12px;
+        font-size: 12px;
+        font-weight: 500;
+      }
+    }
+    
+    .add-member-btn {
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      border: none;
+      color: white;
+      border-radius: 8px;
       transition: all 0.3s ease;
       
       &:hover {
-        background: #f8f9fa;
+        background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
+        transform: translateY(-1px);
+        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
+      }
+    }
+  }
+
+  .team-members {
+    max-height: 400px;
+    overflow-y: auto;
+    padding-right: 8px;
+    
+    // 自定义滚动条样式
+    &::-webkit-scrollbar {
+      width: 6px;
+    }
+    
+    &::-webkit-scrollbar-track {
+      background: #f1f1f1;
+      border-radius: 3px;
+    }
+    
+    &::-webkit-scrollbar-thumb {
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      border-radius: 3px;
+      
+      &:hover {
+        background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
+      }
+    }
+    
+    .member-item {
+      display: flex;
+      align-items: center;
+      gap: 16px;
+      padding: 16px;
+      border: 1px solid #e5e6eb;
+      border-radius: 12px;
+      margin-bottom: 12px;
+      cursor: pointer;
+      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      background: linear-gradient(135deg, #ffffff 0%, #fafbfc 100%);
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+      animation: fadeInUp 0.6s ease-out forwards;
+      opacity: 0;
+      transform: translateY(20px);
+
+      @keyframes fadeInUp {
+        to {
+          opacity: 1;
+          transform: translateY(0);
+        }
+      }
+
+      &:hover {
+        background: linear-gradient(135deg, #f8f9ff 0%, #e8f2ff 100%);
         border-color: #667eea;
+        box-shadow: 0 4px 16px rgba(102, 126, 234, 0.15);
+        transform: translateY(-2px);
+      }
+
+      &:active {
+        transform: translateY(0);
       }
 
       .member-avatar {
-        width: 40px;
+        width: 48px;
-        height: 40px;
+        height: 48px;
         border-radius: 50%;
-        background: #f0f0f0;
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
         display: flex;
         align-items: center;
         justify-content: center;
-        color: #86909c;
+        color: white;
+        font-size: 20px;
+        box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
+        position: relative;
+        
+        &::after {
+          content: '';
+          position: absolute;
+          top: -2px;
+          right: -2px;
+          width: 12px;
+          height: 12px;
+          border-radius: 50%;
+          background: #52c41a;
+          border: 2px solid white;
+          box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
+        }
       }
 
       .member-info {
         flex: 1;
+        min-width: 0;
 
         .member-name {
-          font-weight: 500;
+          font-weight: 600;
           color: #1d2129;
-          margin-bottom: 2px;
+          margin-bottom: 4px;
+          font-size: 16px;
+          line-height: 1.4;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
         }
 
         .member-position {
-          font-size: 12px;
+          font-size: 13px;
-          color: #86909c;
+          color: #4e5969;
+          margin-bottom: 6px;
+          font-weight: 500;
+          background: linear-gradient(135deg, #f0f2f5 0%, #e5e6eb 100%);
+          padding: 2px 8px;
+          border-radius: 6px;
+          display: inline-block;
         }
 
         .member-details {
           display: flex;
           align-items: center;
-          gap: 8px;
+          gap: 12px;
           font-size: 12px;
           color: #86909c;
 
           .member-status {
-            padding: 2px 6px;
+            padding: 4px 8px;
-            border-radius: 4px;
+            border-radius: 6px;
             font-weight: 500;
+            font-size: 11px;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
 
             &.available {
-              background: #e3f2fd;
+              background: linear-gradient(135deg, #e6f7ff 0%, #bae7ff 100%);
-              color: #2196f3;
+              color: #1890ff;
+              border: 1px solid #91d5ff;
             }
 
             &.offline {
-              background: #f8f9fa;
+              background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
-              color: #868e96;
+              color: #8c8c8c;
+              border: 1px solid #d9d9d9;
             }
           }
+          
+          .member-date {
+            background: #f7f8fa;
+            padding: 2px 6px;
+            border-radius: 4px;
+            border: 1px solid #e5e6eb;
+          }
         }
       }
 
       .member-actions {
         .arco-btn {
           font-size: 12px;
+          border-radius: 8px;
+          padding: 6px 12px;
+          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+          border: none;
+          color: white;
+          transition: all 0.3s ease;
+          
+          &:hover {
+            background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
+            transform: translateY(-1px);
+            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
+          }
         }
       }
     }
 
     .empty-state {
       text-align: center;
-      padding: 40px 0;
+      padding: 60px 20px;
       color: #86909c;
+      background: linear-gradient(135deg, #fafbfc 0%, #f0f2f5 100%);
+      border-radius: 12px;
+      border: 2px dashed #d9d9d9;
+      margin: 20px 0;
 
       .empty-icon {
-        font-size: 48px;
+        font-size: 64px;
-        margin-bottom: 16px;
+        margin-bottom: 20px;
+        color: #bfbfbf;
+        opacity: 0.6;
       }
 
       .empty-text {
-        font-size: 18px;
+        font-size: 20px;
-        font-weight: 500;
+        font-weight: 600;
-        margin-bottom: 8px;
+        margin-bottom: 12px;
+        color: #595959;
       }
 
       .empty-desc {
         font-size: 14px;
+        color: #8c8c8c;
+        line-height: 1.6;
       }
     }
   }