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

<?php

use common\helpers\ComponentHelper;
use common\helpers\AddonHelper;

ComponentHelper::loadComponentView('single-link-text-preview', AddonHelper::getAddonRootPath('SmartForm') . 'backend/views/components/formDiy/common/single-link-text');
ComponentHelper::loadComponentView('multi-text-preview', AddonHelper::getAddonRootPath('SmartForm') . 'backend/views/components/formDiy/common/multi-text');
ComponentHelper::loadComponentView('id-card-preview', AddonHelper::getAddonRootPath('SmartForm') . 'backend/views/components/formDiy/common/id-card');
ComponentHelper::loadComponentView('drow-box-preview', AddonHelper::getAddonRootPath('SmartForm') . 'backend/views/components/formDiy/common/drow-box');
ComponentHelper::loadComponentView('checked-tool-preview', AddonHelper::getAddonRootPath('SmartForm') . 'backend/views/components/formDiy/common/checked-tool');
ComponentHelper::loadComponentView('radio-tool-preview', AddonHelper::getAddonRootPath('SmartForm') . 'backend/views/components/formDiy/common/radio-tool');
ComponentHelper::loadComponentView('upload-photo-preview', AddonHelper::getAddonRootPath('SmartForm') . 'backend/views/components/formDiy/common/upload-photo');
ComponentHelper::loadComponentView('date-tool-preview', AddonHelper::getAddonRootPath('SmartForm') . 'backend/views/components/formDiy/common/date-tool');
ComponentHelper::loadComponentView('date-range-preview', AddonHelper::getAddonRootPath('SmartForm') . 'backend/views/components/formDiy/common/date-range');
ComponentHelper::loadComponentView('time-tool-preview', AddonHelper::getAddonRootPath('SmartForm') . 'backend/views/components/formDiy/common/time-tool');
ComponentHelper::loadComponentView('time-range-preview', AddonHelper::getAddonRootPath('SmartForm') . 'backend/views/components/formDiy/common/time-range');
ComponentHelper::loadComponentView('city-chose-preview', AddonHelper::getAddonRootPath('SmartForm') . 'backend/views/components/formDiy/common/city-chose');
?>
<template id="form-diy-model">
	<div class="forms_model_body_box">
		<div v-for="(r,ri) in toolList" :key="ri">
			<components :is="getName(r)" :active-item="r" :bg="bg" :text-color="textColor"></components>
		</div>
	</div>
</template>
<script>
	Vue.component('form-diy-model', {
		template: '#form-diy-model',
		props: {
			toolList: {
				type: Array,
				default: []
			},
			activeItem: {
				type: Object,
				default: function() {
					return {}
				}
			}
		},
		computed: {
			bg() {
				if (this.activeItem.computedStyle) {
					return this.activeItem.computedStyle.tempBg ? this.activeItem.computedStyle.tempBg : '#fff'
				} else {
					return '#fff'
				}


			},
			textColor() {
				if (this.activeItem.computedStyle) {
					return this.activeItem.computedStyle.textColor ? this.activeItem.computedStyle.textColor : '#000'
				} else {
					return '#000'
				}

			}
		},
		methods: {
			getName(target) {
				try {
					return target.type + "-preview"
				} catch (e) {
					console.log(e);
					return ""
				}
			},

		}
	})
</script>
<style>
	.forms_model_body_box {
		width: 100%;

	}
</style>