jp-railway/pages/oawork/approve/list.vue

<template>
	<view>
		<u-navbar :title="title">
			
		</u-navbar>
		
		<u-tabs :list="tabslist" v-if="showTabs" :is-scroll="false" :current="current" @change="change"></u-tabs>
		
		<view class="list1">
			<view class="item" v-for="(item,i) in list" @click="ckInfo(item)" :key="i">
				 
				<view class="group">
					<view  class="group1">
						<view class="name">
							审批类型：
						</view>
						<view class="value">
							{{item.templateName}}
							
						</view>
					</view>
				
					<view  class="group2">
						<view class="title">
							<span :style="{color:recordStatusColor(item.status)}">{{item.statusN}}</span>
							
						</view>
					</view>
				</view>
				<view class="group">
					<view  class="group1">
						<view class="name">
							提交人：
						</view>
						<view class="value">
							{{item.personName}}
							
						</view>
					</view>
				</view>
				<view class="group">
					<view  class="group1">
						<view class="name">
							提交时间：
						</view>
						<view class="value">
							{{item.createTime}}
						</view>
					</view>
				</view>
		
			</view>
			<u-divider  v-if="formData.recordsTotal==list.length"
			 :isnone="formData.recordsTotal==0" nonetext="没有找到相关内容" 
			border-color="#CFD2D5">已经到底了</u-divider>
		</view>
		
		
	<!-- 	<view class="bottom">
			<u-button type="primary"  @click="addInfo">公文提报</u-button>
		</view> -->
		
	</view>
</template>

<script>
		import * as API from '@/apis/pagejs/oa.js'
	export default {
		data() {
			return {
				oatype:"",
				formData:{
					pageIndex: 1,
					pageSize: 20,
					recordsTotal: 0,
				},
				tabslist:[{
					name:"未处理",
					current:0,
				},{
					name:"已处理",
					current:1,
				},],
					current:0,
					title:"列表",
				list: [
					
				],
				showTabs:true
			}
		},
		onLoad(op){
			this.oatype=op.oatype;
			if(op.oaname){
				this.title=op.oaname;
			}
			 if(this.oatype=="view"){
				 this.showTabs=false
			 }
			
			this.getList();
		},
		onReachBottom() {
			
			if (this.list.length < this.formData.recordsTotal) {
				this.myLoadmore();
			}
		},
		methods: {
			init(){
				this.formData.pageIndex = 1;
				this.getList();
			},
			ckInfo(info){
				var url=""
				if(info.status==0){
					url="/pages/oawork/approve/info"
				}else{
					url="/pages/oawork/approve/view"
				}
				if(this.oatype=="view"){
					url="/pages/oawork/approve/view"
				}
				uni.navigateTo({
					url:url+"?id="+info.businessKey+"&oatype="+info.type+"&pid="+info.id,
					events: {
						refreshData: () => {
							this.init()
						}
					}
				})
				 
			},
			change(index) {
				this.formData.pageIndex=1;
							this.current = index;
							this.getList();
							
			},
			
			getList(){
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				//this.formData.formId=this.oatype
				this.formData.status=this.tabslist[this.current].current
				if(this.oatype=="view"){
					this.formData.status=2
				}
				API.approveList(this.formData).then((res) => {
					
					uni.hideLoading();
					if(this.formData.pageIndex==1){
						this.list = [
							
							...res.data.data
						];
					}else{
						this.list = [
							...this.list,
							...res.data.data
						];
					}
				
					this.recordsTotal = res.data.recordsTotal;
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			addInfo(){
				uni.navigateTo({
					url:"/pages/oawork/business/add?oatype="+this.oatype,
					events: {
						refreshData: () => {
							this.init()
						}
					}
				})
			},
			myLoadmore() {
				this.formData.pageIndex += 1;
				this.getList();
			},
		}
	}
</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;flex-wrap: wrap;
		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;
		}

	}


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

			

			.group {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				
				color: rgba(119, 119, 119, 1);
			//	margin-top: 16rpx;
				font-weight: bold;
				.name{
					color:#777777;
				}
				.value{
					color:#333333;
				}
				.group1{
					display: flex;flex-wrap: wrap;
				}
				.group2{
					
				}
			}
		}

	}

	.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>