Storage-Android-master/pages/store-manage/store-material/store-material.vue

<!-- 物料库存 直接出入库 -->
<template>
	<view class="container-wrap">
		<uni-nav-bar title="物料库存" :status-bar="true" background-color="#3F92F9" color="#FFF">
			<view slot="left">
				<u-icon name="account-fill" color="#FFF" size="35"></u-icon>
				<span style="padding: 0 5rpx;color: #FFFFFF;">{{ userInfo.name }}</span>
			</view>
			<view slot="right" @tap="$utils.back()">
				<span style="color: #FFFFFF;">返回</span>
			</view>
		</uni-nav-bar>
		<view class="container">
			<scroll-view 
				scroll-y="true" 
				style="height: calc(100vh - var(--status-bar-height) - 44px);" 
				@scrolltolower="loadMore"
				@refresherrefresh="onRefresh"
				refresher-background="transparent"
				:refresher-triggered="triggered"
				:refresher-enabled="true">
				<view class="content">
					<!-- 卡片列表 -->
					<view class="card" v-for="(item, index) in data" :key="index">
						<view class="row">
							<view class="col">
								<text class="label">物料编码：</text>
								<text class="value">{{ item.materialCode }}</text>
							</view>
						</view>
						<view class="row">
							<view class="col">
								<text class="label">物料名称：</text>
								<text class="value">{{ item.materialName }}</text>
							</view>
						</view>
						<view class="row">
							<view class="col">
								<text class="label">库存：</text>
								<text class="value">{{ item.quantity }}</text>
							</view>
						</view>
						<view class="row">
							<view class="col">
								<text class="label">单位：</text>
								<text class="value">{{ item.unitName }}</text>
							</view>
							<view class="col">
								<u-button throttleTime="300" type="primary" size="mini" style="margin-right: 0;" @click="storeHandle(1, item)">出库</u-button>
								<u-modal v-model="outShow" :title-style="{color: 'red'}">
									<view class="slot-content">
										出库
										<input type="text" value="" />
									</view>
								</u-modal>
							</view>
						</view>
						<view class="row">
							<view class="col">
								<text class="label">规格：</text>
								<text class="value">{{ item.spec }}</text>
							</view>
							<view class="col">
								<u-button throttleTime="300" type="success" size="mini" style="margin-right: 0;" @click="storeHandle(0, item)">入库</u-button>
							</view>
						</view>
					</view>
				</view>
				<u-loadmore :status="loadStatus" @loadmore="loadMore" style="margin-bottom: 30rpx;" />
			</scroll-view>
		</view>
		<uni-popup ref="popup">
		    <view class="popup-content">
				<view class="title">提示</view>
				<view class="content">
					<view class="row">
						<view class="col">
							<view class="label">数量：</view>
							<view class="value">
								<u-input v-model="form.quantity" :border="true" />
							</view>
						</view>
					</view>
					<view class="row">
						<view class="col">
							<view class="label">领料人：</view>
							<view class="value">
								<select-lay 
									:value="form.operateUser" 
									placeholder="默认当前用户" 
									:options="userList" 
									@selectitem="selectitem" :zindex="9999">
								</select-lay>
							</view>
						</view>
					</view>
				</view>
				<view class="footer flex-between">
					<u-button throttleTime="300" type="primary" size="mini" style="width: 200rpx;">提交</u-button>
					<u-button throttleTime="300" size="mini" style="width: 200rpx;">取消</u-button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userList: [],
				data: [],
				outShow: false,
				inShow: false,
				form: {
					inOutType: 0,
					materialCode: '',
					operateUser: '',
					quantity: 0,
					remark: ''
				}
			};
		},
		methods:{
			/* 选择领料人 */
			selectitem(index, item) {
				this.form.operateUser = item.value;
			},
			storeHandle (type, item) {
				this.inOutType = type
				this.materialCode = item.materialCode
				this.$refs.popup.open('center')
			},
			/* 获取用户列表 */
			getUserPageList() {
				this.$http.GetUserPageList({
					pageIndex: 1,
					pageSize: 999
				}).then(res => {
					if(res.code == 0) {
						let list = res.result.list.map(item => {
							return {
							  label: item.realName,
							  value: item.id
							}
						})
						this.userList = list
					}
				})
			},
			// 获取全部数据
			getList() {
				this.$http.GetStockDataPageList({
					pageIndex: this.pageIndex,
					pageSize: this.pageSize
				}).then(res => {
					console.log(res)
					if(res.code == 0) {
						let data = res.result
						if(data.isLastPage) {
							this.loadStatus = 'nomore'
						}else {
							this.loadStatus = 'loadmore'
						}
						if(data.totalCount > 0) {
							this.data.push(...data.list)
						}
					}
				})
			}
		},
		onLoad(option) {
			this.getList()
			this.getUserPageList()
		}
	}
</script>

<style lang="scss" scoped>
	.container-wrap{
		.container {
			.content {
				padding: 20rpx;
				.card {
					position: relative;
					margin-bottom: 20rpx;
					padding: 20rpx 30rpx;
					border-radius: 10rpx;
					background-color: #FFFFFF;
					box-shadow: 0 1px 6px -2px rgba(0, 0, 0, 0.4);
					&:last-child {
						margin-bottom: 0;
					}
					.row {
						align-items: flex-start;
						/deep/span {
							line-height: 25px;
						}
					}
				}
			}
		}
		.popup-content {
			position: relative;
			padding: 70rpx 0;
			width: 600rpx;
			height: 400rpx;
			overflow: auto;
			background-color: #FFFFFF;
			border-radius: 10rpx;
			.title {
				position: absolute;
				left: 0;
				top: 0;
				padding: 20rpx 0;
				width: 100%;
				font-size: 30rpx;
				font-weight: bold;
				text-align: center;
			}
			.content {
				padding: 0 20rpx;
				height: 100%;
				.row {
					align-items: center;
					.col {
						align-items: center;
						.label {
							width: 120rpx;
						}
					}
				}
			}
			.footer {
				padding: 10rpx 0;
				width: 100%;
				position: absolute;
				left: 0;
				bottom: 0;
			}
		}
	}
</style>