[Web]表单页代码示例

February 5, 2020

Author: 唐溢泓、江炜

表单

表单主要可以实现字段的操作

//获取表单实例
const ext_customEntity65__c_Form_ = new xsyrpa.FormExtensionPoint("customEntity65__c.Form#*#");
//表单加载完成
ext_customEntity65__c_Form_.on("loaded", async (data) => {
    //获取新建表单的地址
    const ext_account_form_address = new xsyrpa.FormTextInputExtensionPoint("account.form#*#address");
    //设值
    ext_account_form_address.setValue("上海,北京");
    //设置只读
    ext_account_form_address.setReadOnly(true);
    //设置必填
    ext_account_form_address.setRequired(true);
    //设置可见
    ext_account_form_address.setVisible(true);
    //设置字段错误提醒
    ext_account_form_address.setError("错误信息");
    //设置表单的placeholder
    ext_account_form_address.setPlaceholder("新的placeholder");
    //设置样式
    ext_account_form_address.setInlineStyle({
      //selector是css选择器
      //了解css选择器: https://developer.mozilla.org/zh-CN/docs/Glossary/CSS_Selector
      selector: ".ui-spinner",
      style: { "border": "1px solid red", "border-radius": "4px" },
    });

    //当数据发现变化时
    ext_account_form_address.on("onChange", (data) => {

    });
});

//获取表单实例
const ext_customEntity65__c_Form_ = new xsyrpa.FormExtensionPoint("customEntity65__c.Form#*#");
//表单已加载
ext_customEntity65__c_Form_.on("loaded", async (data) => {
    //获取新建表单按钮组
    const ext_customEntity65__c_Form_ButtonGroup = new xsyrpa.ButtonGroupExtensionPoint("customEntity65__c.Form#*#ButtonGroup");
    const newButton = await ext_customEntity65__c_Form_ButtonGroup.addButton({
        extId: "newButtonInForm",
        text: "新按钮"
    });

    newButton.on("onClick", () => {

    });

    //获取新建按钮的实例
    const ext_customEntity65__c_Form_draft = new xsyrpa.ButtonExtensionPoint("customEntity65__c.Form#*#draft");
    //改变按钮文字
    ext_customEntity65__c_Form_draft.setText("新文本");
    //设置可见
    ext_customEntity65__c_Form_draft.setVisible(true);
});

//保存前触发
ext_customEntity65__c_Form_.on("beforeSave", (data, resolve, reject) => {
    //对数据进行操作,或者弹出确认框,通过resolve表示继续执行保存,reject表示不再执行保存
    //resolve();
    //reject();
});

明细的扩展点列表示意图（以商机明细为例， 自定义实体相同）



明细Picker自定义

//商机明细自定义picker
//创建商机明细扩展实例
const ext_opportunityProduct_Form_opportunityProduct = new xsyrpa.FormSubEntityTableExtensionPoint("opportunityProduct.Form#*#opportunityProduct-919228631532061");
//系统方法实例
const ext_SystemUtils = new xsyrpa.SystemUtils();
//eg.1 监听商机明细picker点击+号
ext_opportunityProduct_Form_opportunityProduct.on('pickerClick', function(data){
    //接收到的系统商机明细picker打开需要的参数
    console.log(data);
    //打开Dialog, 链接到自定义页面
    //自定义页面调用Api等方式（可将data传入作为参数）获取产品信息，这里随便使用一个该租户的产品为例
    ext_SystemUtils.openDialog({
        url: 'https://www.reynanote.com/?id=963469313770032',
        windowSize:2,
        title: "自定义选择产品"
    }).then(function(data){
        //data 为产品ids
        //调用系统添加明细数据方法
        ext_opportunityProduct_Form_opportunityProduct.afterPickerSelected({ids: data});
    });
});
 
//eg.2 监听商机明细数据修改，自定义校验并提示
ext_opportunityProduct_Form_opportunityProduct.on('rowDataChanged', function(rowData){
    //数量大于20时
    if(rowData.data.amount > 20){
        //错误提示
        ext_opportunityProduct_Form_opportunityProduct.setCellError({rowIndex:rowData.index, apiKey:'amount', messages:'数量不能超过20'});
    }
});
 
 
/*
    自定义页面
*/
//自定义页面 传值 关闭picker
//自定义按钮，点击时
function(){
    let msg = {
      isvData: 1,2,3 //选择的数据ids,
      doClose: true
    };
    window.top.postMessage(msg, '*');
}

商机设置必须含有明细，列表自定义搜索条件

//商机表单中的商机明细实体
const ext_opportunity_SubForm_opportunityProduct = new xsyrpa.FormSubEntityTableExtensionPoint("opportunity.SubForm#*#opportunityProduct");
//商机列表页
const ext_opportunity_ListPage_ListPage = new xsyrpa.EntityListPageExtensionPoint("opportunity.ListPage#*#ListPage");
//监听明细load完成
ext_opportunity_SubForm_opportunityProduct.on('loaded', async function(){
    //设置商机明细实体保存时必须有明细
    ext_opportunity_SubForm_opportunityProduct.allowEmptyDetailData({entityApiKey:'opportunityProduct', enabled:true});
     
    //列表上增加一个普通按钮
    const newButton = await ext_opportunity_ListPage_ListPage.addButtonItem({
        extId:"newButtonId",
        text:"新按钮"
    });
    //普通按钮点击时 向列表增加一个筛选条件 进行搜索
    newButton.on("onClick", function(){
        var conditions = [{"id":"11","item":"26905910","type":"1","value":"123"},{"id":"12","item":"26905910","type":"1","value":"testr5"}]
        ext_opportunity_ListPage_ListPage.addFilterConditions({expression:"11 OR 12", conditions:conditions, refresh:true});
        //ext_opportunity_ListPage_ListPage.refreshData();
    });
    /*
        列表搜索API说明
        1. 通过addFilterConditions 向列表传递搜索条件为替换模式。
           即： 每次执行筛选的条件均为 列表当前视图系统自带筛选条件 AND API传递条件。
        2. API传递条件中的参数：
           item 实体字段itemId
           type 表达式运算符
                3 => in
                10 => equal
                12 => fromTo (区间， 如数值型 在10~20之间， {item:xxx, type:12, value:"10,20"})
           value 表达式右值
           id 当使用expression描述多个条件之间的关系时使用
            （建议使用10以上值作为id, 因为系统列表视图中有的会带有默认条件中含有id（如我负责的XXX），或自定义检索视图本身带有公式时。）
        3. expression
           多个条件间的关系公式。如果是空则条件之间默认为 AND 关系。
           API传递此参数后， 融合系统中现有筛选条件时
           系统中没有expression， 直接使用。
           系统中有expression,  System_expression + 'AND ('  + expression + ')' 组合使用。
           鉴于2中提到的id冲突问题，expression参数传递时 示例 "11 OR 12";
    */
      
 
});

批量新增编辑商机明细及全量数据获取

/*商机新建编辑*/
ext_opportunity_Form_.on('beforeSave', (data, resolve, reject)=>{
    var needConfirm = false;
    console.log(data);
    var jsonEntity =  JSON.parse(data.detailEntityMap);
     
    //编辑时，明细数据是增量获取修改过的字段
    //所以需要在明细表格的扩展点上调用getDetailData来获取全部数据。
    const ext__SubForm_opportunityProduct = new xsyrpa.FormSubEntityTableExtensionPoint("opportunityProduct.SubForm#*#opportunityProduct");
    const fullData = await ext__SubForm_opportunityProduct.getDetailData({fullData:true});
 
 
    //...后续逻辑
});
 
/*商机明细新建编辑（商机详情页明细相关上新建编辑，只有子时）*/
//表单和商机新建编辑不一样
const ext_opportunityProduct_Form_ = new xsyrpa.FormExtensionPoint("opportunityProduct.Form#*#");
ext_opportunityProduct_Form_.on('beforeSave', async function(data,resolve, reject){
    console.log("原生数据", data);
    const ext__SubForm_opportunityProduct = new xsyrpa.FormSubEntityTableExtensionPoint("opportunityProduct.SubForm#*#opportunityProduct");
    const fullData = await ext__SubForm_opportunityProduct.getDetailData({fullData:true});
    console.log("全明细数据", fullData);
    //后续代码
});

明细设置字段可编辑及触发计算

//设置 标准价格可编辑， 编辑时触发计算示例
//报价单 （分步交互）
const ext_quote_CPQPriceSetsExtensionPoint = new xsyrpa.CPQPriceSetsExtensionPoint("quote_CPQPriceSetsExtensionPoint");
//监听价格配置页，行数据添加后事件
ext_quote_CPQPriceSetsExtensionPoint.on('afterAddDetail', function(){
    //获取明细数据
    ext_quote_CPQPriceSetsExtensionPoint.getDetailData().then(function(data){
        for(var i = 0; i<data.length;i++){
            //遍历数据找到 产品名称为  B3  的产品
            if(data[i] && data[i]['quotationDetailEntityRelProduct-label'] === "B3"){
                //设置  priceUnit (标准价格) 为可编辑
                ext_quote_CPQPriceSetsExtensionPoint.setCellEditable({detailUuid: data[i].detailUuid, detailId: data[i].id, itemApiKey: 'priceUnit', editable:true});
            }
        }
    });
});
//监听 明细数据编辑后事件
ext_quote_CPQPriceSetsExtensionPoint.on('afterEditDetail', function(data){
    if(data.itemApiKey == 'priceUnit'){
        //判断修改 标准价格时 获取编辑的当条明细数据
        ext_quote_CPQPriceSetsExtensionPoint.getDetailData({detailUuid: data.detailUuid}).then(function(detail){
            //触发计算 （由于系统默认不能修改标准价格，因此用销售单价触发计算）
            ext_quote_CPQPriceSetsExtensionPoint.detailCalculate({detailUuid: detail.detailUuid, detailId: detail.id, itemApiKey:'price', newValue: detail.price});
        });
    }
});
 
//商机
//创建商机明细某业务类型表格实例
const ext_opportunityProduct_SubForm_EntityType_opportunityProduct_549175303520276 = new xsyrpa.FormSubEntityTableExtensionPoint("opportunityProduct.SubForm.EntityType#*#opportunityProduct_549175303520276");
//监听行数据添加后事件
ext_opportunityProduct_SubForm_EntityType_opportunityProduct_549175303520276.on('afterAddDetail', function(data){
    console.log(data.data);
    //判断产品名称
    if(data.data.productId.label === 'B3' || data.data['productId-label'] == 'B3'){
       //设置字段可编辑
        ext_opportunityProduct_SubForm_EntityType_opportunityProduct_549175303520276.setCellEditable({
            rowIndex: data.index,
            cellIndex:'',
            itemApiKey: 'standardPrice',
            editable:true
        });
    }
});
//监听行数据编辑后事件
ext_opportunityProduct_SubForm_EntityType_opportunityProduct_549175303520276.on('rowDataChanged', function(data){
    //判断编辑的字段
    if(data.itemApiKey === 'standardPrice'){
        //触发计算
        ext_opportunityProduct_SubForm_EntityType_opportunityProduct_549175303520276.detailCalculate({
            rowIndex: data.index,
            cellIndex:'',
            itemApiKey: 'priceUnit',
            newValue: data.data.priceUnit
        })
    }
});

关联字段使用自定义数据选择页面

const ext_SystemUtils = new xsyrpa.SystemUtils();
const ext_TestButton__c_Form_Account__c = new xsyrpa.FormRelatedFieldExtensionPoint("TestButton__c.Form#*#Account__c");

//eg.1 监听关联字段picker点击+号
ext_TestButton__c_Form_Account__c.on("pickerHookTrigger",(data, resolve, reject)=>{
    //打开Dialog, 链接到自定义页面
    //自定义页面调用Api等方式（可将data传入作为参数）获取信息
    ext_SystemUtils.openDialog({
        url: 'https://www.reynanote.com/?id=963469313770032',
        windowSize:2,
        title: "自定义选择实体"
    }).then(function(data){
        //返回选中实体数据
            resolve(data);
    });
});