androidCnToWechatGrt/pagesOperation/workorder/detail.vue

<template>
	<view class="page" :style="{'min-height':h+'px', 'padding-top':mt+'px'}">
		<cus-header title='故障报修'></cus-header>
		<div class="box">
			<div class="b_title">
				故障信息
				<div class="b_status" :class="{'djj':dto.status===0,'yjj':dto.status===1}">{{dto.status===1?'已解决':'未解决'}}</div>
			</div>
			<div class="bs_item">
				<div class="left">项目订单号</div>
				<div class="right">{{dto.orderNo2||''}}</div>
			</div>
			<div class="bs_item">
				<div class="left">报修地点</div>
				<div class="right">{{dto.customer||''}}</div>
			</div>
			<div class="bs_item">
				<div class="left">产品名称</div>
				<div class="right">{{dto.itemName||''}}</div>
			</div>
			<div class="bs_item">
				<div class="left">产品编号</div>
				<div class="right">{{dto.serialnumber||''}}</div>
			</div>
			<div class="bs_item">
				<div class="left">故障发生时间</div>
				<div class="right">{{dto.happenDate||''}}</div>
			</div>
			<div class="bs_item">
				<div class="left">故障类型</div>
				<div class="right">{{dto.typeName||''}}</div>
			</div>
			<div class="bs_item">
				<div class="left">报修人员</div>
				<div class="right">{{dto.optUser||''}}</div>
			</div>
			<div class="bs_item">
				<div class="left">报修时间</div>
				<div class="right">{{dto.createDate||''}}</div>
			</div>
			<div class="bs_item">
				<div class="left">故障描述</div>
				<div class="right">{{dto.repairDesc||''}}</div>
			</div>
		</div>
		<div class="box">
			<div class="b_title">故障照片</div>
			<div style="padding-top: 24rpx;">
				<!-- <template v-if="yjj"> -->
					<div class="imgs">
						<image :src="img" v-for="(img,idx) in imgList" :key="idx"></image>
					</div>
				<!-- </template> -->
				<!-- <template v-else>
					<u-upload width="180" height="180"
						:fileList="fileList"
						@afterRead="afterRead"
						@delete="deletePic"
						multiple
						:maxCount="5"
					></u-upload>
				</template> -->
			</div>
		</div>
		<div class="box">
			<div class="b_title">故障处理</div>
			<div class="b_item">
				<div class="left">问题状态</div>
				<div class="right">
					<template v-if="yjj">
						已解决
					</template>
					<template v-else>
						<u-radio-group v-model="dto.status" :size="30" :iconSize="30">
							<u-radio :labelSize="26" :label="1" :name="1">已解决</u-radio>
							<u-radio :labelSize="26" :label="0" :name="0">未解决</u-radio>
						</u-radio-group>
					</template>
				</div>
			</div>
			<div class="b_item">
				<div class="left">故障原因</div>
				<div class="right">
					<template v-if="yjj">
						{{dto.faultCause||""}}
					</template>
					<template v-else>
						<input type="text" placeholder="请输入故障原因"  placeholder-class="inp_ph" v-model="dto.faultCause">
					</template>
				</div>
			</div>
			<div class="b_item">
				<div class="left">维修开始时间</div>
				<div class="right" v-if="yjj">
					{{dto.repairStartTime||''}}
				</div>
				<div class="right select" @tap="handleSelect(1)" v-else>
					<text>{{startDateText}}</text>
					<image :src="imgBase+'operation/arrow_right.png'" mode="widthFix"></image>
				</div>
			</div>
			<div class="b_item">
				<div class="left">维修结束时间</div>
				<div class="right" v-if="yjj">
					{{dto.repairEndTime||''}}
				</div>
				<div class="right select" @tap="handleSelect(2)" v-else>
					<text>{{endDateText}}</text>
					<image :src="imgBase+'operation/arrow_right.png'" mode="widthFix"></image>
				</div>
			</div>
			<div class="b_item">
				<div class="left">维修人员</div>
				<div class="right">
					<template v-if="yjj">
						{{dto.maintainer||""}}
					</template>
					<template v-else>
						<input type="text" placeholder="请输入维修人员"  placeholder-class="inp_ph" v-model="dto.maintainer">
					</template>
				</div>
			</div>
			<div class="b_item2">
				<div class="top">维修描述</div>
				<div class="bottom">
					<template v-if="yjj">
						{{dto.remark||""}}
					</template>
					<template v-else>
						<u--textarea v-model="dto.remark" placeholder="请输入维修描述" placeholder-class="inp_ph2" border="none" height="110"></u--textarea>
					</template>
				</div>
			</div>
		</div>
		<div class="bottom_btn">
			<div class="btn" @tap="submit" v-if="!yjj">提交</div>
			<div class="btn" @tap="back" v-else>返回</div>
		</div>
		<u-datetime-picker :itemHeight="88" :show="show1" v-model="dto.repairStartTime" mode="datetime" title="维修开始时间"
			@cancel="show1=false" @confirm="e=>confirm(e,1,'repairStartTime','startDateText')" :immediateChange="true" :minDate="minDate" :maxDate="maxDate"></u-datetime-picker>
		<u-datetime-picker :itemHeight="88" :show="show2" v-model="dto.repairEndTime" mode="datetime" title="维修结束时间"
			@cancel="show2=false" @confirm="e=>confirm(e,2,'repairEndTime','endDateText')" :immediateChange="true" :minDate="minDate" :maxDate="maxDate"></u-datetime-picker>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				id:'',
				dto:{},
				fileList:[],
				show1:false,
				show2:false,
				startDateText:'请输入维修开始时间',
				endDateText:'请输入维修结束时间',
				minDate:'',
				maxDate:'',
				projectList:[],
				typeList:[],
				imgList:[],
				yjj:false,
				rules:[
					{key:'status',tip:'请选择状态'},
					{key:'faultCause',tip:'请输入故障原因'},
					{key:'repairStartTime',tip:'请选择维修开始时间'},
					{key:'repairEndTime',tip:'请选择维修结束时间'},
					{key:'maintainer',tip:'请输入维修人员'},
					{key:'remark',tip:'请输入维修描述'}
				]
			}
		},
		mounted() {
			let d = new Date();
			this.minDate = new Date(d.getFullYear()-1,d.getMonth()+1,d.getDate()).getTime();
			this.maxDate = new Date().getTime();
		},
		async onLoad(option) {
			this.id = option.id;
			await this.getOrderList();
			await this.getTypeList();
			this.getDetail();
		},
		methods:{
			getOrderList(){
				return new Promise((resolve,reject)=>{
					this.$api.get('/wms/project/getOrderPage',{page:1,limit:-1}).then(res=>{
						if(res.data.code===0){
							this.projectList = res.data.data.list;
							resolve();
						}else this.$showToast(res.data.msg)
					})
				})
			},
			getTypeList(){
				return new Promise((resolve,reject)=>{
					this.$api.get('/sys/dict/data/getListByType/wms_operation_category').then(res=>{
						if(res.data.code===0){
							this.typeList = res.data.data;
							resolve();
						}else this.$showToast(res.data.msg)
					})
				})
			},
			getDetail(){
				this.$api.get('/wms/order/operation/'+this.id).then(res=>{
					if(res.data.code!==0) return this.$showToast(res.data.msg)
					this.dto = res.data.data;
					this.dto.orderNo2 = this.projectList.find(p=>p.id==this.dto.orderId)?.orderNo||'';
					this.dto.typeName = this.typeList.find(t=>t.dictValue==this.dto.optCategory)?.dictLabel||'';
					this.imgList = this.dto.faultFile.split(';');
					this.yjj = this.dto.status==1?true:false;
				})
			},
			handleSelect(type){
				this['show'+type] = true;
			},
			confirm(e,type,key,param){
				this[param] = new Date(e.value).Format('yyyy-MM-dd hh:mm:ss');
				this.dto[key] = new Date(e.value).Format('yyyy-MM-dd hh:mm:ss');
				this['show'+type] = false;
			},
			submit(){
				let idx = this.rules.findIndex(r=>!this.dto[r.key]==true);
				if(idx>-1) return this.$showToast(this.rules[idx].tip)
				
				let dto = JSON.parse(JSON.stringify(this.dto))
				this.dto.repairStartTime = new Date(dto.repairStartTime).Format('yyyy-MM-dd hh:mm:ss');
				this.dto.repairEndTime = new Date(dto.repairEndTime).Format('yyyy-MM-dd hh:mm:ss');
				this.$api.put('/wms/order/operation',this.dto).then(res=>{
					if(res.data.code!==0) return this.$showToast(res.data.msg)
					this.$showToast('处理成功')
					setTimeout(()=>{
						uni.navigateBack()
					},1500)
				})
			},
			back(){
				uni.navigateBack()
			},
			// 删除图片
			deletePic(event) {
				this.fileList.splice(event.index, 1);
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file);
				let fileListLen = this.fileList.length;
				lists.map((item) => {
				  this.fileList.push({
					...item,
					status: "uploading",
					message: "上传中",
				  });
				});
				for (let i = 0; i < lists.length; i++) {
				  const result = await this.uploadFilePromise(lists[i].url);
				  let item = this.fileList[fileListLen];
				  this.fileList.splice(
					fileListLen,
					1,
					Object.assign(item, {
					  status: "success",
					  message: "",
					  url: result,
					})
				  );
				  fileListLen++;
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
				  let a = uni.uploadFile({
					url: "http://192.168.2.21:7001/upload", // 仅为示例，非真实的接口地址
					filePath: url,
					name: "file",
					formData: {
					  user: "test",
					},
					success: (res) => {
					  setTimeout(() => {
						resolve(res.data.data);
					  }, 1000);
					},
				  });
				});
			},
		}
	}
</script>
<style>
	.inp_ph{
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #B9C0C8;
		line-height: 40rpx;
		text-align: right;
	}
	.inp_ph2{
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #B9C0C8;
		line-height: 40rpx;
		text-align: left;
	}
</style>
<style scoped lang="less">
	::v-deep .u-radio:last-child{
		margin-left: 93rpx !important;
	}
	::v-deep .u-upload__button .u-icon__icon{
		font-size: 48rpx !important;
	}
	
	.page{
		padding:0 24rpx 168rpx;
		background: #F4F8FB;
		
		.box{
			background: #FFFFFF;
			border-radius: 16rpx;
			margin-top: 20rpx;
			padding: 36rpx 24rpx;
			
			.b_title{
				padding-left: 16rpx;
				position: relative;
				font-family: PingFang-SC, PingFang-SC;
				font-weight: bold;
				font-size: 32rpx;
				color: #1D2129;
				line-height: 32rpx;
				&::before{
					content: '';
					width: 6rpx;
					height: 32rpx;
					background: #2E69EB;
					position: absolute;
					left: 0;
					top: 50%;
					margin-top: -16rpx;
				}
				.b_status{
					width: 104rpx;
					height: 48rpx;
					border-radius: 6rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 26rpx;
					line-height: 48rpx;
					text-align: center;
					position: absolute;
					left: 168rpx;
					top: 50%;
					margin-top: -24rpx;
					&.djj{
						color: #FEA400;
						background: rgba(254,164,0,0.08);
					}
					&.yjj{
						color: #05C17F;
						background: rgba(20,204,140,0.08);
					}
				}
			}
			
			.imgs{
				display: flex;
				justify-content: space-evenly;
				flex-wrap: wrap;
				margin-top: -20rpx;
				image{
					width: 180rpx;
					height: 180rpx;
					margin-top: 20rpx;
				}
			}
		
			.bs_item{
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 36rpx;
				.left{
					width: 180rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 26rpx;
					color: #86909C;
					line-height: 26rpx;
				}
				.right{
					width: calc(100% - 180rpx);
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 26rpx;
					color: #1D2129;
					line-height: 26rpx;
					text-align: right;
					word-wrap: break-word;
				}
			}
			
			.b_item{
				display: flex;
				align-items: center;
				justify-content: space-between;
				box-shadow: inset 0rpx -1rpx 0rpx 0rpx #ECEEF5;
				padding: 24rpx 0;
				.left{
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 30rpx;
					color: #1D2129;
					line-height: 42rpx;
				}
				.right{
					input{
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 28rpx;
						color: #4E5969;
						line-height: 40rpx;
						text-align: right;
					}
					&.select{
						display: flex;
						align-items: center;
						text{
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 28rpx;
							color: #B9C0C8;
							line-height: 40rpx;
						}
						image{
							width: 24rpx;
							height: 24rpx;
							margin-left: 10rpx;
						}
					}
				}
			}
			.b_item2{
				.top{
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 30rpx;
					color: #1D2129;
					line-height: 42rpx;
					padding-top: 24rpx;
				}
				.bottom{
					padding-bottom: 24rpx;
					input{
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 28rpx;
						color: #4E5969;
						line-height: 40rpx;
					}
				}
			}
		}
		
		.bottom_btn{
			width: 100%;
			height: 148rpx;
			padding: 20rpx 48rpx;
			box-sizing: border-box;
			background: #FFFFFF;
			position: fixed;
			bottom: 0;
			left: 0;
			z-index: 9;
			.btn{
				width: 100%;
				height: 88rpx;
				background: #2E69EB;
				border-radius: 16rpx;
				font-family: PingFang-SC, PingFang-SC;
				font-weight: bold;
				font-size: 32rpx;
				color: #FFFFFF;
				line-height: 88rpx;
				text-align: center;
			}
		}
	}
</style>