TraceabilityAPP/pages/husbandryForm/irrigate.vue

<template>
	<!-- 播种 -->
	<view class="content">
		<view class="card">
			<u--form labelPosition="top" labelWidth='100' :model="formData" :rules="rules" ref="form">
				<u-form-item label="灌溉方式" prop="type" borderBottom required @click="showggai">
					<!-- 	<uni-data-select v-model="formData.type" :disabled="mode=='detail'"
						:localdata="range"></uni-data-select> -->
					<up-input placeholder="请选择灌溉方式" readonly border="surround" v-model="formDatatype"
						style="pointer-events: none;"></up-input>
				</u-form-item>

				<view class="" v-if="mode=='add'">
					<u-form-item label="开始日期" @click="openDate" prop="start_date" borderBottom required>
						<up-input placeholder="请选择日期" readonly border="surround" v-model="formData.start_date"
							style="pointer-events: none;"></up-input>
					</u-form-item>
					<u-form-item label="结束日期" prop="end_date" @click="openDate1" borderBottom required>
						<up-input placeholder="请选择日期" readonly border="surround" v-model="formData.end_date"
							style="pointer-events: none;"></up-input>
					</u-form-item>
				</view>
				<view class="" v-else>
					<u-form-item label="开始日期" prop="start_date" borderBottom required>
						<up-input placeholder="请选择日期" readonly border="surround" v-model="formData.start_date"
							style="pointer-events: none;"></up-input>
					</u-form-item>
					<u-form-item label="结束日期" prop="end_date" borderBottom required>
						<up-input placeholder="请选择日期" readonly border="surround" v-model="formData.end_date"
							style="pointer-events: none;"></up-input>
					</u-form-item>
				</view>
				<u-form-item label="灌溉面积(亩)" prop="area" borderBottom required>
					<up-input placeholder="请输入作业面积" :disabled="mode=='detail'" type="number" border="surround"
						v-model="formData.area"></up-input>
				</u-form-item>
				<u-form-item label="参与人" prop="user" borderBottom required>
					<up-input placeholder="请输入参与人" :disabled="mode=='detail'" type="txt" border="surround"
						v-model="formData.user"></up-input>
				</u-form-item>
				<view class="card-li">
					<view class="card-li-tit">
						<span>*</span>
						灌溉图片
					</view>
					<view class="code-img1">
						<view class="" v-if="pic.length>0"
							style="display: flex;flex-direction: row;flex-wrap: wrap;margin-bottom: 30rpx;">
							<view class="" v-for="(item,i) in pic" style="margin-right: 30rpx;">
								<view class="">
									<u-icon name="close" size="15" style="margin-left:120.85rpx;" @click="delimg(i)"
										v-show="mode=='add'"></u-icon>
									<u-image :src="item" width="150.85rpx" height="150.85rpx"
										@click="perviewFn(item)"></u-image>
								</view>
							</view>
						</view>

					</view>
					<view class="code-img" v-if="mode=='add'">
						<view class="" @click="updateImgFn">
							<view class="carime-icon">
								<u-image src="/static/img/DJSC.png" width="91.12rpx" height="91.12rpx"></u-image>
								<view class="">
									点击上传图片
								</view>
							</view>

						</view>

					</view>
				</view>
				<u-form-item label="备注" prop="remark" borderBottom >
					<u--textarea v-model="formData.remark" :disabled="mode=='detail'" placeholder="请输入内容"></u--textarea>
				</u-form-item>

			</u--form>
			<view>
			<!-- 	<uni-calendar ref="calendar" :showMonth="true" :lunar="true" :insert="false" @confirm="dateConfirmfn" />
				<uni-calendar ref="calendar1" :showMonth="true" :lunar="true" :insert="false"
					@confirm="dateConfirmfn1" /> -->
					<u-datetime-picker :show="show1" v-model="value1" mode="datetime" @confirm="dateConfirmfn"
						:formatter="formatter" @cancel="show1=false"></u-datetime-picker>
					<u-datetime-picker :show="show2" v-model="value1" mode="datetime" @confirm="dateConfirmfn1"
						:formatter="formatter" @cancel="show2=false"></u-datetime-picker>
				<u-action-sheet :show="showgg" :actions="range" title="请选择灌溉方式" @close="showgg = false"
					@select="ggSelect">
				</u-action-sheet>
			</view>
		</view>


		<view class="confirm" v-if="mode=='add'">
			<view class="confirm-btn" style="color: white;background-color: #0AA565;" @click="addFn">
				完成添加
			</view>

		</view>



	</view>

</template>

<script setup>
	import {
		Uploads
	} from "@/api/upload.js"
	import {
		reactive,
		ref
	} from "vue";
	import {
		onLoad,
		onReady,

	} from "@dcloudio/uni-app"

	import {
		addaction,
		plantdetail
	} from '@/api/api.js'
	const range = reactive([{
			value: 1,
			name: "喷灌"
		},
		{
			value: 2,
			name: "滴灌"
		},
		{
			value: 3,
			name: "沟灌"
		},
	])
	const task_id = ref('');
	const pic = reactive([]);
	const calendar = ref(null)
	const calendar1 = ref(null)
	const formDatatype = ref('')
	const showgg = ref(false)
	const form = ref(null)
	const value1 = ref(Date.now());
	const show1 = ref(false);
	const show2 = ref(false);
		const dataobj = reactive({})
	const openDate = () => {
		// calendar.value.open()
		show1.value = true
	}
	const openDate1 = () => {
		// calendar1.value.open()
		show2.value = true
	}
	const formatter = (type, value) => {
	  if (type === 'year') {
	    return `${value}年`;
	  }
	  if (type === 'month') {
	    return `${value}月`;
	  }
	  if (type === 'day') {
	    return `${value}日`;
	  }
	  return value;
	};
	// console.log()
	const formData = reactive({
		type: "",


	})

	//获取灌溉参数

	const ggSelect = (e) => {
		formDatatype.value = e.name
		formData.type = e.value
	}

	//打开灌溉弹窗
	const showggai = () => {
		showgg.value = true
	}

	//获取时间
	const dateConfirmfn = (e) => {
		formData.start_date = uni.$u.timeFormat(e.value, 'yyyy-mm-dd hh:MM ')
		show1.value = false
	}
	const dateConfirmfn1 = (e) => {
		formData.end_date = uni.$u.timeFormat(e.value, 'yyyy-mm-dd hh:MM ')
		show2.value = false
	}
	const rules = {
		'type': {
			type: 'number',
			required: true,
			message: '请选择灌溉方式',
			trigger: ['change']
		},
		'start_date': {
			type: 'string',
			required: true,
			message: '请填写开始日期',
			trigger: ['blur', 'change']
		},
		'end_date': {
			type: 'string',
			required: true,
			message: '请填写结束日期',
			trigger: ['blur', 'change']
		},
		'area': {
			type: 'string',
			required: true,
			message: '请填写土地面积',
			trigger: ['blur', 'change']
		},
		'user': {
			type: 'string',
			required: true,
			message: '请填写参与人',
			trigger: ['blur', 'change']
		}
		// ,
		// 'remark': {
		// 	type: 'string',
		// 	required: true,
		// 	message: '请填写备注',
		// 	trigger: ['blur', 'change']
		// },
	}
	onReady(() => {
		form.value.setRules(rules);

	});
	const navgo = (url) => {
		uni.navigateTo({
			url
		})
	}
	const addFn = () => {
		// console.log(formData)
		form.value.validate().then(res => {
			if (res) {
				if (formData.area > dataobj.area) {
					uni.$u.toast('灌溉面积不能超过种植面积')
					return
				}
				formData.pic = pic
				let data1 = {
					plant_id: task_id.value,
					type: 3,
					detail: JSON.stringify(formData)
				};
				if (formData.pic.length == 0) {
					uni.$u.toast('请上传图片')
					return
				}
				let endTime = new Date(formData.end_date)
				let startTime = new Date(formData.start_date)
				let plantTime = new Date(dataobj.plant_date)
				
				if (startTime < plantTime) {
					uni.$u.toast("灌溉时间必须超过种植的时间");
					return
				}
				if (endTime < plantTime) {
					uni.$u.toast("灌溉时间必须超过种植的时间");
					return
				}
				if (endTime < startTime) {
					uni.$u.toast("结束时间不能小于开始时间");
					return
				} else if (startTime > endTime) {
					uni.$u.toast("开始时间不能大于结束时间");
					return
				} else {
					console.log("开始时间和结束时间合法");
				}


				// 表单验证通过，执行提交操作

				addaction(data1).then((res) => {
					console.log(res)
					if (res.code == 1) {
						uni.$u.toast(res.msg)
						uni.navigateBack({
							delta: 1
						})
					}
				})
				// uni.$u.toast('校验成功')
			}
		}).catch((err)=>{
			 uni.$u.toast(err[0].message)
			console.log(err)
		})


	}
	//查看图片
	const perviewFn = (url) => {
		console.log(url)
		uni.previewImage({
			urls: [url]
		})
	}
	//图片删除
	const delimg = (i) => {
		pic.splice(i, 1);
	}
	//图片上传
	const updateImgFn = async () => {

		uni.chooseImage({
			count: 1,
			sizeType: ['original', 'compressed'],
			sourceType: ['album', 'camera'],
			success: (res) => {
				Uploads(res.tempFilePaths[0], 'img').then(res => {
					console.log(res)
					if (res.code == 1) {
						pic.push(res.data.url)
						console.log(data.formData)

						uni.$u.toast('上传成功')


					}



				}).catch(err => {
					//console.log('err', err);
					// uni.$u.toast('上传失败')
				})
			},
			fail: function(err) {
				//console.log('choose失败');
				uni.$u.toast('添加失败')
			}
		});
		// let res = await Uploads()
		// data.formData.pic = res.data.image
	}
const getlist = () => {
		plantdetail({
			plant_id: task_id.value
		}).then((res) => {
			if (res.code == 1) {
				// console.log(res)
				Object.assign(dataobj, res.data)
			}
		});
	};
	const mode = ref('add')
	onLoad((options) => {
		if (options.task) {
			let data = options.task ? JSON.parse(decodeURIComponent(options.task)) : null;
			console.log(data, data.detail)
			Object.assign(formData, data.detail);
			pic.splice(0, pic.length, ...data.detail.pic);
			formDatatype.value = range.find(item => item.value === formData.type).name;
			mode.value = 'detail'
			uni.setNavigationBarTitle({
				title: '灌溉详情'
			})

			// formData=data.detail

		} else {
			task_id.value = options.id
		}

getlist()

	})
</script>

<style lang='scss' scoped>
	.content {
		padding-bottom: 100rpx;
	}

	.tit {
		display: flex;
		justify-content: space-between;
	}

	.card-li-tit {
		position: relative;
		
		span {
			position: absolute;
			left: -9px;
			color: #f56c6c;
			line-height: 20px;
			font-size: 20px;
			top: 3px;
		}
		
		margin-bottom: 20rpx;
	}

	.confim-btn {
		margin: 0 auto;
		width: 196.26rpx;
		height: 66.59rpx;
		/* border: ; */
		border: #00A15E 1px solid;
		color: #00A15E;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 42.06rpx 42.06rpx 42.06rpx 42.06rpx;
	}

	.up-img {
		width: 341.71rpx
	}

	.today-btn {
		width: 588.79rpx;
		background-color: #00A15E;
		color: white;
		position: fixed;
		bottom: 40rpx;
		/* transform: ; */
		left: 50%;
		transform: translateX(-50%);
		background: linear-gradient(to right, #00A15E, #4CC593);
		/* margin: 0 auto; */
	}

	.code-img {
		background-color: #F4F4F4;
		height: 350.47rpx;
		position: relative;
		/* margin-bottom: 100rpx; */

		.carime-icon {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			display: flex;
			flex-direction: column;
			align-items: center;
		}

	}

	.confirm {
		position: fixed;
		height: 84.11rpx;
		display: flex;
		bottom: 30rpx;
		width: 750rpx;

		.confirm-btn {
			width: 315.42rpx;
			height: 84.11rpx;
			border: #00A15E 1px solid;
			margin: 0 auto;
			border-radius: 80rpx;
			text-align: center;
			line-height: 84rpx;
		}
	}
</style>