androidCnToWechatGrt/pagesOperation/record/add.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">
						<input type="text" placeholder="请输入巡检任务"  placeholder-class="inp_ph" v-model="dto.inspectionTask">
					</div>
				</div>
				<div class="box_item">
					<div class="left">巡检负责人</div>
					<div class="right">
						<input type="text" placeholder="请输入巡检负责人"  placeholder-class="inp_ph" v-model="dto.inspector">
					</div>
				</div>
				<div class="box_item">
					<div class="left">巡检时间</div>
					<div class="right select" @tap="handleSelect(3)">
						<text>{{dateText}}</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">
						<u-radio-group v-model="dto.status" :size="30" :iconSize="30">
							<u-radio :labelSize="30" :label="0" :name="0">正常</u-radio>
							<u-radio :labelSize="30" :label="1" :name="1">有异常</u-radio>
						</u-radio-group>
					</div>
				</div>
				<div class="box_item2">
					<div class="top">备注</div>
					<div class="bottom">
						<u--textarea v-model="dto.remark" 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"
						    :maxCount="1"
						></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)" :immediateChange="true"></u-picker>
		<u-picker :itemHeight="88" :show="show2" :columns="columns2" keyName="customerName" title="巡检地点"
			@cancel="show2=false" @confirm="e=>confirm(e,2)" :immediateChange="true"></u-picker>
		<u-datetime-picker :itemHeight="88" :show="show3" v-model="dto.startDate" mode="date" title="巡检时间"
			@cancel="show3=false" @confirm="e=>confirm(e,3)" :immediateChange="true" :minDate="minDate" :maxDate="maxDate"></u-datetime-picker>
	</view>
</template>

<script>
	const baseApi = require('@/http/baseApi.js')
	export default {
		data(){
			return {
				dto:{
					orderId:'',
					inspectionSite:'',
					inspectionTask:'',
					inspector:'',
					startDate:'',
					status:0,
					remark:'',
					inspectionFile:''
				},
				fileList:[],
				orderNoText:'请选择项目订单号',
				placeText:'请选择巡检地点',
				dateText:'请选择巡检时间',
				show1:false,
				show2:false,
				show3:false,
				columns1:[],
				columns2:[],
				minDate:'',
				maxDate:'',
				rules:[
					{key:'orderId',tip:'请选择项目订单号'},
					{key:'inspectionSite',tip:'请选择巡检地点'},
					{key:'inspectionTask',tip:'请输入巡检任务'},
					{key:'inspector',tip:'请输入巡检负责人'},
					{key:'startDate',tip:'请选择巡检时间'},
					// {key:'status',tip:'请选择巡检结果'},
					// {key:'remark',tip:'请输入备注'},
					// {key:'inspectionFile',tip:'请选择巡检打卡图片'}
				]
			}
		},
		onLoad() {
			let d = new Date();
			this.minDate = new Date(d.getFullYear(),d.getMonth(),1).getTime();
			this.maxDate = new Date().getTime();
			this.getOrderList();
			this.getCustomerList();
		},
		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]
				})
			},
			handleSelect(type){
				this['show'+type] = true;
			},
			confirm(e,type){
				if(type==1){
					this.orderNoText = e.value[0].orderNo;
					this.dto.orderId = e.value[0].id;
					this.show1 = false;
				}else if(type==2){
					this.placeText = e.value[0].customerName;
					this.dto.inspectionSite = e.value[0].id;
					this.show2 = false;
				}else if(type==3){
					this.dateText = new Date(e.value).Format('yyyy-MM-dd');
					this.dto.startDate = new Date(e.value).Format('yyyy-MM-dd hh:mm:ss');
					this.show3 = 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.startDate = new Date(dto.startDate).Format('yyyy-MM-dd hh:mm:ss');
				dto.inspectionFile = this.fileList[0].url;
				this.$api.post('/wms/order/inspection',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>