bwadmin/FileCollect
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

home1022

Browse Source
This commit is contained in:
bwstudio
2025-10-22 08:19:00 +08:00
parent 467b04e5b0
commit 97fbfe08d7
6040 changed files with 529099 additions and 9685 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/task-management/task-management.vue
+483
View File
@@ -0,0 +1,483 @@
<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>