FE-lab-xcx/pages_hazardousWasteRecycling/views/weighingRegistration/addPage.vue

<!-- 称重登记-新增 -->
<template>
	<view class="weighingRegistrationAddPage">
		<view class="weighingRegistrationAddPage-center-box">
			<view class="text-title-p">基础信息</view>
			<view class="content-box" style="padding-bottom:20rpx;">
				<view class="sub-picker-box">
					<view class="title-box-1" style="width:220rpx;">报备单编号:</view>
					<view class="text-p-1">{{addForm.reportNo}}</view>
				</view>
				<view class="sub-picker-box">
					<view class="title-box-1" style="width:220rpx;">实验室:</view>
					<view class="text-p-1">{{addForm.subName}}({{addForm.roomNum}})</view>
				</view>
				<view class="sub-picker-box">
					<view class="title-box-1" style="width:220rpx;">上门回收日期:</view>
					<view class="text-p-1">{{addForm.expectTime}}({{addForm.expectWeek}})</view>
				</view>
				<view class="sub-picker-box">
					<view class="title-box-1" style="width:220rpx;">废物种类:</view>
					<view class="text-p-1">{{addForm.typeNum}}</view>
				</view>
				<view class="sub-picker-box">
					<view class="title-box-1" style="width:220rpx;">报备人:</view>
					<view class="text-p-1">{{addForm.reportName}}({{addForm.reportAccount}})</view>
				</view>
				<view class="sub-picker-box">
					<view class="title-box-1" style="width:220rpx;">报备时间:</view>
					<view class="text-p-1">{{addForm.reportTime}}</view>
				</view>
			</view>
			<view class="text-title-p">称重登记</view>
			<view class="content-box">
				<view class="for-content-box" v-for="(item,index) in addForm.formData4" :key="index">
					<view class="sub-picker-box">
						<view class="mark-box">*</view>
						<view class="title-box">类型:</view>
						<view class="picker-box">
							<picker @change="(val)=>forChange(index,val)" :value="item.forData3" :range="item.forList" :range-key="'wasteName'">
								<view class="picker-p" :class="item.forData1?'check-picker-p':''">{{item.forData1?item.forData2:'请选择危废类型'}}</view>
							</picker>
						</view>
						<img class="right-button" v-if="addForm.formData4[1]"
						@click="reductionItemButton(index)"
						:src="imagesUrl('commonality/icon_zgsq_jian.png')">
					</view>
					<view class="sub-picker-box" v-if="item.forData1&&item.forData4">
						<view class="mark-box">*</view>
						<view class="title-box">数量:</view>
						<view class="picker-text-box">{{item.forData4+item.forData5}}</view>
					</view>
					<view class="sub-picker-box">
						<view class="mark-box">*</view>
						<view class="title-box">称重:</view>
						<view class="reduction-button" @click="reductionAdd(1,index)">-</view>
						<input class="input-p" type="digit" maxlength="10" @input="(val)=>handleInput(index,val)" v-model="item.forData6">
						<view class="add-button" @click="reductionAdd(2,index)">+</view>
						<view class="unit-p">kg</view>
					</view>
				</view>
				<view class="add-item-button" v-if="this.addForm.formData4.length < this.dialogOptionForList.length"
				@click="addItemButton()">补充其他未报备类型</view>
				<view class="sub-picker-box">
					<view class="mark-box"></view>
					<view class="title-box">图片:</view>
					<view class="explain-box">可拍摄称重凭据或回收人员照片，最多可上传3张</view>
				</view>
				<view class="sub-picker-box">
					<view class="img-list-box" v-if="addForm.imgList[0]">
						<view class="for-img-box" v-for="(img,imgIndex) in addForm.imgList" :key="imgIndex" >
							<p @click="delImg(imgIndex)">x</p>
							<img :src="baseUrl+img">
						</view>
					</view>
					<view class="img-up-p" @click="selectImage()" v-if="!addForm.imgList[2]">+</view>
				</view>
				<view class="sub-picker-box" style="padding-bottom:50rpx;">
				</view>
			</view>
			<view class="submit-button" @click="submitButton">登记完成，提交</view>
		</view>
	</view>
</template>

<script>
	import {
		parseTime
	} from '@/component/public.js'
	import { config } from '@/api/request/config.js'
	import {
		hwmsAppWasteOrderList,
		hwmsAppWasteOrderWasteDetail,
	} from '@/pages_hazardousWasteRecycling/api/index.js'
	export default {
		data() {
			return {
				baseUrl:config.base_url,
				addForm:{
					expectTime: "",
					expectWeek: "",
					id: 0,
					subId: 0,
					reportAccount: "",
					reportName: "",
					reportNo: "",
					reportTime: "",
					roomNum: "",
					subName: "",
					typeNum: 0,
					formData4:[],
					imgList:[],
				},
				dialogOptionList:[],
				dialogOptionForList:[],
			}
		},
		onLoad(option) {
			this.hwmsAppWasteOrderList(option.id);
		},
		onShow() {

		},
		mounted() {
		},
		methods: {
			//提交按钮
			submitButton(){
				let self = this;
				if(!this.addForm.formData4[0]){
					uni.showToast({
						title: '请添加危废类型',
						icon: "none",
						mask: true,
						duration: 2000
					});
					return
				}
				for(let i=0;i<self.addForm.formData4.length;i++){
					if(!self.addForm.formData4[i].forData1){
						uni.showToast({
							title: '第'+(i+1)+'个类型没有选择',
							icon: "none",
							mask: true,
							duration: 2000
						});
						return
					}
					if(self.addForm.formData4[i].forData6 == 0){
						uni.showToast({
							title: self.addForm.formData4[i].forData2+'没有填写数量',
							icon: "none",
							mask: true,
							duration: 2000
						});
						return
					}
				}
				let obj = {
					id:this.addForm.id,
					recycleTime:this.addForm.expectTime,
					subId:this.addForm.subId,
					registerOrderAddItemBos:[],
					images:self.addForm.imgList,
				};
				for(let i=0;i<self.addForm.formData4.length;i++){
					obj.registerOrderAddItemBos.push({
						typeId:self.addForm.formData4[i].forData1,
						weight:self.addForm.formData4[i].forData6,
					})
				}
				uni.navigateTo({
					url: "/pages_hazardousWasteRecycling/views/weighingRegistration/signatureComponent?data=" + encodeURIComponent(JSON.stringify(obj))
				});
			},
			async hwmsAppWasteOrderList(id){
				const {
					data
				} = await hwmsAppWasteOrderList();
				if (data.code == 200) {
					this.$set(this,'dialogOptionForList',data.data.wasteOrder);
					this.hwmsAppWasteOrderWasteDetail(id);
				}
			},
			//详情
			async hwmsAppWasteOrderWasteDetail(id) {
				let self = this;
				const {
					data
				} = await hwmsAppWasteOrderWasteDetail({id:id});
				if (data.code == 200) {
						let list = [];
						for(let i=0;i<data.data.wasteOrderDetailItemVos.length;i++){
							for(let o=0;o<self.dialogOptionForList.length;o++){
								if(data.data.wasteOrderDetailItemVos[i].typeId == self.dialogOptionForList[o].id){
									let obj = {
										forData1:self.dialogOptionForList[o].id,
										forData2:self.dialogOptionForList[o].wasteName,
										forData3:o,
										forData4:data.data.wasteOrderDetailItemVos[i].quantity,
										forData5:self.dialogOptionForList[o].unit,
										forData6:0,
										forList:self.dialogOptionForList,
									}
									list.push(JSON.parse(JSON.stringify(obj)))
								}
							}
						}
							// item2.endDate = parseTime(item2.endDate, "{y}-{m}-{d}");
						this.$set(self.addForm,'expectTime',data.data.expectTime);
						this.$set(self.addForm,'expectWeek',data.data.expectWeek);
						this.$set(self.addForm,'id',data.data.id);
						this.$set(self.addForm,'subId',data.data.subId);
						this.$set(self.addForm,'reportAccount',data.data.reportAccount);
						this.$set(self.addForm,'reportName',data.data.reportName);
						this.$set(self.addForm,'reportNo',data.data.reportNo);
						this.$set(self.addForm,'reportTime',parseTime(data.data.reportTime, "{y}-{m}-{d} {h}:{i}:{s}"));
						this.$set(self.addForm,'roomNum',data.data.roomNum);
						this.$set(self.addForm,'subName',data.data.subName);
						this.$set(self.addForm,'typeNum',data.data.typeNum);
						this.$set(self.addForm,'formData4',list);
						this.filtrateList();
				}
			},
			//选中类型
			forChange(index,e){
				this.$set(this.addForm.formData4[index],'forData1',this.addForm.formData4[index].forList[e.detail.value].id);
				this.$set(this.addForm.formData4[index],'forData2',this.addForm.formData4[index].forList[e.detail.value].wasteName);
				this.$set(this.addForm.formData4[index],'forData5',this.addForm.formData4[index].forList[e.detail.value].unit);
				this.$set(this.addForm.formData4[index],'forData3',e.detail.value);
				this.filtrateList();
			},
			//单位值加减
			reductionAdd(type,index){
				if(type == 1){
					//减
					if(this.addForm.formData4[index].forData6>=1){
						this.$set(this.addForm.formData4[index],'forData6',this.addForm.formData4[index].forData6-1);
					}
				}else if(type == 2){
					//加
					if(this.addForm.formData4[index].forData6<9999){
						this.$set(this.addForm.formData4[index],'forData6',this.addForm.formData4[index].forData6+1);
					}
				}
			},
			//添加类型
			addItemButton(){
				if(this.addForm.formData4.length>= this.dialogOptionForList.length){
					uni.showToast({
						title: '没有更多类型可添加',
						icon: "none",
						mask: true,
						duration: 2000
					});
					return
				}
				this.addForm.formData4.push({
					forData1:'',
					forData2:'',
					forData3:'',
					forData4:0,
					forData5:'',
					forData6:0,
					forList:[],
				})
				this.filtrateList();
			},
			//删除类型
			reductionItemButton(index){
				let self = this;
				uni.showModal({
					// title: '确认要退出吗?',
					content: '确认删除该类型?',
					cancelColor: "#999",
					confirmColor: "#0183FA",
					success: function(res) {
						if (res.confirm) {
							self.addForm.formData4.splice(index,1);
							self.filtrateList();
						} else if (res.cancel) {}
					}
				});
			},
			
			// 图片上传
			selectImage() {
				let self = this;
				wx.chooseImage({
						count: 1,
						sizeType: ["original", "compressed"],
						sourceType: ["album", "camera"],
						success: function(res) {
								let tempFilePaths = res.tempFilePaths[0];
								self.uploadImg(tempFilePaths);
						}
				});
			},
			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){
									self.addForm.imgList.push(res.data.url)
								}else{
									uni.showToast({
										title: res.msg,
										icon:"none",
										mask:true,
										duration: 2000
									});
								}
			        },
			        fail: err => {},
			        complete: () => {
			            uni.hideLoading()
			        }
			    });
			},
			//删除图片
			delImg(index){
				let self = this;
				uni.showModal({
					// title: '确认要退出吗?',
					content: '确认删除该图片?',
					cancelColor: "#999",
					confirmColor: "#0183FA",
					success: function(res) {
						if (res.confirm) {
							self.addForm.imgList.splice(index,1);
						} else if (res.cancel) {}
					}
				});
			},
			// 小数点后两位
			handleInput(index,e){
			  // 一定要加nextTick，否则特殊情况的更改不生效【如：000时，更改为0】
			  this.$nextTick(() => {
			    let value = e.detail.value
			    // 如果当前输入为空，直接允许清空
			    if (!value) {
			      this.addForm.formData4[index].forData6 = ''
			    } else if (value?.charAt(0) === '0' && value.charAt(1) && value.charAt(1) !== '.') {
			      // // 1. 当第一位为0时，只能输入小数点【第二位必须是小数点】
			      value = '0'
			    }
			    value = value.replace(/[^\d.]/g, '') // 清除"数字"和"."以外的字符
			    value = value.replace(/\.{2,}/g, '.') // 只保留第一个. 清除多余的
			    value = value.match(/^\d*(\.?\d{0,3})/g)[0] || '' // 保留3位小数
			    this.addForm.formData4[index].forData6 = value
			  })
			},
      //匹配数据
      filtrateList(){
        let self = this;
        let forList = JSON.parse(JSON.stringify(this.dialogOptionForList));
        let newList = JSON.parse(JSON.stringify(this.dialogOptionForList));
        for(let i=0;i<forList.length;i++){
          let num = 0;
          for(let o=0;o<self.addForm.formData4.length;o++){
            if(forList[i].id == self.addForm.formData4[o].forData1){
              num++
              break
            }
          }
          if(num!=0){
            forList.splice(i,1);
            i--
          }
        }
        for(let i=0;i<self.addForm.formData4.length;i++){
          let list = [];
          if(self.addForm.formData4[i].forData1){
            for(let o=0;o<newList.length;o++){
              if(self.addForm.formData4[i].forData1 == newList[o].value){
                list.push(newList[o]);
              }
            }
          }
          list = list.concat(forList)
          self.$set(self.addForm.formData4[i],'forList',JSON.parse(JSON.stringify(list)));
        }
      },
		},
	}
</script>

<style lang="stylus" scoped>
	.weighingRegistrationAddPage{
		height: 100%;
		display flex;
		flex:1;
		flex-direction column;
		overflow: hidden;
		.weighingRegistrationAddPage-top-box{
			height:380rpx;
		}
		.weighingRegistrationAddPage-center-box{
			flex:1;
			overflow-y: scroll;
			overflow-x: hidden
			display flex;
			flex-direction column;
		}
		.text-title-p{
			font-size:32rpx;
			color:#0183FA;
			line-height:80rpx;
			margin:0 20rpx;
		}
		.content-box{
			margin:0 20rpx;
			background-color: #fff;
			border-radius:10rpx;
			padding:20rpx 20rpx 0 10rpx;
			.for-content-box:nth-child(1){
				padding-top:0;
				border-top:none;
			}
			.for-content-box{
				margin-bottom:20rpx;
				padding-top:30rpx;
				border-top:1px solid #dedede;
				.right-button{
					margin-top:8rpx;
					margin-left:20rpx;
					width:50rpx;
					height:50rpx;
				}
			}
			.sub-picker-box{
				display: flex;
				padding:10rpx;
				.mark-box{
					width:17rpx;
					color:red;
					margin-left:10rpx;
					height:60rpx;
					line-height:60rpx;
					margin-bottom:20rpx;
				}
				.title-box-1{
					width:100rpx;
					margin:0 10rpx;
					height:40rpx;
					line-height:40rpx;
				}
				.text-p-1{
					flex:1;
					height:40rpx;
					line-height:40rpx;
					display:block;
					overflow:hidden;
					text-overflow:ellipsis;
					white-space:nowrap;
				}
				.title-box{
					width:100rpx;
					margin:0 10rpx;
					height:60rpx;
					line-height:60rpx;
				}
				.text-p{
					flex:1;
					text-align: right;
					height:60rpx;
					line-height:60rpx;
				}
				.picker-box{
					height:60rpx;
					flex:1;
					border:1rpx solid #dedede;
					border-radius:10rpx;
					.picker-p{
						padding:0 20rpx;
						color:#666;
						line-height:60rpx;
						width:300rpx;
						display:block;
						overflow:hidden;
						text-overflow:ellipsis;
						white-space:nowrap;
					}
					.check-picker-p{
						
					}
				}
				.picker-text-box{
					width:400rpx;
					line-height:60rpx;
				}
				.reduction-button{
					width:60rpx;
					height:60rpx;
					border:1rpx solid #0183FA;
					color:#0183FA;
					text-align: center;
					font-size:30rpx;
					line-height:58rpx;
					border-radius:6rpx;
					font-size:34rpx;
					font-weight:700;
				}
				.input-p{
					width:140rpx;
					height:60rpx;
					height:60rpx;
					text-align: center;
					border:1rpx solid #dedede;
					border-radius:6rpx;
					margin:0 20rpx;
				}
				.add-button{
					width:60rpx;
					height:60rpx;
					border:1rpx solid #0183FA;
					color:#0183FA;
					text-align: center;
					font-size:30rpx;
					line-height:58rpx;
					border-radius:6rpx;
					font-size:34rpx;
					font-weight:700;
				}
				.unit-p{
					text-align: center;
					flex:1;
					height:62rpx;
					line-height:60rpx;
					font-size:30rpx;
				}
				.input-text-p{
					flex:1;
					height:185rpx;
					border:1rpx solid #dedede;
					border-radius:6rpx;
					padding:20rpx;
					margin-right:70rpx;
					margin-bottom:30rpx;
				}
				.explain-box{
					flex:1;
					height:32rpx;
					line-height:30rpx;
					font-size:28rpx;
					color:#999;
				}
				.img-list-box{
					display: flex;
					.for-img-box{
						position: relative;
						width:200rpx;
						height:200rpx;
						margin-left:18rpx;
						p{
							position: absolute;
							top:0;
							right:0;
							border-radius:50%;
							width:40rpx;
							height:40rpx;
							line-height:38rpx;
							text-align: center;
							color:#fff;
							background-color: #FF6A6A;
						}
						img{
							display: inline-block;
							width:200rpx;
							height:200rpx;
						}
					}
				}
				.img-up-p{
					width:200rpx;
					height:200rpx;
					margin-left:18rpx;
					line-height:200rpx;
					text-align: center;
					border:1rpx solid #999;
					border-radius:10rpx;
					color:#999;
					line-height:200rpx;
					font-size:50rpx;
				}
			}
			.add-item-button{
				width:588rpx;
				line-height:80rpx;
				height:80rpx;
				margin:0 50rpx 20rpx;
				background-color: #fff;
				border:1rpx solid #0183FA;
				color:#0183FA;
				font-size:30rpx;
				text-align: center;
				border-radius:6rpx;
			}
		}
		.submit-button{
			width:650rpx;
			line-height:80rpx;
			height:80rpx;
			margin:20rpx 50rpx 60rpx;
			background-color: #0183FA;
			color:#fff;
			font-size:30rpx;
			text-align: center;
			border-radius:6rpx;
		}
	}
</style>