canrd-main / canrd-erp-front · Files

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);

      }}
    />
  );
};