ybxf-security-uniapp/pagesA/fire/fire_inspetItem/add-street/streetXfsssbpczl.vue

<template>
	<view class="uni-container">
		<view class="example container" :style="'height: ' + (screenHeight - wheight - 75) + 'px'">
			<u--form ref="customForm" :model="formData" labelPosition="left" labelWidth="100%" labelAlign="left">
				<view class="julis-bottom">
					<uni-card class="xf-title">
						<view class="main-showdow-streetXf">
							市政消火栓 (个)
						</view>
						<uni-row class="demo-uni-row">
							<uni-col :span="11" style="margin-right:40rpx">
								<u-form-item label="原有:" prop="szxhsXz">
									<u-input v-model="formData.szxhsXz" :disabled="isview" />
								</u-form-item>
							</uni-col>
							<uni-col :span="11">
								<u-form-item label="新增:" prop="szxhsYy">
									<u-input v-model="formData.szxhsYy" :disabled="isview" />
								</u-form-item>
							</uni-col>
						</uni-row>
					</uni-card>
					<uni-card class="xf-title">
						<view class="main-showdow-streetXf">
							建筑室外消火栓 (个)
						</view>
						<uni-row class="demo-uni-row">
							<uni-col :span="11" style="margin-right:40rpx">
								<u-form-item label="新增:" prop="jzswxhsXz">
									<u-input v-model="formData.jzswxhsXz" :disabled="isview" />
								</u-form-item>
							</uni-col>
							<uni-col :span="11">
								<u-form-item label="维护:" prop="jzswxhsYy">
									<u-input v-model="formData.jzswxhsYy" :disabled="isview" />
								</u-form-item>
							</uni-col>
						</uni-row>
					</uni-card>
					<uni-card class="xf-title">
						<view class="main-showdow-streetXf">
							消防水池 (个)
						</view>
						<uni-row class="demo-uni-row">
							<uni-col :span="11" style="margin-right:40rpx">
								<u-form-item label="原有:" prop="xfscYy">
									<u-input v-model="formData.xfscYy" :disabled="isview" />
								</u-form-item>
							</uni-col>
							<uni-col :span="11">
								<u-form-item label="新增:" prop="xfscXz">
									<u-input v-model="formData.xfscXz" :disabled="isview" />
								</u-form-item>
							</uni-col>
						</uni-row>
					</uni-card>
					<uni-card class="xf-title">
						<view class="main-showdow-streetXf">
							灭火器 (个)
						</view>
						<uni-row class="demo-uni-row">
							<uni-col :span="10" style="margin-right:40rpx">
								<u-form-item label="新增:" prop="mhqYy">
									<u-input v-model="formData.mhqYy" :disabled="isview" />
								</u-form-item>
							</uni-col>
							<uni-col :span="12">
								<u-form-item label="更换维护:" prop="mhqGhwh">
									<u-input v-model="formData.mhqGhwh" :disabled="isview" />
								</u-form-item>
							</uni-col>
						</uni-row>
					</uni-card>
					<uni-card class="xf-title">
						<view class="main-showdow-streetXf">
							应急照明灯具 (个)
						</view>
						<uni-row class="demo-uni-row">
							<uni-col :span="10" style="margin-right:40rpx">
								<u-form-item label="新增:" prop="yjzmdYy">
									<u-input v-model="formData.yjzmdYy" :disabled="isview" />
								</u-form-item>
							</uni-col>
							<uni-col :span="12">
								<u-form-item label="更换维护:" prop="yjzmdGhwh">
									<u-input v-model="formData.yjzmdGhwh" :disabled="isview" />
								</u-form-item>
							</uni-col>
						</uni-row>
					</uni-card>
					<uni-card class="xf-title">
						<view class="main-showdow-streetXf">
							疏散指示标志 (个)
						</view>
						<uni-row class="demo-uni-row">
							<uni-col :span="10" style="margin-right:40rpx">
								<u-form-item label="新增:" prop="sszsbzYy">
									<u-input v-model="formData.sszsbzYy" :disabled="isview" />
								</u-form-item>
							</uni-col>
							<uni-col :span="12">
								<u-form-item label="更换维护:" prop="sszsbzGhwh">
									<u-input v-model="formData.sszsbzGhwh" :disabled="isview" />
								</u-form-item>
							</uni-col>
						</uni-row>
					</uni-card>
					<uni-card class="xf-title">
						<view class="main-showdow-streetXf">
							微型消防站 (个)
						</view>
						<uni-row class="demo-uni-row">
							<uni-col :span="11" style="margin-right:40rpx">
								<u-form-item label="原有:" prop="wxxfzYy">
									<u-input v-model="formData.wxxfzYy" :disabled="isview" />
								</u-form-item>
							</uni-col>
							<uni-col :span="11">
								<u-form-item label="新增:" prop="wxxfzXz">
									<u-input v-model="formData.wxxfzXz" :disabled="isview" />
								</u-form-item>
							</uni-col>
						</uni-row>
					</uni-card>
					<uni-card class="xf-title">
						<view class="main-showdow-streetXf">
							消防车辆 (台)
						</view>
						<uni-row class="demo-uni-row">
							<uni-col :span="10" style="margin-right:40rpx">
								<u-form-item label="原有:" prop="xfclYy">
									<u-input v-model="formData.xfclYy" :disabled="isview" />
								</u-form-item>
							</uni-col>
							<uni-col :span="12">
								<u-form-item label="新增:" prop="xfclXz">
									<u-input v-model="formData.xfclXz" :disabled="isview" />
								</u-form-item>
							</uni-col>
						</uni-row>
					</uni-card>
					<uni-card class="xf-title">
						<view class="main-showdow-streetXf">
							自动灭火设施（自动报警、自动喷淋、防排烟等） (套)
						</view>
						<uni-row class="demo-uni-row">
							<uni-col :span="10" style="margin-right:40rpx">
								<u-form-item label="新增:" prop="zdmhssYy">
									<u-input v-model="formData.zdmhssYy" :disabled="isview" />
								</u-form-item>
							</uni-col>
							<uni-col :span="12">
								<u-form-item label="更换维护:" prop="zdmhssGhwh">
									<u-input v-model="formData.zdmhssGhwh" :disabled="isview" />
								</u-form-item>
							</uni-col>
						</uni-row>
					</uni-card>
					<uni-card class="xf-title">
						<view class="main-showdow-streetXf">
							其他（如手抬消防泵等）
						</view>
						<uni-row class="demo-uni-row">
							<uni-col :span="10" style="margin-right:40rpx">
								<u-form-item label="新增:" prop="qtXz">
									<u-input v-model="formData.qtXz" :disabled="isview" />
								</u-form-item>
							</uni-col>
						</uni-row>
					</uni-card>
					<picker mode="date" :value="dateTime" @change="bindDateChange" :disabled="isview">
						<view class="datatime-street">
							<u-form-item label="填报日期" prop="reporttime" :required="true">
								<u-input v-model="formData.reporttime" placeholder="选择日期" class="add-date"
									:disabled="isview" />
							</u-form-item>
						</view>
					</picker>
					<u-form-item label="填报描述:" prop="descr" class="beizhu">
						<u-textarea v-model="formData.descr" placeholder="请输入内容" :disabled="isview" :maxlength="500"
							height="150">
						</u-textarea>
					</u-form-item>
					<view>
						<view class="paizhao" style="color:#383838 !important">现场照片</view>
						<view class="paizhao-posit" v-if="!isview">
							<image :src="photograph" @click="photoUpload" class="tiantupian-photo"></image>
							<view class="">
								拍照上传
							</view>
							<uni-load-more v-show="loading" status="loading" :content-text="contentText" />
						</view>
					</view>
					<view v-if="formData.streetRepPicsDOList" class="show-photo">
						<view v-for="(items,indexs) in formData.streetRepPicsDOList" :key="indexs">
							<view class="show-photo-main">
								<view class="show-photo-main-img">
									<image :src="items.url" class="show-photo-main-img-item">
										<u-icon name="close" color="#4CB2B6" size="19" @click="closeImage(items,indexs)"
											v-if="!isview">
										</u-icon>
								</view>
								<view class="">
									<view>
										图片名称
									</view>
									<view class="img-name">
										<u-input v-model="items.feildname" placeholder="请输入图片名称" :disabled="isview" />
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</u--form>
		</view>
		<view class="sub-botn heigthButton">
			<u-button v-if="isedit" @click="submit('customForm')" type="primary" shape="circle" size="large"
				color="#4CB2B6" text="确认修改" style="width:200px">
			</u-button>
			<u-button v-else-if="!formData.id" @click="submit('customForm')" type="primary" shape="circle" size="large"
				color="#4CB2B6" text="确认新增" style="width:200px">
			</u-button>
			<u-button v-else-if="isview" @click="submit('customForm')" type="primary" shape="circle" size="large"
				color="#4CB2B6" text="返回" style="width:200px">
			</u-button>
		</view>
	</view>
</template>

<script>
	import {
		createXfsssbpczl,
		getIdXfsssbpczl,
		updateXfsssbpczl
	}
	from '@/api/fire_inspetItem/index';
	import {
		takePhotos,
		NumericRule
	} from '@/utils/common.js';
	import config from '@/config'
	const baseUrlImg = config.baseUrlImg
	export default {
		data() {
			return {
				remark: '',
				contentText: {
					contentrefresh: '上传照片中',
				},
				screenHeight: this.$screenHeight,
				wheight: '',
				photograph: `${baseUrlImg}/checkActive/photograph.png`,
				dateTime: '',
				formData: {
					szxhsXz: '',
					szxhsYy: '',
					jzswxhsXz: '',
					jzswxhsYy: '',
					xfscYy: '',
					xfscXz: '',
					mhqYy: '',
					mhqGhwh: '',
					yjzmdYy: '',
					yjzmdGhwh: '',
					sszsbzYy: '',
					sszsbzGhwh: '',
					wxxfzYy: '',
					wxxfzXz: '',
					xfclYy: '',
					xfclXz: '',
					zdmhssYy: '',
					zdmhssGhwh: '',
					qtXz: '',
					reporttime: '',
					streetRepPicsDOList: [],
					descr:''
				},
				rules: {
					szxhsXz: NumericRule(),
					szxhsYy: NumericRule(),
					jzswxhsXz: NumericRule(),
					jzswxhsYy: NumericRule(),
					xfscYy: NumericRule(),
					xfscXz: NumericRule(),
					mhqYy: NumericRule(),
					mhqGhwh: NumericRule(),
					yjzmdYy: NumericRule(),
					yjzmdGhwh: NumericRule(),
					sszsbzYy: NumericRule(),
					sszsbzGhwh: NumericRule(),
					wxxfzYy: NumericRule(),
					wxxfzXz: NumericRule(),
					xfclYy: NumericRule(),
					xfclXz: NumericRule(),
					zdmhssYy: NumericRule(),
					zdmhssGhwh: NumericRule(),
					qtXz: NumericRule(),
					reporttime: [{
						required: true,
						message: '请输入日期',
						trigger: ['change', 'blur'],
					}],
				},
				isedit: false, //编辑
				isview: false, //查看
				loading: false
			}
		},
		onReady() {
			this.$refs.customForm.setRules(this.rules);
		},
		mounted() {
			uni.createSelectorQuery().in(this).select('.heigthButton').boundingClientRect(data => {
				this.wheight = data.height
			}).exec()
		},
		onLoad(option) {
			if (option.editData) {
				this.isedit = true
				this.parentId = option.editData
				this.getIdData()
				// this.formData = JSON.parse(option.editData)
			} else if (option.viewData) {
				this.isview = true
				this.parentId = option.viewData
				this.getIdData()
				// this.formData = JSON.parse(option.viewData)
			}

		},
		methods: {

			getIdData() {
				getIdXfsssbpczl({
					id: this.parentId
				}).then(response => {
					this.formData = response.data
				})
			},
			//拍照
			closeImage(val, index) {
				this.formData.streetRepPicsDOList.splice(index, 1)
			},
			photoUpload() {
				takePhotos(this)
			},
			bindDateChange(e) {
				this.dateTime = e.detail.value
				this.formData.reporttime = e.detail.value
			},
			submit(ref) {
				this.$refs[ref].validate().then(res => {
					const formList = this.formData
					Object.keys(formList).forEach(key => {
						formList[key] = formList[key] === '' ? 0 : formList[key];
					});
					formList.streetRepPicsDOList.forEach((item) => {
						// 删除除了feildname和url以外的多余字段
						Object.keys(item).forEach((key) => {
							if (key !== 'feildname' && key !== 'url' && key !== 'repid') {
								delete item[key];
							}
						});
						// 如果feildname为空，赋值为默认名称
						if (!item.feildname) {
							item.feildname = '默认名称';
						}
						if (this.isedit && !item.repid) {
							item.repid = this.parentId
						}
					});
					if (this.isedit) {
						updateXfsssbpczl(JSON.stringify(this.formData)).then(res => {
							this.$modal.msg('修改成功')
							this.isedit = false
							setTimeout(() => {
								uni.navigateBack()
							}, 400)
						})
					} else if (this.isview) {
						this.isview = false
						uni.navigateBack()
					} else {
						createXfsssbpczl(JSON.stringify(this.formData)).then(res => {
							this.$modal.msg('新增成功')
							setTimeout(() => {
								uni.navigateBack()
							}, 400)
						})
					}

				}).catch(err => {})
			}
		}
	}
</script>


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

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

	.uni-container {
		height: 100vh;
		background-color: #f5f7f9 !important;
	}

	/deep/.uni-card {
		position: relative;
		box-shadow: 0px 0px 3px 0px rgba(86, 165, 168, 0.15);
		border-radius: 30rpx;
	}

	/deep/ .uni-row {
		margin-top: 70rpx;

	}

	/deep/ .u-form-item__body__left {
		width: auto !important
	}

	.demo-uni-row {
		// margin-top: 70rpx;

		// /deep/.u-form-item {
		// 	display: flex;
		// }


		/deep/.u-form-item__body {
			flex-direction: row !important;
		}

		/deep/ .u-form-item__body__right {
			width: 230rpx !important;
		}

		// /deep/.u-border {
		// 	border: none !important;
		// 	border-bottom: 1px solid #E5E5E5 !important;
		// }

		// /deep/ .u-form-item__body__right__message {
		// 	margin-left: 20rpx !important
		// }
	}

	.julis-bottom {
		padding-bottom: 100px;

		/deep/ .u-form-item__body__left__content__label {
			color: #383838 !important;
		}

		/deep/ .u-form-item__body__right__message {
			margin-left: 20rpx !important
		}
	}

	.xf-title {
		/deep/ .u-form-item__body__left.data-v-5e7216f1 {
			width: auto !important
		}

		/deep/.u-border {
			border: none !important;
			border-bottom: 1px solid #E5E5E5 !important;
		}

	}

	.example {
		overflow-y: auto;
	}
	.beizhu{
		/deep/.u-form-item__body{
			flex-direction: column !important;
		}
		/deep/.u-form-item__body__left__content__label{
			margin-bottom: 10px
		}
	}
</style>