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.newdata1}}</view>
				</view>
				<view class="sub-picker-box">
					<view class="title-box-1" style="width:220rpx;">实验室:</view>
					<view class="text-p-1">{{addForm.newdata2}}</view>
				</view>
				<view class="sub-picker-box">
					<view class="title-box-1" style="width:220rpx;">上门回收日期:</view>
					<view class="text-p-1">{{addForm.newdata3}}</view>
				</view>
				<view class="sub-picker-box">
					<view class="title-box-1" style="width:220rpx;">废物种类:</view>
					<view class="text-p-1">{{addForm.newdata4}}</view>
				</view>
				<view class="sub-picker-box">
					<view class="title-box-1" style="width:220rpx;">报备人:</view>
					<view class="text-p-1">{{addForm.newdata5}}</view>
				</view>
				<view class="sub-picker-box">
					<view class="title-box-1" style="width:220rpx;">报备时间:</view>
					<view class="text-p-1">{{addForm.newdata6}}</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="'label'">
								<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>
					<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">登记完成，提交</view>
		</view>
	</view>
</template>

<script>
	import { config } from '@/api/request/config.js'
	import {
		demo1,
		demo2
	} from '@/pages_hazardousWasteRecycling/api/index.js'
	export default {
		data() {
			return {
				baseUrl:config.base_url,
				addForm:{
					newdata1:'HW202510400001',
					newdata2:'植物营养实验室（A201）',
					newdata3:'2025-11-05（星期四）',
					newdata4:'4',
					newdata5:'王二小（2020110010）',
					newdata6:'2025-11-04 10:10:09',
					formData4:[],
					imgList:[],
				},
				subList: [
					{ subId: 1, subName: "实验室1" },
					{ subId: 2, subName: "实验室2" },
					{ subId: 3, subName: "实验室3" },
				],
				dialogOptionList:[],
				dialogOptionForList:[
					{value:'1',label:'数据1',dict:'斤'},
					{value:'2',label:'数据2',dict:'公斤'},
					{value:'3',label:'数据3',dict:'升'},
					{value:'4',label:'数据4',dict:'毫升'},
					{value:'5',label:'数据5',dict:'公升'},
					{value:'6',label:'数据6',dict:'克'},
				],
			}
		},
		onLoad(option) {
			
		},
		onShow() {

		},
		mounted() {
			this.initialize(1);
		},
		methods: {
			//初始化
			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].value,
								forData2:self.dialogOptionForList[i].label,
								forData3:i,
								forData4:0,
								forData5:self.dialogOptionForList[i].dict,
								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].value);
				this.$set(this.addForm.formData4[index],'forData2',this.addForm.formData4[index].forList[e.detail.value].label);
				this.$set(this.addForm.formData4[index],'forData5',this.addForm.formData4[index].forList[e.detail.value].dict);
				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){
				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].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].value == 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{
				.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;
				}
				.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;
				}
				.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>