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

<template>
	<!-- 顶部导航栏 -->
	<custom-nav-bar :left="true" leftText="" @leftClick="" title="新增方案"></custom-nav-bar>

	<view class="create-container">
		<u-form ref="formRef" :model="formData" :rules="rules">
			<u-form-item label="方案名称" prop="scenarioName" required>
				<u-input border="none" v-model="formData.scenarioName" :placeholder="rules.scenarioName[0].message" />
			</u-form-item>
			<u-line color="#D2D2D2"></u-line>
			<u-form-item label="总时长(h)" prop="irrigateTotalDuration" required>
				<u-input border="none" v-model="formData.irrigateTotalDuration" @blur="inputChange($event,'irrigateTotalDuration')"
					:placeholder="rules.irrigateTotalDuration[0].message" />
			</u-form-item>
			<u-line color="#D2D2D2"></u-line>
			<u-form-item label="轮灌组数" prop="groupNum" required>
				<u-input border="none" v-model="formData.groupNum" :placeholder="rules.scenarioName[0].groupNum" />
			</u-form-item>
			<u-line color="#D2D2D2"></u-line>
			<u-form-item label="自动调压" prop="isAutoAdjust" required>
				<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" required>
				<u-input border="none" v-model="formData.pressureMin" @blur="inputChange($event,'pressureMin')"
					:placeholder="rules.pressureMin[0].groupNum" />
			</u-form-item>
			<u-line color="#D2D2D2"></u-line>
			<u-form-item label="最大压力" prop="pressureMax" required>
				<u-input border="none" v-model="formData.pressureMax" @blur="inputChange($event,'pressureMax')"
					:placeholder="rules.pressureMax[0].groupNum" />
			</u-form-item>
			<u-line color="#D2D2D2"></u-line>
			<view class="form-btn">
				<u-button type="success" size="large" text="确定" @click="confirm" />
				<u-button size="large" text="取消" @click="close" />
			</view>
		</u-form>
	</view>
</template>

<script>
	import {
		getLandConfig
	} from "@/api/system/land";
	import * as isApi from '@/api/irrigate/irrigateScenario.js'

	export default {
		data() {
			return {
				landId: null,
				formData: {
					landId: null, //地块id
					scenarioName: '', //浇灌方案名称
					irrigateTotalDuration: null, //浇灌总时长
					groupNum: null, //轮灌组数
					scenarioType: '2', //方案类型（1手动 2自动）
					isAutoAdjust: '0', //是否自动调压（0否1是）
					pressureMin: null, //压力最小值
					pressureMax: null, //压力最大值
					status: '0', //状态（0启用 1禁用）
					delFlag: '0', //删除状态（0存在 2删除）
				},
				rules: {
					scenarioName: [{
						required: true,
						message: '请输入方案名称',
						// trigger: ['change', 'blur']
					}],
					irrigateTotalDuration: [{
							required: true,
							message: '请输入总时长',
						}, // 正则判断为字母或数字
						{
							pattern: /^\d+(\.\d{1,2})?$/,
							// 正则检验前先将值转为字符串
							transform(value) {
								return String(value);
							},
							message: '只能包含数字或2位内的小数'
						}
					],
					groupNum: [{
							required: true,
							message: '请输入轮灌组数',
						}, // 正则判断为字母或数字
						{
							pattern: /^[0-9]*$/g,
							// 正则检验前先将值转为字符串
							transform(value) {
								return String(value);
							},
							message: '只能包含数字'
						}
					],
					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位内的小数'
						}
					]
				}
			};
		},
		onLoad(par) {
			if (par?.landId) {
				this.landId = par.landId;
			}
			this.initData(par?.id);
		},
		onShow() {},
		methods: {
			async initData(id = null) {
				uni.showLoading()
				if (id) {
					const res = await isApi.list({
						id: id
					})
					if (res.rows.length) {
						this.formData = res.rows[0];
					}
				} else {
					const res = await getLandConfig(this.landId);
					this.formData.landId = this.landId;
					this.formData.pressureMin = res.data?.pressureMin || null;
					this.formData.pressureMax = res.data?.pressureMax || null;
				}
				uni.hideLoading()
			},
			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;
			},
			confirm() {
				this.$refs.formRef.validate().then(valid => {
					if (valid) {
						uni.navigateTo({
							url: `/pages/irrigation/scenario/scenarioGroup?item=${JSON.stringify(this.formData)}`
						});
					}
				}).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;
		}
	}

	// 弹出框
	.popup-content {
		padding: 20px;
		background-color: #fff;
		text-align: center;
	}
</style>