[H5]商机,报价,订单明细自定义编辑页面

December 3, 2020

Author: 王晓峰

页面进入后的初始化,数据组装前事件:beforeLoad

const ext_quote_CPQPriceSetsExtensionPoint = new xsyrpa.CPQPriceSetsExtensionPoint(
  "quote_CPQPriceSetsExtensionPoint"
);
ext_quote_CPQPriceSetsExtensionPoint.on(
  "beforeLoad",
  (data, resolve, reject) => {
    //可以拿到当前页面的明细数据
    const details = data.details;
    console.log("rpa-beforeLoad");
  }
);

页面进入后的初始化,第一屏数据显示前事件:afterInitDetail

const ext_quote_CPQPriceSetsExtensionPoint = new xsyrpa.CPQPriceSetsExtensionPoint(
  "quote_CPQPriceSetsExtensionPoint"
);
ext_quote_CPQPriceSetsExtensionPoint.on(
  "afterInitDetail",
  (data, resolve, reject) => {
    //可以拿到当前页面的明细数据
    const details = data.details;
    console.log("rpa-afterInitDetail");
  }
);

添加产品后的回填:AfterAddDetail

跳转到价格配置页面后,通过右下角的添加按钮添加产品返回后会触发此事件

const ext_quote_CPQPriceSetsExtensionPoint = new xsyrpa.CPQPriceSetsExtensionPoint(
  "quote_CPQPriceSetsExtensionPoint"
);
ext_quote_CPQPriceSetsExtensionPoint.on(
  "AfterAddDetail",
  (data, resolve, reject) => {
    console.log("rpa-AfterAddDetail");
  }
);

编辑明细进入后的事件:AfterEditDetail

进入到价格配置页面,数据加载完成后触发此事件

返回的 data 参数中会包含 fromType 字段,表示来源于哪个场景,目前支持的场景
复制(商机,报价,订单): 2
生成(商机生成报价,报价生成订单): 3
编辑(报价,订单): 4
商机编辑明细(商机编辑单独的): 5

const ext_quote_CPQPriceSetsExtensionPoint = new xsyrpa.CPQPriceSetsExtensionPoint(
  "quote_CPQPriceSetsExtensionPoint"
);
ext_quote_CPQPriceSetsExtensionPoint.on(
  "AfterEditDetail",
  (data, resolve, reject) => {
    let fromType = data.fromType;
    //判断如果是生成场景,就执行清除明细的action
    if (fromType == "3") {
      ext_quote_CPQPriceSetsExtensionPoint.addCustomAction({
        action: "deleteAllDetails",
      });
    }
    console.log("rpa-AfterEditDetail");
  }
);

编辑明细进入后的事件:AfterDeleteDetail

从详情页点击编辑跳转到价格配置页面后会触发此事件

const ext_quote_CPQPriceSetsExtensionPoint = new xsyrpa.CPQPriceSetsExtensionPoint(
  "quote_CPQPriceSetsExtensionPoint"
);
//删除明细后的监听事件
ext_quote_CPQPriceSetsExtensionPoint.on(
  "AfterDeleteDetail",
  (data, resolve, reject) => {
    //返回删除的明细数据
    //data格式:[{index:0,detail:{明细}},{index:1,detail:{明细}}]
    console.log("rpa-AfterDeleteDetail" + JSON.stringify(data));
  }
);

保存前的事件:beforeSave

价格配置页面底部保存按钮点击事件

const ext_quote_CPQPriceSetsExtensionPoint = new xsyrpa.CPQPriceSetsExtensionPoint(
  "quote_CPQPriceSetsExtensionPoint"
);
//保存前的监听事件
ext_quote_CPQPriceSetsExtensionPoint.on(
  "beforeSave",
  (data, resolve, reject) => {
    console.log("rpa-beforeSave");
    //继续走保存的话执行resolve()
    resolve();
  }
);

明细被修改后的事件:rowDataChange

价格配置页面底部保存按钮点击事件

const ext_quote_CPQPriceSetsExtensionPoint = new xsyrpa.CPQPriceSetsExtensionPoint(
  "quote_CPQPriceSetsExtensionPoint"
);
//单条明细被修改后的监听事件
ext_quote_CPQPriceSetsExtensionPoint.on(
  "rowDataChange",
  (data, resolve, reject) => {
    //data:被修改的明细数据
    //结构:{ price:100,price_changed:true }
    //解析:修改的apikey会对应的多一个子端apiKey_changed字段,用来表示某个字段的值被修改了
    console.log("rpa-rowDataChange====" + JSON.stringify(data));
    resolve();
  }
);

价格配置页面点击添加产品按钮的自定义 picker 事件:pickerClick

价格配置页面内,通过右下角的添加按钮添加产品时可以跳转自定义 picker 页面

价格配置页面添加产品方法:afterPickerSelected

const ext_quote_CPQPriceSetsExtensionPoint = new xsyrpa.CPQPriceSetsExtensionPoint(
  "quote_CPQPriceSetsExtensionPoint"
);
ext_quote_CPQPriceSetsExtensionPoint.on(
  "pickerClick",
  (data, resolve, reject) => {
    //接收到的系统明细picker打开需要的参数
    console.log(data);
    //ids中放置需要添加的产品id
    //afterPickerSelected:添加产品回到价格配置页面
    //ids数组:放置产品id的列表
    //id:产品的id
    ext_quote_CPQPriceSetsExtensionPoint.afterPickerSelected({
      ids: [1487115250417700, 1487137361199105],
    });
  }
);

价格配置页面获取当前页面所有的明细:getDetailData

价格配置页面内,可以通过此方法获取当前页面的所有明细,然后进行改值操作

更新明细上的字段值: setDetailData
删除某条明细: delDetailData

const ext_quote_CPQPriceSetsExtensionPoint = new xsyrpa.CPQPriceSetsExtensionPoint(
  "quote_CPQPriceSetsExtensionPoint"
);
ext_quote_CPQPriceSetsExtensionPoint.getDetailData().then((data) => {
  console.log(data);
  //根据id|detailUuid|index更新明细上的某个字段的值
  //上述三个有一个起作用就行
  ext_quote_CPQPriceSetsExtensionPoint.setDetailData({
    index: 0,
    detailId: data[0].id, // 指定明细数据的id
    detailUuid: data[0].detailUuid, // 指定明细的uuid
    apiKey: "price", // 指定明细的字段apikey
    value: "1000", // 指定明细指定字段的值
  });
  //删除某条明细
  //可以使用id,detailUuid跟index都可以删除
  ext_quote_CPQPriceSetsExtensionPoint.delDetailData({
    index: 0,
    detailId: data[0].id, // 指定明细数据的id
    detailUuid: data[0].detailUuid, // 指定明细的uuid
  });
});

价格配置页面明细添加自定义按钮:showCustomBtnForDetail

价格配置页面内,给指定明细添加自定义按钮

//在明细上添加自定义按钮
//event:是按钮触发的事件(必须是rpa已经支持的事件,
//label:是按钮的名称,可以配置多个按钮,
//多余一个展示成更多选项,点击打开下拉选项)
//例:点击自定义按钮打开自定义picker事件:event填写自定义picker的事件名称,点击替换明细触发自定义picker
ext_quote_CPQPriceSetsExtensionPoint.showCustomBtnForDetail({
  //按钮列表
  btnList: [
    {
      event: "pickerClick",
      label: "替换明细",
    },
  ],
  //指定明细上只要有的情况下,三个标识都能使用
  // index: 1,
  detailUuid: "a21346a1-f397-4b8d-9071-bee137e18872",
  // detailId:'1468239432236693'
});

价格配置页面更换明细的产品(角标不变):setDetailDataTotal

价格配置页面内,给明细更换产品

//自定义按钮触发自定义 picker 后会导致自定义 picker 的来源有多个(还有点加号也会触发,因此在返回的参数中做区分)
ext_quote_CPQPriceSetsExtensionPoint.on(
  "pickerClick",
  (data, resolve, reject) => {
    //接收到的系统明细 picker 打开需要的参数
    console.log(data);
    //自定义 pickerClick 返回的 data 中会有一个 type 字段区分是加号过来的跟明细上更换产品点击过来的
    //"add"是加号过来的
    //"update" 是替换明细产品过来的
    if (data.type == "add") {
      ext_quote_CPQPriceSetsExtensionPoint.afterPickerSelected({
        ids: [1506744389976100],
      });
    } else if (data.type == "update") {
      //替换明细的参数
      //id:产品名称
      //index:需要更换的明细 index
      ext_quote_CPQPriceSetsExtensionPoint.setDetailDataTotal({
        id: 1506744389976093,
        index: 0,
      });
    }
  }
);

价格配置页面明细支持自定义事件:addCustomAction

价格配置页面内,给明细添加自定义事件,支持的 action

deleteAllDetails :删除所有明细
disableQuickOperater : 禁用明细上的快捷编辑按钮 openPicker : 打开产品 picker

//参数形式:
//action:要执行的事件
//extra:需要的额外参数
const ext_quote_CPQPriceSetsExtensionPoint = new xsyrpa.CPQPriceSetsExtensionPoint(
  "quote_CPQPriceSetsExtensionPoint"
);
//例:打开产品picker
ext_quote_CPQPriceSetsExtensionPoint.addCustomAction({
  action: "openPicker",
});
//例:删除所有明细
ext_quote_CPQPriceSetsExtensionPoint.addCustomAction({
  action: "deleteAllDetails",
});
//例:禁用编辑按钮
ext_quote_CPQPriceSetsExtensionPoint.addCustomAction({
  action: "disableQuickOperater",
  extra: {
    //是否显示编辑按钮
    //true显示
    //false不显示
    isShowQuickOperate: false,
  },
});
//例:禁用添加产品按钮
ext_quote_CPQPriceSetsExtensionPoint.addCustomAction({
  action: "disableAddProducts",
  extra: {
    //是否显示添加产品按钮
    //true 显示
    //false不显示
    isShowAddProducts: false,
  },
});
//例:禁用更多，批量操作按钮
ext_quote_CPQPriceSetsExtensionPoint.addCustomAction({
  action: "disableShowManageBtn",
  extra: {
    //是否显示更多。批量操作按钮
    //true 显示
    //false不显示
    isShowManageBtn: fasle,
  },
});