BomWeb/src/components/DDComponents/ProjectField/index.js

import React, { useEffect, useState } from 'react';
import { Select } from 'antd';
import { queryProjectListUser } from '@/services/approval';

function DDProjectField(props) {
  const { value, disabled = false, onChange } = props;
  const [projectList, setProjectList] = useState([]);
  const [loading, setLoading] = useState(false);

  const getProjectList = async () => {
    setLoading(true);
    const res = await queryProjectListUser({ pageSize: 9999 }).catch(err => {
      setLoading(false);
    });
    if (res.code === 200) {
      setProjectList(res.data);
      setLoading(false);
    }
  };

  useEffect(() => {
    getProjectList();
  }, []);
  return (
    <Select
      showSearch
      loading={loading}
      style={{ width: '100%' }}
      disabled={disabled}
      defaultValue={value ? Number(value) : undefined}
      onChange={val => {
        const project = projectList.find(item => item.ID === val);
        onChange(`${val}`);
      }}
      filterOption={(input, option) =>
        (option?.label ?? '').toLowerCase().includes(input.toLowerCase())
      }
      options={projectList.map(item => {
        return {
          label: `${item.project_name}(${item.project_full_code})`,
          value: item.id,
        };
      })}
    />
  );
}

export default DDProjectField;