androidCnToWechatGrt/pagesOperation/repair/index.vue

<template>
	<view class="page" :style="{'min-height':h+'px', 'padding-top':mt+'px'}">
		<cus-header title='故障报修'></cus-header>
		<div class="boxs">
			<div class="box">
				<div class="box_item">
					<div class="left">项目订单号</div>
					<div class="right select" @tap="handleSelect(1)">
						<text>{{orderNoText}}</text>
						<image :src="imgBase+'operation/arrow_right.png'" mode="widthFix"></image>
					</div>
				</div>
				<div class="box_item">
					<div class="left">报修地点</div>
					<div class="right select" @tap="handleSelect(2)">
						<text>{{placeText}}</text>
						<image :src="imgBase+'operation/arrow_right.png'" mode="widthFix"></image>
					</div>
				</div>
				<div class="box_item">
					<div class="left">产品名称</div>
					<div class="right select" @tap="handleSelect(3)">
						<text>{{productText}}</text>
						<image :src="imgBase+'operation/arrow_right.png'" mode="widthFix"></image>
					</div>
				</div>
				<div class="box_item">
					<div class="left">产品编号</div>
					<div class="right select" @tap="handleSelect(4)">
						<text>{{productNoText}}</text>
						<image :src="imgBase+'operation/arrow_right.png'" mode="widthFix"></image>
					</div>
				</div>
			</div>
			<div class="box">
				<div class="box_item">
					<div class="left">故障发生时间</div>
					<div class="right select" @tap="handleSelect(5)">
						<text>{{dateText}}</text>
						<image :src="imgBase+'operation/arrow_right.png'" mode="widthFix"></image>
					</div>
				</div>
				<div class="box_item">
					<div class="left">故障类型</div>
					<div class="right select" @tap="handleSelect(6)">
						<text>{{typeText}}</text>
						<image :src="imgBase+'operation/arrow_right.png'" mode="widthFix"></image>
					</div>
				</div>
				<div class="box_item">
					<div class="left">报修人员</div>
					<div class="right">
						<input type="text" placeholder="请输入报修人员"  placeholder-class="inp_ph" v-model="dto.optUser">
					</div>
				</div>
				<div class="box_item2">
					<div class="top">故障描述</div>
					<div class="bottom">
						<u--textarea v-model="dto.repairDesc" placeholder="故障描述" placeholder-class="inp_ph2" border="none" height="110"></u--textarea>
					</div>
				</div>
			</div>
			<div class="box">
				<div class="box_item2">
					<div class="top">故障照片</div>
					<div class="bottom" style="padding-top: 24rpx;">
						<u-upload width="180" height="180"
							:fileList="fileList"
						    @afterRead="afterRead"
						    @delete="deletePic"
						    multiple
						    :maxCount="5"
						></u-upload>
					</div>
				</div>
			</div>
		</div>
		<div class="bottom_btn">
			<div class="btn" @tap="submit">提交</div>
		</div>
		<u-picker :itemHeight="88" :show="show1" :columns="columns1" keyName="orderNo" title="项目订单号"
			@cancel="show1=false" @confirm="e=>confirm(e,1,'orderNoText','orderId','orderNo')" :immediateChange="true"></u-picker>
		<u-picker :itemHeight="88" :show="show2" :columns="columns2" keyName="customerName" title="报修地点"
			@cancel="show2=false" @confirm="e=>confirm(e,2,'placeText','customer','customerName')" :immediateChange="true"></u-picker>
		<u-picker :itemHeight="88" :show="show3" :columns="columns3" keyName="itemName" title="产品名称"
			@cancel="show3=false" @confirm="e=>confirm(e,3,'productText','skuId','itemName')" :immediateChange="true"></u-picker>
		<u-picker :itemHeight="88" :show="show4" :columns="columns4" keyName="productNo" title="产品编号"
			@cancel="show4=false" @confirm="e=>confirm(e,4,'productNoText','serialnumber','productNo')" :immediateChange="true"></u-picker>
		<u-datetime-picker :itemHeight="88" :show="show5" v-model="dto.happenDate" mode="date" title="故障发生时间"
			@cancel="show5=false" @confirm="e=>confirm(e,5)" :immediateChange="true" :minDate="minDate" :maxDate="maxDate"></u-datetime-picker>
		<u-picker :itemHeight="88" :show="show6" :columns="columns6" keyName="typeName" title="故障类型"
			@cancel="show6=false" @confirm="e=>confirm(e,6,'typeText','optCategory','typeName')" :immediateChange="true"></u-picker>
	</view>
</template>

<script>
	const baseApi = require('@/http/baseApi.js')
	export default {
		data(){
			return {
				dto:{
					orderId:'',
					customer:'',
					skuId:'',
					itemName:'',
					serialnumber:'',
					happenDate:'',
					optCategory:'',
					optUser:'',
					repairDesc:'',
					faultFile:'',
					status:0
				},
				fileList:[],
				orderNoText:'请选择项目订单号',
				placeText:'请选择报修地点',
				productText:'请选择产品名称',
				productNoText:'请选择产品编号',
				dateText:'请选择故障发生时间',
				typeText:'请选择故障类型',
				show1:false,
				show2:false,
				show3:false,
				show4:false,
				show5:false,
				show6:false,
				columns1:[],
				columns2:[],
				columns3:[],
				columns4:[],
				columns6:[],
				minDate:'',
				maxDate:'',
				productList:[],
				productNoList:[],
				rules:[
					{key:'orderId',tip:'请选择项目订单号'},
					{key:'customer',tip:'请选择报修地点'},
					{key:'skuId',tip:'请选择产品名称'},
					{key:'serialnumber',tip:'请选择产品编号'},
					{key:'happenDate',tip:'请选择故障发生时间'},
					{key:'optCategory',tip:'请选择故障类型'},
					{key:'optUser',tip:'请输入报修人员'},
					{key:'repairDesc',tip:'请输入故障描述'}
				]
			}
		},
		onLoad() {
			let d = new Date();
			this.minDate = new Date(d.getFullYear(),d.getMonth()-1,d.getDate()).getTime();
			this.maxDate = new Date().getTime();
			this.getOrderList();
			this.getCustomerList();
			this.getTypeList();
		},
		methods:{
			getOrderList(){
				this.$api.get('/wms/project/getOrderPage',{page:1,limit:-1}).then(res=>{
					if(res.data.code===0){
						this.columns1 = [res.data.data.list];
					}else this.$showToast(res.data.msg)
				})
			},
			getCustomerList(){
				this.$api.get('/wms/project/getCustomerList',{page:1,limit:-1}).then(res=>{
					if(res.data.code!==0) return this.$showToast(res.data.msg)
					let list = res.data.data.map(d=>{return {id:d,customerName:d}})
					this.columns2 = [list]
				})
			},
			getTypeList(){
				this.$api.get('/sys/dict/data/getListByType/wms_operation_category').then(res=>{
					if(res.data.code===0){
						let list = res.data.data.map(d=>{return {id:d.dictValue,typeName:d.dictLabel}})
						this.columns6 = [list];
					}else this.$showToast(res.data.msg)
				})
			},
			handleSelect(type){
				if(type==3&&!this.dto.orderId) return this.$showToast('请先选择项目订单号')
				if(type==4&&!this.dto.itemName) return this.$showToast('请先选择产品名称')
				this['show'+type] = true;
			},
			confirm(e,type,param,key,key2){
				if(type!=5){
					this[param] = e.value[0][key2];
					this.dto[key] = e.value[0].id;
					if(type==3) this.dto.itemName = e.value[0][key2]
				}else{
					this.dateText = new Date(e.value).Format('yyyy-MM-dd');
					this.dto.happenDate = JSON.parse(JSON.stringify(this.dateText));
				}
				if(type==1){
					this.$api.get('/wms/shipmentOrder/getShipmentByProjectId/'+this.dto.orderId).then(res=>{
						if(res.data.code!==0) return this.$showToast(res.data.msg)
						this.productList = res.data.data;
						let list = res.data.data.map(d=>{return {id:d.skuId,itemName:d.itemName}})
						this.columns3 = [list]
					})
				}
				if(type==3){
					this.productNoList = this.productList.find(p => p.skuId === this.dto.skuId)?.serialnumbers||[];
					let list = this.productNoList.map(d=>{return {id:d,productNo:d}});
					this.columns4 = [list];
				}
				this['show'+type] = false;
			},
			// 删除图片
			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: baseApi.BaseApi + '/uploadFile',
					filePath: url,
					name: "file",
					formData: {
					  user: "test",
					},
					success: (res) => {
						let data = JSON.parse(res.data);
						if(data){
							if(data.code!==0) return
							setTimeout(() => {
								resolve(data.data);
							}, 1000);
						}
					},
				  });
				});
			},
			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))
				dto.happenDate = new Date(dto.happenDate).Format('yyyy-MM-dd');
				let file = this.fileList.map(f=>f.url);
				dto.faultFile = file.join(';')
				this.$api.post('/wms/order/operation',dto).then(res=>{
					if(res.data.code!==0) return this.$showToast(res.data.msg)
					this.$showToast('报修成功')
					setTimeout(()=>{
						uni.navigateBack()
					},1500)
				})
			}
		}
	}
</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-bottom: 168rpx;
		background: #F4F8FB;
		
		.boxs{
			padding: 0 24rpx;
			.box{
				background: #FFFFFF;
				border-radius: 16rpx;
				margin-top: 20rpx;
				padding: 0 24rpx;
			}
		}
		
		.box_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;
					}
				}
			}
		}
		.box_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>