ybxf-security-uniapp/pagesA/fire/fire_inspetItem/add-street/streetQypczl.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="juli-bottom">
				<u-form-item label="检查单位或场所 (家)" prop="jcdwhcs">
					<u-input v-model="formData.jcdwhcs" placeholder="请输入" :disabled="isview" />
				</u-form-item>
				<view class="big-title">
					整改隐患 (处) :
				</view>
				<u-form-item label="用气部位未安装燃气泄漏报警器" prop="yqbwwazrqxlbjq" class="children-text">
					<u-input v-model="formData.yqbwwazrqxlbjq" placeholder="请输入" :disabled="isview" />
				</u-form-item>
				<u-form-item label="使用醇基燃料" prop="sycjrl" class="children-text">
					<u-input v-model="formData.sycjrl" placeholder="请输入" :disabled="isview" />
				</u-form-item>
				<u-form-item label="用气部位不能通风换气" prop="yqbwbntfhq" class="children-text">
					<u-input v-model="formData.yqbwbntfhq" placeholder="请输入" :disabled="isview" />
				</u-form-item>
				<u-form-item label="同一空间使用双气源" prop="tykjsysqy" class="children-text">
					<u-input v-model="formData.tykjsysqy" placeholder="请输入" :disabled="isview" />
				</u-form-item>
				<u-form-item label="热水器烟道未有效伸出室外" prop="rsqydwyxscsw" class="children-text">
					<u-input v-model="formData.rsqydwyxscsw" placeholder="请输入" :disabled="isview" />
				</u-form-item>
				<u-form-item label="软管超长、分管、泄露、穿越墙体或吊顶" prop="rgczfgxlcyqthdd" class="children-text">
					<u-input v-model="formData.rgczfgxlcyqthdd" placeholder="请输入" :disabled="isview" />
				</u-form-item>
				<u-form-item label="燃气具未带熄火保护装置" prop="rqjwdxhbhzz" class="children-text">
					<u-input v-model="formData.rqjwdxhbhzz" placeholder="请输入" :disabled="isview" />
				</u-form-item>
				<u-form-item label="地下室或高层民用建筑内存储、使用瓶装液化石油气" prop="dxshgcmyjznccsypzyhsyq" class="children-text">
					<u-input v-model="formData.dxshgcmyjznccsypzyhsyq" placeholder="请输入" :disabled="isview" />
				</u-form-item>
				<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>
				<view>
					<view class="paizhao">现场照片:</view>
					<view  class="paizhao-posit" v-if="!isview">
						<image :src="photograph" @click="photoUpload" class="tiantupian-photo"></image>
						<view>
							拍照上传
						</view>
					</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-street">
									<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 {
		createQypczl,
		getIdQypczl,
		updateQypczl
	}
	from '@/api/fire_inspetItem/index';
	import {
		takePhotos,
		NumericRule
	} from '@/utils/common.js';
		import config from '@/config'
		const baseUrlImg = config.baseUrlImg
	export default {
		data() {
			return {
				screenHeight: this.$screenHeight,
				wheight: '',
				photograph: `${baseUrlImg}/checkActive/photograph.png`,
				dateTime: '',
				formData: {
					jcdwhcs:'',
					yqbwwazrqxlbjq:'',
					sycjrl:'',
					yqbwbntfhq:'',
					tykjsysqy:'',
					rsqydwyxscsw:'',
					rgczfgxlcyqthdd:'',
					rqjwdxhbhzz:'',
					dxshgcmyjznccsypzyhsyq:'',
					reporttime: '',
					streetRepPicsDOList: []
				},
				rules: {
					jcdwhcs:NumericRule(),
					yqbwwazrqxlbjq:NumericRule(),
					sycjrl:NumericRule(),
					yqbwbntfhq:NumericRule(),
					tykjsysqy:NumericRule(),
					rsqydwyxscsw:NumericRule(),
					rgczfgxlcyqthdd:NumericRule(),
					rqjwdxhbhzz:NumericRule(),
					dxshgcmyjznccsypzyhsyq:NumericRule(),
					reporttime: [{
						required: true,
						message: '请输入日期',
						trigger: ['change', 'blur'],
					}],
				},
				isedit: false, //编辑
				isview: 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(){
				getIdQypczl({id:this.parentId}).then(response=>{
					this.formData=response.data
					console.log(response,'response')
				})
			},
			//拍照
			closeImage(val,index){
				this.formData.streetRepPicsDOList.splice(index, 1)
			},
			photoUpload() {
				takePhotos(this)
			},
			bindDateChange(e) {
				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
						}
					});
					console.log(formList, 'this.formData');
					if (this.isedit) {
						updateQypczl(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 {
						createQypczl(JSON.stringify(this.formData)).then(res => {
							this.$modal.msg('新增成功')
							setTimeout(() => {
								uni.navigateBack()
							}, 400)
						})
					}

				}).catch(err => {
					console.log(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;
	}
	.example{
		overflow-y: auto;
	}
</style>