1、system-params-service
import paramCache from "../common/param-cache" import RequestPromise from "./axios-service/RequestPromise"; export const fetchSystemParams = () => { return RequestPromise({url: '/api/system-parameters'}) } const parameters = paramCache.getItem("system-params") export const getParam = async (type: string) => { if (parameters) { return parameters[type] } else { return fetchSystemParams().then(({data}) => { paramCache.setItem("system-params", data) return data[type] }) } } export const getParamKeys = async (type: string) => { if (parameters) { return setParamKeys(parameters) } else { return fetchSystemParams().then(({data}) => { paramCache.setItem("system-params", data) return setParamKeys(data[type]) }) } } const setParamKeys = (params: any) => { const paramKeys: string[] = []; for (const key in params) { if (params.hasOwnProperty(key)) { paramKeys.push(key) } } return paramKeys }
2、param-type (filter)
import {useState, useEffect} from "react"; import {getParam} from "../../service/system-params-service"; const useParamType = (type: string) => { const [paramType, setParamType] = useState<any>(null) useEffect(() => { getParam(type).then(data => { setParamType(data); }) }, [type]) return paramType; } export default useParamType;
3、param-select component
import * as React from "react"; import useParamType from "./param-type"; import { useState, useEffect } from "react"; import {Select} from "antd"; import { getParamKeys } from "../../service/system-params-service"; interface ISelectProps { paramType: string; selectValue: string; placeholder?: string; selectChange: (type: string) => void; } const {Option} = Select; const ParamSelect = (props: ISelectProps) => { const paramTypeFilter = useParamType(props.paramType) const [paramKeys, setParamKeys] = useState<string[]>([]) useEffect(() => { getParamKeys(props.paramType).then(data => { setParamKeys(data) }) }, []) return ( <Select style={{ 180}} allowClear={true} value={props.selectValue} onChange={props.selectChange} > {paramKeys && paramKeys.map((option, index) => { return <Option value={option}>{paramTypeFilter[option]}</Option> })} </Select> ) }