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

<template>
	<view>
		<u-navbar :titleLong="fieldInfo.title">
			
		</u-navbar>
		
		
		<view class="list1">
			<view class="item" v-for="(item,i) in list" @click="ckInfo(item)" :key="i">
				 
				<view class="group" v-for="(tinfo,i) in typeKey" :key="i">
					<view  class="group1" >
						<view class="name">
							{{tinfo.name}}：
						</view>
						<view class="value">
							{{item[tinfo.key]}}
							
						</view>
					</view>
					<view  class="group2" v-if="i==0">
						<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.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'
	import {
		dataJsGetInfo
	}  from '../data.js'
	export default {
		data() {
			return {
				oatype:"",
				title:"",
				typeKey:[],
				formData:{
					pageIndex: 1,
					pageSize: 20,
					recordsTotal: 0,
				},
				list: [
					
				],
			}
		},
		onLoad(op){
			this.oatype=op.oatype;
			
			
			this.fieldInfo=dataJsGetInfo(op.oatype)
			this.title=this.fieldInfo.title
			this.typeKey=this.fieldInfo.typeKey;
		},
		onReady() {
			this.getList();
		},
		
		onReachBottom() {
			
			if (this.list.length < this.formData.recordsTotal) {
				this.myLoadmore();
			}
		},
		methods: {
			init(){
				this.formData.pageIndex = 1;
				this.getList();
			},
			addInfo(){
				uni.navigateTo({
					url:"/pages/oawork/business/add?oatype="+this.oatype,
					events: {
						refreshData: () => {
							this.init()
						}
					}
				})
			},
			ckInfo(info){
				var url=""
				if(info.status==-1){
					url="/pages/oawork/business/add"
				}else{
					url="/pages/oawork/business/info"
				}
				uni.navigateTo({
					url:url+"?id="+info.id+"&oatype="+this.oatype,
					events: {
						refreshData: () => {
							this.init()
						}
					}
				})
				 
			},
			recordStatusColor(val){
				var retu = ""
				val=val+''
				switch (val) {
					case '-1':
						retu = '#f29a38'
						break;
					case '0':
						retu = '#f29a38'
						break;
					case '1':
						retu = '#52b56b'
						break;
					case '2':
						retu = '#c94031'
						break;
					case '3':
						retu = '#3a3bc2'
						break;
					case '5':
						retu = '#c94031'
						break;
					case '6':
						retu = '#c94031'
					case '9':
						retu = '#c94031'
						break;
					default:
						retu = '#52b56b'
						break;
				}
			
				return retu
			},
			getList(){
				
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				this.formData.formId=this.oatype
				API.processList(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.formData.recordsTotal = res.data.recordsTotal;
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
				
			},
			
			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>