feat(web): 药物记录 Web UI — Phase 2a-3
新增药物记录管理前端页面，接入后端 4 条孤立路由： - API 模块: medicationRecords.ts（CRUD + 频次/途径常量） - 列表页: MedicationRecordList.tsx（患者 ID 查询 + 药物列表 CRUD） 支持药品名/通用名/剂量/频次/途径/日期/在用状态 - 路由注册: /health/medications 权限: health.medication-records.list / health.medication-records.manage
This commit is contained in:
iven
304
apps/web/src/pages/health/MedicationRecordList.tsx
Normal file
304
apps/web/src/pages/health/MedicationRecordList.tsx
Normal file
@@ -0,0 +1,304 @@
|
||||
import { useState, useCallback, useEffect, useMemo } from 'react';
|
||||
import {
|
||||
Button, DatePicker, Form, Input, message, Modal, Popconfirm,
|
||||
Result, Select, Space, Switch, Table, Tag,
|
||||
} from 'antd';
|
||||
import type { ColumnsType } from 'antd/es/table';
|
||||
import dayjs from 'dayjs';
|
||||
|
||||
import {
|
||||
medicationRecordApi,
|
||||
type MedicationRecord,
|
||||
type CreateMedicationRecordReq,
|
||||
type UpdateMedicationRecordReq,
|
||||
FREQUENCY_OPTIONS,
|
||||
ROUTE_OPTIONS,
|
||||
} from '../../api/health/medicationRecords';
|
||||
import { PageContainer } from '../../components/PageContainer';
|
||||
import { usePermission } from '../../hooks/usePermission';
|
||||
|
||||
export default function MedicationRecordList() {
|
||||
const { hasPermission } = usePermission('health.medication-records.manage');
|
||||
|
||||
const [data, setData] = useState<MedicationRecord[]>([]);
|
||||
const [total, setTotal] = useState(0);
|
||||
const [page, setPage] = useState(1);
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const [patientId, setPatientId] = useState('');
|
||||
const [searchInput, setSearchInput] = useState('');
|
||||
|
||||
const [modalOpen, setModalOpen] = useState(false);
|
||||
const [editRecord, setEditRecord] = useState<MedicationRecord | null>(null);
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
const [form] = Form.useForm();
|
||||
|
||||
const pageSize = 20;
|
||||
|
||||
const fetchData = useCallback(async (pid: string, p: number) => {
|
||||
if (!pid) return;
|
||||
setLoading(true);
|
||||
try {
|
||||
const resp = await medicationRecordApi.list(pid, { page: p, page_size: pageSize });
|
||||
setData(resp.data);
|
||||
setTotal(resp.total);
|
||||
setPage(p);
|
||||
} catch {
|
||||
message.error('加载药物记录失败');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const handleSearch = () => {
|
||||
const pid = searchInput.trim();
|
||||
if (!pid) {
|
||||
message.warning('请输入患者 ID');
|
||||
return;
|
||||
}
|
||||
setPatientId(pid);
|
||||
fetchData(pid, 1);
|
||||
};
|
||||
|
||||
const handleCreate = () => {
|
||||
setEditRecord(null);
|
||||
form.resetFields();
|
||||
form.setFieldsValue({ patient_id: patientId, is_current: true });
|
||||
setModalOpen(true);
|
||||
};
|
||||
|
||||
const handleEdit = (record: MedicationRecord) => {
|
||||
setEditRecord(record);
|
||||
form.setFieldsValue({
|
||||
medication_name: record.medication_name,
|
||||
generic_name: record.generic_name,
|
||||
dosage: record.dosage,
|
||||
unit: record.unit,
|
||||
frequency: record.frequency,
|
||||
route: record.route,
|
||||
start_date: record.start_date ? dayjs(record.start_date) : undefined,
|
||||
end_date: record.end_date ? dayjs(record.end_date) : undefined,
|
||||
is_current: record.is_current,
|
||||
prescribed_by: record.prescribed_by,
|
||||
notes: record.notes,
|
||||
});
|
||||
setModalOpen(true);
|
||||
};
|
||||
|
||||
const handleSubmit = async () => {
|
||||
try {
|
||||
const values = await form.validateFields();
|
||||
const req = {
|
||||
...values,
|
||||
start_date: values.start_date?.format('YYYY-MM-DD'),
|
||||
end_date: values.end_date?.format('YYYY-MM-DD'),
|
||||
};
|
||||
|
||||
setSubmitting(true);
|
||||
if (editRecord) {
|
||||
await medicationRecordApi.update(editRecord.id, {
|
||||
...req,
|
||||
version: editRecord.version,
|
||||
} as UpdateMedicationRecordReq & { version: number });
|
||||
message.success('药物记录已更新');
|
||||
} else {
|
||||
await medicationRecordApi.create(req as CreateMedicationRecordReq);
|
||||
message.success('药物记录已创建');
|
||||
}
|
||||
setModalOpen(false);
|
||||
fetchData(patientId, page);
|
||||
} catch {
|
||||
// validation
|
||||
} finally {
|
||||
setSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDelete = async (record: MedicationRecord) => {
|
||||
try {
|
||||
await medicationRecordApi.delete(record.id, record.version);
|
||||
message.success('药物记录已删除');
|
||||
fetchData(patientId, page);
|
||||
} catch {
|
||||
message.error('删除失败');
|
||||
}
|
||||
};
|
||||
|
||||
const columns: ColumnsType<MedicationRecord> = useMemo(() => [
|
||||
{
|
||||
title: '药品名称',
|
||||
dataIndex: 'medication_name',
|
||||
width: 160,
|
||||
render: (v: string, record) => (
|
||||
<span>
|
||||
<strong>{v}</strong>
|
||||
{record.generic_name && <span style={{ color: '#999', marginLeft: 8 }}>({record.generic_name})</span>}
|
||||
</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: '剂量',
|
||||
width: 120,
|
||||
render: (_, record) => {
|
||||
if (!record.dosage) return '-';
|
||||
return `${record.dosage}${record.unit ? ' ' + record.unit : ''}`;
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '频次',
|
||||
dataIndex: 'frequency',
|
||||
width: 100,
|
||||
render: (v: string) => {
|
||||
const label = FREQUENCY_OPTIONS.find((o) => o.value === v)?.label;
|
||||
return label ?? v ?? '-';
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '给药途径',
|
||||
dataIndex: 'route',
|
||||
width: 100,
|
||||
render: (v: string) => {
|
||||
const label = ROUTE_OPTIONS.find((o) => o.value === v)?.label;
|
||||
return label ?? v ?? '-';
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '开始日期',
|
||||
dataIndex: 'start_date',
|
||||
width: 110,
|
||||
render: (v: string) => v ? dayjs(v).format('YYYY-MM-DD') : '-',
|
||||
},
|
||||
{
|
||||
title: '结束日期',
|
||||
dataIndex: 'end_date',
|
||||
width: 110,
|
||||
render: (v: string) => v ? dayjs(v).format('YYYY-MM-DD') : '-',
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'is_current',
|
||||
width: 80,
|
||||
render: (v: boolean) => <Tag color={v ? 'green' : 'default'}>{v ? '在用' : '停用'}</Tag>,
|
||||
},
|
||||
{
|
||||
title: '备注',
|
||||
dataIndex: 'notes',
|
||||
width: 160,
|
||||
ellipsis: true,
|
||||
render: (v: string) => v ?? '-',
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
width: 140,
|
||||
render: (_, record) => (
|
||||
<Space>
|
||||
<Button size="small" onClick={() => handleEdit(record)}>编辑</Button>
|
||||
<Popconfirm title="确定删除此药物记录？" onConfirm={() => handleDelete(record)}>
|
||||
<Button size="small" danger>删除</Button>
|
||||
</Popconfirm>
|
||||
</Space>
|
||||
),
|
||||
},
|
||||
], [patientId, page]);
|
||||
|
||||
if (!hasPermission) {
|
||||
return <Result status="403" title="权限不足" subTitle="您没有管理药物记录的权限" />;
|
||||
}
|
||||
|
||||
return (
|
||||
<PageContainer
|
||||
title="药物记录"
|
||||
actions={patientId ? <Button type="primary" onClick={handleCreate}>添加药物</Button> : undefined}
|
||||
>
|
||||
<Space style={{ marginBottom: 16 }} wrap>
|
||||
<Input.Search
|
||||
placeholder="输入患者 ID 搜索"
|
||||
value={searchInput}
|
||||
onChange={(e) => setSearchInput(e.target.value)}
|
||||
onSearch={handleSearch}
|
||||
style={{ width: 360 }}
|
||||
enterButton="查询"
|
||||
/>
|
||||
{patientId && (
|
||||
<Tag color="blue">当前患者: {patientId}</Tag>
|
||||
)}
|
||||
</Space>
|
||||
|
||||
{!patientId ? (
|
||||
<Result title="请输入患者 ID 查询药物记录" />
|
||||
) : (
|
||||
<Table<MedicationRecord>
|
||||
rowKey="id"
|
||||
columns={columns}
|
||||
dataSource={data}
|
||||
loading={loading}
|
||||
pagination={{
|
||||
current: page,
|
||||
pageSize,
|
||||
total,
|
||||
showTotal: (t) => `共 ${t} 条`,
|
||||
onChange: (p) => fetchData(patientId, p),
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
<Modal
|
||||
title={editRecord ? '编辑药物' : '添加药物'}
|
||||
open={modalOpen}
|
||||
onOk={handleSubmit}
|
||||
onCancel={() => setModalOpen(false)}
|
||||
confirmLoading={submitting}
|
||||
width={600}
|
||||
>
|
||||
<Form form={form} layout="vertical">
|
||||
{!editRecord && (
|
||||
<Form.Item name="patient_id" label="患者 ID" rules={[{ required: true }]}>
|
||||
<Input disabled />
|
||||
</Form.Item>
|
||||
)}
|
||||
<Space style={{ width: '100%' }} size="middle">
|
||||
<Form.Item name="medication_name" label="药品名称" rules={[{ required: true, message: '请输入药品名' }]} style={{ width: 260 }}>
|
||||
<Input placeholder="如：碳酸钙" />
|
||||
</Form.Item>
|
||||
<Form.Item name="generic_name" label="通用名" style={{ width: 260 }}>
|
||||
<Input placeholder="如：碳酸钙片" />
|
||||
</Form.Item>
|
||||
</Space>
|
||||
<Space style={{ width: '100%' }} size="middle">
|
||||
<Form.Item name="dosage" label="剂量" style={{ width: 170 }}>
|
||||
<Input placeholder="如：600" />
|
||||
</Form.Item>
|
||||
<Form.Item name="unit" label="单位" style={{ width: 120 }}>
|
||||
<Input placeholder="如：mg" />
|
||||
</Form.Item>
|
||||
<Form.Item name="frequency" label="频次" style={{ width: 200 }}>
|
||||
<Select options={FREQUENCY_OPTIONS} placeholder="选择频次" allowClear />
|
||||
</Form.Item>
|
||||
</Space>
|
||||
<Space style={{ width: '100%' }} size="middle">
|
||||
<Form.Item name="route" label="给药途径" style={{ width: 200 }}>
|
||||
<Select options={ROUTE_OPTIONS} placeholder="选择途径" allowClear />
|
||||
</Form.Item>
|
||||
<Form.Item name="prescribed_by" label="处方医生" style={{ width: 260 }}>
|
||||
<Input placeholder="医生姓名或 ID" />
|
||||
</Form.Item>
|
||||
</Space>
|
||||
<Space style={{ width: '100%' }} size="middle">
|
||||
<Form.Item name="start_date" label="开始日期">
|
||||
<DatePicker style={{ width: 220 }} />
|
||||
</Form.Item>
|
||||
<Form.Item name="end_date" label="结束日期">
|
||||
<DatePicker style={{ width: 220 }} />
|
||||
</Form.Item>
|
||||
</Space>
|
||||
<Form.Item name="is_current" label="当前在用" valuePropName="checked">
|
||||
<Switch />
|
||||
</Form.Item>
|
||||
<Form.Item name="notes" label="备注">
|
||||
<Input.TextArea rows={2} />
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Modal>
|
||||
</PageContainer>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user