JP-Equipment-Jingli/pages/storeManagement/equipmentEnter/equipmentEnter.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>
		
			
		</u-navbar>
		<view class="search"  v-show="current==0"  >
			<!-- <u-icon name="arrow-left" @click="back()"  size="36"></u-icon> -->
			<view class="search-box">
				<u-search   :show-action="true" class="u-search"
				v-model="queryContent" @search="initQuery()"
				 @custom="initQuery()"
				 placeholder="项目名称搜索"
				 action-text="搜索" :animation="true"></u-search>
		
		
				<!-- <u-search class="u-search" placeholder="搜索设备名称或型号" v-model="queryContent" :show-action="false">
		
				</u-search>
				 -->
				<!-- <view class="search-btn" @click="initQuery()" >
				 	<view class="text">
				 		搜索
				 	</view>
				 </view> -->
			</view>
		</view>
	
		<view :class="current==0?'list1':'list2'" >
			<view class="item" v-for="(item,i) in list[current].list" @click="ckInfo(item.id)" :key="i" >
				<view class="title">
					<view class="name">
						{{item.projectName}}
					</view>
					<!-- <view class="classify">
						耗材
					</view>
					<view class="state">
						待入库
					</view> -->
				</view>
				
				<view class="group">
					<view class="name">
						提交人：
					</view>
					<view class="value">
						{{item.createByName}}
					</view>
				</view>
				<view class="group">
					<view class="name">
						创建时间：
					</view>
					<view class="value">
						{{item.createTime}}
					</view>
				</view>
				<view class="group" v-if="item.approveTime">
					<view class="name">
						入库时间：
					</view>
					<view class="value">
						{{item.approveTime}}
					</view>
				</view>
			</view>
			<u-divider  v-if="list[current].recordsTotal==list[current].list.length"
			 :isnone="list[current].recordsTotal==0" nonetext="没有找到相关内容" 
			border-color="#CFD2D5">已经到底了</u-divider>
		</view>
		
		
		
	</view>
</template>

<script>
	import * as API from '@/apis/pagejs/storeManagement.js'
	
	export default {
		data() {
			return {
				queryContent:"",
				list: [{
					name: '待入库',
					pageIndex: 1,
					pageSize: 20,
					recordsTotal: 1,
					 status:"0",
					list:[]
				}, {
					name: '已入库',
					pageIndex: 1,
					pageSize: 20,
					recordsTotal: 1,
					 status:"1",
					list:[]
				}],
				current: 0
			}
		},
		onReachBottom() {
		
			var obj=this.list[this.current]
			if (obj.list.length < obj.recordsTotal) {			
				this.myLoadmore();
			}
		},
		onReady(){
			this.getList()
		},
		methods: {
			getList(){
							
							 uni.showLoading({
							 	title: "加载中",
							 	mask: true,
							 })
							 var list=this.list[this.current].list
							 var obj=this.list[this.current]
							 var listForm={
								...obj
							 }
							 delete listForm.list
							 if(this.current==0){
								  listForm.projectName=this.queryContent;
							 }
							
							 API.inWaitList(listForm).then((res) => {
							 	uni.hideLoading();
								if(listForm.pageIndex==1){
									list = res.data.data;
								}else{
									list = [
										...list,
										...res.data.data
									];
								}
							 	this.list[this.current].list=list
							 	if(this.current==0){
							 		this.carhelp.set("badgeList_inWaitList",res.data.recordsTotal)
							 	}
							 	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
				this.list[0].pageIndex=1
				this.list[1].pageIndex=1
				this.getList()
			},
			initQuery(){
				//this.current=0
				this.list[0].pageIndex=1
				this.list[1].pageIndex=1
				this.getList()
			},
			ckInfo(id){
				var url="./deliveryDetails?id="+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();
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		padding-bottom: 100rpx;
		
	}
	// 搜索
	.search {
		margin-top: 40px;
		padding: 12rpx 24rpx;
		//display: flex;
		border-radius: 8px;
		overflow: hidden;
	
		.search-box {
			border: 1px solid;
			//display: flex;
			border-radius: 8px;
			overflow: hidden;
		}
		
		.u-search {
			//width: 630rpx;
			margin: auto !important;
			position: relative;
			flex: 0;
			margin: 0 !important;
			height: 64rpx !important;
		}
	
		/deep/.u-content {
			width: 430px;
			border-radius: 0px !important;
			height: 64rpx !important;
		}
	
		/deep/.u-icon--right {
			margin-right: 16rpx;
		}
	
		.search-btn {
			width: 100rpx;
			height: 64rpx;
			background-color: #f2f2f2;
	
			.text {
				height: 40rpx;
				margin: 12rpx 0;
				border-left: 1px solid #999999;
				font-family: Microsoft Yahei;
				text-align: center;
				color: rgba(16, 98, 213, 1);
				font-size: 28rpx;
			}
		}
	}
	.head {
		background: linear-gradient(180deg, rgba(190, 211, 240, 1) 0%, rgba(244, 244, 246, 1) 100%) !important;
	
		/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;
		}
	
		/deep/.u-border-bottom:after {
			height: 0;
		}
	
		.tabs {
			padding: 0 32rpx
		}
	}
	.tabs{
		display: flex;
		justify-content: space-between;
		align-items: center;
		
		
		/deep/.u-tabs{
			background: 0 !important;
			width: 250rpx;
		}
		/deep/.u-tab-bar{
			background-color: #2A8EFB !important;
		}
	}

 .list1{
	 margin-top: 10px;
 }
 .list2{
 	 margin-top: 60px;
 }
 .list1,.list2{
	 padding: 0 32rpx;
		
		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;
			 display: flex;
			 align-items: center;
			 .classify{
				 margin-left: 26rpx;
				 padding: 10rpx 16rpx;
				 border-radius: 4px;
				 background-color: rgba(219, 255, 212, 1);
				 color: rgba(69, 186, 69, 1);
				 font-size: 24rpx;
				 text-align: center;
			 }
			 .state{
				 margin-left: auto;
				 color: rgba(22, 119, 255, 1);
				 font-size: 32rpx;
			 }
		 }
		 .group{
			 display: flex;
			 color: rgba(119, 119, 119, 1);
			 margin-top: 16rpx;
			 font-weight: bold;
		 }
	 }
	 
 }
</style>