常用前端函数

1 前端扩展开发指导


通过图片来理解界面上元素分别是由什么model构成,在需要对相关控件进行扩展时, 调用相应model的方法及事件。例如需要对下拉项——性别进行扩展,在选中下拉中的性别为女时, 设置界面上是否怀孕为可编辑;选中下拉中的性别为男,设置界面上是否怀孕为不可编辑。 此时需要获取的model为下拉项对应的ListModel,调用ListModel的afterSelect事件, 获取ListModel选中的值进行判断,然后设置是否怀孕控件的可编辑状态。

前端扩展开发指导

2 常用前端函数

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

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()
  }
}

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

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

2.3 保存前校验

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;
    }
  });
}

2.5 表格选中行

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

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

function (event) {
  var viewModel = this;
  viewModel.on("modeChange",function (data) {
            if(data == "add"){
                  viewModel.get("button24rj").setVisible(true);
            }else{
                  viewModel.get("button24rj").setVisible(false);
            }
          });
}

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

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

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

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

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

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

2.11 删行前弹出确定框

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;
         });
}

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

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可编辑

       }
}

2.13 动态设置控件状态

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

2.14 删除行后处理

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);
      }
  });
}

2.15 编辑表格单元格后事件

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);
        }
      }
  });
}

2.16 表格里面的参照实现过滤

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);
                });
}

2.17 监听图片改变事件


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

2.18 常用事件函数


//设置时间
  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;


  };

2.19 常用判断字符串是否为空


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

2.20 参照框确定按钮监听事件


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

2.21 前端直接请求第三方接口

可能会存在跨域问题,建议通过后端请求第三方


function  get (data,callback) {
    window.URL = window.URL || window.webkitURL;
    var xhr = new XMLHttpRequest();
    xhr.open("get", data, true);
    xhr.responseType = "blob";
    xhr.onload = function () {
      if (this.status == 200) {
        var blob = this.response;
        callback();
      }
    };
    xhr.send();
  };

2.21 触发打开另一个单据页面


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 line  = event.params.index;
  var id = viewModel.getGridModel().getRow(line).id;
  let data = {
    billtype: 'Voucher',// 单据类型
    billno: '68081b7b',// 单据号
    params: {
      mode: 'edit', // (编辑态、新增态、浏览态)
      id:id
    },
  };
  cb.loader.runCommandLine('bill', data, viewModel);
}

获取卡片页面的单据状态


var currentState = viewModel.getParams().mode;

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

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);
Copyright © 用友客户成功部 2020 all right reserved,powered by Gitbook修订时间: 2020-12-22 13:40:00

results matching ""

    No results matching ""