1. 基本功能 1. 基本功能
1.1. tab延时加载配置 1.1. tab延时加载配置
tab延时加载配置。
1.2. 单据打开tab要支持多个 1.2. 单据打开tab要支持多个
单据打开tab要支持多个。
1.3. tab页只读控制 1.3. tab页只读控制
tab页中控件控制只读。
1.4. Tab页关闭时回到创建它的标签页 1.4. 首页面Tab页签关闭时回到创建它的标签页
从某个标签中的按钮点开创建了一个新的标签页，当关闭创建的新标签页能记录到上一个创建它的父标签页能打开（作为当前窗口）。
1.5. 关闭全部tab页配置 1.5. 关闭全部tab页配置
在首页的多个TAB页的最右端后，增加“X”，来关闭全部TAB页。
1.6. tab页签添加一层遮罩 1.6. tab页签添加一层遮罩
点击按钮（比如查询）在等待事件结束时，当前tab页签添加一层遮罩。
2. 配置方法 2. 配置方法
2.1. tab延时加载配置 2.1. tab延时加载配置
配置
- 对象建模–业务对象–业务对象管理：编辑业务对象，点击【可视化布局】按钮，进入到可视化界面，选中相应的TAB控件，在右侧属性列表【页签生成方式】处选择页签使用懒加载。
2.2. 单据打开tab要支持多个 2.2. 单据打开tab要支持多个
配置
1.如果需要实现该功能，需要项目组在config.properties.js中设置multipleTabsControl为true。
define({
dict_config:{
method:"get",data:"",params:"",url: $bas_ctx + "/dictionary/queryDictRows"
},
stopRepeatUrlPatterns: [
'/'
],
controls:{
multipleTabsControl :true,
dataGrid:{
disableCopyEditing:true,
validation: {
requireDisabled: true
},
keydownNewRow: true,
beforeSelectedHintFlag:true //表格选中之前是否提示标志
},
uniqueSync:true
});
2.如果项目组希望新增页面也支持同时打开多个tab，请在IndexModule.js中调整$scope.addTab方法。
var pageCount = 0;
$scope.addTab = function (resource) {
if(resource.url.inexOf("pageType=add")){
resource.sysResourceId=resource.sysResourceId+(pageCount++)
}
.......
}
2.3. tab页只读控制 2.3. tab页只读控制
配置
- 对象建模–业务对象–业务对象管理：编辑业务对象，点击【可视化布局】按钮，进入到可视化界面，选中相应的TAB控件，在右侧事件列表tab页的【布局元素只读事件】处配置：执行类型:【Angular公式】；执行内容:【testExam202Zyp.totalPlanQty == 1】。
2.4. Tab页关闭时回到创建它的标签页 2.4. 首页面Tab页签关闭时回到创建它的标签页
请参考常用扩展3.1. 首页面Tab页签关闭时回到创建它的标签页。
2.5. 关闭全部tab页配置 2.5. 关闭全部tab页配置
请参考常用扩展3.2. 关闭全部tab页配置。
2.6. tab页签添加一层遮罩 2.6. tab页签添加一层遮罩
配置
BaseController.js需更新至5.7.41以上版本，config.properties.js添加一个配置项$config.shadeConfig，BaseController.js的tipController方法里读取此配置项，用于设置 shade 的数值。未配置按默认false处理。
可接受类型：
1）false – 无遮罩
2）数字(0 – 1) – 遮罩的透明度
3）数组 – 第一个值为遮罩的透明度（0-1），第二个值为遮罩颜色（CSS颜色值）
shadeConfig: {shade: [0.5, '#333333']}, // 配置加载中遮罩样式
3.常用扩展 3. 常用扩展
3.4. Tab页关闭时回到创建它的标签页 3.4. 首页面Tab页签关闭时回到创建它的标签页
因是首页面，每个项目组可能会有些差异特给文档项目组自己修改相关的代码。
在indexModule.JS找到addTabByMenu方法，往方法中加入相关代码，可参考如下：
if (!containsTab(id)) { //create tab
resource.activeTabTopIndex = $scope.activeTopIndex;
resource.parentTabId = $scope.activeTabId;
$scope.activeTabId = id;
resource.tabSeq = $scope.tabSeq++;
$scope.tabArray.push(resource);
} else {
$scope.activeTabId = id;
//加入刷新事件
$scope.refreshTabIframe(resource.url);
}
在addTab方法中，加入相关代码，可参考如下：
if (!containsTab(id)) { //create tab
resource.parentTabId = $scope.activeTabId;
$scope.activeTabId = id;
resource.tabSeq = $scope.tabSeq++;
$scope.tabArray.push(resource);
} else {
$scope.activeTabId = id;
$scope.refreshTabIframe(resource.url);
}
在closeAllTab方法中，加入相关代码，可参考如下：
$scope.closeAllTab = function () {
if ($scope.tabArray.length == 1) {
return;
}
for (var i = $scope.tabArray.length - 1; i > 0; i--) {
var resource = $scope.tabArray[i];
if (resource.parentTabId != undefined) {
resource.parentTabId = undefined;
}
$scope.tabArray.splice(i, 1);
$scope.closeTab($scope.tabArray[i]);
}
$scope.activeTabId = 'todoListId';
$scope.showQuestionPath($scope.activeTabId);
};
在closeTab方法中，加入相关代码，可参考如下：
$scope.closeTab = function (resource) {
var childWindow;
var doCloseTab = function () {
childWindow && childWindow.close();
var id = resource.sysResourceId;
for (var i = 0; i < $scope.tabArray.length; i++) {
if ($scope.tabArray[i].sysResourceId == id) {
if ($scope.activeTabId == id) {
if (i == 0) {
$scope.activeTabId = 'todoListId';
$scope.activeTabTopIndex = -1;
} else {
if (containsTab(resource.parentTabId)) { //create tab
$scope.activeTabId = resource.parentTabId;
} else {
$scope.activeTabId = $scope.tabArray[i - 1].sysResourceId;
}
$scope.activeTabTopIndex = $scope.tabArray[i - 1].activeTabTopIndex;
}
$scope.showQuestionPath($scope.activeTabId);
}
$scope.tabArray.splice(i, 1);
}
}
};
3.5. 关闭全部tab页配置 3.5. 关闭全部tab页配置
在index.html页面加入 <a href="javascript:void(0)" ng-click="closeTab(resource)">
<div class="tab">
<ul>
<li ng-class="{'on':'todoListId'==activeTabId}" ng-dblclick="toggle()">
<a href="javascript:void(0)" ng-click="showTab('todoListId');">
<span class='show-pan'>我的工作台</span>
</a>
</li>
<li ng-class="{'on':resource.sysResourceId==activeTabId, 'closed-hide': resource.closed}" ng-dblclick="toggle()" ng-repeat="resource in tabArray | orderBy:'tabSeq' | filter : resFilter">
<a href="javascript:void(0)" ng-click="showTab(resource.sysResourceId)">
<span class='show-pan'>{{resource.urlTitle}}</span>
</a>
<a href="javascript:void(0)" ng-click="closeTab(resource)">
<div class="tab-close close_on"></div>
</a>
</li>
</ul>
<a href="" ng-click="closeAllTab()" class="close-all">×</a>
</div>
在indexModule.JS界面加入closeAllTab方法。
//关闭所有标签
$scope.closeAllTab = function () {
if ($scope.tabArray.length == 1) {
return;
}
GillionMsg.confirm(null, '确认关闭所有标签页吗？', function (btn) {
$scope.$apply(function () {
if (btn) {
for (var i = $scope.tabArray.length - 1; i > 0; i--) {
$scope.tabArray.splice(i, 1);
}
$scope.activeTabId = 'todoListId';
}
});
});
}