## 1、支持表格视图-筛选、高级搜索

[图片附件未整合: ../../../_assets/390753254272663552/001-4ef00e330c.png]

## 2、实现代码示例

```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) {
  /**
   * 异步获取浏览器字段信息
   * @param {string} objId - 对象ID，用于标识要获取字段信息的对象
   * @param {Function} callback - 获取数据后的回调函数，接收数据作为参数
   * 示例结构
   * [
   *   {
   *     "fieldId": 1180574948145496000,
   *     "showName": "关联浏览",
   *     "dataKey": "glll_fet1",
   *     "browserType": "customBrowser_wzh_llkBB",
   *     "customSqlDataKeyList": [
   *       {
   *         "fieldId": 1167660754364981200,
   *         "showName": "项目名称",
   *         "dataKey": "xmmc_420351913794541"
   *       }
   *     ]
   *   }
   * ]
   */
  const getBrowserFieldIfo = async (objId, callback) => {
    // 通过weappUtils发起API请求获取浏览器字段信息
    const res = await weappUtils.request({
      url: '/api/ebuilder/form/listSearch/getBrowserFieldIfo', // 请求的API
      method: 'GET',
      params: { // 请求参数
        objId, // 传递表单ID
      },
    });
    // 将获取到的数据通过回调函数返回
    callback(res.data);
  };

  /**
   * 获取指定字段的筛选数据值
   * 先从高级搜索中获取值，再从筛选条件中获取，后者会覆盖前者
   * @param {string} fieldId - 需要获取值的字段ID
   * @return {*} 字段的值，可能是各种类型
   */
  const getFilterDataValue = (fieldId, dataKey, 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, // 筛选条件中的数据（会覆盖搜索数据中的相同字段）
        };
      }

      // 打印调试信息（生产环境中可考虑移除）
      // console.log('searchData', fieldId, searchData);
      // console.log('filterData', fieldId, filterData);

      // 构造字段在数据对象中可能的键名
      const key = `field_${fieldId}`;
      let val;

      // 尝试获取字段值，先尝试带field_前缀的键，再尝试直接使用字段ID
      if (key in searchData) {
        val = getStringData(searchData[key]);
      } else if (fieldId in searchData) {
        val = getStringData(searchData[fieldId]);
      } else if(dataKey in searchData) {
        val = getStringData(searchData[dataKey]);
      }

      return val; // 返回找到的值或undefined
    } catch (e) {
      console.log(e);
    }
  };

  const regObBrowser = (tableStore, isMobile) => {
    let isInit = true; // 初始化标志，防止重复初始化
    let browMap = []; // 存储获取到的浏览器字段信息
    const objId = tableStore.getObjID(); // 获取当前对象的ID

    // 确保有有效的对象ID
    if (objId) {
      // 只在首次初始化时执行
      if (isInit) {
        // 获取浏览器字段信息
        getBrowserFieldIfo(objId, (datas) => {
          isInit = false; // 标记已初始化，防止重复执行
          browMap = datas || []; // 存储获取到的数据或空数组

          // 创建一个按浏览器类型索引的哈希表，便于快速查找
          const typeHash = {};
          browMap.forEach((item) => {
            typeHash[item.browserType] = item;
          });

          /**
           * 注册覆盖Browser组件的属性
           * 主要目的是自定义Browser组件的fetchData方法
           */
          weappUtils.regOvProps('weappUi', isMobile ? 'MBrowser' : 'Browser', (props) => {
            // console.log('BrowserProps', props); // 打印Browser组件的属性（调试用）
            const { type } = props; // 获取Browser组件的类型

            // 检查当前类型是否在获取到的类型哈希中
            if (type in typeHash) {
              // console.log('typeHash', typeHash); // 打印类型哈希（调试用）

              /**
               * 重写fetchData方法
               * 主要功能是在请求前注入根据筛选条件获取的变量数据
               * @param {Object} options - 请求选项
               */
              props.fetchData = (options) => {
                // 获取当前类型配置中需要收集数据的字段列表
                const customSqlDataKeyList = typeHash[type].customSqlDataKeyList || [];
                const variableDataKeyMap = {};

                // 遍历所有需要收集数据的字段
                customSqlDataKeyList.forEach((item) => {
                  const {
                    fieldId,
                    dataKey,
                  } = item;
                  // 获取字段当前的筛选值
                  const value = getFilterDataValue(fieldId, dataKey, tableStore, isMobile);
                  // 将值映射到对应的数据键,示例结构：
                  // variableDataKeyMap:{
                  //   "xmmc_420351913794541": "BB-3"
                  // }
                  variableDataKeyMap[dataKey] = value;
                });

                // 准备要注入到请求中的数据
                const requestData = {
                  variableDataKeyMap, // 包含字段值映射的对象
                };

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

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

  /**
   * 注册覆盖Table视图内容的属性
   * 这个函数主要用于拦截和修改TableViewContent的属性
   */
  weappUtils.regOvProps('weappEbdfpage', 'TableComponent', (props) => {
    const { tableViewStore } = props; // 从props中解构出tableViewStore

    regObBrowser(tableViewStore);
    // 返回可能修改后的props
    return props;
  }, 0);

  // 移动端
  weappUtils.regOvProps('weappEbdfpage', 'MTableViewContent', (props) => {
    const { mTableViewStore } = props; // 从props中解构出mTableViewStore
    regObBrowser(mTableViewStore, true);
    // 返回可能修改后的props
    return props;
  }, 0);
}
```

## 3、ecode设置方式

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

2、新建react应用

3、将js放到entry.js中

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

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