read_opc/reado-app/pages/reportForm/report-query.vue

<template>
	<view class="query-box">
		<view class="query">
			<u-search placeholder="请输入报表名称" v-model="queryParams.reportName" :show-action="false" shape="square"
				@search="search">
			</u-search>
			<view class="screen" @click="openQuery">
				<image class="screen-img" src="@/static/image/sx.png" alt="">
					<view>筛选</view>
			</view>
		</view>
		<view class="list-box">
			<uni-list>
				<uni-list-item v-for="item in reportList" :key="item.id" :title="item.reportTableName"
					:note="item.createTime" thumb="../../static/image/sjcx.png" thumb-size="medium" link
					:to="`/pages/reportForm/report-detail/index?id=${item.id}&title=${item.reportTableName}`">
				</uni-list-item>
			</uni-list>
			<view v-if="monthQuery" class="query-screen">
				<view>
					报表时间选择
				</view>
				<view class="month">
					<view :class="monthCurrent===item.current?'month-select':'month-item'" v-for="item in monthList"
						:key="item.current" @click="monthChange(item.current)">
						{{item.name}}
					</view>
				</view>
				<uni-datetime-picker v-model="queryParams.range" type="daterange" start-placeholder="起始时间"
					end-placeholder="终止时间" @change="change" />
				<view class="month-btn">
					<u-button class="reset" style="width:200rpx" @click="search">重置</u-button>
					<u-button type="primary" style="width:200rpx" @click="search">确认</u-button>
				</view>
			</view>
			<view class="modal" v-if="monthQuery"></view>
			<u-empty v-if="!reportList.length" class="empty" icon="../../static/data.png" text="暂无数据">
			</u-empty>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			queryParams: Object
		},
		data() {
			return {
				// 报表列表数据
				reportList: [],
				// 时间选择
				monthList: [{
						name: '近一周',
						current: 0
					},
					{
						name: '近1个月',
						current: 1
					},
					{
						name: '近3个月',
						current: 2
					},
					{
						name: '近6个月',
						current: 3
					}
				],
				monthCurrent: 0,
				monthQuery: false,
			}
		},
		mounted() {
			this.getAllReport()
		},
		methods: {
			// 获取报表数据
			getAllReport() {
				uni.$http.get('/reportTable/getAllOkReportTable', this.queryParams).then(res => {
					const data = res.data
					if (data.code === 200) {
						this.reportList = data.data.reportTableList
						uni.stopPullDownRefresh()
					}
				})
			},
			// 打开筛选
			openQuery() {
				this.monthQuery = !this.monthQuery
			},
			// 切换时间
			monthChange(current) {
				this.monthCurrent = current
			},
			// 选中范围时间
			change(val) {
				this.$emit('handelDate', val)
			},
			//搜索
			search() {
				this.getAllReport()
				this.monthQuery = false
				this.$emit('reset')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.query-box {

		.query {
			margin-top: 40rpx;
			padding: 0 40rpx;
			display: flex;
			justify-content: space-around;
			align-items: center;


			.screen {
				display: flex;
				align-items: center;
				margin-left: 30rpx;

				.screen-img {
					width: 40rpx;
					height: 40rpx;
				}
			}
		}

		.query-screen {
			width: 96vw;
			padding: 0 20rpx;
			background: #ffffff;
			position: absolute;
			top: 0;
			z-index: 999;

			.month {
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 28rpx;
				margin: 40rpx 0;

				.month-item {
					padding: 10rpx 20rpx;
					background: #ECECEC;
					color: #000000;
					border-radius: 12rpx;
				}

				.month-select {
					padding: 10rpx 20rpx;
					border-radius: 12rpx;
					background: #289BFF;
					color: #ffffff;
				}
			}

			.month-btn {
				display: flex;
				justify-content: space-around;
				margin-top: 40rpx;
				margin-bottom: 40rpx;

				.reset {
					background: #EAF4FF;
					color: #469DED;
					border: 1px solid #A3B8CB;
				}
			}
		}
	}

	.list-box {
		margin-top: 40rpx;
		position: relative;

		.modal {
			width: 100%;
			height: 76vh;
			position: absolute;
			top: 0;
			background: rgba(0, 0, 0, 0.5);
		}
	}
</style>