MingGaoApp_vue/MingGaoApp/pages/index/components/EntrapmentAdd.vue

<template>
	<view class="entrapment-form">
		<view class="entrapment-form__header">
			<view class="entrapment-form__card">诱捕器：{{baseinfo.trap_number}}</view>
		</view>
		<view class="entrapment-form__form">
			<view class="entrapment-form__item" v-for="(item,index) in wornlist" :key="index">
				<view class="entrapment-form__label">
					<image src="@/static/image/task/pest/pest.png" mode="aspectFit" class="icon">
					</image>
					<text class="text">{{item.pest_name}}</text>
					<view class="fill-icon">
						<uni-icons type="arrowright" size="12" color="#fff"></uni-icons>
					</view>
				</view>
				<!-- #ifndef APP-NVUE -->
				<u-input border="none" type="number" v-model="item.pest_number" disabled>
					<!-- #endif -->
					<!-- #ifdef APP-NVUE -->
					<u--input border="none" type="number" v-model="item.pest_number" disabled>
						<!-- #endif -->
						<template slot="prefix">
							<image src="@/static/image/task/pest/statistics.png" mode="aspectFit" class="icon">
							</image>
						</template>
						<template slot="suffix">
							<text>头</text>
						</template>

						<!-- #ifndef APP-NVUE -->
				</u-input>
				<!-- #endif -->
				<!-- #ifdef APP-NVUE -->
				</u--input>
				<!-- #endif -->
				<view class="entrapment-form__close" @click="selectdelold(item,index)"
					v-if="baseinfo.taskStatus==='处理中'">
					<uni-icons type="clear"></uni-icons>
				</view>
			</view>
			<view class="entrapment-form__item" v-for="(item,index) in notwornlistnum" :key="item">
				<view class="entrapment-form__label" @click="show = true;elsectindex = index">
					<image src="@/static/image/task/pest/pest.png" mode="aspectFit" class="icon">
					</image>
					<text class="text">{{notwornlistdata.name[index] || '请选择害虫'}}</text>
					<view class="fill-icon">
						<uni-icons type="arrowright" size="12" color="#fff"></uni-icons>
					</view>
				</view>
				<!-- #ifndef APP-NVUE -->
				<u-input border="none" type="number" v-model="notwornlistdata.num[index]">
					<!-- #endif -->
					<!-- #ifdef APP-NVUE -->
					<u--input border="none" type="number" v-model="notwornlistdata.num[index]">
						<!-- #endif -->

						<template slot="prefix">
							<image src="@/static/image/task/pest/statistics.png" mode="aspectFit" class="icon">
							</image>
						</template>
						<template slot="suffix">
							<text>头</text>
						</template>

						<!-- #ifndef APP-NVUE -->
				</u-input>
				<!-- #endif -->
				<!-- #ifdef APP-NVUE -->
				</u--input>
				<!-- #endif -->
				<view class="entrapment-form__close" @click="selectdel(index)">
					<uni-icons type="clear"></uni-icons>
				</view>
			</view>
			<u-empty text="暂无数据" v-if="notwornlistnum<1 && !wornlist.length">
			</u-empty>
			<!-- <u--form labelPosition="left" ref="entrapmentForm">
				<u-form-item label="" prop="userInfo.name" borderBottom v-for="(item,index) in wornlist" :key="index">
					<view class="entrapment-form__item">
						<view class="entrapment-form__label">
							<image src="@/static/image/task/pest/pest.png" mode="aspectFit" class="icon">
							</image>
							<text class="text">{{item.pest_name}}</text>
							<view class="fill-icon">
								<uni-icons type="arrowright" size="12" color="#fff"></uni-icons>
							</view>
						</view>
						<u--input border="none" type="number" v-model="item.pest_number">
							<template slot="prefix">
								<image src="@/static/image/task/pest/statistics.png" mode="aspectFit" class="icon">
								</image>
							</template>
							<template slot="suffix">
								<text>头</text>
							</template>
						</u--input>
						<view class="entrapment-form__close" @click="selectdelold(item,index)">
							<uni-icons type="clear"></uni-icons>
						</view>
					</view>
				</u-form-item>
				<u-form-item label="" borderBottom v-for="(item) in notwornlistnum" :key="item">
					<view class="entrapment-form__item">
						<view class="entrapment-form__label" @click="show = true;elsectindex = item">
							<image src="@/static/image/task/pest/pest.png" mode="aspectFit" class="icon">
							</image>
							<text class="text">{{notwornlistdata.name[item] || '请选择害虫'}}</text>
							<view class="fill-icon">
								<uni-icons type="arrowright" size="12" color="#fff"></uni-icons>
							</view>
						</view>
						<u--input border="none" type="number" v-model="notwornlistdata.num[item]">
							<template slot="prefix">
								<image src="@/static/image/task/pest/statistics.png" mode="aspectFit" class="icon">
								</image>
							</template>
							<template slot="suffix">
								<text>头</text>
							</template>
						</u--input>
						<view class="entrapment-form__close" @click="selectdel(item)">
							<uni-icons type="clear"></uni-icons>
						</view>
					</view>
				</u-form-item>
			</u--form> -->
		</view>
		<view class="entrapment-form__content" v-if="baseinfo.comtype">
			<view class="entrapment-form__content__btn">
				<u-button type="primary" :plain="true" icon="plus" text="增加" size="small" @click="addnotwornlistnum">
				</u-button>
			</view>
			<view class="entrapment-form__actions">
				<view class="entrapment-form__action green" @click="opebtn2('无虫')">
					<image src="@/static/image/task/pest/pest-none.png" mode="aspectFit" class="img"></image>
					<text class="text">无虫</text>
				</view>
				<view class="entrapment-form__action pink" @click="opebtn3('已带回')">
					<image src="@/static/image/task/pest/bring.png" mode="aspectFit" class="img"></image>
					<text class="text">带回</text>
				</view>
				<view class="entrapment-form__action blue" @click="opebtn('已登记')">
					<image src="@/static/image/task/pest/submit.png" mode="aspectFit" class="img"></image>
					<text class="text">提交</text>
				</view>
			</view>
		</view>

		<!-- <u-loading-page loading-text="加载中..." :loading="loading" font-size="16"></u-loading-page> -->
		<u-picker :show="show" :columns="columns" @confirm="confirm" @cancel="show = false"></u-picker>
	</view>
	<!-- <view class="inset">
		<view class="" style="width: 100%;height: 30rpx;background-color: #f7f7f7;">

		</view>
		<view class="title">
			<view class="">
				设备号：
			</view>
			<view class="title_R">
				{{baseinfo.trap_number}}
			</view>
		</view>
		<view class="examine" v-if="baseinfo.comtype">
			<view class="examine_itemno" v-for="item,index in wornlist" :key="'a'+index">
				<view class="examine_itemno_input">
					<u--input suffixIcon="arrow-down-fill" v-model="item.pest_name"
						suffixIconStyle="color: #909399;fontSize:14px" disabled></u--input>
				</view>
				<view class="examine_itemno_input">
					<u--input border="surround" v-model="item.pest_number" disabled></u--input>
				</view>
				<view class="" style="color:red" @click="selectdelold(item,index)">
					删除
				</view>
			</view>
			<view class="examine_item" v-for="item in notwornlistnum" :key="item">
				<view class="examine_itemno_input" @click="show = true;elsectindex = item">
					<u--input placeholder="请选择害虫名称" suffixIcon="arrow-down-fill"
						placeholderStyle="fontSize:12px;color:#999999" readonly
						suffixIconStyle="color: #909399;fontSize:14px" v-model="notwornlistdata.name[item]"></u--input>
				</view>
				<view class="examine_itemno_input">
					<u--input placeholder="请输入害虫数量" type="number" placeholderStyle="fontSize:12px;color:#999999"
						border="surround" v-model="notwornlistdata.num[item]"></u--input>
				</view>
				<view class="" style="color:red">
					<view class="" v-if="item != notwornlistnum" @click="selectdel(item)">
						删除
					</view>
					<u-icon name="plus-circle" size="22" color="#1890ff" top="4" v-else
						@click="addnotwornlistnum(item)">
					</u-icon>
				</view>
			</view>
		</view>
		<view class="write" v-else>
			<view class="hisbox_hint" v-if="wornlist.length==0">
				暂无数据
			</view>
			<view class="write_item" v-for="item,index in wornlist" :key="index">
				<view class="write_item_L">
					{{item.pest_name}}
				</view>
				<view class="write_item_R">
					{{item.pest_number}}只
				</view>
			</view>
		</view>
		<view class="operation" v-if="baseinfo.comtype">
			<u-button type="primary" text="无虫" @click="opebtn2('无虫')"></u-button>
			<u-button type="primary" text="带回" @click="opebtn3('已带回')"></u-button>
			<u-button type="primary" text="提交" @click="opebtn('已登记')"></u-button>
		</view>
		<u-loading-page loading-text="加载中..." :loading="loading" font-size="16"></u-loading-page>
		<u-picker :show="show" :columns="columns" @confirm="confirm" @cancel="show = false"></u-picker>
	</view> -->
</template>

<script>
	import {
		isEmpty
	} from 'lodash-es';
	export default {
		props: {
			dataSource: {
				type: Object,
				default: () => ({})
			}
		},
		data() {
			return {
				baseinfo: {},
				wornlist: [],
				loading: false,
				notwornlist: [],
				notwornlistnum: 0,
				columns: [],
				columns2: [],
				show: false,
				notwornlistdata: {
					name: [],
					num: []
				},
				elsectindex: 0,
				dellist: [],
				roteindex: false,
				isFirstLoad: true,
				entrapmentFormModel: {
					pestList: []
				},
				rules: {},
			}
		},
		onShow(option) {
			// console.log(option,555555555555555)
		},
		onLoad(option) {

		},
		watch: {
			videoData(news, old) {
				console.log('触发了2222222222222222222222')
				console.log(news)
				uni.switchTab({
					url: '../response/index'
				})
				// if (news) {
				// }
			},
			dataSource: {
				handler(val) {
					if (this.isFirstLoad) {
						this.isFirstLoad = false;
						this.baseinfo = this.dataSource;
						this.init();
					}
				},
				immediate: true
			}
		},
		computed: {
			// 视频消息
			videoData() {
				return this.$store.state.video
			},
		},
		mounted() {
			if (this.isFirstLoad && !isEmpty(this.dataSource)) {
				this.isFirstLoad = false;
				this.baseinfo = this.dataSource;
				this.init();
			}
		},
		methods: {
			init() {
				this.getselectworn();
				this.getwornlist(this.baseinfo.id);
			},
			async getwornlist(id) {
				console.log(id)
				this.loading = true
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=control_center.task.trap_pest_record_info',
					data: {
						trap_record_id: id
					}
				})
				console.warn(res, '诱捕器信息')
				this.wornlist = res
				this.loading = false
				var arr = []
				for (var i = 0; i < res.length; i++) {
					arr.unshift(this.columns[0].indexOf(res[i].pest_name))
				}
				// console.log(arr)
				for (var i = 0; i < arr.length; i++) {
					this.columns[0].splice(arr[i], 1)
				}
			},
			async getselectworn() {
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=sysmenage.maintain.pest_list',
					data: {
						page: "1",
						page_item: "1000000000000000000000000000"
					}
				})
				// this.
				console.log(res.page_list)
				var arr = []
				for (var i = 0; i < res.page_list.length; i++) {
					arr.push(res.page_list[i].pest_name)
					this.columns2.push(res.page_list[i].pest_name)
				}
				this.columns.push(arr)
			},
			addnotwornlistnum() {
				console.log(this.notwornlistdata)

				const isEveryVailid = this.notwornlistdata.name.every(item => !!item) && this.notwornlistdata.num.every(
					item => !!item)
				console.log(isEveryVailid, ' add not worn list num')
				if (isEveryVailid) {
					this.notwornlistnum++;
					this.notwornlistdata.name.push('');
					this.notwornlistdata.num.push('');
				} else {
					uni.$u.toast('请将信息填写完成')
				}

			},
			confirm(e) {
				this.show = false
				console.log(e.value[0], this.elsectindex)
				this.notwornlistdata.name[this.elsectindex] = e.value[0]
				// console.log(this.notwornlistdata)
				this.datacount()
			},
			datacount() {
				// for(var k=0;k<this.dellist.length;k++){
				// 	this.columns[0].push(this.dellist[k])
				// }
				console.log(this.notwornlistdata.name)
				// this.columns[0] = JSON.parse(JSON.stringify(this.columns2))
				for (var i = 0; i < this.notwornlistdata.name.length; i++) {
					for (var j = 0; j < this.columns[0].length; j++) {
						if (this.notwornlistdata.name[i] == this.columns[0][j]) {
							this.columns[0].splice(j, 1)
							console.log(this.columns[0])
						}
					}
				}
				for (var k = 0; k < this.columns2.length; k++) {
					if (this.notwornlistdata.name.indexOf(this.columns2[k]) == -1) {
						if (this.columns[0].indexOf(this.columns2[k]) == -1) {
							this.columns[0].unshift(this.columns2[k])
						}
					}
				}

			},
			selectdel(item) {
				this.notwornlistnum--
				var arr = this.notwornlistdata.name.splice(item, 1)
				this.notwornlistdata.num.splice(item, 1)
				this.columns[0].unshift(arr[0])
			},
			selectdelold(item, index) {
				console.log(item, index)
				// var arr = this.notwornlistdata.name.splice(item.pest_name, 1)
				// this.notwornlistdata.num.splice(item, 1)
				var arr = item.pest_name
				this.columns[0].unshift(arr)
				this.wornlist.splice(index, 1)
			},
			opebtn2(str) {
				var arr = []
				var obj = {
					record_id: this.baseinfo.id, //      			填报记录id
					report_status: str, //			填报记录状态
					pest_list: []
				}
				arr.push()
				this.$store.state.wornlist = {
					record_id: this.baseinfo.id, //      			填报记录id
					report_status: str, //			填报记录状态
					pest_list: arr
				}
				// console.log(obj)
				// console.log(this.$store.state.wornlist)
				// var arr = []
				// var store = this.$store.state.wornlist
				// for(var i =0;i<store.lengthl;i++){
				// 	arr.push(store[i])
				// }
				// var obj = {
				// 	record_id: this.baseinfo.id, //      			填报记录id
				// 	report_status: str, //			填报记录状态
				// 	pest_list: arr
				// }
				// arr.push(obj)
				// console.log(arr)
				// this.$store.state.wornlist = JSON.parse(JSON.stringify(arr))
				if (this.roteindex) {
					// console.log("返回二页")
					uni.navigateBack({
						delta: 2
					});
				} else {
					// console.log("返回一页")
					// uni.navigateBack({
					// 	delta: 1
					// });

					this.$emit('close')
				}
			},
			opebtn3(str) {
				// var arr = []
				var arr = []
				console.log(this.wornlist)
				for (var j = 0; j < this.wornlist.length; j++) {
					var obj = {
						pest_name: this.wornlist[j].pest_name, //		害虫名称
						pest_number: this.wornlist[j].pest_number //			害虫数量
					}
					arr.push(obj)
				}
				// console.log(arr)
				// var arr1 = []
				for (var i = 1; i < this.notwornlistdata.name.length; i++) {
					if (this.notwornlistdata.name[i]) {
						var obj = {
							pest_name: this.notwornlistdata.name[i], //		害虫名称
							pest_number: this.notwornlistdata.num[i] || 0 //			害虫数量
						}
						arr.push(obj)
					}
				}
				console.warn(arr, '已带回')
				// this.$store.state.wornlist = arr
				this.$store.state.wornlist = {
					record_id: this.baseinfo.id, //      			填报记录id
					report_status: str, //			填报记录状态
					pest_list: arr
				}
				if (this.roteindex) {
					uni.navigateBack({
						delta: 2
					});
				} else {
					this.$emit('close')
				}
			},
			opebtn(str) {
				var arr = []
				console.log(this.wornlist)
				for (var j = 0; j < this.wornlist.length; j++) {
					var obj = {
						pest_name: this.wornlist[j].pest_name, //		害虫名称
						pest_number: this.wornlist[j].pest_number //			害虫数量
					}
					arr.push(obj)
				}
				// console.log(arr)
				// var arr1 = []
				for (var i = 0; i < this.notwornlistdata.name.length; i++) {
					if (this.notwornlistdata.name[i]) {
						var obj = {
							pest_name: this.notwornlistdata.name[i], //		害虫名称
							pest_number: this.notwornlistdata.num[i] //			害虫数量
						}
						arr.push(obj)
					}
				}
				// console.log(arr)
				var tf = arr.every((item) => {
					return item.pest_number
				})
				console.warn(tf, arr, '提交 1213131313331')
				if (arr.length != 0 && tf) {
					// this.$store.state.wornlist = arr
					this.$store.state.wornlist = {
						record_id: this.baseinfo.id, //      			填报记录id
						report_status: str, //			填报记录状态
						pest_list: arr
					}
					if (this.roteindex) {
						uni.navigateBack({
							delta: 2
						});
					} else {
						this.$emit('close')
					}

				} else {
					uni.$u.toast('请将信息填写完成')
				}

			}
		}
	}
</script>

<style lang="less" scoped>
	.inset {
		width: 100%;

		.title {
			width: 90%;
			margin: 0 auto;
			border-bottom: 1px solid #F6F6F6;
			padding: 20rpx 0;
			display: flex;
			justify-content: space-between;

			.title_R {
				color: #999999;
			}
		}

		.examine {
			width: 90%;
			margin: 0 auto;

			.examine_itemno,
			.examine_item {
				display: flex;
				// justify-content: space-around;
				margin-top: 20rpx;
				border-bottom: 1px solid #F6F6F6;
				padding-bottom: 20rpx;

				.examine_itemno_input {
					// width: 45%;
					margin-right: 60rpx;
				}

				/deep/.u-input {
					width: 200rpx;
					height: 30rpx;
				}
			}
		}

		.write {
			width: 90%;
			margin: 0 auto;

			.hisbox_hint {
				width: 100%;
				text-align: center;
				font-size: 28rpx;
				height: 100rpx;
				line-height: 100rpx;
				color: #999999;
			}

			.write_item {
				display: flex;
				justify-content: space-between;
				border-bottom: 1px solid #F6F6F6;
				padding: 20rpx 0;

				.write_item_R {
					color: #999999;
				}
			}
		}

		.operation {
			display: flex;
			margin-top: 30rpx;

			/deep/.u-button {
				width: 140rpx;
				height: 60rpx;
			}

		}
	}

	.entrapment-form {
		&__header {
			position: relative;
			width: 540rpx;
			height: 144rpx;
			border-radius: 70rpx;
			margin: 0 auto;
			margin-top: -122rpx;
			background-image: url(~@/static/image/task/pest/bg.png);
			background-repeat: no-repeat;
			background-size: 100% 100%;
			z-index: 2;
			overflow: hidden;
		}

		&__card {
			padding: 0 68rpx;
			height: 100%;
			font-size: 14px;
			line-height: 144rpx;
			color: #fff;
		}

		&__form {
			margin-top: -30rpx;
			padding: 76rpx;
			margin-bottom: 20rpx;
			height: 556rpx;
			box-sizing: border-box;
			border-bottom: 1px solid rgba(2, 2, 2, 0.3);
			overflow: auto;
		}

		&__item {
			position: relative;
			flex: 1;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx 24rpx;
			background: #F8F8F8;
			margin-bottom: 40rpx;

			.icon {
				width: 38rpx;
				height: 38rpx;
			}

			::v-deep .u-input__content__field-wrapper {
				border-bottom: 1rpx solid #3183FF;
			}
		}

		&__label {
			display: flex;
			align-items: center;
			margin-right: 100rpx;

			.icon {
				width: 50rpx;
				height: 50rpx;
			}

			.text {
				font-size: 12px;
				line-height: 18px;
				color: #555555;
				margin: 0 24rpx;
				width: 100rpx;
				@include line;
			}

			.fill-icon {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 26rpx;
				height: 26rpx;
				background-color: #1B76FF;
				border-radius: 50%;
				line-height: 26rpx;
			}
		}

		&__content {
			padding: 36rpx 76rpx;
		}

		&__actions {
			padding: 140rpx 30rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		&__action {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
			background: #4CD964;
			box-shadow: 0px 1px 9px 0px rgba(169, 169, 169, 0.5);

			&.green {}

			&.pink {
				background: linear-gradient(136deg, #FFA4A4 0%, #FF6B6B 100%);
				box-shadow: 0px 1px 9px 0px rgba(169, 169, 169, 0.5);
			}

			&.blue {
				background: linear-gradient(220deg, #19A1FF 0%, #70C9FF 100%);
				box-shadow: 0px 1px 9px 0px rgba(169, 169, 169, 0.5);
			}

			.img {
				width: 40rpx;
				height: 40rpx;
			}

			.text {
				color: #fff;
				font-size: 12px;
				line-height: 14px;
			}
		}

		&__close {
			position: absolute;
			padding: 20rpx;
			right: -60rpx;
			top: 50%;
			transform: translateY(-50%);
		}
	}
</style>