JP-Equipment-Jingli/pages/projectDepartment/exportApplication/exportApplication.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="list1">
				<view class="item" v-for="(item,i) in list[current].list" @click="ckInfo(item.id)" :key="i">
					<view class="title">
						<span v-if="item.status!=0"
							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.createByName}}
						</view>
					</view>
					<view class="group">
						<view class="name">
							申请时间：
						</view>
						<view class="value">
							{{item.createTime}}
						</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">
			<u-button type="primary"  @click="addInfo">填写出库申请</u-button>
		</view>
	</view>
</template>

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

	import {
		recordStatus,
		recordStatusColor
	} from '@/apis/status.js'

	export default {
		data() {
			return {

				list: [{
					name: '审批中',
					pageIndex: 1,
					pageSize: 20,
					recordsTotal: 1,
					status: "0",
					list: []
				}, {
					name: '已审批',
					pageIndex: 1,
					pageSize: 20,
					recordsTotal: 1,
					status: "1",
					list: []
				}],
				current: 0,
				show: false
			}
		},

		onReachBottom() {
			var obj = this.list[this.current]
			if (obj.list.length < obj.recordsTotal) {
				this.myLoadmore();
			}
		},
		onReady() {
			this.getList()
		},
		methods: {
			recordStatus,
			recordStatusColor,
			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

				API.outApplyList(listForm).then((res) => {

					if (listForm.pageIndex == 1) {
						list = res.data.data;
					} else {
						list = [
							...list,
							...res.data.data
						];
					}

					// list = [
					// 	...list,
					// 	...res.data.data
					// ];
					// list = [
					// 	...list,
					// 	...res.data.data
					// ];
					// list = [
					// 	...list,
					// 	...res.data.data
					// ];
					this.list[this.current].list = list

					this.list[this.current].recordsTotal = res.data.recordsTotal;
					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.getList()
			},
			ckInfo(id) {
				var url = "./deliveryDetails?id=" + id;
				uni.navigateTo({
					url: url,
					events: {
						refreshData: () => {
							this.init()
						}
					}
				})
			},
			addInfo() {
				var url = "./deliveryFrom";
				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;
		
	}

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

	}


	.list1,
	.list2 {
		padding: 0 32rpx;
		margin-top: 60px;
		margin-bottom: 10px;
		padding-bottom: 60px;
		.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;
			}

			.group {
				display: flex;
				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>