subject_gxj/xj_project_app/pages/weekly/index.vue

<template>
	<view class="container">
		<page-title>周报查询</page-title>

		<view class="cards-list">
			<view class="card only-card">
				<!-- 开始周 -->
				<view class="card-item first-card-item">
					<view class="card-item-name">开始周</view>
					<view class="card-item-description" @click="showBeginTimeChoose()">
						<view>{{pageForm.startMonth}}</view>
						<u-icon name="arrow-right" color="#343437" size="16" customStyle="margin-left:10rpx"></u-icon>
					</view>
				</view>

				<!-- 结束周 -->
				<view class="card-item">
					<view class="card-item-name">结束周</view>
					<view class="card-item-description" @click="showEndTimeChoose()">
						<view>{{pageForm.endMonth}}</view>
						<u-icon name="arrow-right" color="#343437" size="16" customStyle="margin-left:10rpx"></u-icon>
					</view>
				</view>

				<!-- 录入状态 -->
				<view class="card-item" @click="statusShowChoose()">
					<view class="card-item-name">录入状态</view>
					<view class="card-item-description">
						<view v-if="pageForm.status">{{pageForm.status}}</view>
						<view v-else class="remind-text">请选择状态</view>
						<u-icon name="arrow-right" color="#343437" size="16" customStyle="margin-left:10rpx"></u-icon>
					</view>
				</view>

				<!-- 行业分类 -->
				<view class="card-item" @click="hyflShowChoose()">
					<view class="card-item-name">行业分类</view>
					<view class="card-item-description">
						<view v-if="pageForm.hyfl">{{pageForm.hyfl}}</view>
						<view v-else class="remind-text">请选择分类</view>
						<u-icon name="arrow-right" color="#343437" size="16" customStyle="margin-left:10rpx"></u-icon>
					</view>
				</view>

				<view class="card-item">
					<view class="card-item-name">项目名称</view>
					<input v-model="pageForm.subName" class="card-item-input" placeholder="请填写项目名称"
						placeholder-style="color: #D8D8D8" maxlength="20" />
				</view>
			</view>

			<view class="confirm-btn" @click="confirmParams()">查询</view>
		</view>

		<!-- 开始时间 -->
		<u-datetime-picker :show="beginTimeShow" @confirm="beginTimeClose" @cancel="beginTimeClose" @close="beginTimeClose"
			v-model="startMonth" mode="date" closeOnClickOverlay></u-datetime-picker>
		<!-- 结束时间 -->
		<u-datetime-picker :show="endTimeShow" @confirm="endTimeClose" @cancel="endTimeClose" @close="endTimeClose"
			v-model="endMonth" mode="date" closeOnClickOverlay></u-datetime-picker>
		<!-- 录入状态选择 -->
		<u-picker :show="statusShow" :columns="statusColumns" @confirm="statusClose" @cancel="statusClose"
			@close="statusClose" closeOnClickOverlay></u-picker>
		<!-- 行业分类选择 -->
		<u-picker :show="hyflShow" :columns="hyflColumns" @confirm="hyflClose" @cancel="hyflClose" @close="hyflClose"
			closeOnClickOverlay></u-picker>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'

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

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

	import {
		getWeeklyCondition
	} from "@/api/work/weeklyAndMonthly.js"

	function getCondition() {
		getWeeklyCondition().then(res => {
			hyflOrginal = res.data?.HYFL
			let hyflTemp = res.data?.HYFL.map(item => item.title)
			hyflTemp.unshift('请选择')
			hyflColumns.value.push(hyflTemp)
		})
	}

	let pageForm = ref({
		startMonth: null,
		endMonth: null,
		status: "所有",
		hyfl: null,
		subName: null,
	})

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

	function showBeginTimeChoose() {
		beginTimeShow.value = true
	}

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

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

	function showEndTimeChoose() {
		endTimeShow.value = true
	}

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

	// 改变选择时间格式（周一至周天格式）
	function getMondayToSunday(date) {
		const chooseDay = new Date(date); // 选中的时间
		let nowTime = chooseDay.getTime(); // 选中的时间(时间戳化)
		let week = chooseDay.getDay() || 7; // 选中的是星期几
		let oneDayTime = 24 * 60 * 60 * 1000; // 一天的时间

		let mondayTime = nowTime - (week - 1) * oneDayTime; //周一
		let sundayTime = nowTime + (7 - week) * oneDayTime; //周日

		let mondayText = timeFormat(mondayTime); //周一文字化
		let sundayText = timeFormat(sundayTime); //周日文字化

		let mon1 = mondayText.replace("/", "-")
		let mon2 = mon1.replace("/", "-")

		let sun1 = sundayText.replace("/", "-")
		let sun2 = sun1.replace("/", "-")

		return mon2 + "至" + sun2
	}

	// ====================================选择录入状态
	let statusShow = ref(false)

	let statusColumns = ref([
		["所有", "已录入", "未录入"]
	])

	function statusShowChoose() {
		statusShow.value = true;
	}

	function statusClose(e) {
		if (e) pageForm.value.status = e.value[0];
		statusShow.value = false
	}

	// ====================================选择行业分类
	let hyflOrginal = []
	let hyflShow = ref(false)

	let hyflColumns = ref([])

	function hyflShowChoose() {
		hyflShow.value = true;
	}

	function hyflClose(e) {
		if (e) pageForm.value.hyfl = e.value[0];
		hyflShow.value = false
	}

	// 确认选择
	function confirmParams() {
		let sendParams = Object.assign({}, pageForm.value)

		sendParams.startMonth = sendParams.startMonth.substr(0, 10)
		sendParams.endMonth = sendParams.endMonth.substr(0, 10)
		let statusOrginal = {
			"所有": "0",
			"已录入": "1",
			"未录入": "2"
		}
		sendParams.status = statusOrginal[sendParams.status] ? statusOrginal[sendParams.status] : null
		let item = hyflOrginal.find(item => item.title === sendParams.hyfl)
		sendParams.hyfl = item ? item.id : null

		let url = "/pages/weekly/list/index?"
		for (let i in sendParams) {
			let item = null
			if (sendParams[i]) {
				item = `${i}=${sendParams[i]}&`
			} else {
				item = `${i}=&`
			}

			url = url += item
		}
		url = url.substr(0, url.length - 1);

		uni.navigateTo({
			url
		})
	}

	onLoad(() => {
		// 结束时间
		let now = new Date()
		let nowFormat = timeFormat(now)
		endMonth.value = nowFormat
		pageForm.value.endMonth = getMondayToSunday(nowFormat)

		// 开始时间
		let start = now - 1000 * 60 * 60 * 24 * 14 
		let startFormat = timeFormat(start)
		startMonth.value = startFormat
		pageForm.value.startMonth = getMondayToSunday(startFormat)

		getCondition()
	})
</script>

<style lang="scss" scoped>
</style>