FE-lab-xcx/pages_hazardousWasteRecycling/views/recyclingReportRecord/index.vue

<!-- 回收报备 -->
<template>
	<view class="recyclingReportRecord">
		<view class="recyclingReportRecord-top-box">
			<view class="text-title-p">基础信息填写</view>
			<view class="content-box">
				<view class="sub-picker-box">
					<view class="mark-box">*</view>
					<view class="title-box">实验室</view>
					<view class="picker-box">
						<picker @change="subChange" :value="addForm.subIndex" :range="subList" :range-key="'subName'">
							<view class="picker-p" :class="addForm.subId?'check-picker-p':''">{{addForm.subId?addForm.subName:'请选择实验室'}}</view>
						</picker>
					</view>
				</view>
				<view class="sub-picker-box">
					<view class="mark-box">*</view>
					<view class="title-box" style="width:220rpx;">上门回收日期:</view>
					<view class="text-p">{{timeData}}</view>
				</view>
			</view>
			<view class="text-title-p">危废信息填报</view>
		</view>
		<view class="recyclingReportRecord-center-box">
			<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">
						<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.forData4">
						<view class="add-button" @click="reductionAdd(2,index)">+</view>
						<view class="unit-p">{{item.forData1?item.forData5:''}}</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>
					<textarea class="input-text-p" type="text" v-model="addForm.remark" 
					maxlength="100" @input="sumfontnum" placeholder="请输入备注说明" 
					placeholder-style="font-size:28rpx;color:#999;"></textarea>
				</view>
			</view>
			<view class="submit-button" @click="submitButton">填写完毕，立即报备</view>
		</view>
		<!-- <view class="recyclingReportRecord-bottom-box">
			
		</view> -->
	</view>
</template>

<script>
	import {
		hwmsAppWasteOrderList,
		hwmsAppWasteOrderAdd,
	} from '@/pages_hazardousWasteRecycling/api/index.js'
	export default {
		data() {
			return {
				timeData:'',
				addForm:{
					expectTime:'',
					subId:'',
					subName:'',
					subIndex:'',
					remark:'',
					formData4:[],
				},
				subList: [],
        dialogOptionList:[],
        dialogOptionForList:[],
			}
		},
		onLoad(option) {
			
		},
		onShow() {

		},
		mounted() {
			this.hwmsAppWasteOrderList();
		},
		methods: {
			submitButton(){
				let self = this;
				if(!this.addForm.subId){
					uni.showToast({
						title: '请选择实验室',
						icon: "none",
						mask: true,
						duration: 2000
					});
					return
				}
				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].forData4 == 0){
						uni.showToast({
							title: self.addForm.formData4[i].forData2+'没有填写数量',
							icon: "none",
							mask: true,
							duration: 2000
						});
						return
					}
				}
				if(!this.addForm.remark){
					uni.showToast({
						title: '请输入备注',
						icon: "none",
						mask: true,
						duration: 2000
					});
					return
				}
				let obj = {
					expectTime:this.addForm.expectTime,
					remark:this.addForm.remark,
					subId:this.addForm.subId,
					wasteOrderItemList:[],
				}
				for(let i=0;i<self.addForm.formData4.length;i++){
					obj.wasteOrderItemList.push({
						quantity:self.addForm.formData4[i].forData4,
						typeId:self.addForm.formData4[i].forData1,
					})
				}
				this.hwmsAppWasteOrderAdd(obj);
			},
			async hwmsAppWasteOrderAdd(obj){
				let self = this;
				const {
					data
				} = await hwmsAppWasteOrderAdd(obj);
				if (data.code == 200) {
					uni.showToast({
						title: '提交成功',
						icon: "none",
						mask: true,
						duration: 2000
					});
					setTimeout(function() {
						uni.navigateBack();
					}, 2000);
				}
			},
			async hwmsAppWasteOrderList(){
				const {
					data
				} = await hwmsAppWasteOrderList();
				if (data.code == 200) {
					this.$set(this,'timeData',data.data.expectTime+'('+data.data.expectWeek+')');
					this.$set(this.addForm,'expectTime',data.data.expectTime);
					this.$set(this,'subList',data.data.subjectVos);
					this.$set(this,'dialogOptionForList',data.data.wasteOrder);
					this.initialize(1);
				}
			},
			//初始化
			initialize(type){
				let self = this;
				if(type == 1){
					//无数据-初始化
					for(let i=0;i<self.dialogOptionForList.length;i++){
						if(i<4){
							let obj = {
								forData1:self.dialogOptionForList[i].id,
								forData2:self.dialogOptionForList[i].wasteName,
								forData3:i,
								forData4:0,
								forData5:self.dialogOptionForList[i].unit,
								forList:self.dialogOptionForList,
							}
							self.addForm.formData4.push(JSON.parse(JSON.stringify(obj)))
						}
					}
					this.filtrateList();
				}else if(type == 2){
					//有数据-初始化
				}
			},
			//选中实验室
			subChange(e) {
				this.$set(this.addForm,'subId',this.subList[e.detail.value].subId);
				this.$set(this.addForm,'subName',this.subList[e.detail.value].subName);
				this.$set(this.addForm,'subIndex',e.detail.value);
			},
			//选中类型
			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].forData4>=1){
						this.$set(this.addForm.formData4[index],'forData4',this.addForm.formData4[index].forData4-1);
					}
				}else if(type == 2){
					//加
					if(this.addForm.formData4[index].forData4<9999){
						this.$set(this.addForm.formData4[index],'forData4',this.addForm.formData4[index].forData4+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:'',
					forList:[],
				})
				this.filtrateList();
			},
			//删除类型
			reductionItemButton(index){
				this.addForm.formData4.splice(index,1);
				this.filtrateList();
			},
			// 小数点后两位
			handleInput(index,e){
			  // 一定要加nextTick，否则特殊情况的更改不生效【如：000时，更改为0】
			  this.$nextTick(() => {
			    let value = e.detail.value
			    // 如果当前输入为空，直接允许清空
			    if (!value) {
			      this.addForm.formData4[index].forData4 = ''
			    } 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,2})/g)[0] || '' // 保留2位小数
			    this.addForm.formData4[index].forData4 = 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].id){
                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>
	.recyclingReportRecord{
		height: 100%;
		display flex;
		flex:1;
		flex-direction column;
		overflow: hidden;
		.recyclingReportRecord-top-box{
			height:380rpx;
		}
		.recyclingReportRecord-center-box{
			flex:1;
			overflow-y: scroll;
			overflow-x: hidden
			display flex;
			flex-direction column;
		}
		// .recyclingReportRecord-bottom-box{
		// 	height:200rpx;
		// }
		.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{
				.right-button{
					margin-top:8rpx;
					margin-left:20rpx;
					width:50rpx;
					height:50rpx;
				}
			}
			.sub-picker-box{
				display: flex;
				padding:10rpx;
				.mark-box{
					color:red;
					margin-left:10rpx;
					height:60rpx;
					line-height:60rpx;
					margin-bottom:20rpx;
				}
				.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;
					}
					.check-picker-p{
						
					}
				}
				.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;
				}
			}
			.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>