MedicalWisdomCheckSys/src/components/MccsProFormSelect/index.tsx

/*
 * @Author: your name
 * @Date: 2021-12-07 09:47:50
 * @LastEditTime: 2022-01-01 14:29:55
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: /MedicalWisdomCheckSys/src/components/MccsProFormSelect/index.tsx
 */

import React,{ useState,useEffect } from 'react'

import {
    ProFormSelect,
} from '@ant-design/pro-form';
import { ProFormSelectProps } from '@ant-design/pro-form/lib/components/Select';
import { Input,Form } from 'antd';



import './style.less';


type MccsSelectProps = {
    withInput?: boolean, //是否带有输入功能
    selectList?: { label: string, value: string }[], //select可选项
    value?:string|number,
    onChange?:(val:any)=>void
} & ProFormSelectProps

//props 参考proComponent
const MccsSelect = (props:MccsSelectProps) => {

    const { withInput, fieldProps, selectList,name,label,value,onChange,...restProperty } = props;
    const [selectMode, setSelectMode] = useState<'SELECT' | 'INPUT'>('SELECT');
    const [keyValue,setKeyValue] = useState<string>('');  //输入关键字
    const [find,setFind] = useState(false);


    const onSearchHandle = (val: string) => {
        setKeyValue(val);
        if (selectList&&withInput&&val.length>0) {
            //且需要带有输入框时
            const findeIndex = selectList.findIndex((t) => {
                return t.value == val;
            });
            if (findeIndex != -1) {
                setFind(true);
                setSelectMode('SELECT');
            } else {
                setFind(false);
                setSelectMode('INPUT');
            }
        }
    }

    const inputOnChange = (e:any)=>{
        // console.log(e.target.value);
        setKeyValue(e.target.value);
        if (selectList&&withInput) {
            //且需要带有输入框时
            const findeIndex = selectList.findIndex((t) => {
                return t.value == e.target.value;
            });
            if (findeIndex != -1) {
                setSelectMode('SELECT');
            } else {
                setSelectMode('INPUT');
            }
        }
    }

    const onSelectionchange = (values:any)=>{
        // console.log({values});
        if(withInput){
            //带有输入框且单选的时候
            if(Object.prototype.toString.call(values) == '[object String]'){
                setKeyValue(values);
            }
        }
    }


    return (
        <>
            {
                selectMode === 'SELECT' && (
                    <ProFormSelect
                        options={selectList}
                        label={label}
                        name={name}
                        fieldProps={{
                            onSearch: onSearchHandle,
                            searchValue:keyValue,
                            autoFocus:true,
                            onChange:val=>{onSelectionchange(val);onChange&&onChange(val)},
                            value,
                            ...fieldProps
                        }}
                        {...restProperty}
                    />
                )
            }
            {
                selectMode === 'INPUT' && (
                    <Form.Item name={name} label={label} >
                        <Input style={{width:'216px'}} onChange={inputOnChange} value={keyValue} placeholder="请输入" />
                    </Form.Item>
                )
            }


        </>
    )
}

export default MccsSelect;