任务中心迁移完成
This commit is contained in:
砂糖
375
pages/workbench/task/components/TaskList.vue
Normal file
375
pages/workbench/task/components/TaskList.vue
Normal file
@@ -0,0 +1,375 @@
|
||||
<template>
|
||||
<view class="task-list-container">
|
||||
<!-- 任务列表 -->
|
||||
<view class="task-list">
|
||||
<uni-swipe-action>
|
||||
<uni-swipe-action-item
|
||||
v-for="(task, index) in taskList"
|
||||
:key="task.taskId"
|
||||
:right-options="getSwipeOptions(task)"
|
||||
@click="handleSwipeClick($event, index)"
|
||||
>
|
||||
<view
|
||||
class="task-item"
|
||||
@click="handleTaskClick(task)"
|
||||
>
|
||||
<!-- 任务完成checkbox -->
|
||||
<view v-if="config.showCheckbox && task.status === 0" class="task-checkbox">
|
||||
<view v-if="task.state === 0" class="checkbox-container" @click.stop="handleTaskComplete(task)">
|
||||
<view
|
||||
class="custom-checkbox"
|
||||
:class="{ 'checked': checkboxStates[task.taskId] }"
|
||||
>
|
||||
<uni-icons
|
||||
v-if="checkboxStates[task.taskId]"
|
||||
type="checkmarkempty"
|
||||
size="16"
|
||||
color="#fff"
|
||||
></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
<view v-else-if="task.state === 1" class="checkbox-container">
|
||||
<uni-icons type="checkmarkempty" size="20" color="#999"></uni-icons>
|
||||
</view>
|
||||
<view v-else-if="task.state === 2" class="checkbox-container">
|
||||
<uni-icons type="checkmarkempty" size="20" color="#52c41a"></uni-icons>
|
||||
</view>
|
||||
<view v-else class="checkbox-container">
|
||||
<view class="custom-checkbox disabled">
|
||||
<uni-icons type="checkmarkempty" size="16" color="#999"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 任务内容 -->
|
||||
<view class="task-content">
|
||||
<view class="task-title">{{ task.taskTitle || '未命名任务' }}</view>
|
||||
<view class="task-status" :class="getStatusClass(task.state)">
|
||||
{{ getStatusText(task.state) }}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 置顶标识 -->
|
||||
<view v-if="task.ownRank === 1" class="top-badge">
|
||||
<uni-icons type="arrow-up" size="12" color="#ff9500"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
</uni-swipe-action-item>
|
||||
</uni-swipe-action>
|
||||
</view>
|
||||
|
||||
<!-- 空状态 -->
|
||||
<view v-if="taskList.length === 0 && !loading" class="empty-state">
|
||||
<u-empty :text="config.emptyText || '暂无任务'" mode="list"></u-empty>
|
||||
</view>
|
||||
|
||||
<!-- 加载更多 -->
|
||||
<u-load-more
|
||||
:status="loadMoreStatus"
|
||||
@loadmore="$emit('loadMore')"
|
||||
></u-load-more>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'TaskList',
|
||||
props: {
|
||||
// 任务列表数据
|
||||
taskList: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
// 加载状态
|
||||
loading: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 加载更多状态
|
||||
loadMoreStatus: {
|
||||
type: String,
|
||||
default: 'more' // more, loading, noMore
|
||||
},
|
||||
// 配置对象
|
||||
config: {
|
||||
type: Object,
|
||||
default: () => ({
|
||||
showCheckbox: true, // 是否显示checkbox
|
||||
canComplete: true, // 是否可以完成任务
|
||||
canDelete: true, // 是否可以删除任务
|
||||
canTop: true, // 是否可以置顶任务
|
||||
emptyText: '暂无任务', // 空状态文本
|
||||
detailPage: '/pages/workbench/task/reportTaskDetail' // 详情页面路径
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
checkboxStates: {} // 存储checkbox的状态
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
||||
// 获取左划操作选项
|
||||
getSwipeOptions(task) {
|
||||
const options = []
|
||||
|
||||
// 置顶功能
|
||||
if (this.config.canTop) {
|
||||
if (task.ownRank === 1) {
|
||||
// 已置顶，显示取消置顶
|
||||
options.push({
|
||||
text: '取消置顶',
|
||||
style: {
|
||||
backgroundColor: '#999',
|
||||
color: '#fff'
|
||||
}
|
||||
})
|
||||
} else {
|
||||
// 未置顶，显示置顶
|
||||
options.push({
|
||||
text: '置顶',
|
||||
style: {
|
||||
backgroundColor: '#ff9500',
|
||||
color: '#fff'
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// 删除功能
|
||||
if (this.config.canDelete) {
|
||||
options.push({
|
||||
text: '删除',
|
||||
style: {
|
||||
backgroundColor: '#ff4757',
|
||||
color: '#fff'
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
return options
|
||||
},
|
||||
|
||||
// 处理左划操作点击
|
||||
handleSwipeClick(e, index) {
|
||||
const { content, position } = e
|
||||
|
||||
if (!content) {
|
||||
console.error('Invalid swipe event:', e)
|
||||
return
|
||||
}
|
||||
|
||||
const task = this.taskList[index]
|
||||
if (!task) {
|
||||
console.error('Task not found at index:', index)
|
||||
return
|
||||
}
|
||||
|
||||
if (content.text === '置顶') {
|
||||
this.$emit('setTaskTop', task, 1)
|
||||
} else if (content.text === '取消置顶') {
|
||||
this.$emit('setTaskTop', task, 0)
|
||||
} else if (content.text === '删除') {
|
||||
this.$emit('deleteTask', task)
|
||||
}
|
||||
},
|
||||
|
||||
// 处理任务完成
|
||||
handleTaskComplete(task) {
|
||||
if (!this.config.canComplete) return
|
||||
|
||||
console.log('handleTaskComplete called, task:', task)
|
||||
console.log('task.status:', task.status, 'task.state:', task.state)
|
||||
|
||||
// 只有单任务（status为0）且状态为0（进行中）的任务才能完成
|
||||
if (task.status !== 0 || task.state !== 0) {
|
||||
console.log('Task cannot be completed, status:', task.status, 'state:', task.state)
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '该任务当前状态无法完成',
|
||||
showCancel: false
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
// 先设置checkbox为选中状态
|
||||
this.$set(this.checkboxStates, task.taskId, true)
|
||||
|
||||
console.log('Showing confirmation modal')
|
||||
uni.showModal({
|
||||
title: '确认完成',
|
||||
content: `确定要将任务"${task.taskTitle}"标记为完成吗？`,
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
this.$emit('completeTask', task)
|
||||
// 清除checkbox状态
|
||||
this.$set(this.checkboxStates, task.taskId, false)
|
||||
} else {
|
||||
// 用户取消，重置checkbox状态为false
|
||||
console.log('用户取消，重置checkbox状态')
|
||||
this.$set(this.checkboxStates, task.taskId, false)
|
||||
console.log('checkbox状态已重置:', this.checkboxStates[task.taskId])
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 跳转到任务详情页面
|
||||
handleTaskClick(task) {
|
||||
this.$emit('taskClick', task)
|
||||
},
|
||||
|
||||
// 获取状态文本
|
||||
getStatusText(state) {
|
||||
const statusMap = {
|
||||
15: '申请延期',
|
||||
0: '进行中',
|
||||
1: '完成等待评分',
|
||||
2: '完成'
|
||||
}
|
||||
return statusMap[state] || '未知状态'
|
||||
},
|
||||
|
||||
// 获取状态样式类
|
||||
getStatusClass(state) {
|
||||
const classMap = {
|
||||
15: 'status-pending',
|
||||
0: 'status-processing',
|
||||
1: 'status-waiting',
|
||||
2: 'status-completed'
|
||||
}
|
||||
return classMap[state] || 'status-unknown'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.task-list-container {
|
||||
min-height: 100vh;
|
||||
background-color: #f5f5f5;
|
||||
padding-bottom: 120rpx;
|
||||
}
|
||||
|
||||
.task-list {
|
||||
padding: 20rpx;
|
||||
}
|
||||
|
||||
.task-item {
|
||||
box-sizing: border-box;
|
||||
padding: 24rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.task-checkbox {
|
||||
margin-right: 20rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.checkbox-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.custom-checkbox {
|
||||
width: 36rpx;
|
||||
height: 36rpx;
|
||||
border: 2rpx solid #ddd;
|
||||
border-radius: 6rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #fff;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&.checked {
|
||||
background-color: #ff9500;
|
||||
border-color: #ff9500;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
background-color: #f5f5f5;
|
||||
border-color: #ddd;
|
||||
}
|
||||
}
|
||||
|
||||
.task-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.task-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
flex: 1;
|
||||
margin-right: 20rpx;
|
||||
line-height: 1.4;
|
||||
height: 88rpx;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.task-status {
|
||||
padding: 8rpx 16rpx;
|
||||
border-radius: 20rpx;
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
box-shadow: 0 1rpx 3rpx rgba(0, 0, 0, 0.1);
|
||||
|
||||
&.status-pending {
|
||||
background-color: #fff2e8;
|
||||
color: #fa8c16;
|
||||
}
|
||||
|
||||
&.status-processing {
|
||||
background-color: #e6f7ff;
|
||||
color: #1890ff;
|
||||
}
|
||||
|
||||
&.status-waiting {
|
||||
background-color: #fff7e6;
|
||||
color: #fa8c16;
|
||||
}
|
||||
|
||||
&.status-completed {
|
||||
background-color: #f6ffed;
|
||||
color: #52c41a;
|
||||
}
|
||||
}
|
||||
|
||||
.top-badge {
|
||||
position: absolute;
|
||||
top: 8rpx;
|
||||
right: 8rpx;
|
||||
background-color: #fff8e6;
|
||||
border: 1rpx solid #ff9500;
|
||||
border-radius: 50%;
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 2rpx 6rpx rgba(255, 149, 0, 0.2);
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
padding: 100rpx 20rpx;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user