bigdata_WX/pages/cb/cbd/equip-set/manualinput.vue

<template>
	<view>
		<view class="tishi" v-if="!itemListTF">
			暂无数据
		</view>
		<u-collapse v-else>
			<u-collapse-item :title="'害虫名称：'+item.pest_name" v-for="(item, index) in itemList" :key="index">
				<p>害虫数量：{{item.pest_num}}</p>
				<p>作物种类：{{item.crop_name}}</p>
				<p>虫害阶段：{{item.pest_case}}</p>
				<view class="btn">
					<view class="btn_alter" @click="alter(item)">
						编辑
					</view>
					<view class="btn_add" @click="deletes">
						删除
					</view>
				</view>
			</u-collapse-item>
			<u-modal v-model="show" :title="content" :mask-close-able="true" :show-cancel-button="true" @confirm="confirm">
				<u-form :model="form" ref="uForm" class="uForm">
					<u-form-item label="害虫名称" :required="requireds" label-width="150rpx" prop="pest_name" class="form_item">
						<u-input v-model="form.pest_name" />
					</u-form-item>
					<u-form-item label="害虫数量" :required="requireds" label-width="150rpx" prop="pest_num" class="form_item">
						<u-input v-model="form.pest_num" type="number" />
					</u-form-item>
					<u-form-item label="作物种类" label-width="150rpx" class="form_item">
						<u-input v-model="form.crop_name" />
					</u-form-item>
					<u-form-item label="虫害阶段" label-width="150rpx" class="form_item">
						<u-input v-model="form.pest_case" />
					</u-form-item>
				</u-form>
			</u-modal>
		</u-collapse>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				itemList: [],
				content:"修改",
				show:false,
				form:{
					pest_name:"",
					pest_num:"",
					crop_name:"",
					pest_case:""
				},
				requireds: true,
				device_id:"",//设备id
				addtime:"",//图片添加时间
				wormid:"",//图片id
				id:"",//害虫信息单条id
				itemListTF:false
			}
		},
		methods: {
			async species(id) { //统计
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=forecast.forecast_system.equip_photo_species',
					data: {
						ret: "photo_desc",
						img_id: id
					}
				})
				console.log(res)
				this.itemList = res
				if(res.length==0){
					this.itemListTF = false
				}else{
					this.itemListTF = true
				}
			},
			async addspecies() { //修改
				var time = +new Date()
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=forecast.forecast_system.equip_photo_describe',
					data: {
						ret: "change_dsec",
						img_id: this.id,
						describe: JSON.stringify(this.form),
						device_id:this.device_id,
						photo_time:this.addtime,
						time: time,
						id:this.wormid
					}
				})
				console.log(res)
				if(res){
					uni.showToast({
						title: '修改成功',
						duration: 1000,
						image: ""
					});
					this.species(this.id)
				}
			},
			async delspecies() { //修改
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=forecast.forecast_system.equip_photo_describe',
					data: {
						ret: "del_desc",
						img_id: this.id,
						describe: JSON.stringify(this.form),
						device_id:this.device_id,
						photo_time:this.addtime,
						id:this.wormid
					}
				})
				console.log(res)
				if(res){
					uni.showToast({
						title: '删除成功',
						duration: 1000,
						image: ""
					});
					this.species(this.id)
				}
			},
			alter(item){
				this.show = true
				this.form.pest_name=item.pest_name
				this.form.pest_num=item.pest_num
				this.form.crop_name=item.crop_name
				this.form.pest_case=item.pest_case
				this.wormid=item.id
			},
			deletes(){
				uni.showModal({
				    title: '提示',
				    content: '确定删除这条害虫信息吗？',
				    success:(res)=> {
				        if (res.confirm) {
				           this.delspecies()
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				        }
				    }
				});
				
			},
			confirm(){
				if (this.form.pest_name== "") {
					uni.showToast({
						title: '请输入害虫名称',
						duration: 1000,
						image: ""
					});
				} else if (this.form.pest_num == "") {
					uni.showToast({
						title: '请输入害虫数量',
						duration: 1000,
						image: ""
					});
				} else {
					this.addspecies()
				}
			}
		},
		onLoad(option) {
			this.species(option.id)
			this.id = option.id
			this.device_id = option.device_id
			this.addtime = option.addtime
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f1f1f1;
	}
	.tishi{
		width: 100%;
		height: 200rpx;
		text-align: center;
		line-height: 200rpx;
		font-size: 32rpx;
	}
	.u-collapse-item {
		width: 100%;
		padding: 10rpx 28rpx;
		justify-content: space-between;
		box-sizing: border-box;
		margin-top: 20rpx;
		background-color: #FFFFFF;
		p{
			margin: 10rpx auto;
			width: 90%;
		}
		.btn{
			width: 90%;
			margin: 0 auto;
			display: flex;
			justify-content: flex-end;
			.btn_add,.btn_alter{
				width: 100rpx;
				height: 50rpx;
				background-color: #e95354;
				color: #FFFFFF;
				text-align: center;
				line-height: 50rpx;
				border-radius: 50rpx;
			}
			.btn_alter{
				background-color: #77ab84;
				margin-right: 20rpx;
			}
		}
	}
</style>