Hand-Aurora-screen页面常见交互

囧囧 O_o

已于 2022-02-10 21:01:36 修改

阅读量798

点赞数 1

分类专栏： Hand-Aurora 文章标签： aurora

于 2022-02-10 16:09:20 首次发布

本文链接：https://blog.csdn.net/jioujiou520/article/details/122863212

版权

Hand-Aurora 专栏收录该内容

12 篇文章 10 订阅

订阅专栏

本文介绍了如何在JavaScript中操作Excel文件，包括获取图表组件ID并调用内部方法导出，以及通过editorFunction控制表格列的编辑状态。还涉及了附件上传、屏幕跳转、锁定与解锁功能以及页面事件绑定等开发细节。

摘要由CSDN通过智能技术生成

导出Excel

获取图表组件的id,调用其内部方法,实现Excel文件的导出

function export(){
     $('图表组件的id')._export();               //实现将其的导出
}

控制表格是否可以编辑

表格列,使用editorFunction函数,控制是否编辑

<a:column name="con_impairment_radio" editorFunction="detail_result_grid_edito_fun" prompt="&lt;font color=&apos;red&apos;&gt;资产减值比例(0~1)&lt;/font&gt;" width="120"/>

编辑器

<a:editors>
    <a:numberField id="detail_result_grid_nf" allowDecimals="true" decimalPrecision="6" max="1" min="0"/>
</a:editors>

控制函数,当可以编辑时,返回编辑器的ID

function detail_result_grid_edito_fun(record,name){
    var status = '${/parameter/@status}';
    if(name == 'con_impairment_radio'){
        if (status == 'APPROVAL' || status == 'PASS'){
            return '';
        }
        var this_time_result = record.get('this_time_result');
        if(this_time_result == 'SECONDARY' || this_time_result == 'SUSPICIOUS' || this_time_result == 'LOSS'){
            return 'detail_result_grid_nf';
        }
        return '';
    }
}

附件上传相关

-- 附件明细,附件名,外键信息
select * from fnd_atm_attachment t ;
-- 附件类型,下载主键,日期信息
select * from fnd_atm_attachment_multi t;


-- 附件上传地址
/hls/uploadFile.screen?table_name=CON_OTHER_CONTRACT_APPLY&header_id=4184&_dc=1517539777625

前台上传下载文件地址
http://127.0.0.1:8080/hls/uploadFile.screen?table_name=CS_CSH_PAYMENT_REQ_HD&header_id=73666

解锁屏与弹窗提示

局部解锁屏

Aurora.Masker.mask(Ext.getBody(), '${l:HLS.SAVING}');        //锁屏     第二个参数为锁屏提示
Aurora.Masker.unmask(Ext.getBody());                         //解屏

浏览器解锁屏,仅限于动态页面

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

窗口锁屏与解屏,工作流使用

Aurora.Masker.mask($('${/parameter/@winid}').wrap, '${l:HLS.EXECUTING}');        //锁屏
Aurora.Masker.unmask($('${/parameter/@winid}').wrap);                        //解屏

任意锁屏与解屏

Aurora.Masker.mask(Ext.get('zj_wfl_approve_win').dom, '正在提交');        // 锁屏
Aurora.Masker.unmask(Ext.get('zj_wfl_approve_win').dom);                    // 解屏

弹窗提示组件,阻止当前JS执行

Aurora.showMessage('${l:PROMPT_MESSAGE}', '提示内容', null, 250, 100);       -- 后三个参数可以不写
Aurora.showMessage('${l:PROMPT}', '提示内容');

弹窗选择框组件

Aurora.showConfirm('${l:HLS.PROMPT}', '提示内容', function okFun() {
    // 点击确定时的回调函数
});

弹窗选择框组件

Aurora.showOkCancelWindow('提示','确定退款选中的保险费?',function(){
   //确定的回调函数
});

绿莹莹的提示框,仅作为提示

Aurora.SideBar.show({
    msg: '提示内容',
    duration: 2000
});
// 修改宽度
document.getElementsByClassName('item-slideBar')[0].style.width='200px';

Aurora.SideBar.show({msg: '提示内容',duration: 2000});

自定义锁屏函数

// winid作为传入参数时的windows的ID标签
function lock_current_window() {
    Aurora.Masker.mask($('${/parameter/@winid}').wrap,  '${l:HLS.EXECUTING}');
}
function unlock_current_window() {
    Aurora.Masker.unmask($('${/parameter/@winid}').wrap);
}

页面中绑定回车事件

在初始化函数中,增加绑定事件

Aurora.onReady(function(){
       //绑定回车事件
    document.onkeydown = function (e){
       // 兼容FF和IE和Opera    
                    var theEvent = e || window.event;    
                    var code = theEvent.keyCode || theEvent.which  || theEvent.charCode;
       if(code == 13){
           csh507_payment_query();
       }
    };
});

动态修改Lov

var headrec = $('demand_result_ds_nxt').getCurrentRecord();
if (!Ext.isEmpty(record.get('demand_source'))) {
    var dsource = record.get('demand_source');
    var field = record.getMeta().getField('source_number');
    var mapping = [{
        from: 'source_number',
        to: 'source_number'
    }, {
        from: 'equipment_amount',
        to: 'equipment_amount'
    }, {
        from: 'bp_name',
        to: 'bp_name'
    }, {
        from: 'source_number_status_desc',
        to: 'source_number_status_desc'
    }, {
        from: 'oto_cont_status_desc',
        to: 'oto_cont_status_desc'
    }, {
        from: 'oto_cont',
        to: 'oto_cont'
    }, {
        from: 'finance_amount',
        to: 'finance_amount'
    }, {
        from: 'deposit',
        to: 'deposit'
    }, {
        from: 'lease_charge',
        to: 'lease_charge'
    },{
       from: 'project_schedule',
       to: 'project_schedule'
   },
   {
       from: 'payment_proc_status',
       to: 'payment_proc_status'
   },
   {
       from: 'payment_audit_pass_date',
       to: 'payment_audit_pass_date'
   },
   {
       from: 'expected_amount',
       to: 'expected_amount'
   },
   {
       from: 'cashflow_id',
       to: 'ref_cashflow_id'
   },{
       from: 'document_id',
       to: 'document_id'
   },{
       from: 'bp_id',
       to: 'bp_id'
   }];
    //alert(dsource);
    switch (dsource) {
    case 'CHANCE':
        chance_lov(field, mapping, record, headrec);
        break;
    case 'CONTRACT':
        contract_lov(field, mapping, record, headrec);
        break;
    case 'PROJECT':
        project_lov(field, mapping, record, headrec);
        break;
    default:
        break;
    }
}

新增或移除一行按钮

手动新增grid一条数据

//手动新增记录
function add_new_record(){
       //校验当前新增数据的条数,不能超过一条
    var records = $('result_ds').getNewRecords();
    debugger;
    if( records.length && records.length >= 1){
        return;
    }
    $('grid_id').selectRow($('result_ds').create());
}

手动移除grid一条数据,不是删除

$('grid组件ID').clear();

页面跳转方式

静态页面跳转动态页面
首先引入动态页面

<a:screen-include  screen="modules/cont/CON500/con_contract_get_layout_code.screen"/>

然后引入要跳转的链接

<a:link id="动态页面通用连接,建议跟功能名一致,避免ID重复"  model="cont.CON500.con_contract_get_layout_code" modelaction="update"/>
<a:link id="将要跳转的动态页面screen"  url="${/request/@context_path}/modules/cont/CON923/con_other_seal_apply.screen"/>

最后准备跳转的参数信息

var param = {
  apply_number: apply_number,
  function_code: 'CON923D',   // 功能代码
  function_usage: 'CREATE',   // 页面显示方式, CREATE,MODIFY,QUERY,分别对应显示方式
  url_title: '新建印章申请',    // 页面显示标题
  layout_debugger_flag: 'Y',  // 是否开启调试
  approval_state : 'NEW'      // 其他一些业务参数
};
// 参数列表: 动态页面通用Link的ID, 参数, 将要跳转动态页面的Screen的Link的ID, 动态页面的数据集便于查询, 动态页面的功能代码
hls_doc_get_layout_code('动态页面通用Link的ID', param,  '跳转页面Screen的Link的ID', null, 功能代码);

跳转信息也可以这么填写

var param = record.data;
param['con_apply_id'] = record.get('con_other_seal_apply_id');  // 对应明细表的主表ID
param['flag_sign'] = flag_sign;       // 业务参数
param['function_code'] = 'CON923D';   // 功能代码
param['function_usage'] = 'MODIFY';   // 页面显示方式
param['url_title'] = '印章申请明细';    // 页面标题
param['layout_debugger_flag'] = 'Y';  // 开启调试

// 参数列表:    动态页面的通用Link的ID,    参数,    ,跳转动态页面Link的ID    ,对应功能的基表(功能_组件名_表名(小写)_ds,     功能代码)
hls_doc_get_layout_code('con919_get_layout_code_link_id',  param, 'con923D_apply_link', 'CON923_G_RESULT_con_other_seal_apply_ds',  'CON923D');

这么填写

// 获得对当前功能的基表对应的组件数据集ID
ds_id =  get_dsid_by_basetable(window['${/parameter/@layout_code}_layoutDataSetList'], 'con_other_seal_apply');
// 通过record_id获得当前的数据集的ID
var record = $(ds_id).findById(record_id);
// 业务参数
var param = record.data;
param['flag_sign'] = flag_sign;        // 业务参数
param['function_code'] = 'CON923D';    // 功能代码
param['function_usage'] = 'QUERY';     // 页面显示方式
param['url_title'] = '印章申请明细';     // 页面标题
param['layout_debugger_flag'] = 'Y';   // 是否开启调试
param['default_value_dsid'] = ds_id;   // 默认的数据集的ID
param['screen_width'] = 720;           // 页面显示宽度
param['screen_height'] = 545;          // 页面显示高度

// 参数列表: 动态页面通用Link的ID, 参数, 跳转动态页面的Link的ID, 数据集的ID, 跳转动态页面的功能代码
hls_doc_get_layout_code('get_layout_code_link_id', param,  'con923D_apply_link', ds_id, '${/parameter/@layout_code}');

常见的param参数

param['业务参数'] = XXX;        // 业务参数
param['function_code'] = 'CON923D';    // 功能代码
param['function_usage'] = 'QUERY';     // 页面显示方式 CREATE,MODIFY,QUERY,分别对应显示方式
param['url_title'] = '页面标题';     // 页面标题
param['layout_debugger_flag'] = 'Y';   // 是否开启调试
param['default_value_dsid'] = ds_id;   // 默认的数据集的ID
param['screen_width'] = 720;           // 页面显示宽度
param['screen_height'] = 545;     // 页面显示高度

修改为当前时间

JS中修改字段时间为当前系统时间

Aurora.onReady(init);
function init() {
    var record = $('show_result_ds').getCurrentRecord();
        record.set('reverse_date' ,Aurora.formatDate(new Date()));
        record.set('total_amount' ,'${/parameter/@total_amount}');     
}

对数据集的属性进行校验

可以主动触发校验
$('数据集').validate()

1.在数据集字段定义中设定校验函数.

2.在处理函数中,定义业务规则.保存时,数据进行校验.错误信息为返回中定义的.

数据集新增行记录

新增一条行记录

var record = new Aurora.Record({
    parent_role_function_group_id: '',
    role_id: '${/parameter/@role_id}',
    enabled_flag: 'Y'
});
dataset.add(record);

自定义表格新增记录按钮

1.为表格组件设置ID
2.重写表格组件的新增方法,指向为自己写的方法
3.为方法中编写逻辑,当新增数量大于一条时,停止新增
4.为当前表格选择为一条新的记录
定义按钮事件
新增数据

//方法
function ftp_101_grid_add() {
    $('表格ID').showEditorByRecord($('表格数据集').create());
}

异步请求

注意,由于异步请求的关系,不能实现JS执行的顺序,因此.为了便于前后端分离
数据库校验和数据库执行写在两个存储过程中,实现先校验,再执行

前台新增插入修改保存

var records = result_ds.getAll();
              var arr = [];
var type = '';
for (var i = 0,
     len = records.length;i < len;i++) {
     var record = records[i];
     if (record.isNew) {
         type = 'INSERT';
     } else if (record.modified) {
         type = 'UPDATE';
     }
     if (record.dirty) {
         arr.push({
             fund_cost_rate_number:  record.get('fund_cost_rate_number'),
             description: record.get('description'),
             validate_from: record.get('validate_from'),
             validate_to: record.get('validate_to'),
             enabled_flag: record.get('enabled_flag'),
             closing_price : record.get('closing_price'),
             raise_credit_price :  record.get('raise_credit_price'),
             base_ftp : record.get('base_ftp'),
             type: type,
             _status: 'execute'
         });
     }
}

修改为当前时间

// JS中修改字段时间为当前系统时间
Aurora.onReady(init);
function init() {
    var record = $('show_result_ds').getCurrentRecord();
        record.set('reverse_date' ,Aurora.formatDate(new Date()));
        record.set('total_amount' ,'${/parameter/@total_amount}');     
}

页面值栈获取

查询BM文件,输出到页面值栈,并通过JS调用获取

页面值栈中获取数据
引用查询来源
修改数据

通过<data-set>获取预制文本

<a:fields>
    <a:field name="detail_id"/>
    <a:field name="employee_id" defaultValue="${/parameter/@employee_id}" readOnly="true"/>
    <a:field name="employee_name" defaultValue="${/model/employee_path/record/@employee_name}" readOnly="true"/>
    <a:field name="credit_advance_quota" readOnly="true" required="true"/>
    <a:field name="operator_id" defaultValue="${/session/@user_id}" readOnly="true"/>
    <a:field name="operator_name" defaultValue="${/model/user_path/record/@description}" readOnly="true"/>
    <a:field name="operation_date" readOnly="true"/>
</a:fields>

switch…case语法

SWITCH语法
可以根据页面参数,决定渲染的哪些JS片段

<a:switch test="/parameter/@credit_display_flag">
<a:case value="Y">
    <script><![CDATA[
            
           zjwfl5110_ApproveChecker_add('agree', function(type){
               if('${/parameter/@credit_display_flag}'=='Y' && type=='agree'){
                   save_model(false);
               }
               if('${/parameter/@credit_display_flag}'=='Y' && type=='refuse'){
                   save_model(true);
               }
               return true;
           });
           
    ]]></script>
</a:case>
</a:switch>

打开隐藏窗口

Excel无窗口导出

//Excel导出,导出窗口
function export_apply(){
  debugger;
  var records = $('result_ds').getSelected();
  if(records.length==0){records = $('result_ds').getAll()}
  var arr = [];
  for (var i=0 ; i<records.length ; i++){
    var record = records[i];
    var apply_id = record.get('apply_id');
    arr.push({'apply_id':apply_id,'_status':'insert'});
  }

  //插入临时表..
  Aurora.request({                                                       //异步请求
    url: $('exp_report_pay_fund_pay_export_svc_link').getUrl(),     //请求URL
    para: {                                                         //传入参数
      list:arr
    },
    scope: this
  });
  debugger;
  new Aurora.Window({
    id: 'exp_report_pay_fund_pay_export',
    url: $('exp_report_pay_fund_pay_export_link').getUrl(),
    title: '资金支付明细导出',
    hidden:'true'
  });
  // $('exp_report_pay_fund_pay_export').close();
}

绑定事件

function loadt(){
  $('export_result_ds_grid')._export();
  setTimeout(function(){$('exp_report_pay_fund_pay_export').close();},500);
}
<a:dataSet id="export_result_ds" autoQuery="true" model="hls_exp.HLS_EXP502.exp_report_pay_fund_pay_export" queryDataSet="export_query_ds">
  <a:events>
    <a:event name="load" handler="loadt"/>
  </a:events>
</a:dataSet>

弹窗关闭后刷新父页面

关闭窗口

数据变化检查

数据变化

新增编辑或者只读页面

根据访问情况,对同一个窗口实现窗口的只读或者填入数据
调用方法时,向新页面传递两个参数, function_type 表示当前窗口的类型,为只读.相应的,传入查询条件的主键ID

新建窗口的时候,执行 alterload() 函数.
触发函数

这个函数首先获取父页面传入的布局参数.如果是修改更新,则查询数据库后封装进入apply_header_ds中.
如果是只读页面,则查询后,隐藏相应的操作按钮,对每个字段的属性设置为只读.

页面立即转发

跳转页面

 window.location.href=$('你定义的link').getUrl();

囧囧 O_o

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
4
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录