完善挂账显示
This commit is contained in:
@@ -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}
|
||||||
|
|||||||
Reference in New Issue
Block a user