挂账公司支持模糊搜索

src/components/exam/ExamAddonPanel.tsx

@@ -51,6 +51,7 @@ export const ExamAddonPanel = ({ client }: ExamAddonPanelProps) => {
   // 挂账公司
   const [accountCompany, setAccountCompany] = useState<string>('圆和');
   const [isAccountCompanyDropdownOpen, setIsAccountCompanyDropdownOpen] = useState(false);
+  const [accountCompanySearch, setAccountCompanySearch] = useState('');
   const accountCompanyDropdownRef = useRef<HTMLDivElement>(null);
   // 挂账公司列表
   const [accountCompanyList, setAccountCompanyList] = useState<
@@ -338,6 +339,13 @@ export const ExamAddonPanel = ({ client }: ExamAddonPanelProps) => {
     }));
   }, [accountCompanyList]);
 
+  // 挂账公司模糊过滤
+  const filteredAccountCompanyOptions = useMemo(() => {
+    const kw = accountCompanySearch.trim().toLowerCase();
+    if (!kw) return accountCompanyOptions;
+    return accountCompanyOptions.filter((opt) => opt.label.toLowerCase().includes(kw));
+  }, [accountCompanyOptions, accountCompanySearch]);
+
   // 清理轮询定时器
   useEffect(() => {
     return () => {
@@ -805,26 +813,37 @@ export const ExamAddonPanel = ({ client }: ExamAddonPanelProps) => {
             <div className='flex items-center gap-2 text-xs text-gray-600'>
               <span className='whitespace-nowrap'>挂账公司</span>
               <div ref={accountCompanyDropdownRef} className='relative'>
-                <button
+                <div
-                  type='button'
-                  onClick={() => setIsAccountCompanyDropdownOpen(!isAccountCompanyDropdownOpen)}
                   className={cls(
                     'border border-gray-300 rounded-lg px-3 py-1.5 text-xs text-gray-700 bg-white',
-                    'focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500',
+                    'focus-within:ring-1 focus-within:ring-blue-500 focus-within:border-blue-500',
-                    'min-w-[100px] flex items-center justify-between gap-2',
+                    'min-w-[200px] flex items-center justify-between gap-2',
-                    'hover:border-gray-400 transition-colors'
+                    'hover:border-gray-400 transition-colors cursor-text'
                   )}
+                  onClick={() => setIsAccountCompanyDropdownOpen(true)}
                 >
-                  <span>{accountCompany}</span>
+                  <input
+                    type='text'
+                    value={accountCompanySearch}
+                    onChange={(e) => {
+                      setAccountCompanySearch(e.target.value);
+                      setIsAccountCompanyDropdownOpen(true);
+                    }}
+                    placeholder={accountCompany || '请输入公司名称'}
+                    className='w-full outline-none text-xs bg-transparent'
+                  />
                   <span className={cls('text-gray-400 transition-transform text-[10px]', isAccountCompanyDropdownOpen && 'rotate-180')}>
                     ▼
                   </span>
-                </button>
+                </div>
                 {isAccountCompanyDropdownOpen && (
-                  <div className='absolute z-50 w-full bottom-full mb-1 bg-white border border-gray-300 rounded-lg shadow-lg overflow-hidden max-h-[500px] overflow-y-auto'>
+                  <div className='absolute z-50 w-full bottom-full mb-1 bg-white border border-gray-300 rounded-lg shadow-lg overflow-hidden max-h-[320px] overflow-y-auto'>
-                    {accountCompanyOptions.map((option) => (
+                    {filteredAccountCompanyOptions.length === 0 && (
+                      <div className='px-3 py-2 text-xs text-gray-400'>无匹配结果</div>
+                    )}
+                    {filteredAccountCompanyOptions.map((option, idx) => (
                       <button
-                        key={option.value}
+                        key={`${option.value}-${idx}`}
                         type='button'
                         onClick={() => handleAccountCompanySelect(option.value)}
                         className={cls(