shuju_ui/test/home/pages/recordthree/recordthree.vue

<template>
	<view class="index">
		<view class="sous">
			<input type="text" value="" v-model="params.idCard" placeholder="请输入证件号码" class="input" />
			<button @click="Seach">查询</button>
		</view>
		<p style="height: 28upx; background-color: #f2f2f2;"></p>
		<div class="tabld">
			<view :class="[currentTab==index ? 'one_tabhu ' : '']" v-for="(item,index) in tabsta" :key="index" @click="changeTab(index)">
				<text>{{item.text}}</text>
				<text>{{item.nume}}</text>
			</view>
		</div>
		<view class="tab">
			<!-- //表格 -->
			<view class="exele">
               <div class="nbhe">
				   <!-- icon_ymqk_dc -->
				   <p @click="dadeu"><img src="@/static/image/icon_ymqk_dc.png" alt=""><span style="color: #FD8300;">导出</span></p>
				   <p>
					   <!-- <img src="@/static/image/icon_ymqk_del.png" alt=""><span>删除</span> -->
					   </p>
			   </div>
				<view class="box">
					<table @change="change">
						<tr class="tr_one">
							<!-- <th style="width: 130upx; text-align: center;">编号</th> -->
							<th style="width: 100upx; text-align: center;">姓名</th>
							<th style="width: 80upx; text-align: center;">完成</th>
							<th style="width: 270upx; text-align: center;">身份证号</th>
							<th style="width: 170upx; text-align: center;">联系方式</th>
							<!-- <th style="width: 100upx;">联系方式</th> -->
							<th style="width: 50upx; text-align: center;">操作</th>
							<!-- <th style="width: 60upx;">查看</th> -->
						</tr>
						<scroll-view scroll-y class="scroll-view" upper-threshold="40" lower-threshold="40" @scrolltolower="bot_btn">
							<tr v-for="(item,index) in list" :key="index" :class=" [index%2  ==0 ? 'two_tr two_trtwo':'two_tr']" @click="chakn(item)">
								<!-- <td style="width: 130upx; text-align: center;" >{{ item.code == null ? '暂无信息' :  item.code}}</td> -->
								<td style="width: 100upx; text-align: center;" >{{ item.userName == null ? '暂无信息' :  item.userName}}</td>
								<td style="width: 80upx; text-align: center;" >{{ item.progress == null ? '暂无信息' :  item.progress}}</td>
								<!-- <td style="width: 40upx; text-align: center;">{{item.gender == null? '暂无信息' : item.gender }}</td> -->
								<td style="width: 270upx; text-align: center;">{{item.idCard == null? '暂无信息' : item.idCard }}</td>
								<td style="width: 170upx; text-align: center;" >{{ item.phoneNum == null? '暂无信息' :  item.phoneNum}}</td>
								<!-- <td style="width: 100upx;" :class="[item.phone == '' ? 'tdse' : '' ]" >{{ item.phone == ''? '未完善' : item.phone}}</td> -->
								<!-- <td style="width: 100upx; text-align: center;" :class="[item.addtime == null ? 'tdse' : item.addtime == ''? 'tdse' : ''  ]">{{ item.addtime ==null ? '未完善' :  item.addtime==''? '未完善' : item.addtime}}</td> -->
								<!-- <td style="width: 50upx;" class="coiu" @click.stop="dele(item.id)">删除</td> -->
								<td style="width: 50upx; color: #32B16C;" @click.stop="goDetail(item.id)">查看</td>
							</tr>
							<div class="shax" v-show="listShow">
								{{wtdt}}
							</div>
						</scroll-view>
						<div class="zanwu " v-show="!listShow"><span>暂无数据</span></div>
					</table>
				</view>

			</view>
		</view>
		<div class="xinse" @click="addVacFrom">
			新增
		</div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				activeTab: 0, //tab切换
				//列表数据
				list: [],
				show: false,
				actions: [{
					name: '102',
				}],
				totalNum1: 0,
				totalNum2: 0,
				totalNum3: 0,
				titleBarHeight: 0,
				statusBarHeight: 0,
				tabsta: [{
						"text": '全部',
						"nume": 0
					},
					{
						"text": '已接种',
						"nume": 1
					},
					{
						"text": '未接种',
						"nume": 2
					},
				],
				currentTab: 0, //tab切换
				Collected: false, //判断已采集未采集   false 已采集  true未采集
				params: { //上拉刷新
					pageSize: 20,
					pageNum: 1,
				},
				paramstwo: {
					studentName: '', //查询
					// complate: '',
					// classId:'',
					deptId: ''
				},
				keyword: '',
				haveMore: true,
				wtdt: '上拉加载更多',
				terd: '',
				stuList: {}, //学生人数
				shoue: false,
				listShow: true, //判断是否有数据 true 有
				areaList: {}, //班级数据
				xuan: ['请选择', '请选择', '请选择'],
				columns: [

				],
				cites: [],
				tehu: '请选择班级',
				companyId: '',
				arrbq: [],
				startDate:'选择开始时间',
				endDate:'选择结束时间',
				showtime:false, 
				minDate:0 ,
				maxDate: 0,
				currentDate: 0,
				shwtie:0
			};
		},
		onShow() {
			let type = uni.getStorageSync('token')
			if (!type) {
				uni.redirectTo({
					url: '/pages/load/roles'
				})
			}
			var iutem = new Date().getFullYear() + 1
			this.maxDate  = new Date(iutem,12,1).getTime()
			this.minDate= new Date(2017, 10, 1).getTime()
			// this.currentDate = new Date().getTime()
			// console.log(new Date().getFullYear() + 1 , new Date(2019, 10, 1).getTime() )
			this.params.pageNum = 1
			// this.params.deptId = ''
			// this.paramstwo.deptId = ''
			this.list = []
			this.lists(this.params)
			// this.studentnum(this.paramstwo)
		},
		onLoad(option) {
			const citys = []
			// this.companyId = uni.getStorageSync('company')
			//查询班级
			var timeju = new Date().getTime()
			 // this.params.startDate = new Date().getTime()
			 // console.log(this.params.startDate)
			 if(this.shwtie == 0){
				  // this.formatDateTime(timeju)
			 }
			 this.getStatis1()
			 this.getStatis2()
			 this.getStatis3()
		},
		created() {

		},
		//下拉刷新
		onPullDownRefresh() {
			wx.showNavigationBarLoading()
			this.params.pageNum = 1
			this.shwtie = 0
			this.params = { //上拉刷新
					pageSize: 20,
					pageNum: 1,
				}, //查询

			this.keyword = ''
			this.list = []

		},
		methods: {
			getStatis1() {
				this.$http.get("boman-web-core/core/info/list", {
					pageSize: 20,
					pageNum: 1
				}).then(res => {
					if (res.code == 200) {
						this.tabsta[0].nume = res.total
					} else {
					}
				})
			},
			getStatis2() {
				this.$http.get("boman-web-core/core/info/list", {
					pageSize: 20,
					pageNum: 1,
					isVaccination: '是'
				}).then(res => {
					if (res.code == 200) {
						this.tabsta[1].nume = res.total
					} else {
					}
				})
			},
			getStatis3() {
				this.$http.get("boman-web-core/core/info/list", {
					pageSize: 20,
					pageNum: 1,
					isVaccination: '否'
				}).then(res => {
					if (res.code == 200) {
						this.tabsta[2].nume = res.total
					} else {
					}
				})
			},
			goDetail(id) {
				uni.navigateTo({
					url: '/add/pages/addvacfrom/addvacfrom?id=' + id
				})
			},
			//查询列表
			lists(params) {
				this.$http.get("boman-web-core/core/info/list", params).then(res => {
					//停止下拉加载
					uni.hideNavigationBarLoading()
					uni.stopPullDownRefresh()
					if (res.code == 200) {
						if (res.rows.length < params.pageSize) {
							this.haveMore = false
							this.wtdt='到底了~';
						} else {
							var num=parseInt(res.rows.length)+parseInt(params.pageSize)*parseInt(params.pageNum-1)
							if(num<res.total){
								this.haveMore = true
								this.wtdt='上拉加载更多'
							}else{
								this.haveMore = false
								this.wtdt='到底了~';
							}	
						}
						if(params.pageSize==1){
							this.list = res.rows
						}else{
							this.list = this.list.concat(res.rows) 
						}
						// this.list.filter(router =>{
						// 	router.addtime = this.formatDate(router.addtime)
						// })
						
					} else {
						uni.showToast({
							title: res.msg,
							duration: 1000,
							icon: 'none'
						});


					}


				})
			},
			//刷新
			bot_btn() {
				if (this.haveMore) {
					this.params.pageNum++
					this.lists(this.params)
				}
			},
			//查看
			chakn(item) {
				// console.log(id.id,id.pid)
		
				// uni.setStorageSync('item', item)
				// wx.navigateTo({
				// 	url: '/pages/home/recordtwo'
				// })
			},
			// 删除
			dele(item){
		
				this.$http.dele("boman-web-core/core/info/" + item).then(res => {
					if(res.code == 200){
						this.params.pageNum = 1
						this.list = []
						this.lists(this.params)
					}
				
				})
			},
			// 导出
			dadeu(){
				// let token = wx.getStorageSync('token');
				//     let that = this
				//     wx.request({
				//       url: "http://192.168.101.11:8090/boman-web-core/core/info/export" ,
				// 	  method: 'post',
				//       data: {
				//           // 筛选导出
				//       },
				//       header: {
				//         "Content-Type": "application/x-www-form-urlencoded",
				//         "Authorization": token
				//       },
				//       dataType: "json",
				//       success: res => {
				//        // 返回的 res.data.msg 是一个名称eg: xxxx.xlxs
				//         if (res.data.code == 0) {
				//           that.download(res.data.msg)
				//         }
				//       }boman-web-core/core/info/export",this.params
				//     })
					this.$http.post("boman-web-core/core/info/export",this.params).then(res => {
						if(res.code == 200){
							// this.params.pageNum = 1
							// this.list = []
							// this.lists(this.params)
						}
					
					})
			},
			// 查看导出返回的字节流
			download(fileName) {
			  let token = wx.getStorageSync('token');
			  wx.downloadFile({  // downloadFile的url必须为http或者https
			    url: commonTool.baseUrl + "mall/myShop/common/download?delete=true&fileName=" + fileName,
			    header: {
			      "content-type": "application/json",
			      "token": token
			    },
			    responseType: "arraybuffer", //注意这里的responseType
			    success(res) {
			      console.log('downloadfile', res)
			      const manage = wx.getFileSystemManager();
			      if (res.statusCode === 200) {
			        manage.saveFile({
			          tempFilePath: res.tempFilePath,
			          filePath: wx.env.USER_DATA_PATH + "/待派单明细.xlsx",  // 文件重命名 可自定义
			          success: function(res) {
			          }
			        });
			        // 打开文档
			        wx.openDocument({
			          filePath: wx.env.USER_DATA_PATH + "/待派单明细.xlsx",
			          success: function(res) {
			            console.log('打开文档成功')
			          },
			          fail: function() {
			            console.log('打开失败');
			          }
			        })
			      }
			    },
			    fail(err) {
			      console.log('downloadfile err', err)
			    }
			  })
			},
			//搜索
			Seach() {
				this.list = []
				this.params.pageNum = 1
				// this.studentnum(this.paramstwo)
				this.lists(this.params)
			},
			onClose(picker, value, index) {
				this.show = false
				// console.log(value)
				// this.showscho = false;
			},
			onChange(event) {
				console.log(event)
				const {
					picker,
					value,
					index
				} = event.detail;
				if (index == 0) {
					console.log(this.cites[0])
					picker.setColumnValues(1, value[0].children);
					picker.setColumnValues(2, value[0].children[0].children);
					picker.setColumnValues(3, value[0].children[0].children[0].children);
				} else if (event.detail.index == 1) {
					picker.setColumnValues(2, value[1].children);
				} else if (event.detail.index == 2) {
					picker.setColumnValues(3, value[2].children);
				} else if (event.detail.index == 3) {
					picker.setColumnValues(3, value[2].children);
				}
			},
			onCancel() {
				this.show = false
			},
			onConfirm(value) {
				console.log(value.detail)
				// console.log(value.detail.value[1])
				// classId this.cites
				// let ir = value.detail.index.pop()
				// console.log(ir)
				this.deptId = value.detail.value[value.detail.index.length - 1].id
				this.tehu = value.detail.value[value.detail.index.length - 1].label
				console.log(this.deptId)
				this.paramstwo.deptId = value.detail.value[value.detail.index.length - 1].id
				this.params.deptId = value.detail.value[value.detail.index.length - 1].id
				// console.log(this.params.classId )
				this.list = []
				this.params.pageNum = 1
				// this.studentnum(this.paramstwo)
				this.lists(this.params)
				this.gender_index = 1
				this.case_index = 1
				this.show = false
			},
			// 获取手机高度
			screen() {
				const _this = this
				uni.getSystemInfo({
					success: function(res) {
						let platform = res.platform
						let totalTopHeight = 68
						if (res.model.indexOf('iPhone X') !== -1) {
							totalTopHeight = 88
						} else if (res.model.indexOf('iPhone') !== -1) {
							totalTopHeight = 64
						}
						_this.statusBarHeight = res.statusBarHeight
						_this.titleBarHeight = totalTopHeight - res.statusBarHeight
					},
					failure() {
						_this.statusBarHeight = 0
						_this.titleBarHeight = 0
					}
				});
			},
			//弹
			changeTab(index){
				this.currentTab = index
				if(index == 0){
					this.params.isVaccination = undefined
				}else if(index == 1){
					// 已接种
					this.params.isVaccination = '是'
				}else if(index == 2){
					// 未接种
					this.params.isVaccination = '否'
				}
				this.list = []
				this.lists(this.params)
			},
			onSelect(event) {
				console.log(event.detail);
			},
			formatter(type, value){
				 if (type === 'year') {
				        return `${value}年`;
				      } else if (type === 'month') {
				        return `${value}月`;
				      }
				      return value;
			},
			// 点击新增
			addVacFrom () {
				uni.navigateTo({
					url: '/add/pages/addvacfrom/addvacfrom'
				})
			}


		}
	}
</script>

<style lang="scss" scoped>
	.coie{
		width: 100%;
		box-sizing: border-box;
		padding:  0 33upx;
		.coie_nav{
			border-top: 1upx solid #E5E5E5;
			display: flex;
			flex-wrap: wrap;
			padding-bottom: 28upx;
			p{
				width: 33.33%;
				text-align: center;
				display: flex;
				flex-direction: column;
				margin-top: 53upx;
				span{
					font-size: 28upx;
				}
				i{
					font-size: 28upx;
					color: #333;
					margin-top: 28upx;
				}
			}
		}
	}
	.ieju{
		height: 17upx;
		width: 100%;
		background-color: #eee;
		margin-bottom: 33upx;
	}
	//暂无数据
	.zanwu {
		text-align: center;
		padding-top: 20upx;

		span {
			font-size: 24upx;
		}
	}

	.scroll-view {
		max-height: calc(100vh - 401upx);
	}

	.shax {
		// height: 83upx;
		font-size: 25upx;
		color: #666;
		text-align: center;
	}

	.index {
		padding-top: 33upx;
		max-height: 100vh;

		.sous {
			padding: 24upx 33upx;
			display: flex;
            
			.input {
				height: 90upx;
				border: 1upx solid #E5E5E5;
				flex: 1;
				margin-right: 28upx;
				padding-left: 10upx;
				 box-sizing: border-box;
			}

			button {
				// width: 125upx;
				height: 90upx;
				background-color: #1678FF;
				text-size: 28upx;
				color: #fff;
				text-align: center;
				line-height: 90upx;
			}
		}

		//tab
		.tab {
			padding-top:33upx;
            padding-bottom: 100upx;
			.tabs {
				display: flex;
				padding: 0 20upx;
				box-sizing: border-box;
				height: 111upx;
				justify-content: space-between;
				box-shadow: 0px 7px 7px 0px rgba(229, 229, 229, 0.5);

				.one_tab {
					color: #1678FF !important;
					// width: 140upx;
					// text-align: center;

					// .twotabs {
					// 	font-size: 31upx;
					// 	color: #666666;
					// 	;
					// 	font-weight: 500;
					// }

					// .twosrtabs {
					// 	color: #1678FF;
					// }

					// .twotabstwo {
					// 	font-size: 24upx;
					// 	color: #AAAAAA;
					// }
				}

				.one_tabqie {
					border-bottom: 8upx solid #1678FF;

				}
			}
		}

		//表格
		.exele {
			.box {
				.tr_one {
					display: flex;
					padding: 0 20upx;
					box-sizing: border-box;
					justify-content: space-between;

					th {
						// flex: 1;

						font-size: 24upx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #333333;
						line-height: 14upx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						line-height: 83upx;
						height: 83upx;
					}
				}

				.two_tr {
					display: flex;
					padding: 0 20upx;
					box-sizing: border-box;
					justify-content: space-between;

					td {
						// flex: 1;

						font-size: 24upx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #333333;
						line-height: 83upx;
						height: 83upx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;

					}

					.tdse {
						color: #E60012 !important;
					}
					.apply_span_xl{
						color: #32B16C !important;
					}
					.apply_span_xltwo{
						color: #ffa200 !important;
					}
					.apply_span_xlfive{
						color: #4c4b4b !important;
					}
					.apply_span_xlthreo{
						color: #f00404 !important;
					}
					.apply_span_xlforu{
						color: #aaaaaa !important;
					}
					// .apply_span_xla{
					// 	color: #1678FF;
					// 	text-decoration: underline ;
					// }

					.coiu {
						color: #EC1717;
					}
				}

				.two_trtwo {
					background-color: #F6F9FC;
				}
			}

		}
	}

	.banj {
		height: 86upx;
		width: 100%;
		// text-align: center;
		line-height: 86upx;
		// background-color: #F6F9FC;
		color: #AAAAAA;
		margin-top: 20upx;
		display: flex;
		justify-content: space-around;
	}
	.apply_box{
		.apply_item_input{
			padding: 0 33upx;
			// border-top: 1upx solid #F4F4F4;
			display: flex;
			height: 68upx;
			align-items: center;
			.apply_span_x{
				font-size: 28upx;
				color: #363535;
				span{
					color: #F22346;
				}
			}
			.input_r{
				font-size: 28upx;
				height: 100%;
				flex: 1;
				text-align: right;
			}
			.input_rtwo{
				line-height:68upx;
			}
			.input_rtwoss{
				color: #1678FF;
			}
			.input_rtwosss{
				color: #FF0000;
			}
		}
		.apply_title_jt{
			height: 130upx;
			border-top: 1upx solid #F4F4F4;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 32upx;
			span{
				font-size: 36upx;
				color: #333;
				font-weight: bold;
			}
			.apply_title_btn{
				width: 160upx;
				height: 60upx;
				font-size: 24upx;
				color: #fff;
				display: flex;
				justify-content: center;
				align-items: center;
				background: #FF568C;
				border-radius: 8upx;
				.img{
					width: 30upx;
					height: 30upx;
					margin-right: 10upx;
				}
			}
		}
		.apply_title_jts{
			border:none;
		}
		.apply_title_jt_item{
			border-bottom: 9upx solid #F4F4F4;
			.apply_item_input_qx{
				color: #FF5185;
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				height: 112upx;
				font-size: 30upx;
			}
		}
		.apply_item_sfz{
			padding: 42upx 20upx;
			border-bottom: 9upx solid #F4F4F4;
			.apply_item_sfz_title{
				font-weight: bold;
				font-size: 34upx;
				margin-bottom: 40upx;
				margin-left: 2upx;
			}
			.apply_item_phones{
				display: flex;
				justify-content: space-between;
				.apply_item_phone{
					width: 340upx;
					height: 218upx;
					.img{
						width: 100%;
						height: 100%;
						border-radius: 20upx;
					}
				}
			}
		}
		.apply_item_zdxx{
			padding: 0 26upx;
			font-size: 34upx;
			font-weight: bold;
			color: #333;
			height: 112upx;
			line-height: 112upx;
			border: 1upx solid #F4F4F4;
		}
		.qt_div{
			height: 112upx;
			border-top: 1upx solid #F4F4F4;
			padding: 0 32upx;
			border-bottom: 9upx solid #F9F9F9;
			.input_l{
				height: 100%;
				font-size: 30upx;
			}
		}
	}
	.tabld{
		display: flex;
		height: 140upx;
		box-shadow: 0px 7px 5px 0px rgba(218, 218, 218, 0.35);
		view {
			font-size:28upx ;
			font-family: PingFang SC;
			font-weight: 500;
			color: #191919;
			text-align: center;
			flex: 1;
			line-height: 70upx;
			display: flex;
			flex-direction: column;
		}
		.one_tabhu{
			color: #009FE8;
		}
	}
	.nbhe{
		display: flex;
		margin-bottom: 44upx;
		p{
			font-size: 25upx;
			flex: 1;
			padding: 0 77upx;
			display: flex;
			align-items: center;
		}
		p:nth-child(2){
			justify-content: flex-end;
		}
		img{
			width: 31upx;
			height: 29upx;
			margin-right: 11upx;
		}
	}
	.xinse{
		position: fixed;
		width: 100%;
		bottom: 0;
		left: 0;
		font-size: 33upx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		height: 90upx;
		background-color: #00B034;
		text-align: center;
		line-height: 90upx;
	}
</style>