java/cath-app/pages/menu/backStockOut/popup/mxPopup.vue

<template>
	<view class="mxpopup-container">
		<uni-drawer ref="showRight" mode="right" :mask-click="false"  :width="drawerWidth" style="background-color: rgba(0, 0, 0, 0.1);">
			<view class="query_view" v-show="isShowButton">
				<button type="primary" @click="getList">查询当前单据</button>
			</view>
			<scroll-view class="mxpop_scroll" scroll-y="true" v-show="isShowList">
					<view class="uni-list">
						<slot v-for="(item, index) in listData">
							<view class="uni-list-cell"
								hover-class="uni-list-cell-hover"
								:class="{ 'selected': rkid === item.wmsBackStockOuts.id }" 
							    :key="index" @click="goProDetail(item, index, $event)"
							>
							<view style="display: flex;">
								<view class="titleV">货位:</view>
								<view class="detailV">{{ item.wmsBackStockOuts.locationName }}</view>
								<view class="tailV">{{ index+1 }}</view>
							</view>
							<view style="display: flex;">
								<view class="titleV">物料:</view>
								<view class="detailV">{{item.wmsBackStockOuts.materialName}}</view>
							</view>
							<view style="display: flex;">
									<view class="titleV">规格:</view>
									<view class="detailV">{{item.wmsBackStockOuts.materialSpecification}}</view>
							</view>
							<view style="display: flex;">
								<view class="titleV">数量:</view>
								<view class="detailV">{{ item.wmsBackStockOuts.stockQty }}</view>
							</view>
							<view style="display: flex;">
								<view class="titleV">批号:</view>
								<view class="detailV">{{ item.wmsBackStockOuts.batch }}</view>
							</view>
							<view style="display: flex;">
									<view class="titleV">标签:</view>
									<view class="detailV">{{item.wmsBackStockOuts.labelCode}}</view>
							</view>
							</view>
							<view class="s-line" /> 
						</slot>
						
					</view>
				<!-- </uni-section> -->
				
			</scroll-view>
			<view class="page-bottom">
				<view class="p-b-btn" @click="examine">
					<text class="box-text" v-show="!isShowButton">提交</text>
				</view>
				<view class="p-b-btn" @click="del">
					<text class="box-text" v-show="!isShowButton">删除</text>
				</view>
				<view class="p-b-btn" @click="closeDrawer">
					<text class="box-text">返回</text> 
				</view> 
			</view>
		</uni-drawer> 
	</view>
</template>

<script>
import { listStockOut, delStockOut, checkStatus } from '@/api/wms/backStockOut.js'
import storage from '../../../../utils/storage';
	
	export default {
		data() {
			return {
				isShowButton: true, //显示查询按钮
				isShowList: false, // 显示list
				drawerWidth: 300,
				sectionTitle: '仓库: 原材料库',
				cellBackColor: 'white',
				rkid: 0, // 当前选中数据
				selectedItemIndex: -1,
				listData:[],
			};
		},
		created(){
		  let that = this;
		  uni.getSystemInfo({
		  	success:(res=>{
		  		that.drawerWidth = res.windowWidth;
		  	})
		  });
		
		},
		mounted(){
			
		},
		methods:{
			showPopup() {
				this.$refs.mx_popup.open('bottom');
			},
			hidePopup() {
				this.$refs.mx_popup.close();
			},
			showDrawer() {
				this.isShowButton = true;
				this.isShowList = false;
				this.$refs.showRight.open();
			},
			closeDrawer() {
				this.selectedItemIndex = -1;
				this.listData = [];
				this.$refs.showRight.close();
			},
			del(){
				//删除
				let queryParams = this.rkid;
				if(queryParams && queryParams!=0){
					delStockOut(queryParams).then(res => {
						if(res.code === 200){
							uni.showToast({
								title: '删除成功',
								icon: 'none'
							})
							this.rkid = 0;
							this.getList();
						}
					});
				}
			},
			examine(){//审核
				let queryParams = [];
				for(let i=0;i<this.listData.length;i++){
					if(this.listData[i].id!=null && this.listData[i].id!=undefined && queryParams.indexOf(this.listData[i].id) == -1 ){
						queryParams.push(this.listData[i].id);
					}
				}
				if(queryParams && queryParams.length!=0){
					uni.showToast({
						title: '提交中，请稍等',
						icon: 'none',
						duration:30000
					})
					checkStatus(queryParams).then(res => {
						if(res.code === 200){
							uni.showToast({
								title: '提交成功',
								icon: 'none'
							})
							this.getList();
						}
					});
				}
			},
			goProDetail(item, index, event){
				try{
					this.selectedItemIndex = index;
					this.rkid = item.wmsBackStockOuts.id;
				}catch{
					this.rkid = 0;
				}
			},
			getList(){
				let queryParams = {"params":{}};
				let storageData = uni.getStorageSync('stock_key');
				if(storageData){
					// 显示列表
					this.isShowList = true;
					// 不显示按钮
					this.isShowButton = false;
					queryParams.params.stockIdArr = "'"+storageData.stockIdList.join("','")+"'";
					queryParams.status = 1;
					listStockOut(queryParams).then(res => {
						if(res.code === 200){
							let stockIdList = [];
							const newData = res.rows.map((item) => {  
							  // 在每个对象中插入新变量  
							  item['selected'] = false;
							  stockIdList.push(item["id"]);
							  // 返回修改后的对象  
							  return item;  
							});
							this.listData = newData;
							let data = uni.getStorageSync('stock_key');
							data.stockIdList = stockIdList;
							uni.setStorageSync('stock_key', data);
							
							// 赋值数量
							this.$emit("sendNum", this.listData.length)
						}
					});
				}else{
					uni.showToast({
						title: "当前没有单据",
						icon: "none"
					})
				}
			},
		}
	}
</script>

<style lang="less">
	
	.mxpopup-container{
		// top: 50px;
		background-color: white
	}
	
	
	.mx-bottom-toolbar{
		background-color: #fcfcfc;
		// height: 100rpx;
		width: 100%;
		position: fixed;
		bottom: 0;
		display: flex;
		justify-content: space-between;
	}
	
	.bottm-btn{
		width: 50%;
		text-align: center;
		line-height: 50px;
		font-size: 16px;
		color: black;
	}
	
	.selected {
	  background-color: #f8edb8;
	}
	
	::v-deep .uni-section-header{
		background-color: lightgray;
	}
	.uni-list-cell {
		flex-direction: column;
		// margin-top: 10px;
		// background-color: white;
		padding: 8px 12px;
	}
	
	.titleV {
		color: #888888;
		font-size: 12px;
		height: 26px;
		line-height: 26px;
		width: 60px;
		// width: auto !important;
	}
	
	.detailV {
		margin-left: 4px;
		color: #333333;
		font-size: 13px;
		height: auto;
		line-height: 26px;
		width: calc(100vw - 70px);
		// width: auto !important;;
	}

	.tailV {
		color: #888888;
		font-size: 12px;
		height: 26px;
		line-height: 26px;
		width: 10px;
	}

	.s-line{
		top: 0;
		right: 0;
		left: 0;
		height: 1px;
		margin-top: 5px;
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
		background-color: #e5e5e5;
		z-index: 1;
	}
	
	.box-text{
		font-size: 16px;
	}
	
	/* 底部操作菜单 */
	.page-bottom{
		position:fixed;
		left: 30upx;
		right: 30upx;
		bottom:20upx;
		z-index: 95;
		display: flex;
		/* justify-content: center; */
		justify-content: space-between;
			padding: 10px 20px 10px 20px;
		align-items: center;
		// width: 690upx;
		// width: 90%;
		height: 100upx;
		background: rgba(255,255,255,.9);
		box-shadow: 0 0 20upx 0 rgba(0,0,0,.5);
		border-radius: 16upx;
		
		.p-b-btn{
			display:flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			// color: $font-color-base;
			width: 96upx;
			height: 80upx;
			font-size: 16px;
		}
		
	}
	
	.query_view{
		padding: 15px;
	}
	
	::v-deep .uni-drawer{
		/* #ifndef APP-PLUS */
			top: 45px !important;
		/* #endif */
		/* #ifdef APP-PLUS */
			top: 70px !important;
		/* #endif */
	}
	
	.mxpop_scroll{
		/* #ifndef APP-PLUS */
			height: calc(100vh - 100px) 
		/* #endif */
		/* #ifdef APP-PLUS */
			height: calc(100vh - 125px) 
		/* #endif */
	}
		
</style>