define(['system/views/pages/page', 'text!./pageDict.tpl'], function (BasePage, template) { var PAGE_STATE = ['ONE', 'MULTI']; /** * 列表页类定义 * @param id * @param node 节点信息 * @constructor */ function Page(id, node, biz) { var self = this; //通过绑定控制界面显示 self.opts = { showWest: true, showEast: true, showNorth: true, showSouth: false, showDetail: false, treeTitle: '', header: '加载中……', body: '加载中……', footer: '加载中……' }; self.pageState = PAGE_STATE[1] //网格列表 self.grids = []; self.showChild = false; //继承Page类构造函数 BasePage.call(self, id, node, template, self.opts, biz); //挂载业务状态事件 if (self.biz) { self.biz.on('onStateChanged', function (s, e) { if (s.isEdit()) { self.toDetail(); } }); } } //继承Page类方法 // Page.prototype = new BasePage(); inherits(Page, BasePage); /** * Override * 界面显示后 */ Page.prototype.initCompleted = function () { this.super('initCompleted'); var $detailPanel = this.getElement('.page-body-south'); var self = this; $detailPanel.panel({ onResize: function (w, h) { self.resizeGrid($detailPanel); } }) $(window).on('resize', null, self, resizePage); } Page.prototype.destroy = function () { this.super('destroy') $(window).off('resize', null, resizePage) } function resizePage(e) { var self = e.data setTimeout(function () { if (!self.$container || self.$container.length == 0) { return; } self.$layout = self.getElement('.easyui-layout'); self.$layout.layout() self.resize(); }, 100); } /** * Override * 用于初始化界面 * @return */ Page.prototype.init = function () { this.fillHeader(); //工具栏 this.fillBody(); //数据区 this.fillFooter(); //页脚 this.fillMenu(); //附加菜单 }; /** * PageAll分为上中下左右五部分 * 此处是上-工具栏 */ Page.prototype.fillHeader = function () { var self = this, tpl = '
'; //注册工具条 var mainToolBar = { opts: { listBtn: { disable: true } }, data: self.biz, actions: { click: function (opCode) { //如果界面没有执行操作,则执行业务 self.opRouter(opCode); } } }; self.register('toolbar', 'toolbar_main', mainToolBar); self.opts.header = Store.format(tpl, 'toolbar_main'); }; /** * PageAll分为上中下左右五部分 * 此处是中-数据区 */ Page.prototype.fillBody = function () { var self = this, dsMaster = self.biz.dsMaster; var $body = $('
'); let treeTitle = self.biz.getTreeTitle() if (treeTitle !== null && treeTitle != undefined) { //树模块 var $treediv = $('
') .append(self.getTree()); $body.append($treediv) } //表格 & 编辑面板 var $centerdiv = $('
') .append(self.getMainGrid()) .append(self.getMainEditPanel()); //查询组件 var $northdiv = $('
') .append(self.getQueryPanel()); $body.append($centerdiv).append($northdiv); //明细部分 var $detail = $('
') .append(self.createTab(dsMaster)); $body.append($detail); self.opts.body = $body[0].outerHTML; }; /** * PageAll分为上中下左右五部分 * 此处是中-页脚 */ Page.prototype.fillFooter = function () { }; /** * 上下文菜单 */ Page.prototype.fillMenu = function () { var self = this; //明细菜单 var menu = { actions: { onItemClick: function (opCode, ds, adapter) { self.opRouter.apply(self, arguments); }, bind: function (fn) { self.grids.forEach(function (gd) { if (self.vm[gd]) { self.vm[gd].addContextMenu(fn); } }); } } }; self.register('contextmenu', 'mainmenu', menu); }; /********************生成组件*********************************/ /** * Widget-Tree */ Page.prototype.getTree = function () { var self = this, dsMaster = self.biz.dsMaster, treeName = 'tree_' + dsMaster.name, tpl = '
加载中……
'; //注册树组件 var treeArgs = { actions: { onClick: function (event, treeNode) { var moduleCode = treeNode.value; var colName = treeNode.colName; self.biz.treeSelected(moduleCode, colName, treeNode); } } }; self.register('tree', treeName, treeArgs); return Store.format(tpl, treeName); }; /** * Widget-Master-Grid */ Page.prototype.getMainGrid = function () { var self = this, dsMaster = self.biz.dsMaster, gridName = 'grid_' + dsMaster.name, tpl = '
加载中……
'; //注册主表表格 var mainGrid = { opts: { editable: false, pageSize: 50, showCheckColumn: dsMaster.isShowSelCol, showDelColumn: false, autoRowHeight: true }, data: dsMaster, actions: { onDblClick: function (e, args) { self.doOp('view'); }, activeCellChanged: function (e, args) { self.checkCurrent(args.grid, dsMaster); } } } self.register('grid', gridName, mainGrid); self.grids.push(gridName); return Store.format(tpl, gridName); }; /** * Widget-Master-EditPanel */ Page.prototype.getMainEditPanel = function () { var self = this, dsMaster = self.biz.dsMaster, panleName = 'ep_' + dsMaster.name, tpl = '
'; //注册编辑面板 var args = { data: dsMaster, //TODO 添加last panel enter action actions: { onLastPanelEneterd: function () { var gridName = 'grid_' + self.biz.dsMaster.getDetails()[0].name; if (self.vm[gridName].actions.onActiveFirstCell) { self.vm[gridName].actions.onActiveFirstCell(); } } } }; self.register('editpanel', panleName, args); return Store.format(tpl, panleName); }; /** * Widget-QueryPanel */ Page.prototype.getQueryPanel = function () { var self = this, dsMaster = self.biz.dsMaster, qpName = 'qp_' + dsMaster.name, tpl = '
'; //注册查询组件 var queryPanel = { source: dsMaster, data: self.biz.funcQueryProject, //data: dsMaster, actions: { querySchemeChanged: function () { if (!self.$layout) return; self.resize(); }, search: function () { self.opRouter('refresh') } } }; self.register('querypanel', qpName, queryPanel); return Store.format(tpl, qpName); }; /** * Widget-TabControl * @param ds * @returns {string} */ Page.prototype.createTab = function (ds) { var tabs = [], self = this, tpl = '
加载中……
'; //生成tab var tabName = 'tab_' + ds.name; var details = ds.getDetails(); if (details.length > 0) { for (var i = 0, len = details.length; i < len; i++) { var d = details[i]; if (!d.isShow) { continue; } tabs = self.createTabItem(d); } if (tabs.length == 0) { return ''; } if (ds == self.biz.dsMaster) { self.hasChild = true; } var tabsArgs = { opts: {}, data: { tabs: tabs }, actions: { onAddClick: function () { var row = self.vm[tabName].getSelectedTabData(); //只有满足三个条件才能增加新行 //1、编辑状态 //2、数据源允许新增 //3、当前行为空或者当前行提交成功 if (self.biz.isEdit() && row.dataSrc.allowInsert && (!row.dataSrc.currentRow || row.dataSrc.currentRow.validate())) { row.dataSrc.addRow(); } }, onDeleteClick: function () { var row = self.vm[tabName].getSelectedTabData(); //只有满足三个条件才能增加删行 //1、编辑状态 //2、数据源允许删除 //3、当前行为不为空 self.biz.columnDeleteButtonClick(row); }, onClearClick: function () { var row = self.vm[tabName].getSelectedTabData(); //只有满足二个条件才能增加删行 //1、编辑状态 //2、数据源允许删除 if (self.biz.isEdit() && row.dataSrc.allowDel) { Store.messager.confirm(Store.MSG.DELETEALL_CONFIRM, function (isOk) { if (isOk) { row.dataSrc.deleteAll(); } }); } } } }; self.register('tabs', tabName, tabsArgs); return Store.format(tpl, tabName); } return ''; } /** * Widget-TabItem * @param ds * @returns {{title: *, content: string, closable: boolean, iconCls: string, dataSrc: *}} */ Page.prototype.createTabItem = function (ds) { var self = this; var tabs = []; //生成标签 var pageId = '9,1'; var tabOpts = { title: '基本属性', content: '', closable: false, iconCls: 'icon-window', dataSrc: ds }; var $divTabItem = self.divTabItem(self, ds, pageId); tabOpts.content = $divTabItem[0].outerHTML; tabs.push(tabOpts); //生成标签 pageId = '9,2'; tabOpts = { title: '显示属性', content: '', closable: false, iconCls: 'icon-window', dataSrc: ds }; $divTabItem = self.divTabItem(self, ds, pageId); tabOpts.content = $divTabItem[0].outerHTML; tabs.push(tabOpts); //生成标签 pageId = '9,3'; tabOpts = { title: '编辑属性', content: '', closable: false, iconCls: 'icon-window', dataSrc: ds }; $divTabItem = self.divTabItem(self, ds, pageId); tabOpts.content = $divTabItem[0].outerHTML; tabs.push(tabOpts); //生成标签 pageId = '9,4'; tabOpts = { title: '参照属性', content: '', closable: false, iconCls: 'icon-window', dataSrc: ds }; $divTabItem = self.divTabItem(self, ds, pageId); tabOpts.content = $divTabItem[0].outerHTML; tabs.push(tabOpts); //生成标签 pageId = ''; tabOpts = { title: '所有属性', content: '', closable: false, iconCls: 'icon-window', dataSrc: ds }; $divTabItem = self.divTabItem(self, ds, pageId); tabOpts.content = $divTabItem[0].outerHTML; tabs.push(tabOpts); return tabs; } /** * [divTabItem description] * @return {[type]} self [description] * @param {[type]} ds [数据源] * @param {[type]} pageId [用来区分列应显示到哪个tab上] */ Page.prototype.divTabItem = function (self, ds, pageId) { var $divTabItem = $('
'); var details = self.getViewDetails(ds); if (details.length > 0) { //分上中下三部分 var $divHead = $('
') .append(self.getDetailGrid(ds, pageId)); var $divDetail = $('
') .append('
') .append(self.createTab(ds)); //组合到div $divTabItem.append($divHead); $divTabItem.append($divDetail); } else { var $headdiv = $('
') .append(self.getDetailGrid(ds, pageId)); $divTabItem.append($headdiv); } return $divTabItem; } /** * Widget-Detail-Grid * @param ds */ Page.prototype.getDetailGrid = function (ds, pageId) { var gridName = 'grid_' + ds.name + (Math.ceil(Math.random() * 1000000)), self = this, tpl = '
加载中……
'; //注册网格 var gridArgs = { opts: { editable: false, pageId: pageId, enableAddRow: true, enablePager: false, showCheckColumn: ds.isShowSelCol, showDelColumn: true }, data: ds, actions: { activeCellChanged: function (e, args) { self.checkCurrent(args.grid, ds); }, onColumndeleteButtonClick: function (row) { //只有满足三个条件才能增加删行 //1、编辑状态 //2、数据源允许删除 //3、当前行为不为空 self.biz.columnDeleteButtonClick(row); } } } self.register('grid', gridName, gridArgs); ds.on('onCurrentChanged', self.loadDetailDetail); self.grids.push(gridName); return Store.format(tpl, gridName); }; Page.prototype.loadDetailDetail = function (ds, args) { var relations = ds.getDetailRelations(); for (var i = 0; relations.length > i; i++) { var r = relations[i]; //如果旧行不为空,则保存数据 if (args.oldRow) { args.oldRow[r.detail.name] = r.detail.snapData(); } //如果新行不为空,检查是否有明细数据,有则填充,无则通过服务器获取 //如果新行为空,则只清空明细 if (args.newRow) { var rowData = args.newRow[r.detail.name]; if (rowData) { r.detail.resetData(rowData); delete args.newRow[r.detail.name]; continue; } else { r.detail.searchByMaster(ds.currentRow); } } else { r.detail.clear(); } } }; Page.prototype.getViewDetails = function (ds) { var details = ds.getDetails(), result = []; for (var i = 0, len = details.length; i < len; i++) { var d = details[i]; if (d.isShow) { result.push(d); } } return result; }; /***********调用Biz方法********************/ /** * 更新业务类是否显示明细 * @return */ Page.prototype.bizShowDetail = function (value) { this.biz.setShowDetail(value); }; Page.prototype.bizLoadDetails = function () { this.biz.loadDetails(); } Page.prototype.bizUpdateCurrent = function () { this.biz.loadDetails(); } /** * 界面按钮操作,无需业务处理 * @param {[type]} opCode [description] * @return {String} 是否执行过业务操作 */ Page.prototype.doOp = function (opCode) { var self = this; var isHandled = false; switch (opCode) { case 'detail': self.toDetail(); self.bizLoadDetails(); isHandled = true; break; case 'list': this.toList(); isHandled = true; break; case 'refresh': if (this.isDetail()) { this.bizUpdateCurrent(); isHandled = true; } break; case 'child': this.toggleShowChild(); break; case 'view': if (self.isDetail()) { this.toList(); isHandled = true; } else { self.toDetail(); self.bizLoadDetails(); isHandled = true; } break; } return isHandled; }; /** * 检查当前行是否改变,如果改变则通知业务类和更新当前行 * @param {[type]} grid [description] * @param {[type]} dataSrc [description] * @return {[type]} [description] */ Page.prototype.checkCurrent = function (grid, dataSrc) { var cell = grid.getActiveCell(); if (cell) { var dataRow = grid.getDataItem(cell.row); if (dataRow !== dataSrc.currentRow) { var oldRow = dataSrc.currentRow; dataSrc.setCurrentRow(dataRow); } } else { if (dataSrc.currentRow !== null) { dataSrc.setCurrentRow(null); } } }; Page.prototype.setLayoutState = function (newState) { var self = this; this.pageState = newState; self.opts.showDetail = newState === PAGE_STATE[0]; self.setShowChild(newState === PAGE_STATE[0]); self.updateOpEnable(false); self.resize(); }; Page.prototype.setShowChild = function (value) { var self = this; self.showChild = value && self.hasChild; //兼容问题,Biz使用showDetail表示是否显示明细 self.bizShowDetail(value); }; /** * 切换到查询列表页,,只有按钮才会使用 * @return {[type]} [description] */ Page.prototype.toList = function () { this.setLayoutState(PAGE_STATE[1]); }; /** * 切换到详情页-编辑界面 * @return {[type]} [description] */ Page.prototype.toDetail = function () { this.setLayoutState(PAGE_STATE[0]); }; Page.prototype.hideBodyPanel = function (region) { var $body = this.getElement('.edp-page .page-body') if ($body.length === 0) { return } let $region = $body.layout('panel', region); if ($region) { $region.panel('close'); } } Page.prototype.showBodyPanel = function (region) { var $body = this.getElement('.edp-page .page-body') if ($body.length === 0) { return } let $region = $body.layout('panel', region); if ($region) { $region.panel('open'); } } Page.prototype.resize = function () { var self = this, $body = self.getElement('.edp-page .page-body'); if (self.pageState == PAGE_STATE[1]) { self.showBodyPanel('north'); self.showBodyPanel('west'); //$body.layout('resize');//重新計算Layout大小 var h1 = self.getElement('.query-panel-wrapper').height(); h1 += 10 h1 = h1 > 200 ? 200 : h1; self.getElement('.edp-page .page-body-north').panel('resize', { height: h1 }); if (h1 === 200) { $('.edp-page .page-body-north').css('overflow', 'auto'); } else { $('.edp-page .page-body-north').css('overflow', 'hidden'); } if (self.showChild) { self.showBodyPanel('south'); var h = $body.height(); var h2 = h - h1; self.getElement('.edp-page .page-body-south ').panel('resize', { height: h2 / 2 }); } else { self.hideBodyPanel('south'); } self.vm.toolbar_main.setText('view', Store.MSG.VIEW); self.vm.toolbar_main.invoke('setIcon', 'view', 'icon-view'); } if (self.pageState == PAGE_STATE[0]) { self.hideBodyPanel('north'); self.hideBodyPanel('west'); if (self.showChild) { $body.layout('resize');//重新計算Layout大小 var h1 = self.getElement('.edp-page .page-body-center .filed-group').height(); var h2 = self.getElement('.edp-page .page-body-center .edp-page-middle-section').height(); var h = $body.height(); if (!h2) { if (h < h1) { h1 = h / 2; } else { h1 = h1 > 200 ? 200 : h1; } } else { h1 += h2 + 5; } self.showBodyPanel('south'); self.getElement('.edp-page .page-body-south').panel('resize', { height: h - h1 }); } else { self.hideBodyPanel('south'); } self.vm.toolbar_main.setText('view', Store.MSG.BACK); self.vm.toolbar_main.invoke('setIcon', 'view', 'icon-undo'); } $body.layout('resize'); self.updateGrids(); }; Page.prototype.updateGrids = function () { this.resizeGrid(); }; Page.prototype.toggleShowChild = function () { var self = this; self.setShowChild(!self.showChild); if (self.showChild) { this.bizLoadDetails(); } self.resize(); }; /****************业务类使用方法******************/ /** * 是否在列表页 * @return {Boolean} [description] */ Page.prototype.isList = function () { return this.pageState === PAGE_STATE[1]; }; /** * 是否在详情页 * @return {Boolean} [description] */ Page.prototype.isDetail = function () { return this.pageState === PAGE_STATE[0]; }; /** * 控制按钮可用 * @param {[type]} opCode [description] */ Page.prototype.setButtonEnable = function (opCode) { this.vm.toolbar_main.setEnable(opCode); }; /** * 控制按钮不可用 * @param {[type]} opCode [description] */ Page.prototype.setButtonDisabled = function (opCode) { this.vm.toolbar_main.setDisabled(opCode); }; /** * 更新按钮状态 * @param {Boolean} isRecord 是否行处理 * @return {[type]} [description] */ Page.prototype.updateOpEnable = function (isRecord) { this.vm.toolbar_main.update(isRecord); }; Page.prototype.setEditLimit = function (dataSrc, col, editable) { var adapter = this.vm['ep_' + dataSrc.name]; if (adapter) { adapter.setEditorEditable(col.isDataColumn ? col.fieldName : col, editable); } }; Page.prototype.selectTab = function (dataSrc, index) { var adapter = this.vm['tab_' + dataSrc.name]; if (adapter) { adapter.select(index); } }; Page.prototype.setOptions = function (dataSrc, opts) { var adapter = this.vm['grid_' + dataSrc.name]; if (adapter) { adapter.setOptions(opts); } } /** * 设置树的数据-Biz-API * @param data */ Page.prototype.setTreeData = function (data) { var treeName = 'tree_' + this.biz.dsMaster.name; if (this.vm[treeName]) { this.vm[treeName].reset(data); } }; return Page; })