read_opc/reado-app/pages/reportForm/index.vue

<template>
	<view class="content">
		<view class="line"></view>
		<view class="cont-box">
			<view class="page">
				<view :class="current===item.current?'isSelect':'select'" class="dataName" v-for="item in pageList"
					:key="item.current" @click="handelChange(item.current)">
					{{item.name}}
				</view>
			</view>
			<!-- 报表查询 -->
			<reportQuery v-if="current===0" :reportList="reportList" :queryParams="queryParams" @reset="reset"
				@handelDate="handelDate" :key="key" />
			<!-- 数据项查询 -->
			<dataItem v-else />
		</view>
	</view>
</template>

<script>
	import reportQuery from './report-query.vue'
	import dataItem from './data-item.vue'
	export default {
		components: {
			reportQuery,
			dataItem
		},
		data() {
			return {
				// 查询参数
				queryParams: {
					page: 1,
					limit: 20,
					reportTableName: null
				},
				// 列表数据
				reportList: [],
				// 分页器
				pageList: [{
						name: '报表查询',
						current: 0
					},
					{
						name: '数据项查询',
						current: 1
					}
				],
				current: 0,
				key: 0
			};
		},
		onShow() {
			this.key++
			this.queryParams.limit = 20
			uni.pageScrollTo({
				scrollTop: 0,
				duration: 0
			})
		},
		onPullDownRefresh() {
			this.queryParams.limit = 20
		},
		onReachBottom() {
			this.queryParams.limit += 10
		},
		methods: {
			// 切换数据项查询
			handelChange(current) {
				this.current = current
			},
			//重置查询条件
			reset() {
				this.queryParams = {
					page: 1,
					limit: 20,
					reportName: null
				}
			},
			//选中时间
			handelDate(val) {
				// this.queryParams.range = val
			}
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .uni-list-item__container {
		padding: 40rpx 60rpx;
	}

	::v-deep .uni-list-item__content-title {
		font-size: 34rpx;
	}

	::v-deep .uniui-arrowright {
		font-size: 40rpx !important;
		padding-right: 54rpx !important;
	}

	::v-deep .uni-list-item__icon-img {
		width: 86rpx;
		height: 86rpx;
	}

	::v-deep .uniui-calendar {
		display: none;
	}


	::v-deep .uni-date-x--border {
		border: none;
	}

	::v-deep .uni-date__x-input {
		background: #ECECEC;
	}

	::v-deep .uni-date-x .range-separator {
		height: 36px !important;
		padding: 0 15px !important;
		line-height: 34px !important;
		transform: scale(2.5);
		color: #ECECEC;
	}

	.cont-box {
		margin-top: 20rpx;

		.page {
			display: flex;
			justify-content: space-around;
			align-items: center;
			border-bottom: 2rpx solid #EEEEEE;
			font-weight: bold;

			.select {
				color: #5A5A5A;
				border-bottom: none;
			}

			.isSelect {
				border-bottom: 8rpx solid #2F9BFD;
				color: #2F9BFD;
			}

			.dataName {
				padding: 20rpx 0;
			}
		}
	}

	.empty {
		width: 400rpx;
		height: 400rpx;
		position: absolute;
		top: 50%;
		left: 50%;
		margin-top: -280rpx !important;
		margin-left: -200rpx;
	}

	.line {
		height: 10rpx;
		width: 100%;
		background: #EEEDF2;
	}
</style>