FE-lab-xcx/pages_supplierCylinderManagement/views/gasCylinderManagement/outbound.vue

<!-- 气瓶出库 -->
<template>
	<view id="gasCylinderOutbound">
		<view class="gasCylinderOutbound-page">
			<view class="content-max-box">
				<view class="content-big-box">
					<view class="content-title-p">气瓶信息</view>
					<view class="content-min-box">
						<view class="content-check-box" @click="checkButton(1)" v-if="!detailsType">
							<view>选择气瓶</view>
							<view>{{newData.newData1?'更改':'请选择'}}</view>
							<uni-icons class="right-icon" type="right"></uni-icons>
						</view>
						<view class="content-bottom-text-box" v-if="newData.newData1">
							<view class="content-text-box">
								<view>气瓶编码：</view>
								<view>{{newData.newData2}}</view>
							</view>
							<view class="content-text-box">
								<view>气体：</view>
								<view>{{newData.newData3}}</view>
							</view>
							<view class="content-text-box">
								<view>气瓶规格：</view>
								<view>{{newData.newData4}}</view>
							</view>
							<view class="content-text-box">
								<view>气体类别：</view>
								<view>{{newData.newData5}}</view>
							</view>
							<view class="content-text-box">
								<view>压力：</view>
								<view>{{newData.newData6}}</view>
							</view>
							<view class="content-text-box">
								<view>纯度：</view>
								<view>{{newData.newData7}}</view>
							</view>
						</view>
					</view>
				</view>
				<view class="content-big-box">
					<view class="content-title-p">实验室信息</view>
					<view class="content-min-box">
						<view class="content-bottom-text-box" v-if="newData.newData8">
							<view class="content-text-box">
								<view>实验室名称：</view>
								<view>{{newData.newData9}}</view>
							</view>
							<view class="content-text-box">
								<view>楼栋：</view>
								<view>{{newData.newData10}}</view>
							</view>
							<view class="content-text-box">
								<view>楼层：</view>
								<view>{{newData.newData11}}</view>
							</view>
							<view class="content-text-box">
								<view>房间：</view>
								<view>{{newData.newData12}}</view>
							</view>
						</view>
					</view>
				</view>
				<view class="content-big-box" style="margin-top:30rpx;">
					<view class="content-min-box">
						<picker @change="bindPickerChange" :value="index" :range="array">
							<view class="content-check-box">
								<view>出库类型</view>
								<view>{{newData.newData17 == 1?'空瓶出库':(newData.newData17 == 2?'满瓶出库':'请选择')}}</view>
								<uni-icons class="right-icon" type="right"></uni-icons>
							</view>
						</picker>
						<view class="content-max-input-box" style="margin:0;">
							<view class="name-box">费用</view>
							<input class="uni-input input-box" v-if="newData.newData17 != 2" v-model="newData.newData14" type="number"
								maxlength="10" placeholder="请输入" />
							<p class="input-box" v-if="newData.newData17 == 2">0</p>
						</view>
					</view>
				</view>
				<view class="content-max-input-box">
					<view class="name-box">签出人</view>
					<view class="input-box" style="color:#808080;" @click='shadeButton(1)'>
						{{newData.newData13?newData.newData13:'请选择'}}</view>
				</view>
				<view class="content-max-up-box">
					<view class="name-box">出库单</view>
					<view class="up-big-box">
						<view class="img-data" v-for="(item,index) in newData.newData15" :key="index">
							<img class="min-img" @click="previewSingleImage(baseUrl+item)" :src="baseUrl+item">
							<uni-icons class="del-postion-p" @click="delImg(index)" type="close" color="red" size="20"></uni-icons>
						</view>
						<view class="add-button" @click="selectImage()" v-if="!newData.newData15[8]">
							<uni-icons type="cloud-upload" size="30" color="#666"></uni-icons>
							<view>上传照片</view>
						</view>
					</view>
				</view>
				<view class="content-max-up-box">
					<view class="name-box">备注</view>
					<textarea class="textarea textarea-box" placeholder="请输入" maxlength="100"
						v-model="newData.newData16"></textarea>
				</view>
			</view>
			<view class="bottom-button-p" @click="submitButton()">确认出库</view>
		</view>
		<view class="shade-max-big-box" v-if="shadeType">
			<view class="shade-big-top-box" @click="shadeButton(2)"></view>
			<view class="shade-big-bottom-box">
				<view class="shade-input-max-box">
					<uni-icons type="search" class="icons-box" size="20"></uni-icons>
					<input class="uni-input input-box" v-model="inputData" maxlength="20" placeholder="请输入" />
					<view class="button-box" @click="searchButton()">搜索</view>
				</view>
				<view class="list-max-box">
					<view @click="checkUserButton(item)" v-for="(item,index) in userList" :key="index">
						{{item.userName}}({{item.account}})
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		config
	} from '@/api/request/config.js'
	import {
		systemUserSelectUser
	} from '@/pages_supplierCylinderManagement/api/index.js'
	export default {
		data() {
			return {
				baseUrl: config.base_url,
				detailsType: false,
				newData: {
					newData1: '',
					newData2: '',
					newData3: '',
					newData4: '',
					newData5: '',
					newData6: '',
					newData7: '',
					newData8: '',
					newData9: '',
					newData10: '',
					newData11: '',
					newData12: '',
					newData13: '',
					newData133: '',
					newData14: '',
					newData15: [],
					newData16: '',
					newData17: '',
				},
				array: ['空瓶出库', '满瓶出库'],
				inputData: '',
				userList:[],
				shadeType:false,
			}
		},
		onLoad(options) {
			if (options.pageType) {
				let obj = JSON.parse(decodeURIComponent(options.form));
				if (options.pageType == 1) {
					//选择气瓶
					this.$set(this.newData, 'newData1', obj.id);
					this.$set(this.newData, 'newData2', obj.bottleCode);
					this.$set(this.newData, 'newData3', obj.gasName);
					this.$set(this.newData, 'newData4', obj.specification);
					this.$set(this.newData, 'newData4', obj.gasCategory);
					this.$set(this.newData, 'newData4', obj.pressure);
					this.$set(this.newData, 'newData4', obj.purity);
				} else if (options.pageType == 2) {
					//选择实验室
					this.$set(this.newData, 'newData5', obj.data5);
					this.$set(this.newData, 'newData6', obj.data6);
					this.$set(this.newData, 'newData7', obj.data7);
					this.$set(this.newData, 'newData8', obj.data8);
				} else if (options.pageType == 3) {
					//历史记录-气瓶出库
					this.$set(this, 'detailsType', true);
					this.$set(this.newData, 'newData1', "1");
					this.$set(this.newData, 'newData8', "1");
				}
			}
		},
		onShow() {

		},

		methods: {
			bindPickerChange(e) {
				if (e.detail.value == 0) {
					this.$set(this.newData, 'newData17', 1)
				} else {
					this.$set(this.newData, 'newData17', 2)
				}
			},
			checkButton(type) {
				if (type == 1) {
					uni.navigateTo({
						url: "/pages_supplierCylinderManagement/views/gasCylinderManagement/selectCylinder?from=2",
					});
				} else if (type == 2) {
					uni.navigateTo({
						url: "/pages_supplierCylinderManagement/views/gasCylinderManagement/selectLab?from=2",
					});
				}
			},
			//提交方法
			submitButton() {
				uni.showModal({
					title: '确认出库',
					content: '确认后，该气体气瓶的当前状态将变更为已出库。',
					showCancel: true,
					cancelText: '关闭',
					confirmText: '确认出库',
					confirmColor: '#2684D8',
					success: (res) => {
						if (res.confirm) {
							uni.showToast({
								title: '出库完成',
								icon: "success",
								mask: true,
								duration: 2000
							});
							setTimeout(function() {
								uni.navigateBack();
							}, 2000);
						}
					}
				});
			},
			/******图片上传******/
			selectImage() {
				let self = this;
				if (self.newData.newData15[8]) {
					uni.showToast({
						title: '最多上传9张图片',
						icon: "none",
						mask: true,
						duration: 2000
					});
					return
				}
				uni.chooseImage({
					count: 1,
					sizeType: ["original", "compressed"],
					sourceType: ["album", "camera"],
					success: function(res) {
						if (res.tempFilePaths[0]) {
							res.tempFilePaths.forEach(function(item, index) {
								self.uploadImg(item);
							})
						}
					}
				});
			},
			async uploadImg(tempFilePaths) {
				var self = this;
				uni.showLoading({
					title: '上传中',
					mask: true
				});
				uni.uploadFile({
					url: config.base_url + '/system/file/upload', //仅为示例，非真实的接口地址
					header: {
						'Authorization': uni.getStorageSync('token')
					},
					filePath: tempFilePaths,
					name: 'file',
					formData: {
						'user': 'test'
					},
					success: (uploadFileRes) => {
						let res = JSON.parse(uploadFileRes.data);
						if (res.code == 200) {
							this.newData.newData15.push(res.data.url)
							// this.$set(this.newData, 'newData15', res.data.url);
						} else {
							uni.showToast({
								title: res.msg,
								icon: "none",
								mask: true,
								duration: 2000
							});
						}
					},
					fail: err => {},
					complete: () => {
						uni.hideLoading()
					}
				});
			},
			//删除图片
			delImg(index) {
				this.newData.newData15.splice(index, 1)
			},
			//预览图片
			previewSingleImage(imageUrl) {
				uni.previewImage({
					urls: [imageUrl] // 必须包裹成数组
				});
			},
			searchButton() {
				if (this.inputData !== '' && this.inputData.length > 1) {
					this.systemUserSelectUser();
				} else {
					uni.showToast({
						title: '请输入至少2个字符',
						icon: "none",
						mask: true,
						duration: 2000
					});
				}
			},
			//搜索用户
			async systemUserSelectUser() {
				const {
					data
				} = await systemUserSelectUser({
					"userName": this.inputData,
					'userType': '1'
				});
				if (data.code == 200) {
					this.$set(this, 'userList', data.data);
				}
			},
			//选择用户
			checkUserButton(item) {
				this.$set(this.newData, 'newData13', item.userName);
				this.$set(this.newData, 'newData133', item.userId);
				this.$set(this, 'shadeType', false);
			},
			//遮罩层开关
			shadeButton(type) {
				if (type == 1) {
					if (this.newData.newData13) {
						this.$set(this, 'inputData', this.newData.newData13);
						this.systemUserSelectUser();
					}
					this.$set(this, 'shadeType', true);
				} else if (type == 2) {
					this.$set(this, 'shadeType', false);
				}
			}
		}
	}
</script>

<style lang="stylus" scoped>
	#gasCylinderOutbound {
		height: 100%;
		width: 100%;
		display flex;
		flex-direction column;
		overflow: hidden;

		.gasCylinderOutbound-page {
			flex: 1;
			display flex;
			flex-direction column;
			overflow: hidden;

			.content-max-box {
				flex: 1;
				display flex;
				flex-direction column;
				overflow-y: scroll;

				.content-big-box {
					margin: 0 30rpx 0;

					.content-title-p {
						line-height: 80rpx;
						padding: 0 20rpx;
						color: #666;
					}

					.content-min-box {
						background-color: #fff;
						border-radius: 12rpx;

						.content-check-box {
							display: flex;
							padding: 40rpx 30rpx;
							border-bottom: 1rpx solid #dedede;

							view {
								font-size: 30rpx;
								line-height: 40rpx;
							}

							view:nth-child(1) {
								flex: 1;
								font-weight: 600;
							}

							view:nth-child(2) {
								font-size: 28rpx;
								font-weight: 600;
								margin-right: 10rpx;
								color: #666;
							}

							.right-icon {
								font-size: 30rpx;
							}
						}

						.content-bottom-text-box {
							margin: 0 30rpx;
							padding: 20rpx 0;

							.content-text-box {
								display: flex;

								view {
									font-size: 28rpx;
									line-height: 60rpx;
								}

								view:nth-child(1) {}

								view:nth-child(2) {
									flex: 1;
									text-align: right;
								}
							}
						}
					}
				}
			}

			.content-max-input-box {
				background-color: #fff;
				border-radius: 12rpx;
				display: flex;
				margin: 30rpx 30rpx 0;
				padding: 0 30rpx;

				.name-box {
					font-size: 30rpx;
					font-weight: 600;
					line-height: 100rpx;
				}

				.input-box {
					flex: 1;
					height: 100rpx;
					line-height: 100rpx;
					text-align: right;
				}
			}

			.content-max-up-box {
				background-color: #fff;
				border-radius: 12rpx;
				margin: 30rpx 30rpx 0;
				padding: 0 30rpx;

				.name-box {
					font-size: 30rpx;
					font-weight: 600;
					line-height: 100rpx;
				}

				.up-big-box {
					padding: 0 0 30rpx 0;

					.img-data:nth-child(3n) {
						margin-right: 0 !important;
					}

					.img-data {
						display: inline-block;
						width: 190rpx;
						height: 190rpx;
						margin-right: 30rpx;
						margin-bottom: 25rpx;
						position: relative;

						.min-img {
							display: block;
							width: 190rpx;
							height: 190rpx;
							overflow: hidden;
							border-radius: 12rpx;
						}

						.del-postion-p {
							position: absolute;
							top: -15rpx;
							right: -15rpx;
							width: 40rpx;
							height: 40rpx;
							color: red;
						}
					}

					.add-button {
						display: inline-block;
						overflow: hidden;
						border: 1rpx solid #dedede;
						border-radius: 12rpx;
						width: 190rpx !important;
						height: 145rpx;
						text-align: center;
						color: #666;
						font-size: 28rpx;
						padding-top: 45rpx;
					}
				}

				.textarea-box {
					width: 570rpx;
					padding: 30rpx;
					border: 1px solid #dedede;
					border-radius: 12rpx;
					margin-bottom: 30rpx;
				}
			}

			.bottom-button-p {
				width: 700rpx;
				height: 100rpx;
				line-height: 100rpx;
				text-align: center;
				margin: 30rpx auto 60rpx;
				color: #fff;
				background-color: #0183FA;
				border-radius: 16rpx;
			}
		}

		.shade-max-big-box {
			position: absolute;
			top: 0;
			left: 0;
			height: 100%;
			width: 100%;
			display: flex;
			flex-direction: column;
			overflow: hidden;
			z-index: 10;
			background-color: rgba(0, 0, 0, 0.2);

			.shade-big-top-box {
				flex: 1;
			}

			.shade-big-bottom-box {
				height: 800rpx;
				background-color: #fff;
				border-top-left-radius: 30rpx;
				border-top-right-radius: 30rpx;

				.shade-input-max-box {
					display: flex;
					margin: 40rpx 60rpx;

					.icons-box {
						border-top-left-radius: 30rpx;
						border-bottom-left-radius: 30rpx;
						width: 80rpx;
						text-align: center;
						height: 60rpx;
						line-height: 60rpx;
						background-color: #eeeeee;
					}

					.input-box {
						flex: 1;
						padding: 0 20rpx 0 0;
						height: 60rpx;
						line-height: 60rpx;
						background-color: #eeeeee;
						font-size: 28rpx;
					}

					.button-box {
						background-color: #0183FA;
						color: #fff;
						width: 120rpx;
						text-align: center;
						line-height: 60rpx;
						font-size: 28rpx;
						border-top-right-radius: 30rpx;
						border-bottom-right-radius: 30rpx;
					}
				}

				.list-max-box {
					height: 660rpx;
					overflow-y: scroll;
					border-top: 1rpx solid #dedede;

					view:nth-child(1) {
						border: none;
					}

					view {
						font-size: 28rpx;
						padding: 20rpx 40rpx;
						line-height:60rpx;
						border-top: 1rpx solid #dedede;
						display block;
						overflow hidden;
						text-overflow ellipsis;
						white-space nowrap;
					}
				}
			}
		}
	}
</style>