[泛微 ecode] 浏览按钮自定义单选字段增加添加数据“+”按钮

在使用泛微 E9 的流程使用过程中，可能会遇到现场增加浏览按钮数据的需求，为了注重用户体验，本文将介绍如何为浏览按钮类型的单选字段增加一个“+”号按钮，方便用户直接添加新数据。

需求背景

在 ecode 表单开发中，WeaBrowser 是一个常用的组件，它可以用来实现浏览选择功能。在某些业务场景下，用户需要在表单中直接新增一条数据并立刻选中，而默认的浏览组件并不支持这样的操作。为了满足这一需求，我们可以通过 ecodeSDK.overwritePropsFnQueueMapSet 接口，覆盖 WeaBrowser 的默认属性，并为其添加“+”按钮，同时绑定数据新增的逻辑。

解决方案

通过以下代码实现：

ecodeSDK.overwritePropsFnQueueMapSet('WeaBrowser', {
  fn: (newProps) => {
    // 限定功能作用的页面路径
    if (!ecodeSDK.checkLPath('/spa/workflow/static4form/index.html#/main/workflow/req')) return;

    // 针对特定字段进行操作（使用时，你只需要改动这里！）
    if (newProps.fieldlabel !== '选择服务商' || newProps.viewAttr === '1') return;

    // 修改链接，调整 URL 参数
    let { linkUrl } = newProps;
    if (linkUrl) {
      const urlParams = new URLSearchParams(linkUrl.split('?')[1]);
      urlParams.set('type', '1');
      urlParams.delete('billid');
      urlParams.set('hidetop', '1');
      linkUrl = `${linkUrl.split('?')[0]}?${urlParams.toString()}`;
    }

    // 添加“+”按钮
    newProps.hasAddBtn = true;

    // 按钮点击事件逻辑
    newProps.addOnClick = () => {
      if (!linkUrl) {
        WfForm.showMessage("获取新建链接失败，请联系管理员", 2, 10);
        return;
      }

      // 定义弹窗及按钮交互逻辑
      const { Button } = antd;
      const params = {
        title: newProps.title,
        moduleName: 'workflow',
        style: { width: 600, height: 400 },
        buttons: [
          // 确定按钮，提交数据并回填到表单
          <Button
            type="primary"
            onClick={() => {
              const parentDialog = top.window.getParentDialog();
              const diaiframe = document.getElementById(parentDialog.id);
              diaiframe.contentWindow.ModeForm.doCardSubmit(
                diaiframe.contentWindow.ModeForm.getCardSubmitExpendId(),
                '0',
                '',
                false,
                function (billid) {
                  // 回填字段
                  WfForm.changeFieldValue(newProps.fieldName, {
                    value: billid,
                    specialobj: [{ id: billid, name: billid }],
                  });
                  parentDialog.hide();
                }
              );
            }}
          >
            确定
          </Button>,
          // 取消按钮，关闭弹窗
          <Button
            type="ghost"
            onClick={() => top.window.getParentDialog().close()}
          >
            取消
          </Button>,
        ],
      };

      // 显示弹窗
      window.weaJs.showDialog(linkUrl, params);
    };
  },
});

代码详解

功能限制作用范围
```
if (!ecodeSDK.checkLPath('/spa/workflow/static4form/index.html#/main/workflow/req')) return;
```
通过 ecodeSDK.checkLPath 方法，限定功能只在特定页面生效，避免对其他页面造成干扰。
目标字段判断
```
if (newProps.fieldlabel !== '选择服务商' || newProps.viewAttr === '1') return;
```
通过 fieldlabel 和 viewAttr 属性判断，只对特定的字段“选择服务商”进行增强。

动态调整链接参数

const urlParams = new URLSearchParams(linkUrl.split('?')[1]);
urlParams.set('type', '1');
urlParams.delete('billid');
urlParams.set('hidetop', '1');
linkUrl = `${linkUrl.split('?')[0]}?${urlParams.toString()}`;

根据业务需要修改链接参数，例如移除 billid，添加 type=1 等。

添加“+”按钮
```
newProps.hasAddBtn = true;
newProps.addOnClick = () => { ... };
```
设置 hasAddBtn 属性为 true，为组件显示“+”按钮，并通过 addOnClick 实现按钮点击事件。

弹窗逻辑
使用 window.weaJs.showDialog 方法，创建一个带有“确定”和“取消”按钮的弹窗。用户点击“确定”按钮后，通过以下逻辑提交数据并回填：

diaiframe.contentWindow.ModeForm.doCardSubmit(
    diaiframe.contentWindow.ModeForm.getCardSubmitExpendId(),
    '0',
    '',
    false,
    function (billid) {
        WfForm.changeFieldValue(newProps.fieldName, {
            value: billid,
            specialobj: [{ id: billid, name: billid }],
        });
        parentDialog.hide();
    }
);

错误处理
当链接无效时，弹出提示信息：

WfForm.showMessage("获取新建链接失败，请联系管理员", 2, 10);

效果展示

在表单中，点击“选择服务商”字段右侧的“+”按钮。
弹出数据新增窗口，用户可以输入新数据。
提交后，新增数据会自动回填到“选择服务商”字段中。

总结

通过简单的代码增强，我们为 WeaBrowser 添加了一个实用的功能，使用户能够更加方便地添加和选择数据。这种方式不仅提升了用户体验，还避免了频繁跳转页面的麻烦。希望本文对大家在泛微 ecode 开发中有所帮助！

[泛微 ecode] 浏览按钮自定义单选字段增加添加数据“+”按钮 by https://oneszhang.com/archives/121.html