cxc-szcx-uniapp/pages/task/todotask.vue

<template>
	<view :class="[{'gray':store.isgray==1}]">
		<view class="nav"></view>
		<view class="placeholder"></view>
		<view class="content">
			<extendCom title="我的任务" img="process" :list="todoArr" :total="todoTotal" type="0"></extendCom>
			<extendCom title="历史任务" img="done" :list="doneArr" :total="doneTotal" type="1"></extendCom>
			<extendCom title="本人发起" img="self" :list="selfArr" :total="selfTotal" type="2"></extendCom>
		</view>
	</view>
</template>

<script setup>
	const res = wx.getSystemInfoSync();
	const statusHeight = res.statusBarHeight; //状态栏高度
	const cusnavbarheight = (statusHeight + 44) + "px";
	import extendCom from '../../bpm/extendCom.vue';
	import {
		ref
	} from 'vue';
	import {
		taskListApi,
		myApplyProcessListApi,
		taskHistoryListApi
	} from '@/api/api.js';
	import {
		onShow,
		onReachBottom,
		onPullDownRefresh
	} from '@dcloudio/uni-app';
	import {
		useStore
	} from '@/store'
	const store = useStore()
	onShow(() => {
		initArr()
		taskList()
		taskHistoryList()
		myApplyProcessList()
		uni.removeTabBarBadge({ // 移除角标
			index: '1',
		});
	})
	const todoArr = ref([])
	const todoTotal = ref(0)
	/**待办事项*/
	const taskList = () => {
		taskListApi({
			pageNo: 1,
			pageSize: 4,
			_t: new Date().getTime()
		}).then((res) => {
			if (res?.success) {
				if (res?.result?.total > 4) {
					taskListApi({
						pageNo: 1,
						pageSize: res?.result?.total,
						_t: new Date().getTime()
					}).then((res1) => {
						console.log('---', res1)
						if (res1?.success) {
							todoArr.value = [...todoArr.value, ...handleData(res1?.result?.records)]
							todoTotal.value = res1?.result?.total
						}
					}).catch((err) => {
						console.log('err', err);
					})

				} else {
					todoArr.value = [...todoArr.value, ...handleData(res?.result?.records)]
					todoTotal.value = res?.result?.total
				}
			}
		}).catch((err) => {
			console.log(err);
		})

	}
	const doneArr = ref([])
	const doneTotal = ref(0)
	/**已办事项*/
	const taskHistoryList = () => {
		taskHistoryListApi().then((res) => {
			if (res.success) {
				if (res.result.total > 4) {
					taskHistoryListApi({
						pageNo: 1,
						pageSize: res.result.total,
						_t: new Date().getTime()
					}).then((res1) => {
						if (res1.success) {
							doneArr.value = [...doneArr.value, ...handleData(res1.result.records)]
							doneTotal.value = res1.result.total
						}
					}).catch((err) => {
						console.log(err);
					})

				} else {
					doneArr.value = [...doneArr.value, ...handleData(res.result.records)]
					doneTotal.value = res.result.total
				}
			}
		}).catch((err) => {
			console.log(err);
		})
	}
	const selfArr = ref([])
	const selfTotal = ref(0)
	/**本人发起*/
	const myApplyProcessList = () => {
		myApplyProcessListApi().then((res) => {
			if (res.success) {
				if (res.result.total > 4) {
					myApplyProcessListApi({
						pageNo: 1,
						pageSize: res.result.total,
						_t: new Date().getTime()
					}).then((res1) => {
						if (res1.success) {
							selfArr.value = [...selfArr.value, ...handleData(res1.result.records)]
							selfTotal.value = res1.result.total
						}
					}).catch((err) => {
						console.log(err);
					})

				} else {

					selfArr.value = [...selfArr.value, ...handleData(res.result.records)]
					selfTotal.value = res.result.total
				}
			}
		}).catch((err) => {
			console.log(err);
		})
	}
	const handleData = (titlearr) => {
		let titleArr = titlearr.length ? titlearr.map(item => item.processDefinitionName || item
			.prcocessDefinitionName) : []
		let res = titleArr.reduce((obj, title) => {
			if (title in obj) {
				obj[title]++
			} else {
				obj[title] = 1
			}
			return obj
		}, {})
		return Object.entries(res).map(([k, v]) => ({
			title: k,
			num: v
		}))
	}

	const initArr = () => {
		todoArr.value = []
		selfArr.value = []
		doneArr.value = []
		todoTotal.value = 0
		doneTotal.value = 0
		selfTotal.value = 0
	}

	let loading = false
	onPullDownRefresh(() => {
		loading = false
		initArr()
		taskList()
		taskHistoryList()
		myApplyProcessList()
		uni.stopPullDownRefresh()
	})
</script>

<style lang="scss" scoped>
	.drag {
		background: #FFFFFF;
		box-shadow: 0rpx 2rpx 4rpx 0rpx rgba(0, 0, 0, 0.5);
		border-radius: 16rpx;
		margin: 24rpx 30rpx 0 30rpx;

		.title {
			font-size: 28rpx;
			color: #333333;
			padding: 30rpx 0 0 30rpx;
		}
	}

	.inner {
		image {
			width: 98rpx;
			height: 98rpx;
			background-color: #efefef;
		}

		.text {
			font-size: 28rpx;
			color: #333333;
			margin-top: 20rpx;
		}
	}

	.placeholder {
		height: v-bind(cusnavbarheight);
	}

	.nav {
		width: calc(100% - 60rpx);
		padding: 0 30rpx;
		height: v-bind(cusnavbarheight);

		font-size: 24rpx;
		color: #FFFFFF;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 99;
		background-image: url('../../static/my/navbg.png');
		background-repeat: no-repeat;
		background-size: 750rpx 458rpx;
	}

	.content {
		padding: 0 30rpx 20rpx 30rpx;
	}

	.list {
		margin-bottom: 24rpx;

		.item {
			background: #FFFFFF;
			box-shadow: 0rpx 2rpx 4rpx 0rpx rgba(0, 0, 0, 0.5);
			border-radius: 16rpx;
			padding: 30rpx 0;
			margin-top: 24rpx;

			.title {
				font-size: 28rpx;
				color: #333333;
				padding-left: 30rpx;
			}
		}

		image {
			width: 98rpx;
			height: 98rpx;
		}

		.info_box {
			flex-wrap: wrap;

			.info {
				margin-top: 40rpx;
				width: 25%;

				.text {
					font-size: 28rpx;
					color: #333333;
					margin-top: 20rpx;
				}
			}
		}
	}
</style>