ygoa_miniapp/pages/mine/waitWork/waitWork.vue

<template>
	<view class="container">
		<!-- 待办任务与流程统计 -->
		<view class="stats-container">
			<view class="stat-item" @click="goToTodos">
				<text class="ygoa-icon icon-waitWork2" style="font-size: 120rpx;"></text>
				<text class="stat-label">
					待办任务
					<text class="stat-value">{{ todoCount }}</text>
				</text>
			</view>
			<view class="divider"></view>
			<view class="stat-item" @click="goToProcesses">
				<text class="ygoa-icon icon-waitProcess" style="font-size: 120rpx;"></text>
				<text class="stat-label">
					发布流程
					<text class="stat-value">{{ processCount }}</text>
				</text>
			</view>
		</view>

		<!-- 待办任务列表 -->
		<view class="tasks-section">
			<view class="section-header">
				<text class="section-title">任务列表</text>
			</view>
			<scroll-view class="task-list" scroll-y>
				<view class="task-item" v-for="(todo, index) in todos" :key="index" @click="showTaskDetail(todo)">
					<view>
						<text class="ygoa-icon icon-waitWork2"></text>
						<text class="task-content">{{ todo.content }}</text>
					</view>

					<text class="task-detail-icon">›</text>
				</view>
			</scroll-view>
		</view>
		<!-- 流程列表 -->
		<view class="processes-section">
			<view class="section-header">
				<text class="section-title">流程列表</text>
			</view>
			<scroll-view class="process-list" scroll-y>
				<view class="process-item" v-for="(process, index) in processes" :key="index"
					@click="showProcessDetail(process)">
					<view>
						<text class="ygoa-icon icon-waitProcess"></text>
						<text class="process-content">{{ process.content }}</text>
					</view>
					<text class="process-detail-icon">›</text>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script setup>
import {
	ref,
	computed,
	reactive,
} from 'vue';


import $tabs from "@/plugins/tab.js"
// 定义待办任务数据
const todos = reactive([{
	id: 1,
	content: '完成报告1',
	detail: '完成11月5日的今日报告'
},
{
	id: 2,
	content: '参加会议2',
	detail: '参加11月5日下午5点的会议'
},
{
	id: 3,
	content: '完成报告3',
	detail: '完成11月5日的今日报告'
},
{
	id: 4,
	content: '参加会议4',
	detail: '参加11月5日下午5点的会议'
},
]);
// 定义流程数据
const processes = reactive([{
	id: 1,
	content: '审批流程',
	detail: '来自张三的请假申请'
},
{
	id: 2,
	content: '财务流程',
	detail: '来自张三的报销申请'
},
]);
// 计算待办任务数量
const todoCount = computed(() => todos.length);
// 计算流程数量
const processCount = computed(() => processes.length);

// 显示待办任务详情
function showTaskDetail(todo) {
	uni.showModal({
		title: '任务详情',
		content: todo.detail,
		cancelText: '完成',
		success: function (res) {
			if (res.confirm) {
				console.log('用户点击确定');
			} else if (res.cancel) {
				console.log('用户点击完成', todo);
				// 找到要移除的对象的索引
				let index = todos.findIndex(item => item.id === todo.id);
				// 如果找到了，使用splice移除它
				if (index > -1) {
					todos.splice(index, 1);
				}

			}
		}

	});
}
// 显示流程详情
function showProcessDetail(process) {
	uni.showModal({
		title: '流程详情',
		content: process.detail,
		showCancel: false
	});
}

function goToTodos() {
	// 跳转到待办任务列表详情页面
	$tabs.switchTab('/pages/process/index');
}

function goToProcesses() {
	// 跳转到流程申请详情页面
	$tabs.switchTab('/pages/work/index');
}
</script>

<style scoped>
	@import "@/static/font/ygoa/iconfont.css";
	
	.ygoa-icon{
		font-size: 30rpx;
		margin-right: 30rpx;
	}
.container {
	display: flex;
	flex-direction: column;
	align-items: center;
	background-color: #f5f5f5;
	height: 100%;
}


.stats-container {
	display: flex;
	justify-content: space-around;
	width: 100%;
	margin-top: 20px;
	background-color: white;
	border-radius: 10px;
	padding: 10px 0;
}

.stat-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 50%;
}

.stat-value {
	font-size: 24px;
	font-weight: bold;
	color: #333;
}

.stat-label {
	font-size: 16px;
	color: #666;
}

.divider {
	width: 1px;
	height: 40px;
	background-color: #e5e5e5;
}

.tasks-section,
.processes-section {
	width: 100%;
	margin-top: 20px;
}

.section-header {
	padding: 10px;
	background-color: #f8f8f8;
	border-bottom: 1px solid #e5e5e5;
}

.section-title {
	font-size: 20px;
	font-weight: bold;
}

.task-list,
.process-list {
	height: 200px;
	background-color: white;
}

.task-item,
.process-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 15px;

}
</style>