首次提交by MimoCode

2026-06-15 14:50:15 +08:00
parent 584b31da50
commit ead13f863c
166 changed files with 14908 additions and 1 deletions
@@ -0,0 +1,72 @@
+import React from 'react';
+import { Card, Tag } from 'antd-mobile';
+import { useNavigate } from 'react-router-dom';
+import { MedicineWithStock } from '../../types';
+import { getExpiryStatus } from '../../utils/date';
+import './index.css';
+
+interface MedicineCardProps {
+  medicine: MedicineWithStock;
+}
+
+const MedicineCard: React.FC<MedicineCardProps> = ({ medicine }) => {
+  const navigate = useNavigate();
+  
+  const expiryStatus = medicine.nearestExpiryDate 
+    ? getExpiryStatus(medicine.nearestExpiryDate, medicine.expiryGraceDays)
+    : null;
+  
+  const getExpiryTag = () => {
+    if (!expiryStatus) return null;
+    
+    switch (expiryStatus) {
+      case 'expired':
+        return <Tag color="danger">已过期</Tag>;
+      case 'warning':
+        return <Tag color="warning">即将过期</Tag>;
+      default:
+        return null;
+    }
+  };
+  
+  return (
+    <Card 
+      className="medicine-card"
+      onClick={() => navigate(`/medicines/${medicine.id}`)}
+    >
+      <div className="medicine-card-header">
+        <h3 className="medicine-name">{medicine.name}</h3>
+        {getExpiryTag()}
+      </div>
+      
+      <div className="medicine-card-body">
+        {medicine.specification && (
+          <div className="medicine-info">
+            <span className="label">规格:</span>
+            <span className="value">{medicine.specification}</span>
+          </div>
+        )}
+        
+        <div className="medicine-info">
+          <span className="label">库存:</span>
+          <span className={`value ${medicine.totalQuantity < 5 ? 'low-stock' : ''}`}>
+            {medicine.totalQuantity}
+          </span>
+        </div>
+        
+        <div className="medicine-info">
+          <span className="label">批次:</span>
+          <span className="value">{medicine.batchCount}</span>
+        </div>
+      </div>
+      
+      {medicine.brandName && (
+        <div className="medicine-card-footer">
+          <span className="brand-name">{medicine.brandName}</span>
+        </div>
+      )}
+    </Card>
+  );
+};
+
+export default MedicineCard;