事件配置

1.基本功能 1.基本功能

  • 页面上的元素可以配置不同的事件。目前平台可视化提供的事件类型有容器事件控件事件。容器事件一般是用于布局上的,控件事件则用于具体的控件上。
  • 控件事件有:焦点离开、下拉框选中、键盘键入、change事件、日期选中后事件、联想控件清空事件、联想控件选中事件、向导式跳转前、向导式跳转后、上传前事件、上传事件、上传删除前事件、上传删除事件、点击事件。
  • 容器事件有:焦点离开、下拉框选中、键盘键入、表格选中行事件、表格双击事件、change事件、加载成功回调事件、布局元素显示隐藏事件、布局元素只读事件、权限路径配置、容器点击事件、日期选中后事件、表格全选中事件、联想控件选中事件、表格勾选行事件、联想控件清空事件、表格数据源加载后事件、树选中事件、树请求参数、向导式跳转前、向导式跳转后、新表格选中后事件、页签选中事件
  • 1.1.联想控件选中事件 1.1.联想控件选中事件

    联想控件选中值时,需要选中时做一些逻辑扩展。此时可以通过联想控件的选中事件来操作。此处举例联想控件选中时给其他字段进行赋值操作。页面中有分组名称发货人,其中有字段:编码(联想控件)、发货人(多行文本框)、地址(多行文本框)、国家地区(联想控件)。编码选中时,需要给发货人、地址、国家地区等字段进行赋值。
    联想控件选中事件1

    1.2.DIV显示隐藏配置 1.2.DIV显示隐藏配置

    页面上根据字段值取控制某个区域的界面显示和隐藏可以采用div显示隐藏控制。例如页面中有上面部分为主对象信息,下面部分有两个TAB页面。其中一个TAB收费明细(html结构为div)需要根据页面中的【分批到货】(分批到货界面为复选框)勾选来控制界面的显示和隐藏。当勾选【分批到货】时候,费用明细显示。当不勾选的时候,费用明细不显示。
    div显示隐藏控制-效果1
    div显示隐藏控制-效果2

    2.配置方法 2.配置方法

    2.1.联想控件选中事件 2.1.联想控件选中事件

    配置

    1. 对象建模–业务对象–业务对象管理:编辑业务对象,点击【可视化布局】按钮,进入到可视化界面。
    2. 选中联想控件字段。在右侧的事件页签中找到联想控件选中事件并勾选。其中执行类型选择JS函数定义执行内容填写方法,格式为【方法名称(list,item)】。item为联想控件选中的行对象。举例:【shipperCodeMfOrderExtendForMnfOnSelectedRow(list,item)】。
      联想控件选中事件2
    3. 保存数据, 提交业务对象,生成html代码即可。
    4. 以上步骤结束,则平台操作完成。步骤2中有引入对应的方法名称,因此需要在二次扩展js文件中编写赋值逻辑。此步骤可以参考【3.1联想控件选中事件扩展】

    2.2.DIV显示隐藏配置 2.2.DIV显示隐藏配置

    配置

    1. 对象建模–业务对象–业务对象管理:编辑业务对象,点击【可视化布局】按钮,进入到可视化界面。
    2. 选中要隐藏的DIV或者TAB,不要选择TABS。在右侧事件页签中找到布局元素显示隐藏事件并勾选。其中执行类型选择Angular公式执行内容填写表达式。表达式为真时,DIV显示,反之不显示。此处举例【testExam3401.isPartDelivery==’X’】,其中【testExam3401.isPartDelivery】为分批到货ng-model名称,X分批到货勾选时的值。
      显示隐藏1
    3. 保存数据, 提交业务对象,生成html代码即可。

    代码

    在页面的html文件中,费用明细tab上生成对应的代码有个ng-show标签。

    <g-tab data-title=" 费用明细" ng-show="testExam3401.isPartDelivery=='X'" >
    

    3.常用扩展 3.常用扩展

    3.1.联想控件选中事件扩展 3.1.联想控件选中事件 扩展

    在本地工程中打开二次开发扩展js文件。编写扩展方法的逻辑。举例代码:

     /*
                 发货人联想控件选中赋值
                 lixq  2019-07-22
     */
            $scope.shipperCodeMfOrderExtendForMnfOnSelectedRow = function(list,item){
                $scope.mfOrderExtendForMnf.shipperPostcode = item.postcode;
                $scope.mfOrderExtendForMnf.shipperMobilePhone = item.mobilePhone;
                $scope.mfOrderExtendForMnf.shipperCityName = item.cityName;
                $scope.mfOrderExtendForMnf.shipperProvinceName = item.provinceName;
                $scope.mfOrderExtendForMnf.shipperCountryCode = item.countryCode;
                $scope.mfOrderExtendForMnf.shipperContactPerson = item.contactPerson;
                $scope.mfOrderExtendForMnf.shipperFax = item.fax;
                $scope.mfOrderExtendForMnf.shipperEmail = item.email;
                $scope.mfOrderExtendForMnf.shipperAddress = item.shipperCneeNotifyAddress;
                $scope.mfOrderExtendForMnf.shipperNameCn = item.shipperCneeNotifyNameCn;
                $scope.mfOrderExtendForMnf.shipperTel = item.tel;
                $scope.mfOrderExtendForMnf.shipperCountryName = item.countryName;
                $scope.mfOrderExtendForMnf.shipperName = item.shipperCneeNotifyName;
                $scope.mfOrderExtendForMnf.shipperTaxId = item.taxId;
                $scope.mfOrderExtendForMnf.shipperAuCode = item.auCode;
            }
    

    4.版本更新 4.版本更新