realty/virgo.wzfrontend/console/src/components/common/projectItem.vue

<template>
	<el-form :model="formBox" label-position="top">
		<el-form-item label="单位工程">
			<el-select v-model="formBox.projectItemId" placeholder="请选择单位工程" @change="changeProjectItem">
				<el-option v-for="item in projectItemList" :key="item.id" :label="item.name" :value="item.id">
				</el-option>
			</el-select>
		</el-form-item>
		<el-form-item label="具体位置">
			<el-select v-model="formBox.projectItemTargetId" placeholder="请选择具体位置" @change="changeRoom">
				<el-option v-for="item in projectItemTargetList" :key="item.id" :label="item.name" :value="item.id">
				</el-option>
			</el-select>
		</el-form-item>
	</el-form>
</template>

<script>
	import {
		getProjectDetailById,
		getProjectItemTargetList,
		getRoomList
	} from '@/httpApi/space'
	export default {
		props: ['form', 'room'],
		data() {
			return {
				formBox: {
					projectItemId: '',
					projectItemTargetId: '',
					projectItemTargetRoomId: ''
				},
				projectItemList: [],
				projectItemTargetList: [],
				roomList: []
			}
		},
		created() {
			if (this.form.projectItemId) this.initData(this.form)
			this.init();
		},
		methods: {
			init() {
				this.projectItemList = [];
				this.projectItemTargetList = [];
				getProjectDetailById(this.$store.getters.organization.id, this.$store.getters.project.id).then(res => {
					if (res.state) {
						this.projectItemList = res.data.projectItemList
					}
				})
			},
			changeProjectItem() {
				this.formBox.projectItemTargetId = '';
				this.projectItemTargetList = [];
				this.formBox.projectItemTargetRoomId = '';
				this.roomList = [];
				getProjectItemTargetList(this.formBox.projectItemId).then(res => {
					if (res.state) {
						this.projectItemTargetList = res.data;
					}
				})
			},
			changeRoom() {
				if (this.room) return;
				this.formBox.projectItemTargetRoomId = '';
				this.roomList = [];
				getRoomList(this.formBox.projectItemTargetId).then(res => {
					if (res.state) {
						this.roomList = res.data;
					}
				})
			},
			returnItem() {
				return {
					projectItem: this.projectItemList.filter(node => node.id === this.formBox.projectItemId)[0] || {},
					projectItemTarget: this.projectItemTargetList.filter(node => node.id === this.formBox
						.projectItemTargetId)[0] || {},
					projectItemTargetRoom: this.roomList.filter(node => node.id === this.formBox.projectItemTargetRoomId)[
						0] || {}
				}
			},
			initData(val) {
				if (val.projectItemId) {
					this.formBox.projectItemId = val.projectItemId;
					if (val.projectItemId) {
						getProjectItemTargetList(this.formBox.projectItemId).then(res => {
							if (res.state) {
								this.formBox.projectItemTargetId = val.projectItemTargetId;
								this.projectItemTargetList = res.data;
								if (res.data.length === 0) this.formBox.projectItemTargetId = '';
								if (val.projectItemTargetId) {
									getRoomList(this.formBox.projectItemTargetId).then(res => {
										if (res.state) {
											this.formBox.projectItemTargetRoomId = val
												.projectItemTargetRoomId;
											this.roomList = res.data;
											if (res.data.length === 0) this.formBox
												.projectItemTargetRoomId = '';
										}
									})
								}
							}
						})
					}
				}
			}
		},
		watch: {
			form(val) {
				this.initData(val);
			}
		},
	}
</script>

<style lang="scss">
	.project-item-change {
		width: 100%;
	}
</style>