InvoiceProjectSelect.tsx
1.61 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
import { postServiceConstListInvoiceDetailNames } from '@/services';
import { Select, Tooltip } from 'antd';
import { useState } from 'react';
export const InvoiceProjectSelect = ({ readOnly, value, onChange }) => {
const [options, setOptions] = useState<any[]>([]);
// 定义防抖函数
let timeoutId = null;
const fetchOptions = async (keywords) => {
clearTimeout(timeoutId);
timeoutId = setTimeout(async () => {
const res = await postServiceConstListInvoiceDetailNames({
data: {
nameLike: keywords,
},
});
const data = res.data;
setOptions(
data.map((item) => {
console.log(item);
return {
key: item.id,
label:
'*' +
item.productAndServiceCatagoryAbbreviation +
'*' +
item?.name,
value:
'*' +
item.productAndServiceCatagoryAbbreviation +
'*' +
item?.name,
...item,
};
}),
);
// 这里可以放置实际的搜索逻辑，比如发起网络请求等
}, 500); // 设置延迟时间，单位毫秒
};
return readOnly ? (
<Tooltip title={value}>{value}</Tooltip>
) : (
<Select
key="project"
/*readonly={readonly}*/
showSearch
placeholder="请选择开票项目"
filterOption={(input, option) => (option?.label ?? '').includes(input)}
onChange={(e) => {
onChange(e);
}}
defaultValue={value}
options={options}
onSearch={(e) => {
fetchOptions(e);
}}
/>
);
};