jp-xpgj-GA-file/src/projects/home/views/Register/Pension/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.sceneName"></span>
					</div>
					<div class="mui-input-row">
						<label>您的身份</label>
						<span v-text="subForm.roleName"></span>
					</div>
				</form>
			</div>
			<!-- <div v-if="subForm.sceneId=='3' || subForm.companyId" class="mui-content-padded vongi-qingjiadt vongi-editme">
				<form class="mui-input-group">
					<div class="mui-input-row">
						<label v-text="companyLabel"></label>
						<span v-text="subForm.companyName"></span>
					</div>
					<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="mui-content-padded vongi-qingjiadt vongi-editme">
				<form class="mui-input-group">
					<div class="mui-input-row">
						<label v-text="companyLabel"></label>
						<span v-text="subForm.companyName"></span>
					</div>
					<!--居家养老状态-->
					<div class="mui-input-row">
						<label>家庭住址</label>
						<textarea v-model="subForm.address" rows="5" placeholder="请输入家庭住址"></textarea>
					</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: 'RegisterPensionStep3',
		components: {
			Common,
			Loading,
			TopHeader
		},
		data() {
			return {
				pageTitle: '注册',

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

				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() {
				/* if (this.subForm.companyId !== 0) {
					//设置最后一个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;
					}
				} else {
					if (!this.subForm.address) {
						mui.toast('请输入您的家庭住址');
						return false;
					} else {
						return true;
					}
				} */
				return true;
			},
			//下一步
			nextStep() {
				if (this.checkForm()) {
					this.set_register_form_data(this.subForm);
					this.$router.push({
						name: 'RegisterPensionStep4'
					})
				}
			},


			asynCallBack() {

			},
			...mapMutations({
				set_register_form_data: types.SET_REGISTER_FORM_DATA,
			})
		},
		mounted() {
			if (this.subForm.sceneId == '3' || this.subForm.companyId) {
				//获取公司部门列表
				this.getStructureList();
			}
		},
		destroyed() {

		},
		computed: {
			companyLabel: {
				// getter
				get: function() {
					if (this.subForm.sceneId == '3') {
						return '养老机构';
					} else if (this.subForm.sceneId == '4') {
						return '所在小区';
					} else {
						return '';
					}
				},
				// setter
				set: function(newValue) {
					console.log(newValue)
				}
			},
			...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>