androidCnToWechatGrt/pagesStorage/outStorage/index.vue

<template>
	<view class="page" :style="{'min-height':h+'px', 'padding-top':mt+'px'}">
		<cus-header title='出库'></cus-header>
		<status-tab :style="{'position':'fixed','top':mt+'px','left':'0','width':'100%'}" :list="typeList" @changeType="changeType"></status-tab>
		<div class="boxs" v-if="dataList.length">
			<div class="box" v-for="(item,index) in dataList" :key="item.id">
				<div class="top">
					<text>{{ item.orderNo||'' }}</text>
					<div class="status" 
						:class="{'wrk':item.orderStatus==0,'yrk':item.orderStatus==1,'zf':item.orderStatus==-1}"
					>{{ receiptStatus[item.orderStatus]||'' }}</div>
				</div>
				<div class="content">
					<div class="pre">
						<div class="title">总数量</div>
						<div class="nr">{{ item.totalQuantity||'' }}</div>
					</div>
					<div class="pre">
						<div class="title">总金额</div>
						<div class="nr money">￥{{ item.totalAmount||'' }}</div>
					</div>
					<div class="pre">
						<div class="title">仓库</div>
						<div class="nr">{{ item.warehouseName||'' }}</div>
					</div>
					<div class="pre">
						<div class="title">出库类型</div>
						<div class="nr">{{ shipmentType[item.optType]||'' }}</div>
					</div>
					<div class="pre">
						<div class="title">操作人</div>
						<div class="nr">{{ item.updaterName||'' }}</div>
					</div>
					<div class="pre">
						<div class="title">操作时间</div>
						<div class="nr">{{ item.updateDate||'' }}</div>
					</div>
					<div class="pre bfb">
						<div class="title">客户</div>
						<div class="nr">{{ item.merchantName||'' }}</div>
					</div>
				</div>
				<div class="goods" v-if="item.goodsList.length&&item.goodsShow">
					<div class="good" v-for="(good,idx) in item.goodsList" :key="good.id">
						<div class="name_price">
							<text>{{ good.item.itemName }}</text>
							<span>￥{{ good.amount||'' }}</span>
						</div>
						<div class="info_num">
							<div class="info">规格信息：<span>{{ good.itemSku.skuName }}</span></div>
							<div class="num">数量：<span>{{ good.quantity }}</span></div>
						</div>
					</div>
				</div>
				<div class="more" @tap="getGoodsListById(item.id,index)">
					<text>{{ item.goodsShow?'收起':'商品明细' }}</text>
					<image :src="imgBase+'storage/icon_jtdown_blue.png'" :class="{'sq':item.goodsShow}"></image>
				</div>
			</div>
			<page-loading :loading="isLoading"></page-loading>
		</div>
		<template v-else>
			<page-empty :height="'calc(100vh - 200px)'"></page-empty>
		</template>
		<div class="add">
			<div class="btn" @tap="addReceipt">新增出库单</div>
		</div>
	</view>
</template>

<script>
	import statusTab from '../components/statusTab/index.vue'
	import pageLoading from '../components/pageLoading/index.vue'
	import pageEmpty from '../components/pageEmpty/index.vue'
	export default {
		components:{
			statusTab,
			pageLoading,
			pageEmpty
		},
		data(){
			return {
				typeList:[],
				receiptStatus:{},
				shipmentType:{},
				isOver:false,
				isLoading:false,
				params:{
					page:1,
					limit:10,
					orderStatus:''
				},
				dataList:[],
			}
		},
		onLoad() {
			this.getSeceiptStatus();
			this.getSeceiptType();
			this.getDataList();
		},
		onReachBottom() {
			if(this.isOver) return
			this.getDataList();
		},
		methods:{
			changeType(status){
				this.dataList = [];
				this.params.orderStatus = status;
				this.params.page = 1;
				this.isOver = false;
				this.isLoading = false;
				this.getDataList();
			},
			getSeceiptStatus(){
				this.$api.get('/sys/dict/data/getListByType/wms_shipment_status').then(res=>{
					if(res.data.code===0){
						this.typeList = res.data.data;
						res.data.data.forEach(d=>{
							this.receiptStatus[d.dictValue] = d.dictLabel;
						})
						this.typeList.unshift({dictValue:'',dictLabel:'全部'})
					}else this.$showToast(res.data.msg)
				});
			},
			async getSeceiptType(){
				let res = await this.$api.get('/sys/dict/data/getListByType/wms_shipment_type');
				if(res.data.code===0){
					res.data.data.forEach(d=>{
						this.shipmentType[d.dictValue] = d.dictLabel;
					})
				}else this.$showToast(res.data.msg)
			},
			getDataList(){
				this.isLoading = true;
				this.$api.get('/wms/shipmentOrder/page',this.params).then(res=>{
					if(res.data.code===0){
						if(this.dataList.length<res.data.data.total){
							this.params.page++;
							this.dataList = [...this.dataList,...res.data.data.list];
							this.dataList.forEach((d,i)=>{
								this.$set(this.dataList[i],'goodsList',[]);
								this.$set(this.dataList[i],'goodsShow',false);
							})
						}else this.isOver = true
					}else this.$showModal(res.data.msg)
					this.isLoading = false;
				});
			},
			getGoodsListById(id,index){
				this.$set(this.dataList[index],'goodsShow',!this.dataList[index].goodsShow);
				if(!this.dataList[index].goodsShow) return
				this.$api.get('/wms/shipmentOrder/getByShipmentOrderId/'+id).then(res=>{
					if(res.data.code===0){
						this.$set(this.dataList[index],'goodsList',res.data.data);
					}else this.$showModal(res.msg)
				})
			},
			addReceipt(){
				uni.navigateTo({
					url:'/pagesStorage/outStorage/add'
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.page{
		padding: 0 0 186rpx;
		background: #F4F8FB;
		box-sizing: border-box;
		
		.boxs{
			width: 100%;
			padding: 20rpx 24rpx 0;
			margin-top: 102rpx;
			box-sizing: border-box;
			.box{
				width: 100%;
				margin-top: 20rpx;
				background: #FFFFFF;
				border-radius: 16rpx;
				padding-bottom: 40rpx;
				&:first-child{
					margin-top: 0;
				}
				.top{
					width: 100%;
					height: 90rpx;
					padding: 0 24rpx;
					box-sizing: border-box;
					display: flex;
					align-items: center;
					justify-content: space-between;
					border-bottom: 1rpx dotted #ECECEC;
					text{
						font-family: PingFang-SC, PingFang-SC;
						font-weight: bold;
						font-size: 30rpx;
						color: #1D2129;
						line-height: 30rpx;
						text-align: left;
					}
					.status{
						font-family: PingFang-SC, PingFang-SC;
						font-weight: bold;
						font-size: 26rpx;
						line-height: 30rpx;
						text-align: right;
						&.wrk{
							color: #FEB000;
						}
						&.yrk{
							color: #14CC8C;
						}
						&.zf{
							color: #FF4141;
						}
					}
				}
				.content{
					width: 100%;
					padding: 0 24rpx 40rpx;
					box-sizing: border-box;
					display: flex;
					flex-wrap: wrap;
					.pre{
						width: 50%;
						margin-top: 36rpx;
						display: flex;
						.title{
							width: 116rpx;
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #86909C;
							line-height: 24rpx;
							text-align: left;
						}
						.nr{
							width: calc(100% - 116rpx);
							font-family: PingFangSC, PingFang SC;
							font-weight: bold;
							font-size: 26rpx;
							color: #1D2129;
							line-height: 24rpx;
							text-align: left;
						    white-space: nowrap;
						    text-overflow: ellipsis;
						    overflow: hidden;
							&.money{
								color: #F95050;
							}
						}
						&.bfb{
							width: 100%;
						}
					}
				}
				.goods{
					width: calc(100% - 20rpx);
					margin: 0 auto 40rpx;
					.good{
						width: 100%;
						padding: 36rpx 16rpx;
						box-sizing: border-box;
						background: #F0F8FE;
						box-shadow: inset 0rpx -1rpx 0rpx 0rpx #ECECEC;
						&>div{
							display: flex;
							align-items: center;
							justify-content: space-between;
						}
						.name_price{
							text{
								font-family: PingFangSC, PingFang SC;
								font-weight: 400;
								font-size: 28rpx;
								color: #1D2129;
								line-height: 30rpx;
								text-align: left;
							}
							span{
								font-family: PingFang-SC, PingFang-SC;
								font-weight: bold;
								font-size: 26rpx;
								color: #F95050;
								line-height: 26rpx;
								text-align: right;
							}
						}
						.info_num{
							margin-top: 24rpx;
							.info{
								font-family: PingFangSC, PingFang SC;
								font-weight: 400;
								font-size: 24rpx;
								color: #86909C;
								line-height: 24rpx;
								text-align: left;
								span{
									color: #4E5969;
								}
							}
							.num{
								font-family: PingFangSC, PingFang SC;
								font-weight: 400;
								font-size: 24rpx;
								color: #86909C;
								line-height: 24rpx;
								span{
									font-weight: bold;
									font-size: 26rpx;
									color: #4E5969;
								}
							}
						}
					}
				}
				.more{
					display: flex;
					align-items: center;
					justify-content: center;
					text{
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 28rpx;
						color: #198CFF;
						line-height: 28rpx;
					}
					image{
						width: 24rpx;
						height: 24rpx;
						margin-left: 10rpx;
						&.sq{
							transform: rotate(180deg);
						}
					}
				}
			}
		}
	
		.add{
			width: 100%;
			height: 148rpx;
			padding: 20rpx 48rpx 0;
			box-sizing: border-box;
			background: #FFFFFF;
			position: fixed;
			left: 0;
			bottom: 0;
			.btn{
				width: 100%;
				height: 88rpx;
				background: #198CFF;
				border-radius: 16rpx;
				font-family: PingFang-SC, PingFang-SC;
				font-weight: bold;
				font-size: 32rpx;
				color: #FFFFFF;
				line-height: 88rpx;
				text-align: center;
				letter-spacing: 2rpx;
			}
		}
	}
</style>