JP-Equipment-Jingli/pages/projectDepartment/exportProcess/exportProcess.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()" v-if="false">
					筛选<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="listProcess">
				<view  style="display: flex;" v-show="current==0"
				v-for="(item, index) in list[0].list" :key="index" >
				
							<u-checkbox 
								
								v-model="item.checked" 
								:name="item.id"
								
							>
							
							</u-checkbox>
							<view class="item"  @click="ckInfo(item.id,current)" >
								<view class="title">
									{{item.projectName}}
								</view>
								<view class="group">
									<view class="name">
										所属项目部：
									</view>
									<view class="value">
										{{item.departmentName}}
									</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>
						
					</view>	
						
				
				
				
				<view  v-show="current==1" v-for="(item,i) in list[1].list" @click="ckInfo(item.id,current)" :key="i">
						
					
					<view class="item" >
						<view class="title">
							<span v-if="current==1"
								style="margin-right: 6px;"
								:style="{color:recordStatusColor(item.status)}">[{{item.statusN}}]</span>
							{{item.projectName}}
						</view>
						<view class="group">
							<view class="name">
								所属项目部：
							</view>
							<view class="value">
								{{item.departmentName}}
							</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>
				</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 class="bottom"  v-show="current==0">
			
			<u-checkbox v-model="checked" @change="checkedAll" >
			全选
			</u-checkbox>
			<span style="float: right;">
				<u-button   size="medium" @click="submit(2)"
				
				type="revoke" style="border-radius:10px 0 0 10px"  >拒绝</u-button>
					<u-button  @click="submit(1)"
					
					size="medium" type="primary"  style="border-radius:0 10px  10px 0" >同意</u-button>
				
			</span>
		</view>
	
	</view>
</template>

<script>
	import * as API from '@/apis/pagejs/approve.js'
	import {
		recordStatus,
		recordStatusColor
	} from '@/apis/status.js'
	export default {
		data() {
			return {
			
				list: [{
					name: '审批中',
					pageIndex: 1,
					pageSize: 50,
					recordsTotal: 1,
					status:"0",
					list:[]
				}, {
					name: '已审批',
					pageIndex: 1,
					pageSize: 20,
					recordsTotal: 1,
					 status:"1",
					list:[]
				}],
				current: 0,
				show:false,
				checked:false,
			}
		},
		
		onReachBottom() {
			console.log("onReachBottom")
			var obj=this.list[this.current]
			if (obj.list.length < obj.recordsTotal) {			
				this.myLoadmore();
			}
		},
		onReady(){
			this.getList()
		},
		methods: {
			recordStatus,
			recordStatusColor,
			checkedAll(e) {
				
						this.list[0].list.map(val => {
							val.checked = e.value;
						})
			},
			getList(val){
							
							 uni.showLoading({
							 	title: "加载中",
							 	mask: true,
							 })
							 var list=this.list[this.current].list
							 var obj=this.list[this.current]
							 var listForm={...obj}
							 delete listForm.list
							 
							 API.outApproveList(listForm).then((res) => {
							 
								if(listForm.pageIndex==1){
									list = res.data.data;
								}else{
									list = [
										...list,
										...res.data.data
									];
								}
								this.list[this.current].list=list
						
							 	this.list[this.current].recordsTotal = res.data.recordsTotal;
								if(this.current==0){
									this.carhelp.set("badgeList_outApproveList",res.data.recordsTotal)
								}
								
								if(val!='init'){
									uni.hideLoading();
								}
								
							 }).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.list[0].list=[]
				this.list[1].list=[]
				this.getList('init')
			},
			ckInfo(id,status){
				var url="./deliveryDetails?id="+id;
				
				if(status!=0){
					url="./deliveryInfo?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();
				 }
				
			},
			submit(status){
				var list=this.list[0].list.filter(val => {
					return val.checked
				}).map(var2=>{
					return var2.id
				})
				
				if(list.length){
					
				} else{
					uni.showToast({
						title:"请勾选记录"
					})
					return;
				}
				var ids=list.join()
				
				var message=""
				var _this=this;
				if(status==2){
					message="拒绝"
					
				}else{
					message="同意"
					//this.showpopup=true;
				}
				
				uni.showModal({
					title:"提示",
					content:"是否"+message+"出库审批",
					success(res) {
						
						if(res.confirm){
							_this.saveRecordApprove(status,ids);
						}else{
							
						}
					}
				})
				
			},saveRecordApprove(status,ids){
				
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API.saveRecordApprove({
					recordIds:ids,
					status:status,
					//signUrl:this.signUrl
				}).then((res) => {
					//this.showpopup=false;
				
					// uni.showToast({
					// 	title:"操作成功"
					// })
					
					uni.showModal({
						title:"提示",
						content:"操作成功",
						showCancel:false,
						success(resc) {
							
							if(resc.confirm){
								
							}else{
								
							}
						}
					})
					
					
					this.current=0
					this.list[0].pageIndex=1
					this.list[1].pageIndex=1
					this.list[0].list=[]
					this.list[1].list=[]
					this.getList()
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			 
		}
	}
</script>

<style lang="scss" scoped>
	page{
		padding-bottom: 100rpx;
		
	}
	.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;
		}
		.screen{
			color: #415058;
			position: relative;
			font-family: Microsoft Yahei;
			/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;
		}
		
	}


 .listProcess{
	 padding: 0 32rpx;
		margin-top: 60px;
		margin-bottom: 10px;
	 .item{
		 width: 640rpx;
		 border-radius: 8px;
		 background-color: rgba(255, 255, 255, 1);
		 padding: 18rpx 32rpx ;
		 margin-bottom: 24rpx;
		 .title{
			 color: rgba(51, 51, 51, 1);
			 font-size: 36rpx;
			 margin-bottom: 8rpx;
		 }
		 .group{
			 display: flex;
			 color: rgba(119, 119, 119, 1);
			font-size: 24rpx;
			// font-weight: bold;
		 }
	 }
	 
 }

.bottom{
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: #fff;
	padding: 16rpx 32rpx;
	
}
</style>