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

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

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

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

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

	import {
		getXMXZlist,
	} from "@/api/home.js"

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

	let params = ref({
		beginDateStart: null,
		beginDateEnd: null,
		status: null,
		problemContent: null,
		subName: null,
		subjectId: null,
		indusKind: null,
	})

	// ====================================选择开始时间
	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 jsddFull = [];
	let jsddColumns = ref([]);
	const getJSDD = function() {
		getJSDDlist().then(res => {
			jsddFull = res.data.list;
			jsddFull.push({
				key: null,
				value: "所有地区"
			});
			jsddColumns.value = [res.data.list.map(item => item.value)];
			jsddColumns.value[0].unshift("所有地区");
		})
	};
	let jsddShow = ref(false);
	const jsddShowChoose = function() {
		jsddShow.value = true;
	}
	const jsddClose = function(e) {
		if (e) params.value.subjectId = e.value[0];
		jsddShow.value = false;
	}

	// ====================================选择行业分类
	let hyflFull = [];
	let hyflColumns = ref([]);
	const getHYFL = function() {
		getHYFLlist().then(res => {
			hyflFull = res.data.list;
			hyflFull.push({
				key: null,
				value: "所有分类"
			});
			hyflColumns.value = [res.data.list.map(item => item.value)];
			hyflColumns.value[0].unshift("所有分类");
		})
	};
	let hyflShow = ref(false);
	const hyflShowChoose = () => {
		hyflShow.value = true;
	}
	const hyflClose = e => {
		if (e) params.value.indusKind = e.value[0];
		hyflShow.value = false;
	}

	// =====================================选择性质
	let xmxzShow = ref(false);
	let xmxzColumns = ref([]);
	const showXmxzChoose = () => {
		xmxzShow.value = true;
	}
	const xmxzClose = e => {
		if (e) params.value.propKind = e.value[0];
		xmxzShow.value = false;
	}
	let xmxzFull = [];
	const getXMXZ = () => {
		getXMXZlist().then(res => {
			xmxzFull = res.data.list;
			xmxzFull.unshift({
				key: null,
				value: "所有性质"
			});

			xmxzColumns.value = [res.data.list.map(item => item.value)];
		})
	};

	// ====================================选择状态
	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;
	}

	function confirmParams() {
		let statusObj = {
			"所有": "",
			"处理中": "0",
			"已关闭": "1",
		};

		let paramsData = {
			"beginDateStart": params.value.beginDateStart,
			"beginDateEnd": params.value.beginDateEnd,
			"status": statusObj[params.value.status],
			"problemContent": params.value.problemContent,
			"subName": params.value.subName,
			"subjectId": jsddFull.find(item => item.value === params.value.subjectId)?.key,
			"indusKind": hyflFull.find(item => item.value === params.value.indusKind)?.key,
			"propKind": xmxzFull.find(item => item.value === params.value.propKind)?.key,
		};

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

	onLoad(() => {
		// // 结束时间
		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

		getJSDD(); //获取建设地点
		getHYFL(); //获取行业分类
		getXMXZ(); // 项目性质列表
	})
</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>{{params.beginDateStart ?? "请选择开始时间"}}</view>
						<u-icon name="arrow-right" color="#343437" 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>{{params.beginDateEnd??"请选择结束时间"}}</view>
						<u-icon name="arrow-right" color="#343437" size="16" customStyle="margin-left:10rpx"></u-icon>
					</view>
				</view>

				<!-- 建设地点 -->
				<view class="card-item" @click="jsddShowChoose()">
					<view class="card-item-name">建设地点</view>
					<view class="card-item-description">
						<view v-if="params.subjectId">{{params.subjectId}}</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="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" @click="showXmxzChoose()">
					<view class="card-item-name">项目性质</view>
					<view class="card-item-description">
						<view v-if="params.propKind">{{params.propKind}}</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 class="card-item">
					<view class="card-item-name">问题描述</view>
					<input v-model="params.problemContent" class="card-item-input" placeholder="请填写问题描述"
						placeholder-style="color: #D8D8D8" maxlength="20" />
				</view>

				<!-- 问题状态 -->
				<view class="card-item" @click="showStatusChoose()">
					<view class="card-item-name">问题状态</view>
					<view class="card-item-description">
						<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>

			<view class="confirm-btn" @click="confirmParams()">确定</view>
		</view>
		<!-- 开始时间 -->
		<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="statusShow" :columns="statusList" @confirm="statusClose" @cancel="statusClose" @close="statusClose"
			closeOnClickOverlay></u-picker>
		<!-- 建设地点 -->
		<u-picker :show="jsddShow" :columns="jsddColumns" @confirm="jsddClose" @cancel="jsddClose" @close="jsddClose"
			closeOnClickOverlay></u-picker>
		<!-- 行业分类 -->
		<u-picker :show="hyflShow" :columns="hyflColumns" @confirm="hyflClose" @cancel="hyflClose" @close="hyflClose"
			closeOnClickOverlay></u-picker>
		<!-- 项目性质 -->
		<u-picker :show="xmxzShow" :columns="xmxzColumns" @confirm="xmxzClose" @cancel="xmxzClose" @close="xmxzClose"
			closeOnClickOverlay></u-picker>
	</view>
</template>

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