常用前端函数

前端扩展开发指导


通过图片来理解界面上元素分别是由什么model构成,在需要对相关控件进行扩展时, 调用相应model的方法及事件。

前端扩展开发指导
Model常用方法

常用前端函数

页面初始化->设置默认值(前端函数)


function (event) {
  viewModel.get('userid').setValue(newPseudoGuid());
  viewModel.get('startdate').setValue(formatDate(new Date()));
  function formatDate(date){
    var month = date.getMonth()+1;
    return date.getFullYear()+"-"+month+"-"+date.getDate()
  }
}

初始化自定义按钮绑定点击事件


function (event) {
  var viewModel = this;
  viewModel.get('button5ad').on('click', function () {
    var rows = viewModel.getGridModel().getSelectedRows();
    console.log(rows);
  })
}

保存前校验

function (event) {
  var viewModel = this;
  //设置保存前校验
  viewModel.on("beforeSave", function(args){
      var jieyongriqi = viewModel.get("jieyongriqi").getValue();
      var guihairiqi = viewModel.get("guihairiqi").getValue();
      const isAfterDate = (dateA, dateB) => dateA > dateB;
      if(!isAfterDate(guihairiqi, jieyongriqi)){
        cb.utils.alert("归还日期要大于借用日期")
        return false;
      }
  })
}

列表批量删除及表格行删除

绑定到列表初始化函数里面

function (event) {
  var viewModel = this;
  viewModel.on('beforeBatchdelete',function(params){
    var check = true;
    var selected = JSON.parse(params.data.data);
    selected.forEach((row)=>{
      //row循环的行数据
      if('2' ==row.new1){
        check = false;
        return;
      }
    });
    return check;
  });
}

卡片页面删除

function (event) {
  var viewModel = this;
  viewModel.on('beforeDelete',function(params){
    var data = JSON.parse(params.data.data);
    if('2' ==data.new1){
        return false;
    }
  });
}

删行前弹出确定框

function (event) {
  var viewModel = this;
  viewModel.on("beforeDeleteRow",function (args) {
         var returnPromise = new cb.promise();//同步
              cb.utils.confirm('确定要停用吗?', function(){ //默认异步
                //获取选中行
                var data = viewModel.getGridModel().getRows()[args.data[0]];
                return returnPromise.resolve();
              },function (args) {
                cb.utils.alert("点击了取消");
                returnPromise.reject();
              });
              return returnPromise;
         });
}

表格选中行

function (event) {
  var viewModel = this;
  var gridModel = viewModel.getGridModel();
  gridModel.on('afterSelect', function (data) {
        cb.utils.alert(data);
    });
}

表格自定义按钮获取选中行数据

function (event) {
  var viewModel = this;
  viewModel.get('button5vf').on('click', function (args) {
    var currentRow = viewModel.getGridModel().getRow(args.index);
  })
}

卡片界面枚举清空及设置默认值

  //ListModel方法及事件
   var sexModel=viewModel.get("sex");  //获取ListModel

   sexModel.clear();//ListModel清空方法

   sexModel.setValue(2); //ListModel设值

动态设置控件状态

function (event) {
  var viewModel = this;
  var param = viewModel.get("new1");
  param.setState("bIsNull",false);
  cb.utils.alert(param);
}

表格里面的参照实现过滤


function (event) {
  var viewModel = this;
  var girdModel = viewModel.getGridModel();
  girdModel.getEditRowModel().get('ref1022_id').on('beforeBrowse', function (data) {
                    var condition = {
                        "isExtend": true,
                        simpleVOs: []
                    };
                    condition.simpleVOs.push({
                        field: 'new1',
                        op: 'eq',
                        value1: 11
                    });
                    this.setFilter(condition);
                });
}

监听图片改变事件


function (event) {
  var viewModel = this;
  var picture = viewModel.get("tupian");
  picture.on('onChange',function(date){
     filelist = date.fileList;
     console.log(filelist);
   });
}

参照框确定按钮监听事件


var ref = viewModel.get('ref_name');
ref.on('afterReferOkClick',function(data){
   //参照选择的数据
   console.log(data);
})

触发打开另一个单据页面


function (event) {
  var viewModel = this;
  let data = {
    billtype: 'Voucher',// 单据类型
    billno: '68081b7b',// 单据号
    params: {
      mode: 'add', // (编辑态、新增态、浏览态)
    },
  };
  cb.loader.runCommandLine('bill', data, viewModel);
}

查询区动态设置默认值并过滤

function (event) {
  var viewModel = this;
  var bh = viewModel.get("params").abnormalevent;
  viewModel.on('afterMount', function(){
    // 获取查询区模型
    const filtervm = viewModel.getCache('FilterViewModel'); 
    filtervm.on('afterInit', function () {
      // 进行查询区相关扩展
      filtervm.get('abnormalevent').getFromModel().setValue(bh);
      });
  });
}

设置表格整行禁用

var gridModel = viewModel.getGridModel();
gridModel.setRowState(行号,'disabled',true);

卡片页面设置系统按钮的隐藏

function (event) {
  var viewModel = this;
    viewModel.on('afterRule',function(event){
    viewModel.get('btnBizFlowPush').setVisible(false);
  })
}

设置布局(容器)的隐藏

viewmodel.execute('updateViewMeta', { code: 'cGroupCode', visible: false });

列表页面数据取消自动查询


function (event) {
  var viewModel = this;
  viewModel.getParams().autoLoad = false;
}

多个表格情况下,获取指定表格


function (event) {
  var viewModel = this;
  //表格的childrenfield属性值
  var gridmodel = viewModel.get('childrenfield');
}

切换页签进行数据过滤

function (event) {
  var viewModel = this;
  var currentTab = "tabpane5mi";

  viewModel.on('beforeSearch',function(args){
    args.isExtend = true;
    var commonVOs = args.params.condition.commonVOs;  //通用检查查询条件
    var reqValue = currentTab =="tabpane5mi"?"页签1":"页签2";
    commonVOs.push({
        itemName:'new1',
        op:'eq',
        value1:reqValue
    });
  })


  viewModel.on('afterTabActiveKeyChange',function(info){
    const {key} = info;
    if(key=="tabpane5mi"){
      //页签1
      currentTab = "tabpane5mi";
    }else{
      //页签2
      currentTab = "tabpane9sd";
    }
    const filtervm = viewModel.getCache('FilterViewModel');
    filtervm.get('search').execute('click',{model:viewModel,solutionid:filtervm.getCache('schemeId')});
  })
}

列表页面表格行按钮控制显示隐藏


function (event) {
  var viewModel = this;
  //获取当前的model
  let gridModel = viewModel.getGridModel();
            //afterSetDataSource界面加载完成后,对数据进行修改
            gridModel.on('afterSetDataSource', () => {
            //获取列表所有数据
                const rows = gridModel.getRows();
            //从缓存区获取按钮
                const actions = gridModel.getCache('actions');
                if (!actions) return;
                const actionsStates = [];
                rows.forEach(data => {
                    const actionState = {};
                    actions.forEach(action => {
                //设置按钮可用不可用
                        actionState[action.cItemName] = { visible: true };
                        if(action.cItemName == 'btnDelete'){
                            if(data.enable==1){
                                actionState[action.cItemName] = { visible: false };
                            }
                        }
                    });
                    actionsStates.push(actionState);
                });
                setTimeout(function(){
                  gridModel.setActionsState(actionsStates);
                },50);

            });
}

希望组织不受权限控制(特殊场景)


viewModel.get("SalesOrgVO_name").on('beforeBrowse', function (data) {
   data.externalData = {
      "noPermissionRequired": true
    }; 
  });

显示指定枚举值


function (event) {
  var viewModel = this;
  viewModel.on('afterLoadData',function(){
    var data = [{'value':'1','text':'编史修志','nameType':'string'},{'value':'2','text':'工作察考','nameType':'string'},{'value':'3','text':'宣传教育','nameType':'string'}];
    viewModel.get('lymd').setDataSource(data);
  })
}

卡片界面根据页面状态按钮控制显示


//通过页面规则可以实现,不建议用函数
function (event) {
  var viewModel = this;
  viewModel.on("modeChange",function (data) {
            if(data == "add"){
                  viewModel.get("button24rj").setVisible(true);
            }else{
                  viewModel.get("button24rj").setVisible(false);
            }
          });
}

获取卡片页面的单据状态

//通过页面规则可以实现,不建议用函数
var currentState = viewModel.getParams().mode;

联动动态控制组件是否可编辑


//通过页面规则可以实现,不建议用函数
function (event) {
  var viewModel = this;
  var sexModel=viewModel.get("sex");  //获取ListModel
  sexModel.on('afterValueChange',function(data){
       if(data.value.value=="1"){
         let phoneModel=viewModel.get("phone"); //获取手机控件
         phoneModel.setVisible(true);
         gridModel.setReadOnly(false); //设置gridModel可编辑

       }
}

删除行后处理


//该举例是金额计算,不建议用函数,建议使用页面规则-公式
function (event) {
  var viewModel = this;
  viewModel.on('afterDeleteRow', function (args) {
      var rows = viewModel.getGridModel().getRows();
      if(rows.length>0){
        var totaldata = 0;
        rows.forEach(data => {
          if(data.jine==""||data.jine==undefined)data.jine=0;
          totaldata+=data.jine;
        });
        viewModel.get("zongjine").setValue(totaldata);
      }
  });
}

编辑表格单元格后事件


//该举例是金额计算,不建议用函数,建议使用页面规则-公式
function (event) {
  var viewModel = this;
  var gridModel = viewModel.getGridModel();
  gridModel.on("afterCellValueChange",function(data){
      var cellName = data.cellName;
      if(cellName=='jine'){
         var rows = viewModel.getGridModel().getRows();
        if(rows.length>0){
          var totaldata = 0;
          rows.forEach(data => {
            if(data.jine==""||data.jine==undefined)data.jine=0;
            totaldata+=data.jine;
          });
          viewModel.get("zongjine").setValue(totaldata);
        }
      }
  });
}

常用事件函数


//设置时间
  var formatDate = function (date){
    var y = date.getFullYear();
    var m = date.getMonth()+1;
    m = m < 10 ? '0' + m : m;
    var d = date.getDate();
    d = d < 10 ? ('0'+d )  : d; 
    return y + '-' + m + '-' + d;

  };
  //设置时间带时分秒
  var formatDateTime = function(date){
    var y = date.getFullYear();
    var m = date.getMonth()+1;
    m = m < 10 ? '0' +m : m;
    var d = date.getDate();
    d = d < 10 ? ('0'+d) : d;
    var hh = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
    var mm = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
    var ss = date.getSeconds() < 10 ? "0" + date.getSeonds() : date.getSeconds();
    return y + '-' + m + '-' + d + ' '  + hh + ':' + mm + ':' + ss;


  };

常用判断字符串是否为空


//判断字符是否为空的方法
  function isEmpty(obj){
    if(typeof obj == "undefined" || obj == null || obj == ""){
        return true;
    }else{
        return false;
    }
  }

更改输入框为密码框

function (event) {
  var viewModel = this;
  viewModel.on('afterMount',function(){
    //ID:  页面编码|字段编码
    var inputPas = document.getElementById("9978d74e|new1").getElementsByTagName("input")[0];
    inputPas.type = 'password';
  });
}

设置树结构显示多个字段


//目前支持直接配置,不建议用函数
function (event) {
  var viewModel = this;
  viewModel.on('afterMount',function(){
    var treeModel = viewModel.getTreeModel();
    treeModel.setState('titleField',['code','name'])
  })
}
Copyright © 用友 -【生态技术部】 2021 all right reserved,powered by Gitbook修订时间: 2022-11-03 14:40:58

results matching ""

    No results matching ""