JP-Equipment-Jingli/pages/storeManagement/equipmentInspection/equipmentInspection.vue

<template>
	<view>

		<u-navbar title="设备检验" class="head">

			<view class="tabs" slot="bottom">
				<u-tabs bar-width="80" inactive-color="#777777" active-color="#101010" :list="list" :is-scroll="false"
					:current="current" @change="change"></u-tabs>
				<!-- <view class="screen" @click="changeShow()">
					筛选<u-icon size="24" name="arrow-down" color="#777777"></u-icon>
				</view>
				<view class="options" v-if="this.show==true" @click="changeShow()">
					选项3
				</view> -->
			</view>
		</u-navbar>
		<view class="listHead">
			
	
		<scroll-view scroll-y="true" @scrolltolower="onReachBottom()">

			<view class="list1">
				<view class="item" v-for="(item,i) in list[current].list" @click="ckInfo(item)" :key="i">
					<template v-if="list[current].isold">
						
										
						<view class="group">
							<view class="name">
								检验日期：
							</view>
							<view class="value">
								{{item.createTime}}
							</view>
						</view>
						<view class="group">
							<view class="name">
								检验人：
							</view>
							<view class="value">
								{{item.createByName}}
							</view>
						</view>
						
					</template>
					<template v-else>
						<view class="title">
							{{item.title}}  <span class="titlespan" >编号：{{showCode(item)}}</span>
						</view>
										
						<view class="group">
							<view class="name">
								上次检验日期：
							</view>
							<view class="value">
								{{item.experimentLastTime}}
							</view>
						</view>
						<view class="group">
							<view class="name">
								检验周期：
							</view>
							<view class="value">
								{{item.experimentPeriod?item.experimentPeriod+'天':''}}
							</view>
						</view>
					</template>
					

				</view>
				
				<u-divider v-if="list[current].recordsTotal==list[current].list.length"
					:isnone="list[current].recordsTotal==0" nonetext="没有找到相关内容" border-color="#CFD2D5">已经到底了</u-divider>

			</view>


		</scroll-view>
			</view>
		<view class="bottom">
			<u-button type="primary"  @click="addInfo">仓储检验</u-button>
		</view>
	</view>
</template>

<script>
	import * as API from '@/apis/pagejs/storeManagement.js'

	export default {
		data() {
			return {
				list: [{
						name: '待检验',
						pageIndex: 1,
						pageSize: 20,
						recordsTotal: 1,
						healthStatus: "5",
						iscount:true,
						count:0,
						list: []
					}, {
						name: '超期未完成',
						pageIndex: 1,
						pageSize: 20,
						recordsTotal: 1,
						healthStatus: "6",
						iscount:true,
						count:0,
						list: []
					}, {
						name: '检验历史',
						pageIndex: 1,
						pageSize: 20,
						recordsTotal: 1,
						healthStatus: "0",
						iscount:false,
						isold:true,
						count:0,
						list: []
					},
					{
						iscount:false,
						name: '不合格设备',
						pageIndex: 1,
						pageSize: 20,
						count:0,
						recordsTotal: 1,
						healthStatus: "2",
						list: []
					}

				],
				current: 0,
				show: false
			}
		},
		onReachBottom() {

			var obj = this.list[this.current]
			if (obj.list.length < obj.recordsTotal) {
				this.myLoadmore();
			}
		},
		onReady() {
			this.getList()
			this.getNum()
		},
		methods: {
			addInfo(){
				var url = "./planDetail";
				uni.navigateTo({
					url: url,
					events: {
						refreshData: () => {
							this.init()
						}
					}
				})
			},
			getNum(){
				API.deviceList({
					pageIndex: 1,
					pageSize: 0,
					healthStatus: 6,
				
				}).then((res) => {
					uni.hideLoading();
					
					if(this.list[1].iscount){
						this.list[1].count=res.data.recordsTotal
					}
					
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			getList() {

				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				var isold= this.list[this.current].isold

				var list = this.list[this.current].list
				var obj = this.list[this.current]
				var listForm = {
					...obj
				}
				delete listForm.list
				if(isold){
					this.inspectionList(listForm)
				}else{
					//listForm.projectName = this.queryContent;
					API.deviceList(listForm).then((res) => {
						uni.hideLoading();
						if (listForm.pageIndex == 1) {
							list = res.data.data;
						} else {
							list = [
								...list,
								...res.data.data
							];
						}
						if(this.list[this.current].iscount){
							this.list[this.current].count=res.data.recordsTotal
						}
						if(this.current==0){
							this.carhelp.set("badgeList_deviceList",res.data.recordsTotal)
						}
						this.list[this.current].list = list
					
						this.list[this.current].recordsTotal = res.data.recordsTotal;
					}).catch(error => {
						uni.showToast({
							title: error,
							icon: "none"
						})
					})
				}
				

			},
			inspectionList(listForm){
				var list = this.list[this.current].list
					//listForm.projectName = this.queryContent;
					API.inspectionList(listForm).then((res) => {
						uni.hideLoading();
						if (listForm.pageIndex == 1) {
							list = res.data.data;
						} else {
							list = [
								...list,
								...res.data.data
							];
						}
						if(this.list[this.current].iscount){
							this.list[this.current].count=res.data.recordsTotal
						}
						this.list[this.current].list = list
					
						this.list[this.current].recordsTotal = res.data.recordsTotal;
					}).catch(error => {
						uni.showToast({
							title: error,
							icon: "none"
						})
					})
			},
			myLoadmore() {
				this.list[this.current].pageIndex += 1;
				this.getList();
			},
			init() {
				this.current = 0
				for(var i in this.list){
					this.list[i].pageIndex = 1
					this.list[i].list=[]
				}
				this.getNum()
				this.getList()
			},
			ckInfo(item) {
				
				var url = "/pages/otherFunctions/equipmentRetrieval/equipmentInfo?id=" + item.id;
				if(this.list[this.current].isold){
					url="./inspectionRecord?id=" + item.id;
				}
				uni.navigateTo({
					url: url,
					// events: {
					// 	refreshData: () => {
					// 		this.init()
					// 	}
					// }
				})
			},
			change(index) {
				this.current = index;
				var list = this.list[this.current].list
				if (list.length == 0) {
					this.getList();
				}
			},
			changeShow() {
				this.show = !this.show
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		padding-bottom: 100rpx;

	}
	.listHead{
		padding-bottom:60px;
		
	}
	.head {
		background: linear-gradient(180deg, rgba(190, 211, 240, 1) 0%, rgba(244, 244, 246, 1) 100%) !important;

		::v-deep .u-navbar {
			//background: 0!important;
			background: linear-gradient(180deg, rgba(190, 211, 240, 1) 0%, rgba(244, 244, 246, 1) 100%) !important;
			height: 210rpx;
			//padding: 0 32rpx;
		}

		::v-deep .u-border-bottom:after {
			height: 0;
		}

		.tabs {
			padding: 0 32rpx
		}
	}

	.tabs {
		//display: flex;flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;

		::v-deep .u-tabs {
			background: 0 !important;
			//width: 480rpx;
		}

		::v-deep .u-tab-bar {
			background-color: #2A8EFB !important;
		}

		.screen {
			color: #415058;
			position: relative;
			font-family: Microsoft Yahei;

			::v-deep .uicon-arrow-down {
				margin-left: 4rpx;
			}
		}

		.options {
			width: 120rpx;
			height: 60rpx;
			line-height: 60rpx;
			text-align: center;
			background-color: #fff;
			color: rgba(65, 80, 88, 1);
			font-family: Microsoft Yahei;
			position: absolute;
			top: 160rpx;
			right: 24rpx;
			box-shadow: 5px 5px 10px gray;
		}

	}


	.list1,
	.list2,
	.list3 {
		padding: 0 32rpx;
		margin-top: 60px;
		margin-bottom: 10px;

		.item {
			border-radius: 8px;
			background-color: rgba(255, 255, 255, 1);
			padding: 32rpx;
			margin-bottom: 24rpx;

			.title {
				color: rgba(51, 51, 51, 1);
				font-size: 36rpx;
				margin-bottom: 16rpx;
				.titlespan{
					font-size: 36rpx;
					float: right;
				}
			}

			.group {
				display: flex;flex-wrap: wrap;
				color: rgba(119, 119, 119, 1);
				margin-top: 16rpx;
				font-weight: bold;
			}
		}

	}
	.bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #fff;
		padding: 16rpx 32rpx;
	
		uni-button {
			height: 88rpx;
			line-height: 88rpx;
			border-radius: 8px;
			background: linear-gradient(180deg, rgba(22, 119, 255, 1) 0%, rgba(16, 98, 213, 1) 100%);
			color: rgba(255, 255, 255, 1);
			font-size: 32rpx;
			font-family: Microsoft Yahei;
		}
	}
</style>