c6bffd4019
线下活动、健康档案、报告列表、随访列表、透析记录、 透析处方、诊断列表、用药列表、家庭成员、添加家庭成员、 设置、知情同意共 12 个页面迁移： - 最外层容器 → PageShell - SCSS 删除 min-height/background 通用样式
103 lines
3.7 KiB
TypeScript
103 lines
3.7 KiB
TypeScript
import React, { useState, useCallback } from 'react';
|
|
import { View, Text } from '@tarojs/components';
|
|
import Taro, { useReachBottom } from '@tarojs/taro';
|
|
import { usePageData } from '@/hooks/usePageData';
|
|
import { getCachedPatientId } from '@/services/request';
|
|
import { listDialysisPrescriptions } from '@/services/dialysis';
|
|
import type { DialysisPrescription } from '@/services/dialysis';
|
|
import EmptyState from '@/components/EmptyState';
|
|
import Loading from '@/components/Loading';
|
|
import { useElderClass } from '../../../hooks/useElderClass';
|
|
import PageShell from '@/components/ui/PageShell';
|
|
import './index.scss';
|
|
|
|
const STATUS_MAP: Record<string, { label: string; cls: string }> = {
|
|
active: { label: '生效中', cls: 'active' },
|
|
inactive: { label: '已停用', cls: 'inactive' },
|
|
expired: { label: '已过期', cls: 'expired' },
|
|
};
|
|
|
|
export default function DialysisPrescriptionList() {
|
|
const modeClass = useElderClass();
|
|
const [prescriptions, setPrescriptions] = useState<DialysisPrescription[]>([]);
|
|
const [page, setPage] = useState(1);
|
|
const [total, setTotal] = useState(0);
|
|
const [loading, setLoading] = useState(false);
|
|
const [hasPatient, setHasPatient] = useState(true);
|
|
|
|
const fetchData = useCallback(async (p: number, append = false) => {
|
|
const patientId = getCachedPatientId();
|
|
if (!patientId) {
|
|
setPrescriptions([]);
|
|
setHasPatient(false);
|
|
return;
|
|
}
|
|
setHasPatient(true);
|
|
setLoading(true);
|
|
try {
|
|
const res = await listDialysisPrescriptions({ patient_id: patientId, page: p, page_size: 20 });
|
|
const list = res.data || [];
|
|
setPrescriptions(append ? (prev) => [...prev, ...list] : list);
|
|
setTotal(res.total);
|
|
setPage(p);
|
|
} catch {
|
|
Taro.showToast({ title: '加载失败', icon: 'none' });
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}, []);
|
|
|
|
usePageData(async () => { await fetchData(1); }, { throttleMs: 10000, enablePullDown: true });
|
|
|
|
useReachBottom(() => {
|
|
if (!loading && prescriptions.length < total) {
|
|
fetchData(page + 1, true);
|
|
}
|
|
});
|
|
|
|
const statusInfo = (s: string) => STATUS_MAP[s] || { label: s, cls: '' };
|
|
|
|
return (
|
|
<PageShell className={modeClass}>
|
|
<Text className='page-title'>透析处方</Text>
|
|
|
|
<View className='prescription-list'>
|
|
{prescriptions.map((p) => {
|
|
const si = statusInfo(p.status);
|
|
return (
|
|
<View
|
|
className='prescription-card'
|
|
key={p.id}
|
|
onClick={() => Taro.navigateTo({ url: `/pages/pkg-profile/dialysis-prescriptions/detail/index?id=${p.id}` })}
|
|
>
|
|
<View className='prescription-card-top'>
|
|
<Text className='prescription-model'>{p.dialyzer_model || '未指定型号'}</Text>
|
|
<Text className={`status-tag ${si.cls}`}>{si.label}</Text>
|
|
</View>
|
|
<View className='prescription-meta'>
|
|
{p.frequency_per_week != null && (
|
|
<Text className='meta-item'>{p.frequency_per_week}次/周</Text>
|
|
)}
|
|
{p.duration_minutes != null && (
|
|
<Text className='meta-item'>每次{p.duration_minutes}分钟</Text>
|
|
)}
|
|
</View>
|
|
{(p.effective_from || p.effective_to) && (
|
|
<Text className='prescription-date'>
|
|
{p.effective_from || '...'} ~ {p.effective_to || '...'}
|
|
</Text>
|
|
)}
|
|
</View>
|
|
);
|
|
})}
|
|
</View>
|
|
|
|
{prescriptions.length === 0 && !loading && (
|
|
<EmptyState text={hasPatient ? '暂无透析处方' : '请先在就诊人管理中选择就诊人'} />
|
|
)}
|
|
|
|
{loading && <Loading />}
|
|
</PageShell>
|
|
);
|
|
}
|