客户项目
This commit is contained in:
parent
3eb9419096
commit
56c2e2f76e
|
|
@ -124,9 +124,11 @@ export const getCustomerFollowupList = (customerId) => {
|
||||||
* @returns {Promise} 返回项目列表
|
* @returns {Promise} 返回项目列表
|
||||||
*/
|
*/
|
||||||
export const getCustomerProjects = (customerId) => {
|
export const getCustomerProjects = (customerId) => {
|
||||||
return uni.$uv.http.get(`bst/customer/projects`, {
|
return uni.$uv.http.get(`bst/project/list`, {
|
||||||
params: {
|
params: {
|
||||||
customerId: customerId
|
customerId: customerId,
|
||||||
|
pageNum: 1,
|
||||||
|
pageSize: 30
|
||||||
},
|
},
|
||||||
custom: {
|
custom: {
|
||||||
auth: true
|
auth: true
|
||||||
|
|
|
||||||
|
|
@ -126,30 +126,42 @@
|
||||||
<view
|
<view
|
||||||
class="project-card"
|
class="project-card"
|
||||||
v-for="(project, index) in projectList"
|
v-for="(project, index) in projectList"
|
||||||
:key="index"
|
:key="project.id || index"
|
||||||
>
|
>
|
||||||
<view class="project-header">
|
<view class="project-header">
|
||||||
<view class="project-status-tag" :class="getProjectStatusClass(project.status)">
|
<view class="project-status-tag" :class="getProjectStatusClass(project.status)">
|
||||||
<text>{{ getProjectStatusText(project.status) }}</text>
|
<text>{{ getProjectStatusText(project.status) }}</text>
|
||||||
</view>
|
</view>
|
||||||
<text class="project-more" @click.stop="handleProjectMore(project)">⋮</text>
|
<text class="project-more" @click.stop="handleProjectMore(project)">⋯</text>
|
||||||
</view>
|
</view>
|
||||||
<text class="project-name">{{ project.name }}</text>
|
<text class="project-name">{{ project.name }}</text>
|
||||||
<view class="project-progress">
|
<view class="project-progress">
|
||||||
<view class="progress-bar">
|
<view class="progress-bar">
|
||||||
<view
|
<view
|
||||||
class="progress-fill"
|
class="progress-fill"
|
||||||
:style="{ width: project.progress + '%' }"
|
:style="{ width: getProjectProgress(project) + '%' }"
|
||||||
></view>
|
></view>
|
||||||
</view>
|
</view>
|
||||||
<text class="progress-text">{{ project.progress }}%</text>
|
<text class="progress-text">{{ getProjectProgress(project) }}%</text>
|
||||||
</view>
|
</view>
|
||||||
<view class="project-participants">
|
<view class="project-task-count">
|
||||||
<text class="participants-text">{{ formatParticipants(project.participants) }}</text>
|
<text class="task-count-text">{{ getTaskCountText(project) }}</text>
|
||||||
</view>
|
</view>
|
||||||
<view class="project-deadline" :class="{ 'overdue': project.isOverdue }">
|
<view class="project-members">
|
||||||
|
<view class="member-avatars">
|
||||||
|
<image
|
||||||
|
v-for="(member, idx) in getDisplayMembers(project.memberList)"
|
||||||
|
:key="member.id || idx"
|
||||||
|
class="member-avatar"
|
||||||
|
:src="member.userAvatar || '/static/default-avatar.png'"
|
||||||
|
mode="aspectFill"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
<text class="members-text">{{ formatProjectMembers(project.memberList) }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="project-deadline" :class="{ 'overdue': isProjectOverdue(project) }">
|
||||||
<text class="deadline-icon">🕐</text>
|
<text class="deadline-icon">🕐</text>
|
||||||
<text class="deadline-text">{{ formatDeadline(project) }}</text>
|
<text class="deadline-text">{{ formatProjectDeadline(project) }}</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="empty-state" v-if="projectList.length === 0">
|
<view class="empty-state" v-if="projectList.length === 0">
|
||||||
|
|
@ -377,9 +389,12 @@ const loadProjectList = async () => {
|
||||||
projectList.value = res;
|
projectList.value = res;
|
||||||
} else if (res && res.rows && Array.isArray(res.rows)) {
|
} else if (res && res.rows && Array.isArray(res.rows)) {
|
||||||
projectList.value = res.rows;
|
projectList.value = res.rows;
|
||||||
|
} else if (res && res.data && res.data.rows && Array.isArray(res.data.rows)) {
|
||||||
|
projectList.value = res.data.rows;
|
||||||
}
|
}
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('加载项目列表失败:', error);
|
console.error('加载项目列表失败:', error);
|
||||||
|
uni.$uv.toast('加载项目列表失败');
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
@ -459,8 +474,8 @@ const formatTimeOnly = (dateTime) => {
|
||||||
// 获取项目状态样式类
|
// 获取项目状态样式类
|
||||||
const getProjectStatusClass = (status) => {
|
const getProjectStatusClass = (status) => {
|
||||||
return {
|
return {
|
||||||
'status-developing': status === 'developing' || status === '1',
|
'status-developing': status === 'developing' || status === '1' || status === 'IN_PROGRESS',
|
||||||
'status-expiring': status === 'expiring' || status === '2'
|
'status-expiring': status === 'expiring' || status === '2' || status === 'EXPIRING_SOON'
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
@ -470,33 +485,98 @@ const getProjectStatusText = (status) => {
|
||||||
'developing': '开发中',
|
'developing': '开发中',
|
||||||
'expiring': '即将到期',
|
'expiring': '即将到期',
|
||||||
'1': '开发中',
|
'1': '开发中',
|
||||||
'2': '即将到期'
|
'2': '即将到期',
|
||||||
|
'IN_PROGRESS': '开发中',
|
||||||
|
'EXPIRING_SOON': '即将到期'
|
||||||
};
|
};
|
||||||
return statusMap[status] || '未知';
|
return statusMap[status] || '未知';
|
||||||
};
|
};
|
||||||
|
|
||||||
// 格式化参与人
|
// 计算项目进度
|
||||||
const formatParticipants = (participants) => {
|
const getProjectProgress = (project) => {
|
||||||
if (!participants || !Array.isArray(participants)) return '--';
|
if (!project) return 0;
|
||||||
if (participants.length <= 4) {
|
// 如果有任务数据,根据任务完成情况计算
|
||||||
return participants.join('、');
|
if (project.taskCount && project.taskCount > 0) {
|
||||||
|
const completed = project.taskPassCount || 0;
|
||||||
|
const progress = Math.round((completed / project.taskCount) * 100);
|
||||||
|
return Math.min(100, Math.max(0, progress)); // 确保在0-100之间
|
||||||
}
|
}
|
||||||
const firstFour = participants.slice(0, 4).join('、');
|
// 如果有进度字段,使用进度字段
|
||||||
return `${firstFour}等${participants.length}人`;
|
if (project.progress !== undefined && project.progress !== null) {
|
||||||
|
return Math.min(100, Math.max(0, project.progress));
|
||||||
|
}
|
||||||
|
// 默认返回0
|
||||||
|
return 0;
|
||||||
};
|
};
|
||||||
|
|
||||||
// 格式化截止日期
|
// 获取任务计数文本
|
||||||
const formatDeadline = (project) => {
|
const getTaskCountText = (project) => {
|
||||||
if (!project.deadline) return '--';
|
if (!project) return '0 / 0';
|
||||||
const deadline = new Date(project.deadline);
|
const completed = project.taskPassCount || 0;
|
||||||
|
const total = project.taskCount || 0;
|
||||||
|
return `${completed} / ${total}`;
|
||||||
|
};
|
||||||
|
|
||||||
|
// 获取要显示的成员头像(最多4个)
|
||||||
|
const getDisplayMembers = (memberList) => {
|
||||||
|
if (!memberList || !Array.isArray(memberList)) return [];
|
||||||
|
return memberList.slice(0, 4);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 格式化项目成员列表
|
||||||
|
const formatProjectMembers = (memberList) => {
|
||||||
|
if (!memberList || !Array.isArray(memberList) || memberList.length === 0) {
|
||||||
|
return '暂无成员';
|
||||||
|
}
|
||||||
|
|
||||||
|
const names = memberList.map(member => member.userName || member.name).filter(Boolean);
|
||||||
|
|
||||||
|
if (names.length <= 4) {
|
||||||
|
return names.join('、');
|
||||||
|
}
|
||||||
|
|
||||||
|
const firstFour = names.slice(0, 4).join('、');
|
||||||
|
return `${firstFour}等${names.length}人`;
|
||||||
|
};
|
||||||
|
|
||||||
|
// 判断项目是否逾期
|
||||||
|
const isProjectOverdue = (project) => {
|
||||||
|
if (!project) return false;
|
||||||
|
// 优先使用 devOverdue 字段
|
||||||
|
if (project.devOverdue !== undefined && project.devOverdue !== null) {
|
||||||
|
return project.devOverdue;
|
||||||
|
}
|
||||||
|
// 否则根据日期判断
|
||||||
|
const deadline = project.expireTime || project.expectedCompleteDate;
|
||||||
|
if (!deadline) return false;
|
||||||
|
const deadlineDate = new Date(deadline);
|
||||||
const now = new Date();
|
const now = new Date();
|
||||||
const diffTime = deadline - now;
|
return deadlineDate < now;
|
||||||
|
};
|
||||||
|
|
||||||
|
// 格式化项目截止日期
|
||||||
|
const formatProjectDeadline = (project) => {
|
||||||
|
if (!project) return '--';
|
||||||
|
|
||||||
|
// 优先使用 expireTime,其次使用 expectedCompleteDate
|
||||||
|
const deadline = project.expireTime || project.expectedCompleteDate;
|
||||||
|
if (!deadline) return '--';
|
||||||
|
|
||||||
|
const deadlineDate = new Date(deadline);
|
||||||
|
const now = new Date();
|
||||||
|
const diffTime = deadlineDate - now;
|
||||||
const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
|
const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
|
||||||
|
|
||||||
|
// 格式化日期显示
|
||||||
|
const year = deadlineDate.getFullYear();
|
||||||
|
const month = String(deadlineDate.getMonth() + 1).padStart(2, '0');
|
||||||
|
const day = String(deadlineDate.getDate()).padStart(2, '0');
|
||||||
|
const dateStr = `${year}-${month}-${day}`;
|
||||||
|
|
||||||
if (diffDays < 0) {
|
if (diffDays < 0) {
|
||||||
return `逾期${Math.abs(diffDays)}天 ${formatDateTime(project.deadline)}`;
|
return `逾期${Math.abs(diffDays)}天 ${dateStr}`;
|
||||||
} else {
|
} else {
|
||||||
return `剩余${diffDays}天 ${formatDateTime(project.deadline)}`;
|
return `剩余${diffDays}天 ${dateStr}`;
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
@ -867,6 +947,10 @@ onMounted(() => {
|
||||||
}
|
}
|
||||||
|
|
||||||
// 项目列表样式
|
// 项目列表样式
|
||||||
|
.project-list {
|
||||||
|
padding-bottom: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
.project-card {
|
.project-card {
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
|
|
@ -878,30 +962,32 @@ onMounted(() => {
|
||||||
.project-header {
|
.project-header {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: flex-start;
|
||||||
margin-bottom: 12px;
|
margin-bottom: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.project-status-tag {
|
.project-status-tag {
|
||||||
padding: 4px 12px;
|
padding: 4px 10px;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
|
font-weight: 500;
|
||||||
|
|
||||||
&.status-developing {
|
&.status-developing {
|
||||||
background-color: #e3f2fd;
|
background-color: #1976d2;
|
||||||
color: #1976d2;
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.status-expiring {
|
&.status-expiring {
|
||||||
background-color: #fff3e0;
|
background-color: #ff9800;
|
||||||
color: #f57c00;
|
color: #fff;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.project-more {
|
.project-more {
|
||||||
font-size: 18px;
|
font-size: 20px;
|
||||||
color: #999;
|
color: #999;
|
||||||
transform: rotate(90deg);
|
line-height: 1;
|
||||||
|
padding: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.project-name {
|
.project-name {
|
||||||
|
|
@ -910,12 +996,13 @@ onMounted(() => {
|
||||||
color: #333;
|
color: #333;
|
||||||
margin-bottom: 12px;
|
margin-bottom: 12px;
|
||||||
display: block;
|
display: block;
|
||||||
|
line-height: 1.4;
|
||||||
}
|
}
|
||||||
|
|
||||||
.project-progress {
|
.project-progress {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin-bottom: 12px;
|
margin-bottom: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.progress-bar {
|
.progress-bar {
|
||||||
|
|
@ -938,36 +1025,70 @@ onMounted(() => {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
color: #1976d2;
|
color: #1976d2;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
|
min-width: 40px;
|
||||||
|
text-align: right;
|
||||||
}
|
}
|
||||||
|
|
||||||
.project-participants {
|
.project-task-count {
|
||||||
margin-bottom: 8px;
|
margin-bottom: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.participants-text {
|
.task-count-text {
|
||||||
font-size: 12px;
|
font-size: 13px;
|
||||||
color: #666;
|
color: #666;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.project-members {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.member-avatars {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.member-avatar {
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
border-radius: 12px;
|
||||||
|
border: 2px solid #fff;
|
||||||
|
margin-left: -8px;
|
||||||
|
|
||||||
|
&:first-child {
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.members-text {
|
||||||
|
font-size: 13px;
|
||||||
|
color: #666;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
.project-deadline {
|
.project-deadline {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
gap: 4px;
|
||||||
&.overdue {
|
|
||||||
.deadline-text {
|
|
||||||
color: #f44336;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.deadline-icon {
|
.deadline-icon {
|
||||||
font-size: 14px;
|
font-size: 12px;
|
||||||
margin-right: 4px;
|
color: #999;
|
||||||
}
|
}
|
||||||
|
|
||||||
.deadline-text {
|
.deadline-text {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
color: #666;
|
color: #1976d2;
|
||||||
|
|
||||||
|
.overdue & {
|
||||||
|
color: #f44336;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-deadline.overdue .deadline-text {
|
||||||
|
color: #f44336;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 客户信息样式
|
// 客户信息样式
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user