ybxf-security-uniapp/pagesA/fire/add_fireRun/add_fireEvent/add_fireEvent.vue

<template>
	<view class="uni-container uni-container-bg">
		<view class="example container" :style="'height: ' + (screenHeight - wheight - 75) + 'px'">
			<view class="event">
				<view class="event-title"> <text class="xinghao">*</text>事件时间</view>
				<uni-datetime-picker class="time-item-check" type="date" :clear-icon="false" :disabled="isview"
					v-model="eventTime" @maskClick="startMaskClick" placeholder="请选择事件时间" />
				<view class="content">
					<view class="event-title"> <text class="xinghao">*</text>出动人数</view>
					<u-input v-model="eventPeples" placeholder="请输入出动人数" :maxlength="1000" :disabled="isview" count
						height="150">
					</u-input>
				</view>
				<view class="content">
					<view class="event-title"> <text class="xinghao">*</text>燃烧面积</view>
					<u-input v-model="burnArea" placeholder="请输入燃烧面积" :maxlength="1000" :disabled="isview" count
						height="150">
					</u-input>
				</view>
				<view class="content">
					<view class="event-title"> <text class="xinghao">*</text>过火面积</view>
					<u-input v-model="fireArea" placeholder="请输入过火面积" :maxlength="1000" :disabled="isview" count
						height="150">
					</u-input>
				</view>
				<view class="content" style="margin-bottom: 60rpx;">
					<view class="event-title"> <text class="xinghao">*</text>事件内容</view>
					<u--textarea v-model="eventContent" placeholder="请输入内容" :disabled="isview" :maxlength="1000" count
						height="150">
					</u--textarea>
				</view>
			</view>
		</view>
		<view class="bottons heigthButton" v-if="!isview">
			<view class="buttons-item">
				<u-button shape="circle" type="primary" text="取消"
					:custom-style="{color:'#4CB2B6',backgroundColor: '#fff',border:'1px solid #fff',marginRight:'10px'}"
					@click="cancel">
				</u-button>
				<u-button shape="circle" type="primary" color="#4CB2B6" text="保存" @click="submit">
				</u-button>

			</view>
		</view>
	</view>
</template>

<script>
	import riliicon from '@/static/images/riliicon.png'
	import {
		createStationEvent,
		getOneMicrostation, //编辑获取
		updateOrgReport
	} from '@/api/fire_station/index';
	export default {
		data() {
			return {
				screenHeight: this.$screenHeight,
				wheight: '',
				eventContent: '',
				eventTime: '',
				riliicon: riliicon,
				isEditId: false,
				eventPeples: '', //出动人数
				burnArea: "", //燃烧面积
				fireArea: '', //过火面积
				runId: '',
				isview: false
			}
		},
		onLoad: function(option) {
			if (option.isview == "isview") {
				this.isview = true
			}
			this.runId = option.runId
			if (option.id) {
				this.isEditId = option.id
				getOneMicrostation({
					id: option.id
				}).then(reponse => {
					this.eventTime = reponse.data.eventTime
					this.eventContent = reponse.data.eventContent
					this.eventPeples = reponse.data.eventPeples, //出动人数
						this.burnArea = reponse.data.burnArea, //燃烧面积
						this.fireArea = reponse.data.fireArea, //过火面积
						console.log(reponse, 'opt');
				})
			}
		},
		mounted() {
			uni.createSelectorQuery().in(this).select('.heigthButton').boundingClientRect(data => {
				this.wheight = data.height
			}).exec()
		},
		methods: {
			submit() {
				console.log(this.runId, 'this.runIdthis.runId');
				const that = this
				if (!this.eventPeples || !this.eventTime || !this.eventContent || !this.burnArea || !this.fireArea) {
					return this.$modal.msgError('未填写必填项')
				}
				if (!this.isEditId) {
					createStationEvent({
						eventContent: this.eventContent,
						eventTime: this.eventTime + '',
						eventPeples: this.eventPeples, //出动人数
						burnArea: this.burnArea, //燃烧面积
						fireArea: this.fireArea, //过火面积
						microstationid: this.runId
					}).then(reponse => {
						that.$modal.msg('保存成功')
						setTimeout(() => {
							uni.navigateBack()
						}, 400)

					}).catch(err => {})
				} else {
					updateOrgReport({
						eventContent: this.eventContent,
						eventTime: this.eventTime + '',
						id: this.isEditId,
						eventPeples: this.eventPeples, //出动人数
						burnArea: this.burnArea, //燃烧面积
						fireArea: this.fireArea, //过火面积
						microstationid: this.runId
					}).then(reponse => {
						that.$modal.msg('编辑成功')
						setTimeout(() => {
							uni.navigateBack()
						}, 400)

					}).catch(err => {})
				}

			},
			cancel() {
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss" scoped>
	body {
		background-color: #f5f7f9;
	}

	page {
		background-color: #f5f7f9 !important;
	}

	.uni-container {
		height: 100%
	}

	.event {
		margin-top: 40rpx;
		background-color: #F5F7F9;

		.content {
			margin-top: 40rpx
		}

		.event-title {
			color: #274647;
			font-size: 28rpx;
			margin-bottom: 28rpx
		}
	}

	/deep/ .uniui-calendar:before {
		display: inline-block;
		content: url('~@/static/images/riliicon.png');
		width: 40rpx;
		height: 40rpx;
		position: absolute;
		left: 14rpx;
		top: 16rpx
	}

	/deep/ .uni-input-placeholder {
		left: 44rpx !important;
	}

	/deep/.uni-input-input {
		margin-left: 40rpx;
	}

	/deep/ .uni-date-x[data-v-6e13d7e2],
	/deep/ .uni-date-x {
		height: 72rpx
	}

	.bottons {
		.buttons-item {
			display: flex;
			justify-content: space-between;
			width: 90%;
			margin-left: 5%
		}

		.u-button {
			width: 45%
		}

		position: fixed;
		left: 0;
		bottom: 30rpx;
		right: 0;
	}

	/deep/ .u-input {
		background: #fff;
	}

	.example {
		overflow-y: auto;
	}

	.xinghao {
		color: red;
		margin-right: 10rpx;
	}
</style>