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="住户姓名"><u-input v-model="form.name" placeholder="请输入住户姓名"/></u-form-item>
				<u-form-item  label="性别">
					<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 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="form.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-if="$isEmpty(form.id)"  type="select" :select-open="roomShow" v-model="roomName"  placeholder="请选择房间" @click="tapRoomShow"></u-input>
						<!-- 修改 -->
					<u-input v-else v-model="form.roomName" disabled ></u-input>
				</u-form-item>
				<u-form-item label="住户类型">
					<u-input  type="select" :select-open="typeShow" v-model="typeName"  placeholder="请选择房间" @click="typeShow=true"></u-input>
				</u-form-item>
				<u-form-item label="手机号">
					<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="searchShow">
			<view class="fixed cu-bar search bg-white">
				<view class="search-form round">
					<text class="cuIcon-search"></text>
					<input v-model="keyword"  :adjust-position="false" type="text" placeholder="请输入搜索关键字" confirm-type="search"></input>
				</view>
				<view @click="search" class="action">
					<button class="cu-btn bg-blue shadow-blur round">搜索</button>
				</view>
			</view>
			<scroll-view @scrolltolower="scrolltolower" style="padding-top: 110rpx;height: 100%;" :scroll-y="true" >
				<view @click="searchConfirm(item)" hover-class="hoverClass" class="text-center padding-30 solid-bottom"  v-for="(item,index) in searchList" :key="index">
					<text>{{item.name}}</text>
				</view>
			</scroll-view>
		</u-popup>
		
		<!-- 选择单元 -->
		<u-popup  border-radius="60" height="60%"  mode="bottom" v-model="searchShow1">
			<view class="fixed cu-bar search bg-white">
				<view class="search-form round">
					<text class="cuIcon-search"></text>
					<input v-model="keyword1"  :adjust-position="false" type="text" placeholder="请输入搜索关键字" confirm-type="search"></input>
				</view>
				<view @click="search1" class="action">
					<button class="cu-btn bg-blue shadow-blur round">搜索</button>
				</view>
			</view>
			<scroll-view @scrolltolower="scrolltolower1" style="padding-top: 110rpx;height: 100%;" :scroll-y="true" >
				<view @click="searchConfirm1(item)" hover-class="hoverClass" class="text-center padding-30 solid-bottom"  v-for="(item,index) in searchList1" :key="index">
					<text>{{item.name}}</text>
				</view>
			</scroll-view>
		</u-popup>
		
		<!-- 房间-->
		<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:{
				type:-1
			},
			// 性别
			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:[],
			
			//住户类型
			typeName:'', //回显
			typeShow:false,
			typeList:[
				{
					value:'0',
					label:'业主'
				},
				{
					value:'1',
					label:'成员'
				},
				{
					value:'2',
					label:'租户'
				},
			],
			
		};
	},
	onLoad(options) {
		// this.fetchSearchList()
		console.log(options.id);
		if (!this.$isEmpty(options.id)) {
			this.form.id=options.id
			uni.setNavigationBarTitle({
				title:"修改住户信息"
			})
		}
	},
	onShow() {
		if (!this.$isEmpty(this.form.id)) {
			this.form=getApp().globalData.userDetail
			console.log(this.form);
			if (this.form.sex==1) {
				this.sexValue="男"
			}else if(this.form.sex==2) {
				this.sexValue="女"
			}
			if (this.form.type==0) {
				this.typeName='业主'
			}else if (this.form.type==1) {
				this.typeName='住户'
			}else if (this.form.type==2) {
				this.typeName='租户'
			}
		}
	},
	methods:{
		// 性别
		sexConfirm(e){
			this.sexValue=e[0].label
			this.form.sex=e[0].value
		},
		
		// 小区
		/**
		 * 加载小区数据
		 */
		fetchSearchList(){
			let params={
				name:this.keyword,
				current:this.searchCurrent
			}
			this.$api.residential.showResidentialList(params).then(res=>{
				this.searchList = [...this.searchList,...res.data.records]
			})
		},
		/**
		 * 下拉加载数据
		 */
		scrolltolower(e){
			 if(this.searchList.length<this.searchCurrent*10){
			   return
			}else{
				this.searchCurrent++
				this.fetchSearchList()
			}
		},
		/**
		 * 点击选择小区
		 */
		searchConfirm(item){
			//赋值给提交的数据
			this.form.residentialId=item.id
			//赋值给回显的名称
			this.residentialName=item.name
			//加载单元数据
			this.searchList1=[]
			this.fetchSearchList1()
			this.searchShow=false
		},
		/**
		 * 确定搜索小区数据
		 */
		search(){
			this.searchList=[]
			this.fetchSearchList()
		},
		
		//单元
		showUnit(){
			if (this.$isEmpty(this.form.residentialId)) {
				this.$showToast('请先选择小区','error')
				return
			}
			this.searchShow1=true
		},
		scrolltolower1(e){
			 if(this.searchList1.length<this.searchCurrent1*10){
			   return
			}else{
				this.searchCurrent1++
				this.fetchSearchList1()
			}
		},
		fetchSearchList1(){
			let params={
				name:this.keyword1,
				current:this.searchCurrent1,
				residentialId:this.form.residentialId
			}
			this.$api.unit.showUnitList(params).then(res=>{
				this.searchList1 = [...this.searchList1,...res.data.records]
			})
		},
		searchConfirm1(item){
			//赋值给提交的数据
			this.form.unitId=item.id
			//赋值给回显的名称
			this.unitName=item.name
			//加载房间的数据
			this.fetchRoomList()
			this.searchShow1=false
		},
		search1(){
			this.searchList1=[]
			this.fetchSearchList1()
		},
		
		//房间
		fetchRoomList(){
			let params={
				residentialId:this.form.residentialId,
				unitId:this.form.unitId,
				isSelect:true
			}
			this.$api.room.getListByLikeName(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
		},
		tapRoomShow(){
			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) {
				console.log(this.form.type);
				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
				}
			}
			
			if (this.$isEmpty(this.form.id)) {
				//添加住户
				this.$api.user.add(this.form).then(res=>{
					if (res.data==true) {
						this.$dialog.showModal('操作成功',false).then(res=>{
							uni.navigateBack({
								delta:1
							})
						})
					}else{
						this.$showToast(res.msg,'error')
					}
				})
			}else{
				let params={
					id:this.form.id,
					name:this.form.name,
					roomName:this.form.roomName,
					roomId:this.form.roomId,
					type:this.form.type,
					tel:this.form.tel,
					sex:this.form.sex,
					idCard:this.form.idCard || '',
					birthPlace:this.form.birthPlace || '',
					remark:this.form.remark || ''
				}
				//编辑住户信息
				console.log(params);
				this.$api.user.update(params).then(res=>{
					if (res.data==true) {
						console.log("1111");
						this.$dialog.showModal('操作成功',false).then(res=>{
							uni.navigateBack({
								delta:1
							})
						})
					}else{
						this.$showToast('操作失败','error')
					}
				})
			}
			
			
		}
	}
};
</script>

<style lang="scss" scoped>

</style>