1. 自定义js方法1. 自定义js方法

功能说明

此处以业务对象TestLixq301Db为例子。其管理页生成对应的三个js文件为【TestLixq301DbManage.js】、【TestLixq301DbManageBsCtr.js】和【TestLixq301DbManageCtr.js】。其中默认的方法体都生成到【TestLixq301DbManageBsCtr.js】中，而【TestLixq301DbManageCtr.js】是供开发人员二次开发的js文件，其可以覆盖【TestLixq301DbManageBsCtr.js】中的方法。
对于需要重载【TestLixq301DbManageBsCtr.js】中的默认方法时，可以使用这种配置来实现。

范例说明

配置

对象建模–业务对象–业务对象管理：编辑业务对象–方法定义，新增一个自定义方法，填写【调用方法名称】、【调用方法描述】、【方法类型】为自定义JS函数，另外填写【调用的URL地址】，此格式一般为业务对象名称（首字母小写）/方法名称。
编辑业务对象，点击【可视化布局】按钮进入页面布局，找到【toolbar】，然后点击右上角的小齿轮，将左侧的方法移动到右侧，最后保存数据。
提交业务对象生成代码后，将代码从ftp上拷贝到工程中。
在【业务对象Ctr.JS】文件中编写自定义的方法体。如果这个按钮是管理页的，方法后面会加业务对象名称，在编写的时候要注意。
如果再次生成代码，则这个文件会被覆盖，所以请将业务对象的【是否需扩展JS】勾选，此功能可以让业务对象不再生成这个文件。打开菜单业务对象–基本信息，勾选【是否需扩展JS】选项。

自定义代码示例

$scope.custShowAmountTestLixq301Db = function(){
if($scope.testLixq301DbCheckedRows.length !=1){
GillionMsg.alert("提示信息","请勾选一条记录！");
}else{
GillionMsg.alert("提示信息：","金额数据为： "+$scope.testLixq301DbCheckedRows[0].testCaseValue);
}
};
/*

2. 方法执行之前、后调用js2. 方法执行之前、后调用js

功能说明

平台支持默认方法配置执行之前、后调用前端js，此处以保存前、保存后调用js为例。

范例说明

应用场景

港口相关视图缓存信息更新：联想控件的数据源是一个港口相关的视图，为加快联想控件输入响应速度对该视图数据进行缓存，缓存数据存储在全文检索缓存服务器上；为保证缓存数据与数据库数据的一致性，港口基础数据修改保存时要同步更新缓存服务器数据；即使缓存更新失败不能影响港口基础数据的正常保存，更新缓存的请求与港口基础数据的保存不在一个事务处理。
实现港口信息基础数据界面，用户点【保存】按钮时，同步更新缓存。

h012020

配置

对象建模–业务对象–业务对象管理：编辑业务对象–业务对象扩展，新增一笔数据，填写【扩展名称】为js文件名，【扩展类型】为前台JS扩展，【路径】为js文件路径。
编辑业务对象–方法定义中的批量保存方法，切换至调用规则表tab页，新增数据，填写【扩展名称】，【执行类型】选择javaScript，【执行内容】为执行之前要调用的自定义方法名，【调用时机】选择执行之前；继续新增数据，填写【扩展名称】，【执行类型】，【执行内容】为执行之后要调用的自定义方法名，【调用时机】选择执行之后。
提交业务对象，然后生成代码。

自定义代码示例

在【业务对象Ctr.JS】文件中编写自己的方法体。
平台生成的 BsCtrl 中定义的使用 _bindAction 包装的方法，，可以在 Ctrl.js 中添加自定义的执行前后逻辑。

如 BsCtrl 中有定义如下方法：

$scope.save = _this.bindAction(function(options){
  // ....
});

要在 save 方法执行前，添加一些自定义逻辑，在 Ctrl.js 定义一个 before 开头的方法：

$scope.beforeSave = function() {
  // 这里添加执行 save 方法前的自定义逻辑代码
  // 如此方法返回 false，则可以中断 save 方法的执行
}

如要在 save 方法执行后，添加一些自定义逻辑，在 Ctrl.js 定义一个 after 开头的方法：

$scope.afterSave = function() {
  // 这里添加 save 方法执行后需要执行的自定义逻辑代码
}

3. 页面嵌入自定义js界面3. 页面嵌入自定义js界面

功能说明

在不改变html结构的情况下，通过自定义js，往html中插入一些元素，可以参考此方式实现。
自定义图片效果

范例说明

配置

对象建模–业务对象–业务对象管理：编辑业务对象，点击【可视化布局】按钮，进入页面布局，在需要插入自定义内容的区域拖一个 div，定义一个样式名称。
在【业务对象Ctr.JS】文件中添加自定义内容。

自定义代码示例

// 自定义内容处理，建议放在 pageRenderFinish 事件中进行处理
$scope.$on('pageRenderFinish', function() {
// 获取用来放置自定义内容的 div
var $div = $('.custom-test');
// 把自定义内容拼接成字符串
var $html = $('
<div class="row">\n' +
'
<div class="col-xs-4">\n' +
'
<h1>一些很奇怪的自定义内容</h1>
\n' +
'
<ul>
<ul>\n' +</ul>
</ul>
<ul>
<ul>'
    <li><span style="color: blue; font-size: 18px;">白日依山尽</span></li>
</ul>
</ul>
\n' +
'
<ul>
    <li><span style="color: yellow; font-size: 14px;">黄河</span><span style="font-weight: bold;">入海流</span></li>
</ul>
 

\n' +
'

\n' +
'
<div>\n' +
' <button class="button-success">Hello</button> <input type="form-control" />\n' +
'</div>
\n' +
'

</div>
\n' +
'
<div class="col-xs-2">\n' +
'
<div>\n' +
' <img src="http://master.glpaas.gillion.com.cn/cboard/dist/img/panel/avator.png" alt="" />\n' +
'</div>
\n' +
'

</div>
\n' +
'
<div class="col-xs-6">\n' +
'控件需要执行 $compile

\n' +
'
<div>\n' +
' 控件1\n' +
' 控件2\n' +
'</div>
\n' +
'

</div>
\n' +
'

</div>
\n');
// 把自定义内容塞到 div 里去
$div.append($html);
// 如果有用到 angular，需要 $compile 一下
$compile($html)($scope);
// 如果界面有配自适应布局，自定义内容有影响到布局，可执行 resize 重新计算高度
$(window).resize();

4. 自定义查询条件4. 自定义查询条件

功能说明

支持自定义查询条件，一般适用于页面有多张表查询。

范例说明

应用场景

例如在核销主页面（业务对象是BcAllocationEvent）点击新增，跳转到核销新增页面，新增页面有一行查询条件和两个表格，表格需要分别显示应收/实收的数据；

核销查询业务对象新增方法指向业务对象VwBcLedgerItem的管理页面，查询条件可以配置非空校验：

勾选实收/实付数据前往账单核销页面并把勾选的值赋给账单核销页面的表格中。

新增页面的配置

新增一个空的视图对象，将应收和实收2个对象当子对象挂在空视图下，然后根据效果图进行布局，最后生成代码；

手工代码说明

在新增页面业务对象的control.js上分别重写html页面中params里的请求参数方法

$scope.queryBcLedgerItemSfParams = function() {
var searchColumns = [];
//A
if ($scope.search.sourceNo != null && $scope.search.sourceNo != "") {
searchColumns.push({
propertyName: 'sourceNo',
columnName: 'SOURCE_NO',
dataType: 'S',
value: $scope.search.sourceNo,
operation: 'EQ'
});
}
if ($scope.search.ledgerCustType != null && $scope.search.ledgerCustType != "") {
searchColumns.push({
propertyName: 'ledgerCustType',
columnName: 'LEDGER_CUST_Type',
dataType: 'S',
value: $scope.search.ledgerCustType,
operation: 'EQ'
});
}
if ($scope.search.ledgerCustId != null && $scope.search.ledgerCustId != "") {
searchColumns.push({
propertyName: 'ledgerCustId',
columnName: 'LEDGER_CUST_ID',
dataType: 'S',
value: $scope.search.ledgerCustId,
operation: 'EQ'
});
}
if ($scope.search.ledgerCustNameTxt != null && $scope.search.ledgerCustNameTxt != "") {
searchColumns.push({
propertyName: 'ledgerCustName',
columnName: 'LEDGER_CUST_NAME',
dataType: 'S',
value: $scope.search.ledgerCustNameTxt,
operation: 'EQ'
});
}
if ($scope.search.settleOfficeCode != null && $scope.search.settleOfficeCode != "") {
searchColumns.push({
propertyName: 'settleOfficeCode',
columnName: 'Settle_Office_Code',
dataType: 'S',
value: $scope.search.settleOfficeCode,
operation: 'EQ'
});
}
return {
"searchColumns": searchColumns,
"queryResultType": "page",
"sum": false
};
}

$scope.queryBcLedgerItemDzParams = function() {
var searchColumns = [];
//A
if ($scope.search.sourceNo != null && $scope.search.sourceNo != "") {
searchColumns.push({
propertyName: 'sourceNo',
columnName: 'SOURCE_NO',
dataType: 'S',
value: $scope.search.sourceNo,
operation: 'EQ'
});
}
if ($scope.search.ledgerCustType != null && $scope.search.ledgerCustType != "") {
searchColumns.push({
propertyName: 'ledgerCustType',
columnName: 'LEDGER_CUST_Type',
dataType: 'S',
value: $scope.search.ledgerCustType,
operation: 'EQ'
});
}
if ($scope.search.ledgerCustId != null && $scope.search.ledgerCustId != "") {
searchColumns.push({
propertyName: 'ledgerCustId',
columnName: 'LEDGER_CUST_ID',
dataType: 'S',
value: $scope.search.ledgerCustId,
operation: 'EQ'
});
}
if ($scope.search.ledgerCustNameTxt != null && $scope.search.ledgerCustNameTxt != "") {
searchColumns.push({
propertyName: 'ledgerCustName',
columnName: 'LEDGER_CUST_NAME',
dataType: 'S',
value: $scope.search.ledgerCustNameTxt,
operation: 'EQ'
});
}
if ($scope.search.settleOfficeCode != null && $scope.search.settleOfficeCode != "") {
searchColumns.push({
propertyName: 'settleOfficeCode',
columnName: 'Settle_Office_Code',
dataType: 'S',
value: $scope.search.settleOfficeCode,
operation: 'EQ'
});
}
return {
"searchColumns": searchColumns,
"queryResultType": "page",
"sum": false
};
}

重写页面中的查询方法，刷新表格

$scope.queryVwBcLedgerItem = function(){
$dataSourceManager.dataSources['BcLedgerItemSfSource'].doRequestData();
$dataSourceManager.dataSources['BcLedgerItemDzSource'].doRequestData();
}

如果查询条件要加校验，需要增加校验分组配置，然后再查询方法前去调用校验：（其中Form_VwBcLedgerItem_F0_0_4是form的名称，根据实际情况修改）

$scope.queryVwBcLedgerItem2 = $scope.queryVwBcLedgerItem;

$scope.queryVwBcLedgerItem = function() {

if ($scope.Form_VwBcLedgerItem_F0_0_4 && $scope.Form_VwBcLedgerItem_F0_0_4.$validator) {
$scope.Form_VwBcLedgerItem_F0_0_4.verify();
}
if ($scope.Form_VwBcLedgerItem_F0_0_4 && !$scope.Form_VwBcLedgerItem.$valid) {
return;
}
$scope.queryVwBcLedgerItem2();
}

勾选实收/实付数据，点击账单核销按钮，前往账单核销页面，并且将选择的数据插入表里；

$scope.bcLedgerAdd = function() {

if (($scope.bcLedgerItemSfCheckedRows.length == 1 && $scope.bcLedgerItemDzCheckedRows.length > 0) || ($scope.bcLedgerItemSfCheckedRows.length > 0 && $scope.bcLedgerItemDzCheckedRows.length == 1) || ($scope.bcLedgerItemSfCheckedRows.length > 0 && $scope.bcLedgerItemDzCheckedRows.length == 0) || ($scope.bcLedgerItemSfCheckedRows.length == 0 && $scope.bcLedgerItemDzCheckedRows.length > 0)) {
var bcLedgerItemSfs = $scope.bcLedgerItemSfCheckedRows;
var bcLedgerItemDzs = $scope.bcLedgerItemDzCheckedRows;
var url = "/wj_bms_www/html/allocate/manage/bcAllocationEventAddEdit.html";

$scope.search.bcLedgerItems = bcLedgerItemSfs.concat(bcLedgerItemDzs);
var options = {
title: '添加单据',
data: $scope.search,
closable: true,
modal: true,
url: url,
width: 800,
height: 1200
};
var indexScope = top.angular.element("body").scope();
indexScope.showUrl(options);
} else {
GillionMsg.alert("提示信息", "请正确选择核销内容");
}
}

5. 自定义js界面加载时初始化5. 自定义js界面加载时初始化

范例说明

配置

在目前初使化方法默认是同步数据结构时已存在一个固定规则的初使化方法名称 custom${bo.boName}Init
在业务对象—方法定义，可以看到如1所说的方法名
将要初使化的自定义js写入此方法体内
将自定义js方法，写入customCcExam101Innit
到时候会在初始化中生成如下代码：
效果：在加载界面的时候可以出发自定义JS