androidCnToWechatGrt/pagesInspection/waitOrder/detail.vue

<template>
	<view class="page" :style="{'min-height':h+'px', 'padding-top':mt+'px'}">
		<cus-header title='工单详情'></cus-header>
		<div class="otitle">报修信息</div>
		<div class="form">
			<div class="item">
				<div class="left">报修时间</div>
				<div class="right">{{order.createDate||''}}</div>
			</div>
			<div class="item">
				<div class="left">报修位置</div>
				<div class="right">{{order.repairPosition||''}}</div>
			</div>
			<div class="item">
				<div class="left">报修区域</div>
				<div class="right">{{order.repairRegion==1?'公共区域':(order.repairRegion==2?'室内':'')}}</div>
			</div>
			<div class="item">
				<div class="left">报修类型</div>
				<div class="right">{{RepairType[order.repairType]||''}}</div>
			</div>
			<div class="item">
				<div class="left">联系人</div>
				<div class="right">{{order.contactPerson||''}}</div>
			</div>
			<div class="item">
				<div class="left">联系电话</div>
				<div class="right">{{order.contactPhone||''}}</div>
			</div>
			<div class="pre">
				<div class="title">故障描述</div>
				<div class="desc">{{order.faultDes||''}}</div>
			</div>
		</div>
		<div class="photos">
			<div class="title">照片</div>
			<div class="list">
				<div class="item" v-for="(item,index) in picList" :key="index">
					<image :src="item" style="width: 100%;height: 100%;"></image>
				</div>
			</div>
		</div>
		<div class="otitle" v-if="order.status!=1">维修信息</div>
		<div class="form" v-if="order.status!=1">
			<div class="item">
				<div class="left">紧急程度</div>
				<div class="right">{{urgencyCfg[order.urgency]||''}}</div>
			</div>
			<div class="item">
				<div class="left">维修人员</div>
				<div class="right">{{order.repairPersonName||''}}</div>
			</div>
			<div class="item">
				<div class="left">联系电话</div>
				<div class="right">{{order.contactPhone||''}}</div>
			</div>
			<div class="item" v-if="order.status==3">
				<div class="left">维修完成时间</div>
				<div class="right">{{order.repairFinishTime||''}}</div>
			</div>
		</div>
		<div class="bottom">
			<div class="btn" v-if="order.status==1" @tap="show = true">指派维修人员</div>
			<div class="btn" v-else @tap="back">返回</div>
		</div>
		<u-popup :show="show" @cencel="close">
			<div class="popupbox">
				<div class="title">
					指派
					<div class="close"><u-icon name="close" color="#B9C0C8" size="42"></u-icon></div>
				</div>
				<div class="pform">
					<div class="pitem">
						<div class="left">维修人员</div>
						<div class="right" @tap="userShow = true">
							<text v-if="order.repairPerson">{{order.repairPerson}} ></text>
							<div class="tip" v-else>请选择 <u-icon name="arrow-right" color="#B9C0C8" size="26"></u-icon></div>
						</div>
					</div>
					<div class="pitem">
						<div class="left">紧急程度</div>
						<div class="right" @tap="engreShow = true">
							<text v-if="order.engreLevel">{{order.engreLevel}} ></text>
							<div class="tip" v-else>请选择 <u-icon name="arrow-right" color="#B9C0C8" size="26"></u-icon></div>
						</div>
					</div>
				</div>
				<div class="btn" @tap="submit">提交</div>
			</div>
		</u-popup>
		<u-picker :show="userShow" :columns="userColumns" keyName="label" @cancel="userShow=false" @confirm="e=>orderConfirm(e,'renyuanid','repairPerson')"></u-picker>
		<u-picker :show="engreShow" :columns="engreColumns" keyName="label" @cancel="engreShow=false" @confirm="e=>orderConfirm(e,'jjcd','engreLevel')"></u-picker>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				companyOrgId:'',
				renyuanid:'',
				jjcd:'',
				order:{},
				RepairType:{},
				urgencyCfg:{
					1:'非常紧急',
					2:'紧急',
					3:'普通'
				},
				show:false,
				userShow:false,
				userColumns:[
					[]
				],
				engreShow:false,
				engreColumns:[
					[{id:1,label:'非常紧急'},{id:2,label:'紧急'},{id:3,label:'普通'}]
				],
				picList:[]
			}
		},
		async onLoad(option) {
			this.companyOrgId = option.id;
			await this.getRepairTypeData();
			this.getUserList();
			this.getDetail(option.id);
		},
		methods:{
			async getRepairTypeData(){
				let res = await this.$api.get('/sys/dict/data/getListByType/RepairType');
				if(res.data.code===0){
					res.data.data.forEach(d=>{
						this.RepairType[d.dictValue]=d.dictLabel;
					})
				}else this.$showToast(res.data.msg)
			},
			getUserList(){
				this.$api.get('/user/list',{page:1,limit:9999}).then(res=>{
					if(res.data.code===0){
						res.data.data.forEach(d=>{
							this.userColumns[0].push({id:d.id,label:d.realName})
						})
					}else this.$showToast(res.data.msg)
				})
			},
			getDetail(id){
				this.$api.get('/repairorder/'+id).then(res=>{
					if(res.data.code===0){
						this.order = res.data.data;
						this.picList = this.order.faultPics.split(',');
					}else this.$showToast(res.data.msg)
				})
			},
			close(){
				this.show = false;
				this.order = {};
			},
			back(){
				uni.navigateBack();
			},
			orderConfirm(e,key1,key2){
				this[key1] = e.value[0].id;
				this.order[key2] = e.value[0].label;
				this.userShow = this.engreShow = false;
			},
			submit(){
				if(!this.renyuanid) return this.$showToast('请选择维修人员')
				if(!this.jjcd) return this.$showToast('请选择紧急程度')
				
				this.$api.put('/repairorder',{
					id: this.companyOrgId,
					repairPersonId: this.renyuanid,
					urgency: this.jjcd,
				}).then(res=>{
					if(res.data.code===0){
						this.$showToast('提交成功');
						setTimeout(()=>{
							uni.redirectTo({
								url:'/pagesInspection/waitOrder/index?status=2'
							})
						},1500)
					}else this.$showToast(res.data.msg)
				})
			}
		}
	}
</script>

<style scoped lang="less">
	::v-deep .u-popup__content{
		border-radius: 40rpx 40rpx 0 0 !important;
	}
	.page{
		padding-bottom: 168rpx;
		background: #F4F8FB;
		box-sizing: border-box;
		
		.otitle{
			font-family: PingFang-SC, PingFang-SC;
			font-weight: bold;
			font-size: 32rpx;
			color: #1D2129;
			line-height: 36rpx;
			margin-top: 40rpx;
			padding-left: 24rpx;
		}
		
		.form{
			width: 100%;
			background: #FFFFFF;
			margin-top: 24rpx;
			.item{
				height: 98rpx;
				box-shadow: inset 0rpx -1rpx 0rpx 0rpx #EDF4FF;
				padding: 0 30rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.left{
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 30rpx;
					color: #1D2129;
					line-height: 42rpx;
				}
				.right{
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 30rpx;
					color: #4E5969;
					line-height: 42rpx;
					text-align: right;
				}
			}
			.pre{
				padding: 28rpx 24rpx 56rpx;
				.title{
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 30rpx;
					color: #1D2129;
					line-height: 42rpx;
				}
				.desc{
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 30rpx;
					color: #4E5969;
					line-height: 42rpx;
					margin-top: 28rpx;
				}
			}
		}
		
		.photos{
			width: 100%;
			padding: 28rpx 30rpx 36rpx;
			box-sizing: border-box;
			margin-top: 20rpx;
			background: #FFFFFF;
			.title{
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 30rpx;
				color: #1D2129;
				line-height: 42rpx;
			}
			.list{
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				.item{
					width: calc(100% / 3 - 30rpx);
					height: 220rpx;
					margin-top: 24rpx;
				}
			}
		}
		
		.bottom{
			width: 100%;
			height: 148rpx;
			background: #FFFFFF;
			padding: 20rpx 48rpx 0;
			box-sizing: border-box;
			position: fixed;
			left: 0;
			bottom: 0;
			.btn{
				width: 100%;
				height: 88rpx;
				background: #198CFF;
				border-radius: 16rpx;
				font-family: PingFang-SC, PingFang-SC;
				font-weight: bold;
				font-size: 32rpx;
				color: #FFFFFF;
				line-height: 88rpx;
				text-align: center;
				letter-spacing: 2rpx;
			}
		}
	
		.popupbox{
			width: 100%;
			border-radius: 40rpx 40rpx 0 0;
			padding: 42rpx 24rpx 94rpx;
			box-sizing: border-box;
			background: #FFFFFF;
			.title{
				font-family: PingFang-SC, PingFang-SC;
				font-weight: bold;
				font-size: 32rpx;
				color: #1D2129;
				line-height: 36rpx;
				text-align: center;
				position: relative;
				.close{
					position: absolute;
					right: 0;
					top: 0;
				}
			}
			.pform{
				margin-top: 40rpx;
				.pitem{
					height: 90rpx;
					box-shadow: inset 0rpx -1rpx 0rpx 0rpx #ECECEC;
					display: flex;
					align-items: center;
					justify-content: space-between;
					.left{
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 30rpx;
						color: #1D2129;
						line-height: 42rpx;
					}
					.right{
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 28rpx;
						color: #1D2129;
						line-height: 40rpx;
						text-align: right;
						.tip{
							color: #B9C0C8;
							display: flex;
							align-items: center;
						}
					}
				}
			}
			.btn{
				width: calc(100% - 48rpx);
				height: 88rpx;
				background: #198CFF;
				border-radius: 16rpx;
				margin: 80rpx 24rpx 0;
				font-family: PingFang-SC, PingFang-SC;
				font-weight: bold;
				font-size: 32rpx;
				color: #FFFFFF;
				line-height: 88rpx;
				text-align: center;
				letter-spacing: 2rpx;
			}
		}
	}
</style>