SmartStorage/pages/exitMaterialSelect/exitMaterialSelect.vue

<template>
	<view>
		<view class="search-bar">
			<uni-easyinput prefixIcon="search" v-model="inputs" placeholder="请输入名称"></uni-easyinput>
		</view>
		<view class="dataInfo">
			<view class="dataList" v-for="(item,index) in searchData" :key="index">
				<checkbox-group @change="checkClick(item)">
					<checkbox :checked="item.checked" />
				</checkbox-group>
				<view class="details">
					<!-- <view class="img">
						<image :src="item.url"></image>
					</view> -->
					<view class="text">
						<text>类型名称：{{item.typeName}}</text>
						<text>规格编号：{{item.typeCode}}</text>
						<text>当前在用量：{{item.num}}</text>
						<view>退料数量：<uni-easyinput style="margin-top: 15rpx;" v-model="item.offNum" placeholder="请输入" @change="exitNumChange($event, index)" type="number"></uni-easyinput></view>
					</view>
				</view>
				<!-- <view class="action">
					<text @click="reduce(item)">-</text>
					<text>{{item.offNum}}</text>
					<text @click="add(item)">+</text>
				</view> -->
			</view>
		</view>
		<view class="buy" style="background-color: #fff;">
			<view class="checked">
				<checkbox-group @tap="checkAll">
					<checkbox :checked="allChecked" />
				</checkbox-group>
				<text>全选</text>
			</view>
			<view class="total">
				<!-- {{ totalNum }} -->
				<view class="bill" @click="finishCart">
					<text>提交</text>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
import { basePath } from '../../public';
	export default {
		data() {
			return {
				iptVal: '',
				allChecked: false,
				inputs: "",
				list: [
				],
				totalFine: '',
				cartList: [],
				agreementId: '',
				submitList: {
					parentId: '',
					backApplyDetails: ''
				}
			}
		},
		computed: {
			totalNum() {
				//总计
				var str = 0;
				for (var i = 0; i < this.searchData.length; i++) {
					if (this.searchData[i].checked) {
						str += this.searchData[i].num;
					}
				}
				this.totalFine = str
				return str;
			},
			searchData: function() {
				//模糊查询
				if (!this.inputs) {
					return this.list;
				}
				return this.list.filter((item) => {
					return item.typeName.includes(this.inputs);
				});
			},
		},
		methods: {
			iconClick () {
				console.log(this.iptVal);
			},
			add(item) { //加加
				let num = item.offNum
				/* if (num >= item.num) {
					uni.showToast({
						icon: 'none',
						title: '退料数量不可大于当前在用量！'
					})
				} else { */
					item.offNum = num + 1
				// }
			},
			reduce(item) { //减减
				let num = item.offNum
				if (num > 1) {
					num -= 1
				} else if (num = 1) {
					uni.showToast({
						icon: 'none',
						title: "该器具无法再减少"
					})
				}
				item.offNum = num
			},
			// 单个商品的选择
			checkClick(item) {
				item.checked = !item.checked
				if (!item.checked) {
					this.allChecked = false
				} else {
					// 判断每一个商品是否是被选择的状态
					const goods = this.list.every(item => {
						return item.checked === true
					})
					if (goods) {
						this.allChecked = true
					} else {
						this.allChecked = false
					}
				}
			},
			checkAll() {
				this.allChecked = !this.allChecked
				if (this.allChecked) {
					this.list.map(item => {
						item.checked = true
					})
				} else {
					this.list.map(item => {
						item.checked = false
					})
				}
			},
			finishCart () {
				let that = this
				that.cartList = that.list.filter((item) => {
					return item.checked == true
				})
				console.log(that.cartList);
				if (that.cartList.length == 0) {
					uni.showToast({
						icon: 'none',
						title: '请选择退料项！'
					})
				} else {
					uni.showModal({
						title: '退料选择',
						content: '确认提交吗？',
						confirmText: '提交',
						success: (modalRes) => {
							if (modalRes.confirm) {
								console.log(this.cartList);
								that.submitList.backApplyDetails = that.cartList.map((item) => {
									return {
										typeId: item['typeId'],
										preNum: item['offNum'],
										createBy: uni.getStorageSync('userInfo').userid,
										companyId: item['companyId']
									}
								})
								console.log(that.submitList);
								// 提交退料清单
								that.$api.exitMaterial.subExitMaterial(that.submitList).then(res => {
									console.log(res);
									if (res.data.code == 200) {
										uni.showToast({
											icon: 'none',
											title: res.data.msg,
											success: () => {
												uni.navigateBack()
											}
										})
									} else {
										uni.showToast({
											icon: 'none',
											title: res.data.msg
										})
									}
								}).catch(err => {
									console.log(err);
								})
							}
						}
					})
				}
			},
			exitNumChange (e, index) {
				let that = this
				console.log(e, index);
				if (e.includes('.') || e.includes('-')) {
					uni.showToast({
						icon: 'none',
						title: '退料数量输入有误！',
						success: () => {
							that.list[index].offNum = 1
						}
					})
				}
			}
		},
		onLoad(params) {
			let that = this
			console.log(params);
			that.agreementId = params.agreeId
			that.submitList.parentId = params.id
			// 退料物料选择
			that.$api.exitMaterial.selectMaterial({
				agreementId: params.agreeId
			}).then(res => {
				console.log(res);
				if (res.data.code == 200) {
					if (res.data.data.length == 0) {
						uni.showToast({
							icon: 'none',
							title: '当前物料已退完，请重新领料！'
						})
					} else {
						for (let i = 0; i < res.data.data.length; i++) {
							res.data.data[i].num = Number(res.data.data[i].num.split('.')[0])
							res.data.data[i].offNum = 1
						}
						console.log(res);
						that.list = res.data.data
					}
				}
			}).catch(err => {
				console.log(err);
			})
		}
	}
</script>
 
 
<style>
	body{
		box-sizing: border-box;
		padding-bottom: 10vh;
	}
	
	.search-bar{
		width: 95%;
		margin: 20rpx auto;
	}
	
	/deep/uni-checkbox .uni-checkbox-input {
		border-radius: 50%;
	}
 
	/deep/uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked {
		border-color: #ddd;
		color: #fff !important;
		background-color: #2DCF8C !important;
	}
 
	/deep/uni-checkbox .uni-checkbox-input {
		border-color: #ddd;
	}
 
	/deep/uni-checkbox .uni-checkbox-input:hover {
		border-color: #ddd;
	}
 
	.search {
		padding-top: 20rpx;
	}
 
	.search .searchIput {
		background-color: #e6e6e6;
		width: 95%;
		margin: 0 auto;
		height: 72rpx;
		line-height: 72rpx;
		border-radius: 50rpx;
		padding: 0 32rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
	}
 
	.search .searchIput input {
		font-size: 26rpx;
		width: 100%;
		color: grey;
	}
 
	.search .searchIput image {
		width: 34rpx;
		height: 34rpx;
	}
 
 
 
	.dataInfo {
		width: 95%;
		margin: 0 auto;
	}
 
	.dataInfo .dataList {
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 2px solid #F1F1F1;
		padding: 25rpx 0;
	}
 
	.dataInfo .dataList .details {
		display: flex;
		align-items: center;
		flex: 1;
		font-size: 0;
	}
 
	.dataInfo .dataList .details .img image {
		width: 200rpx;
		height: 140rpx;
		padding: 0 20rpx;
	}
 
	.dataInfo .dataList .details .text text {
		color: #000;
		font-size: 23rpx;
		display: block;
		padding: 10rpx 0;
	}
 
	.dataInfo .dataList .details .text {
		color: red;
		font-size: 25rpx;
	}
 
	.dataInfo .dataList .action text {
		font-size: 25rpx;
		color: #000;
		border: 1px solid #C8C7CC;
		display: inline-block;
		line-height: 50rpx;
		width: 60rpx;
		text-align: center;
		box-sizing: border-box;
	}
 
	.dataInfo .dataList .action text:nth-child(2) {
		border-left: none;
		border-right: none;
	}
 
	.buy {
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: fixed;
		left: 50%;
		bottom: 0;
		width: 95%;
		transform: translate(-50%, 0);
	}
 
	.buy .checked {
		display: flex;
		align-items: center;
	}
 
	.buy .checked text {
		font-size: 25rpx;
		color: #000;
		padding: 0 12rpx;
	}
 
	.buy .total {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
 
	.buy .total .price {
		padding-right: 20rpx;
 
	}
 
	.buy .total .price text {
		font-size: 27rpx;
		color: #C8C7CC;
		display: inline-block;
	}
 
	.buy .total .price text:last-child {
		color: red;
		font-weight: bold;
	}
 
	.buy .total .bill text {
		font-size: 25rpx;
		color: #fff;
		display: inline-block;
		background-color: red;
		line-height: 70rpx;
		width: 150rpx;
		text-align: center;
	}
</style>