483 lines
13 KiB
Vue
483 lines
13 KiB
Vue
<template>
|
||
<view class="task-management-container">
|
||
<!-- 顶部导航栏 -->
|
||
<view class="top-navbar">
|
||
<text class="title">任务管理</text>
|
||
</view>
|
||
|
||
<!-- 筛选器 -->
|
||
<view class="filter-bar">
|
||
<view class="filter-item" :class="{ active: activeFilter === 'all' }" @click="activeFilter = 'all'">
|
||
<text>全部</text>
|
||
</view>
|
||
<view class="filter-item" :class="{ active: activeFilter === 'pending' }" @click="activeFilter = 'pending'">
|
||
<text>待完成</text>
|
||
</view>
|
||
<view class="filter-item" :class="{ active: activeFilter === 'completed' }" @click="activeFilter = 'completed'">
|
||
<text>已完成</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 任务列表 -->
|
||
<scroll-view class="task-list" scroll-y>
|
||
<view v-if="filteredTasks.length === 0" class="empty-state">
|
||
<u-icon name="task-list" size="120" color="#c0c4cc"></u-icon>
|
||
<text class="empty-text">暂无任务</text>
|
||
</view>
|
||
|
||
<view
|
||
v-for="task in filteredTasks"
|
||
:key="task.id"
|
||
class="task-card"
|
||
@click="viewTaskDetail(task)"
|
||
>
|
||
<!-- 任务标题和状态 -->
|
||
<view class="task-header">
|
||
<text class="task-title">{{ task.title }}</text>
|
||
<view class="task-status" :class="task.status">
|
||
<text>{{ getStatusText(task.status) }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 任务信息 -->
|
||
<view class="task-info">
|
||
<view class="info-item">
|
||
<u-icon name="calendar" size="24" color="#909399"></u-icon>
|
||
<text>截止日期：{{ task.deadline }}</text>
|
||
</view>
|
||
<view class="info-item">
|
||
<u-icon name="time" size="24" color="#909399"></u-icon>
|
||
<text>创建时间：{{ task.createTime }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 任务描述 -->
|
||
<text class="task-description">{{ task.description }}</text>
|
||
|
||
<!-- 完成进度 -->
|
||
<view class="progress-container">
|
||
<view class="progress-info">
|
||
<text>完成进度</text>
|
||
<text>{{ task.progress }}%</text>
|
||
</view>
|
||
<u-progress :percent="task.progress" height="8" active></u-progress>
|
||
</view>
|
||
|
||
<!-- 附件信息 -->
|
||
<view class="attachments">
|
||
<u-icon name="image" size="24" color="#909399"></u-icon>
|
||
<text>已上传 {{ task.uploadedCount }}/{{ task.totalCount }} 张图片</text>
|
||
</view>
|
||
|
||
<!-- 操作按钮 -->
|
||
<view class="action-buttons">
|
||
<button v-if="task.status === 'pending'" class="upload-btn" @click.stop="navigateToUpload(task)">
|
||
上传图片
|
||
</button>
|
||
<button v-if="task.status === 'pending' && task.uploadedCount > 0" class="preview-btn" @click.stop="viewUploadedImages(task)">
|
||
查看已上传
|
||
</button>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
|
||
<!-- 任务详情弹窗 -->
|
||
<u-modal v-model="showTaskDetail" title="任务详情" :close-on-click-modal="false">
|
||
<view class="task-detail">
|
||
<view class="detail-item">
|
||
<text class="detail-label">任务标题：</text>
|
||
<text class="detail-value">{{ selectedTask.title }}</text>
|
||
</view>
|
||
<view class="detail-item">
|
||
<text class="detail-label">任务状态：</text>
|
||
<text class="detail-value status" :class="selectedTask.status">
|
||
{{ getStatusText(selectedTask.status) }}
|
||
</text>
|
||
</view>
|
||
<view class="detail-item">
|
||
<text class="detail-label">发布部门：</text>
|
||
<text class="detail-value">{{ selectedTask.department }}</text>
|
||
</view>
|
||
<view class="detail-item">
|
||
<text class="detail-label">创建时间：</text>
|
||
<text class="detail-value">{{ selectedTask.createTime }}</text>
|
||
</view>
|
||
<view class="detail-item">
|
||
<text class="detail-label">截止日期：</text>
|
||
<text class="detail-value">{{ selectedTask.deadline }}</text>
|
||
</view>
|
||
<view class="detail-item">
|
||
<text class="detail-label">任务描述：</text>
|
||
<text class="detail-value description">{{ selectedTask.description }}</text>
|
||
</view>
|
||
<view class="detail-item">
|
||
<text class="detail-label">图片要求：</text>
|
||
<text class="detail-value">{{ selectedTask.totalCount }} 张</text>
|
||
</view>
|
||
</view>
|
||
</u-modal>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
activeFilter: 'all',
|
||
tasks: [
|
||
{
|
||
id: '1',
|
||
title: '研发部办公环境更新拍摄',
|
||
description: '对研发部新装修的办公区域进行全面拍摄，包括公共区域、会议室、办公工位等，要求多角度拍摄，清晰展示新环境特点。',
|
||
deadline: '2024-12-31',
|
||
createTime: '2024-12-20',
|
||
status: 'pending',
|
||
progress: 30,
|
||
uploadedCount: 3,
|
||
totalCount: 10,
|
||
department: '行政部'
|
||
},
|
||
{
|
||
id: '2',
|
||
title: '产品测试场景照片收集',
|
||
description: '为新产品测试提供实际使用场景照片，需要包含不同角度、不同光线条件下的产品展示，用于产品宣传材料制作。',
|
||
deadline: '2024-12-28',
|
||
createTime: '2024-12-18',
|
||
status: 'pending',
|
||
progress: 50,
|
||
uploadedCount: 5,
|
||
totalCount: 10,
|
||
department: '产品部'
|
||
},
|
||
{
|
||
id: '3',
|
||
title: '公司年会筹备照片',
|
||
description: '记录年会筹备过程中的重要环节和准备工作，包括场地布置、物资准备、彩排等场景，用于后续宣传报道。',
|
||
deadline: '2024-12-25',
|
||
createTime: '2024-12-15',
|
||
status: 'completed',
|
||
progress: 100,
|
||
uploadedCount: 12,
|
||
totalCount: 10,
|
||
department: '人力资源部'
|
||
},
|
||
{
|
||
id: '4',
|
||
title: '设备巡检照片记录',
|
||
description: '对公司服务器机房设备进行巡检并拍照记录，要求每个设备的正面、侧面、背面都要拍摄，并重点关注有异常的设备。',
|
||
deadline: '2025-01-10',
|
||
createTime: '2024-12-22',
|
||
status: 'pending',
|
||
progress: 0,
|
||
uploadedCount: 0,
|
||
totalCount: 15,
|
||
department: 'IT运维部'
|
||
},
|
||
{
|
||
id: '5',
|
||
title: '新项目启动会议照片',
|
||
description: '记录新项目启动会议的全过程，包括会议前准备、会议进行、讨论环节、合影等，用于项目文档和宣传。',
|
||
deadline: '2024-12-23',
|
||
createTime: '2024-12-21',
|
||
status: 'completed',
|
||
progress: 100,
|
||
uploadedCount: 8,
|
||
totalCount: 8,
|
||
department: '项目部'
|
||
}
|
||
],
|
||
showTaskDetail: false,
|
||
selectedTask: {}
|
||
}
|
||
},
|
||
computed: {
|
||
filteredTasks() {
|
||
if (this.activeFilter === 'all') {
|
||
return this.tasks
|
||
} else if (this.activeFilter === 'pending') {
|
||
return this.tasks.filter(task => task.status === 'pending')
|
||
} else if (this.activeFilter === 'completed') {
|
||
return this.tasks.filter(task => task.status === 'completed')
|
||
}
|
||
return this.tasks
|
||
}
|
||
},
|
||
methods: {
|
||
getStatusText(status) {
|
||
const statusMap = {
|
||
'pending': '待完成',
|
||
'completed': '已完成'
|
||
}
|
||
return statusMap[status] || '未知'
|
||
},
|
||
viewTaskDetail(task) {
|
||
this.selectedTask = { ...task }
|
||
this.showTaskDetail = true
|
||
},
|
||
navigateToUpload(task) {
|
||
uni.navigateTo({
|
||
url: '/pages/image-upload/image-upload?taskId=' + task.id + '&taskName=' + encodeURIComponent(task.title)
|
||
})
|
||
},
|
||
viewUploadedImages(task) {
|
||
this.$u.toast('查看已上传图片功能待实现')
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.task-management-container {
|
||
padding-top: 88rpx; // 适配顶部导航栏和筛选器
|
||
height: 100vh;
|
||
box-sizing: border-box;
|
||
background-color: #f5f7fa;
|
||
|
||
.top-navbar {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
height: 44px;
|
||
background-color: #ffffff;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 0 30rpx;
|
||
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
|
||
z-index: 999;
|
||
|
||
.title {
|
||
font-size: 36rpx;
|
||
font-weight: bold;
|
||
color: #333;
|
||
}
|
||
}
|
||
|
||
// 筛选器样式
|
||
.filter-bar {
|
||
position: fixed;
|
||
top: 44px;
|
||
left: 0;
|
||
right: 0;
|
||
height: 80rpx;
|
||
background-color: #ffffff;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-around;
|
||
border-bottom: 2rpx solid #ebeef5;
|
||
z-index: 998;
|
||
|
||
.filter-item {
|
||
padding: 10rpx 40rpx;
|
||
font-size: 28rpx;
|
||
color: #606266;
|
||
position: relative;
|
||
|
||
&.active {
|
||
color: #1989fa;
|
||
|
||
&::after {
|
||
content: '';
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
width: 40rpx;
|
||
height: 4rpx;
|
||
background-color: #1989fa;
|
||
border-radius: 2rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 任务列表样式
|
||
.task-list {
|
||
height: calc(100% - 88rpx);
|
||
padding: 20rpx;
|
||
|
||
.empty-state {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 100rpx 0;
|
||
|
||
.empty-text {
|
||
font-size: 28rpx;
|
||
color: #909399;
|
||
margin-top: 20rpx;
|
||
}
|
||
}
|
||
|
||
.task-card {
|
||
background-color: #ffffff;
|
||
border-radius: 16rpx;
|
||
padding: 30rpx;
|
||
margin-bottom: 20rpx;
|
||
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
|
||
|
||
// 任务标题和状态
|
||
.task-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: flex-start;
|
||
margin-bottom: 20rpx;
|
||
|
||
.task-title {
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
color: #333;
|
||
flex: 1;
|
||
margin-right: 20rpx;
|
||
}
|
||
|
||
.task-status {
|
||
padding: 5rpx 15rpx;
|
||
border-radius: 15rpx;
|
||
font-size: 24rpx;
|
||
|
||
&.pending {
|
||
background-color: #fdf6ec;
|
||
color: #e6a23c;
|
||
}
|
||
|
||
&.completed {
|
||
background-color: #f0f9ff;
|
||
color: #1989fa;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 任务信息
|
||
.task-info {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 10rpx;
|
||
margin-bottom: 20rpx;
|
||
|
||
.info-item {
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 24rpx;
|
||
color: #909399;
|
||
|
||
u-icon {
|
||
margin-right: 10rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 任务描述
|
||
.task-description {
|
||
font-size: 28rpx;
|
||
color: #606266;
|
||
line-height: 1.5;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
// 进度条
|
||
.progress-container {
|
||
margin-bottom: 20rpx;
|
||
|
||
.progress-info {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 10rpx;
|
||
font-size: 24rpx;
|
||
color: #909399;
|
||
}
|
||
}
|
||
|
||
// 附件信息
|
||
.attachments {
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 24rpx;
|
||
color: #909399;
|
||
margin-bottom: 20rpx;
|
||
|
||
u-icon {
|
||
margin-right: 10rpx;
|
||
}
|
||
}
|
||
|
||
// 操作按钮
|
||
.action-buttons {
|
||
display: flex;
|
||
gap: 20rpx;
|
||
|
||
button {
|
||
flex: 1;
|
||
height: 70rpx;
|
||
line-height: 70rpx;
|
||
font-size: 28rpx;
|
||
padding: 0;
|
||
margin: 0;
|
||
border: none;
|
||
border-radius: 35rpx;
|
||
|
||
&.upload-btn {
|
||
background-color: #1989fa;
|
||
color: #ffffff;
|
||
}
|
||
|
||
&.preview-btn {
|
||
background-color: #f0f9ff;
|
||
color: #1989fa;
|
||
border: 2rpx solid #1989fa;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 任务详情弹窗样式
|
||
.task-detail {
|
||
padding: 20rpx 0;
|
||
|
||
.detail-item {
|
||
margin-bottom: 30rpx;
|
||
|
||
&:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.detail-label {
|
||
font-size: 28rpx;
|
||
color: #606266;
|
||
margin-bottom: 10rpx;
|
||
display: block;
|
||
}
|
||
|
||
.detail-value {
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
display: block;
|
||
}
|
||
|
||
.detail-value.description {
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.detail-value.status {
|
||
display: inline-block;
|
||
padding: 5rpx 15rpx;
|
||
border-radius: 15rpx;
|
||
|
||
&.pending {
|
||
background-color: #fdf6ec;
|
||
color: #e6a23c;
|
||
}
|
||
|
||
&.completed {
|
||
background-color: #f0f9ff;
|
||
color: #1989fa;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style> |