wit-uniapp/pages/my/Mydistribution/distributionedit/distributionedit.vue

<template>
	<view class="OutermostLayer">

<view class="wfgz">
	<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
	<u--form labelPosition="left" :model="model1" :rules="rules" ref="form1">
		<u-form-item labelWidth='180' label="任务名称:" prop="userInfo.name" borderBottom ref="item1">
			<u--input v-model="model1.userInfo.name" border="none"></u--input>
		</u-form-item>
		<u-form-item labelWidth='180' label="办结日期:" prop="userInfo.mydays" borderBottom @click="showPicker = true;"
			ref="item1">
			<u--input v-model="model1.userInfo.mydays" disabled disabledColor="#ffffff" placeholder="请选择办结日期"
				border="none"></u--input>

			<u-icon slot="right" name="arrow-right"></u-icon>
		</u-form-item>

		<u-form-item labelWidth='180' label="任务类型:" prop="userInfo.tasktype" borderBottom @click="showSex = true;"
			ref="item1">
			<u--input v-model="model1.userInfo.tasktype" disabled disabledColor="#ffffff" placeholder="请选择任务类型"
				border="none"></u--input>
			<u-icon slot="right" name="arrow-right"></u-icon>
		</u-form-item>

		<u-form-item labelWidth='180' label="紧急程度:" prop="userInfo.taskdegree" borderBottom
			@click="showtaskdegree = true;" ref="item1">
			<u--input v-model="model1.userInfo.taskdegree" disabled disabledColor="#ffffff" placeholder="请选择紧急程度"
				border="none"></u--input>
			<u-icon slot="right" name="arrow-right"></u-icon>
		</u-form-item>

		<u-form-item labelWidth='180' label="办理人员:" prop="userInfo.taskdegree" borderBottom
			@click="showtaskpeople = true;" ref="item1">
			<u--input v-model="model1.userInfo.taskpeople" disabled disabledColor="#ffffff" placeholder="请选择办理人员"
				border="none"></u--input>
			<u-icon slot="right" name="arrow-right"></u-icon>
		</u-form-item>
	</u--form>

	<view class="guidang">
		<view class="queding">
			<u-button type="primary" :plain="true" text="返回" @click="returndata"></u-button>
		</view>
		<view class="queding">
			<u-button type="primary" text="提交" @click="editdata"></u-button>
		</view>
	</view>
</view>


		<u-picker @cancel='showtaskpeople = false' @confirm='peopleconfirm' :show="showtaskpeople"
			:columns="columnspeople" keyName="label">
		</u-picker>


		<u-picker @cancel='showtaskdegree = false' @confirm='degreeconfirm' :show="showtaskdegree"
			:columns="columnshowtaskdegree" keyName="label">
		</u-picker>

		<u-picker @cancel='showSex = false' @confirm='typeconfirm' :show="showSex" :columns="columns" keyName="label">
		</u-picker>

		<mx-date-picker :show="showPicker" type="date" :value="model1.userInfo.mydays" :show-tips="true"
			:begin-text="'入住'" :end-text="'离店'" :show-seconds="true" @confirm="ed" @cancel="ed" />
	</view>
</template>

<script>
	import MxDatePicker from "@/components/mx-datepicker/mx-datepicker.vue";
	export default {
		components: {
			MxDatePicker
		},
		data() {
			return {
				showSex: false,
				showday: false,
				showPicker: false,
				showtaskdegree: false,
				showtaskpeople: false,

				model1: {
					userInfo: {
						name: '维修灯具',
						tasktype: '维修',
						mydays: '2023/04/15',
						taskdegree: '一般',
						taskpeople: '杨刚',
					},
				},
				columns: [
					[{
						label: '巡查',
						id: 1

					}, {
						label: '维修',
						id: 2
					}]
				],

				columnshowtaskdegree: [
					[{
							label: '一般',
							id: 1

						}, {
							label: '重要',
							id: 2
						},
						{
							label: '紧急',
							id: 3
						},
						{
							label: '非常紧急',
							id: 4
						},
					]
				],
				columnspeople: [
					[{
						label: '杨刚',
						id: 1

					}, {
						label: '李伟',
						id: 2
					}]
				],

				rules: {
					'userInfo.name': {
						type: 'string',
						required: true,
						message: '请填写姓名',
						trigger: ['blur', 'change']
					},
					'userInfo.sex': {
						type: 'string',
						required: true,
						message: '请选择任务类型',
						trigger: ['blur', 'change']
					},
					'userInfo.mydays': {
						type: 'string',
						required: true,
						message: '请选择办结日期',
						trigger: ['change']
					},
					'userInfo.taskdegree': {
						type: 'string',
						required: true,
						message: '请选择紧急程度',
						trigger: ['blur', 'change']
					},
					'userInfo.taskpeople': {
						type: 'string',
						required: true,
						message: '请选择办理人员',
						trigger: ['blur', 'change']
					},

				},

			};
		},
		methods: {
			onShowDatePicker() { //显示

				this.showPicker = true;
				//  this.value =this.model1.userInfo.mydays;
			},
			ed(e) { //选择
				this.showPicker = false;
				if (e) {
					this.model1.userInfo.mydays = e.value;
				}
			},
			returndata() {
				uni.navigateBack({
					delta: 1
				});
			},
			editdata() {
uni.navigateBack({
					delta: 1
				});
			},

			typeconfirm(e) {
				console.log('111111111111111111', e.value[0].label)
				this.model1.userInfo.tasktype = e.value[0].label;
				this.showSex = false;
				// this.model1.userInfo.sex = e.name
				this.$refs.form1.validateField('userInfo.tasktype')
			},

			degreeconfirm(e) {
				//console.log('111111111111111111', e.value[0].label)
				this.model1.userInfo.taskdegree = e.value[0].label;
				this.showtaskdegree = false;
				// this.model1.userInfo.sex = e.name
				this.$refs.form1.validateField('userInfo.taskdegree')
			},
			peopleconfirm(e) {
				//console.log('111111111111111111', e.value[0].label)
				this.model1.userInfo.taskpeople = e.value[0].label;
				this.showtaskpeople = false;
				// this.model1.userInfo.sex = e.name
				this.$refs.form1.validateField('userInfo.taskpeople')
			},


		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.form1.setRules(this.rules)
		},
	};
</script>

<style>
	.guidang {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 40rpx;
	}

	.queding {
		width: 40%;
	}
	.wfgz{
		padding: 20rpx;
	}
</style>