wit-uniapp/pages/index/Onlinewarranty/Onlinewarranty.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="showfloor = true;" ref="item1">
					<u--input v-model="model1.userInfo.myposition" 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>

			<u-picker :show="showfloor" ref="uPicker" :loading="loading" @confirm="confirmfloor" @cancel='cancelfloor'
			:columns="columns" keyName="orgName" @change="changeHandler"></u-picker>

	

	</view>
</template>

<script>
	export default {
		components: {

		},
		data() {
			return {
				loading: false,


				local: '', //区域
				localCode: '', //这个变量看个人需求使用
				addressColumns: [], //数据数组
				defaultAddress: [], //默认选中 (回填时或者初次显示默认选中)
				addressData: '', //原始数据 (引入的json文件)							

				columns: [
					[],
					[],
					[]
				],
				columnData: [],
				columnDatalist: [],
				showfloor: false,


				showSex: false,
				showday: false,
				showPicker: false,
				showtaskdegree: false,
				showtaskpeople: false,

				model1: {
					userInfo: {
						myposition: '',

						id: "",
						buildingId: "",
						storeyId: "",
						houseId: "",
						repairPosition: "",
						repairPositionName: "",
						repairRegion: 1,
						repairRegionName: "",
						repairType: 1,
						repairTypeName: "",
						contactPerson: "",
						contactPhone: "",
						faultDes: "",
						faultPics: "",



						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']
					},

				},

			};
		},
		onLoad() {
			this.getfloor();
			//	this.loadmore();
		},

		methods: {

			changeHandler(e) {
				// console.log('77777', e)
				const {
					columnIndex,
					index,
					picker = this.$refs.uPicker
				} = e
				console.log('111111111111111111', columnIndex, index, picker)

				if (columnIndex === 0) {
					this.loading = true
					picker.setColumnValues(1, this.columnData[index])
					this.loading = false
				}
				// //this.getalldata();


			},
			confirmfloor(e) {
				console.log('222222', e.value)
				//	this.model1.userInfo.myposition = e.value[0].orgName + e.value[1].orgName;

				// this.dataForm.buildingId = e.value[0].orgId;
				// this.dataForm.storeyId = e.value[1].orgId;
				// this.showfloor = false;
				// this.getalldata();
			},
			cancelfloor() {
				this.showfloor = false;
			},
			getfloor() {
				this.$api.get('/control/getOrgStructureTree', {})
					.then(res => {
						if (res.data.code == 0) {
							//this.dataForm.projectId = res.data.data[0].orgId;

							this.model1.userInfo.myposition = res.data.data[0].orgName;
							this.alldata = res.data.data[0].childrenList;
							console.log('111111111111111111', res.data.data[0].childrenList)
							this.columns = [
								res.data.data[0].childrenList,
								res.data.data[0].childrenList[0].childrenList
							]
							let allfloor = [];
							for (let i = 0; i < res.data.data[0].childrenList.length; i++) {
								allfloor.push(res.data.data[0].childrenList[i].childrenList)
							}
							this.columnData = allfloor;  



							//	this.getalldata();
						} else {
							this.showdct = true
						}
					})
			},
			onShowDatePicker() { //显示

				this.showPicker = true;
				//  this.value =this.model1.userInfo.mydays;
			},

			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>