jsy-app/pages/irrigation/task/task.vue

<template>
	<!-- 顶部导航栏 -->
	<custom-nav-bar :left="true" leftText="" @leftClick="" title="新增任务"></custom-nav-bar>
	<view class="create-container">
		<u-form ref="form" :model="formData" :rules="rules">
			<u-form-item label="任务名称" prop="taskName" required>
				<u-input border="none" v-model="formData.taskName" :placeholder="rules.taskName[0].message" />
			</u-form-item>
			<u-line color="#D2D2D2"></u-line>
			<u-form-item label="轮灌方案" prop="scenarioName" required>
				<view @click="openPopup" style="line-height: 24px;width: 100%;">
					<span v-if="formData.scenarioName != null && formData.scenarioName != ''">
						{{formData.scenarioName}}
					</span>
					<span v-else>{{rules.scenarioName[0].message}}</span>
				</view>
			</u-form-item>
			<u-line color="#D2D2D2"></u-line>
			<u-form-item label="起始组" prop="startGroup" required>
				<view @click="openPopup" style="line-height: 24px;width: 100%;">
					<span v-if="formData.startGroup != null && formData.startGroup != ''">
						{{formData.startGroup}}
					</span>
					<span v-else>{{rules.startGroup[0].message}}</span>
				</view>
			</u-form-item>
			<u-line color="#D2D2D2"></u-line>
			<u-form-item label="开始时间" prop="startTime" required>
				<!-- <u-datetime-picker hasInput :show="show" v-model="formData.startTime" mode="datetime" /> -->
			</u-form-item>
			<u-line color="#D2D2D2"></u-line>
			<u-form-item label="轮灌组数" prop="groupNum" required>
				<view @click="openPopup" style="line-height: 24px;width: 100%;">
					<span v-if="formData.groupNum != null && formData.groupNum != ''">
						{{formData.groupNum}}
					</span>
					<span v-else>{{rules.groupNum[0].message}}</span>
				</view>
			</u-form-item>
			<u-line color="#D2D2D2"></u-line>
			<u-form-item label="自动调压" prop="isAutoAdjust">
				<u-radio-group v-model="formData.isAutoAdjust" color="#39ac4f" :disabled="true">
					<u-radio label="否" name="0" style="margin-right: 30px;" />
					<u-radio label="是" name="1" />
				</u-radio-group>
			</u-form-item>
			<u-line color="#D2D2D2"></u-line>
			<u-form-item label="最小压力" prop="pressureMin">
				<u-input border="none" v-model="formData.pressureMin" @blur="inputChange($event,'pressureMin')"
					:placeholder="rules.pressureMin[0].groupNum" disabled />
			</u-form-item>
			<u-line color="#D2D2D2"></u-line>
			<u-form-item label="最大压力" prop="pressureMax">
				<u-input border="none" v-model="formData.pressureMax" @blur="inputChange($event,'pressureMax')"
					:placeholder="rules.pressureMax[0].groupNum" disabled />
			</u-form-item>
			<u-line color="#D2D2D2"></u-line>
			<view class="form-btn">
				<u-button type="success" size="large" text="立即执行" @click="" />
				<u-button size="large" text="取消" @click="close" />
			</view>
		</u-form>
	</view>

	<!-- 左侧分组弹出层 -->
	<u-popup mode="bottom" :show="showPop" @close="closePopup" :closeOnClickOverlay="true">
		<view style="padding-bottom: 46px; background: #f3f3f3;">
			<view class="text-intel">
				<view>
					<span>轮灌方案：</span>
					<span class="font-green">{{scenario.length}}</span>个
				</view>
			</view>
			<view style="max-height: 60vh; overflow-y: scroll;">
				<view class="card">
					<uni-collapse>
						<view v-for="item in scenario">
							<uni-collapse-item title-border="none" :border="false" :show-arrow="false" :open="true">
								<template v-slot:title>
									<view class="cards-title">
										<view>
											<view class="text">{{item.scenarioName}}</view>
											<view style="margin-left: 10px;">
												<span>时长：</span>
												<span class="font-orange"
													style="text-decoration: underline;">{{`${item.irrigateTotalDuration} h`}}</span>
											</view>
											<view style="margin-left: 20px;">
												<span>轮灌组数：</span>
												<span class="font-green"
													style="text-decoration: underline;">{{item.groupNum}}</span>
											</view>
										</view>
									</view>
								</template>
								<view class="content">
									<view class="cards-content" v-if="item.groupNum > 0">
										<view class="greybar" v-for="group in item.groupNum">
											<view>轮灌组<span>{{group}}</span></view>
											<view style="text-align: center;" @click="selectScenario(item,group)">
												<span>选择</span>
											</view>
										</view>
									</view>
								</view>
							</uni-collapse-item>
						</view>
					</uni-collapse>
				</view>
			</view>
			<view style="position: absolute;bottom: 0; width: 100%;">
				<u-button type="success" size="large" text="关闭" @click="closePopup" />
			</view>
		</view>
	</u-popup>
</template>

<script>
	import {
		list
	} from '@/api/irrigate/irrigateScenario.js'
	import * as taskApi from '@/api/irrigate/task.js'

	export default {
		data() {
			return {
				landId: null,
				formData: {
					landId: null, //地块id
					irrigateScenarioId: null, //轮灌方案id
					scenarioName: null, //浇灌方案名称
					taskName: null, //任务名称
					startTime: null, //开始时间
					// endTime: null,	//结束时间
					startGroup: null, //起始轮灌组
					isAutoAdjust: '0', //是否自动调压（0否1是）
					pressureMin: null, //压力最小值
					pressureMax: null, //压力最大值
					status: 0, //状态(0未轮灌，1轮灌中，2已完成，3已终止，4暂停)
					// endReason: null,	//结束原因
				},
				rules: {
					taskName: [{
						required: true,
						message: '请输入任务名称',
						// trigger: ['change', 'blur']
					}],
					scenarioName: [{
						required: true,
						message: '请选择轮灌方案',
						// trigger: ['change', 'blur']
					}],
					startGroup: [{
						required: true,
						message: '请选择起始组',
						// trigger: ['change', 'blur']
					}],
					startTime: [{
						required: true,
						message: '请选择开始时间',
						// trigger: ['change', 'blur']
					}],
					groupNum: [{
						required: true,
						message: '请选择轮灌方案',
						// trigger: ['change', 'blur']
					}],
					pressureMin: [{
							required: true,
							message: '请输入最小压力',
						}, // 正则判断为字母或数字
						{
							pattern: /^\d+(\.\d{1,2})?$/,
							// 正则检验前先将值转为字符串
							transform(value) {
								return String(value);
							},
							message: '只能包含数字或2位内的小数'
						}
					],
					pressureMax: [{
							required: true,
							message: '请输入最大压力',
						}, // 正则判断为字母或数字
						{
							pattern: /^\d+(\.\d{1,2})?$/,
							// 正则检验前先将值转为字符串
							transform(value) {
								return String(value);
							},
							message: '只能包含数字或2位内的小数'
						}
					]

				},
				showPop: false,
				scenario: [],
			};
		},
		onLoad(par) {
			if (par?.landId) {
				this.landId = par.landId;
			}
			// this.initData(par?.id);
		},
		methods: {
			inputChange(e, filed) {
				// 清理非数字和非小数点字符
				let cleaned = e.replace(/[^0-9.]/g, '');
				// 确保只有一个小数点，并截取小数点后两位
				const [integerPart, decimalPart = ""] = cleaned.split('.').slice(0, 2);
				const formattedDecimal = decimalPart ? `${integerPart}.${decimalPart.slice(0, 2)}` : integerPart;
				this.formData[filed] = formattedDecimal;
			},
			async openPopup() {
				if (!this.scenario.length) {
					uni.showLoading()
					const res = await list({
						landId: this.landId,
						scenarioType: 2,
						status: "0",
						delFlag: "0",
					})
					this.scenario = res.rows;
					uni.hideLoading()
				}
				this.showPop = true;
			},
			selectScenario(item, startGroup) {
				this.formData.irrigateScenarioId = item.id;
				this.formData.scenarioName = item.scenarioName;
				this.formData.irrigateTotalDuration = item.irrigateTotalDuration;
				this.formData.groupNum = item.groupNum;
				this.formData.isAutoAdjust = item.isAutoAdjust;
				this.formData.pressureMin = item.pressureMin;
				this.formData.pressureMax = item.pressureMax;
				this.formData.startGroup = startGroup;
				this.closePopup();
			},
			closePopup() {
				this.showPop = false;
			},
			confirm() {
				this.$showConfirm("立即执行?").then(() => {
					// taskApi.addTask(this.formData).then(res => {
					uni.navigateBack();
					// });
				}).catch(() => {});
			},
			close() {
				uni.navigateBack();
			},

		}
	}
</script>

<style lang="scss" scoped>
	body {
		background-color: #fff;
	}

	// 表单
	.create-container {
		padding: 0 20px;
		background-color: #FFF;

		// .custom-input {
		//   width: 280px;
		// }
		// .form-item {
		// 	margin-left: 20px;
		// 	display: flex;
		// 	align-items: flex-start;
		// 	width: 100%;
		// }
		::v-deep .u-form-item__body__left {
			width: 80px !important;
		}
	}
.greybar>uni-view:first-child{color: #333;}
	// 弹出框
	.popup-content {
		padding: 20px;
		background-color: #fff;
		text-align: center;
	}
</style>