transport_integrated_app/pages/roadTransport/dataSubmission/form.vue

<template>
	<!-- 编辑综合运输 -->
	<view class="edit_box">
		<view class="top_box">
			<view class="top_title" v-if="isShowTitle">
				<view class="top_txt">如有填报问题，请咨询公共服务中心</view>
				<view class="bot_txt">中心值班电话：<span style="color: #2D8CF0;">66007587</span></view>
			</view>
			<view class="content_box">
				<view class="basic_box">
					<view class="con_tit">基本信息</view>
					<view class="edit_item">
						<p class="left">填报单位</p>
						<view class="right">
							<p>{{synthData.departmentName ? synthData.departmentName : ''}}</p>
						</view>
					</view>
					<view class="edit_item">
						<p class="left">统计日期</p>
						<view class="right">
							<!-- <uni-datetime-picker type="date" v-model="synthData.reportDatetime">
								<p class="right_txt">{{synthData.reportDatetime ? synthData.reportDatetime : '请选择日期'}}</p>
								<uni-icons type="right" size="16"></uni-icons>
							</uni-datetime-picker> -->
							<picker mode="date" :value="synthData.reportDatetime" @change="bindDateChange">
								<text class="picker_select"
									:style="synthData.reportDatetime?'color:#333;':''">{{synthData.reportDatetime?synthData.reportDatetime:'请选择'}}</text>
								<uni-icons type="right" size="16" color="#D4D4D4"></uni-icons>
							</picker>
						</view>
					</view>
					<view class="edit_item">
						<p class="left">统计时段</p>
						<view class="right">
							<picker @change="bindPickerChange" :value="index" :range="roadTime" range-key="dictLabel">
								<view class="right_txt_box">
									<p class="right_txt">{{timeName ? timeName : '请选择统计时段'}}</p>
									<uni-icons type="right" size="16"></uni-icons>
								</view>
								
							</picker>
						</view>
					</view>
				</view>
				<view class="basic_box data_box">
					<view class="con_tit">综合运输数据</view>
					<view class="remark_item">
						<p class="left">交通运输情况：</p>
						<view class="right">
							<uni-easyinput type="textarea" autoHeight v-model="synthData.trafficOperationDescription" placeholder="请填写交通运输情况"></uni-easyinput>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="bottom_box">
			<p class="btn_item" @click="cancelEdit">取消</p>
			<p class="btn_item confirm" @click="confirmRoad">确认</p>
		</view>
	</view>
</template>

<script>
	import { getDateStr } from '../../../common/util'
	export default {
		data() {
			return {
				roadTime:[],
				unitData:[],
				synthData:{
					reportPhase:'',
					reportDatetime:'',
					trafficOperationDescription:''
				},
				isShowTitle:false,
				timeName:'',
				pageType:'',
				index:''
			}
		},
		onLoad(options) {
			this.getRoadTime();
			if(options.type == 'edit'){
				this.pageType = 'edit'
				let row = JSON.parse(options.item);
				// this.synthData = row;
				this.getDetail(row.id);
				// this.synthData.reportDatetime = this.synthData.reportDatetime ? this.synthData.reportDatetime.substring(0,10) : ''
			}else if(options.type == 'add'){
				this.pageType = 'add'
				let now =  new Date();
				this.synthData.reportDatetime = getDateStr(now, -1);//默认前一天
			}
			
		},
		methods: {
			getDetail(id){
				this.$request(getApp().globalData.baseUrl + '/api/biz/roadtransport/operation/find/' + id,{},"GET").then(res=>{
					// console.log('综合运输详情===>',res)
					this.synthData = res.data;
					this.synthData.reportDatetime = this.synthData.reportDatetime ? this.synthData.reportDatetime.substring(0,10) : ''
				})
			},
			//选择统计日期
			bindDateChange(e) {
				this.synthData.reportDatetime = e.detail.value;
			},
			// 获取时段
			getRoadTime(){
				this.$request(getApp().globalData.baseUrl + '/api/dict/dictList?dictType=airport_time&_t=1693372307694',"GET").then(res =>{
					this.roadTime = res.data;
					if(this.pageType == 'edit'){
						this.index = this.roadTime.findIndex(item => item.dictValue == this.synthData.reportPhase)
						this.timeName = this.roadTime.find(item => item.dictValue == this.synthData.reportPhase).dictLabel
					}else if(this.pageType == 'add'){
						let now = new Date();
						let dateStr = getDateStr(now,0);
						if(new Date(dateStr + ' 11:00').getTime() < new Date().getTime() && new Date().getTime() < new Date(dateStr + ' 13:30').getTime()){
							this.synthData.reportPhase = "0012";
							this.index = this.roadTime.findIndex(item => item.dictValue == "0012")
							this.timeName = this.roadTime.find(item => item.dictValue == "0012").dictLabel
						}else{
							this.synthData.reportPhase = "03";
							this.index = this.roadTime.findIndex(item => item.dictValue == "03")
							this.timeName = this.roadTime.find(item => item.dictValue == "03").dictLabel
						}
					}
				})
			},
			// 选中时段数据
			bindPickerChange(e){
				let index = e.target.value   //取其下标
				var selected = this.roadTime[index]           //获取选中的数组
				this.synthData.reportPhase = selected.dictValue;
				this.timeName = selected.dictLabel
			},
			// 点击确认按钮
			confirmRoad(){
				let params = this.synthData;
				console.log(params)
				if(params.reportDatetime == ''){
					uni.showToast({
						title:'请选择统计日期',
						icon:"none"
					})
				}else if(params.reportPhase == ''){
					uni.showToast({
						title:"请选择统计时段",
						icon:'none'
					})
				}else{
					uni.showModal({
						title:"提示",
						content:"您确定，提交修改吗？",
						success:(res) =>{
							if(res.confirm){
								this.$request(getApp().globalData.baseUrl + '/api/biz/roadtransport/operation/saveOrUpdate',params,'POST').then(res =>{
									if(res.code == 200){
										uni.showToast({
											title:'填报成功',
											icon:"none"
										});
										setTimeout(() =>{
											uni.navigateBack()
										},500)
									}
								})
							}else if(res.cancel){}
						}
					})
				}
				
			},
			// 点击取消按钮
			cancelEdit(){
				uni.navigateBack()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.edit_box{
		width: 100%;
		height: 100%;
		
		.top_box{
			margin-top: 30rpx;
			height:88%;
			overflow-y: auto;
			
			.top_title{
				width: 690rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				color: #666;
				font-size: 26rpx;
				line-height: 40rpx;
				margin-bottom: 20rpx;
			}
			
			.content_box{
				display: flex;
				flex-direction: column;
				
				.basic_box{
					width: 630rpx;
					padding: 30rpx 30rpx;
					margin: 0 auto;
					background-color: #fff;
					border-radius: 30rpx;
					
					&.data_box{
						margin-top: 30rpx;
					}
					
					.con_tit{
						width: 100%;
						margin-top: 10rpx;
						font-size: 40rpx;
						color: #333;
						font-weight: bold;
						margin-bottom: 9rpx;
					}
					
					.remark_item{
						color: #333;
						font-size: 30rpx;
						font-weight: bold;
						
						.left{
							margin-top: 20rpx;
							margin-bottom: 30rpx;
						}
						
						.right{
							/deep/ .is-input-border{
								border: 1rpx solid #c1c1c1 !important;
								border-radius: 30rpx !important;
							}
						}
					}
					.edit_item{
						width: 100%;
						display: flex;
						justify-content: space-between;
						margin-top: 32rpx;
						align-items: center;
						
						&.input{
							margin-top: 5rpx;
						}
						
						.left{
							// margin-left: 30rpx;
							color: #666;
							font-size: 26rpx;
						}
						.right{
							// margin-right: 30rpx;
							display: flex;
							align-items: center;
							
							
							
							.right_txt{
								color: #333;
								font-size: 28rpx;
							}
							
							.right_txt_box{
								display: flex;
								align-items: center;
								
							}
							
							/deep/ .uni-date-editor{
								display: flex;
								align-items: center;
							}
							/deep/ .uni-easyinput__content-input{
								font-size: 28rpx !important;
								text-align: right;
								color: #333;
							}
							
							/deep/ .is-input-border {
								border: none;
							}
							
							/deep/ .content-clear-icon{
								padding: 0 !important;
							}
						}
					}
					
					.per_con{
						width: 630rpx;
						margin: 0 auto;
						background-color: #F6F6F6;
						border-radius: 30rpx;
						margin-top: 30rpx;
						
						
						.content{
							width: 576rpx;
							padding: 34rpx 32rpx 30rpx 22rpx;
							display: flex;
							justify-content: space-between;
							align-items: center;
							
							&.top{
								border-bottom: 1rpx solid #FFFFFF;
							}
							
							
							.left{
								font-size: 24rpx;
								color: #666;
							}
							.right{
								color: #333;
								font-size: 28rpx;
								
								&.green{
									color: #1ECE5F;
								}
								
								&.red{
									color: #EB4747;
								}
							}
						}
					}
				}
			}
		}
		.bottom_box{
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			display: flex;
			justify-content: space-around;
			// background-color: #F8F8F8;
			padding: 0rpx 0rpx 20px;
			
			.btn_item{
				width: 329rpx;
				height: 90rpx;
				background: #F6F6F6;
				border: 1rpx solid #C1C1C1;
				color: #666;
				width: 329rpx;
				height: 90rpx;
				line-height: 88rpx;
				display: flex;
				justify-content: center;
				font-size: 28rpx;
				font-weight: 400;
				border-radius: 100rpx;
				
				&.confirm {
					background: #2D8CF0;
					border: 1rpx solid #2D8CF0;
					color: #FFFFFF;
				}
			}
		}
	}

</style>