用友Bip部分应用构建前端代码纪要

一.组件

1.1 多页签的子页签在一定条件下进行隐藏

viewMoel.execute('updateViewMeta',{ code: '子页签的cGroupCode', visible: false })

1.2 树形表配置树形链接查询才可以通过树表数据双击进入详情

1.3 多页签中子页签的表格中放大器隐藏

viewModel.get('btnMax_b7ae8ce3cd76495bb8c3f7717c8d8490').setVisible(false); 其中btnMax是固定的，_后面跟的是 多页签 的cGroupCode

1.4 点击按钮使本页面一个子页签打开

viewModel.execute('updateViewMeta',{activeKey: 'fb016a0082924140bc6a11f919558acc'}) activeKey是子页签的cGroupCode

1.5 弹页面

1、在页面中配置一个cControlType=modal的容器，容器中配置想要显示的组件
2、调用方法弹出容器区域
3、支持指定弹窗宽度，在cGrupCode对应容器的cStyle中配置width属性；当width值大于1时为px单位，如：800（是指800px）；当width值小于1时为百分比，如：0.8（是指定宽度占比80%）

viewModel.communication({
    type: 'modal',
    payload: {
        mode: 'inner',
        groupCode: '容器区域cGroupCode',
        viewModel: viewModel,
        data: { ... }
  }
})

1.6 表格设置高度

viewModel.getGridModel().setState('fixedHeight', 300);
和扩展属性 fixedHeight  配置 数字 值  可以一起使用

1.7 多页签切换

gridModel.on('beforeTabActiveKeyChange',function(args){console.log(arg)})

1.8 返回强制刷新(尽量别用,后续问题多多)

window.location.reload()

1.9 树表详情页面beforeSave事件可以让上级分类值改变

//将数据保存为js对象
const res = JSON.parse(data.data.data);
//上级分类赋值为输入框内容
res.parent = viewmodel.get('parent').getValue();
//js对象转为json字符串
const res2 = JSON.stringify(res);
//赋值
data.data.data = res2;

1.10 调用按钮

viewModel.get('button38jd').execute('click');

1.11 主子表导入时主表手工码等于子表中主表手工码

1.12 设置文本框输入长度

yya,get('new1').setState('iMaxLength',5)

1.13 设置表格行上下拖拽

gridModel.setRowDraggable(true);

1.14 搜索区默认方案隐藏方法：查询区的扩展属性中增加

"bHideFilterScheme": true

1.15 表格取消复现框

  var gridModel = viewModel.getGridModel();
  //设置取消复现框
  gridModel.setState("showCheckBox",false);
  //或者
  gridModel.setShowCheckbox(false);

1.16 根据id赋值名称

let item = viewModel.get('staffNew_name');
cb.utils.triggerReferBrowse(item, [{ field:'id', op:'eq',value1:'1603446359739858947'}]);

1.17 搜索框一级部门筛选

树的筛不了,树形参照改为列表参照

viewMoel.on('afterMount',function(data){
    var filterViewModelInfo = viewModel.getCache('FilterViewModel');
    //设置搜索框一级部门数据过滤
    filterViewModelInfo.on('afterInit',function(args){
        filterViewModelInfo.get('c_unit').getFromModel().on('beforeBrowse',function(data){
            let myFilter ={"isExtend":true,simpleVOs:[]};
            myFilter.simpleVOs.push({
                field:"level",
                op:"eq",
                value1:'1.00'   
            });
            filterViewModelInfo.get('c_unit').getFromModel().setFilter(myFilter);
        })
    })
})

1.18 枚举筛选

列表页

let gridModel = viewModel.getGridModel();
let oldData = gridModel.getEditRowModel().get('c_type).__data.dataSource;
let newData = [{value:'2',text:'注销',nameType:'string'},{value:'3',text:'撤销',nameType:'string'}];
gridModel.getEditRowModel().get('c_type').setDataSource(newData);

 详情页

//获取枚举原来的数据
let oldData = viewModel.get('enum_code').__data.dataSource
//自定义处理数据
let newData = 获取需要的数据；
//从新设置数据源
viewModel.get('enum_code').setDataSource(newData)

1.19 数组去重

let len = arr.length;
for(let i = 0; i < len  ; i++){
    for(let j = i + 1; j < len ; j++){
        if(arr[i].id == arr[j].id){
            arr.splice(j,1)
            len--
            j--
        }
    }
}

 1.20 参照创建出来了,名字就固定了,使用时,单页面修改其名称的代码

viewModel.get('deptstaff_new1').on('afterInitVm', function (args) {
    //获取参照弹窗的模型
    let referViewModel = args.vm;
    debugger;
    referViewModel.on('afterGetRefMeta', function (data) {
        console.log(data);
        debugger;
        data.refEntity.name = '1111'
    });
});

1.21 弹框提示 - 可以修改持续时间

cb.utils.alert({
    title : '版本生成失败',
    type : 'error',
    duration : 7 ,
    mask : true,
    onClose : function(){}
})

 1.22 列表页搜索前事件,符合要求的会进行显示

viewModel.on('beforeSearch',funtion(data){
    data.isExtend = true
    let conditions = data.params.condition;
    conditions.simpleVos = [{
        "logicOp":"or" ,
        "conditions":[{
            "field":"c_ziduanming",
            "op":"eq",
            "value1":'1'
        },{
            "field":"c_ziduanming",
            "op":"eq",
            "value1":'2'
        }]
    }];
});

 1.23 子表列隐藏

viewModel.getGridModel().setColumnState( '字段名' , 'visible' , false )
或
viewModel.getGridModel().setColumnState( '字段名' , 'bShowIt' , false )
viewModel.getGridModel().setColumnState( '字段名' , 'bIsNull' , true)

1.24 列表页定义值,详情也做判断 

列表页

viewModel.on('customInit',function(data){
    viewModel.getParams().view_flag = "flag";
})

 详情页

let parentParams = viewModel.getParams().parentParams;
if(parentParams != null && parentParams != undefined){
    var view_flag = parentParams.view_flag;
    if(!cb.utils.isEmpty(view_flag) && view_flag == "flag"){
        //做判断
    }
}

1.25 js方面 Loading旋转

function Loading(){
    var hook = React.useState(true);
    stop = hook[1];
    return React.createElement(TinperNext.Spin,{spinning:hook[0]});
}

//开启
ReactDOM.render(React.createElement(Loading),document.createElement('div'));
//关闭
stop();

 1.26 把装有id的数组转化为可以拼接sql的字符串

let idArr = "(";
for(let i = 0 ; I < arr.length ; i++){
    if(i == arr.length - 1){
        idArr = idArr + "'" + arr[i] + "'";
    }else{
        idArr = idArr + "'" + arr[i] + "',";
    }
}
idArr = idArr  + ")";

1.27 详情页参照打开前筛选

viewModel.get('c_apply_person_v_name') && viewModel.get('c_apply_person_v_name').on('beforeBrowse',function(data){
    var myFilter = {"isExtend": true,simpleVOs:[]};
    myFilter.simpleVOs.push({
        field:'lmhr_xx_xgzxxList.b_ifjob',
        op:'eq',
        value1:'1'
    })    
    viewModel.get('c_apply_person_v_name').setFilter(myFilter);
})

1.28 详情页子表参照打开前筛选

viewModel.get('lmhr_xx_ruku_register_bList') && viewModel.get('lmhr_xx_ruku_register_bList').getEditRowModel().get('c_code_v_code').on('beforeBrowse',function(data){
    var myFilter = {"isExtend": true,simpleVOs:[]};
    myFilter.simpleVOs.push({
        field:'lmhr_xx_xgzxxList.b_ifjob',
        op:'eq',
        value1:'1'
    })    
    viewModel.get('lmhr_xx_ruku_register_bList').getEditRowModel().get('c_code_v_code').setFilter(myFilter);
})

1.29 详情页子表参照弹出前进行筛选

viewModel.getGridModel().getEditRowModel().get('c_dept_v_name').on('beforeBrowse',function(data){
    var gridModel = viewModel.getGridModel();
    //获取一级部门
    let result = cb.rest.invokeFunction("xxxx_CM_demand.getOneDept",
        {},function(err,res) {},viewModel,{async:false});

    let deptArr = [];

    if(result.result != undefined && result.result.res != undefined && result.result.res.length > 0){
        let arr = result.result.res;
        for(let i = 0 ; i < arr.length ; i++){
            deptArr.push(arr[i].id);
        }
        if(deptArr.length > 0){
            //部门过滤
            var myFilter = {"isExtend":true,simpleVOs:[]};
            myFilter.simpleVOs.push({
                field : 'id' ,
                op : "in" ,
                value1 : deptArr
            });
            gridModel.getEditRowModel().get('c_dept_v_name').setFilter(myFilter);
        }else{
            cb.utils.alert("获取一级部门数据失败",'error');
        }
    }
    deptArr = [];
})

1.30 列表加颜色标注

viewModel.getGridModel().on('afterSetDataSource',function(data){
    data.forEach((item,index)=>{
         if(item.b_if_finish === '2'){
            viewModel.getGridModel().setCellState(index,"b_if_finish","style",{color:'red'});
         }else{
            viewModel.getGridModel().setCellState(index,"b_if_finish","style",{color:'black'});
         } 
     })
})

 1.31 页面字段不可编辑

viewModel.get('字段').setState('bCanModify',false);

viewModel.get('字段').setState('disable',true);

1.32 设置是否必填

 viewModel.get('字段').setState('bIsNull',false);

gridModel.setCellState(rowIndex,"字段",'bIsNull',true);//不必填

1.33 判断数组中是否有该元素并添加改元素

let array = [];

if(array.indexOf(row.d_date) === -1){

        array.push(row.d_date);

} 

1.34 按钮跳转行编辑页自动进入编辑态

viewModel.get("btnEdit").execute("click");

 1.35 单元格设置颜色

gridModel.setCellState(i,"字段",'style',{backgroundColor:'#FF0000'});

1.36 使用代码触发表格的效验

let validate = viewModel.getGridModel().validate();

触发表格的效验设置,成功返回true,失败返回false  

 1.37 获取搜索框的值

let firstDept = viewModel.getCache('FilterViewModel').get('c_first_dept').getFromModel().getValue();

1.38 审批后跳转到主页

viewModel.on('afterWorkflow',() => {

        let serviceCode = viewModel.getServiceCode();

        let result = cb.rest.invokeFunction("LMHR_ORG.backApiFunc.getMainOriginUrl",{},function(err,res){},viewModel,{async:false});

        if(result.result != undefined && result.result.res != undefied && result.result.res.length > 0){

                let obj = result.result.res[0];

                if(serviceCode == undefined){

                        //审批后跳转到主页

                        top.location.href = obj.value;

                }      

        }

})

二.主子表详情页面导入导出功能简单实现

 前端公共函数

2.1 xslx.core.min.js 导入  

// 导入按钮
viewModel.get('button36pi') && viewModel.get('button36pi').on('click', function (data) {  
    let secScript = document.createElement("script");
    secScript.setAttribute("type", "text/javascript");
    document.body.insertBefore(secScript, document.body.lastChild);
    //调用两个方法
    f();
    selected();
})

function selected(){
    document.getElementById('file_input-import').click();
}

//旋转方法
function Loading(){
    var hook = React.useState(true);
    stop = hook[1];
    return React.createElement(TinperNext.Spin,{spining:hook[0]});
}

function f(){
    let temp = document.getElementById('file_input-import');
    if(null != temp){
       document.getElementById('file_input-import').remove(); 
    }
    let fileInput= document.createElement("input");
    fileInput.id = 'file_input_import';
    fileInput.type = 'file';
    fileInput.style = 'display:none';
    document.body.insertBefore(fileInput, document.body.lastChild);
    document.getElementById("file_input_import").addEventListener('change',function(e){
        let files = e.target.files;
        if(files.length == 0 )return;
        let filesData = files[0];
        let fileName = filesData.name;
        //判断导入模版是否准确
        //包含为true
        if(!fileName.includes("模版名")){
            cb.utils.alert("导入模版错误" + fileName ,'error');
            return false;
        }
        if(!isStrEmpty(fileName) && (("xls" == (fileName.substring(fileName.lastIndexOf(".") + l))) || ("xlsx" == (fileName.substring(fileName.lastIndexOf(".") + l))))){
            readWorkbookFromLocalFile(filesData ,function(workbook){
                readworkbook(workbook);
            })
        }else{
            cb.utils.alert('文件类型错误','error');
            fileInput.remove();
            return false;
        }
    });

    //读取本地excel文件
    function readWorkbookFromLocalFile(file, callback) {
      var reader = new FileReader();
      reader.onload = function(e) {
        cb.requireInner(["/iuap-yonbuilder-runtime/opencomponentsystem/public/AT16F65E4A1D400004/xlsxjs?domainKey=developplatform"], function(a) {
          var localData = e.target.result;
          var workbook = a.getXlsx({flag:'1',localData:localData});
          if(callback) callback(workbook);
          reader.abort();
        })
      };
      reader.readAsBinaryString(file);
    }
    
    //读取excel里面数据，进行缓存
    function readWorkbook(workbook) {
        //开始旋转
        ReactDOM.render(React.createElement(Loading),document.createElement('div'));
        cb.requireInner(["/iuap-yonbuilder-runtime/opencomponentsystem/public/AT16F65E4A1D400004/xlsxjs?domainKey=developplatform"], function(a) {
        var sheetNames = workbook.SheetNames; // 工作表名称集合
        sheetNames.forEach(sheet => {
            //获取每个sheet页的数据
            var workbookDatas = a.getXlsx({flag:'2',workbook:workbook.Sheets[sheet]});
            
            if(sheet == "sheet页名"){
               for(let i = 0 ;i < arr[0].length ;i++){
                  let start = arr[0][i].开始时间;
                  let end = arr[0][i].结束时间;
                  viewModel.getGridModel().appendRow({'begindate':start,'enddate':end});
               }  
            }
         })
        //关闭Loading
        stop();
      });
      fileInput.remove();
   }
}   

2.2 导入调用的方法

//字符串判空 - 前端脚本用
function isStrEmpty(str){
    if(typeof str == "undefined" || null == str || "" == str || "" == str.trim()){
        return true;
    }else{
        return false;
    }
}

//字符串判空 - api和后端脚本用
function isObjEmpty(str){
    if(typeof str == "undefined" || null == str || "" == str || "" == trim(str)){
        return true;
    }else{
        return false;
    }
}

2.3 xslx.full.min.js 导出

// 导出--单击
viewModel.get('button42ci') && viewModel.get('button42ci').on('click', function (data) {
  
  let b1Arr = [{
    "年度": "文本,必填",
    "积分": "文本,必填",
    "备注": "文本",
    "注意 : 前两行不可以做任何改动" : ''
  }]  

  let secScript = document.createElement("script");
  secScript.setAttribute("type", "text/javascript");
  document.body.insertBefore(secScript, document.body.lastChild);
  let fileOutput= document.createElement("input");
  fileOutput.id = 'file_input_export';
  fileOutput.type = 'file';
  fileOutput.style = 'display:none';
  document.body.insertBefore(fileOutput, document.body.lastChild);
  
  let inputElement = document.getElementById("file_input_export");
  inputElement.addEventListener("change", handleFiles, false);
  function handleFiles() {
    var selectedFile = document.getElementById("file_input_export").files[0];
    var reader = new FileReader();
    reader.readAsText(selectedFile,"UTF-8");
    reader.onload = function(){
      arrExcel = JSON.parse(this.result);
    };
  }
  
  function jsonToExcel () {

    var filename = "自定义文件_模版.xlsx";
    var ws_name1 = "年度考核";
    
    let waArr = [{
        "ws_name1" : ws_name1 ,
        "bArr1" : b1Arr
    }]
    cb.requireInner(["/iuap-yonbuilder-runtime/opencomponentsystem/public/AT16F65E4A1D400004/dsfsdf?domainKey=developplatform"],
    function(a) {
      
    var workbook = a.getFull({flag:'1',waArr :waArr ,filename:filename});
    console.log(workbook)
    })
  }
  jsonToExcel();
});

调用前端公共函数,把数据传入公共函数中,处理完后返回结果,公共函数内把参数传入方法中 把js 代码包裹返回结果是处理完的数据

三.调用方面

3.1 前端函数调用流水线的接口 ->按钮触发的

let options = {
    method:'POST',
    headers:{
        'Accept':'application/json',
        'Content'-Type':'application/json'
    },
    body:JSON.stringify({
        data:'1'
    })
}

fetch("https://dev-zhongtai.xxxxx.cn/xxxx-be/ZzbImportExportExportAction/ZzbExport",options
).then(res=>{console.log(res)})

3.2 后端函数获取token -- 报错未解决

var res = JSON.parse(AppContext());
let token = res.token;
let body = {
    data:"1"
}
let header = {
    'token':""+token,
    Content-Type':"application/json:charset=utf-8"
}
var response = postman(
    "post",
    "http://dev-zhongtai.xxxxx.cn/xxxx-be/ZzbImportExportExportAction/ZzbExport",
    JSON.stringify(header),
    JSON.stringify(body)
)

 3.3 一个api函数insert主子表

var object = {orgVO: "2362172988248320",orgVO_name: "开心",bustype_name: "测试",name:"张三",age:10,money:10,childTableList:[{good:"10",num:1,"total":1}]};
var res = ObjectStore.insert("GT64965AT75.GT64965AT75.parentTable",object,"0a2c44bf");

3.4 后端函数或api函数,调用流水线的接口

使用的达梦数据库,表中id无自增,流水线中需要自行获取id
//准备租户id和创建人id,新增时需要 和表中的 CREATOR ,TENANT_ID , YTENANT_ID 对应
let appCon = JSON.parse(AppContext());
let currentUser = appCon.currentUser;
let creator = currentUser.id;
let tenant = currentUser.tenantId;
//上边的 不执行新增库操作可 不传, obj 是自己的数组类型的数据
let body = {
    creator : creator,
    tenantId : tenant,
    obj : obj
}
// throw new Error(JSON.stringify(body)); 
let header = {}
var strResponse = postman("post","http://dev-zhongtai.xxxxxx.cn/xxxx-be/fileConsult/insertBatchData",JSON.stringify(header),JSON.stringify(body));
let objResponse = JSON.parse(strResponse);
//判断有错的话就抛异常
if(objResponse.code != '200'){
    throw new Error(objResponse.message); 
}

 3.5 调用后端函数

let body = {};
let header = {
    'Content-Type':"application/json;charset=UTF-8"
};
//调用脚手架接口
var strResponse = postman("get",
    "http://dev-zhongtai.*****.**/****-**/controller/updateById",
    JOSN.stringify(header),JSON.stringify(body); 
)
//throw new Error();
return{strResponse}

3.6 前端函数直接调用接口

cb.utils.confirm('是否需要生成最新版本',() => {
    const id = viewModel.get('id').getValue();
    const proxy = viewModel.setProxy({
        saveLog : {
            url : '/zdy/createLeaderPersonVersion?id=' + id,
            method : GET,
            options : {
                mask : true
            }
        }
    });
    //调用
    proxy.saveLog(function(err,result){
        if(err != null){
            
        }
    })
},() =>{}
)

3.7 openLinker 连接接口

var userId = request.userId;

//通过用户ID查询员工信息
let base_path = "https://yonbip.diwork.com/iuap-api-gateway/yonbip/digitalModel/staffQry/getStaff";

var body = {
    "userId": [
         userId
    ]
};

//请求数据
let apiResponse = openLinker("post", base_path, "GT102500AT53", JSON.stringify(body));

var result = JSON.parse(apiResponse);
// throw new Error(apiResponsejaon);

var queryCode = result.code;
if (queryCode !== "200") {
     throw new Error('查询用户对应人员错误 ' + result.message);
}

3.8 api函数或后端函数,直接传token,省略调后端设置权限了

let body = {}
let appCon = JSON.parse(AppContext());
let token = appCon.token;
let header = {
    "yht_access_token":token
};

四.模态框

 4.1 页面主动跳转

let id = viewModel.get("id").getValue();
let eevent = {
    billtype:'VoucherList',
    billno:'3fa665bbList',
    params:{
        mode:'browse',
        id:id
    }
}
cb.loader.runCommandLine(""bill",event,viewModel);

4.2 当前模态框关闭

viewModel.communication({type:'modal',payload:{data:false}});

4.3 模态框父页面刷新(放在关闭之前)

let parentViewModel = viewModel.getCache('parentViewModel');

parentViewModel.execute('refresh');

 4.4 模态框去掉右上角的叉号

document.getElementsByClassName("close dnd-cancel")[1].style.display = 'none';