emergencyManagement/packageA/pages/disaster/components/CreateDisaster.vue

<template>
	<uni-drawer ref="drawer" mode="left" :mask-click="false" width="85%" :maskClick='true'>
		<scroll-view class="scroll-view" scroll-y="true">
			<uni-section :title="(type==='edit'?'编辑':'新增')+'地质灾害点'" type="line"></uni-section>
			<view class="form-wrap" >
				<uni-forms ref="form" label-position="top" :rules="rules" :model="form" label-width='300px'>	
						<uni-forms-item label="地质灾害点名称"  required>
							<uni-easyinput v-model="form.dlName" placeholder="请输入地质灾害点名称" :clearable="false" />
						</uni-forms-item>													
						<uni-forms-item label="地理位置" name="dlAddress" required>
							<uni-easyinput v-model="form.dlAddress" placeholder="请输入地理位置" :clearable="false" />
						</uni-forms-item>							
						<uni-forms-item label="灾害类别" name="dlCatId" required>
							<uni-data-select  v-model="form.dlCatId" :localdata="disasterCats" placeholder="请选择入库人员" :clear="false"></uni-data-select>
						</uni-forms-item>
						<uni-forms-item label="规模等级" name="dlLevelId"  required>
							<uni-data-select  v-model="form.dlLevelId" :localdata="disasterLevels" placeholder="请选择入库类型" :clear="false"></uni-data-select>
						</uni-forms-item>
						<uni-forms-item label="威胁人数" label-position="left" required>
							<uni-easyinput v-model="form.dlPeopleNum" placeholder="请输入威胁人数" :clearable="false" />
						</uni-forms-item>						
						<uni-forms-item label="威胁房屋" >
							<uni-easyinput v-model="form.dlHouseNum"  placeholder="请输入威胁房屋"></uni-easyinput>
						</uni-forms-item>	
						<uni-card  padding="0" margin="5px 0">
							<uni-forms-item label="巡检责任人" >
								<uni-easyinput v-model="form.inspectorName"  placeholder="请输入巡检责任人"></uni-easyinput>
							</uni-forms-item>	
							<uni-forms-item label="巡检责任人电话" >
								<uni-easyinput v-model="form.inspectorPhone" type="number"  placeholder="请输入巡检责任人电话"></uni-easyinput>
							</uni-forms-item>
						</uni-card>
						<uni-card  padding="0" margin="5px 0">
							<uni-forms-item label="行政责任人" >
								<uni-easyinput v-model="form.administratorName"  placeholder="请输入行政责任人"></uni-easyinput>
							</uni-forms-item>	
							<uni-forms-item label="行政责任人电话" >
								<uni-easyinput v-model="form.administratorPhone" type="number"  placeholder="请输入行政责任人电话"></uni-easyinput>
							</uni-forms-item>
						</uni-card>						
						<uni-card  padding="0" margin="5px 0">
							<uni-forms-item label="技术责任人" >
								<uni-easyinput v-model="form.technicianName"  placeholder="请输入技术责任人"></uni-easyinput>
							</uni-forms-item>	
							<uni-forms-item label="技术责任人电话" >
								<uni-easyinput v-model="form.technicianPhone" type="number"  placeholder="请输入技术责任人电话"></uni-easyinput>
							</uni-forms-item>
						</uni-card>													
						<uni-forms-item label="备注说明">
							<uni-easyinput type="textarea" :maxlength="500" v-model="form.remark" placeholder="请输入备注说明" autoHeight ></uni-easyinput>
							<view class="word-limit">{{form.remark.length||0}}/500</view>
						</uni-forms-item>
				</uni-forms>
				<view class="handle-container">
					<button class="save" type="primary" @click="onSubmit">保存</button>
					<button class="cancel" type="default" @click="close">取消</button>
				</view>
			</view>	
		</scroll-view>
	</uni-drawer>
</template>

<script>
	import disasterApi from '@/api/disaster.js'	
	export default{
		name:"CreateDisaster",
		computed:{
			accountInfo(){
				let accountInfo=uni.getStorageSync('accountInfo')
				if(!accountInfo) return {}
				return accountInfo
			},			
			disasterLevels(){
				let disasterLevels=this.levels
				//uni.getStorageSync('disasterLevels')
				if(!disasterLevels)return []
				return disasterLevels.map(item=>{
					return{
						value:item.disasterLevelId,
						text:item.disasterLevelTitle
					}
				})
			},	
			disasterCats(){
				let disasterCats=this.cats
				if(!disasterCats)return []
				return disasterCats.map(item=>{
					return{
						value:item.disasterCatId,
						text:item.disasterCatTitle
					}
				})
			}
		},
		props:{
			cats:{
				type:Array,
				default:()=>[]
			},
			levels:{
				type:Array,
				default:()=>[]
			}
		},
		data(){
			return{
				type:undefined,
				rules:{
					dlCatId:{
						rules:[
							{
								required: true,
								errorMessage:"请选择灾害类别"
							}					
						],
						validateTrigger:'submit'
					},
					dlLevelId:{
						rules:[
							{
								required: true,
								errorMessage:"请选择规模等级"
							}					
						],
						validateTrigger:'submit'
					}
				},
				form:{
					ocId: 0,
					groupId: 0,	
					dlId: 0,
					dlName: '',
					dlAddress: '',
					dlCatId: 1,
					dlLevelId: 1,
					dlPeopleNum: 0,
					dlHouseNum: 0,
					inspectorName: '',
					inspectorPhone: '',
					administratorName: '',
					administratorPhone: '',
					technicianName: '',
					technicianPhone: '',
					remark: ''
				}
			}
		},
		methods:{
			resetForm(){
				this.form={
					ocId: 0,
					groupId: 0,	
					dlId: 0,
					dlName: '',
					dlAddress: '',
					dlCatId: 1,
					dlLevelId: 1,
					dlPeopleNum: 0,
					dlHouseNum: 0,
					inspectorName: '',
					inspectorPhone: '',
					administratorName: '',
					administratorPhone: '',
					technicianName: '',
					technicianPhone: '',
					remark: ''
				}
			},
			onSubmit(){
				this.$refs.form.validate().then(res=>{
					let submitFx=this.type==='create'?disasterApi.createDisasterLocation:disasterApi.updateDisasterLocation
					this.form.ocId= this.accountInfo.ocId,
					this.form.groupId= this.accountInfo.groupId
					submitFx(this.form).then(()=>{
						uni.showToast({
							icon:"none",
							title:"成功！！"
						})
						this.$emit('success')
						this.close();
					})

				}).catch(err =>{
					uni.showToast({
						icon:"none",
						title:"请检查填写信息！"
					})
				})
			},
			show(type,item){
				this.resetForm()
				this.form={...this.form,...item}
				this.type=type
				this.$refs.drawer.open()
			},
			close(){
				this.$refs.drawer.close()
			}
		}
	}
</script>
<style lang="scss" scoped>
	.scroll-view {
		height: 100%;
		padding: 20rpx;
		box-sizing: border-box;
		.form-wrap{
			padding:40rpx 20rpx;
			.handle-container{
				display: flex;
				justify-content: center;
				align-items: center;
				button{
					width: 160rpx;
					padding: 20rpx 16rpx;
					line-height: 1;
					font-size: 28rpx;
					&.save{
						background-color: #007aff;
					}
				}
			}
			.word-limit{
				text-align: right;
				padding: 10rpx 0;
				color: #999;
				font-size: 26rpx;
			}
		}
	}
</style>