super-select-plus

描述

基于 super-select 的 React 业务选择器组件库，提供职能、行业、城市选择器与枚举显示组件，支持国际化与拼音搜索

安装

npm i --save @kne/super-select-plus

概述

@kne/super-select-plus 是一个基于 @kne/super-select 封装的 React 业务选择器组件库，提供职能、行业、城市等常见业务场景的选择器组件和枚举值显示组件。所有组件均支持国际化、拼音搜索、单选/多选等功能，枚举显示组件使用 react-fetch 统一管理数据加载和缓存。

主要特性

丰富的业务选择器：提供职能选择器、行业选择器、城市选择器三大核心组件
枚举值显示组件：提供地址、职能、行业等枚举值的统一显示组件
级联选择支持：职能和行业选择器基于级联选择器实现，支持多级数据选择
智能搜索：支持中英文搜索、拼音搜索、首字母搜索
国际化支持：内置中英文切换，可根据语言环境自动切换显示内容
灵活的展示模式：支持下拉菜单和弹窗两种展示模式
数量限制：支持设置最大选择数量
单选/多选：所有组件均支持单选和多选模式
数据缓存：枚举显示组件内置多层缓存机制，提升性能
自定义渲染：枚举显示组件支持自定义渲染函数，灵活展示
批量显示：枚举显示组件支持 names 数组，一次转换多个编码为 label

组件列表

组件名称	功能描述
SelectFunction	职能选择器，支持多级职能数据选择
SelectIndustry	行业选择器，支持多级行业数据选择
SelectAddress	城市选择器，支持国内外城市搜索选择
AddressEnum	地址枚举显示，用于显示城市名称
FunctionEnum	职能枚举显示，用于显示职能名称
IndustryEnum	行业枚举显示，用于显示行业名称
EnumDisplay	通用枚举显示，支持自定义数据源

数据来源

组件内置了丰富的业务数据：

职能数据：包含完整的职位职能分类，支持三级职能体系
行业数据：覆盖主要行业分类，支持多级行业结构
城市数据：包含国内外主要城市，支持按省份、国家分类

所有数据支持中英文双语，可通过组件的静态方法获取原始数据进行自定义处理。

示例

示例代码

SelectFunction 职能选择器
基于级联选择器的职能选择组件，支持多级职能数据的选择、值回显、搜索、单选/多选等功能
_SuperSelectPlus(@kne/current-lib_super-select-plus)[import * as _SuperSelectPlus from "@kne/super-select-plus"],antd(antd)

const { SelectFunction, FunctionEnum, enumItemsToSelectValue, enumItemToSelectValue } = _SuperSelectPlus;
const { Flex, Divider, Tag, Switch } = antd;
const { useState } = React;

// 模拟后端接口返回的职能编码
const savedFunctionCodes = ['001001001', '001001002', '001001003'];
const savedFunctionCode = '001001001';

// 基础多选示例
const BasicMultiExample = ({ isPopup }) => {
  const [value, setValue] = useState([]);

  return (
    <Flex vertical gap={8}>
      <span>多选职能：</span>
      <SelectFunction
        value={value}
        onChange={setValue}
        isPopup={isPopup}
        placeholder="请选择职能"
        style={{ width: 320 }}
      />
      {value.length > 0 && (
        <Flex wrap gap={4}>
          {value.map((item) => (
            <Tag key={item.id} color="blue">
              {item.name}
            </Tag>
          ))}
        </Flex>
      )}
    </Flex>
  );
};

// 单选示例
const SingleSelectExample = ({ isPopup }) => {
  const [value, setValue] = useState(null);

  return (
    <Flex vertical gap={8}>
      <span>单选职能：</span>
      <SelectFunction
        single
        value={value}
        onChange={setValue}
        isPopup={isPopup}
        placeholder="请选择职能"
        style={{ width: 320 }}
      />
      {value && <Tag color="green">已选：{value.name}</Tag>}
    </Flex>
  );
};

// 数量限制示例
const MaxLimitExample = ({ isPopup }) => {
  const [value, setValue] = useState([]);

  return (
    <Flex vertical gap={8}>
      <span>最多选择 3 个职能：</span>
      <SelectFunction
        value={value}
        onChange={setValue}
        isPopup={isPopup}
        maxLength={3}
        placeholder="请选择职能（最多3项）"
        style={{ width: 320 }}
      />
      <Tag color={value.length >= 3 ? 'red' : 'blue'}>
        已选择 {value.length}/3 项
      </Tag>
    </Flex>
  );
};

// 弹窗模式示例
const PopupModeExample = () => {
  const [value, setValue] = useState([]);

  return (
    <Flex vertical gap={8}>
      <span>弹窗模式：</span>
      <SelectFunction
        value={value}
        onChange={setValue}
        isPopup={false}
        placeholder="点击打开弹窗选择"
        style={{ width: 320 }}
      />
      {value.length > 0 && (
        <div>已选：{value.map((item) => item.name).join('、')}</div>
      )}
    </Flex>
  );
};

// 值回显 - 仅传 id，组件自动从 options 解析名称
const ValueEchoByIdExample = ({ isPopup }) => {
  const [value, setValue] = useState(savedFunctionCodes.map((id) => ({ id })));

  return (
    <Flex vertical gap={8}>
      <span>值回显（仅编码 {&#96;{ id }&#96;}）：</span>
      <Tag color="default">后端编码：{savedFunctionCodes.join('、')}</Tag>
      <SelectFunction
        value={value}
        onChange={setValue}
        isPopup={isPopup}
        placeholder="请选择职能"
        style={{ width: 320 }}
      />
    </Flex>
  );
};

// 值回显 - 仅传编码字符串数组
const ValueEchoByCodesExample = ({ isPopup }) => {
  const [value, setValue] = useState(savedFunctionCodes);

  return (
    <Flex vertical gap={8}>
      <span>值回显（编码字符串数组）：</span>
      <Tag color="default">后端编码：{savedFunctionCodes.join('、')}</Tag>
      <SelectFunction
        value={value}
        onChange={setValue}
        isPopup={isPopup}
        placeholder="请选择职能"
        style={{ width: 320 }}
      />
    </Flex>
  );
};

// 值回显 - 单选（对象编码）
const SingleValueEchoExample = ({ isPopup }) => {
  const [value, setValue] = useState({ id: '001001001' });

  return (
    <Flex vertical gap={8}>
      <span>单选值回显（{&#96;{ id: '001001001' }&#96;}）：</span>
      <SelectFunction
        single
        value={value}
        onChange={setValue}
        isPopup={isPopup}
        placeholder="请选择职能"
        style={{ width: 320 }}
      />
    </Flex>
  );
};

// 值回显 - 单选（字符串编码）
const SingleValueEchoByCodeExample = ({ isPopup }) => {
  const [value, setValue] = useState(savedFunctionCode);

  return (
    <Flex vertical gap={8}>
      <span>单选值回显（编码字符串）：</span>
      <SelectFunction
        single
        value={value}
        onChange={setValue}
        isPopup={isPopup}
        placeholder="请选择职能"
        style={{ width: 320 }}
      />
    </Flex>
  );
};

// 值回显 - 单选（FunctionEnum name）
const SingleValueEchoWithEnumExample = ({ isPopup }) => {
  const [value, setValue] = useState();

  return (
    <Flex vertical gap={8}>
      <span>单选值回显（FunctionEnum name）：</span>
      <Tag color="default">后端编码：{savedFunctionCode}</Tag>
      <FunctionEnum name={savedFunctionCode}>
        {(item) => {
          const resolved = enumItemToSelectValue(item);
          if (!resolved) return <span>加载中...</span>;
          return (
            <SelectFunction
              single
              value={value ?? resolved}
              onChange={setValue}
              isPopup={isPopup}
              placeholder="请选择职能"
              style={{ width: 320 }}
            />
          );
        }}
      </FunctionEnum>
    </Flex>
  );
};

// 值回显 - 结合 FunctionEnum，仅传编码数组 names={[code, code]}
const ValueEchoWithEnumExample = ({ isPopup }) => {
  const [value, setValue] = useState();

  return (
    <Flex vertical gap={8}>
      <span>值回显（FunctionEnum names）：</span>
      <Tag color="default">后端编码：{savedFunctionCodes.join('、')}</Tag>
      <FunctionEnum names={savedFunctionCodes}>
        {(items) => {
          const resolved = enumItemsToSelectValue(items);
          if (!resolved.length) return <span>加载中...</span>;
          return (
            <SelectFunction
              value={value ?? resolved}
              onChange={setValue}
              isPopup={isPopup}
              placeholder="请选择职能"
              style={{ width: 320 }}
            />
          );
        }}
      </FunctionEnum>
    </Flex>
  );
};

const BaseExample = () => {
  const [isPopup, setIsPopup] = useState(true);

  return (
    <Flex vertical gap={24}>
      <Flex align="center" gap={12}>
        <span>展示模式：</span>
        <Switch
          checked={isPopup}
          onChange={setIsPopup}
          checkedChildren="下拉"
          unCheckedChildren="弹窗"
        />
        <span style={{ color: '#666', fontSize: 12 }}>
          {isPopup ? '点击输入框展开下拉菜单' : '点击输入框打开弹窗'}
        </span>
      </Flex>
      <Divider />
      <BasicMultiExample isPopup={isPopup} />
      <Divider />
      <SingleSelectExample isPopup={isPopup} />
      <Divider />
      <MaxLimitExample isPopup={isPopup} />
      <Divider />
      <span style={{ fontWeight: 500 }}>单选值回显</span>
      <SingleValueEchoExample isPopup={isPopup} />
      <Divider />
      <SingleValueEchoByCodeExample isPopup={isPopup} />
      <Divider />
      <SingleValueEchoWithEnumExample isPopup={isPopup} />
      <Divider />
      <span style={{ fontWeight: 500 }}>多选值回显</span>
      <ValueEchoByIdExample isPopup={isPopup} />
      <Divider />
      <ValueEchoByCodesExample isPopup={isPopup} />
      <Divider />
      <ValueEchoWithEnumExample isPopup={isPopup} />
      <Divider />
      <PopupModeExample />
    </Flex>
  );
};

render(<BaseExample />);

SelectIndustry 行业选择器
基于级联选择器的行业选择组件，支持多级行业数据的选择、值回显、搜索、单选/多选等功能
_SuperSelectPlus(@kne/current-lib_super-select-plus)[import * as _SuperSelectPlus from "@kne/super-select-plus"],antd(antd)

const { SelectIndustry, IndustryEnum, enumItemsToSelectValue, enumItemToSelectValue } = _SuperSelectPlus;
const { Flex, Divider, Tag, Switch } = antd;
const { useState } = React;

// 模拟后端接口返回的行业编码
const savedIndustryCodes = ['001', '003', '004'];
const savedIndustryCode = '001';

// 基础多选示例
const BasicMultiExample = ({ isPopup }) => {
  const [value, setValue] = useState([]);

  return (
    <Flex vertical gap={8}>
      <span>多选行业：</span>
      <SelectIndustry
        value={value}
        onChange={setValue}
        isPopup={isPopup}
        placeholder="请选择行业"
        style={{ width: 320 }}
      />
      {value.length > 0 && (
        <Flex wrap gap={4}>
          {value.map((item) => (
            <Tag key={item.id} color="blue">
              {item.name}
            </Tag>
          ))}
        </Flex>
      )}
    </Flex>
  );
};

// 单选示例
const SingleSelectExample = ({ isPopup }) => {
  const [value, setValue] = useState(null);

  return (
    <Flex vertical gap={8}>
      <span>单选行业：</span>
      <SelectIndustry
        single
        value={value}
        onChange={setValue}
        isPopup={isPopup}
        placeholder="请选择行业"
        style={{ width: 320 }}
      />
      {value && <Tag color="green">已选：{value.name}</Tag>}
    </Flex>
  );
};

// 数量限制示例
const MaxLimitExample = ({ isPopup }) => {
  const [value, setValue] = useState([]);

  return (
    <Flex vertical gap={8}>
      <span>最多选择 3 个行业：</span>
      <SelectIndustry
        value={value}
        onChange={setValue}
        isPopup={isPopup}
        maxLength={3}
        placeholder="请选择行业（最多3项）"
        style={{ width: 320 }}
      />
      <Tag color={value.length >= 3 ? 'red' : 'blue'}>
        已选择 {value.length}/3 项
      </Tag>
    </Flex>
  );
};

// 值回显 - 仅传 id，组件自动从 options 解析名称
const ValueEchoByIdExample = ({ isPopup }) => {
  const [value, setValue] = useState(savedIndustryCodes.map((id) => ({ id })));

  return (
    <Flex vertical gap={8}>
      <span>值回显（仅编码 {&#96;{ id }&#96;}）：</span>
      <Tag color="default">后端编码：{savedIndustryCodes.join('、')}</Tag>
      <SelectIndustry
        value={value}
        onChange={setValue}
        isPopup={isPopup}
        placeholder="请选择行业"
        style={{ width: 320 }}
      />
    </Flex>
  );
};

// 值回显 - 仅传编码字符串数组
const ValueEchoByCodesExample = ({ isPopup }) => {
  const [value, setValue] = useState(savedIndustryCodes);

  return (
    <Flex vertical gap={8}>
      <span>值回显（编码字符串数组）：</span>
      <Tag color="default">后端编码：{savedIndustryCodes.join('、')}</Tag>
      <SelectIndustry
        value={value}
        onChange={setValue}
        isPopup={isPopup}
        placeholder="请选择行业"
        style={{ width: 320 }}
      />
    </Flex>
  );
};

// 值回显 - 单选（对象编码）
const SingleValueEchoExample = ({ isPopup }) => {
  const [value, setValue] = useState({ id: '001' });

  return (
    <Flex vertical gap={8}>
      <span>单选值回显（{&#96;{ id: '001' }&#96;}）：</span>
      <SelectIndustry
        single
        value={value}
        onChange={setValue}
        isPopup={isPopup}
        placeholder="请选择行业"
        style={{ width: 320 }}
      />
    </Flex>
  );
};

// 值回显 - 单选（字符串编码）
const SingleValueEchoByCodeExample = ({ isPopup }) => {
  const [value, setValue] = useState(savedIndustryCode);

  return (
    <Flex vertical gap={8}>
      <span>单选值回显（编码字符串）：</span>
      <SelectIndustry
        single
        value={value}
        onChange={setValue}
        isPopup={isPopup}
        placeholder="请选择行业"
        style={{ width: 320 }}
      />
    </Flex>
  );
};

// 值回显 - 单选（IndustryEnum name）
const SingleValueEchoWithEnumExample = ({ isPopup }) => {
  const [value, setValue] = useState();

  return (
    <Flex vertical gap={8}>
      <span>单选值回显（IndustryEnum name）：</span>
      <Tag color="default">后端编码：{savedIndustryCode}</Tag>
      <IndustryEnum name={savedIndustryCode}>
        {(item) => {
          const resolved = enumItemToSelectValue(item);
          if (!resolved) return <span>加载中...</span>;
          return (
            <SelectIndustry
              single
              value={value ?? resolved}
              onChange={setValue}
              isPopup={isPopup}
              placeholder="请选择行业"
              style={{ width: 320 }}
            />
          );
        }}
      </IndustryEnum>
    </Flex>
  );
};

// 值回显 - 结合 IndustryEnum，仅传编码数组 names={[code, code]}
const ValueEchoWithEnumExample = ({ isPopup }) => {
  const [value, setValue] = useState();

  return (
    <Flex vertical gap={8}>
      <span>值回显（IndustryEnum names）：</span>
      <Tag color="default">后端编码：{savedIndustryCodes.join('、')}</Tag>
      <IndustryEnum names={savedIndustryCodes}>
        {(items) => {
          const resolved = enumItemsToSelectValue(items);
          if (!resolved.length) return <span>加载中...</span>;
          return (
            <SelectIndustry
              value={value ?? resolved}
              onChange={setValue}
              isPopup={isPopup}
              placeholder="请选择行业"
              style={{ width: 320 }}
            />
          );
        }}
      </IndustryEnum>
    </Flex>
  );
};

const BaseExample = () => {
  const [isPopup, setIsPopup] = useState(true);

  return (
    <Flex vertical gap={24}>
      <Flex align="center" gap={12}>
        <span>展示模式：</span>
        <Switch
          checked={isPopup}
          onChange={setIsPopup}
          checkedChildren="下拉"
          unCheckedChildren="弹窗"
        />
        <span style={{ color: '#666', fontSize: 12 }}>
          {isPopup ? '点击输入框展开下拉菜单' : '点击输入框打开弹窗'}
        </span>
      </Flex>
      <Divider />
      <BasicMultiExample isPopup={isPopup} />
      <Divider />
      <SingleSelectExample isPopup={isPopup} />
      <Divider />
      <MaxLimitExample isPopup={isPopup} />
      <Divider />
      <span style={{ fontWeight: 500 }}>单选值回显</span>
      <SingleValueEchoExample isPopup={isPopup} />
      <Divider />
      <SingleValueEchoByCodeExample isPopup={isPopup} />
      <Divider />
      <SingleValueEchoWithEnumExample isPopup={isPopup} />
      <Divider />
      <span style={{ fontWeight: 500 }}>多选值回显</span>
      <ValueEchoByIdExample isPopup={isPopup} />
      <Divider />
      <ValueEchoByCodesExample isPopup={isPopup} />
      <Divider />
      <ValueEchoWithEnumExample isPopup={isPopup} />
    </Flex>
  );
};

render(<BaseExample />);

SelectAddress 城市选择器
城市地址选择组件，支持国内外城市搜索选择、值回显，具备拼音搜索、首字母搜索等功能
_SuperSelectPlus(@kne/current-lib_super-select-plus)[import * as _SuperSelectPlus from "@kne/super-select-plus"],(@kne/current-lib_super-select-plus/dist/index.css),antd(antd)

const { SelectAddress, AddressEnum, addressEnumToSelectValue, addressEnumToSelectValueSingle } = _SuperSelectPlus;
const { Flex, Divider, Tag, Switch } = antd;
const { useState } = React;

// 模拟后端接口返回的城市编码
const savedCityCodes = ['010', '020'];
const savedCityCode = '010';

// 基础多选示例
const BasicMultiExample = ({ isPopup }) => {
  const [value, setValue] = useState([]);

  return (
    <Flex vertical gap={8}>
      <span>多选城市：</span>
      <SelectAddress
        value={value}
        onChange={setValue}
        isPopup={isPopup}
        placeholder="请选择城市"
        style={{ width: 320 }}
      />
      {value.length > 0 && (
        <Flex wrap gap={4}>
          {value.map((item) => (
            <Tag key={item.code} color="blue">
              {item.name}
            </Tag>
          ))}
        </Flex>
      )}
    </Flex>
  );
};

// 单选示例
const SingleSelectExample = ({ isPopup }) => {
  const [value, setValue] = useState(null);

  return (
    <Flex vertical gap={8}>
      <span>单选城市：</span>
      <SelectAddress
        single
        value={value}
        onChange={setValue}
        isPopup={isPopup}
        placeholder="请选择城市"
        style={{ width: 320 }}
      />
      {value && <Tag color="green">已选：{value.name}</Tag>}
    </Flex>
  );
};

// 数量限制示例
const MaxLimitExample = ({ isPopup }) => {
  const [value, setValue] = useState([]);

  return (
    <Flex vertical gap={8}>
      <span>最多选择 5 个城市：</span>
      <SelectAddress
        value={value}
        onChange={setValue}
        isPopup={isPopup}
        maxLength={5}
        placeholder="请选择城市（最多5项）"
        style={{ width: 320 }}
      />
      <Tag color={value.length >= 5 ? 'red' : 'blue'}>
        已选择 {value.length}/5 项
      </Tag>
    </Flex>
  );
};

// 值回显 - 仅传 value 编码，组件自动解析 label
const ValueEchoByCodeExample = ({ isPopup }) => {
  const [value, setValue] = useState(savedCityCodes.map((code) => ({ value: code })));

  return (
    <Flex vertical gap={8}>
      <span>值回显（仅编码 {&#96;{ value }&#96;}）：</span>
      <Tag color="default">后端编码：{savedCityCodes.join('、')}</Tag>
      <SelectAddress
        value={value}
        onChange={setValue}
        isPopup={isPopup}
        placeholder="请选择城市"
        style={{ width: 320 }}
      />
    </Flex>
  );
};

// 值回显 - 完整对象（表单已缓存 label）
const cachedCityValue = [
  { value: '010', label: '北京' },
  { value: '020', label: '上海' }
];

const ValueEchoWithLabelExample = ({ isPopup }) => {
  const [value, setValue] = useState(cachedCityValue);

  return (
    <Flex vertical gap={8}>
      <span>值回显（含 label）：</span>
      <Tag color="default">后端编码：{savedCityCodes.join('、')}</Tag>
      <SelectAddress
        value={value}
        onChange={setValue}
        isPopup={isPopup}
        placeholder="请选择城市"
        style={{ width: 320 }}
      />
    </Flex>
  );
};

// 值回显 - 结合 AddressEnum，仅传编码数组 names={[code, code]}
const ValueEchoWithEnumExample = ({ isPopup }) => {
  const [value, setValue] = useState();

  return (
    <Flex vertical gap={8}>
      <span>值回显（AddressEnum names）：</span>
      <Tag color="default">后端编码：{savedCityCodes.join('、')}</Tag>
      <AddressEnum names={savedCityCodes}>
        {(outputs) => {
          const resolved = addressEnumToSelectValue(outputs);
          if (!resolved.length) return <span>加载中...</span>;
          return (
            <SelectAddress
              value={value ?? resolved}
              onChange={setValue}
              isPopup={isPopup}
              placeholder="请选择城市"
              style={{ width: 320 }}
            />
          );
        }}
      </AddressEnum>
    </Flex>
  );
};

// 值回显 - 单选（仅编码）
const SingleValueEchoExample = ({ isPopup }) => {
  const [value, setValue] = useState({ value: '010' });

  return (
    <Flex vertical gap={8}>
      <span>单选值回显（{&#96;{ value: '010' }&#96;}）：</span>
      <SelectAddress
        single
        value={value}
        onChange={setValue}
        isPopup={isPopup}
        placeholder="请选择城市"
        style={{ width: 320 }}
      />
    </Flex>
  );
};

// 值回显 - 单选（字符串编码）
const SingleValueEchoByCodeExample = ({ isPopup }) => {
  const [value, setValue] = useState(savedCityCode);

  return (
    <Flex vertical gap={8}>
      <span>单选值回显（编码字符串）：</span>
      <SelectAddress
        single
        value={value}
        onChange={setValue}
        isPopup={isPopup}
        placeholder="请选择城市"
        style={{ width: 320 }}
      />
    </Flex>
  );
};

// 值回显 - 单选（AddressEnum name）
const SingleValueEchoWithEnumExample = ({ isPopup }) => {
  const [value, setValue] = useState();

  return (
    <Flex vertical gap={8}>
      <span>单选值回显（AddressEnum name）：</span>
      <Tag color="default">后端编码：{savedCityCode}</Tag>
      <AddressEnum name={savedCityCode}>
        {(output) => {
          const resolved = addressEnumToSelectValueSingle(output);
          if (!resolved) return <span>加载中...</span>;
          return (
            <SelectAddress
              single
              value={value ?? resolved}
              onChange={setValue}
              isPopup={isPopup}
              placeholder="请选择城市"
              style={{ width: 320 }}
            />
          );
        }}
      </AddressEnum>
    </Flex>
  );
};

const BaseExample = () => {
  const [isPopup, setIsPopup] = useState(true);

  return (
    <Flex vertical gap={24}>
      <Flex align="center" gap={12}>
        <span>展示模式：</span>
        <Switch
          checked={isPopup}
          onChange={setIsPopup}
          checkedChildren="下拉"
          unCheckedChildren="弹窗"
        />
        <span style={{ color: '#666', fontSize: 12 }}>
          {isPopup ? '点击输入框展开下拉菜单' : '点击输入框打开弹窗'}
        </span>
      </Flex>
      <Divider />
      <BasicMultiExample isPopup={isPopup} />
      <Divider />
      <SingleSelectExample isPopup={isPopup} />
      <Divider />
      <MaxLimitExample isPopup={isPopup} />
      <Divider />
      <span style={{ fontWeight: 500 }}>单选值回显</span>
      <SingleValueEchoExample isPopup={isPopup} />
      <Divider />
      <SingleValueEchoByCodeExample isPopup={isPopup} />
      <Divider />
      <SingleValueEchoWithEnumExample isPopup={isPopup} />
      <Divider />
      <span style={{ fontWeight: 500 }}>多选值回显</span>
      <ValueEchoByCodeExample isPopup={isPopup} />
      <Divider />
      <ValueEchoWithLabelExample isPopup={isPopup} />
      <Divider />
      <ValueEchoWithEnumExample isPopup={isPopup} />
    </Flex>
  );
};

render(<BaseExample />);

AddressEnum 地址枚举显示
用于显示城市名称的枚举组件，支持国际化、显示父级、自定义渲染等功能
_SuperSelectPlus(@kne/current-lib_super-select-plus)[import * as _SuperSelectPlus from "@kne/super-select-plus"],antd(antd),remoteLoader(@kne/remote-loader)

const { AddressEnum } = _SuperSelectPlus;
const { createWithRemoteLoader } = remoteLoader;
const { Flex } = antd;

const BaseExample = createWithRemoteLoader({
  modules: ['components-core:Global@PureGlobal', 'components-core:InfoPage']
})(({ remoteModules }) => {
  const [PureGlobal, InfoPage] = remoteModules;
  
  return (
    <PureGlobal preset={{
      ajax: async api => {
        return { data: { code: 0, data: await api.loader() } };
      },
      apis: {
        cityData: {
          loader: async () => {
            const module = await import('@kne/super-select-plus/src/SelectAddress/city.json');
            return module.default || module;
          }
        }
      }
    }}>
      <InfoPage>
        <InfoPage.Part title="基本用法">
          <Flex vertical gap={12}>
            <p>北京（编码：010）：<AddressEnum name="010" /></p>
            <p>上海（编码：020）：<AddressEnum name="020" /></p>
            <p>广州（编码：050020）：<AddressEnum name="050020" /></p>
            <p>深圳（编码：050090）：<AddressEnum name="050090" /></p>
          </Flex>
        </InfoPage.Part>
        
        <InfoPage.Part title="自定义渲染">
          <Flex vertical gap={12}>
            <p>带样式渲染：</p>
            <AddressEnum name="010">
              {({ city, parent }, { getLabelForLocal, locale }) => city && (
                <span style={{ padding: '4px 8px', background: '#f0f0f0', borderRadius: '4px' }}>
                  {getLabelForLocal(city, locale)}
                  {parent && <span style={{ fontSize: '12px', color: '#666', marginLeft: '8px' }}>({getLabelForLocal(parent, locale)})</span>}
                </span>
              )}
            </AddressEnum>
            
            <p>带图标显示：</p>
            <AddressEnum name="020">
              {({ city }, { getLabelForLocal, locale }) => city && (
                <span>📍 {getLabelForLocal(city, locale)}</span>
              )}
            </AddressEnum>
          </Flex>
        </InfoPage.Part>
        
        <InfoPage.Part title="实际业务场景">
          <div style={{ lineHeight: '32px' }}>
            <div><strong>姓名：</strong>张三</div>
            <div><strong>所在城市：</strong><AddressEnum name="010" /></div>
            <div><strong>期望工作城市：</strong><AddressEnum name="020" /></div>
            <div><strong>可接受城市：</strong><AddressEnum names={['010', '020', '050020']} /></div>
          </div>
        </InfoPage.Part>

        <InfoPage.Part title="批量显示 names">
          <Flex vertical gap={12}>
            <p>默认渲染：<AddressEnum names={['010', '020', '050020']} /></p>
            <AddressEnum names={['010', '020']}>
              {(outputs, { labels }) => (
                <Flex gap={8} wrap="wrap">
                  {labels.map(label => (
                    <span key={label} style={{ padding: '4px 8px', background: '#f6ffed', borderRadius: '4px' }}>
                      {label}
                    </span>
                  ))}
                </Flex>
              )}
            </AddressEnum>
          </Flex>
        </InfoPage.Part>
        
        <InfoPage.Part title="错误处理">
          <p>不存在的城市编码 999999：<AddressEnum name="999999" /></p>
        </InfoPage.Part>
      </InfoPage>
    </PureGlobal>
  );
});

render(<BaseExample />);

FunctionEnum 职能枚举显示
用于显示职能名称的枚举组件，支持国际化、自定义渲染及 names 批量显示
_SuperSelectPlus(@kne/current-lib_super-select-plus)[import * as _SuperSelectPlus from "@kne/super-select-plus"],antd(antd),remoteLoader(@kne/remote-loader)

const { FunctionEnum } = _SuperSelectPlus;
const { createWithRemoteLoader } = remoteLoader;
const { Flex } = antd;

const BaseExample = createWithRemoteLoader({
  modules: ['components-core:Global@PureGlobal', 'components-core:InfoPage']
})(({ remoteModules }) => {
  const [PureGlobal, InfoPage] = remoteModules;
  
  return (
    <PureGlobal preset={{
      ajax: async api => {
        return { data: { code: 0, data: await api.loader() } };
      },
      apis: {
        functionData: {
          loader: async () => {
            const module = await import('@kne/super-select-plus/src/SelectFunction/function.json');
            return module.default || module;
          }
        }
      }
    }}>
      <InfoPage>
        <InfoPage.Part title="基本用法">
          <Flex vertical gap={12}>
            <p>CEO（编码：001001001）：<FunctionEnum name="001001001" /></p>
            <p>副总裁（编码：001001002）：<FunctionEnum name="001001002" /></p>
            <p>COO（编码：001001003）：<FunctionEnum name="001001003" /></p>
          </Flex>
        </InfoPage.Part>
        
        <InfoPage.Part title="自定义渲染">
          <Flex vertical gap={12}>
            <p>带样式渲染：</p>
            <FunctionEnum name="001001001">
              {(item, { locale }) => item && (
                <span style={{ padding: '4px 8px', background: '#e6f7ff', borderRadius: '4px' }}>
                  {item.label}
                  {item.enName && <span style={{ marginLeft: '8px', color: '#666' }}>({item.enName})</span>}
                </span>
              )}
            </FunctionEnum>
            
            <p>带层级显示：</p>
            <FunctionEnum name="001001002">
              {(item, { mapping }) => {
                if (!item) return null;
                const parent = item.parentId ? mapping.get(item.parentId) : null;
                return (
                  <div>
                    {parent && <span style={{ fontSize: '12px', color: '#999' }}>{parent.label} &gt; </span>}
                    <span style={{ color: '#1890ff' }}>{item.label}</span>
                  </div>
                );
              }}
            </FunctionEnum>
          </Flex>
        </InfoPage.Part>
        
        <InfoPage.Part title="实际业务场景">
          <div style={{ lineHeight: '32px' }}>
            <div><strong>姓名：</strong>李四</div>
            <div><strong>当前职能：</strong><FunctionEnum name="001001001" /></div>
            <div><strong>期望职能：</strong><FunctionEnum name="001001002" /></div>
            <div><strong>可胜任职能：</strong><FunctionEnum names={['001001001', '001001002', '001001003']} /></div>
          </div>
        </InfoPage.Part>

        <InfoPage.Part title="批量显示 names">
          <Flex vertical gap={12}>
            <p>默认渲染：<FunctionEnum names={['001001001', '001001002', '001001003']} /></p>
            <FunctionEnum names={['001001001', '001001002']}>
              {(items, { labels }) => (
                <Flex gap={8} wrap="wrap">
                  {labels.map(label => (
                    <span key={label} style={{ padding: '4px 8px', background: '#e6f7ff', borderRadius: '4px' }}>
                      {label}
                    </span>
                  ))}
                </Flex>
              )}
            </FunctionEnum>
          </Flex>
        </InfoPage.Part>
        
        <InfoPage.Part title="国际化支持">
          <FunctionEnum name="001001003">
            {(item, { locale }) => item && (
              <div>
                <div>当前语言：{locale}</div>
                <div>显示名称：{item.label}</div>
                {item.chName && <div>中文名：{item.chName}</div>}
                {item.enName && <div>英文名：{item.enName}</div>}
              </div>
            )}
          </FunctionEnum>
        </InfoPage.Part>
      </InfoPage>
    </PureGlobal>
  );
});

render(<BaseExample />);

IndustryEnum 行业枚举显示
用于显示行业名称的枚举组件，支持国际化、自定义渲染及 names 批量显示
_SuperSelectPlus(@kne/current-lib_super-select-plus)[import * as _SuperSelectPlus from "@kne/super-select-plus"],antd(antd),remoteLoader(@kne/remote-loader)

const { IndustryEnum } = _SuperSelectPlus;
const { createWithRemoteLoader } = remoteLoader;
const { Flex } = antd;

const BaseExample = createWithRemoteLoader({
  modules: ['components-core:Global@PureGlobal', 'components-core:InfoPage']
})(({ remoteModules }) => {
  const [PureGlobal, InfoPage] = remoteModules;
  
  return (
    <PureGlobal preset={{
      ajax: async api => {
        return { data: { code: 0, data: await api.loader() } };
      },
      apis: {
        industryData: {
          loader: async () => {
            const module = await import('@kne/super-select-plus/src/SelectIndustry/industry.json');
            return module.default || module;
          }
        }
      }
    }}>
      <InfoPage>
        <InfoPage.Part title="基本用法">
          <Flex vertical gap={12}>
            <p>互联网/电子通信/软件（编码：001）：<IndustryEnum name="001" /></p>
            <p>房地产/建筑/物业（编码：003）：<IndustryEnum name="003" /></p>
            <p>金融（编码：004）：<IndustryEnum name="004" /></p>
          </Flex>
        </InfoPage.Part>
        
        <InfoPage.Part title="自定义渲染">
          <Flex vertical gap={12}>
            <p>带样式渲染：</p>
            <IndustryEnum name="001">
              {(item, { locale }) => item && (
                <span style={{ padding: '4px 8px', background: '#f6ffed', borderRadius: '4px' }}>
                  {item.label}
                  {item.enName && <span style={{ marginLeft: '8px', color: '#666' }}>({item.enName})</span>}
                </span>
              )}
            </IndustryEnum>
          </Flex>
        </InfoPage.Part>
        
        <InfoPage.Part title="实际业务场景">
          <div style={{ lineHeight: '32px' }}>
            <div><strong>企业名称：</strong>某某科技有限公司</div>
            <div><strong>所属行业：</strong><IndustryEnum name="001" /></div>
            <div><strong>期望行业：</strong><IndustryEnum name="004" /></div>
          </div>
        </InfoPage.Part>
        
        <InfoPage.Part title="行业标签展示">
          <Flex gap={8} wrap="wrap">
            <IndustryEnum names={['001', '003', '004']}>
              {(items, { labels }) => labels.map(label => (
                <span key={label} style={{ padding: '4px 8px', background: '#e6f7ff', borderRadius: '4px' }}>
                  {label}
                </span>
              ))}
            </IndustryEnum>
          </Flex>
        </InfoPage.Part>

        <InfoPage.Part title="批量显示 names">
          <Flex vertical gap={12}>
            <p>默认渲染（逗号分隔）：<IndustryEnum names={['001', '003', '004']} /></p>
            <IndustryEnum names={['001', '004']}>
              {(items, { labels, locale }) => (
                <div>
                  <div style={{ marginBottom: 8 }}>当前语言：{locale}</div>
                  <div>{labels.join(' · ')}</div>
                </div>
              )}
            </IndustryEnum>
          </Flex>
        </InfoPage.Part>
      </InfoPage>
    </PureGlobal>
  );
});

render(<BaseExample />);

EnumDisplay 通用枚举显示
通用枚举显示组件，支持自定义数据源、国际化、缓存及 names 批量显示
_SuperSelectPlus(@kne/current-lib_super-select-plus)[import * as _SuperSelectPlus from "@kne/super-select-plus"],antd(antd),remoteLoader(@kne/remote-loader)

const { EnumDisplay } = _SuperSelectPlus;
const { createWithRemoteLoader } = remoteLoader;
const { Flex } = antd;

const BaseExample = createWithRemoteLoader({
  modules: ['components-core:Global@PureGlobal', 'components-core:InfoPage']
})(({ remoteModules }) => {
  const [PureGlobal, InfoPage] = remoteModules;
  
  // 自定义枚举数据示例
  const customEnumData = [
    { code: '1', name: '本科', enName: 'Bachelor' },
    { code: '2', name: '硕士', enName: 'Master' },
    { code: '3', name: '博士', enName: 'Doctor' }
  ];
  
  // 学历枚举配置
  const educationEnumApi = {
    cache: 'EDUCATION_DATA',
    isLocal: true,
    loader: async () => customEnumData
  };
  
  return (
    <PureGlobal preset={{
      ajax: async api => {
        return { data: { code: 0, data: await api.loader() } };
      }
    }}>
      <InfoPage>
        <InfoPage.Part title="基本用法">
          <Flex vertical gap={12}>
            <p>学历 - 本科（编码：1）：<EnumDisplay name="1" type="education" {...educationEnumApi} /></p>
            <p>学历 - 硕士（编码：2）：<EnumDisplay name="2" type="education" {...educationEnumApi} /></p>
            <p>学历 - 博士（编码：3）：<EnumDisplay name="3" type="education" {...educationEnumApi} /></p>
          </Flex>
        </InfoPage.Part>
        
        <InfoPage.Part title="自定义 getLabel 函数">
          <EnumDisplay
            name="1"
            type="education"
            {...educationEnumApi}
            getLabel={(item, locale) => locale === 'en-US' ? (item.enName || item.name) : item.name}
          >
            {(item, { locale }) => item && (
              <div>
                <div>当前语言：{locale}</div>
                <div>显示名称：{item.label}</div>
              </div>
            )}
          </EnumDisplay>
        </InfoPage.Part>
        
        <InfoPage.Part title="自定义渲染">
          <EnumDisplay name="2" type="education" {...educationEnumApi}>
            {(item) => item && (
              <span style={{ padding: '4px 8px', background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)', borderRadius: '4px', color: '#fff' }}>
                {item.name} {item.enName && &#96;(${item.enName})&#96;}
              </span>
            )}
          </EnumDisplay>
        </InfoPage.Part>
        
        <InfoPage.Part title="实际业务场景">
          <div style={{ lineHeight: '32px' }}>
            <div><strong>姓名：</strong>赵六</div>
            <div><strong>最高学历：</strong><EnumDisplay name="3" type="education" {...educationEnumApi} /></div>
            <div><strong>第二学历：</strong><EnumDisplay name="2" type="education" {...educationEnumApi} /></div>
            <div><strong>全部学历：</strong><EnumDisplay names={['3', '2', '1']} type="education" {...educationEnumApi} /></div>
          </div>
        </InfoPage.Part>

        <InfoPage.Part title="批量显示 names">
          <Flex vertical gap={12}>
            <p>默认渲染（label 数组 toString，逗号分隔）：</p>
            <p>学历编码 ['1', '2', '3']：<EnumDisplay names={['1', '2', '3']} type="education" {...educationEnumApi} /></p>
            <p>学历编码 ['1', '3']：<EnumDisplay names={['1', '3']} type="education" {...educationEnumApi} /></p>
            <p>空数组：<EnumDisplay names={[]} type="education" {...educationEnumApi} /></p>
          </Flex>
        </InfoPage.Part>

        <InfoPage.Part title="names 自定义渲染">
          <EnumDisplay names={['1', '2', '3']} type="education" {...educationEnumApi}>
            {(items, { labels, mapping, locale }) => (
              <Flex vertical gap={8}>
                <div>当前语言：{locale}</div>
                <div>labels：{labels.join(' / ')}</div>
                <Flex gap={8} wrap="wrap">
                  {items.map((item, index) => item && (
                    <span
                      key={item.code}
                      style={{ padding: '4px 8px', background: '#f0f5ff', borderRadius: '4px' }}
                    >
                      {item.label}
                      {mapping.get(item.code)?.enName && &#96; (${mapping.get(item.code).enName})&#96;}
                    </span>
                  ))}
                </Flex>
              </Flex>
            )}
          </EnumDisplay>
        </InfoPage.Part>
        
        <InfoPage.Part title="错误处理">
          <Flex vertical gap={12}>
            <p>单个无效编码：</p>
            <EnumDisplay name="999" type="education" {...educationEnumApi}>
              {(item) => <span>{item ? item.label : '未知学历'}</span>}
            </EnumDisplay>
            <p>批量含无效编码（默认跳过无效项）：</p>
            <EnumDisplay names={['1', '999', '3']} type="education" {...educationEnumApi} />
            <p>批量含无效编码（自定义处理）：</p>
            <EnumDisplay names={['1', '999', '3']} type="education" {...educationEnumApi}>
              {(items, { labels }) => (
                <span>
                  {items.map((item, index) => (
                    <span key={index}>
                      {index > 0 && '、'}
                      {item ? item.label : '未知'}
                    </span>
                  ))}
                </span>
              )}
            </EnumDisplay>
          </Flex>
        </InfoPage.Part>
      </InfoPage>
    </PureGlobal>
  );
});

render(<BaseExample />);

API

SelectFunction 职能选择器

基于级联选择器的职能选择组件，支持多级职能数据的搜索和选择，适用于招聘、HR系统等业务场景。

属性

属性	类型	默认值	说明
value	array \| object	[]	当前选中的值，单选时为对象，多选时为数组
onChange	function	-	选中值变化时的回调函数
single	boolean	false	是否单选模式
placeholder	string	'请选择职能'	输入框占位符
isPopup	boolean	true	是否下拉模式，false 为弹窗模式
overlayWidth	string \| number	'320px'	选择器宽度
onSearch	function	-	自定义搜索函数，参数为 (searchText, { mapping })
maxLength	number	-	多选时最多可选数量
disabled	boolean	false	是否禁用
style	object	-	自定义样式
className	string	-	自定义类名

静态方法

方法	说明
SelectFunction.defaultData()	获取默认职能数据，返回 Promise
SelectFunction.defaultProps	组件默认属性配置

数据结构

组件内部使用扁平化的职能数据结构，通过 code 和 parentCode 建立层级关系：

{
  code: '001001001',        // 职能编码
  parentCode: '001001',     // 父级编码
  chName: '首席执行官CEO',  // 中文名称
  enName: 'CEO',           // 英文名称
  pinyin: 'shouzhixingguan', // 拼音
  spelling: 'szxg'         // 首字母缩写
}

值回显

value 每项需包含 id（职能编码）和 name（显示名称）。编辑场景下后端通常只返回编码，组件会在 options 加载后自动解析 name：

// 方式一：仅传编码，组件加载 options 后自动解析 name
const value = ['001001001', '001001002'];
// 或对象形式
const value = [{ id: '001001001' }, { id: '001001002' }];

// 方式二：单选回显
const singleValue = { id: '001001001' };
// 或字符串编码
const singleValue = '001001001';

// 方式三：结合 FunctionEnum name，单选编码回显
<FunctionEnum name="001001001">
  {(item) => (
    <SelectFunction
      single
      value={enumItemToSelectValue(item)}
      onChange={setValue}
    />
  )}
</FunctionEnum>

// 方式四：结合 FunctionEnum names，多选编码数组回显（推荐）
const savedCodes = ['001001001', '001001002'];

<FunctionEnum names={savedCodes}>
  {(items) => {
    const resolved = enumItemsToSelectValue(items);
    return (
      <SelectFunction
        value={value ?? resolved}
        onChange={setValue}
      />
    );
  }}
</FunctionEnum>

SelectIndustry 行业选择器

基于级联选择器的行业选择组件，支持多级行业数据的搜索和选择，适用于招聘、企业信息管理等业务场景。

属性

属性	类型	默认值	说明
value	array \| object	[]	当前选中的值，单选时为对象，多选时为数组
onChange	function	-	选中值变化时的回调函数
single	boolean	false	是否单选模式
placeholder	string	'请选择行业'	输入框占位符
isPopup	boolean	true	是否下拉模式，false 为弹窗模式
overlayWidth	string \| number	'320px'	选择器宽度
onSearch	function	-	自定义搜索函数，参数为 (searchText, { mapping })
maxLength	number	-	多选时最多可选数量
disabled	boolean	false	是否禁用
style	object	-	自定义样式
className	string	-	自定义类名

静态方法

方法	说明
SelectIndustry.defaultData()	获取默认行业数据，返回 Promise
SelectIndustry.defaultProps()	组件默认属性配置

数据结构

组件内部使用扁平化的行业数据结构，通过 code 和 parentCode 建立层级关系：

{
  code: '001',              // 行业编码
  parentCode: '',           // 父级编码
  chName: '互联网/电子通信/软件', // 中文名称
  enName: 'Internet/Telecoms/Software', // 英文名称
  pinyin: 'hulianwang',     // 拼音
  spelling: 'hlw'          // 首字母缩写
}

值回显

value 每项需包含 id（行业编码）和 name（显示名称）。编辑场景下后端通常只返回编码，组件会在 options 加载后自动解析 name：

// 方式一：仅传编码，组件加载 options 后自动解析 name
const value = ['001', '003'];
// 或对象形式
const value = [{ id: '001' }, { id: '003' }];

// 方式二：单选回显
const singleValue = { id: '001' };
// 或字符串编码
const singleValue = '001';

// 方式三：结合 IndustryEnum name，单选编码回显
<IndustryEnum name="001">
  {(item) => (
    <SelectIndustry
      single
      value={enumItemToSelectValue(item)}
      onChange={setValue}
    />
  )}
</IndustryEnum>

// 方式四：结合 IndustryEnum names，多选编码数组回显（推荐）
const savedCodes = ['001', '003'];

<IndustryEnum names={savedCodes}>
  {(items) => {
    const resolved = enumItemsToSelectValue(items);
    return (
      <SelectIndustry
        value={value ?? resolved}
        onChange={setValue}
      />
    );
  }}
</IndustryEnum>

SelectAddress 城市选择器

城市地址选择组件，支持国内外城市的搜索和选择，具备拼音搜索、首字母搜索等功能，适用于地址填写、城市筛选等业务场景。

属性

属性	类型	默认值	说明
value	array \| object	[]	当前选中的值，单选时为对象，多选时为数组
onChange	function	-	选中值变化时的回调函数
single	boolean	false	是否单选模式
placeholder	string	'请选择城市'	输入框占位符
isPopup	boolean	true	是否下拉模式，false 为弹窗模式
overlayWidth	string \| number	'320px'	选择器宽度
searchPlaceholder	string	-	搜索框占位符
maxLength	number	-	多选时最多可选数量
disabled	boolean	false	是否禁用
style	object	-	自定义样式
className	string	-	自定义类名

静态方法

方法	说明
SelectAddress.defaultData()	获取默认城市数据，返回 Promise
SelectAddress.createAddressApi(cityData)	根据城市数据创建地址 API 实例
SelectAddress.defaultProps	组件默认属性配置

Address API

createAddressApi 方法返回的对象包含以下方法：

方法	参数	返回值	说明
getCity(id)	string: 城市ID	object: { city, parent }	根据ID获取城市信息
searchCities(value)	string: 搜索关键词	array: 城市列表	搜索城市，支持拼音和首字母
getCityList()	-	array: 城市列表	获取所有城市列表

数据结构

城市数据包含国内外主要城市：

{
  code: '010',             // 城市编码
  name: '北京',            // 城市名称
  enName: 'Beijing',       // 英文名称
  parentCode: '410',       // 父级编码
  pinyin: 'beijing',       // 拼音
  spelling: 'bj'           // 首字母缩写
}

值回显

编辑场景下后端通常只返回编码，组件会在数据加载后自动解析 label：

// 方式一：仅传编码，组件加载数据后自动解析 label
const value = [{ value: '010' }, { value: '020' }];

// 方式二：单选回显
const singleValue = { value: '010' };
// 或字符串编码
const singleValue = '010';

// 方式三：结合 AddressEnum name，单选编码回显
<AddressEnum name="010">
  {(output) => (
    <SelectAddress
      single
      value={addressEnumToSelectValueSingle(output)}
      onChange={setValue}
    />
  )}
</AddressEnum>

// 方式四：结合 AddressEnum names，多选编码数组回显（推荐）
const savedCodes = ['010', '020'];

<AddressEnum names={savedCodes}>
  {(outputs) => {
    const resolved = addressEnumToSelectValue(outputs);
    return (
      <SelectAddress
        value={value ?? resolved}
        onChange={setValue}
      />
    );
  }}
</AddressEnum>

AddressEnum 地址枚举显示组件

用于显示城市名称的枚举组件，使用 react-fetch 加载数据，支持缓存和国际化。

属性

属性	类型	默认值	说明
name	string	-	城市编码，与 names 二选一
names	string[]	-	城市编码数组，与 name 二选一，默认 label 数组 toString 输出
displayParent	boolean	false	是否显示父级城市名称
force	boolean	false	是否强制刷新缓存
children	function	-	自定义渲染函数
api	object	-	自定义 API 配置

自定义渲染函数

// 单个编码 name
children={({ city, parent }, { displayParent, locale, getLabelForLocal }) => {
  // city: 城市数据对象
  // parent: 父级城市数据对象
  return <span>{getLabelForLocal(city, locale)}</span>;
}}

// 批量编码 names
children={(outputs, { labels, locale, getLabelForLocal }) => {
  // outputs: [{ city, parent }, ...] 数组
  // labels: 有效项的 label 字符串数组
  return <span>{labels.join('、')}</span>;
}}

静态方法

方法	说明
AddressEnum.getLabelForLocal(item, locale)	获取本地化标签
AddressEnum.addressDefaultApi	默认 API 配置

使用示例

// 基本用法
<AddressEnum name="010" />

// 批量显示
<AddressEnum names={['010', '020']} />

// 显示父级
<AddressEnum name="010" displayParent />

// 结合 SelectAddress 值回显
<AddressEnum names={['010', '020']}>
  {(outputs) => (
    <SelectAddress value={addressEnumToSelectValue(outputs)} />
  )}
</AddressEnum>

FunctionEnum 职能枚举显示组件

用于显示职能名称的枚举组件，使用 react-fetch 加载数据，支持缓存和国际化。

属性

属性	类型	默认值	说明
name	string	-	职能编码，与 names 二选一
names	string[]	-	职能编码数组，与 name 二选一，默认 label 数组 toString 输出
force	boolean	false	是否强制刷新缓存
children	function	-	自定义渲染函数
api	object	-	自定义 API 配置

自定义渲染函数

// 单个编码 name
children={(item, { locale, mapping, labels, names }) => {
  // item: 职能数据对象，包含 label, chName, enName 等
  // locale: 当前语言环境
  // mapping: 所有职能数据的 Map 对象
  // labels: 当前项的 label 数组
  return <span>{item.label}</span>;
}}

// 批量编码 names
children={(items, { locale, mapping, labels, names }) => {
  // items: 职能数据对象数组，无效编码对应 undefined
  // labels: 有效项的 label 字符串数组
  return <span>{labels.join('、')}</span>;
}}

静态方法

方法	说明
FunctionEnum.getLabelForLocal(item, locale)	获取本地化标签
FunctionEnum.defaultFunctionApi	默认 API 配置

使用示例

// 基本用法
<FunctionEnum name="001001001" />

// 批量显示
<FunctionEnum names={['001001001', '001001002', '001001003']} />

// 自定义渲染
<FunctionEnum name="001001001">
  {(item, { locale }) => (
    <div>
      <span>{item.label}</span>
      {item.enName && <span>({item.enName})</span>}
    </div>
  )}
</FunctionEnum>

// 批量自定义渲染
<FunctionEnum names={['001001001', '001001002']}>
  {(items, { labels }) => labels.join(' / ')}
</FunctionEnum>

IndustryEnum 行业枚举显示组件

用于显示行业名称的枚举组件，使用 react-fetch 加载数据，支持缓存和国际化。

属性

属性	类型	默认值	说明
name	string	-	行业编码，与 names 二选一
names	string[]	-	行业编码数组，与 name 二选一，默认 label 数组 toString 输出
force	boolean	false	是否强制刷新缓存
children	function	-	自定义渲染函数
api	object	-	自定义 API 配置

自定义渲染函数

// 单个编码 name
children={(item, { locale, mapping, labels, names }) => {
  // item: 行业数据对象，包含 label, chName, enName 等
  // locale: 当前语言环境
  // mapping: 所有行业数据的 Map 对象
  // labels: 当前项的 label 数组
  return <span>{item.label}</span>;
}}

// 批量编码 names
children={(items, { locale, mapping, labels, names }) => {
  // items: 行业数据对象数组，无效编码对应 undefined
  // labels: 有效项的 label 字符串数组
  return <span>{labels.join('、')}</span>;
}}

静态方法

方法	说明
IndustryEnum.getLabelForLocal(item, locale)	获取本地化标签
IndustryEnum.defaultIndustryApi	默认 API 配置

使用示例

// 基本用法
<IndustryEnum name="001" />

// 批量显示
<IndustryEnum names={['001', '003', '004']} />

// 自定义渲染
<IndustryEnum name="001">
  {(item, { locale }) => (
    <div>
      <span>{item.label}</span>
      {item.enName && <span>({item.enName})</span>}
    </div>
  )}
</IndustryEnum>

// 批量自定义渲染
<IndustryEnum names={['001', '004']}>
  {(items, { labels }) => labels.join(' · ')}
</IndustryEnum>

EnumDisplay 通用枚举显示组件

通用的枚举显示组件，支持自定义数据源、国际化、缓存等功能。

属性

属性	类型	默认值	说明
name	string	-	单个枚举值编码，与 names 二选一
names	string[]	-	多个枚举值编码，与 name 二选一，默认 label 数组 toString 输出
type	string	-	枚举类型标识
cache	string	'ENUM_DATA'	缓存键名
force	boolean	false	是否强制刷新缓存
children	function	-	自定义渲染函数
api	object	-	API 配置对象
getLabel	function	-	自定义标签获取函数

API 配置

api={{
  cache: 'CUSTOM_DATA',      // 缓存键名
  isLocal: true,             // 是否本地数据
  ttl: 1000 * 60 * 60 * 24,  // 缓存时间（毫秒）
  loader: async () => {      // 数据加载函数
    return data;
  }
}}

// 或远程 API
api={{
  cache: 'REMOTE_DATA',
  url: '/api/enum',          // API 地址
  method: 'GET',             // 请求方法
  dataFormat: (data) => data // 数据格式化函数
}}

自定义渲染函数

// 单个编码 name
children={(item, { locale, mapping, labels, names }) => {
  // item: 枚举数据对象
  // locale: 当前语言环境
  // mapping: 所有枚举数据的 Map 对象
  // labels: 当前项的 label 数组
  return <span>{item.label}</span>;
}}

// 批量编码 names
children={(items, { locale, mapping, labels, names }) => {
  // items: 枚举数据对象数组，无效编码对应 undefined
  // labels: 有效项的 label 字符串数组
  // names: 传入的编码数组
  return <span>{labels.join('、')}</span>;
}}

使用示例

// 基本用法
<EnumDisplay
  name="1"
  type="education"
  api={{
    cache: 'EDUCATION_DATA',
    loader: async () => [
      { code: '1', name: '本科', enName: 'Bachelor' },
      { code: '2', name: '硕士', enName: 'Master' }
    ]
  }}
/>

// 批量显示
<EnumDisplay
  names={['1', '2', '3']}
  type="education"
  api={educationEnumApi}
/>

// 自定义 getLabel
<EnumDisplay
  name="1"
  type="education"
  api={api}
  getLabel={(item, locale) => {
    return locale === 'en-US' ? item.enName : item.name;
  }}
/>

// 批量自定义渲染
<EnumDisplay names={['1', '2', '3']} type="education" api={api}>
  {(items, { labels }) => labels.join(' / ')}
</EnumDisplay>

工具函数

用于将 names={[code, code]} 解析结果转为选择器 value：

函数	说明
`enumItemsToSelectValue(items, options?)`	将 FunctionEnum / IndustryEnum 的 items 转为 `{ id, name }[]`，可选 `valueKey` / `labelKey`
`enumItemToSelectValue(item, options?)`	单选：将 FunctionEnum / IndustryEnum 的 item 转为 `{ id, name }`
`addressEnumToSelectValue(outputs)`	将 AddressEnum 解析结果转为 SelectAddress 的 `{ value, label }[]`（支持 name 单值或 names 数组）
`addressEnumToSelectValueSingle(output)`	单选：将 AddressEnum name 解析结果转为 `{ value, label }`

import { enumItemsToSelectValue, addressEnumToSelectValue } from '@kne/super-select-plus';

// 职能/行业选择器回显
<FunctionEnum names={['001001001', '001001002']}>
  {(items) => (
    <SelectFunction value={enumItemsToSelectValue(items)} />
  )}
</FunctionEnum>

// 城市选择器回显
<AddressEnum names={['010', '020']}>
  {(outputs) => (
    <SelectAddress value={addressEnumToSelectValue(outputs)} />
  )}
</AddressEnum>

国际化支持

所有组件均支持国际化，通过 @kne/react-intl 实现：

支持的语言

中文（zh-CN）：默认语言
英文（en-US）：备用语言

使用方式

组件会根据当前 locale 自动切换语言：

中文名称（chName）优先显示中文环境
英文名称（enName）优先显示英文环境
当对应语言不存在时，会使用备选语言

搜索功能

所有组件的搜索功能均支持：

中文名称搜索（chName）
英文名称搜索（enName）
拼音搜索（pinyin）
首字母搜索（spelling）

Name		Name	Last commit message	Last commit date
Latest commit History 8 Commits
.github		.github
.husky		.husky
doc		doc
src		src
.gitattributes		.gitattributes
.gitignore		.gitignore
.prettierrc		.prettierrc
README.md		README.md
package.json		package.json

Folders and files

Latest commit

History

Repository files navigation

super-select-plus

描述

安装

概述

主要特性

组件列表

数据来源

示例

示例代码

API

SelectFunction 职能选择器

属性

静态方法

数据结构

值回显

SelectIndustry 行业选择器

属性

静态方法

数据结构

值回显

SelectAddress 城市选择器

属性

静态方法

Address API

数据结构

值回显

AddressEnum 地址枚举显示组件

属性

自定义渲染函数

静态方法

使用示例

FunctionEnum 职能枚举显示组件

属性

自定义渲染函数

静态方法

使用示例

IndustryEnum 行业枚举显示组件

属性

自定义渲染函数

静态方法

使用示例

EnumDisplay 通用枚举显示组件

属性

API 配置

自定义渲染函数

使用示例

工具函数

国际化支持

支持的语言

使用方式

搜索功能

About

Resources

Uh oh!

Stars

Watchers

Forks

Releases 3

Packages 0

Uh oh!

Contributors

Uh oh!

Languages

Packages