wit-uniapp/pages/index/Workordertodone/Toberepaired/Toberepaired.vue

<template>
	<view class="OutermostLayer">
		<h3 class="baoxiu">报修信息</h3>
		<u-cell-group>
			<u-cell icon="integral-fill" title="报修时间"  :value="details.shijian" >
				<u-icon slot="icon" size="40" name="calendar"></u-icon>
			</u-cell>
			<u-cell icon="integral-fill" title="报修位置" :value="details.weizhi" >
				<u-icon slot="icon" size="40" name="map"></u-icon>
			</u-cell>
			<u-cell icon="integral-fill" title="报修区域" :value="details.quyu" >
				<u-icon slot="icon" size="40" name="grid"></u-icon>
			</u-cell>
			<u-cell icon="integral-fill" title="报修类型" :value="details.leixing" >
				<u-icon slot="icon" size="40" name="pushpin"></u-icon>
			</u-cell>
			<u-cell icon="integral-fill" title="联系人" :value="details.lxr" >
				<u-icon slot="icon" size="40" name="man-add"></u-icon>
			</u-cell>
			<u-cell icon="integral-fill" title="联系电话" :value="details.lxdh">
				<u-icon slot="icon" size="40" name="phone"></u-icon>
			</u-cell>
			<u-cell icon="integral-fill" title="故障描述" :value="details.gzms" >
				<u-icon slot="icon" size="40" name="order"></u-icon>
			</u-cell>

			<u-cell icon="integral-fill" title="故障照片" >
				<u-icon slot="icon" size="40" name="photo"></u-icon>
				<view
						slot="title"
						class="guzhang"
				>
					<view class="">
						故障照片
					</view>
					<view class="albumcontent">
						<u-album :urls="details.gzimg"></u-album>
					</view>
				</view>
			</u-cell>

		</u-cell-group>

		<h3 class="baoxiu">维修信息</h3>
		<u-cell-group>
			<u-cell icon="integral-fill" title="紧急程度"  :value="details.jinji" >
				<u-icon slot="icon" size="40" name="bell"></u-icon>
			</u-cell>
			<u-cell icon="integral-fill" title="维修人员" :value="details.weixiury" >
				<u-icon slot="icon" size="40" name="man-add"></u-icon>
			</u-cell>
			<u-cell icon="integral-fill" title="联系电话" :value="details.weixiudh" >
				<u-icon slot="icon" size="40" name="phone"></u-icon>
			</u-cell>





		</u-cell-group>
		<view class="returndata">
			<view  v-if="$has('app:MaintenanceCompleted')">
				<u-button type="primary"  text="维修完成" @click="returndata"></u-button>
			</view>
			<!--<view class="Maintenancepersonnel">-->
				<!--<u-button type="primary"  text="指派维修人员"  @click="Maintenancepersonnel"></u-button>-->
			<!--</view>-->
		</view>
		<!--确定弹窗-->
		<u-modal :show="showqd" title="提示" content='请问是否确定维修完成?' :showCancelButton="true"
				 @confirm="weixiuyes"  @cancel="weixiuno"
		></u-modal>


		<u-notify ref="uNotify" message="" ></u-notify>
	</view>
</template>

<script>

	export default {
		data() {
			return {
				columnsrenyuan:[],
				columnsrenjinji:[],
				model1: {
					userInfo: {
						repairPersonId: '',
						urgency:'',
					},
				},

				rules: {
					'userInfo.repairPersonId': {
						type: 'string',
						required: true,
						message: '请选择维修人员',
						trigger: ['blur', 'change']
					},
					'userInfo.urgency': {
						type: 'string',
						required: true,
						message: '请选择紧急程度',
						trigger: ['blur', 'change']
					},
				},

				showjinji:false,
				showSex:false,
				showqd:false,
				showweixiu:false,
				companyOrgId:'',
				renyuanid:'',
				jjcd:'',

				src: 'https://cdn.uviewui.com/uview/album/1.jpg',
				details:{
					shijian:'',
					weizhi:'',
					quyu:'',
					leixing:'',
					lxr:'',
					lxdh:'',
					gzms:'',
					gzimg:[],

					jinji:'',
					weixiury:'',
					weixiudh:''
				},
				albumWidth: 0,

			}
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			//this.$refs.uForm.setRules(this.rules)
		},
		onLoad(options) {
			this.companyOrgId = options.id;
			//  console.log(options.id);
		//	let getDictDataList = uni.getStorageSync('getDictDataList');


			this.getUserList();
			this.getdata();

		},
		methods: {
			getUserList() {
				this.$api.get('/user/list',{ page: 1,
					limit: 100,})
						.then(res=>{
							//	console.log('111111111111111111',res.data.data)
							this.columnsrenyuan=res.data.data;
						})
			},
			getdata(){
				this.$api.get('/repairorder/'+this.companyOrgId,{})
						.then(res=>{

							this.details.shijian=res.data.data.createDate;
							this.details.weizhi=res.data.data.repairPosition;
							this.details.lxr=res.data.data.contactPerson;
							this.details.lxdh=res.data.data.contactPhone;
							this.details.gzms=res.data.data.faultDes;
							this.details.weixiury=res.data.data.repairPersonName;
							res.data.data.faultPics=res.data.data.faultPics.split(",");

							this.details.gzimg=res.data.data.faultPics;
							//  console.log('111111111111111111', this.details.gzimg)

							if(res.data.data.repairRegion==1){
								this.details.quyu='公共区域';
							}else if(res.data.data.repairRegion==2){
								this.details.quyu='室内';
							}

							if(res.data.data.repairType==1){
								this.details.leixing='水';
							}else if(res.data.data.repairType==2){
								this.details.leixing='电';
							}else if(res.data.data.repairType==3){
								this.details.leixing='其他';
							}

							if(res.data.data.urgency==1){
								this.details.jinji='非常紧急';
							}else if(res.data.data.urgency==2){
								this.details.jinji='紧急';
							}else if(res.data.data.urgency==3){
								this.details.jinji='普通';
							}


							for(let i=0;i<this.columnsrenyuan.length;i++){
								if(this.columnsrenyuan[i].id==res.data.data.repairPersonId){
									console.log('111111111111111111',this.columnsrenyuan[i])
									this.details.weixiudh=this.columnsrenyuan[i].mobile
								}
							}


						})
			},
			quxiao(){
				this.showweixiu=false;
			},
			queding(){
				this.$refs.uForm.validate().then(res => {
					//	uni.$u.toast('校验通过')
					//  jjcd  renyuanid  companyOrgId
					//console.log('111111111111111111',this.jjcd,this.renyuanid,this.companyOrgId)
					this.$api.put('/repairorder',{
						id: this.companyOrgId,
						repairPersonId: this.renyuanid,
						urgency: this.jjcd,
					})
							.then(res=>{
								//console.log('111111111111111111',res)
								if(res.data.code==0){
									this.$refs.uNotify.success('指派成功')

									setTimeout(function(){uni.navigateTo({
										url: '/pages/index/Workordertodone/Workordertodone'
									})},1000);

								}else{
									this.$refs.uNotify.error(res.data.msg)
									// uni.navigateBack({
									// 	delta: 1
									// });
								}
							})

				}).catch(errors => {
					uni.$u.toast('校验失败')
				})
			},
			returndata(){
				this.showqd=true;
			},
			weixiuyes(){
				this.$api.post('/repairorder/finish/'+this.companyOrgId,{})
						.then(res=>{
							//console.log('111111111111111111',res)
							if(res.data.code==0){
								this.$refs.uNotify.success('维修成功')
								setTimeout(function(){uni.navigateTo({
									url: '/pages/index/Workordertodone/Workordertodone'
								})},1000);
							}else{
								this.$refs.uNotify.error(res.data.msg)
							}
						})
				this.showqd=false;
			},
			weixiuno(){
				this.showqd=false;
			},






		}
	}
</script>

<style lang="scss">
	.guidang{
		display: flex;
		align-items: center;
		justify-content: space-around;
		margin-top: 80rpx;
	}
	.queding{
		width: 300rpx;

	}
	.baoxiu{
		padding: 30rpx;
	}
	.albumcontent{
		display: flex;
		.u-album{
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
		}
	}
	.guzhang{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.returndata{
		padding: 30rpx;
	}
	.Maintenancepersonnel{
		margin-top: 15rpx;
	}
	.weixiudc{
		width: 750rpx;
		height: 450rpx;
		h3{
			font-size: 30rpx;
			font-weight: bold;
			width: 750rpx;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
		}
	}
</style>