EOVA切糕佈局使用流程

切糕佈局旨在快速構建Eova自定義頁面，直接經過橫豎切割生成佈局，後續只須要填充元對象就能夠快速完成業務需求
步驟一：畫布局，如圖添加了一個是查詢，下面是一主兩子得三個表格

步驟二：新建頁面，引入模板（模板有form和list兩種，form傾向於表單提交,list傾向於頁面table展現，二選一取用），我這裏選中list

<%var body = {%>

<%};include("/eova/layout/form.html",{'title' : 'Tab', 'layoutContent' : body, 'isEditor' : false}){}%>
<%};include("/eova/layout/list.html",{'title' : 'Tab', 'layoutContent' : body, 'isEditor' : false}){}%>

步驟三：複製第一布得設計代碼到模板中間,從新設置id,objectCode, menuCode等等細節
步驟四：新增controller 設置跳轉

public void index(){
		render("/hotel/index.html");
	}

步驟五：設置自定義菜單，或者自定義按鈕來打開頁面，頁面展現以下
 
此處實現了 第一個表查詢， 默認加載完成和選中時 同時刷新右邊關聯表格得數據

附完整html代碼：

<%var body = {%>


<div class="eova-layout" style="width: calc(100% - 20px);height: calc(100% - 20px); margin: 10px;">
    <div class="zone" style="width:100%;height: 100%;">
        <!--此處高度渲染異常得可先 關閉自動高度重載  手動設置高度 此問題會在下一次迭代中更新-->
        <div class="box" style="height:40px;">
            <!--objectCode 爲元對象編碼， 提取元對象中開啓查詢得字段-->
            <#query id="query01" objectCode="hotel" />
        </div>

        <div class="zone" style="height:calc(100% - 10px - 40px); top: calc(40px + 10px)">
            <div class="box" style="width:calc(100% - 10px - 616px);">
                <div class="layui-btn-container" id="toolbar" style="display: none;">
                    <!--這裏綁定 query01 爲上面得查詢內容  table01 關聯第一個表-->
                    <%include("/eova/template/common/query.html",{'queryId': 'query01', 'parentId': 'table01'}){}%>
                </div>
                <!--table01 第一部分數據  objectCode爲元對象  toolbar 表示開啓工具條 menuCode關聯 對應得菜單綁定得操做  攔截器  初始過濾等等-->
                <#table id="table01" objectCode="hotel" toolbar="toolbar" menuCode="biz_hotelzz" />
            </div>

            <div class="zone" style="width:616px;left: calc(100% - 616px)">
                <div class="box" style="height:369px;">
                    <!-- isPaging 爲false  表示關閉分頁-->
                    <#table id="table02" objectCode="hotel_stock" isPaging="false"/>
                </div>

                <div class="box" style="height:calc(100% - 10px - 369px); top: calc(369px + 10px)">
                    <#table id="table03" objectCode="hotel_bed" isPaging="false"/>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    var selectRow;

    // 主表加載完成回調
    // 注:加載完成回調爲   ID + 'Done' 方法
    function table01Done(res, curr, count) {
        selectRow = res.data[0];
        refreshData();
    }

    // 主表選中
    // 注:選中回調爲   ID + 'Select' 方法
    function table01Select(o) {
        selectRow = o.data;
        refreshData();
    }

    // 刷新數據
    function refreshData() {
        console.log(selectRow);
        if (selectRow) {
            layui.use(['table', 'element'], function() {
                var $ = layui.$,
                    table = layui.table;
                // 使用table組件 從新更新其餘管理表格數據
                table.reload('table02', {
                    where: {
                        'query_hotel_id': selectRow.id
                    }
                });
                table.reload('table03', {
                    where: {
                        'query_hotel_id': selectRow.id
                    }
                });
            });
        }
    }
</script>
<%};include("/eova/layout/list.html",{'title' : 'Tab', 'layoutContent' : body, 'isEditor' : false}){}%>