You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

872 lines
26 KiB

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

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 = '<div class="page-widget-toolbar" ms-widget="toolbar, $, {0}" ></div>';
//注册工具条
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 = $('<div class="easyui-layout page-body" data-options="fit:true" >');
let treeTitle = self.biz.getTreeTitle()
if (treeTitle !== null && treeTitle != undefined) {
//树模块
var $treediv = $('<div class="page-body-west" data-options="region:\'west\',split:true,collapsible:false,title:\'' + treeTitle + '\'">')
.append(self.getTree());
$body.append($treediv)
}
//表格 & 编辑面板
var $centerdiv = $('<div class="page-body-center" data-options="region:\'center\',split:true">')
.append(self.getMainGrid())
.append(self.getMainEditPanel());
//查询组件
var $northdiv = $('<div class="page-body-north" data-options="region:\'north\',split:true">')
.append(self.getQueryPanel());
$body.append($centerdiv).append($northdiv);
//明细部分
var $detail = $('<div class="page-body-south" data-options="region:\'south\',split:true">')
.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 = '<div class="page-widget-tree" ms-widget="tree, $, {0}" >加载中……</div>';
//注册树组件
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 = '<div class="page-widget-grid" ms-visible="!layout.showDetail" ms-widget="grid, $,' +
' {0}">加载中……</div>';
//注册主表表格
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 = '<div class="page-widget-editpanel" ms-visible="layout.showDetail" ms-widget="editpanel, $, {0}"></div>';
//注册编辑面板
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 = '<div class="page-widget-querypanel" ms-widget="querypanel, $, {0}"></div>';
//注册查询组件
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 = '<div class="page-widget-tab" ms-widget="tabs, $, {0}">加载中……</div>';
//生成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 = $('<div class="page-tabitem"></div>');
var details = self.getViewDetails(ds);
if (details.length > 0) {
//分上中下三部分
var $divHead = $('<div class="page-tabitem-half"></div>')
.append(self.getDetailGrid(ds, pageId));
var $divDetail = $('<div class="page-tabitem-half"></div>')
.append('<div class="page-tabitem-sep"></div>')
.append(self.createTab(ds));
//组合到div
$divTabItem.append($divHead);
$divTabItem.append($divDetail);
} else {
var $headdiv = $('<div class="page-tabitem-full"></div>')
.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 = '<div class="page-widget-grid" ms-widget="grid, $, {0}">加载中……</div>';
//注册网格
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;
})