jsy-app/pages/dev-ops/editMp.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="name" required>
				<!-- <u-input border="none" v-model="formData.name" :placeholder="rules.name[0].message" :disabled="true" /> -->
				{{ formData.name }}
			</u-form-item>
			<u-line color="#D2D2D2"></u-line>
			<u-form-item label="层数" prop="floors" required>
				<u-input border="none" v-model="formData.floors" :placeholder="rules.floors[0].message" />
			</u-form-item>
			<u-line color="#D2D2D2"></u-line>
			<u-form-item label="第一层深度" prop="firstDepth" required>
				<u-input border="none" v-model="formData.firstDepth" @blur="inputChange($event,'firstDepth')"
					:placeholder="rules.firstDepth[0].message" />
			</u-form-item>
			<u-line color="#D2D2D2"></u-line>
			<u-form-item label="间隔" prop="interval" required>
				<u-input border="none" v-model="formData.interval" @blur="inputChange($event,'interval')"
					:placeholder="rules.interval[0].message" />
			</u-form-item>
			<u-line color="#D2D2D2"></u-line>
			<u-form-item label="深度" prop="depth" required>
				<!-- <u-input border="none" v-model="formData.depth" @blur="inputChange($event,'depth')"
					:placeholder="rules.depth[0].message" /> -->
				{{ formData.depth }}
			</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 plugins from '../../plugins';
	import * as mpApi from '@/api/iot/deviceMp.js'

	export default {
		data() {
			return {
				id: null,
				formData: {
					landId: undefined, //  地块id
					deviceId: undefined, //  设备id
					name: undefined, //  墒情名称
					floors: undefined, //  层数
					firstDepth: undefined, // 第一层深度
					interval: undefined, // 间隔
					depth: undefined, //  深度
				},
				rules: {
					name: [{
						required: true,
						message: '请输入墒情名称',
						// trigger: ['change', 'blur']
					}],
					floors: [{
							required: true,
							message: '请输入层数',
						}, // 正则判断为字母或数字
						{
							pattern: /^[0-9]*$/g,
							// 正则检验前先将值转为字符串
							transform(value) {
								return String(value);
							},
							message: '只能包含数字'
						}
					],
					firstDepth: [{
							required: true,
							message: '请输入第一层深度',
						}, // 正则判断为字母或数字
						{
							pattern: /^\d+(\.\d{1,2})?$/,
							// 正则检验前先将值转为字符串
							transform(value) {
								return String(value);
							},
							message: '只能包含数字或2位内的小数'
						}
					],
					interval: [{
							required: true,
							message: '请输入间隔',
						}, // 正则判断为字母或数字
						{
							pattern: /^\d+(\.\d{1,2})?$/,
							// 正则检验前先将值转为字符串
							transform(value) {
								return String(value);
							},
							message: '只能包含数字或2位内的小数'
						}
					],
				}
			};
		},
		watch: {
			"formData.floors": function(newV, oldV) {
				this.calcDepth()
			},
			"formData.firstDepth": function(newV, oldV) {
				this.calcDepth()
			},
			"formData.interval": function(newV, oldV) {
				this.calcDepth()
			},
		},
		onLoad(par) {
			this.id = par.id || -1;
			this.initData();
		},
		onShow() {},
		methods: {
			async initData() {
				uni.showLoading()
				mpApi.getDeviceMp(this.id).then(res => {
					uni.hideLoading()
					if (res.data) {
						res.data.firstDepth = res.data.depth.split(",")[0];
						res.data.interval = res.data.depth.split(",")[1] - res.data.depth.split(",")[0];
						this.formData = res.data;
					} else {
						plugins.modal.alert("数据异常", () => {
							this.close();
						})
					}
				}).catch(error => {
					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;
			},
			// 计算深度
			calcDepth() {
				if (this.formData.floors && this.formData.firstDepth && this.formData.interval) {
					let firstDepth = Number(this.formData.firstDepth);
					let interval = Number(this.formData.interval);
					let depth = "";
					for (var i = 0; i < this.formData.floors; i++) {
						if (i == 0) {
							depth = firstDepth;
						} else {
							depth = depth + "," + (firstDepth + (i * interval));
						}
					}
					this.formData.depth = depth;
				} else {
					this.formData.depth = "";
				}
			},
			confirm() {
				this.$refs.formRef.validate().then(valid => {
					if (valid) {
						mpApi.updateDeviceMp(this.formData).then(response => {
							plugins.modal.alert("修改配置成功", () => {
								uni.$emit("reload-type", "mp")
								this.close();
							})
						});
					}
				}).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: 100px !important;
		}
	}

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