mailbox-uniapp/pages/work/todo.vue

<template>
	<view class="header text-center">局长信箱即接即办系统</view>
	<view class="main">
		<fui-row class="tools text-center">
			<fui-col :span="12" :active="activeFlowName !== '全部'">
				<m-dropdown-menu :options="flowNameOptions" v-model:data="activeFlowName" @submit="getList">
					<text class="mr-20">全部</text>
					<fui-icon name="turningdown" color="#999" :size="30" />
				</m-dropdown-menu>
			</fui-col>
			<fui-col :span="12" @click="queryShow = true" :active="queryActive">
				<text class="mr-6">筛选</text>
				<fui-icon name="screen" :size="30" />
			</fui-col>
		</fui-row>
		<view class="body">
			<view class="card" v-for="item in (activeFlowName === '全部' ? todos : todos.filter(todo => todo.flowName === activeFlowName))" @tap="goAction(item)" >
				<view class="card-header flex between">
					<view class="flex gap-6 v-center">
						<view class="flex v-center" v-if="item.mailLevel">
							<view class="dot mr-4"></view>
							<text>{{ item.mailLevel }}</text>
						</view>
						<view class="tag" v-if="item.mailState">
							<text>{{ getDictLable(mailStates, item.mailState) }}</text>
						</view>
						<view style="width: 120px;" class="text-nowrap">{{ item.mailCategory }}</view>
					</view>
					<text>{{ item.mailTime }}</text>
				</view>
				<view class="card-body">
					<view class="flex gap v-center mb-10">
						<m-tag :type="getFlowTagType(item.flowName)">{{ item.flowName }}</m-tag>
						<text>{{ item.flowLimitedRemainingTime >= 0 ? '剩余': '超时' }}</text>
						<text :class="item.flowLimitedRemainingTime >= 300 ? 'success' : 'danger'">{{ formatTimeText(item.flowLimitedRemainingTime) }}</text>
					</view>
					<view class="card-content">
						<view class="flex between info">
							<view>
								<text class="mr-8">{{ item.contactName }}</text>
								<text>{{ item.contactPhone }}</text>
							</view>
							<text>{{ item.contactIdCard }}</text>
						</view>
						<view class="content mt-6 mb-8">{{ item.content }}</view>
					</view>
				</view>
			</view>
			
			<view class="mt-40" v-if="!todos.length">
				<fui-empty src="/static/images/component/empty/img_data_3x.png" title="暂无数据" class="mt-20"></fui-empty>
			</view>
		</view>
	</view>
	
	<query v-model="queryShow" v-model:data="queryParam" @submit="getList" v-model:active="queryActive" />
</template>

<script setup>
	import { onShow, onLoad } from '@dcloudio/uni-app'
	import { ref, onMounted } from "vue"
	import { todoList } from '@/api/work'
	import { appLogin, login } from '@/api/auth'
	import { getDictLable, formatTimeText, getFlowTagType } from '@/common/util'
	import { getDictOptions } from '@/common/dict'
	import store from '@/store'
	import { getToken, setToken } from '@/common/auth'
	
	let mailStates = ref([])
	
	onShow(async ()=>{
		// #ifdef APP-PLUS
		const event = plus.android.importClass('com.biutag.mailbox.Event')
		if (!store.state.requestUrl) {
			const requestUrl = event.getRequestUrl()
			store.commit('setRequestUrl', requestUrl)
		}
		if (!store.state.appCredential) {
			const appCredential = encodeURIComponent(event.getAppCredential())
			store.commit('setAppCredential', appCredential)
		}
		if (!store.state.userCredential) {
			const userCredential = encodeURIComponent(event.getUserCredential())
			store.commit('setUserCredential', userCredential)
		}
		if (!getToken() || !store.state.user.id) {
			const empNo = event.getEmpNo()
			const loginData = await appLogin({empNo})
			setToken(loginData.token)
			store.commit('setUser')
		}
		//	#endif
		// #ifdef H5
		if (!store.state.requestUrl) {
			store.commit('setRequestUrl', 'http://127.0.0.1:8080/api/app/forward')
		}
		if (!getToken() || !store.state.user.id) {
			const empNo = 'admin'
			const loginData = await appLogin({empNo})
			setToken(loginData.token)
			store.commit('setUser')
		}
		//	#endif
		getList()
		mailStates = getDictOptions('mail_state')
	})
	
	const queryShow = ref(false)
	
	function goAction(item) {
		uni.navigateTo({
			url: `action?mailId=${item.mailId}&workId=${item.id}`
		});
	}
	
	const todos = ref([])
	const queryParam = ref({
		size: 100,
		current: 1
	})
	const allFlowNames = ['待签收', '待下发', '信件退回', '联系群众', '接访群众', '核查办理', '待审批', '待呈报', '会签中', '待会签', '退回整改', '协查办理']
	const flowNameOptions = ref([])
	const activeFlowName = ref('全部')
	function getList() {
		uni.showLoading({
			title: '加载中'
		});
		todoList(queryParam.value).then(data => {
			todos.value = data.records
			todos.value.forEach(item => {
				if (item.flowLimitedRemainingTime > -3600 && item.flowLimitedRemainingTime < 3600 && store.state.isWorkingDay) {
					let timer = setInterval(() => {
						item.flowLimitedRemainingTime -= 1
						if (item.flowLimitedRemainingTime <= -3600 || item.flowLimitedRemainingTime >= 3600) {
							clearInterval(timer)
						}
					}, 1000)
				}
			})
			const flowNames = allFlowNames.filter(name => data.records.some(item => item.flowName.indexOf(name) > -1))
			flowNameOptions.value = flowNames.map(flowName => {
				return {
					text: flowName,
					count: data.records.filter(item => item.flowName === flowName).length
				}
			})
			flowNameOptions.value.unshift({
				text: '全部',
				count: data.records.length
			})
			uni.hideLoading();
		}).catch((e) => {
			uni.hideLoading();
		})
	}

	const queryActive = ref(false)
</script>

<style lang="scss" scoped>
	.header {
		padding-top: 40px;
		height: 54px;
		line-height: 54px;
		background-color: var(--primary-color);
		color: #fff;
		font-size: 19px;
	}
	.main {
		background-color: #F1F1F1;
		.tools {
			box-shadow: inset 0px 0 0px 1px #E5E5E5;
			background-color: #fff;
			font-size: 12px;
			.fui-col {
				height: 42px;
				line-height: 42px;
				&[active=true] {
					text {
						color: var(--primary-color);
						font-weight: 700;
					}
					.fui-icon {
						color: var(--primary-color) !important;
					}
				}
			}
		}
		.body {
			height: calc(100vh - 146px);
			overflow: auto;
		}
	}
	.card {
		margin: 12px;
		.card-header {
			height: 25px;
			line-height: 25px;
			background-color: var(--primary-color);
			color: #fff;
			padding: 0 12px;
			font-size: 9px;
			.tag {
				background-color: #ACB5EB;
				color: var(--primary-color);
				height: 13px;
				line-height: 13px;
				padding: 0 4px;
				border-radius: 2px;
			}
		}
		.card-body {
			background-color: #fff;
			padding: 10px 12px;
			font-size: 10px;
			color: #999;
			.card-content {
				max-height: 200px;
				overflow: hidden;
				border-top: 1px solid #E6EAFC;
				.info {
					padding: 6px 0;
				}
				.content {
					color: #666;
				}
			}
		}
	}
	.dot {
		width: 9px;
		height: 9px;
		border-radius: 50%;
		background-color: #6CFF5E;
	}
</style>