PropertyApp/pages/user/add.vue

<template>
	<view >
		<u-toast ref="uToast"/>
		<view class="bg-white" style="padding: 10rpx 30rpx;margin: 20rpx;border-radius: 12rpx;">
			<u-form :label-style="labelStyle"  label-width="180" :model="form" ref="uForm">
				<u-form-item  label="住户姓名" :required="true"><u-input v-model="form.name" placeholder="请输入住户姓名"/></u-form-item>
				<u-form-item  label="性别" :required="true">
					<u-input  type="select" :select-open="sexShow" v-model="sexValue"  placeholder="请选择性别" @click="sexShow=true"></u-input>
				</u-form-item>
				
				<u-form-item label="所属小区" :required="true">
					<u-input  type="select" :select-open="residentialShow" v-model="residentialName"  placeholder="请选择小区" @click="residentialShow=true"></u-input>
				</u-form-item>
				<u-form-item label="所属楼栋" :required="true">
					<!-- 新增 -->
					<u-input   type="select" :select-open="buildingShow" v-model="buildingName"  placeholder="请选择楼栋" @click="showBuilding"></u-input>
				</u-form-item>
				<u-form-item label="所属单元" :required="true">
					<u-input  v-model="unitName" type="select" :select-open="unitShow"  placeholder="请选择单元" @click="showUnit"></u-input>
				</u-form-item>
				<u-form-item label="所属房间" :required="true">
					<u-input  type="select" :select-open="roomShow" v-model="roomName"  placeholder="请选择房间" @click="showRoom"></u-input>
				</u-form-item>
				<u-form-item label="住户类型" :required="true">
					<u-input  type="select" :select-open="typeShow" v-model="typeName"  placeholder="请选择房间" @click="typeShow=true"></u-input>
				</u-form-item>
				<u-form-item label="手机号" :required="true">
					<u-input v-model="form.tel"  placeholder="请填写手机号"></u-input>
				</u-form-item>
				<u-form-item label="证件类型">
					<text>身份证</text>
				</u-form-item>
				<u-form-item label="证件号码">
					<u-input v-model="form.idCard"  placeholder="请填写证件号码" type="idcard"></u-input>
				</u-form-item>
				<u-form-item label="籍贯">
					<u-input v-model="form.birthPlace"  placeholder="请填写籍贯"></u-input>
				</u-form-item>
				<u-form-item  label="备注" label-position="top">
					<u-input type="textarea"  placeholder="请填写备注"  v-model="form.remark" />
				</u-form-item>
			</u-form>
		</view>
		
		
		<!-- 性别 -->
		<u-select @confirm="sexConfirm" v-model="sexShow" :list="sexList"></u-select>
		
		
		<!-- 小区 -->
		<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="residentailConfirm(item)" hover-class="hoverClass" class="text-center padding-30 solid-bottom"  v-for="(item,index) in residentialList" :key="index">
					<text>{{item.label}}</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>
		<!-- 房间-->
		<u-select @confirm="roomConfirm" v-model="roomShow" :list="roomList"></u-select>
		
		<!-- 住户类型 -->
		<u-select @confirm="typeConfirm" v-model="typeShow" :list="typeList"></u-select>
		
		<view @click="confirm" style="display: flex;justify-content: center;">
			<view class="cu-btn bg-blue radius" style="width: 70%;height: 84rpx;margin: 20rpx 0;">
				提交
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: '',
	data() {
		return {
			labelStyle:{
				"fontWeight":"600"
			},
			form:{},
			// 性别
			sexValue:'', //回显
			sexShow:false,
			sexList:[
				{
					value:'1',
					label:'男'
				},
				{
					value:'2',
					label:'女'
				},
			],
			
			
			//小区
			residentialName:'',
			residentialShow:false,
			residentialKeyword:'',
			residentialList:[],
			
			
			//楼栋
			buildingName:'',
			buildingShow:false,
			buildingKeyWord:'',
			buildingList:'',
			
			
			//单元
			unitName:'',
			unitList:[],
			unitShow:false,
			
			//房间
			roomName:'', //回显
			roomShow:false,
			roomList:[],
			
			//筛选
			searchList:[],
			
			//住户类型
			typeName:'', //回显
			typeShow:false,
			typeList:[
				{
					value:'0',
					label:'业主'
				},
				{
					value:'1',
					label:'成员'
				},
				{
					value:'2',
					label:'租户'
				},
			],
			
		};
	},
	onLoad(options) {
		this.getResidentailList({isSelect:true})
	},
	watch:{
		residentialKeyword(){
			let that=this
			//节流函数
			if (this.timer){
				clearTimeout(this.timer)//阻止setTimeout函数的执行
			}
			this.timer = setTimeout(() => {
				that.residentialList=[]
				let params = {
					isSelect: true,
					name: that.residentialKeyword
				}
				this.getResidentailList(params)
			}, 500)
		},
		buildingKeyWord(){
			let that=this
			//节流函数
			if (this.timer){
				clearTimeout(this.timer)//阻止setTimeout函数的执行
			}
			this.timer = setTimeout(() => {
				that.buildingList=[]
				let params={
					residentialId:that.form.residentialId,
					name:that.buildingKeyWord
				}
				that.fetchBuildingList(params)
			}, 500)
		},
	},
	onShow() {
		
	},
	methods:{
		// 性别
		sexConfirm(e){
			this.sexValue=e[0].label
			this.form.sex=e[0].value
		},
		//获取小区列表
		getResidentailList(params){
			let list = [];
			this.$api.residential.page(params).then(res=>{
				let list=[]
				res.list.forEach(item=>{
					let obj={
						label:item.name,
						value:item.id
					}
					list.push(obj)
				})
				this.residentialList =  list;
			})
		},
		//小区确认
		residentailConfirm(res){
			this.form.residentialId=res.value
			this.residentialName=res.label
			this.residentialShow=false
			//获取楼栋列表
			let params={
				residentialId:res.value
			}
			this.fetchBuildingList(params)
			
		},
		/**
		 * 获取楼栋列表
		 * @param {Object} 
		 */
		fetchBuildingList(params){
			this.$api.building.page(params).then(res=>{
				this.buildingList=res.data.records
			})
		},
		//点击选择楼栋，获取单元列表
		buildingConfirm(res){
			this.form.buildingId=res.id
			this.buildingName = res.name
			this.buildingShow = false
			let params={
				residentialId:this.form.residentialId,
				buildingId:res.id
			}
			this.getUnitByResidentialId(params)
		},
		//楼栋
		showBuilding(){
			if (this.$isEmpty(this.form.residentialId)) {
				this.$showToast('请先选择小区','error')
				return
			}
			this.buildingShow=true
		},
		//单元
		getUnitByResidentialId(params){
			this.$api.unit.page(params).then(res=>{
				this.unitList=res.list
			})
		},
		showUnit(){
			if (this.$isEmpty(this.form.residentialId)) {
				this.$showToast('请先选择小区','error')
				return
			}
			if (this.$isEmpty(this.form.buildingId)) {
				this.$showToast('请先选择楼栋','error')
				return
			}
			this.unitShow=true
		},
		unitConfirm(index){
			this.unitName=this.unitList[index].name
			this.form.unitId=this.unitList[index].id
			this.fetchRoomList()
		},
		//房间
		fetchRoomList(){
			let params={
				unitId:this.form.unitId,
				isSelect:true
			}
			this.$api.room.pageBycondition(params).then(res=>{
				this.roomList=[]
				res.list.forEach(item=>{
					let list={
						label:item.name,
						value:item.id
					}
					this.roomList.push(list)
				})
			})
		},
		roomConfirm(e){
			this.roomName=e[0].label
			this.form.roomId=e[0].value
		},
		showRoom(){
			if (this.$isEmpty(this.form.residentialId)) {
				this.$showToast('请先选择小区','error')
				return
			}
			if (this.$isEmpty(this.form.buildingId)) {
				this.$showToast('请先选择楼栋','error')
				return
			}
			if (this.$isEmpty(this.form.unitId)) {
				this.$showToast('请先选择单元','error')
				return
			}
			this.roomShow=true
		},
		//住户类型
		typeConfirm(e){
			this.typeName=e[0].label
			this.form.type=e[0].value
		},
		confirm(){
			if (this.$isEmpty(this.form.name)) {
				this.$showToast('请输入姓名','error')
				return
			}
			if (this.$isEmpty(this.form.sex)) {
				this.$showToast('请选择性别',"error")
				return
			}
			if (this.$isEmpty(this.form.residentialId)) {
				this.$showToast('请选择小区','error')
				return
			}
			if (this.$isEmpty(this.form.unitId)) {
				this.$showToast('请选择单元','error')
				return
			}
			if (this.$isEmpty(this.form.roomId)) {
				this.$showToast('请选择房间','error')
				return
			}
			if (this.form.type==-1) {
				this.$showToast('请选择住户类型','error')
				return
			}
			if (this.$isEmpty(this.form.tel)) {
				this.$showToast('请填写手机号码','error')
				return
			}
			if (!this.$verify.phone(this.form.tel)) {
				this.$showToast('手机格式不正确','error')
				return
			}
			if (!this.$isEmpty(this.form.idCard)) {
				if (!this.$verify.idCard(this.form.idCard)) {
					this.$showToast('身份证号码不正确','error')
					return
				}
			}
			//添加住户
			this.$api.user.add(this.form).then(res=>{
				if (res.data==true) {
					this.$dialog.showModal('操作成功',false).then(res=>{
						this.$navigateBack()
					})
				}else{
					this.$showToast(res.msg,'error')
				}
			})
			
			
		}
	}
};
</script>

<style lang="scss" scoped>

</style>