wuxueyu
/
Industrial-image-management-system---web
1
0
Fork 2
Code Issues Pull Requests Packages Projects Releases Wiki Activity

完善团队成员明细展示

This commit is contained in:
马诗敏 2025-08-10 20:41:24 +08:00
parent ae29bb661f
commit 3fc298de9b
2 changed files with 236 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
src/views/project-management/personnel-dispatch/construction-personnel.vue
View File

@ -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 {

247
src/views/project-management/personnel-dispatch/index.vue
View File

@ -237,31 +237,37 @@
<!-- 团队成员明细 -->
<div class="detail-section">
<div class="section-header">
<h3>团队成员明细</h3>
<a-button size="small" @click="openPersonnelManagement">
<div class="section-header team-members-header">
<div class="header-left">
<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-position">{{ member.position }}</div>
<div class="member-name">{{ member.name || '未设置姓名' }}</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, // 修复：使用正确的姓名字段
position: member.roleTypeDesc || member.jobCodeDesc,
name: member.userName || member.name || '未设置姓名', // 修复：优先使用userName字段
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 {
.member-item {
.team-members-header {
.header-left {
display: flex;
align-items: center;
gap: 12px;
padding: 12px;
border: 1px solid #f0f0f0;
border-radius: 6px;
margin-bottom: 8px;
cursor: pointer;
gap: 8px;
h3 {
margin: 0;
color: #1d2129;
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;
height: 40px;
width: 48px;
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;
color: #86909c;
font-size: 13px;
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;
border-radius: 4px;
padding: 4px 8px;
border-radius: 6px;
font-weight: 500;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.5px;
&.available {
background: #e3f2fd;
color: #2196f3;
background: linear-gradient(135deg, #e6f7ff 0%, #bae7ff 100%);
color: #1890ff;
border: 1px solid #91d5ff;
}
&.offline {
background: #f8f9fa;
color: #868e96;
background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
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;
margin-bottom: 16px;
font-size: 64px;
margin-bottom: 20px;
color: #bfbfbf;
opacity: 0.6;
}
.empty-text {
font-size: 18px;
font-weight: 500;
margin-bottom: 8px;
font-size: 20px;
font-weight: 600;
margin-bottom: 12px;
color: #595959;
}
.empty-desc {
font-size: 14px;
color: #8c8c8c;
line-height: 1.6;
}
}
}