uniapp2/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,index) in siteListData" :key="index">{{ 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,index) in siteListData" :key="index">{{ 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"/>
			</view>
			<view class="form-item margin-top">
				<view class="title">
					<text class="necessary">*</text>
					手机号:
				</view>
				<input name="deviceCode" v-model="planDetailData.phone" disabled="disabled"/>
			</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 {
				single: "2021-04-3",
				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: {
			change(e) {
				this.single = e;
				console.log("-change事件:", e);
			},
			//新增验证并提交
			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.redirectTo({
						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.redirectTo({
						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>