emergencyManagement/packageA/pages/goods/record.vue

<template>
	<view class="page-wrap">
		<view class="pageTabs">
			<uni-segmented-control :current="tabIdx" :values="tabs" style-type="text" active-color="#007aff" @clickItem="changeTab" />	
		</view>	
		<view class="pageMain">
			<uni-swipe-action class="item-action-box">
				<uni-card padding="10px 0" margin="5px 0" v-for="item in items" :key="item.memberId">
					<uni-swipe-action-item class="item-action" :auto-close="true">
						<template v-slot:right>
							<view class="slot-button">
								<view class="bt edit" @click="handle({type:'edit',item})"><text class="slot-button-text">编辑</text></view>
								<view class="bt del" @click="handle({type:'del',item})"><text class="slot-button-text">删除</text></view>
							</view>
						</template>
						<view class="item" @click="handle({type:'detail',item})">
							<view class="title">
								<view class="name">{{item.accountName}}</view>									
								<view class="num">
									<uni-tag :text="`${item.qty}`" custom-style="background-color: #ecf5ff; border-color: #d9ecff; color: #409eff;"></uni-tag>
								</view>
							</view>
							<view class="tagbox">								
								<uni-tag :text="item.goodsTitle" type="success"></uni-tag>
								<uni-tag :text="item.goodsCatTitle" custom-style="background-color: #ecf5ff; border-color: #d9ecff; color: #409eff;"></uni-tag>								
							</view>
							<view class="location">
								<uni-icons type="location-filled" size="15" color="#999"></uni-icons>
								<text class="word">{{item.location}}</text>
							</view>
							<view class="bottom">
								<view class="time">{{item.time}}</view>
							</view>
						</view>
					</uni-swipe-action-item>
				</uni-card>
			</uni-swipe-action>
		</view>
		<RecordDetail ref="detail"></RecordDetail>
		<RecordEdit ref="edit" @success="reload" :cats="goodsCats"></RecordEdit>		
	</view>
</template>

<script>
	import goodsApi from '@/api/goods.js'
	import RecordDetail from './components/RecordDetail.vue'
	import RecordEdit from './components/RecordEdit.vue'
	
	export default {
		components:{
			RecordDetail,
			RecordEdit
		},
		data() {
			return {
				tabIdx:0,
				tabs:['入库记录','出库记录'],	
				items:[],
				goodsCats:uni.getStorageSync('goodsCats')||[],
				goodsType:undefined,
				page:1,	
				limit:10,
				total:0,	
				keywords:""	
			}
		},
		onLoad({type}) {
			this.goodsType=type
			this.tabIdx=type- 1
			this.resetFilter()
			this.getData()
		},
		methods: {
			changeTab({currentIndex}){
				if (this.tabIdx !== currentIndex) {
					this.tabIdx = currentIndex				
					this.resetFilter()
					this.getData()
				}
			},
			reload(){
				this.resetFilter()
				this.getData()
			},
			init(){
				if(!uni.getStorageSync('goodsCats')){
					goodsApi.getCatByList().then((res)=>{
						uni.setStorageSync('goodsCats',res.data)
						this.goodsCats=res.data
					})
				}
			},
			getData(){
				const getByPage=this.tabIdx===0?goodsApi.getInboundByPage:goodsApi.getOutboundByPage
				const items=JSON.parse(JSON.stringify(this.items))
				getByPage({
					page:this.page,
					limit:this.limit,
					goodsType:this.goodsType
				}).then((res)=>{
					let data=res.data.map((item)=>{
						return{
							...item,
							time:this.tabIdx===0?item.inboundTime:item.outboundTime,
							location:this.tabIdx===0?item.inboundLocation:item.outboundLocation,
						}
					})
					this.items=items.concat(data)
					this.total=res.total
				})
			},
			handle({type,item}){
				let goodsRecordType=this.tabIdx===0?'in':'out';
				let id=this.tabIdx===0?item.inboundId:item.outboundId
				const self=this;
				if(type==='del'){
					uni.showModal({
						title: '提示',
						content: '是否确定删除',
						success: function (res) {
							if (res.confirm) {
								const deleteBoundById=goodsRecordType==='in'?goodsApi.deleteInboundById:goodsApi.deleteOutboundById;
								deleteBoundById(id).then(()=>{
									uni.showToast({
										title:'删除成功！',
										icon:'none'
									})
									self.resetFilter()
									self.getData()
								})
					
							}
						}
					});
				}else{
					if(type==='detail'){
						this.$refs.detail.show(goodsRecordType,id)
					}
					if(type==='edit'){
						this.$refs.edit.show({type:goodsRecordType,item})
					}
				}
			},
			resetFilter(){
				this.page = 1
				this.limit = 10
				this.total = 0
				this.items=[]
			}
		},
		onReachBottom() {
			if(this.total>this.limit*this.page){
				this.page++
				this.getData()				
			}
		}
	}
</script>
<style lang="scss" scoped>
.page-wrap{
	padding:0 20rpx;
	.pageTabs{
		background-color: #fff;
	}
	.pageMain{
		margin-top: 20rpx;
		background-color: #f5f5f5;
		padding-bottom: 50rpx;
		.item{
			.title{
				display: flex;
				justify-content: space-between;
				align-items: center;
				.name{
					font-size: 36rpx;
					color: #222222;
					font-weight: 500;
				}
				.num{
					font-size: 32rpx;
					color: #424242;
				}
			}
			.tagbox{
				font-size: 24rpx;
				color: #666666;
				padding: 14rpx 0;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
			.location{
				display: flex;
				align-items: center;
			}
			.bottom{
				.time{
					font-size: 24rpx;
					color: #666666;
				}
			}
		}
		.slot-button{
			width: 400rpx;
			height: 100%;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			color: #fff;
			padding-left: 10px;
			.bt{
				width: 50%;
				height: 100%;
				font-size: 30rpx;
				box-sizing: border-box;
				display: flex;
				justify-content: center;
				align-items: center;
				&.edit{
				    background-color:#007aff;
				}
				&.del{
					background-color:#F56C6C;
				}
				&.detail{
					background-color: #e6a23c;
				}
			}
		}
	}
}
</style>