qimall/addons/SmartForm/backend/views/components/formDiy/form-diy-data.php

<?php

	use common\helpers\ComponentHelper;
	use common\helpers\AddonHelper;
	ComponentHelper::loadComponentView('single-link-text-data', AddonHelper::getAddonRootPath('SmartForm') . 'backend/views/components/formDiy/common/single-link-text');
	ComponentHelper::loadComponentView('multi-text-data', AddonHelper::getAddonRootPath('SmartForm') . 'backend/views/components/formDiy/common/multi-text');
	ComponentHelper::loadComponentView('id-card-data', AddonHelper::getAddonRootPath('SmartForm') . 'backend/views/components/formDiy/common/id-card');
	ComponentHelper::loadComponentView('drow-box-data', AddonHelper::getAddonRootPath('SmartForm') . 'backend/views/components/formDiy/common/drow-box');
	ComponentHelper::loadComponentView('checked-tool-data', AddonHelper::getAddonRootPath('SmartForm') . 'backend/views/components/formDiy/common/checked-tool');
	ComponentHelper::loadComponentView('radio-tool-data', AddonHelper::getAddonRootPath('SmartForm') . 'backend/views/components/formDiy/common/radio-tool');
	ComponentHelper::loadComponentView('upload-photo-data', AddonHelper::getAddonRootPath('SmartForm') . 'backend/views/components/formDiy/common/upload-photo');
	ComponentHelper::loadComponentView('date-tool-data', AddonHelper::getAddonRootPath('SmartForm') . 'backend/views/components/formDiy/common/date-tool');
	ComponentHelper::loadComponentView('time-tool-data', AddonHelper::getAddonRootPath('SmartForm') . 'backend/views/components/formDiy/common/time-tool');
	ComponentHelper::loadComponentView('date-range-data', AddonHelper::getAddonRootPath('SmartForm') . 'backend/views/components/formDiy/common/date-range');
	ComponentHelper::loadComponentView('time-range-data', AddonHelper::getAddonRootPath('SmartForm') . 'backend/views/components/formDiy/common/time-range');
	ComponentHelper::loadComponentView('city-chose-data', AddonHelper::getAddonRootPath('SmartForm') . 'backend/views/components/formDiy/common/city-chose');	
?>
<template id="form-diy-data">
	<div class="date_diy_form_box">
		<div class="data_item_ui_box">
			<components :is="getName(activeItem)" :active-item="activeItem" @update="update"></components>
		</div>
	</div>
</template>

<script>
	Vue.component('form-diy-data',{
		template: '#form-diy-data',
		props:{
			activeItem:{
				type:Object,
				default:{}
			}
		},
		data(){
			return{
				item:{
					type:''
				}
			}
		},
		// watch:{
		// 	activeItem(newVal,oldVal){
		// 		console.log(newVal)
		// 		this.item = newVal
		// 	}
		// },
		methods:{
			getName(target) {
			    try {
					console.log('target',target)
					if(target.type === undefined){
						return ""
					}
			        return target.type + "-data"
			    } catch (e) {
			        console.log(e);
			        return ""
			    }
			},
			update(e){
				this.$emit('update',e)
			}
		}
	})
</script>

<style scoped>
	.data_title_style_box{
		    border-bottom: 5px solid #f6f7f9;
		    padding: 20px 23px;
		    font-size: 12px;
	}
	.data_label_box{
		line-height: 1;
		    color: #47565d;
		    font-weight: bolder;
		    margin-bottom: 20px;
	}
	.date_diy_form_box{
		width: 335px;
		height: 80vh;
		background: #ffffff;
		overflow: hidden;
	}
	.data_item_ui_box{
		width: 100%;
		height: 80vh;
		overflow-y: auto;
	}
</style>