uniapp/pages/eleControl/powerCut/powerCutAdd/powerCutAdd.vue

<template>
	<view class="appWrapper">
		<form action="" v-if="!id">
			<view style="height:30rpx"></view>
			<view class="form-item">
				<view class="title">
					<text class="necessary">*</text>
					开始时间:
				</view>
				<view class="example-body">
					<uni-datetime-picker v-model="start_time" />
				</view>
			</view>
			<view class="form-item">
				<view class="title">
					<text class="necessary">*</text>
					结束时间:
				</view>
				<view class="example-body">
					<uni-datetime-picker v-model="end_time" :start="start_time" />
				</view>
			</view>
			
			<!-- <calendar   @func='getMsgFromxSon' @func2='getMsgFromxSon2' :bindStartTime="formMess.start_time" :bindEndTime="formMess.end_time"></calendar> -->
			<view class="form-item">
				<view class="title"><text class="necessary">*</text>所属站点:</view>
				<select name="" id="" filterable clearable v-model="formMess.site_id">
					<option value="0">请选择</option>
					<option :value=item.id v-for="item in siteListData">{{ item.site_name}}</option>
				</select>
			</view>
			
			<view class="form-item">
				<view class="title"><text class="necessary">*</text>计划类型:</view>
				
				<select name="" id="" filterable clearable v-model="formMess.plan_type">
					<option value="0">请选择</option>
					<option value="1">计划检修停电</option>
					<option value="2">计划施工停电</option>
					<option value="3">客户申请停电</option>
				</select>
			</view>
			<view class="btn-area submitBottomBtn padding-lr-sm">
				<button class="bg-blue round  margin-top" @click="$noMultipleClicks(addSubmit)">提 交 </button>
			</view>
		</form>
		
		<!-- 修改start -->
		<form action="" v-else>
			<view style="height:30rpx"></view>
			<view class="form-item">
				<view class="title">
					<text class="necessary">*</text>
					开始时间:
				</view>
				<view class="example-body" v-if="this.status_value==1">
					<uni-datetime-picker  v-model="planDetailData.start_time" />
				</view>
				<view class="example-body" v-else>
					<uni-datetime-picker  v-model="planDetailData.start_time" disabled/>
				</view>
			</view>
			<view class="form-item">
				<view class="title">
					<text class="necessary">*</text>
					结束时间:
				</view>
				<view class="example-body" >
					<uni-datetime-picker v-model="planDetailData.end_time"  :start="planDetailData.start_time" />
				</view>
			</view>
			
		
			
			<!-- <calendar   @func='getMsgFromxSon' @func2='getMsgFromxSon2' :bindStartTime="planDetailData.start_time" :bindEndTime="planDetailData.end_time" v-if="this.planDetailData.end_time" ></calendar> -->
			<view class="form-item">
				<view class="title"><text class="necessary">*</text>所属站点:</view>
				<select name="" id="" filterable clearable v-model="planDetailData.site_id" disabled="disabled">
					<option value="0">请选择</option>
					<option :value=item.id v-for="item in siteListData">{{ item.site_name}}</option>
				</select>
			</view>
			
			<view class="form-item">
				<view class="title"><text class="necessary">*</text>计划类型:</view>
				<select name="" id="" filterable clearable v-model="planDetailData.plan_type" disabled="disabled">
					<option value="0">请选择</option>
					<option value="1">计划检修停电</option>
					<option value="2">计划施工停电</option>
					<option value="3">客户申请停电</option>
				</select>
			</view>
			<view class="form-item margin-top">
				<view class="title">
					<text class="necessary">*</text>
					报备人:
				</view>
				<input name="deviceCode" v-model="planDetailData.creator" disabled="disabled"></input>
			</view>
			<view class="form-item margin-top">
				<view class="title">
					<text class="necessary">*</text>
					手机号:
				</view>
				<input name="deviceCode" v-model="planDetailData.phone" disabled="disabled"></input>
			</view>
			<view class="btn-area submitBottomBtn padding-lr-sm">
				<button class="bg-blue round  margin-top" @click="$noMultipleClicks(editSubmit)">提 交 </button>
			</view>
		</form>
		<!-- 修改end -->


	</view>
</template>

<script>
	// import calendar from '../calendar/calendar.vue';
	export default {
		components: {
		        // calendar 
				},

		data() {
			return {
				
				noClick:true,
				
				id:'',
				isShow: false,
				formMess: {
					"site_id": 0,
					"plan_type": 0,
					"start_time": "",
					"end_time": "",
				},
				siteListData:[],
				planTypeData:[],
				planDetailData:{},
				
				start_time: '',
				end_time: '',
			}
		},
		onLoad: function(option) {
			this.getSiteList();
			this.id=option.id;
			this.status_value=option.status_value
			if (option.id) {
				uni.setNavigationBarTitle({
					title: '计划停电修改'
				});
				this.getDataList({
					"id": option.id,
					"status_value": option.status_value
				})
			} else {
				uni.setNavigationBarTitle({
					title: '计划停电新增'
				});
			}
			
		},
		methods: {
			//新增验证并提交
			addSubmit() {
				// alert( this.formMess.start_time)
				if (!this.start_time) {
					uni.showToast({
						title: "请选择开始时间",
						icon: "none"
					});
					return
				}
				if (!this.end_time) {
					uni.showToast({
						title: "请选择结束时间",
						icon: "none"
					});
					return
				}
				if (this.end_time<this.start_time) {
					uni.showToast({
						title: "结束时间不能小于开始时间，请重新选择",
						icon: "none"
					});
					return
				}
				
				if (!this.formMess.site_id) {
					uni.showToast({
						title: "请选择所属站点",
						icon: "none"
					});
					return
				}
				if (!this.formMess.plan_type) {
					uni.showToast({
						title: "请选择计划类型",
						icon: "none"
					});
					return
				}
				
				this.setAddDevice({
					"site_id": this.formMess.site_id,
					"plan_type": this.formMess.plan_type,
					"start_time": this.start_time,
					"end_time": this.end_time,
				})
			},
			// 新增请求
			async setAddDevice(ming = {}) {
				const res = await this.$myRequest({
					url: 'BlackoutPlan/addBlackoutPlan',
					data: ming
				})
				if (!res.data.flag) {
					uni.showToast({
						title: "添加失败",
						icon: "none"
					});
				} else {
					uni.showToast({
						title: "添加成功",
					});
				}
				setTimeout(() => {
					uni.navigateTo({
						url: '/pages/eleControl/powerCut/powerCut'
					});
				}, 1000);
			},
			
			// 修改回显请求
			async getDataList(params = {}) {
				const res = await this.$myRequest({
					url: 'BlackoutPlan/getBlackoutPlanList',
					showLoading: true,
					data: params
				})
				console.log('res.data.data')
				console.log(res.data.data)
				this.planDetailData = res.data.data[0],
				this.start_time=this.planDetailData.start_time
				console.log(this.planDetailData.start_time)
			},
			
			//编辑验证并提交
			
			editSubmit() {
				if (this.planDetailData.end_time<this.planDetailData.start_time) {
					uni.showToast({
						title: "结束时间不能小于开始时间，请重新选择",
						icon: "none"
					});
					return
				}
				this.updataPlan({
					"site_id": this.planDetailData.site_id,
					"plan_type": this.planDetailData.plan_type,
					"start_time": this.planDetailData.start_time,
					"end_time": this.planDetailData.end_time,
					"creator": this.planDetailData.creator,
					"phone": this.planDetailData.phone,
					"id":this.planDetailData.id,
				})
			},
			// 编辑请求
			async updataPlan(ming = {}) {
				const res = await this.$myRequest({
					url: 'BlackoutPlan/updateBlackoutPlan',
					data: ming
				})
				if (!res.data.flag) {
					uni.showToast({
						title: "编辑失败",
						icon: "none"
					});
				} else {
					uni.showToast({
						title: "编辑成功",
					});
				}
				setTimeout(() => {
					uni.navigateTo({
						url: '/pages/eleControl/powerCut/powerCut'
					});
				}, 1000);
			},
			
			//站带下拉数据请求
			async getSiteList(params = {}) {
				const res = await this.$myRequest({
					url: 'BlackoutPlan/getSiteBox',
					showLoading: true,
					data: params
				})
				this.siteListData = res.data.data
			},
		}
	}
</script>

<style lang="scss">
	/deep/ .uni-calendar--fixed{
		z-index:1111!important
	}
	.example-body{
		width: 276px;
		    font-size: 15px;
			/deep/ uni-input, select, option{
				border:none
			}
	}

</style>