mailbox-uniapp/pages/work/done.vue

<template>
	<view class="header text-center">局长信箱即接即办系统</view>
	<view class="main">
		<fui-row class="tools text-center">
			<fui-col :span="12">
				<m-dropdown-menu :options="flowNameOptions" v-model:data="activeFlowName" @submit="getList">
					<span class="mr-20">全部</span>
					<fui-icon name="turningdown" color="#999" :size="30" />
				</m-dropdown-menu>
			</fui-col>
			<fui-col :span="12" @click="queryShow = true">
				<span class="mr-6">筛选</span>
				<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 > 600 ? '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" />
</template>

<script setup>
	import { onShow } from '@dcloudio/uni-app'
	import { ref, onMounted } from "vue"
	import { doneList } 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(()=>{
		getList()
		mailStates = getDictOptions('mail_state')
	})
				
	const queryShow = ref(false)
	
	function goAction(item) {
		uni.navigateTo({
			url: `action?mailId=${item.mailId}`
		});
	}
	
	const todos = ref([])
	const queryParam = ref({
		size: 100,
		current: 1
	})
	const flowNameOptions = ref([])
	const activeFlowName = ref('全部')
	function getList() {
		uni.showLoading({
			title: '加载中'
		});
		doneList(queryParam.value).then(data => {
			todos.value = data.records
			const flowNames = Array.from(new Set(data.records.map(item => item.flowName)))
			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) => {
			console.error(e)
			uni.hideLoading();
		})
	}
	
</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;
			}
		}
		.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 {
				border-top: 1px solid #E6EAFC;
				.info {
					padding: 6px 0;
				}
				
				.content {
					color: #666;
				}
			}
		}
	}
	.dot {
		width: 9px;
		height: 9px;
		border-radius: 50%;
		background-color: #6CFF5E;
	}
</style>