带有loading的select
import React, { useEffect } from 'react';
import { Select, Spin } from 'antd';
import { useRequest, request } from 'umi';
import { useImmer } from 'use-immer';
export interface Employee {
id: number;
employeeName: string;
employeeCode: string;
}
const { Option } = Select;
interface IProps {
mode?: string;
onChange?(value?: any, options?: any, record?: any): void;
dataLoadFinish?(data: Employee[]): void;
valueKey?: 'id' | 'code';
list?: Employee[];
params?: {
isSystemOperator?: number; // 是否是系统操作员1.是2.不是
employeeStatus?: number; // 1.入职2.离职
};
value?: string | string[] | number | number[];
}
const EmployeeSelect: React.FC<IProps> = props => {
const { mode, onChange = () => {}, value, valueKey = 'id', list, params } = props;
const [employeeList, setEmployeeList] = useImmer<Employee[]>([]);
const [fetching, setFetching] = useImmer<boolean>(false);
useEffect(() => {
if (list && list.length > 0) {
setEmployeeList(() => list);
}
}, [list && list.length]);
const getReq = (employeeCodeOrName?: string) => {
return request('xxx/xxx/xxxxx/xxxxxx', {
method: 'post',
data: {
...params,
employeeCodeOrName
}
});
};
const { run } = useRequest(getReq, {
debounceInterval: 800,
manual: true,
onSuccess: data => {
setEmployeeList(() => data);
setFetching(() => false);
}
});
const onSearch = (val: string) => {
setEmployeeList(() => []);
setFetching(() => true);
run(val);
};
const onFocus = () => {
if (employeeList.length <= 0) {
setFetching(() => true);
run();
}
};
return (
<Select
showSearch
allowClear
mode={mode as any}
value={value}
onSearch={onSearch}
onChange={(val, options) => {
const employee = employeeList.find(
item => item[valueKey === 'code' ? 'employeeCode' : 'id'] === val
);
onChange(val, options, employee);
}}
filterOption={false}
optionLabelProp="label"
placeholder="请输入员工名称或编码"
notFoundContent={fetching ? <Spin size="small" /> : null}
onFocus={onFocus}
>
{employeeList?.map(item => (
<Option
value={item[valueKey]!}
label={`${item.employeeCode}\\${item.employeeName}`}
key={item.employeeCode}
>
<div>
<span style={{ marginRight: '20px' }}>{item.employeeCode}</span>
<span>{item.employeeName}</span>
</div>
</Option>
))}
</Select>
);
};
export default React.memo(EmployeeSelect);
随笔——带有loading的select
最新推荐文章于 2024-05-06 10:22:05 发布