PropertyApp/pages/room/add.vue

<template>
	<view class="" >
		<u-toast ref="uToast"/>
		<view class="bg-white" style="padding: 10rpx 30rpx;margin: 20rpx;border-radius: 12rpx;">
			<u-form :label-style="labelStyle" label-width="150" :model="form" ref="uForm">
				<u-form-item label="房间名称" :required="true"><u-input v-model="form.name" placeholder="请输入房间名称"/></u-form-item>
				<u-form-item v-if="!$isEmpty(form.id)" label="门牌号" :required="true"><u-input v-model="form.houseNumber" placeholder="请输入门牌号"/></u-form-item>
				<u-form-item label="所属小区" :required="true">
					<u-input v-if="$isEmpty(form.id)"  type="select" :select-open="residentialShow" v-model="residentialName"  placeholder="请选择小区" @click="residentialShow=true"></u-input>
					<u-input v-else   disabled v-model="form.residentialName" ></u-input>
				</u-form-item>
				<u-form-item label="所属楼栋" :required="true">
					<!-- 新增 -->
					<u-input v-if="$isEmpty(form.id)"  type="select" :select-open="buildingShow" v-model="buildingName"  placeholder="请选择小区" @click="showBuilding"></u-input>
					<!-- 修改 -->
					<u-input v-else   disabled v-model="form.buildingName" ></u-input>
				</u-form-item>
				<u-form-item label="所属单元" :required="true">
					<u-input v-if="$isEmpty(form.id)"  v-model="unitName" type="select" :select-open="unitShow"  placeholder="请选择单元" @click="showUnit"></u-input>
					<u-input v-else v-model="form.unitName" disabled ></u-input>
				</u-form-item>
				<u-form-item label="面积">
					<u-input v-model="form.area" type="number" placeholder="请填写房间面积"></u-input>
				</u-form-item>
				<u-form-item label="户型">
					<u-input v-model="form.houseType"  placeholder="请填写房间户型"></u-input>
				</u-form-item>
				<u-form-item label="楼层">
					<u-input v-model="form.floorName"  placeholder="请填写房间楼层"></u-input>
				</u-form-item>
				<u-form-item label="装修">
					<u-input v-model="form.ornament"  placeholder="请填写房间装修"></u-input>
				</u-form-item>
				<u-form-item label="朝向">
					<u-input v-model="form.orientation"  placeholder="请填写房间朝向"></u-input>
				</u-form-item>
				<u-form-item  label="序号">
					<u-number-box :min="1" :max="100" solt="right" v-model="form.serial" ></u-number-box>
				</u-form-item>
				<u-form-item label="备注" label-position="top">
					<u-input type="textarea" height="300" maxlength="300" v-model="form.remark"  placeholder="请输入300字以内的备注介绍"></u-input>
				</u-form-item>
			</u-form>
		</view>
		
		<!-- 小区 -->
		<u-popup  border-radius="60" height="60%"  mode="bottom" v-model="residentialShow">
			<view class="fixed cu-bar search bg-white">
				<view class="search-form round">
					<text class="cuIcon-search"></text>
					<u-input style="width: 90%;" v-model="residentialKeyword" type="text" :adjust-position="false" placeholder="请输入关键字搜索" confirm-type="search"/>
				</view>
			</view>
			<scroll-view v-if="!$isEmpty(residentialList)"  style="padding-top: 110rpx;height: 100%;" :scroll-y="true" >
				<view @click="residentialConfirm(item)" hover-class="hoverClass" class="text-center padding-30 solid-bottom"  v-for="(item,index) in residentialList" :key="index">
					<text>{{item.name}}</text>
				</view>
				<u-divider v-if="residentialList.length>=10" height="80">只显示十条数据</u-divider>
			</scroll-view>
			<u-empty v-else name="search"></u-empty>
		</u-popup>
		
		
		<!-- 楼栋 -->
		<u-popup  border-radius="60" height="60%"  mode="bottom" v-model="buildingShow">
			<view class="fixed cu-bar search bg-white">
				<view class="search-form round">
					<text class="cuIcon-search"></text>
					<u-input style="width: 90%;" v-model="buildingKeyWord" type="text" :adjust-position="false" placeholder="请输入关键字搜索" confirm-type="search"/>
				</view>
			</view>
			<scroll-view v-if="!$isEmpty(buildingList)"  style="padding-top: 110rpx;height: 100%;" :scroll-y="true" >
				<view @click="buildingConfirm(item)" hover-class="hoverClass" class="text-center padding-30 solid-bottom"  v-for="(item,index) in buildingList" :key="index">
					<text>{{item.name}}</text>
				</view>
				<u-divider v-if="buildingList.length>=10" height="80">只显示十条数据</u-divider>
			</scroll-view>
			<u-empty v-else name="search"></u-empty>
		</u-popup>
		<u-picker @confirm="unitConfirm" range-key="name" :range="unitList" v-model="unitShow" mode="selector"></u-picker>
		
		<view @click="confirm" class="bottom-bar" >
			<view class="cu-btn bg-blue radius" style="width: 70%;height: 84rpx;">
				提交
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: '',
	data() {
		return {
			labelStyle:{
				"fontWeight":"600"
			},
			form:{
				name:'',
				residentialId:'',
				unitId:'',
				houseType:'',
				floor:'',
				orientation:'',
				serial:1,
				remark:''
			},
			//小区
			residentialName:'',
			residentialShow:false,
			residentialKeyword:'',
			residentialList:[],
			//楼栋
			buildingName:'',
			buildingShow:false,
			buildingKeyWord:'',
			buildingList:'',
			//单元
			unitName:'',
			unitList:[],
			unitShow:false
		};
	},
	onLoad(options) {
		//加载小区数据
		this.fetchResidentialList()
		if (!this.$isEmpty(options.id)) {
			this.form.id=options.id
			this.fetchDataDetail()
			uni.setNavigationBarTitle({
				title:"修改房间信息"
			})
		}
	},
	watch:{
		//小区
		residentialKeyword(){
			let that=this
			if (this.timer){
				clearTimeout(this.timer)
			}
			this.timer = setTimeout(() => {
				that.residentialList=[]
				that.getResidentailList()
			}, 500)
		},
		//楼栋
		buildingKeyWord(){
			let that=this
			if (this.timer){
				clearTimeout(this.timer)
			}
			this.timer = setTimeout(() => {
				that.buildingList=[]
				let params={
					residentialId:that.form.residentialId,
					name:that.buildingKeyWord
				}
				that.fetchBuildingList(params)
			}, 500)
		},
	},
	methods:{
		fetchDataDetail(){
			this.$api.room.pageBycondition({id:this.form.id}).then(res=>{
				this.form=res.list[0]
			})
		},
		
		//修改房间时，加载房间的数据
		/**
		 * 获取小区数据列表
		 */
		fetchResidentialList(){
			let params={
				isSelect: true,
				name:this.residentialKeyword
			}
			this.$api.residential.page(params).then(res=>{
				this.residentialList = res.list
			})
		},
		//点击选择小区时
		residentialConfirm(item){
			//赋值给提交的数据
			this.form.residentialId=item.id
			//赋值给回显的名称
			this.residentialName=item.name
			//加载楼栋信息
			this.buildingList=[]
			let params={
				residentialId:item.id
			}
			this.fetchBuildingList(params)
			this.residentialShow=false
		},
		showBuilding(){
			if (this.$isEmpty(this.residentialName)) {
				this.$showToast('请先选择小区','warning')
				return
			}
			this.buildingShow=true
		},
		showUnit(){
			if (this.$isEmpty(this.buildingName)) {
				this.$showToast('请先选择楼栋','warning')
				return
			}
			this.unitShow=true
		},
		/**
		 * 获取楼栋列表
		 * @param {Object} 
		 */
		fetchBuildingList(params){
			this.$api.building.page(params).then(res=>{
				this.buildingList=res.data.records
			})
		},
		/**
		 * 选择楼栋
		 */
		buildingConfirm(item){
			// 赋值给提交的数据
			this.form.buildingId=item.id
			//数据回显
			this.buildingName=item.name
			//加载单元列表
			this.fetchUnitList()
			this.buildingShow=false
		},
		/**
		 * 获取单元列表
		 */
		fetchUnitList(){
			let params={
				buildingId:this.form.buildingId,
				residentialId:this.form.residentialId
			}
			this.$api.unit.page(params).then(res=>{
				this.unitList = res.list
			})
		},
		/**
		 * 点击选择单元
		 * @param {Object} 
		 */
		unitConfirm(e){
			console.log(e);
			//赋值给提交的数据
			this.form.unitId=this.unitList[e[0]].id
			//赋值给回显的名称
			this.unitName=this.unitList[e[0]].name
			this.unitShow=false
		},
		confirm(){
			if (this.$isEmpty(this.form.name)) {
				this.$u.toast('请输入房间名称')
				return
			}
			if (this.$isEmpty(this.form.residentialId)) {
				this.$u.toast("请选择小区")
				return
			}
			if (this.$isEmpty(this.form.buildingId)) {
				this.$u.toast("请选择楼栋")
				return
			}
			if (this.$isEmpty(this.form.unitId)) {
				this.$u.toast('请选择单元')
				return
			}
			console.log(this.form);
			if (this.$isEmpty(this.form.id)) {
				this.$api.room.add(this.form).then(res=>{
					if (res.data) {
						this.$dialog.showModal('操作成功',false).then(res=>{
							uni.navigateBack()
						})
					}else{
						this.$u.toast('操作失败')
					}
				})
				//新增
			}else{
				let {oldId,orgPosition,...params}=this.form
				//修改
				this.$api.room.update(params).then(res=>{
					if (res.data==true) {
						this.$dialog.showModal('操作成功',false).then(res=>{
							uni.navigateBack()
						})
					}else{
						this.$u.toast('操作失败')
					}
				})
			}
		}
		

	}
};
</script>

<style lang="scss" scoped>
	page{
		background-color: #FFFFFF;
	}
</style>