transport_integrated_app/pages/safetySupervisionDepart/floodPrevention/list.vue

<template>
	<view class="page">
		<view class="list_box" v-for="(item,index) in data" :key="index">
			<!-- 		<view class="list_box" v-for="(item,index) in data" :key="index" @click="goPage('/pages/highway/runData/form', item)"> -->
			<view class="list_top" @click="showDetail(item,!item.show)">
				<view class="unit_tags">报送时间</view>
				<view class="unit_name">
					{{item.reportDate || ''}}
				</view>
				<view class="unit_arrow">
					<uni-icons v-if="item.show" type="bottom" size="16" color="#666666"></uni-icons>
					<uni-icons v-else type="right" size="16" color="#666666"></uni-icons>
				</view>
			</view>
			<view class="list_cnt" v-if="item.show">
				<view v-for="(item2,index2) in item.reportUnit" :key="index2" class="list_cnt_item"
					@click="editItem(item,item2)">{{item2}}</view>
			</view>
		</view>
		<uni-load-more iconType="circle" :status="status" @clickLoadMore="loadMore"
			:contentText="contentText"></uni-load-more>
		<!-- 筛选 -->
		<view class="foot_btn_box">
			<!-- <view @click="goPage('/pages/highway/runData/form?type=add')" class="act_btn"><uni-icons type="plusempty" size="18"
					color="#fff" style="margin-right: 9rpx;"></uni-icons>新建</view> -->
			<view @click="showSearch" class="act_btn btn1"><uni-icons type="search" size="18" color="#2D8CF0"
					style="margin-right: 9rpx;"></uni-icons>查询
			</view>
		</view>
		<!-- 筛选 -->
		<uni-popup ref="popup" style="width: 100%;" background-color="none">
			<view class="pop_box">
				<view class="pop_title">
					查询条件
					<uni-icons @click="this.$refs.popup.close()" type="closeempty" size="18" color="#666"
						class="pop_close"></uni-icons>
				</view>
				<view class="popup-content">
					<view class="cont_tit">
						统计时间
					</view>
					<view class="time_box">
						<uni-datetime-picker v-model="query.reportDate" type="date" />
					</view>
				</view>
				<view class="btn_box">
					<p class="btn" @click="searchReset">重置</p>
					<p class="btn" @click="searchList">确认</p>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				data: [],
				current:0,
				size: 10,
				hasMore: true,
				status: '',
				query: {
					reportDate: '',
					reportUnit:''
				},
				contentText: {
					contentdown: "点击查看更多",
					contentrefresh: "正在加载...",
					contentnomore: "没有更多数据了",
				},
				userInfo:{}
			}
		},
		onShow(){
			this.loadMore()
		},
		onLoad(){
			this.userInfo = uni.getStorageSync('userInfo');
		},
		onUnload() {
			this.hasMore = true;
			this.data = [];
		},
		onPullDownRefresh() {
			this.data = [];
			this.current = 0;
			this.hasMore = true;
			this.loadMore();
		},
		methods:{
			loadMore(){
				if(this.hasMore){
					this.current = this.current + 1
					this.status = 'loading'
				
					let form = {
						pageNumber: this.current,
						pageSize: this.size,
						reportDate: this.query.reportDate,
						reportUnit:this.userInfo.deptName
					}
					console.log('form-------------------',form)
					// /api/biz/disasterPrevention/list
					this.$request(getApp().globalData.baseUrl + '/api/biz/disasterPrevention/getChaildList',form,"GET").then(res =>{
						console.log('res-----------------',res)
						if(res.code == 200){
							res.data.list.map(item => {
								item.show = false;
							})
							this.data = this.data.concat(res.data.list)
							if(res.data.list.length == 0 || res.data.list.length < this.size){
								this.hasMore = false
								this.status = 'nomore'
							}else{
								this.status = 'more';
							}
							uni.stopPullDownRefresh();
						}else{
							this.status = 'more';
							uni.stopPullDownRefresh();
						}
					})
				}
			},
			//查询
			showSearch() {
				this.$refs.popup.open('bottom');
			},
			//确认查询
			searchList() {
				this.data = [];
				this.current = 0;
				this.hasMore = true;
				this.$refs.popup.close();
				uni.pageScrollTo({
					scrollTop: 0
				})
				this.loadMore();
			},
			//重置搜索
			searchReset() {
				this.timeRange = [];
				this.query = {
					reportDate:''
				};
				this.index = '';
			},
			// 查看详情
			showDetail(row,isShow){
				// console.log('row--------------------',row)
				// console.log('isSHow-------------------',isShow)
				if(isShow){
					//展开的同时折叠已展开的其他项
					let idx = this.data.findIndex(item => item.show == true);
					if (idx > -1) {
						this.data[idx].show = false;
					}
				}
				row.show = isShow
				
			},
			// 跳转详情
			editItem(row, reportUnit) {
				let param = {
					reportDate: row.reportDate,
					reportUnit: reportUnit,
				}
				console.log(param, 'paramparamparamparamparamparamparam')
				uni.navigateTo({
					url:"/pages/safetySupervisionDepart/floodPrevention/form?type=edit&item=" + JSON.stringify(param)
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	.page {
		min-height: 100vh;
		padding: 30rpx 30rpx 195rpx;
	}
	
	.list_box {
		background-color: #fff;
		border-radius: 30rpx;
		margin-bottom: 30rpx;
		padding: 30rpx;
	
		.list_top {
			display: flex;
	
			.unit_tags {
				height: 37rpx;
				line-height: 37rpx;
				color: #E37616;
				font-size: 20rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				background: #FFF7E4;
				border-radius: 10rpx;
				border: 1rpx solid #EF9A4F;
				padding: 0 11rpx;
				margin-right: 16rpx;
			}
	
			.unit_name {
				flex: 1;
				color: #333333;
				font-size: 30rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: 400;
				line-height: 48rpx;
				margin-left: 20rpx;
				word-break: break-all;
			}
			.unit_arrow {
				float: right;
				line-height: 48rpx;
			}
		}
		
		// 层级填报单位
		.list_cnt {
			border-top: 1rpx solid #F7F0EE;
			margin-top: 30rpx;
		
			.list_cnt_item {
				color: #666666;
				font-size: 30rpx;
				line-height: 40rpx;
				font-family: Microsoft YaHei-Regular, Microsoft YaHei;
				font-weight: 400;
				margin-top: 30rpx;
			}
		}
		
		.report_time {
			color: #999999;
			font-size: 24rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			line-height: 48rpx;
			text-align: center;
			margin-bottom: 30rpx;
		}
	
		.unit_station {
			color: #666;
			font-size: 24rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			text-align: right;
			margin-top: 10rpx;
		}
	
		.list_item_box {
			padding: 30rpx 30rpx 0;
			background: #F8F8F8;
			border-radius: 30rpx;
			margin-bottom: 30rpx;
		}
	
		.list_item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 0 30rpx;
	
			.list_item_label {
				width: 240rpx;
				color: #666666;
				font-size: 26rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				line-height: 48rpx;
			}
	
			.list_item_cnt {
				flex: 1;
				color: #333333;
				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				line-height: 48rpx;
				text-align: right;
				margin-left: 20rpx;
				word-break: break-all;
			}
		}
	
		.list_item_shouqi {
			color: #2D8CF0;
			font-size: 24rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			text-align: center;
			line-height: 33rpx;
			padding-bottom: 30rpx;
	
			.txt {
				margin-left: 12rpx;
			}
		}
	
		.act_btn_box {
			display: flex;
			flex-direction: row-reverse;
			margin: 10rpx 0;
	
			.act_btn {
				width: 180rpx;
				color: #666666;
				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				line-height: 70rpx;
				background: #FFFFFF;
				border-radius: 100rpx;
				border: 1rpx solid #C1C1C1;
				text-align: center;
	
				&.blue {
					color: #fff;
					background: #2D8CF0;
					border-color: #2D8CF0;
				}
			}
		}
	}
	
	.foot_btn_box {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: #F8F8F8;
		padding: 40rpx 30rpx;
	
		.act_btn {
			width: 690rpx;
			height: 90rpx;
			line-height: 88rpx;
			display: flex;
			justify-content: center;
			color: #FFFFFF;
			font-size: 28rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			background: #2D8CF0;
			border-radius: 100rpx;
			border: 1rpx solid #2D8CF0;
	
			.txt {
				margin-left: 9rpx;
			}
	
			&.btn1 {
				color: #2D8CF0;
				background: #F6F6F6;
			}
		}
	}
	
	.pop_box {
		border-radius: 30rpx 30rpx 0 0;
		background-color: #fff;
		padding: 30rpx;
	
		.pop_title {
			color: #333333;
			font-size: 32rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			line-height: 45rpx;
			text-align: center;
			margin: 20rpx 0;
	
			.pop_close {
				float: right;
			}
		}
	
		.popup-content {
			// display: flex;
			// flex-direction: column;
	
			.cont_tit {
				width: 100%;
				color: #333333;
				font-size: 26rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				line-height: 37rpx;
				display: flex;
				margin-bottom: 40rpx;
	
				&.picker {
					display: flex;
					justify-content: space-between;
					margin: 60rpx 0;
	
					.picker_select {
						color: #D4D4D4;
						font-size: 28rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						text-align: right;
					}
				}
			}
	
			.time_box {
				width: 690rpx;
				margin: 0 auto;
	
				/deep/ .uni-date-x--border {
					border-radius: 30rpx;
	
					.uni-date-x {
						background: transparent;
	
						.icon-calendar {
							padding-left: 20rpx;
						}
					}
				}
	
				/deep/ .uni-date-editor--x .uni-date__icon-clear {
					padding-right: 20rpx;
				}
			}
	
			.picker_box {
				width: 690rpx;
				margin: 0 auto;
	
				/deep/.input-value-border {
					border-radius: 30rpx;
				}
			}
		}
	
		.btn_box {
			width: 100%;
			height: 120rpx;
			display: flex;
			margin-top: 20px;
			align-items: center;
			justify-content: space-between;
	
			.btn {
				width: 290rpx;
				height: 90rpx;
				background: #FFFFFF;
				border-radius: 100rpx;
				border: 1rpx solid #C1C1C1;
				color: #666;
				font-size: 28rpx;
				line-height: 88rpx;
				text-align: center;
	
				&:last-child {
					background: #2D8CF0;
					color: #FFFFFF;
					border-color: #2D8CF0;
				}
			}
		}
	}
</style>