属性联动在控制按钮上的使用场景

1.案例简介

本案例将介绍属性联动中如何控制按钮的状态以及实际运用，帮助大家更好的去使用属性联动来控制按钮。

2.运用场景

在开发中，遇到不同的流程状态时，对应的按钮应设置为禁用、可用或者隐藏，来更好的完成实际的业务操作。

3.设计思路

在不同流程时，以申请表的业务状态为例，不同的业务状态，按钮对应的状态应不相同，不可能在整个流程时一直点击，所以可以先在属性联动中获取其业务状态，而后对业务状态进行一个判断，之后参考文档中设置按钮状态的代码进行控制按钮的状态。

• 对应的设置按钮状态开发文档链接
  https://docs.cvte.com/docs/tzv16//290#7e8pos

4.代码案例

以下仅是控制按钮禁用状态，如需其他业务请查看上方文档。

const data = configs.context.getFormData();//获取表单数据
console.log("data",data)
const business = data.BUSINESS_STATUS  //获取业务状态

    //获取想要设置的按钮的配置
    // formCode填按钮所在容器的formCode，attrCode填容器的code，btnCode填按钮的code，比如按钮所在容器是在card里面，点击设计器的card后，在设计配置可以看到对应的code，鼠标放上去可以看到对应的formCode。2.4版本后formCode可以在高级属性->表单组编码看到，如果没有，则填空字符串
    // 如果是表单属性配置的表单按钮，formCode填空字符串，attrCode填'BTN_BLOCK_GLOBAL';
    const budgetBtn = configs.context.getBtnConfig({ formCode: '', attrCode: '对应容器的attrCode', btnCode: '按钮编码'});
    const activityBtn = configs.context.getBtnConfig({ formCode: '', attrCode: '对应容器的attrCode', btnCode: '按钮编码'});

    //判断
        if(business == '已结束'){
           if (!activityBtn.config.uiConfig) {
            activityBtn.config.uiConfig = {}
        }
          if (!activityBtn.config.uiConfig.attr) {
             activityBtn.config.uiConfig.attr = {}
          }
          //设置按钮状态
       // true 表示禁用，false 表示可用
          activityBtn.config.uiConfig.attr.disabled = true;
          if (!budgetBtn.config.uiConfig) {
            budgetBtn.config.uiConfig = {}
        }
          if (!budgetBtn.config.uiConfig.attr) {
             budgetBtn.config.uiConfig.attr = {}
          }
       // true 表示禁用，false 表示可用
          budgetBtn.config.uiConfig.attr.disabled = true;
          configs.context.refreshBtnConfigs({ formCode: '', attrCode: '对应的attrCode' });
    }

5.最终效果

• 业务状态为进行中时的效果
  

• 业务状态为已结束时效果