subject_gxj/xj_project_app_2024_2_18/pages/preFlow/index.vue

<script setup>
	import {
		ref
	} from "vue";

	import {
		onLoad,
	} from "@dcloudio/uni-app";

	import {
		timeFormat
	} from "@/utils/timeFormatter.js"

	import {
		getPreFlowCount
	} from "@/api/work/preFlow.js"

	let pageForm = ref({
		beginDate: null,
		endDate: null,
	});

	// ====================================选择开始时间
	let beginDate = ref(null);
	let beginTimeShow = ref(false)

	function showBeginTimeChoose() {
		beginTimeShow.value = true
	}

	function beginTimeClose(e) {
		if (e) {
			let time = timeFormat(e.value)
			pageForm.value.beginDate = time
		}
		beginTimeShow.value = false
	}

	// ====================================选择结束时间
	let endDate = ref(null);
	let endTimeShow = ref(false)

	function showEndTimeChoose() {
		endTimeShow.value = true
	}

	function endTimeClose(e) {
		if (e) {
			let time = timeFormat(e.value)
			pageForm.value.endDate = time
		}
		endTimeShow.value = false
	}

	let preFlow = ref({});
	let getValue = function() {
		getPreFlowCount(pageForm.value).then(res => {
			preFlow.value = res.data;
		})
	}

	let goToPage = function(type) {
		uni.navigateTo({
			url: `/pages/preFlow/detail/index?beginDate=${pageForm.value.beginDate}&endDate=${pageForm.value.endDate}&type=${type}`
		})
	}

	onLoad(() => {
		let now = new Date();
		let year = now.getFullYear();
		beginDate.value = pageForm.value.beginDate = year + "-01-01"; // 开始时间
		endDate.value = pageForm.value.endDate = year + "-12-31"; // 结束时间

		getValue();
	})
</script>

<template>
	<view class="container">
		<page-title>前期手续办理情况</page-title>
    
		<view class="cards-list">
			<view class="card only-card">
				<!-- 计划开始日期 -->
				<view class="card-item first-card-item" @click="showBeginTimeChoose()">
					<view class="card-item-name">开始日期</view>
					<view class="card-item-description">
						<view v-if="pageForm.beginDate">{{pageForm.beginDate}}</view>
						<view v-else class="remind-text">请选择开始日期</view>
						<u-icon name="arrow-right" color="#9E9E9E" size="16" customStyle="margin-left:10rpx"></u-icon>
					</view>
				</view>

				<!-- 计划结束日期 -->
				<view class="card-item" @click="showEndTimeChoose()">
					<view class="card-item-name">结束日期</view>
					<view class="card-item-description">
						<view v-if="pageForm.endDate">{{pageForm.endDate}}</view>
						<view v-else class="remind-text">请选择结束日期</view>
						<u-icon name="arrow-right" color="#9E9E9E" size="16" customStyle="margin-left:10rpx"></u-icon>
					</view>
				</view>
			</view>

			<view class="card only-card">
				<view class="card-item first-card-item" @click="goToPage()">
					<view class="card-item-name">办理的总数</view>
					<view class="card-item-description">
						<view>{{preFlow.totalCount?? "--"}}个</view>
						<u-icon name="arrow-right" color="#9E9E9E" size="16" customStyle="margin-left:10rpx"></u-icon>
					</view>
				</view>

				<view class="card-item" @click="goToPage('1')">
					<view class="card-item-name">已办理总数</view>
					<view class="card-item-description">
						<view>{{preFlow.endCount?? "--"}}个</view>
						<u-icon name="arrow-right" color="#9E9E9E" size="16" customStyle="margin-left:10rpx"></u-icon>
					</view>
				</view>

				<view class="card-item" @click="goToPage('2')">
					<view class="card-item-name">延期办理的总数</view>
					<view class="card-item-description">
						<view>{{preFlow.delayCount?? "--"}}个</view>
						<u-icon name="arrow-right" color="#9E9E9E" size="16" customStyle="margin-left:10rpx"></u-icon>
					</view>
				</view>

				<view class="card-item" @click="goToPage()">
					<view class="card-item-name">延期的总天数</view>
					<view class="card-item-description">
						<view>{{preFlow.delayDays?? "--"}}天</view>
						<u-icon name="arrow-right" color="#9E9E9E" size="16" customStyle="margin-left:10rpx"></u-icon>
					</view>
				</view>

				<view class="card-item" @click="goToPage()">
					<view class="card-item-name">平均办理时间</view>
					<view class="card-item-description">
						<view>{{preFlow.avgDay?? "--"}}天</view>
						<u-icon name="arrow-right" color="#9E9E9E" size="16" customStyle="margin-left:10rpx"></u-icon>
					</view>
				</view>

				<view class="card-item" @click="goToPage('3')">
					<view class="card-item-name">正办理的总数</view>
					<view class="card-item-description">
						<view>{{preFlow.doingCount?? "--"}}个</view>
						<u-icon name="arrow-right" color="#9E9E9E" size="16" customStyle="margin-left:10rpx"></u-icon>
					</view>
				</view>

				<view class="card-item" @click="goToPage('4')">
					<view class="card-item-name">正办理已延期的总数</view>
					<view class="card-item-description">
						<view>{{preFlow.doingDelayCount?? "--"}}个</view>
						<u-icon name="arrow-right" color="#9E9E9E" size="16" customStyle="margin-left:10rpx"></u-icon>
					</view>
				</view>
			</view>
		</view>

		<!-- 开始时间 -->
		<u-datetime-picker :show="beginTimeShow" @confirm="beginTimeClose" @cancel="beginTimeClose" @close="beginTimeClose"
			v-model="beginDate" mode="date" closeOnClickOverlay></u-datetime-picker>
		<!-- 结束时间 -->
		<u-datetime-picker :show="endTimeShow" @confirm="endTimeClose" @cancel="endTimeClose" @close="endTimeClose"
			v-model="endDate" mode="date" closeOnClickOverlay></u-datetime-picker>
	</view>
</template>

<style lang="scss" scoped>
.card-item{
  display: flex;
  justify-content: space-between;
}

.card .card-item .card-item-description{
  font-size: 28rpx
}

.card .card-item .card-item-name{
  white-space: nowrap;
  line-height: 50rpx;
}
</style>