PDA/pages/formview/formview.vue

<template>
	<view class="ground-wrap">
		<uni-forms ref="valiForm" :rules="rules" :modelValue="valiFormData">
			<uni-forms-item label="任务名称" required name="name" label-width=100>
				<uni-easyinput v-model="valiFormData.name" placeholder="请输入任务名称" />
			</uni-forms-item>

			<uni-forms-item label="目标仓库" required label-width=100>
				<uni-data-select v-model="valiFormData.warehouse" :localdata="range" @change="change"></uni-data-select>
			</uni-forms-item>
			<uni-forms-item label="日期时间" required label-width=100>
				<uni-datetime-picker type="datetime" return-type="timestamp" v-model="valiFormData.datetimesingle" />
			</uni-forms-item>
		</uni-forms>
		<button type="primary" @click="submit('valiForm')">提交</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				valiFormData: {
					name: '',
					datetimesingle: '',
					warehouse: '',
				},
				range: [{
						value: 0,
						text: "篮球"
					},
					{
						value: 1,
						text: "足球"
					},
					{
						value: 2,
						text: "游泳"
					},
				],
				rules: {
					name: {
						rules: [{
							required: true,
							errorMessage: '任务名称不能为空'
						}]
					},
				},

			}
		},
		onLoad() {

		},
		methods: {
			submit(ref) {
				this.$refs[ref].validate().then(res => {
					console.log('success', res);
					uni.showToast({
						title: `校验通过`
					})
				}).catch(err => {
					console.log('err', err);
				})
			},
		}

	}
</script>

<style>
	.ground-wrap {
		width: 100%;
		height: 100%;
		padding: 20rpx;
		box-sizing: border-box;
	}

	uni-page-body {
		width: 100%;
		height: 100%;
	}
</style>