subject_gxj/xj_project_app/pages/monthly/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="year-month" closeOnClickOverlay></u-datetime-picker>
		<!-- 结束时间 -->
		<u-datetime-picker :show="endTimeShow" @confirm="endTimeClose" @cancel="endTimeClose" @close="endTimeClose"
			v-model="endMonth" mode="year-month" 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)
			time = time.substring(0, 7)
			pageForm.value.startMonth = 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)
			time = time.substring(0, 7)
			pageForm.value.endMonth = time
		}
		endTimeShow.value = false
	}


	// ====================================选择录入状态
	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() {
		const params = Object.assign({}, pageForm.value)
		let start01 = params.startMonth.replace('/', '-')
		let start02 = start01.replace('/', '-') + '-01'
		params.startMonth = start02

		let end01 = params.endMonth.replace('/', '-')
		let end02 = end01.replace('/', '-') + '-01'
		params.endMonth = end02

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

		let url = "/pages/monthly/list/index?"

		for (let i in params) {
			let item = null
			if (params[i]) {
				item = `${i}=${params[i]}&`
			} else {
				item = `${i}=&`
			}

			url = url += item
		}

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

		uni.navigateTo({
			url
		})
	}

	onLoad(async () => {
		// 结束时间
		let now = new Date();
		let year = now.getFullYear();
		let nowmonth = now.getMonth()
		let lastTime = new Date(now - 1000 * 60 * 60 * 24 * 30)
		let lastYear = lastTime.getFullYear()
		let lastMonth = lastTime.getMonth()
		if (nowmonth > 8) {
			nowmonth = nowmonth + 1
		} else {
			nowmonth = `0${nowmonth +1}`
		}
		if (lastMonth > 8) {
			lastMonth = lastMonth + 1
		} else {
			lastMonth = `0${lastMonth +1}`
		}
		// let nowFormat = timeFormat(now).substring(0, 7)
		let nowFormat = year + `/${nowmonth}`;
		endMonth.value = nowFormat
		pageForm.value.endMonth = nowFormat

		// 开始时间
		// let start = now - 1000 * 60 * 60 * 24 * 120
		// let startFormat = timeFormat(start).substring(0, 7)
		let startFormat = lastYear + `/${lastMonth}`;
		startMonth.value = startFormat
		pageForm.value.startMonth = startFormat

		getCondition()
	})
</script>

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