hldy_app_mini/pages/procurement/components/inboundoutbound.vue

<template>
	<view>
		<view class="crkcard guodu"  :class="show?'':'unclass'" :style="showbox?'z-index:220':'z-index:-2'">
			<view class="titletop">
				出入库
			</view>
			<view class="select">
				<view>
					<!-- <view @click="tive(1)" :class="actv==1?'act':''">全部</view> -->
					<view  @click="tive()">
						{{actv?'日期从近到远':'日期从远到近'}}
						<image src="/static/index/hulilist/xia.png" class="guodu" :style="!actv?'transform: rotate(180deg);':''" mode="aspectFill"></image>
					</view>
				</view>
				<view>
					<text>总计:{{wlobjs.crkzl}}笔</text>
					<text>出库：{{wlobjs.cksl}}</text>
					<text>入库：{{wlobjs.rksl}}</text>
				</view>
			</view>
			<scroll-view scroll-y="true" class="crkscroll" scroll-with-animation @scrolltolower="scrolltolower()">
				<view class="cgrk" v-for="(v,i) in list" :key='i'>
					<view>
						<text>{{v.crkType_dictText}}{{v.crkStatus_dictText}}</text>
						<text>{{v.content}}</text>
						<text>{{v.createTime}}</text>
					</view>
					<view>
						<text :class="v.crkStatus!=1?'c':'l'">{{v.crkStatus==1?'+':'-'}}{{v.crkNum}}</text>
						<text>库存：{{v.dqkcl}}</text>
						<text> </text>
					</view>
				</view>
				<view style="height:2vw;width: 100%;display: flex;align-items: center;justify-content: center;">
					<u-loadmore :status="status" :loadText="{nomore:'暂无更多数据'}" v-if="list.length>3" />
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref, onMounted, reactive, onBeforeUnmount, computed, nextTick ,defineComponent,watch} from 'vue';
	import { queryCrkInfoNumList ,queryCrkInfoList } from '../api/lunpan.js'
	const props = defineProps({ 
			 wl:{
				 type:Object
			 },
			 show: {
			 	type: Boolean,
			 	default:false,
			 	required: true,
			 },
	})
	const actv = ref(true);
	const tive = ()=>{
		actv.value = !actv.value;
		pageNo.value = 1;
		list.value = [];
		InfoList()
	}
	 const showbox = ref(false)
	 watch(()=>props.show,
	 	()=>{
	 		if(props.show==true){
				InfoNum();
				InfoList();
	 			setTimeout(()=>{
	 				showbox.value = true;
	 			},10)
	 		}else{
				pageNo.value = 1;
				setTimeout(() => {
					showbox.value = false;
					list.value = [];
				}, 400)
			}
	 	})
	const pageNo = ref(1);
	const list = ref([])
	const InfoList = () =>{
		let obj = {
			wlId:props.wl.wlId,
			nuId:props.wl.nuId,
			colomnDesc:actv.value?'desc':'asc',//asc正序，desc倒叙
			pageNo:pageNo.value,
			pageSize:10
		}
		queryCrkInfoList(obj).then(res=>{
			console.log(res.result.records)
			list.value.push(...res.result.records);
			status.value = (res.result.total == list.value.length ? 'nomore' : 'loadmore')
		})
	}
	const status = ref('loadmore')
	const scrolltolower = () =>{
		if (status.value == 'loading' || status.value == 'nomore') { return }
		status.value = 'loading';
		pageNo.value++;
		InfoList()
	}
	const wlobjs = ref({})
	const InfoNum = () =>{
		queryCrkInfoNumList({wlId:props.wl.wlId,nuId:props.wl.nuId}).then(res=>{
			wlobjs.value = res.result;
		})
	}
</script>

<style scoped lang="less">
// 出入库
.unclass {
		opacity: 0 !important;
	}
.guodu {
		transition: .4s;
		-webkit-transform-style: preserve-3d;
		-webkit-overflow-scrolling: touch;
	}
	.uncrkcard {
		top: -86vw !important;
	}

	.crkcard {
		width: 36vw;
		height: 85vh;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0rpx 0rpx 1vw 0rpx rgba(171, 171, 172, 0.29);
		border-radius: 1.6vw;
		position: fixed;
		right: 32vw;
		top: 7vw;
		padding: 1.7vw;
		z-index: 112;
		.titletop{
			width: 100%;
			height: 3.5vw;
			font-weight: bold;
			font-size: 1.8vw;
			color: #333333;
			line-height: 2.5vw;
		}

		.crkscroll {
			width: 100%;
			height: calc(85vh - 15vw);
			margin-top: 1vw;
			.cgrk {
				width: 100%;
				height: 11vw;
				background: rgba(236, 237, 239, 0.4);
				border-radius: 1.6vw;
				margin: 0.8vw auto 0;
				padding: 1.8vw 1.6vw;
				display: flex;
				justify-content: space-between;

				>view {
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					&:nth-child(1) {
						text {

							&:nth-child(2),
							&:nth-child(3) {
								font-weight: 400;
								font-size: 1.4vw;
								color: #888888;
							}

							&:nth-child(1) {
								font-weight: bold;
								font-size: 1.5vw;
								color: #333333;
							}
						}
					}

					&:nth-child(2) {
						.c {
							color: #FF6600 !important;
						}

						.l {
							color: #0076D6 !important;
						}

						text {
							font-weight: 400;
							font-size: 1.4vw;
							color: #888888;
							text-align: right;

							&:nth-child(2) {
								font-weight: bold;
								font-size: 1.8vw;
								color: #333333;
							}
						}
					}
				}
			}
		}

		.select {
			width: 100%;
			height: 7vw;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			padding: 1vw 0 0 1.5vw;

			>view {
				display: flex;
				margin-left: 1.5vw;
				&:nth-child(2) {
					justify-content: space-between;

					text {
						font-weight: 400;
						font-size: 1.5vw;
						color: #555555;
					}
				}
				
				&:nth-child(1) {
					justify-content: flex-end;

					view {
						min-width: 5vw;
						height: 2.6vw;
						border-radius: 1.3vw;
						border: 1px solid #DCDCDC;
						padding: 0 1.4vw;
						align-items: center;
						display: flex;
						align-items: center;
						margin: 0 0.5vw;

						image {
							width: 0.7vw;
							height: 0.5vw;
							margin-left: 0.4vw;
						}

					}
				}
				.act{
					background: linear-gradient(to bottom, #00C9FF, #0076FF);
					color: #fff;
				}
			}
		}

		.shopcont {
			width: 100%;
			height: 10vw;
			background: rgba(236, 237, 239, 0.3);
			border-bottom: 1px solid #DCDCDC;
			display: flex;
			align-items: center;

			.cont {
				width: 26vw;
				height: 100%;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				position: relative;
				padding: 2vw 0;

				view {
					&:nth-child(4) {
						width: 5vw;
						height: 5vw;
						background: rgba(236, 237, 239, 1);
						border-radius: 1.4vw;
						display: flex;
						flex-direction: column;
						justify-content: space-around;
						align-items: center;
						font-weight: 400;
						font-size: 1vw;
						position: absolute;
						color: #888888;
						top: 2.5vw;
						right: 1.8vw;
						padding: 0.5vw 0;

						text {
							font-weight: bold;
							font-size: 1.8vw;
							color: #555555;
						}
					}

					&:nth-child(2),
					&:nth-child(3) {
						font-weight: 400;
						font-size: 1.1vw;
						color: #888888;
					}

					&:nth-child(1) {
						font-weight: bold;
						font-size: 1.4vw;
						color: #212327;
					}
				}
			}

			.img {
				width: 10vw;
				height: 9vw;
			}
		}
	}
</style>