sunmao-sdk/src/component/RadioCommon/index.jsx

榫卯-开箱即用赋能-sdk

"use strict";
import React, { useState, useEffect } from "react";
import * as commonUtils from "../../utils/commonUtils";
import * as formUtils from "../../utils/formUtils";

import { Radio } from "antd";

const { Group } = Radio;
/**
 * commonProps 独立配置
 * showSearch : 是否可输入搜索，默认否 openSearch
 * requestFunc : 外部传进网络请求方法，只能接受返回数组[] ,切记
 * url : 如需网络获取选择列表，需提供url
 * params ： 网络请求参数
 *
 * list : 默认选择列表
 * key :  对象key对应字段，即返回的value
 * text :  对象name对应字段，即显示的name
 * showName :  对象name对应字段，即显示的name
 * specialReturn : 特殊返回函数,进行特殊处理，如不止需要返回选中 value时，可通过此方法返回,返回为数组或对象，结合antd的API，自行注意
 *
 *
 * uiOptions 为antd中Select自带属性,参考antd中API
 *
 * bs:func 传值，不能被转json后
 */
const displayName = "RadioCommon";
const RadioCommon = props => {
  const {
    onChange,
    name,
    value,
    schema: { commonProps = {} },
    options: uiOptions
  } = props;

  const {
    requestFunc,
    url,
    params,
    list,
    key = "key",
    text = "preName",
    okPath
  } = commonProps;

  const [state, set] = useState(null);

  useEffect(() => {
    if (list) setList(list);
    // 需要网络请求
    else if (url && requestFunc) {
      post("");
    }
  }, []);

  const post = async () => {
    // 组装请求参数
    requestFunc(url, params, okPath).then(req => {
      setList(commonUtils.getFirstList(req));
    });
  };

  const setList = data => {
    let list = formUtils.getCPDicList(data, key, text);
    list && set(list);
  };

  const handleChange = ({ target: { value } }) => {
    onChange(name, value);
  };

  return (
    state && (
      <Group
        style={{ width: "100%", padding: "5px 0" }}
        value={value}
        options={state}
        onChange={handleChange}
        {...uiOptions}
      />
    )
  );
};

export default RadioCommon;