jp-xpgj-GA-file/src/projects/home/views/Register/Residence/Step3.vue

<template>
	<div>
		<common @asynCallBack="asynCallBack" :projectCheck="false"></common>
		<top-header :pageTitle="pageTitle"></top-header>

		<div class="mui-content">
			<div class="mui-content-padded vongi-qingjiadt">
				<form class="mui-input-group">
					<div class="mui-input-row">
						<label>所在小区</label>
						<span v-text="subForm.companyName"></span>
					</div>
					<div class="mui-input-row">
						<label>您的身份</label>
						<span v-text="subForm.roleName"></span>
					</div>
					<div class="mui-input-row" @click="openPopover">
						<label>选择房号</label>
					 
						<span   id="openPopover" class="address">{{subForm.structureName?subForm.structureName:'点击选择房号'}}</span>
						
					</div>
				</form>
			</div>
			<div id="popover" class="mui-popover">
				
				<div class="mui-scroll-wrapper">
					
					<div class="mui-scroll">
						<div class="address-title">
							<h4>请选择房号</h4>
							<i class="mui-icon mui-icon-closeempty" @click="openPopover"></i>
						</div>
						<div class="address-table">
							<ul>
								<li v-for="(item,i) in selectDataJson"
								 :class="{active:i==selectIndex}" 
								 :key="i"  @click="changeIndex(i)">{{item.name}}</li>
							 
							</ul>
						</div>
							<!--这里放置真实显示的DOM内容-->
							<ul class="mui-table-view">
								<li class="mui-table-view-cell " v-for="(item,i) in sz1" 
								@click="clickLi(item)"
								
								:key="i">{{item.name}}</li>
							 
							</ul>
						</div>
					</div>
				
			</div>
			
			<div class="mui-content-padded vongi-qingjiadt" v-if="false">
				<form class="mui-input-group">
					<div v-for="(item,index) in structureNameList" :key="index" class="mui-input-row">
						<label v-text="item"></label>
						<button @click="selectStructure(index)" class="mui-btn mui-btn-block mui-navigate-right mui-ellipsis" type='button'
						 style="width:65%">
							{{subForm.selectCompanyStructureList[index]?subForm.selectCompanyStructureList[index].name:'请选择'}}
						</button>
					</div>
				</form>
			</div>
			<div class="vongi-btn vongi-login-btn">
				<button class="mui-btn mui-btn-primary" @click="nextStep">
					下一步
				</button>
			</div>
		</div>
		<loading :visible="isLoading"></loading>
	</div>
</template>

<script>
	import Vue from 'vue'
	require('$project/assets/js/mui.picker.min.js');
	import * as API_Person from '@/apis/person'
	import Common from '$project/components/Common.vue'
	import Loading from '$project/components/Loading.vue'
	import TopHeader from '$project/components/TopHeader.vue'
	import {
		mapGetters,
		mapMutations
	} from 'vuex'
	import * as types from '$project/store/mutation-types'
	export default {
		name: 'RegisterResidenceStep3',
		components: {
			Common,
			Loading,
			TopHeader
		},
		data() {
			return {
				pageTitle: '注册',

				subForm: {
					sceneId: '',
					sceneName: '',
					personRoleId: '',
					roleName: '',
					name: '',
					telephone: '',
					structureName:"",
					personId: '',
					companyId: '',
					companyName: '请选择',
					companyStructureId: '',
					
					//最终选择的数据
					selectCompanyStructureList: [],
					address: '',
					idCard: '',
					faceImageUrl: '',
					popularizePersonId: ''
				},

				isLoading: false,

				structureList: [],
				structureNameList: [],
				dataJson:[],
				selectIndex:0,
				selectDataJson:[
					{
						code:'',
						name:'请选择'
					},{
						code:'',
						name:'请选择'
					},{
						code:'',
						name:'请选择'
					}
				]
			}
		},
		created() {
			this.subForm = this.register_form_data;
		},
		methods: {
			openPopover(){
				mui('#popover').popover('toggle');
				mui(".mui-scroll-wrapper").scroll()
			},
			clickLi(item){
			//	this.subForm.companyStructureId=''
				var bl=true;
				if(this.selectDataJson[this.selectIndex].code==item.code){
					bl=false;
				}
				this.selectDataJson[this.selectIndex]=item
				
				if(this.selectIndex+1<this.selectDataJson.length){
					
					if(bl){
						var index=this.selectIndex+1;
						
						for(var  i=index; i< this.selectDataJson.length;i++){
							
							this.selectDataJson[i]={
								code:'',
								name:'请选择'
							}
						}
						this.$forceUpdate();
					}
					
					this.selectIndex++
				}else{
					this.openPopover()
				}
				this.subForm.structureName=""
				this.selectDataJson.forEach(item=>{
					if(item.code!=''){
						this.subForm.structureName=item.name;
					}
					
				})
				
				this.$forceUpdate();
			},
			changeIndex(i){
					
				if(i==this.selectIndex||i==0){
					this.selectIndex=i;
					return
				}
				
				if(this.selectDataJson[i-1].code==""){
					mui.toast('请先选择上一项');
				}else{
					this.selectIndex=i;
				}
			},
			//获取公司部门列表
			getStructureList() {
				this.isLoading = true;
				API_Person.communityList({
				communityId:	this.subForm.companyId
				}).then(response => {
					this.isLoading = false;
					this.dataJson=response.list;
					 
				}).catch(error => {
					this.isLoading = false;
					mui.toast(error);
				})
			},
			//选择部门
			selectStructure(index) {
				if (this.structureList[index]) {
					var structureList = [];
					for (var i = 0; i < this.structureList[index].length; i++) {
						structureList.push({
							value: this.structureList[index][i]['id'],
							text: this.structureList[index][i]['structureName'],
						})
					}
					var _this = this;
					var picker = new mui.PopPicker();
					picker.setData(structureList);
					picker.show(function(selectItems) {
						_this.getStructureListNext(index);
						//设置保存数据
						Vue.set(_this.subForm.selectCompanyStructureList, index, {
							id: selectItems[0].value,
							name: selectItems[0].text
						})
					})
				} else {
					mui.toast('请选择' + this.structureNameList[index - 1]);
				}
			},
			//获取下一层机构数据
			getStructureListNext(index) {
				//如果有下一层数据就去读取
				if (this.structureNameList[index + 1]) {
					this.isLoading = true;
					API_Person.getCompanyStructureByName(this.subForm.companyId, this.structureNameList[index + 1]).then(response => {
						this.isLoading = false;

						Vue.set(this.structureList, index + 1, response)
					}).catch(error => {
						this.isLoading = false;
						mui.toast(error);
					})
				}
			},
			//检测表单
			checkForm() {
				 
				if (!this.subForm.companyStructureId ) {
					mui.toast('请选择房号');
					return false;
				} else {
					return true;
				}
			},
			//下一步
			nextStep() {
				this.subForm.companyStructureId=this.selectDataJson[this.selectDataJson.length-1].code
				//this.subForm.companyStructureName==this.selectDataJson[this.selectDataJson.length-1].name
				if (this.checkForm()) {
					this.set_register_form_data(this.subForm);
					this.$router.push({
						name: 'RegisterResidenceStep4'
					})
				}
			},


			asynCallBack() {

			},
			...mapMutations({
				set_register_form_data: types.SET_REGISTER_FORM_DATA,
			})
		},
		mounted() {
			mui(".mui-scroll-wrapper").scroll()
			
			//获取公司部门列表
			this.getStructureList();
		},
		destroyed() {

		},
		computed: {
			sz1(){
				
				var sz=[]
				
				  
				if(this.selectIndex==0){
					 this.dataJson.forEach(item=>{
						 sz.push({
							 code:item.id,
							 name:item.name,
							 children:item.children
						 })
					 })			 
				}else{
					//console.log(this.selectDataJson[this.selectIndex])
					this.selectDataJson[this.selectIndex-1].children.map(item=>{
						if(!item.children){
							item.children=[]
						}
						 sz.push({
							 code:item.id,
							 name:item.name,
							 children:item.children
						 })
					 })	
				}
				return sz;
			},
			...mapGetters({
				openId: 'wx_openid',
				token: 'token',
				person_data: 'person_data',
				person_popedom: 'person_popedom',
				register_form_data: 'register_form_data'
			})
		}
	}
</script>

<style scoped src="$project/assets/css/xpwyfyy.css"></style>
<style src="$project/assets/css/iconfont.css"></style>
<style src="$project/assets/css/mui.picker.min.css"></style>
<style lang="scss" scoped>
	 .mui-popover {
	 	.mui-table-view{
	 		max-height: 500px;
	 	}
	 	.mui-table-view-cell{
	 		position: relative;
	 	}
	 	.select::before{
	 		content: "\e472";
	 		position: absolute;
	 		font-family: Muiicons;
	 		font-size: 30px;
	 		right: 5px;
	 		top: 10px;
	 		color:#f5b33d;
	 	}
	 }
	 .address{
	 	font-size: 15px;
	 
	 	color:#757575;
	 }
	 .address-title{
	 	padding-top:20px;
	 	text-align: center;
	 	position: relative;
	 	i{position: absolute;right: 10px;top:20px}
	 }
	 .address-table{
	 	padding: 10px;
	 	ul{
	 		overflow: hidden;
	 	}
	 	ul li{
	 		float: left;
	 		margin-right: 15px;
	 		color:#999;
	 		font-size: 14px;
			list-style:none;
	 	}
	 	.active{
	 		color:#1890ff;
	 	}
	 }
	 .mui-popover{
	 	width: 100%;
	 	left: 0!important;
	 	right: 0;
	 	bottom: 0;
	 	top:200px!important;
	 	border-radius:10px 10px 0 0;
	 }
	 .mui-popover .mui-popover-arrow{
	 	display: none;
	 }
</style>