add：自定义布局 - a4

@VIEW/@MACRO/LAYOUTPANEL_VIEW.template.ftl

+<#ibizinclude>
+./VIEW_LAYOUTPANEL/VIEW_LAYOUTPANEL_RENDER.vue.ftl
+</#ibizinclude>
 <template>
 <#if view.getPSViewLayoutPanel()?? && view.getPSViewLayoutPanel().isUseDefaultLayout()>
 ${P.getLayoutCode('VIEW.vue').code}
 <#else>
-自定义布局
+<@renderRootElement viewLayout=view.getPSViewLayoutPanel() />
 </#if>
 </template>
\ No newline at end of file

@VIEW/@MACRO/VIEW_LAYOUTPANEL/VIEW_LAYOUTPANEL_RENDER.vue.ftl

+<#-- 按类型绘制 -->
+<#macro renderByDetailType panelDetail>
+<#if panelDetail.getItemType()?? && panelDetail.getItemType() == "CONTAINER">
+<span>容器</span>
+<#elseif panelDetail.getItemType()?? && panelDetail.getItemType() == "TABPAGE">
+<span>分页部件</span>
+<#elseif panelDetail.getItemType()?? && panelDetail.getItemType() == "TABPANEL">
+<span>分组容器</span>
+<#elseif panelDetail.getItemType()?? && panelDetail.getItemType() == "FIELD">
+<span>属性项</span>
+<#elseif panelDetail.getItemType()?? && panelDetail.getItemType() == "RAWITEM">
+<span>直接内容</span>
+<#elseif panelDetail.getItemType()?? && panelDetail.getItemType() == "BUTTON">
+<span>按钮</span>
+<#elseif panelDetail.getItemType()?? && panelDetail.getItemType() == "CTRLPOS">
+<span>部件占位</span>
+<#elseif panelDetail.getItemType()?? && panelDetail.getItemType() == "USERCONTROL">
+<span>用户自定义控件</span>
+<#else>
+<span>${panelDetail.getItemType()}暂未支持</span>
+</#if>
+</#macro>
+
+<#-- 绘制顶层元素 -->
+<#macro renderRootElement viewLayout>
+<#if viewLayout.getPSLayout()?? && viewLayout.getPSLayout().getLayout()?? viewLayout.getPSLayout().getLayout() == "FLEX">
+    <#assign rootStyle = "height: '100%'; width: '100%';'display': 'flex';'flex-direction': 'column';">
+<#else>
+    <#assign rootStyle = "height: '100%'; width: '100%'; 'overflow': 'auto';">
+</#if>
+<div class="app-view-layout" style="${rootStyle}">
+    <#if viewLayout.getRootPSPanelItems()??>
+    <#list viewLayout.getRootPSPanelItems() as panelDetail>
+    <@renderByDetailType panelDetail />
+    </#list>
+    </#if>
+</div>
+</#macro>
+