Hand-Aurora-动态页面常见设计

超链接渲染

在动态页面布局新增超链接属性,并布局
在SC文件中渲染超链接

window['${/parameter/@layout_code}_dynamic_link_renderer'] =  function(value, record, name, config_record) {
    // 其他合同制作申请
    if (name == 'con_other_contract_number' && !Ext.isEmpty(value)){
        return '<a  href="javascript:open_con913_contract_content_query(\'' + record.id +  '\',\'' + record.ds.id +'\')">' + value + '</a>';
    }
    return value;
};

并跳转到对应页面

// 跳转其他合同制作申请,查看合同最终版文件明细
function open_con913_contract_content_query(record_id, ds_id) {
    // 当前行
    var current_record = $(ds_id).findById(record_id);
    // 其他合同制作带入的参数信息
    var apply_id = current_record.get('con_other_apply_id');
    var contract_id = current_record.get('con_other_contract_id');
    var contract_number =  current_record.get('con_other_contract_number');
    // var status = current_record.get('status');
    // var sign_status = current_record.get('sign_status');
    var url = $('con913_con_contract_content_review_link').getUrl();
    new Aurora.Window({
        id: 'con_contract_content_id',
        url: url,
        params: {
            apply_id: apply_id,
            contract_id: contract_id,
            content_type: 'NORMAL',
            // status: status,
            // sign_status: sign_status,
            winid: 'con_contract_content_id'
        },
        title: '其他合同制作申请',
        fullScreen: true
    });
}

引入JavaScript

客户端

客户端,JS引入

JS文件路径
HLS\web\javascripts
引入代码,在任意位置

<script src="${/request/@context_path}/javascripts/calculate.js"/>

服务器端

服务器端,JS引入

文件路径
HLS\web\WEB-INF\server-script\contract_print_path.js
引入代码,在SC文件开头

<a:init-procedure>
    <s:server-script import="contract_print_path.js"><![CDATA[
        $ctx.parameter.file_path = con_print_path['con_print_path'];
    ]]></s:server-script>
</a:init-procedure>

Lov框默认参数

对于动态页面中字段为ID的Lov组件,在获取时通过获取id_n的对象进而获取组件信息.
注意传参,如果没有参数,可以传入null而不是空串

//对于出差费报销的报销单,公司费用下只能看到会议费,教育经费下只能看到培训费
var head_id = get_dsid_by_basetable(window['${/parameter/@layout_code}_layoutDataSetList'], 'exp_report_headers');
var head_record = $(head_id).getCurrentRecord();
if(head_record.get('document_type')=='EXP_REPORT_TRAVEL'){
    
    var line_id = get_dsid_by_basetable(window['${/parameter/@layout_code}_layoutDataSetList'], 'exp_report_lines');
    var line_record = $(head_id).getCurrentRecord();
    //首先将查询条件清空,避免修改时出问题
    record.getField('expense_item_id_n').setLovPara('expense_item_code',null);
    //报销类型为[128]公司费用的,后边的Lov查询结果只出现会议费
    if(name == 'expense_type_id' && (value=='128' || value=='323' || value=='-103')){
                        record.getField('expense_item_id_n').setLovPara('expense_item_code','D21');
    }                                
    //报销类型为[134]教育经费的,后边的Lov查询结果只出现培训费
    if(name == 'expense_type_id' && (value=='134' || value=='329' || value=='-109')){
                        record.getField('expense_item_id_n').setLovPara('expense_item_code','J01');
    }
}  

具有查询功能的动态页面

创建,具有查询功能的动态页面,在跳转动态页面的时候传入指定参数,完成对应的动态页面的渲染.

1.创建动态页面,包含form和list,其中form为查询条件,list作为查询结果,和动态页面的渲染主体.
注意,视图需要有查询的字段
动态页面配置
2.在form中录入需要的查询字段,并设定默认值
动态页面配置
3.在list中编辑需要显示的内容,注意查询条件一定要写在对应的字段中.
动态页面配置
4.在动态页面中,传入查询参数,完成查询
动态页面配置

动态页面中参数获取规则

获得当前页面的动态布局
${/parameter/@layout_code}

获得当前动态页面的布局按钮,并隐藏,注意,一定要用动态布局

//动态页面中使用
Ext.get('${/parameter/@layout_code}_user_button1').show();

//动态页面,Form某个字段
$('${/parameter/@layout_code}_组件名_基表名_字段名').show();
Ext.get('${/parameter/@layout_code}_组件名_基表名_字段名').show();

//禁止在动态页面中使用该方法
Ext.get('HLS001_user_button1').show();

动态页面内置函数

在动态页面配置中,通过在前台配置页面,在后台编写对应JS逻辑,实现按钮组,列渲染,跳转等逻辑

用户自定义按钮触发事件.
用户按钮可以在系统管理->页面布局按钮配置,根据功能号进行匹配

window['${/parameter/@layout_code}_user_button1_layout_dynamic_click'] = function() { }

获得动态页面中数据集的ID

var ds_id = get_dsid_by_basetable(window['${/parameter/@layout_code}_layoutDataSetList'], 'cs_abc_monitor_acc')                    //传入基表的名字

动态页面中,表格内渲染超链接

window['${/parameter/@bp_seq}${/parameter/@layout_code}_dynamic_link_renderer'] = function(value, record, name, config_record, bp_seq){
    var ds_id = get_dsid_by_basetable(window['${/parameter/@layout_code}_layoutDataSetList'], 'cs_abc_monitor_acc_trx_hd');
      if(name == "bank_account_num"){
          var trx_hd_id = record.get('trx_hd_id');
          return '<a href="javascript:open_acc_detail_win(' + trx_hd_id + ')">' + value + '</a>';
          
      }  
};

直接创建超链接

window['${/parameter/@layout_code}_dynamic_link_renderer'] = function(value, record, name, config_record) {
    if (name == 'tasking_detail_id') {
        return '<a href="javascript:open_tasking_report_edit_win(\'' + record.id + '\',\'' + record.ds.id + '\')">编辑</a>';
    }
    return value;
};

动态页面提交成功

window['${/parameter/@layout_code}_on_layout_dynamic_submitsuccess'] = function(ds, record, res, bp_seq) {   }

动态页面中,提交前调用

window['${/parameter/@layout_code}_on_layout_dynamic_before_submit'] = function(ds, record) {   )                          //提交的数据集和当前行

锁屏与解屏

window['${/parameter/@layout_code}_lock_layout_dynamic_window']();                          //锁屏
window['${/parameter/@layout_code}_unlock_layout_dynamic_window']();                        //解屏

动态页面渲染超链接

// 渲染超链接
window['${/parameter/@layout_code}_dynamic_link_renderer'] =  function(value, record, name, config_record) {
     debugger;
      window['${/parameter/@layout_code}_hls_link_render_record'][record.id +  '---' + name] = record;
     if (name == 'application_number') {
         return '<a href="javascript:open_contract_win(\'' +  record.ds.id + '\',\'' + record.id + '\')">' + value + '</a>';
     }
}

动态页面事件绑定

form新增时,加载时调用

//新增和加载时调用(form)
window['${/parameter/@bp_seq}${/parameter/@layout_code}_on_layout_dynamic_form_add_and_load'] = function(ds, record, config_records, bp_seq) {   };

form查询时调用

//查询时调用(form,fieldboxcolumn)
window['${/parameter/@bp_seq}${/parameter/@layout_code}_on_layout_dynamic_form_query'] = function(ds, qpara, bp_seq) {  }

数据集保存前调用

//保存前调用
window['${/parameter/@bp_seq}${/parameter/@layout_code}_on_layout_dynamic_before_submit'] = function(ds, record) {   };

数据集保存成功后调用

//保存submitsuccess调用
window['${/parameter/@layout_code}_on_layout_dynamic_submitsuccess'] = function(ds, record, res, bp_seq) {    };

数据集保存失败后调用

//保存失败调用
window['${/parameter/@bp_seq}${/parameter/@layout_code}_on_layout_dynamic_submitfailed'] = function(ds) {   };

数据集新增时调用

//新增时调用(attach)
window['${/parameter/@bp_seq}${/parameter/@layout_code}_on_layout_dynamic_attach_add'] = function(ds, record, config_records, bp_seq) { };

数据集加载时调用

//加载时调用(attach)
window['${/parameter/@bp_seq}${/parameter/@layout_code}_on_layout_dynamic_attach_load'] = function(ds, record, config_records, bp_seq) {  };

数据集更新时调用

//更新时调用
window['${/parameter/@bp_seq}${/parameter/@layout_code}_on_layout_dynamic_update'] = function(ds, record, name, value, old_value, bp_seq) {   };

grid新增时调用

//新增时调用(grid,table,gridBox)
window['${/parameter/@bp_seq}${/parameter/@layout_code}_on_layout_dynamic_grid_add'] = function(ds, record, config_records, bp_seq) {   };

grid删除时调用

//移除事件(grid,attach,gridbox,table)
window['${/parameter/@bp_seq}${/parameter/@layout_code}_on_layout_dynamic_grid_remove'] = function(ds, record, bp_seq) {   };

grid加载时调用

//加载时调用(grid,table,gridBox)
window['${/parameter/@bp_seq}${/parameter/@layout_code}_on_layout_dynamic_grid_load'] = function(ds, record, config_records, bp_seq) {   };

grid查询时调用

//查询时调用(grid,table,gridBox)
window['${/parameter/@bp_seq}${/parameter/@layout_code}_on_layout_dynamic_grid_query'] = function(ds, qpara, bp_seq) {   };

grid选择时调用

//选择事件(grid,attach,gridbox,table)
window['${/parameter/@bp_seq}${/parameter/@layout_code}_on_layout_dynamic_grid_select'] = function(ds, record, bp_seq) {   };

grid取消选择时调用

//取消选择事件(grid,attach,gridbox,table)
window['${/parameter/@bp_seq}${/parameter/@layout_code}_on_layout_dynamic_grid_unselect'] = function(ds, record, bp_seq) {   };

grid分页改变时调用

//indexchange事件(grid,attach,gridbox,table)
window['${/parameter/@layout_code}_on_layout_dynamic_grid_indexchange'] = function(ds, record, bp_seq) {   };

锁屏事件,在锁屏时执行

//锁屏
window['${/parameter/@bp_seq}${/parameter/@layout_code}_lock_layout_dynamic_window'] = function() {  };

解屏事件,在解屏时执行

//解屏
window['${/parameter/@bp_seq}${/parameter/@layout_code}_unlock_layout_dynamic_window'] = function() {   };

图片渲染

//图片渲染
window['${/parameter/@bp_seq}${/parameter/@layout_code}_dynamic_pic_renderer'] = function(record, name, bp_seq) {   };

超链接渲染

//超链接渲染
window['${/parameter/@bp_seq}${/parameter/@layout_code}_dynamic_link_renderer'] = function(value, record, name, config_record, bp_seq) {   };

按钮渲染

//按钮渲染
window['${/parameter/@bp_seq}${/parameter/@layout_code}_dynamic_button_renderer'] = function(value, record, name, config_record, bp_seq) {   };

动态页面验证

//false为忽略校验,true为不忽略校验
window['${/parameter/@layout_code}_not_ignore_required_flag'] = true;

忽略保存前校验

//忽略保存校验方法
window['${/parameter/@layout_code}_ignore_required_before_save'] = function() {
    window['${/parameter/@layout_code}_not_ignore_required_flag'] = true;
};

动态页面获得gird表格
$('CS_AMT111_DISPOSAL_CREATE_G_TEAM_cs_amt_disposal_team_layout_grid_id')

动态页面获得gird表格的按钮
$('{/parameter/@layout_code}_组件ID_按钮ID_layout_dynamic_buttion_id')

动态页面布局紊乱

SELECT *
  FROM hls_doc_layout_screen lc
WHERE lc.tab_code = 'F_PRJ_BASIC_INFO'
   AND lc.layout_code = 'CS_PRJ_QUERY'
   AND lc.column_name IS NULL;

DELETE FROM hls_doc_layout_screen lc
WHERE lc.tab_code = 'F_PRJ_BASIC_INFO'
   AND lc.layout_code = 'CS_PRJ_QUERY'
   AND lc.column_name IS NULL;

动态页面跳转链接

在表格组件中对列渲染进行复写,实现点击后跳转到某个动态页面
动态页面跳转

打开动态页面

function render_objectDs_grid(value, record, name) {
  if (!record.isNew) {
    return '<a href="javascript:winOpen_req_pay(\'' + record.id + '\')">' + value + '</a>';
  }
}
function winOpen_req_pay(record_id) {
  var record = $('csh_payment_req_queryDs').findById(record_id);
  var param = {};
  param['function_usage'] = 'QUERY';
  param['maintain_type'] = 'READONLY';
  param['payment_req_id'] = record.get('payment_req_id');
  param['function_code'] = 'CSH501Q';
  param['winid'] = 'csh_payment_update_window';
  param['url_title'] = '付款申请';
  hls_doc_get_layout_code('csh502_get_layout_code_link_id', param, 'csh502_csh_payment_req_link_id', 'csh_payment_req_queryDs');
}

动态页面js数据绑定

JS代码

//获得报销头表信息
 var headers_id = get_dsid_by_basetable(window['${/parameter/@layout_code}_layoutDataSetList'], 'exp_report_headers'); //基表
 var records_header = $(headers_id).getAt(0);
 var document_type = records_header.get('document_type');

动态页面配置
动态页面配置
这里的基表数据可以被修改,显示的为数据查询来源的数据字段

动态页面创建

动态页面中,_n结尾的与原字段同时出现,否则LOV组件失效
动态页面中,重写查询SQL需要配置父基表

创建动态页面

首先在页面布局配置中创建动态页面
动态页面配置

引入标签

随后创建screen文件,引入标签和权限
引入标签
引入标签

页面注册

页面注册

功能定义

功能定义

布局相关联

布局配置
布局配置
布局配置

动态页面跳转

动态页面跳转

JS注册

JS注册

重写动态页面的行金额汇总

function sumFunction(datas, name) {
  var sum = 0;
  for (var i = 0;i < datas.length;i++) {
       var r = datas[i];
       var d = r.get(name);
       var n = parseFloat(d);
       if (!isNaN(n)) {
           sum = plus(sum, n);
       }
  }
  var total = (typeof(sum) == 'undefined' ? '' : parseFloat(sum));
  return '<font>' + Aurora.formatMoney(total) + '</font>';
}

动态页面,渲染时修改默认配置

重写配置
动态页面的配置信息

<a:screen xmlns:s="aurora.plugin.script"  xmlns:a="http://www.aurora-framework.org/application"  customizationEnabled="true" dynamiccreateenabled="true" trace="true">
  <a:init-procedure>
    <s:server-script><![CDATA[
            //每页显示数量,注意属性为全部小写.  动态页面_组件名_基表_ds
            var config = $config();
            var ds =  CompositeUtil.findChild(config,'dataSet','id','BP_MODIFY_ENTRANCE_G_BP_RESULT_hls_bp_master_ds');
            ds.put('autopagesize',false);
            ds.put('pagesize','100');
  	]]></s:server-script>
  </a:init-procedure>
</a:screen>

获得页面传入参数

var config = $config();
var para = $ctx.parameter;
println($ctx.toXML());
if(para.p_send_way == '律师函'){
  var obj =  CompositeUtil.findChild(config,'textArea','id','send_reason');
  obj.put('prompt','发送律师函的理由');
}

动态页面渲染链接

1.在准备跳转的页面中创建连接,获得布局

<a:link id="hls_exp400_get_layout_code_link_id" model="cont.CON500.con_contract_get_layout_code" modelaction="update"/>

2.创建动态页面的JS页面地址

<a:link id="exp_report_query_link" url="${/request/@context_path}/modules/hls_exp/HLS_EXP402/hls_exp_expense_report_query_detail.screen"/>

3.将功能号和跳转向的动态页面相关联
系统管理->维护条件值->选择:布局模板和布局配置功能级别,将功能号(静态页面)和布局代码(动态页面)关联
4.编写跳转JS

function open_exp_expense_report_modify_win(record_id, ds_id) {
    debugger;
    var record = $(ds_id).findById(record_id);
    var param = record.data;
    if ($(ds_id).validate()) {
        param['function_code'] = 'CSH980';
        param['function_usage'] = 'QUERY';
        param['url_title'] = '费用报销单查询';
        hls_doc_get_layout_code('hls_exp400_get_layout_code_link_id', param, 'exp_report_query_link', null, 'HLS_EXP402'); //维护条件值需要匹配
    }
}

5.编写列渲染

function column_detail(value, record, name) {
    return '<a href="javascript:open_exp_expense_report_modify_win(\'' + record.id + '\',\'' + record.ds.id + '\')">' + value + '</a>';
}

6.表格组件的BM文件必须关联动态页面的LV视图,并查询视图全部内容

动态页面级联

首先将ID存入
动态页面配置
选择为值列表,验证SQL查询如下
第一个不包含任何参数
动态页面配置
第二个包含第一个的查询参数动态页面配置
并在附件信息中添加LOV的级联参数
动态页面配置
修改数据库查询视图
为新增加的字段增加子查询,其中,新字段为原有字段基础上增加_n进行确认
动态页面配置

动态页面的转移

将测试中的动态页面,转移到生产上.
执行该代码可以实现将动态页面的设置生成一个数据库文件,执行数据库文件进而完成动态页面的配置

/*  动态页面的配置在不同数据库间的执行  */
BEGIN
   sys_load_hls_doc_layout_pkg.export_all(p_layout_code      => 'CS_AMT_REPORT_URGENT',         -- 动态页面的组件名
                                          p_create_file_flag => 'N',                            -- 是否创建文件
                                          p_create_file_name => 'CS_AMT_REPORT_URGENT',         -- 动态页面
                                          p_user_id          => 1);
END;
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值