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.contactPerson" borderBottom ref="item1">
                    <u--input v-model="model1.userInfo.contactPerson" border="none"></u--input>
                </u-form-item> -->

				<u-form-item labelWidth='180'  label="报修位置:" prop="userInfo.repairPositionName" borderBottom
					@click="showfloor = true;" ref="item1" :required=true>

					<u--input  v-model="model1.userInfo.repairPositionName" disabled disabledColor="#ffffff"
						placeholder="请选择报修位置" border="none"></u--input>
					<u-icon slot="right" contactPerson="arrow-right"></u-icon>
				</u-form-item>

				<u-form-item labelWidth='180' label="报修区域:" prop="userInfo.repairRegionName" borderBottom
					@click="showSex = true;" ref="item1" :required=true>
					<u--input v-model="model1.userInfo.repairRegionName" disabled disabledColor="#ffffff"
						placeholder="请选择报修区域" border="none"></u--input>
					<u-icon slot="right" contactPerson="arrow-right"></u-icon>
				</u-form-item>

				<u-form-item labelWidth='180' label="报修类型:" prop="userInfo.repairTypeName" borderBottom
					@click="showtaskdegree = true;" ref="item1" :required=true>
					<u--input v-model="model1.userInfo.repairTypeName" disabled disabledColor="#ffffff"
						placeholder="请选择报修类型" border="none"></u--input>
					<u-icon slot="right" contactPerson="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item labelWidth='180' label="联系人:" prop="userInfo.contactPerson" borderBottom ref="item1"
				:required=true>
					<u--input v-model="model1.userInfo.contactPerson" border="none"></u--input>
				</u-form-item>
				<u-form-item labelWidth='180' label="联系电话:" prop="userInfo.contactPhone" borderBottom
					ref="item1" :required=true>
					<u--input v-model="model1.userInfo.contactPhone" border="none"></u--input>
				</u-form-item>
				<u-form-item labelWidth='180' label="故障描述:" prop="userInfo.faultDes" borderBottom ref="item1"
				:required=true>
					<u--input v-model="model1.userInfo.faultDes" border="none"></u--input>
				</u-form-item>

				<u-form-item labelWidth='180' label="上传照片:" prop="userInfo.faultPics" borderBottom ref="item1">
					<view class="">
						<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" 	name="1"
							multiple :maxCount="10">
							<image :src="xiangji" mode="widthFix" style="width: 90rpx;height: 90rpx;"></image>
						</u-upload>
					</view>
				</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='showtaskdegree = false' @confirm='degreeconfirm' :show="showtaskdegree"
			:columns="columnshowtaskdegree" keyName="label">
		</u-picker>

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

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




	</view>
</template>

<script>
	const BaseApi = require("@/http/baseApi.js");
	export default {
		components: {},
		data() {
			return {
				loading: false,
				fileList1: [],
				xiangji: require('@/static/index/xj.png'),
				columns: [
					[],
					[],
					[]
				],
				columnData: [],
				columnDatalist: [],
				showfloor: false,

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

				model1: {
					userInfo: {
						id: "",
						buildingId: "", //  楼栋ID
						storeyId: "", //  层数ID
						houseId: "", //  房间ID
						repairPosition: "", //  房间ID
						repairPositionName: "", //报修位置名称
						repairRegion: '', //报修修区域
						repairRegionName: "", //报修区域名称
						repairType: '', //报修类型
						repairTypeName: "", //报修类型
						contactPerson: "", //联系人
						contactPhone: "", //电话
						faultDes: "", // 故障描述
						faultPics: "", //图片
					},
				},
				columnsquyu: [
					[{
						label: '公共区域',
						id: 1

					}, {
						label: '室内',
						id: 2
					}]
				],

				columnshowtaskdegree: [
					[{
							label: '水',
							id: 1

						}, {
							label: '电',
							id: 2
						},
						{
							label: '其他',
							id: 3
						},
					]
				],

				rules: {
					'userInfo.contactPerson': {
						type: 'string',
						required: true,
						message: '请填写联系人',
						trigger: ['blur', 'change']
					},
					'userInfo.faultDes': {
						type: 'string',
						required: true,
						message: '请填写故障描述',
						trigger: ['blur', 'change']
					},


					'userInfo.contactPhone': [{
							required: true,
							message: '请填写联系电话',
							trigger: ['change', 'blur'],
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// uni.$u.test.mobile()就是返回true或者false的
								return uni.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							// 触发器可以同时用blur和change
							trigger: ['change', 'blur'],
						}
					],

					'userInfo.repairRegionName': {
						type: 'string',
						required: true,
						message: '请选择报修区域',
						trigger: ['blur', 'change']
					},
					'userInfo.repairPositionName': {
						type: 'string',
						required: true,
						message: '请选择报修位置',
						trigger: ['blur', 'change']
					},
					'userInfo.repairTypeName': {
						type: 'string',
						required: true,
						message: '请选择报修类型',
						trigger: ['blur', 'change']
					},


				},

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

		methods: {

			// 删除图片
						deletePic(event) {
							this.fileList1.splice(event.index, 1)
						},

			// 新增图片
			async afterRead(event) {

				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this.fileList1.length
				lists.map((item) => {
					this.fileList1.push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				//console.log(this.fileList1)
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this.fileList1[fileListLen]
					this.fileList1.splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						rl: result
					}))
					fileListLen++
				}

				console.log(this.fileList1);
				//this.problemPhotos=this.fileList1;
			},
			uploadFilePromise(url) {
				console.log('111111111111111111',url)
				let _self=this;
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url:  BaseApi.BaseApi + '/uploadFile',
						header: {
							'content-type': 'application/json',
							"token": uni.getStorageSync('tokendata'),
						},
						filePath: url,
						name: 'file',
						success: (res) => {
							let result = JSON.parse(res.data)
							//	console.log(result.fileName);
							setTimeout(() => {
								resolve(JSON.parse(res.data).fileName)
							}, 1000)
						}
					});
				})
			},




						// 新增图片
						// async afterRead(event) {
						// 	// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
						// 	let lists = [].concat(event.file)
						// 	let fileListLen =this.fileList1.length
						// 	lists.map((item) => {
						// 		this.fileList1.push({
						// 			...item,
						// 			status: 'uploading',
						// 			message: '上传中'
						// 		})
						// 	})
						//
						// 	//  console.log('111111111111111111',this.fileList1)
						// 	for (let i = 0; i < lists.length; i++) {
						// 		const result = await this.uploadFilePromise(lists[i])
						//
						// 		let item = this.fileList1[fileListLen]
						// 		this.fileList1.splice(fileListLen, 1, Object.assign(item, {
						// 			status: 'success',
						// 			message: '',
						// 			url: result
						// 		}))
						// 		fileListLen++
						// 	}
						// },
						// uploadFilePromise(url) {
						// 	  console.log('999',url)
						//
						// 	//  这时候我们创建一个formData对象实例
						// 	const formData = new FormData();
						// 	formData.append("file", url);
						// 	console.log('222222',formData)
						//
						// 	//
						// 	// this.$api.post('/uploadFile',{file:url})
						// 	// .then(res=>{
						// 	//   console.log('111111111111111111',res)
						// 	// })
						//
						//
						//
						//
						// 	// return new Promise((resolve, reject) => {
						// 	// 	let a = uni.uploadFile({
						// 	// 		url: BaseApi.BaseApi + '/uploadFile',
						// 	// 		filePath: url,
						// 	// 		name: 'file',
						// 	// 		formData: {
						// 	// 			user: 'test'
						// 	// 		},
						// 	// 		success: (res) => {
						// 	// 			setTimeout(() => {
						// 	// 				resolve(res.data.data)
						// 	// 			}, 1000)
						// 	// 		}
						// 	// 	});
						// 	// })
						// },


			changeHandler(e) {
				const {
					columnIndex,
					value,
					values, // values为当前变化列的数组内容
					index,
					indexs,
					picker = this.$refs.uPicker
				} = e
				console.log('999999', columnIndex, index, indexs)


				if (columnIndex == 0) {
					//	this.loading = true

					picker.setColumnValues(1, this.alldata[index].childrenList)
					if (this.alldata[indexs[0]].childrenList[0].childrenList == null) {
						console.log('66666', )
						picker.setColumnValues(2, [])
					} else {
						console.log('00000000', )
						picker.setColumnValues(2, this.alldata[indexs[0]].childrenList[0].childrenList)
					}


					//  picker.setColumnValues(2, this.alldata[indexs[0]].childrenList[0].childrenList)
					//	this.loading = false
				} else if (columnIndex == 1) {
					// picker为选择器this实例，变化第三列对应的选项
					// if (this.alldata[indexs[0]].childrenList[indexs[1]] == null) {
					//     console.log('123',)
					//     this.alldata[indexs[0]].childrenList[indexs[1]] = []
					// } else {
					//     console.log('345',)
					// }
					console.log('222', this.alldata[indexs[0]].childrenList[indexs[1]].childrenList)
					picker.setColumnValues(2, this.alldata[indexs[0]].childrenList[indexs[1]].childrenList)

				}


			},
			confirmfloor(e) {
				console.log('222222', e.value)

				this.model1.userInfo.repairPositionName = e.value[0].orgName + '/' + e.value[1].orgName + '/' + e.value[2].orgName;

				this.model1.userInfo.buildingId = e.value[0].orgId;
				this.model1.userInfo.storeyId = e.value[1].orgId;
				this.model1.userInfo.houseId = e.value[2].orgId;
				this.model1.userInfo.repairPosition = e.value[2].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].orgcontactPerson;
							this.alldata = res.data.data[0].childrenList;

							this.columns = [
								this.alldata,
								this.alldata[0].childrenList,
								this.alldata[0].childrenList[0].childrenList
							]


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

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

			returndata() {
				uni.navigateBack({
					delta: 1
				});
			},
			editdata() {
				console.log('111111111111111111', this.model1.userInfo)
				this.$refs.form1.validate().then(res => {
					uni.$u.toast('校验通过')
					this.$api.post('/repairorder',this.model1.userInfo)
					.then(res=>{
					uni.navigateBack({
					    delta: 1
					});
					})


				}).catch(errors => {
					uni.$u.toast('校验失败')
				})


			},

			typeconfirm(e) {

				//  console.log('111111111111111111', e.value[0])
				this.model1.userInfo.repairRegion = e.value[0].id;
				this.model1.userInfo.repairRegionName = e.value[0].label;

				this.showSex = false;
				// this.model1.userInfo.sex = e.contactPerson
				this.$refs.form1.validateField('userInfo.repairRegionName')
			},

			degreeconfirm(e) {
				//console.log('111111111111111111', e.value[0].label)
				this.model1.userInfo.repairType = e.value[0].id;
				this.model1.userInfo.repairTypeName = e.value[0].label;

				this.showtaskdegree = false;
				// this.model1.userInfo.sex = e.contactPerson
				this.$refs.form1.validateField('userInfo.repairTypeName')
			},



		},
		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 {
		margin: 20rpx;
		margin-top: 0px;
	}

</style>