subject_gxj/xj_project_app/pages/countAnalysis/search/index.vue

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

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

	import {
		getHYFLlist
	} from "@/api/work/projectInfo.js"

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

	function backToBefore() {
		uni.navigateBack({})
	};

	let params = ref({
		beginDateStart: null,
		beginDateEnd: null,
		year: null,
		kind: null,
		indusKind: null,
		status: null,
		subName: null,
		isHide: "正常"
	})

	// 是否选年
	let chooseIsYear = ref(true);
	// 选择年
	let yearShow = ref(false);
	let defaultIndex = ref([0]);
	let yearColumns = ref([
		["2000", "2001", "2002", "2003", "2004", "2005", "2006", "2007", "2008", "2009", "2010", "2011", "2012",
			"2013",
			"2014", "2015", "2016", "2017", "2018", "2019", "2020", "2021", "2022", "2023", "2024", "2025", "2026",
			"2027", "2028", "2029", "2030", "2031", "2032", "2033"
		]
	])
	const yearShowChoose = function() {
		yearShow.value = true;
	}
	const yearClose = function(e) {
		if (e) params.value.year = e.value[0];
		yearShow.value = false;
	}

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

	function showBeginTimeChoose() {
		beginTimeShow.value = true
	}

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

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

	function showEndTimeChoose() {
		endTimeShow.value = true
	}

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

	// ====================================选择项目类型
	let kindList = ref([
		["请选择", "国家重点项目", "自治区重点项目", "十四五项目", "市级重点项目", "区县重点项目"]
	])
	let kindShow = ref(false)

	function showKindChoose() {
		kindShow.value = true
	}

	function kindClose(e) {
		if (e) params.value.kind = e.value[0];
		kindShow.value = false;
	}

	// ====================================选择行业分类
	let industKindOrgin = []
	let IndustKindList = ref([])
	let IndustKindShow = ref(false)

	function showIndustKindChoose() {
		IndustKindShow.value = true
	}

	function IndustKindClose(e) {
		if (e) params.value.indusKind = e.value[0];
		IndustKindShow.value = false
	}

	// ====================================选择行业状态
	let statusList = ref([
		["请选择", "暂存", "项目前期", "待开工", "施工中", "暂停施工", "已完工"]
	])
	let statusShow = ref(false)

	function showStatusChoose() {
		statusShow.value = true
	}

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

	// =====================================是否隐藏
	// 是否隐藏
	let hideColumns = ref([
		["含隐藏", "正常"]
	])
	let hideShow = ref(false);
	const showHideChoose = function() {
		hideShow.value = true;
	}
	const hideClose = function(e) {
		if (e) params.value.isHide = e.value[0];
		hideShow.value = false;
	}

	let returnPage = null

	function confirmParams() {
		let kindObj = {
			"请选择": "",
			"国家重点项目": 1,
			"自治区重点项目": 2,
			"十四五项目": 3,
			"市级重点项目": 4,
			"区县重点项目": 5
		}

		let statusObj = {
			"请选择": "",
			"暂存": "0",
			"项目前期": "1",
			"待开工": "6",
			"施工中": "7",
			"暂停施工": "8",
			//"年度完工": "9",
			"已完工": "A"
		}

		let paramsData = {
			"year": params.value.year,
			"beginDateStart": params.value.beginDateStart,
			"beginDateEnd": params.value.beginDateEnd,
			"kind": kindObj[params.value.kind],
			"indusKind": industKindOrgin.find(item => item.value === params.value.indusKind)?.key,
			"status": statusObj[params.value.status],
			"subName": params.value.subName,
			"containHide": params.value.isHide === "含隐藏"
		}

		uni.$emit(returnPage, paramsData);
		uni.navigateBack({});
	}

	onLoad(async (option) => {
		returnPage = option.page;

		if (option.page === "projectProcessSearch") {
			chooseIsYear.value = false;
			// 结束时间
			let now = new Date();
			let nowFormat = timeFormat(now);
			beginDateEnd.value = nowFormat;
			params.value.beginDateEnd = nowFormat;

			// 开始时间
			let start = now - 1000 * 60 * 60 * 24 * 30;
			let startFormat = timeFormat(start);
			beginDateStart.value = startFormat;
			params.value.beginDateStart = startFormat;
		} else {
			let now = new Date();
			params.value.year = now.getFullYear();
			defaultIndex.value = [params.value.year - 2000];
		}

		// 行业分类列表
		const res = await getHYFLlist();
		industKindOrgin = res.data.list;
		let titleList = res.data.list.map(item => item.value);
		titleList.unshift("请选择");
		IndustKindList.value = [titleList];
	})
</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" v-if="chooseIsYear">
					<view class="card-item-name">年度</view>
					<view class="card-item-description" @click="yearShowChoose()">
						<view v-if="params.year">{{params.year}}</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 first-card-item" v-if="!chooseIsYear">
					<view class="card-item-name">计划开始日期</view>
					<view class="card-item-description" @click="showBeginTimeChoose()">
						<view v-if="params.beginDateStart">{{params.beginDateStart}}</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" v-if="!chooseIsYear">
					<view class="card-item-name">计划结束日期</view>
					<view class="card-item-description" @click="showEndTimeChoose()">
						<view v-if="params.beginDateEnd">{{params.beginDateEnd}}</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>
					<view class="card-item-description" @click="showKindChoose()">
						<view v-if="params.kind">{{params.kind}}</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>
					<view class="card-item-description" @click="showIndustKindChoose()">
						<view v-if="params.indusKind">{{params.indusKind}}</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>
					<view class="card-item-description" @click="showStatusChoose()">
						<view v-if="params.status">{{params.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">
					<view class="card-item-name">是否隐藏</view>
					<view class="card-item-description" @click="showHideChoose()">
						<view v-if="params.isHide">{{params.isHide}}</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="params.subName" class="card-item-input" placeholder="请填写项目名称"
						placeholder-style="color: #D8D8D8" maxlength="20" />
				</view>
			</view>

			<view class="confirm-btn" @click="confirmParams()">确定</view>
		</view>

		<!-- 年度选择 -->
		<u-picker :show="yearShow" :defaultIndex="defaultIndex" :columns="yearColumns" @confirm="yearClose"
			@cancel="yearClose" @close="yearClose" closeOnClickOverlay></u-picker>
		<!-- 开始时间 -->
		<u-datetime-picker :show="beginTimeShow" @confirm="beginTimeClose" @cancel="beginTimeClose" @close="beginTimeClose"
			v-model="beginDateStart" mode="date" closeOnClickOverlay></u-datetime-picker>
		<!-- 结束时间 -->
		<u-datetime-picker :show="endTimeShow" @confirm="endTimeClose" @cancel="endTimeClose" @close="endTimeClose"
			v-model="beginDateEnd" mode="date" closeOnClickOverlay></u-datetime-picker>
		<!-- 项目类型 -->
		<u-picker :show="kindShow" :columns="kindList" @confirm="kindClose" @cancel="kindClose" @close="kindClose"
			closeOnClickOverlay></u-picker>
		<!-- 行业分类 -->
		<u-picker :show="IndustKindShow" :columns="IndustKindList" @confirm="IndustKindClose" @cancel="IndustKindClose"
			@close="IndustKindClose" closeOnClickOverlay></u-picker>
		<!-- 行业状态 -->
		<u-picker :show="statusShow" :columns="statusList" @confirm="statusClose" @cancel="statusClose" @close="statusClose"
			closeOnClickOverlay></u-picker>
		<!-- 是否隐藏 -->
		<u-picker :show="hideShow" :columns="hideColumns" @confirm="hideClose" @cancel="hideClose" @close="hideClose"
			closeOnClickOverlay></u-picker>
	</view>
</template>

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