完善挂账显示

This commit is contained in:
xianyi
2026-01-04 10:11:16 +08:00
parent 8495f42031
commit f7ea59a857

View File

@@ -1,7 +1,7 @@
import { useEffect, useMemo, useState, useRef } from 'react'; import { useEffect, useMemo, useState, useRef } from 'react';
import type { ExamClient } from '../../data/mockData'; import type { ExamClient } from '../../data/mockData';
import { searchPhysicalExamAddItem, getAddItemCustomerInfo } from '../../api'; import { searchPhysicalExamAddItem, getAddItemCustomerInfo, getChannelCompanyList } from '../../api';
import { Button, Input } from '../ui'; import { Button, Input } from '../ui';
import { cls } from '../../utils/cls'; import { cls } from '../../utils/cls';
import nozImage from '../../assets/image/noz.png'; import nozImage from '../../assets/image/noz.png';
@@ -50,6 +50,10 @@ export const ExamAddonPanel = ({ client }: ExamAddonPanelProps) => {
const [accountCompany, setAccountCompany] = useState<string>('圆和'); const [accountCompany, setAccountCompany] = useState<string>('圆和');
const [isAccountCompanyDropdownOpen, setIsAccountCompanyDropdownOpen] = useState(false); const [isAccountCompanyDropdownOpen, setIsAccountCompanyDropdownOpen] = useState(false);
const accountCompanyDropdownRef = useRef<HTMLDivElement>(null); const accountCompanyDropdownRef = useRef<HTMLDivElement>(null);
// 挂账公司列表
const [accountCompanyList, setAccountCompanyList] = useState<
Array<{ company_id: number; company_name?: string | null; pinyin?: string | null }>
>([]);
// 点击外部关闭下拉框 // 点击外部关闭下拉框
useEffect(() => { useEffect(() => {
@@ -99,6 +103,44 @@ export const ExamAddonPanel = ({ client }: ExamAddonPanelProps) => {
fetchCustomerInfo(); fetchCustomerInfo();
}, [client.id]); }, [client.id]);
// 获取挂账公司列表
useEffect(() => {
const fetchCompanyList = async () => {
try {
const res = await getChannelCompanyList({});
if (res.Status === 200 && Array.isArray(res.Data) && res.Data.length > 0) {
setAccountCompanyList(res.Data);
// 设置默认值为第一个公司
const firstCompany = res.Data[0];
if (firstCompany?.company_name) {
setAccountCompany(firstCompany.company_name);
}
} else {
setAccountCompanyList([]);
}
} catch (err) {
console.error('获取挂账公司列表失败', err);
setAccountCompanyList([]);
}
};
fetchCompanyList();
}, []);
// 当挂账公司列表更新时,确保当前选中的公司在列表中
useEffect(() => {
if (accountCompanyList.length > 0) {
const companyNames = accountCompanyList.map((c) => c.company_name).filter(Boolean) as string[];
if (!companyNames.includes(accountCompany)) {
// 如果当前选中的公司不在列表中,更新为第一个公司
const firstCompany = accountCompanyList[0];
if (firstCompany?.company_name) {
setAccountCompany(firstCompany.company_name);
}
}
}
}, [accountCompanyList, accountCompany]);
// 防抖:当输入值变化时,延迟 0.5 秒后更新 debouncedAddonSearch用于 API 调用) // 防抖:当输入值变化时,延迟 0.5 秒后更新 debouncedAddonSearch用于 API 调用)
useEffect(() => { useEffect(() => {
if (debounceTimerRef.current) { if (debounceTimerRef.current) {
@@ -264,10 +306,17 @@ export const ExamAddonPanel = ({ client }: ExamAddonPanelProps) => {
{ value: 'account', label: '挂账' }, { value: 'account', label: '挂账' },
]; ];
// 挂账公司选项(可以根据实际需求从接口获取) // 挂账公司选项(从接口获取)
const accountCompanyOptions: Array<{ value: string; label: string }> = [ const accountCompanyOptions = useMemo(() => {
{ value: '圆和', label: '圆和' }, if (accountCompanyList.length === 0) {
]; // 如果没有数据,返回默认的"圆和"
return [{ value: '圆和', label: '圆和' }];
}
return accountCompanyList.map((company) => ({
value: company.company_name || `公司${company.company_id}`,
label: company.company_name || `公司${company.company_id}`,
}));
}, [accountCompanyList]);
return ( return (
<div className='space-y-4'> <div className='space-y-4'>
@@ -498,7 +547,7 @@ export const ExamAddonPanel = ({ client }: ExamAddonPanelProps) => {
</span> </span>
</button> </button>
{isAccountCompanyDropdownOpen && ( {isAccountCompanyDropdownOpen && (
<div className='absolute z-50 w-full bottom-full mb-1 bg-white border border-gray-300 rounded-lg shadow-lg overflow-hidden'> <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'>
{accountCompanyOptions.map((option) => ( {accountCompanyOptions.map((option) => (
<button <button
key={option.value} key={option.value}