qimall/addons/SmartForm/backend/views/components/diy/smart-form/preview.php

<?php

	use common\helpers\ComponentHelper;
	use common\helpers\AddonHelper;
	if(AddonHelper::has('SmartForm')){
		ComponentHelper::loadComponentView('form-diy-model', AddonHelper::getAddonRootPath('SmartForm') . 'backend/views/components/formDiy');
	}
?>
<template id="smart-form-preview">
	<div class="form_diy_model_box" :style="{background:activeItem.computedStyle.bodyBg ? activeItem.computedStyle.bodyBg  :'#fff',
	paddingTop:activeItem.computedStyle.padTop ? activeItem.computedStyle.padTop+'px' : 0, paddingBottom:activeItem.computedStyle.padBot ? activeItem.computedStyle.padBot+'px' : 0,
	paddingLeft:activeItem.computedStyle.padLr ? activeItem.computedStyle.padLr+'px' : 0,
	paddingRight:activeItem.computedStyle.padLr ? activeItem.computedStyle.padLr+'px' : 0,}">
	<div class="form_diy_model_box_body"
	:style="{	
	borderTopLeftRadius:activeItem.computedStyle.radiusTop ? activeItem.computedStyle.radiusTop+'px' : 0,
	borderTopRightRadius:activeItem.computedStyle.radiusTop ? activeItem.computedStyle.radiusTop+'px' : 0,
	borderBottomLeftRadius:activeItem.computedStyle.radiusBot ? activeItem.computedStyle.radiusBot+'px' : 0,
	borderBottomRightRadius:activeItem.computedStyle.radiusBot ? activeItem.computedStyle.radiusBot+'px' : 0,}">
		<form-diy-model :tool-list="list" :active-Item="activeItem"></form-diy-model>
	</div>
		<el-button class="form_mofrlsave_btn" :style="{background:btnBg}">{{btnTitle}}</el-button>
	</div>
</template>
<script>
    /**
     * @descriptions 
     *  1. 组件名字必须对应模板形式 - 递归组件name
     *  2. 样式内容方法尽量内部维护 - 前端方便通用
     *  3. 父级组件会传预览数据 - activeItem
     */
    Vue.component('smart-form-preview', {
        name: "smart-form-preview",
        props: {
            activeItem: {
                type: Object,
                default () {
                    return {}
                }
            }
        },
		computed:{
			list(){
				if(!this.activeItem.funcListItem.columns){
					return this.toolList
				}
				else{
					return this.activeItem.funcListItem.columns
				}
			},
			btnBg(){
				if(!this.activeItem.computedStyle.btnBg){
					return '#F10009'
				}
				else{
					return this.activeItem.computedStyle.btnBg
				}
			},
			btnTitle(){
				if(!this.activeItem.data.btnTitle){
					return '提交'
				}
				else{
					return this.activeItem.data.btnTitle
				}
			}
		},
        template: '#smart-form-preview',
        data() {
            return {
				toolList:[]
			}
        }
    });
</script>

<style>
	.form_diy_model_box{
		width: 100%;
	}
	.form_diy_model_box_body{
		width: 100%;
		overflow: hidden;
	}
	.form_mofrlsave_btn{
		width: 100%;
		height: 50px;
		line-height: 1.5;
		color: #fff;
		font-size: 12px;
		border-radius: 0;
		margin-top: 50px;
		
	}
</style>