## 1、实现代码示例

本代码：拦截了eb表格视图中，所有的浏览框，填充了浏览数据定义需要的参数businessId、controlId、variableMap

注意充分测试，避免应用默认的浏览框功能

```javascript
// 从全局对象中获取 weappUtils 的引用
const { weappUtils } = window;

const getStringData = (mobxValue) => {
  const value = window.mobx.toJS(mobxValue);
  if (typeof value === 'string') {
    return value;
  }
  if (value && weappUtils.isArray(value)) {
    if (value.length) {
      const ids = value.map((x) => x?.id || x);
      return ids.join(',');
    }
  }
  if (value && weappUtils.isObject(value)) {
    return value?.id || value;
  }
  return value;
};

// 检查 weappUtils 是否存在，确保在正确的环境中运行
if (weappUtils) {
  const getFilterData = (tableStore, _isMobile) => {
    try {
      let searchData = {};
      if (_isMobile) {
        // 检查是否存在高级搜索存储，并获取其中的表单数据
        const store = tableStore.searchAdvancedStore?.formStore;
        if (store) {
          searchData = store.getFormDatas();
        }
      } else {
        // 获取筛选条件的数据
        const filterData = tableStore.filterSearchStore?.searchParams;
        // 检查是否存在高级搜索存储，并获取其中的表单数据
        const store = tableStore.viewHeaderStore?.searchAdvancedStore?.formStore;
        if (store) {
          searchData = store.getFormDatas();
        }
        // 合并搜索数据和筛选数据，筛选数据优先级更高
        searchData = {
          ...searchData, // 高级搜索中的数据
          ...filterData // 筛选条件中的数据（会覆盖搜索数据中的相同字段）
        };
      }
      return searchData;
    } catch (e) {
      console.log(e);
    }
  };

  const regObBrowser = (tableStore, isMobile) => {
    let isInit = true; // 初始化标志，防止重复初始化
    const objId = tableStore.getObjID(); // 获取当前对象的ID

    // 确保有有效的对象ID
    if (objId) {
      // 只在首次初始化时执行
      if (isInit) {
        /**
         * 注册覆盖Browser组件的属性
         * 主要目的是自定义Browser组件的fetchData方法
         */
        weappUtils.regOvProps('weappUi', isMobile ? 'MBrowser' : 'Browser', (props) => {
          const formParam = props?.searchParams?.formParam;
          let params = {};
          if (formParam) {
            const formParamObj = JSON.parse(formParam);
            params = {
              businessId: formParamObj?.formId,
              controlId: formParamObj?.fieldId,
              fromSearch: props?.searchParams?.fromSearch
            };
          }
          /**
           * 重写fetchData方法
           * 主要功能是在请求前注入根据筛选条件获取的变量数据
           * @param {Object} options - 请求选项
           */
          props.fetchData = (options) => {
            const variableMap = getFilterData(tableStore, isMobile);
            const requestData = {
              ...params,
              variableMap
            };

            // 将自定义数据合并到请求选项中
            options.data = {
              ...options.data, // 原有的数据
              ...requestData // 新增的变量数据
            };

            // 使用weappUtils发起请求
            return weappUtils.request(options);
          };
        });
      }
    }
  };

  /**
   * 注册覆盖Table视图内容的属性
   * 这个函数主要用于拦截和修改TableViewContent的属性
   */
  weappUtils.regOvProps(
    'weappEbdfpage',
    'TableComponent',
    (props) => {
      const { tableViewStore } = props; // 从props中解构出tableViewStore
      // 注意：这里限制了生效的范围，为appId=1170209714353602563
      if (tableViewStore.appId === '1170209714353602563') {
        regObBrowser(tableViewStore);
      }
      // 返回可能修改后的props
      return props;
    },
    0
  );

  // 移动端
  weappUtils.regOvProps(
    'weappEbdfpage',
    'MTableViewContent',
    (props) => {
      const { mTableViewStore } = props; // 从props中解构出mTableViewStore
      // 注意： 这里限制了生效的范围，为appId=1170209714353602563
      if (mTableViewStore.appId === '1170209714353602563') {
        regObBrowser(mTableViewStore, true);
      }
      // 返回可能修改后的props
      return props;
    },
    0
  );
}
```

## 3、ecode设置方式

1、新建一个你自己的项目，或者找个你自己的老项目。

2、新建react应用

3、将js放到entry.js中，或其他可执行的js文件中

4、在目录上右键设置人员生效范围，必须设置

[图片附件未整合: ../../../_assets/446831701906161664/001-0c67cda62c.png]

5、在目录上点击发布成公用应用，直接发布到PC、H5

[图片附件未整合: ../../../_assets/446831701906161664/002-aa1c9406ca.png]
