跳到主要内容

Lov 值集视图

长念
长念阅读约 4 分钟2 年前发布2 年前编辑
© 转载需要保留原始链接，未经明确许可，禁止商业使用。支持原创 CC BY-NC-SA 4.0

如何保证 Lov 配置正确加载​

当以 Lov 作为数据源时，必须保证值集视图配置与数据的加载顺序。Stores.LovCodeStore.fetchConfig 默认优先从缓存中读取配置，否则发送网络请求。

提示

与 Lookup 不同，Lov 相关配置 (首次) 需要发送网络请求获取，不能保证一定存在缓存，所以 fetchConfig 是异步操作。

import { Stores } from 'choerodon-ui/pro';

export default () => {
  const lovDS = useDataSet(getLovDSProps, []);
  const getLovData = async () => {
    // 1. 从缓存（之前已请求并配置该值集）或者发送请求获取并设置 lov 配置
    await Stores.LovCodeStore.fetchConfig('LOV_CODE');
    // 2. 请求值集数据
    cosnt lovData = await lovDS.getField('lov')?.options?.query(1);
    return lovData;
  };
  //...
}

查询条件中的简单写法​

在一些不需要回显的场景下 (如搜索条件)，可以通过 transformRequest 转换参数结构，简化值集绑定等配置。

export const getDSProps = () => {
  return {
    queryFields: [
      {
        name: 'unitCode',
        type: 'object',
        lovCode: 'LOV_UNIT',
        transformRequest: (value) => value?.code,
      },
      {
        name: 'unitCodeList',
        type: 'object',
        lovCode: 'LOV_UNIT',
        transformRequest: (value) => (value || []).map((val) => val?.code),
        multiple: true,
      },
    ],
  };
};

Lov 参数 lovPara 如何传递数组​

lovPara 默认被定义为对象，在传参时也会转成 object；当需要传递其他类型的参数时，可通过以下方式进行调整：

静态查询 URL​

手动指定 lov 的查询 URL

export const getLovDSProps = () => {
  return {
    fields: [
      {
        name: 'lov',
        type: FieldType.object,
        lovCode: 'LOV_CODE',
        dynamicProps: {
          lovPara: () => ({ para: ['1', '2'] }), // 不能直接返回 array
        },
        lovQueryAxiosConfig: {
          url: `${API_PREFIX}/lov/api`,
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          transformRequest: (value) => {
            try {
              return JSON.stringify(value?.para);
            } catch (err) {
              return [];
            }
          },
        },
      },
    ],
  };
};

动态查询 URL​

通过 lov 的配置获取查询 URL

import { Stores } from 'choeroson-ui/pro';

export const getLovDSProps = () => {
  return {
    fields: [
      {
        name: 'lov',
        type: 'object',
        lovCode: 'LOV_CODE',
        dynamicProps: {
          lovPara: () => ({ para: ['1', '2'] }), // 不能直接返回 array
        },
        lovQueryAxiosConfig: (code, config, { dataSet, params, data }) => {
          const lovQueryConfig = Stores.LovCodeStore.getQueryAxiosConfig(
            code,
            dataSet.getField('lov'),
            config
          )({ dataSet, params, data });
          return {
            ...lovQueryConfig,
            headers: { 'Content-Type': 'application/json' },
            transformRequest: (value) => {
              try {
                return JSON.stringify(value?.para);
              } catch (err) {
                return [];
              }
            },
          };
        },
      },
    ],
  };
};

也可以通过 getConfig 获取 lov 配置，替换上述高亮部分即可

import { getConfig } from 'choerodon-ui';

const lovQueryConfig = getConfig('lovQueryAxiosConfig')(code, config, { dataSet, params, data });