iot-test-app/pages/add-project/add-project.vue

<template>
	<view class="u-page">

		<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
		<u--form labelPosition="left" :model="model1" ref="form1">
			<u-form-item labelWidth="110" label="网关ID" prop="addProject.gatewayDeviceId" borderBottom ref="item1">
				<u--input v-model="model1.addProject.gatewayDeviceId" border="none" placeholder="网关ID"></u--input>
			</u-form-item>
			<u-form-item label="测试项目说明" prop="addProject.description" borderBottom ref="item3" labelWidth="110">
				<u--textarea placeholder="不低于3个字" v-model="model1.addProject.description" count></u--textarea>
			</u-form-item>
		</u--form>
		<view class="" style="display: flex; margin-top: 100rpx;">
			<u-button type="primary" text="提交" @click="submit"></u-button>
			<u-button type="error" text="重置" @click="reset"></u-button>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {

				type: 0, //0、增加  1、更改
				value: '',
				model1: {
					addProject: {
						gatewayDeviceId: '',
						description: '',
						userId: uni.getStorageSync('userId')
					}

				},
				rules: {
					'addProject.gatewayDeviceId': {
						type: 'string',
						required: true,
						message: '网关ID不能为空',
						trigger: ['change']
					},

					'addProject.description': {
						type: 'string',
						min: 3,
						required: true,
						message: '不低于3个字',
						trigger: ['change']
					},


				},


			}
		},
		onReady() {
			// 如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则
			this.$refs.form1.setRules(this.rules)
		},
		onLoad(option) {
			if (option.item) {
				this.type = 1
				let item = JSON.parse(option.item)

				this.model1.addProject.description = item.description
				this.model1.addProject.gatewayDeviceId = item.gatewayDeviceId
				// this.projectDetail=option.item
			} else {
				this.type = 0
			}


		},
		methods: {
			navigateBack() {
				uni.navigateBack()
			},
			sexSelect(e) {
				this.model1.userInfo.sex = e.name
				this.$refs.form1.validateField('userInfo.sex')
			},
			submit() {
				// 如果有错误，会在catch中返回报错信息数组，校验通过则在then中返回true
				this.$refs.form1.validate().then(async res => {

					if (this.type == 1) {
						console.log('更改');
					} else {
						console.log('增加', this.model1
							.addProject);
						const {
							data: result
						} = await uni.$http.post("/api/v1/test/testProject", this.model1
							.addProject)
						console.log(result);
						if (result.code === 200) {
							uni.showToast({
								title: result.data,
								duration: 1500,
								icon: 'none'
							})
						} else {
							uni.showToast({
								title: result.msg,
								duration: 1500,
								icon: 'none'
							})
						}
					}
				}).catch(errors => {
					// uni.$u.toast('校验失败')
				})
			},
			reset() {
				const validateList = ['userInfo.name', 'intro']
				this.$refs.form1.resetFields()
				this.$refs.form1.clearValidate()
				this.model1.addProject = {
					gatewayDeviceId: '',
					description: '',
					userId: uni.getStorageSync('userId')
				}
				setTimeout(() => {
					this.$refs.form1.clearValidate(validateList)
					// 或者使用 this.$refs.form1.clearValidate()
				}, 10)
			},

		},
	}
</script>

<style lang="scss">
	.u-page {
		width: calc(100vw - 60rpx);
		margin: 20rpx 30rpx;

	}
</style>