realty/virgo.wzfrontend/workark/src/components/work/property/propertyFlowForm.vue

<template>
	<div class="property-flow-form">
		<el-form ref="propertyForm" :model="propertyForm" label-position="top">
			<el-form-item label="资产名称">
				<el-input type="text" v-model="propertyForm.name" placeholder="请输入资产名称"></el-input>
			</el-form-item>
			<el-form-item label="资产类别">
				<el-cascader ref="cascader" v-model="departId" :options="departList" :props="defaultProps"
					@change="changePart" placeholder="请选择资产类别">
				</el-cascader>
			</el-form-item>
			<el-form-item label="设备类型" required>
				<el-select v-model="propertyForm.type" placeholder="请选择设备类型">
					<el-option label="普通设备" :value="0"></el-option>
					<el-option label="物联网设备" :value="1"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="设计编码">
				<el-input type="text" v-model="propertyForm.designNumber" placeholder="请输入设计编码"></el-input>
			</el-form-item>
			<el-form-item label="资产编码">
				<div class="coding-text" @click="codeVisible = true">
					{{propertyForm.assetNumber || '点击生成资产编码'}}
				</div>
			</el-form-item>
			<el-form-item label="设备编码">
				<el-input type="text" v-model="propertyForm.deviceNumber" placeholder="请输入设备编码"></el-input>
			</el-form-item>
			<el-form-item label="品牌">
				<el-input type="text" v-model="propertyForm.deviceBrand" placeholder="请输入品牌"></el-input>
			</el-form-item>
			<el-form-item label="型号">
				<el-input type="text" v-model="propertyForm.deviceModel" placeholder="请输入型号"></el-input>
			</el-form-item>
			<el-form-item label="序列号">
				<el-input type="text" v-model="propertyForm.deviceSerialNumber" placeholder="请输入序列号"></el-input>
			</el-form-item>
			<el-form-item label="库房" required>
				<el-select v-model="propertyForm.godownId" placeholder="请选择库房" @change="changeGoDown">
					<el-option :label="item.name" :value="item.id" v-for="(item,index) in goDownData" :key="index">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="厂家">
				<el-input type="text" v-model="propertyForm.manufacturer" placeholder="请输入厂家"></el-input>
			</el-form-item>
			<el-form-item label="联系人">
				<el-input type="text" v-model="propertyForm.liaison" placeholder="请输入联系人"></el-input>
			</el-form-item>
			<el-form-item label="联系方式">
				<el-input type="text" v-model="propertyForm.liaisonPhone" placeholder="请输入联系方式"></el-input>
			</el-form-item>
			<el-form-item label="进场时间" required>
				<el-date-picker v-model="propertyForm.entryTime" type="date" placeholder="进场时间"
					value-format="yyyy-MM-dd">
				</el-date-picker>
			</el-form-item>
			<el-form-item label="维保记录">
				<el-input type="text" v-model="propertyForm.maintenanceRecord" placeholder="请输入维保记录"></el-input>
			</el-form-item>
			<el-form-item label="资产备注" class="hui-textarea">
				<el-input type="textarea" v-model="propertyForm.remark" placeholder="请输入资产备注" resize="none">
				</el-input>
			</el-form-item>
		</el-form>
		<el-dialog :close-on-click-modal="false" title="编码生成器" :visible.sync="codeVisible" width="900px"
			:append-to-body="true">
			<coding v-if="codeVisible" :code="propertyForm.assetNumber" @callback="callback"></coding>
		</el-dialog>
	</div>
</template>

<script>
	import {
		getDevicePartList,
		getGoDownList,
		get3DModel
	} from '@/api/property'
	const coding = () => import('@/components/work/common/coding');
	import {
		findParentIds
	} from '@/uitls'
	export default {
		props: ['flowForm'],
		data() {
			return {
				propertyForm: {
					assetNumber: '',
					attachment: '',
					designNumber: '',
					deviceBrand: '',
					deviceModel: '',
					deviceNumber: '',
					deviceSerialNumber: '',
					name: '',
					operateDeviceLevelId: 0,
					remark: '',
					type: 0,
					godownId: '',
					godownName: '',
					modelBindType: '',
					modelBindContent: '',
					manufacturer: '',
					liaison: '',
					liaisonPhone: '',
					entryTime: '',
					maintenanceRecord: ''
				},
				departList: [],
				departId: [],
				nowDepart: {},
				defaultProps: {
					children: 'children',
					label: 'name',
					value: 'id'
				},
				goDownData: [],
				modelList: [],
				codeVisible: false,
				signList: [{
					id: 1,
					name: '摄像头',
					iconPath: './assets/shexiangtou.png'
				}, {
					id: 2,
					name: '门禁',
					iconPath: './assets/menjin.png'
				}, {
					id: 3,
					name: '停车',
					iconPath: './assets/car.png'
				}, {
					id: 4,
					name: '照明',
					iconPath: './assets/zhaoming.png'
				}],
				position: {
					x: '',
					y: '',
					z: ''
				}
			}
		},
		mounted() {
			if (JSON.stringify(this.flowForm) === "{}") return this.getPartList();
			this.propertyForm = this.flowForm;
			if (this.flowForm.modelBindPosition) this.position = JSON.parse(this.flowForm.modelBindPosition);
			this.getPartList();
		},
		methods: {
			getPartList() {
				getDevicePartList(this.$store.getters.organization.id, this.$store.getters.project.id).then(res => {
					if (res.state) {
						this.departList = res.data;
						this.returnChildren(this.departList);
						if (this.propertyForm.operateDeviceLevelId) this.departId = findParentIds(this.departList,
							this.propertyForm.operateDeviceLevelId);
						if (this.nowDepart.id) this.getModel();
					}
				})
				getGoDownList({
					organizationId: this.$store.getters.organization.id,
					projectId: this.$store.getters.project.id
				}).then(res => {
					if (res.state) {
						this.goDownData = res.data;
					}
				})
			},
			returnChildren(data) {
				data.forEach(item => {
					if (item.id === this.propertyForm.operateDeviceLevelId) this.nowDepart = item;
					if (item.children && item.children.length == 0) item.children = null;
					if (item.children && item.children.length > 0) this.returnChildren(item.children);
				});
			},
			changePart() {
				this.propertyForm['operateDeviceLevelId'] = this.departId[this.departId.length - 1];
				this.nowDepart = this.$refs.cascader.getCheckedNodes(true)[0].data;
			},
			callback(type, code) {
				if (type === 'set') this.propertyForm.assetNumber = code;
				this.codeVisible = false;
			},
			changeGoDown(val) {
				this.propertyForm.godownName = this.goDownData.find(node => node.id == val).name;
			},
			getModel() {
				if (this.propertyForm.modelBindType === 2) {
					get3DModel({
						modelLevelId: this.nowDepart.modelLevelId,
						levelId: this.nowDepart.id
					}).then(res => {
						if (res.state) {
							this.modelList = res.data;
						}
					})
				}
			},
			returnForm() {
				this.propertyForm['modelBindPosition'] = JSON.stringify(this.position);
				return {
					formData: this.propertyForm,
					commonForm: {
						deviceLevelId: this.propertyForm.operateDeviceLevelId
					}
				}
			}
		},
		watch: {
			flowForm() {
				if (JSON.stringify(this.flowForm) === "{}") return;
				this.propertyForm = this.flowForm;
				this.getPartList();
				if (this.flowForm.modelBindPosition) this.position = JSON.parse(this.flowForm.modelBindPosition);
			}
		},
		components: {
			coding
		},
	}
</script>

<style lang="scss">
	.property-flow-form {
		.chart-input {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;

			.line {
				width: 10px;
			}

			.el-input__prefix {
				position: absolute;
				height: 100%;
				left: 10px;
				top: 0;
				text-align: center;
				transition: none;
			}

			.el-input {
				flex: 1;

				.el-input__inner {
					padding-left: 30px;
				}
			}
		}

	}

	.option-item {
		img {
			width: 20px;
			margin-right: 5px;
		}
	}

	.coding-text {
		border-radius: $--border-radius-base;
		border: 1px solid $--border-color-light;
		padding: 0 12px;
		height: $--input-height;
		line-height: $--input-height;
		box-sizing: border-box;
		cursor: pointer;
	}
</style>