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

<template>
	<div>
		<common @asynCallBack="asynCallBack"></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>
				</form>
			</div>
			<div class="mui-content-padded vongi-qingjiadt">
				<form class="mui-input-group">
					<div v-for="(item,index) in structureNameList" 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>
	</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: '',
					personId: '',
					companyId: '',
					companyName: '请选择',
					companyStructureId: '',
					//最终选择的数据
					selectCompanyStructureList: [],
					address: '',
					idCard: '',
					faceImageUrl: ''
				},

				isLoading: false,

				structureList: [],
				structureNameList: [],
			}
		},
		created() {
			this.subForm = this.register_form_data;
		},
		methods: {
			//获取公司部门列表
			getStructureList() {
				this.isLoading = true;
				API_Person.getCompanyStructureList(this.subForm.companyId).then(response => {
					this.isLoading = false;

					Vue.set(this.structureList, 0, response.structureInfoList)
					this.structureNameList = response.structureNameList;
				}).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() {
				//设置最后一个id
				let lastIndex = this.subForm.selectCompanyStructureList.length;
				let lastItem = this.subForm.selectCompanyStructureList[lastIndex - 1];
				//只有当选择的数据长度等于返回的总长度才赋值通过
				if (lastIndex == this.structureNameList.length) {
					this.subForm.companyStructureId = lastItem ? lastItem.id : '';
				}
				if (!this.subForm.companyStructureId && this.structureNameList.length > 0) {
					mui.toast('请选择' + this.structureNameList[lastIndex]);
					return false;
				} else {
					return true;
				}
			},
			//下一步
			nextStep() {
				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() {
			//获取公司部门列表
			this.getStructureList();
		},
		destroyed() {

		},
		computed: {
			...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>
</style>