yanzhiAPP/pages/growRecord/index.vue

<template>
	<view :class="{popupShow:showPop}">
		<view class="cont">
			<landInfo :land_id='land_id'></landInfo>
			<view class="operate" v-for="(item,index) in actionData" :key="index" v-show="title==index">
				<view class="tit">
					{{index}}
				</view>
				<view class="card">
					<view class="operate-li" style="margin: 20rpx 0;margin-right: 20rpx;" @click="showPopFn(items.id)"
						v-for="items,indexs in item.actions" :key='indexs'>
						{{items.name}}
					</view>
				</view>
			</view>
			<!-- {{actionList}} -->
			<view class="fertilize" v-for="(item,index) in actionList" :key="index">
				<!-- {{actionList}} -->
				<view class="card" style="padding-bottom: 0;">
					<view class="fertilize-tit">
						<view class="">
							{{item.action_name}}
						</view>
						<view class="fertilize-tit-r">
							<view class="" style="color: red;" @tap="del(item.id)">
								删除
							</view>
							<view style="margin-left: 40rpx;color: #00A15E;" @tap='editFn(item)'>
								编辑
							</view>
						</view>
					</view>
					<view class="fertilize-li">
						<view class="fertilize-li-a" v-for="(items,indexs) in item.action_content" :key="indexs"
							v-show="items[0]?.tit">
							<!-- {{indexs}} -->
							<view class="" v-for="item2 in items" :key="item2" v-show="item2.tit">
								<view class="" v-if="indexs=='text'||indexs=='select'">
									{{item2.tit}}: {{item2.value}}
								</view>
								<view v-if="indexs=='pic'">
									{{item2.tit}}: <text style="color: #3274F9;"
										@click="previewImage(item2.value)">图片</text>
								</view>
							</view>

						</view>
					</view>

				</view>
			</view>

			<view class="" style="height: 100px">
			</view>
		</view>

		<view class="ripe-btn" @click="finshFn">
			完成今日操作
		</view>
		<!-- 组件 -->
		<view class="">
			<u-popup :show="showPop" :round="10" :closeable='true' @close="popCloseFn" @open="showPop=true">
				<scroll-view scroll-y style="max-height: 90vh;">
					<!-- 滚动内容 -->

					<!-- 文本 -->
					<view class="pop-content" v-for="item,index in popList.text" :key='index'>
						<view class="">
							{{item.title}}
						</view>
						<view class="pop-li">
							<up-input placeholder="请输入" border="surround" v-model="formData1.text[index].value"
								@change="change1(item.title,index)"></up-input>
						</view>
					</view>
					<!-- 下拉 -->
					<view class="pop-content" v-for="item,index in popList.select" :key='index'>
						<view class="">
							{{item.title}}
						</view>
						<view class="pop-li">
							<up-input placeholder="点击选择" @change="change2(item.title,index)" border="surround"
								v-model="formData1.select[index].value" @tap="choseSelect(item,index)"></up-input>
						</view>
					</view>
					<!-- 图片 -->
					<view class="pop-content" v-for="item,index in popList.pic" :key='index'>
						<view class="">
							{{item.title}}
						</view>
						<view class="pop-li" @click="updateImgFn(item.title,index)">
							<view v-if="formData1.pic[index]?.value">
								<u--image :src="formData1.pic[index]?.value" width="100%" height="196.26rpx"></u--image>
							</view>
							<view class="code-img" v-else>
								<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>
					<!-- 搜素 -->
					<view class="pop-content" v-for="item,index in popList.serch" :key='index'>
						<view class="">
							{{item.title}}
						</view>
						<view class="pop-li">
							<up-input placeholder="请输入品种" border="surround" v-model="formData1.serch[index].value"
								@change="change4(item.title,index)"></up-input>
						</view>
						<view style="margin-bottom: 20rpx;" v-for="(item,index) in  serchList" :key="item">
							<u-swipe-action>
								<u-swipe-action-item :options="options1"
									style="border-radius: 20rpx;border: 1px solid #C7C6CD;" @click="swipeDel(index)">
									<view class="" style="padding: 20rpx 30rpx;">
										<view class="swipe-action-tit">
											<view class="">
												编号: {{item.animal_code}}
											</view>
											<view class="" style="color: #00A15E;" v-if="item.animal_status==1">
												健康
											</view>
											<view class="" style="color: #FFD736;" v-if="item.animal_status==2">
												怀孕中
											</view>
											<view class="" style="color: #3274F9;" v-if="item.animal_status==3">
												可出栏
											</view>
											<view class="" style="color: #3274F9;" v-if="item.animal_status==5">
												可出栏
											</view>
										</view>
										<view class="swipe-action-li">
											<view class="">
												养殖品种:{{item.animal_kind}}
											</view>
											<view class="">
												年龄: {{item.animal_age}}个月
											</view>
											<view class="">
												体重: {{item.animal_weight}}kg
											</view>
										</view>
									</view>

								</u-swipe-action-item>
							</u-swipe-action>
						</view>
					</view>

					<view class="pop-confirm" @tap="confirm">
						确认
					</view>
				</scroll-view>
			</u-popup>
		</view>
		<!-- 组件 -->
		<u-picker :show="showPicker" :columns="columns" @confirm="confirmFn" @close="showPicker=false"
			@cancel="showModal=false"></u-picker>
		<u-modal :show="showModal" :showCancelButton='true' :closeOnClickOverlay="true" @close="showModal=false"
			content='确认删除吗?' @confirm="delFn" @cancel="showModal=false"></u-modal>
	</view>

</template>

<script setup>
	import {
		ref,
		reactive
	} from "vue"
	import landInfo from "@/components/plant/landInfo.vue"
	import {
		actionsListAPI,
		actionsDetailAPI,
		addLandCropRecordAPI,
		landCropRecordListAPI,
		delLandCropRecordAPI,
		ediLandCropRecordAPI
	} from "@/api/plant.js"
	import {
		onLoad
	} from "@dcloudio/uni-app"


	import {
		addFishRecordAPI
	} from "@/api/aquatic.js"
	import uplodeImg from "@/utils/uplodeImg.js"
	const serchList = reactive([])
	const actionList = reactive([])
	const options1 = reactive([{
		text: '删除'
	}])
	const showPicker = ref(false)
	const columns = reactive([
		['中国', '美国', '日本']
	], )
	const confirmFn = (e) => {
		showPicker.value = false
		formData1.select[selectIndex.value].value = e.value[0]
	}
	const crop_id = ref(0)
	const land_id = ref(0)
	const type = ref(0)
	const actionData = reactive({})
	const delIndex = ref(0)
	const title = ref('')
	onLoad((options) => {
		title.value = options.title
		land_id.value = options.land_id
		crop_id.value = options.crop_id
		getAcyionListFn()
	})
	const getAcyionListFn = (type) => {
		actionList.splice(0, actionList.length)
		actionsListAPI({
			type: 1,
			crop_id: crop_id.value
		}).then(res => {
			for (let key in res.data) {
				if (key == title.value) {
					actionData[key] = res.data[key]
					actionData[key].action_record.forEach(item => {
						item.action_content = JSON.parse(item.action_content)
					})
					actionList.push(...(res.data[key].action_record))
				}
			}
			console.log(actionList)
		})
	}
	const showPop = ref(false)
	const baseData = reactive({
		text: {
			value: "",
			tit: ""
		},
		select: {
			value: "",
			tit: ""
		},
		pic: {
			value: "",
			tit: ""
		},
		serch: {
			value: "",
			tit: "",
			list: [],
		},
	})
	let formData = reactive({
		text: [{
			value: "",
			tit: ""
		}],
		select: {
			value: "",
			tit: ""
		},
		pic: {
			value: "",
			tit: ""
		},
		serch: {
			value: "",
			tit: "",
			list: [],
		},
	})
	let formData1 = reactive({
		text: [],
		select: [],
		pic: [],
		serch: []

	})
	// 操作类型,true为添加,false为编辑
	const actionType = ref(false)
	const confirm = () => {
		showPop.value = false
		if (actionType.value) {
			addLandCropRecordAPI({
				crop_id: Number(crop_id.value),
				action_id: action_id.value,
				action_content: JSON.stringify(formData1)
			}).then(res => {
				setPropertiesToNull(formData1)
			})
		} else {
			ediLandCropRecordAPI({
				record_id: delIndex.value,
				action_content: JSON.stringify(formData1)
			})
		}
		objClear(popList)
		getAcyionListFn(type.value)
		serchList.splice(0, serchList.length)

	}
	const navgo = (url) => {
		uni.navigateTo({
			url
		})
	}
	const del = (index) => {
		showModal.value = true
		delIndex.value = index
	}
	const showModal = ref(false)
	const delFn = () => {
		showModal.value = false
		delLandCropRecordAPI({
			record_id: delIndex.value
		}).then(res => {
			getAcyionListFn(type.value)
		})
	}
	const editFn = (item) => {
		delIndex.value = item.id
		showPopFn(item.action_id)
		formData1 = reactive(deepCopy(item.action_content))
		if (item.action_content.serch?.list?.length) {
			item.action_content.serch.list.forEach(item => {
				animalSearchByCodeAPI({
					code: item
				}).then(res => {
					serchList.push(res.data)
				})
			})
		}
		actionType.value = false

	}
	const popList = reactive({
		text: [],
		serch: [],
		select: [],
		pic: []
	})
	const action_id = ref("")
	const showPopFn = (id) => {
		actionType.value = true
		// 清除上次表单与popList数据,
		objClear(formData1)
		objClear(popList)
		action_id.value = id
		actionsDetailAPI({
			action_id: id
		}).then(res => {
			res.data.forEach(item => {
				if (item.type == 1) {
					formData1.text.push({
						tit: "",
						value: ""
					})
					popList.text.push(item)

				}
				if (item.type == 2) {
					formData1.pic.push({
						tit: "",
						value: ""
					})
					popList.pic.push(item)

				}
				if (item.type == 4) {
					formData1.select.push({
						tit: "",
						value: ""
					})
					popList.select.push(item)

				}
				if (item.type == 3) {
					formData1.serch.push({
						value: "",
						tit: "",
						list: [],
					})
					popList.serch.push(item)
				}
				if (item.type == 4) {

				}
			})
			showPop.value = true

		})
	}
	const updateImgFn = (tit, index) => {
		change3(tit, index)
		uplodeImg().then(res => {
			formData1.pic[index].value = res.data.image
		})
	}
	const previewImage = (src) => {
		uni.previewImage({
			urls: [src],
		})
	}
	const selectIndex = ref('')
	const choseSelect = (item, index) => {

		formData1.select[index].tit = item.title
		selectIndex.value = index
		columns[0] = item.options.split(',')
		showPicker.value = true
	}
	const change1 = (tit, index) => {
		formData1.text[index].tit = tit
	}
	const change2 = (tit) => {
		formData.select.tit = tit
	}
	const change3 = (tit, index) => {
		formData1.pic[index].tit = tit
	}
	const change4 = (tit) => {
		formData.serch.tit = tit
		if (formData.serch.value) {
			animalSearchByCodeAPI({
				code: formData.serch.value
			}).then(res => {
				if (res.data.id) {
					serchList.push(res.data)
					console.log(formData.serch, 54554)
					formData.serch.list.push(formData.serch.value)
				}
				formData.serch.value = ''
			})
		}

	}

	function deepCopy(obj) {
		if (typeof obj !== 'object' || obj === null) {
			return obj;
		}

		var newObj = Array.isArray(obj) ? [] : {};

		for (var key in obj) {
			if (obj.hasOwnProperty(key)) {
				newObj[key] = deepCopy(obj[key]);
			}
		}

		return newObj;
	}

	const objFn = (res, data) => {
		for (let key in res) {
			if (typeof res[key] === 'object') {
				objFn(res[key], data[key]);

			} else {
				data[key] = res[key]
			}
		}
	}
	const setPropertiesToNull = (obj) => {
		for (var prop in obj) {
			if (obj.hasOwnProperty(prop)) {
				if (typeof obj[prop] === 'object') {
					setPropertiesToNull(obj[prop]);
				} else {
					obj[prop] = null;
				}
			}
		}
	}
	const objClear = (obj) => {
		for (let key in obj) {
			obj[key].splice(0, obj[key].length)
		}
	}
	const popCloseFn = () => {
		showPop.value = false
		serchList.splice(0, serchList.length)
		objClear(popList)
		objClear(formData1)

		// setPropertiesToNull(formData)
	}
	const swipeDel = (e) => {
		serchList.splice(e, 1);
		formData1.serch.list.splice(e, 1)
	}
	const finshFn = () => {
		uni.navigateTo({
			url: "/pages/index/index"
		})
	}
</script>

<style lang="scss" scoped>
	.cont {
		padding-top: 30rpx;
		background-color: #F4F4F4;
		min-height: 100vh;
	}

	.card {
		.tit {
			display: flex;
			padding-bottom: 20rpx;
			border-bottom: 1px solid #EBF1EF;
		}

		.card-li {
			margin-top: 20rpx;
			display: flex;
		}
	}

	.operate {
		width: 693.93rpx;
		margin: auto;

		.tit {
			margin: 20rpx 0;
		}

		.card {
			display: flex;
			flex-wrap: wrap;

			.operate-li {
				font-size: 29.79rpx;
				padding: 0 60rpx;
				background-color: #F4F4F4;
				margin-bottom: 28rpx;
				height: 63.08rpx;
				line-height: 63rpx;
				border-radius: 31.54rpx 31.54rpx 31.54rpx 31.54rpx;
			}
		}
	}

	.ripe-btn {
		position: fixed;
		bottom: 50rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 588.79rpx;
		height: 84.11rpx;
		background-color: #00A15E;
		color: white;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 0 auto;
		border-radius: 42.06rpx 42.06rpx 42.06rpx 42.06rpx;
		background: linear-gradient(to right, #00A15E, #4CC593);
	}

	.fertilize {
		.fertilize-tit {
			display: flex;
			// justify-self: center;
			justify-content: space-between;
			padding-bottom: 20rpx;
			border-bottom: 1px solid #F4F4F4;
			margin-bottom: 20rpx;

			.fertilize-tit-r {
				display: flex;
			}
		}

		.fertilize-li {
			display: flex;
			justify-content: space-between;
			margin-bottom: 20rpx;
			flex-wrap: wrap;

			.fertilize-li-a {
				margin-bottom: 20rpx;
				min-width: 40vw;
			}
		}
	}

	.pop-content {
		padding: 20rpx;
		padding-bottom: 0;

		.pop-tit {
			margin-bottom: 20rpx;
			font-weight: bold;
		}

		.pop-li {
			margin: 20rpx 0;
			// margin-bottom: 40rpx;
		}
	}

	.pop-confirm {
		width: 693.93rpx;
		height: 84.11rpx;
		background: linear-gradient(to right, #00A15E, #4CC593);
		color: white;
		border-radius: 42.06rpx 42.06rpx 42.06rpx 42.06rpx;
		text-align: center;
		line-height: 84rpx;
		margin-top: 70rpx;
		margin: 0 auto;
	}

	.code-img {
		background-color: #F4F4F4;
		height: 196.26rpx;
		position: relative;

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

	}

	.swipe-action-tit {
		display: flex;
		justify-content: space-between;
		border-bottom: 1px solid #F4F4F4;
		padding-bottom: 20rpx;
		margin-bottom: 20rpx;
	}

	.swipe-action-li {
		display: flex;
		justify-content: space-between;
		// align-items: ;
	}

	.popupShow {
		// overflow: hidden;
		position: fixed;
		left: 30rpx;
	}
</style>