+
+
+
+
+ {config.icon} {config.label}
+
+
+ {dayjs(log.createdAt).format('YYYY-MM-DD HH:mm:ss')}
+
+
+
+ ({dayjs(log.createdAt).fromNow()})
+
+
+
+
+
+
+
+
+
+
+ 变动数量
+
+
+ {config.prefix}
+ {log.quantity}
+
+
+
+
+
+
+ 库存变化
+
+
+ {log.previousStock}
+ →
+
+ {log.currentStock}
+
+
+
+
+
+
+
+ 操作人
+
+
+
+ {log.operator || '系统'}
+
+
+
+
+
+ {(log.reason || log.notes) && (
+
+ {log.reason && (
+
+
+ 原因：
+
+ {log.reason}
+
+ )}
+ {log.notes && (
+
+
+ 备注：
+
+ {log.notes}
+
+ )}
+
+
+
+ SN序列号 ({log.snList.length}个)
+
+
+ {log.snList.slice(0, 5).map((sn, idx) => (
+
+ {sn}
+
+ ))}
+ {log.snList.length > 5 && (
+ ...
+ )}
+
+
+ )}
+
+ );
+};
+
+const ConsumableTimelineModal = ({ visible, consumable, onClose }) => {
+ const [logs, setLogs] = useState([]);
+ const [loading, setLoading] = useState(false);
+ const [pagination, setPagination] = useState({ current: 1, pageSize: 20, total: 0 });
+ const [stats, setStats] = useState({ totalIn: 0, totalOut: 0, netChange: 0 });
+
+ const fetchLogs = useCallback(async (page = 1) => {
+ if (!consumable?.consumableId) return;
+
+ setLoading(true);
+ try {
+ const response = await axios.get('/api/consumables/logs', {
+ params: {
+ consumableId: consumable.consumableId,
+ page,
+ pageSize: pagination.pageSize,
+ },
+ });
+
+ const fetchedLogs = (response.data.logs || []).filter(
+ log => log.operationType !== 'update'
+ );
+ setLogs(page === 1 ? fetchedLogs : [...logs, ...fetchedLogs]);
+ setPagination(prev => ({
+ ...prev,
+ current: page,
+ total: response.data.total - (response.data.logs || []).filter(log => log.operationType === 'update').length,
+ }));
+
+ const totalIn = fetchedLogs
+ .filter(log => log.operationType === 'in')
+ .reduce((sum, log) => sum + Math.abs(log.quantity), 0);
+ const totalOut = fetchedLogs
+ .filter(log => log.operationType === 'out')
+ .reduce((sum, log) => sum + Math.abs(log.quantity), 0);
+ setStats({
+ totalIn,
+ totalOut,
+ netChange: totalIn - totalOut,
+ });
+ } catch (error) {
+ console.error('获取耗材操作记录失败:', error);
+ } finally {
+ setLoading(false);
+ }
+ }, [consumable, pagination.pageSize, logs]);
+
+ useEffect(() => {
+ if (visible && consumable?.consumableId) {
+ setLogs([]);
+ setPagination(prev => ({ ...prev, current: 1 }));
+ fetchLogs(1);
+ }
+ }, [visible, consumable]);
+
+ const handleLoadMore = () => {
+ if (!loading && logs.length < pagination.total) {
+ fetchLogs(pagination.current + 1);
+ }
+ };
+
+ if (!consumable) return null;
+
+ return (
+