分离体检详情面板
This commit is contained in:
xianyi
373
src/components/exam/ExamDetailPanel.tsx
Normal file
373
src/components/exam/ExamDetailPanel.tsx
Normal file
@@ -0,0 +1,373 @@
|
||||
import { useMemo, useState } from 'react';
|
||||
|
||||
import type {
|
||||
CustomerAppointmentInfo,
|
||||
CustomerExamAddItem,
|
||||
CustomerInfo,
|
||||
PhysicalExamProgressItem,
|
||||
} from '../../api';
|
||||
import { editCustomerDetail } from '../../api';
|
||||
import type { ExamClient } from '../../data/mockData';
|
||||
import { Button, Input } from '../ui';
|
||||
|
||||
interface ExamDetailPanelProps {
|
||||
client: ExamClient;
|
||||
customerInfo: CustomerInfo | null;
|
||||
appointmentInfo: CustomerAppointmentInfo | null;
|
||||
addItemInfoList: CustomerExamAddItem[] | null;
|
||||
progressList: PhysicalExamProgressItem[] | null;
|
||||
loading: boolean;
|
||||
}
|
||||
|
||||
const getMaritalCodeFromText = (text: string): number => {
|
||||
if (text.includes('未婚') || text === '未婚') return 10;
|
||||
if (text.includes('已婚') || text === '已婚') return 20;
|
||||
return 20;
|
||||
};
|
||||
|
||||
const getMaritalText = (code: number): string => (code === 10 ? '未婚' : '已婚');
|
||||
|
||||
export const ExamDetailPanel = ({
|
||||
client,
|
||||
customerInfo,
|
||||
appointmentInfo,
|
||||
addItemInfoList,
|
||||
progressList,
|
||||
loading,
|
||||
}: ExamDetailPanelProps) => {
|
||||
const basePhone = customerInfo?.phone || (client['mobile' as keyof ExamClient] as string | undefined) || '';
|
||||
const baseMaritalText =
|
||||
customerInfo?.patient_marital_status_name ||
|
||||
(client['maritalStatus' as keyof ExamClient] as string | undefined) ||
|
||||
'—';
|
||||
const baseMaritalCode = baseMaritalText === '—' ? 20 : getMaritalCodeFromText(baseMaritalText);
|
||||
|
||||
const [phone, setPhone] = useState(basePhone || '—');
|
||||
const [maritalCode, setMaritalCode] = useState(baseMaritalCode);
|
||||
const [phoneEditing, setPhoneEditing] = useState(false);
|
||||
const [maritalEditing, setMaritalEditing] = useState(false);
|
||||
const [editLoading, setEditLoading] = useState(false);
|
||||
const [editMessage, setEditMessage] = useState<string | null>(null);
|
||||
|
||||
const customerChannel = client.customerType === '团客' ? '团体客户' : '散客客户';
|
||||
const familyDoctor = customerInfo?.family_doctor_name || (client['familyDoctor' as keyof ExamClient] as string | undefined) || '—';
|
||||
const groupTag = client['groupTag' as keyof ExamClient] || (client.customerType === '团客' ? '团检' : '—');
|
||||
const bookingTime = appointmentInfo?.appointment_time || (client['bookingTime' as keyof ExamClient] || '—');
|
||||
const signTime = appointmentInfo?.sign_in_time || (client['signTime' as keyof ExamClient] || '—');
|
||||
const addonSummary =
|
||||
addItemInfoList && addItemInfoList.length > 0
|
||||
? addItemInfoList.map((i) => `${i.dept_name ?? ''} ${i.combination_name ?? ''}`.trim()).join('、')
|
||||
: client['addonSummary' as keyof ExamClient] || '—';
|
||||
|
||||
const handleSavePhone = async () => {
|
||||
if (!phone || phone.trim() === '' || phone === '—') {
|
||||
setEditMessage('请输入联系电话');
|
||||
return;
|
||||
}
|
||||
|
||||
setEditLoading(true);
|
||||
setEditMessage(null);
|
||||
|
||||
try {
|
||||
const res = await editCustomerDetail({
|
||||
marital_status: maritalCode,
|
||||
phone: phone.trim(),
|
||||
});
|
||||
|
||||
if (res.Status === 200) {
|
||||
setEditMessage('保存成功');
|
||||
setPhoneEditing(false);
|
||||
setTimeout(() => setEditMessage(null), 2000);
|
||||
} else {
|
||||
setEditMessage(res.Message || '保存失败');
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('保存客户信息失败', err);
|
||||
setEditMessage('保存失败，请稍后重试');
|
||||
} finally {
|
||||
setEditLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSaveMarital = async () => {
|
||||
const phoneValue = phone === '—' ? '' : phone.trim();
|
||||
|
||||
if (!phoneValue) {
|
||||
setEditMessage('联系电话不能为空');
|
||||
return;
|
||||
}
|
||||
|
||||
setEditLoading(true);
|
||||
setEditMessage(null);
|
||||
|
||||
try {
|
||||
const res = await editCustomerDetail({
|
||||
marital_status: maritalCode,
|
||||
phone: phoneValue,
|
||||
});
|
||||
|
||||
if (res.Status === 200) {
|
||||
setEditMessage('保存成功');
|
||||
setMaritalEditing(false);
|
||||
setTimeout(() => setEditMessage(null), 2000);
|
||||
} else {
|
||||
setEditMessage(res.Message || '保存失败');
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('保存客户信息失败', err);
|
||||
setEditMessage('保存失败，请稍后重试');
|
||||
} finally {
|
||||
setEditLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const progressGroups = useMemo(() => {
|
||||
const checked: string[] = [];
|
||||
const abandoned: string[] = [];
|
||||
const pending: string[] = [];
|
||||
const deferred: string[] = [];
|
||||
(progressList || []).forEach((p) => {
|
||||
const name = p.project_name || p.department_name || '项目';
|
||||
switch (p.exam_status) {
|
||||
case 1:
|
||||
checked.push(name);
|
||||
break;
|
||||
case 2:
|
||||
abandoned.push(name);
|
||||
break;
|
||||
case 4:
|
||||
deferred.push(name);
|
||||
break;
|
||||
default:
|
||||
pending.push(name);
|
||||
}
|
||||
});
|
||||
return { checked, abandoned, pending, deferred };
|
||||
}, [progressList]);
|
||||
|
||||
return (
|
||||
<div className='space-y-4 text-sm'>
|
||||
<div className='flex items-center gap-4'>
|
||||
<div className='w-14 h-14 rounded-full bg-gray-200 flex-shrink-0 overflow-hidden'>
|
||||
<div className='w-full h-full rounded-full bg-gray-300 flex items-center justify-center text-[10px] text-gray-500'>
|
||||
头像
|
||||
</div>
|
||||
</div>
|
||||
<div className='text-xs text-gray-500'>
|
||||
{loading ? '加载中…' : '基础信息：头像、姓名、证件号、手机号等（点击图标可进行编辑）'}
|
||||
</div>
|
||||
</div>
|
||||
{editMessage && (
|
||||
<div
|
||||
className={`text-xs px-3 py-2 rounded-lg ${
|
||||
editMessage.includes('成功') ? 'bg-green-50 text-green-600' : 'bg-amber-50 text-amber-600'
|
||||
}`}
|
||||
>
|
||||
{editMessage}
|
||||
</div>
|
||||
)}
|
||||
<div className='space-y-2 text-xs text-gray-700'>
|
||||
<div className='font-medium text-gray-900'>基础信息</div>
|
||||
<div className='grid grid-cols-2 gap-x-8 gap-y-1'>
|
||||
<div>
|
||||
姓名：<span className='text-gray-900'>{customerInfo?.customer_name || client.name}</span>
|
||||
</div>
|
||||
<div>
|
||||
证件号：<span className='text-gray-900'>{customerInfo?.id_no || '—'}</span>
|
||||
</div>
|
||||
<div className='flex items-center'>
|
||||
<span>手机号：</span>
|
||||
{!phoneEditing ? (
|
||||
<span className='text-gray-900 flex items-center'>
|
||||
{phone}
|
||||
<button className='ml-1 text-blue-500 text-[11px] hover:underline' onClick={() => setPhoneEditing(true)}>
|
||||
✏️ 编辑
|
||||
</button>
|
||||
</span>
|
||||
) : (
|
||||
<span className='flex items-center gap-1'>
|
||||
<input
|
||||
className='w-28 rounded-xl border px-2 py-0.5 text-[11px] outline-none'
|
||||
value={phone}
|
||||
onChange={(e) => setPhone(e.target.value)}
|
||||
disabled={editLoading}
|
||||
/>
|
||||
<button
|
||||
className='px-2 py-0.5 rounded-xl border text-[11px] disabled:opacity-50'
|
||||
onClick={handleSavePhone}
|
||||
disabled={editLoading}
|
||||
>
|
||||
{editLoading ? '保存中...' : '保存'}
|
||||
</button>
|
||||
<button
|
||||
className='px-2 py-0.5 rounded-xl border text-[11px]'
|
||||
onClick={() => {
|
||||
setPhoneEditing(false);
|
||||
setPhone(basePhone || '—');
|
||||
setEditMessage(null);
|
||||
}}
|
||||
disabled={editLoading}
|
||||
>
|
||||
取消
|
||||
</button>
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
性别/年龄：
|
||||
<span className='text-gray-900'>
|
||||
{customerInfo?.gender_name || client.gender} / {client.age}
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
客户级别：<span className='text-gray-900'>{client.level}</span>
|
||||
</div>
|
||||
<div>
|
||||
所属渠道：<span className='text-gray-900'>{customerChannel}</span>
|
||||
</div>
|
||||
<div className='flex items-center'>
|
||||
<span>婚姻状况：</span>
|
||||
{!maritalEditing ? (
|
||||
<span className='text-gray-900 flex items-center'>
|
||||
{getMaritalText(maritalCode)}
|
||||
<button className='ml-1 text-blue-500 text-[11px] hover:underline' onClick={() => setMaritalEditing(true)}>
|
||||
✏️ 编辑
|
||||
</button>
|
||||
</span>
|
||||
) : (
|
||||
<span className='flex items-center gap-2'>
|
||||
<label className='flex items-center gap-1 cursor-pointer'>
|
||||
<input
|
||||
type='radio'
|
||||
name='marital'
|
||||
value='10'
|
||||
checked={maritalCode === 10}
|
||||
onChange={(e) => setMaritalCode(Number(e.target.value))}
|
||||
disabled={editLoading}
|
||||
className='w-3 h-3'
|
||||
/>
|
||||
<span className='text-[11px]'>未婚</span>
|
||||
</label>
|
||||
<label className='flex items-center gap-1 cursor-pointer'>
|
||||
<input
|
||||
type='radio'
|
||||
name='marital'
|
||||
value='20'
|
||||
checked={maritalCode === 20}
|
||||
onChange={(e) => setMaritalCode(Number(e.target.value))}
|
||||
disabled={editLoading}
|
||||
className='w-3 h-3'
|
||||
/>
|
||||
<span className='text-[11px]'>已婚</span>
|
||||
</label>
|
||||
<button
|
||||
className='px-2 py-0.5 rounded-xl border text-[11px] disabled:opacity-50'
|
||||
onClick={handleSaveMarital}
|
||||
disabled={editLoading}
|
||||
>
|
||||
{editLoading ? '保存中...' : '保存'}
|
||||
</button>
|
||||
<button
|
||||
className='px-2 py-0.5 rounded-xl border text-[11px]'
|
||||
onClick={() => {
|
||||
setMaritalEditing(false);
|
||||
setMaritalCode(baseMaritalCode);
|
||||
setEditMessage(null);
|
||||
}}
|
||||
disabled={editLoading}
|
||||
>
|
||||
取消
|
||||
</button>
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
家医：<span className='text-gray-900'>{familyDoctor}</span>
|
||||
</div>
|
||||
<div>
|
||||
团标签：<span className='text-gray-900'>{groupTag as string}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='space-y-2 text-xs text-gray-700'>
|
||||
<div className='font-medium text-gray-900'>预约信息</div>
|
||||
<div className='grid grid-cols-2 gap-x-8 gap-y-1'>
|
||||
<div>
|
||||
预约时间：<span className='text-gray-900'>{bookingTime as string}</span>
|
||||
</div>
|
||||
<div>
|
||||
签到时间：<span className='text-gray-900'>{signTime as string}</span>
|
||||
</div>
|
||||
<div>
|
||||
已消耗时长：
|
||||
<span className='text-gray-900'>
|
||||
{appointmentInfo?.physical_exam_complete_time && appointmentInfo?.sign_in_time
|
||||
? `${appointmentInfo.physical_exam_complete_time} - ${appointmentInfo.sign_in_time}`
|
||||
: client.elapsed}
|
||||
</span>
|
||||
</div>
|
||||
<div className='col-span-2'>
|
||||
体检套餐名称：<span className='text-gray-900'>{client.packageName}</span>
|
||||
</div>
|
||||
<div className='col-span-2'>
|
||||
加项内容：<span className='text-gray-900'>{addonSummary as string}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='grid grid-cols-2 gap-4 text-xs'>
|
||||
<div className='p-3 rounded-2xl bg-green-50 border max-h-48 overflow-auto custom-scroll'>
|
||||
<div className='font-medium mb-2'>已查项目 共 {progressGroups.checked.length} 项</div>
|
||||
<div className='flex flex-wrap gap-2'>
|
||||
{(progressGroups.checked.length ? progressGroups.checked : client.checkedItems).map((i) => (
|
||||
<span key={i} className='px-2 py-0.5 rounded-full bg-white border text-[11px]'>
|
||||
{i}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className='p-3 rounded-2xl bg-red-50 border max-h-48 overflow-auto custom-scroll'>
|
||||
<div className='font-medium mb-2'>弃检项目 共 {progressGroups.abandoned.length} 项</div>
|
||||
<div className='flex flex-wrap gap-2'>
|
||||
{progressGroups.abandoned.length ? (
|
||||
progressGroups.abandoned.map((i) => (
|
||||
<span key={i} className='px-2 py-0.5 rounded-full bg-white border text-[11px]'>
|
||||
{i}
|
||||
</span>
|
||||
))
|
||||
) : (
|
||||
<span className='text-gray-400 text-[11px]'>暂无弃检项目</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className='p-3 rounded-2xl bg-yellow-50 border max-h-48 overflow-auto custom-scroll'>
|
||||
<div className='font-medium mb-2'>未查项目 共 {progressGroups.pending.length} 项</div>
|
||||
<div className='flex flex-wrap gap-2'>
|
||||
{(progressGroups.pending.length ? progressGroups.pending : client.pendingItems).map((i) => (
|
||||
<span key={i} className='px-2 py-0.5 rounded-full bg-white border text-[11px]'>
|
||||
{i}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className='p-3 rounded-2xl bg-blue-50 border max-h-48 overflow-auto custom-scroll'>
|
||||
<div className='font-medium mb-2'>延期项目 共 {progressGroups.deferred.length} 项</div>
|
||||
<div className='flex flex-wrap gap-2'>
|
||||
{progressGroups.deferred.length ? (
|
||||
progressGroups.deferred.map((i) => (
|
||||
<span key={i} className='px-2 py-0.5 rounded-full bg-white border text-[11px]'>
|
||||
{i}
|
||||
</span>
|
||||
))
|
||||
) : (
|
||||
<span className='text-gray-400 text-[11px]'>暂无延期项目</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -1,16 +1,17 @@
|
||||
import { useEffect, useMemo, useRef, useState } from 'react';
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
|
||||
import type { ExamClient, ExamModalTab } from '../../data/mockData';
|
||||
import type {
|
||||
CustomerAppointmentInfo,
|
||||
CustomerExamAddItem,
|
||||
CustomerInfo,
|
||||
OutputTongyishuFileInfo,
|
||||
PhysicalExamProgressItem,
|
||||
OutputTongyishuFileInfo,
|
||||
} from '../../api';
|
||||
import { getCustomerDetail, getPhysicalExamProgressDetail, signInMedicalExamCenter, getTongyishuPdf, submitTongyishuSign, editCustomerDetail } from '../../api';
|
||||
import { getCustomerDetail, getPhysicalExamProgressDetail, signInMedicalExamCenter, getTongyishuPdf, submitTongyishuSign } from '../../api';
|
||||
import type { SignaturePadHandle } from '../ui';
|
||||
import { Button, Input, SignaturePad } from '../ui';
|
||||
import { ExamDetailPanel } from './ExamDetailPanel';
|
||||
|
||||
interface ExamModalProps {
|
||||
client: ExamClient;
|
||||
@@ -157,7 +158,7 @@ export const ExamModal = ({ client, tab, onTabChange, onClose }: ExamModalProps)
|
||||
|
||||
<div className='px-4 py-4 bg-gray-50/60'>
|
||||
{tab === 'detail' && (
|
||||
<ExamDetailInfo
|
||||
<ExamDetailPanel
|
||||
client={client}
|
||||
customerInfo={customerInfo}
|
||||
appointmentInfo={appointmentInfo}
|
||||
@@ -772,365 +773,6 @@ const ExamAddonPanel = ({ client }: { client: ExamClient }) => {
|
||||
);
|
||||
};
|
||||
|
||||
const ExamDetailInfo = ({
|
||||
client,
|
||||
customerInfo,
|
||||
appointmentInfo,
|
||||
addItemInfoList,
|
||||
progressList,
|
||||
loading,
|
||||
}: {
|
||||
client: ExamClient;
|
||||
customerInfo: CustomerInfo | null;
|
||||
appointmentInfo: CustomerAppointmentInfo | null;
|
||||
addItemInfoList: CustomerExamAddItem[] | null;
|
||||
progressList: PhysicalExamProgressItem[] | null;
|
||||
loading: boolean;
|
||||
}) => {
|
||||
const basePhone = customerInfo?.phone || (client['mobile' as keyof ExamClient] as string | undefined) || '';
|
||||
const baseMaritalText =
|
||||
customerInfo?.patient_marital_status_name ||
|
||||
(client['maritalStatus' as keyof ExamClient] as string | undefined) ||
|
||||
'—';
|
||||
// 将文本转换为数字：10-未婚，20-已婚
|
||||
const getMaritalCodeFromText = (text: string): number => {
|
||||
if (text.includes('未婚') || text === '未婚') return 10;
|
||||
if (text.includes('已婚') || text === '已婚') return 20;
|
||||
return 20; // 默认已婚
|
||||
};
|
||||
const baseMaritalCode = baseMaritalText === '—' ? 20 : getMaritalCodeFromText(baseMaritalText);
|
||||
|
||||
const [phone, setPhone] = useState(basePhone || '—');
|
||||
const [maritalCode, setMaritalCode] = useState(baseMaritalCode);
|
||||
const [phoneEditing, setPhoneEditing] = useState(false);
|
||||
const [maritalEditing, setMaritalEditing] = useState(false);
|
||||
const [editLoading, setEditLoading] = useState(false);
|
||||
const [editMessage, setEditMessage] = useState<string | null>(null);
|
||||
|
||||
const getMaritalText = (code: number): string => {
|
||||
return code === 10 ? '未婚' : '已婚';
|
||||
};
|
||||
|
||||
const customerChannel = client.customerType === '团客' ? '团体客户' : '散客客户';
|
||||
const familyDoctor = customerInfo?.family_doctor_name || (client['familyDoctor' as keyof ExamClient] as string | undefined) || '—';
|
||||
const groupTag = client['groupTag' as keyof ExamClient] || (client.customerType === '团客' ? '团检' : '—');
|
||||
const bookingTime = appointmentInfo?.appointment_time || (client['bookingTime' as keyof ExamClient] || '—');
|
||||
const signTime = appointmentInfo?.sign_in_time || (client['signTime' as keyof ExamClient] || '—');
|
||||
const addonSummary =
|
||||
addItemInfoList && addItemInfoList.length > 0
|
||||
? addItemInfoList.map((i) => `${i.dept_name ?? ''} ${i.combination_name ?? ''}`.trim()).join('、')
|
||||
: client['addonSummary' as keyof ExamClient] || '—';
|
||||
|
||||
const handleSavePhone = async () => {
|
||||
if (!phone || phone.trim() === '' || phone === '—') {
|
||||
setEditMessage('请输入联系电话');
|
||||
return;
|
||||
}
|
||||
|
||||
setEditLoading(true);
|
||||
setEditMessage(null);
|
||||
|
||||
try {
|
||||
const res = await editCustomerDetail({
|
||||
marital_status: maritalCode,
|
||||
phone: phone.trim(),
|
||||
});
|
||||
|
||||
if (res.Status === 200) {
|
||||
setEditMessage('保存成功');
|
||||
setPhoneEditing(false);
|
||||
// 2秒后清除消息
|
||||
setTimeout(() => setEditMessage(null), 2000);
|
||||
} else {
|
||||
setEditMessage(res.Message || '保存失败');
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('保存客户信息失败', err);
|
||||
setEditMessage('保存失败，请稍后重试');
|
||||
} finally {
|
||||
setEditLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSaveMarital = async () => {
|
||||
const phoneValue = phone === '—' ? '' : phone.trim();
|
||||
|
||||
if (!phoneValue) {
|
||||
setEditMessage('联系电话不能为空');
|
||||
return;
|
||||
}
|
||||
|
||||
setEditLoading(true);
|
||||
setEditMessage(null);
|
||||
|
||||
try {
|
||||
const res = await editCustomerDetail({
|
||||
marital_status: maritalCode,
|
||||
phone: phoneValue,
|
||||
});
|
||||
|
||||
if (res.Status === 200) {
|
||||
setEditMessage('保存成功');
|
||||
setMaritalEditing(false);
|
||||
// 2秒后清除消息
|
||||
setTimeout(() => setEditMessage(null), 2000);
|
||||
} else {
|
||||
setEditMessage(res.Message || '保存失败');
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('保存客户信息失败', err);
|
||||
setEditMessage('保存失败，请稍后重试');
|
||||
} finally {
|
||||
setEditLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const progressGroups = useMemo(() => {
|
||||
const checked: string[] = [];
|
||||
const abandoned: string[] = [];
|
||||
const pending: string[] = [];
|
||||
const deferred: string[] = [];
|
||||
(progressList || []).forEach((p) => {
|
||||
const name = p.project_name || p.department_name || '项目';
|
||||
switch (p.exam_status) {
|
||||
case 1:
|
||||
checked.push(name);
|
||||
break;
|
||||
case 2:
|
||||
abandoned.push(name);
|
||||
break;
|
||||
case 4:
|
||||
deferred.push(name);
|
||||
break;
|
||||
default:
|
||||
pending.push(name);
|
||||
}
|
||||
});
|
||||
return { checked, abandoned, pending, deferred };
|
||||
}, [progressList]);
|
||||
|
||||
return (
|
||||
<div className='space-y-4 text-sm'>
|
||||
<div className='flex items-center gap-4'>
|
||||
<div className='w-14 h-14 rounded-full bg-gray-200 flex-shrink-0 overflow-hidden'>
|
||||
<div className='w-full h-full rounded-full bg-gray-300 flex items-center justify-center text-[10px] text-gray-500'>
|
||||
头像
|
||||
</div>
|
||||
</div>
|
||||
<div className='text-xs text-gray-500'>
|
||||
{loading ? '加载中…' : '基础信息：头像、姓名、证件号、手机号等（点击图标可进行编辑）'}
|
||||
</div>
|
||||
</div>
|
||||
{editMessage && (
|
||||
<div className={`text-xs px-3 py-2 rounded-lg ${editMessage.includes('成功') ? 'bg-green-50 text-green-600' : 'bg-amber-50 text-amber-600'
|
||||
}`}>
|
||||
{editMessage}
|
||||
</div>
|
||||
)}
|
||||
<div className='space-y-2 text-xs text-gray-700'>
|
||||
<div className='font-medium text-gray-900'>基础信息</div>
|
||||
<div className='grid grid-cols-2 gap-x-8 gap-y-1'>
|
||||
<div>
|
||||
姓名：<span className='text-gray-900'>{customerInfo?.customer_name || client.name}</span>
|
||||
</div>
|
||||
<div>
|
||||
证件号：<span className='text-gray-900'>{customerInfo?.id_no || '—'}</span>
|
||||
</div>
|
||||
<div className='flex items-center'>
|
||||
<span>手机号：</span>
|
||||
{!phoneEditing ? (
|
||||
<span className='text-gray-900 flex items-center'>
|
||||
{phone}
|
||||
<button className='ml-1 text-blue-500 text-[11px] hover:underline' onClick={() => setPhoneEditing(true)}>
|
||||
✏️ 编辑
|
||||
</button>
|
||||
</span>
|
||||
) : (
|
||||
<span className='flex items-center gap-1'>
|
||||
<input
|
||||
className='w-28 rounded-xl border px-2 py-0.5 text-[11px] outline-none'
|
||||
value={phone}
|
||||
onChange={(e) => setPhone(e.target.value)}
|
||||
disabled={editLoading}
|
||||
/>
|
||||
<button
|
||||
className='px-2 py-0.5 rounded-xl border text-[11px] disabled:opacity-50'
|
||||
onClick={handleSavePhone}
|
||||
disabled={editLoading}
|
||||
>
|
||||
{editLoading ? '保存中...' : '保存'}
|
||||
</button>
|
||||
<button
|
||||
className='px-2 py-0.5 rounded-xl border text-[11px]'
|
||||
onClick={() => {
|
||||
setPhoneEditing(false);
|
||||
setPhone(basePhone || '—');
|
||||
setEditMessage(null);
|
||||
}}
|
||||
disabled={editLoading}
|
||||
>
|
||||
取消
|
||||
</button>
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
性别/年龄：
|
||||
<span className='text-gray-900'>
|
||||
{customerInfo?.gender_name || client.gender} / {client.age}
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
客户级别：<span className='text-gray-900'>{client.level}</span>
|
||||
</div>
|
||||
<div>
|
||||
所属渠道：<span className='text-gray-900'>{customerChannel}</span>
|
||||
</div>
|
||||
<div className='flex items-center'>
|
||||
<span>婚姻状况：</span>
|
||||
{!maritalEditing ? (
|
||||
<span className='text-gray-900 flex items-center'>
|
||||
{getMaritalText(maritalCode)}
|
||||
<button className='ml-1 text-blue-500 text-[11px] hover:underline' onClick={() => setMaritalEditing(true)}>
|
||||
✏️ 编辑
|
||||
</button>
|
||||
</span>
|
||||
) : (
|
||||
<span className='flex items-center gap-2'>
|
||||
<label className='flex items-center gap-1 cursor-pointer'>
|
||||
<input
|
||||
type='radio'
|
||||
name='marital'
|
||||
value='10'
|
||||
checked={maritalCode === 10}
|
||||
onChange={(e) => setMaritalCode(Number(e.target.value))}
|
||||
disabled={editLoading}
|
||||
className='w-3 h-3'
|
||||
/>
|
||||
<span className='text-[11px]'>未婚</span>
|
||||
</label>
|
||||
<label className='flex items-center gap-1 cursor-pointer'>
|
||||
<input
|
||||
type='radio'
|
||||
name='marital'
|
||||
value='20'
|
||||
checked={maritalCode === 20}
|
||||
onChange={(e) => setMaritalCode(Number(e.target.value))}
|
||||
disabled={editLoading}
|
||||
className='w-3 h-3'
|
||||
/>
|
||||
<span className='text-[11px]'>已婚</span>
|
||||
</label>
|
||||
<button
|
||||
className='px-2 py-0.5 rounded-xl border text-[11px] disabled:opacity-50'
|
||||
onClick={handleSaveMarital}
|
||||
disabled={editLoading}
|
||||
>
|
||||
{editLoading ? '保存中...' : '保存'}
|
||||
</button>
|
||||
<button
|
||||
className='px-2 py-0.5 rounded-xl border text-[11px]'
|
||||
onClick={() => {
|
||||
setMaritalEditing(false);
|
||||
setMaritalCode(baseMaritalCode);
|
||||
setEditMessage(null);
|
||||
}}
|
||||
disabled={editLoading}
|
||||
>
|
||||
取消
|
||||
</button>
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
家医：<span className='text-gray-900'>{familyDoctor}</span>
|
||||
</div>
|
||||
<div>
|
||||
团标签：<span className='text-gray-900'>{groupTag as string}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='space-y-2 text-xs text-gray-700'>
|
||||
<div className='font-medium text-gray-900'>预约信息</div>
|
||||
<div className='grid grid-cols-2 gap-x-8 gap-y-1'>
|
||||
<div>
|
||||
预约时间：<span className='text-gray-900'>{bookingTime as string}</span>
|
||||
</div>
|
||||
<div>
|
||||
签到时间：<span className='text-gray-900'>{signTime as string}</span>
|
||||
</div>
|
||||
<div>
|
||||
已消耗时长：
|
||||
<span className='text-gray-900'>
|
||||
{appointmentInfo?.physical_exam_complete_time && appointmentInfo?.sign_in_time
|
||||
? `${appointmentInfo.physical_exam_complete_time} - ${appointmentInfo.sign_in_time}`
|
||||
: client.elapsed}
|
||||
</span>
|
||||
</div>
|
||||
<div className='col-span-2'>
|
||||
体检套餐名称：<span className='text-gray-900'>{client.packageName}</span>
|
||||
</div>
|
||||
<div className='col-span-2'>
|
||||
加项内容：<span className='text-gray-900'>{addonSummary as string}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='grid grid-cols-2 gap-4 text-xs'>
|
||||
<div className='p-3 rounded-2xl bg-green-50 border max-h-48 overflow-auto custom-scroll'>
|
||||
<div className='font-medium mb-2'>已查项目 共 {progressGroups.checked.length} 项</div>
|
||||
<div className='flex flex-wrap gap-2'>
|
||||
{(progressGroups.checked.length ? progressGroups.checked : client.checkedItems).map((i) => (
|
||||
<span key={i} className='px-2 py-0.5 rounded-full bg-white border text-[11px]'>
|
||||
{i}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className='p-3 rounded-2xl bg-red-50 border max-h-48 overflow-auto custom-scroll'>
|
||||
<div className='font-medium mb-2'>弃检项目 共 {progressGroups.abandoned.length} 项</div>
|
||||
<div className='flex flex-wrap gap-2'>
|
||||
{progressGroups.abandoned.length ? (
|
||||
progressGroups.abandoned.map((i) => (
|
||||
<span key={i} className='px-2 py-0.5 rounded-full bg-white border text-[11px]'>
|
||||
{i}
|
||||
</span>
|
||||
))
|
||||
) : (
|
||||
<span className='text-gray-400 text-[11px]'>暂无弃检项目</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className='p-3 rounded-2xl bg-yellow-50 border max-h-48 overflow-auto custom-scroll'>
|
||||
<div className='font-medium mb-2'>未查项目 共 {progressGroups.pending.length} 项</div>
|
||||
<div className='flex flex-wrap gap-2'>
|
||||
{(progressGroups.pending.length ? progressGroups.pending : client.pendingItems).map((i) => (
|
||||
<span key={i} className='px-2 py-0.5 rounded-full bg-white border text-[11px]'>
|
||||
{i}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className='p-3 rounded-2xl bg-blue-50 border max-h-48 overflow-auto custom-scroll'>
|
||||
<div className='font-medium mb-2'>延期项目 共 {progressGroups.deferred.length} 项</div>
|
||||
<div className='flex flex-wrap gap-2'>
|
||||
{progressGroups.deferred.length ? (
|
||||
progressGroups.deferred.map((i) => (
|
||||
<span key={i} className='px-2 py-0.5 rounded-full bg-white border text-[11px]'>
|
||||
{i}
|
||||
</span>
|
||||
))
|
||||
) : (
|
||||
<span className='text-gray-400 text-[11px]'>暂无延期项目</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const ExamDeliveryPanel = ({ client }: { client: ExamClient }) => (
|
||||
<div className='flex justify-center'>
|
||||
<div className='w-full rounded-2xl border shadow-sm px-6 py-4 text-xs text-gray-800'>
|
||||
|
||||
Reference in New Issue
Block a user