Blame view

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