完善备注窗面板

src/components/modals/NoteModal.tsx

@@ -1,3 +1,7 @@
+import { useEffect, useState } from 'react';
+
+import { getOperatorRemarkInfo, saveOperatorRemarkInfo } from '../../api';
+
 interface NoteModalProps {
   noteText: string;
   onNoteChange: (v: string) => void;
@@ -5,12 +9,69 @@ interface NoteModalProps {
 }
 
 export const NoteModal = ({ noteText, onNoteChange, onClose }: NoteModalProps) => {
+  const [loading, setLoading] = useState(false);
+  const [saving, setSaving] = useState(false);
+  const [message, setMessage] = useState<string | null>(null);
+
+  const operatorId = typeof window !== 'undefined' ? localStorage.getItem('operatorPhone') || 'unknown' : 'unknown';
+  const operatorName = typeof window !== 'undefined' ? localStorage.getItem('operatorName') || '未知' : '未知';
+
+  // 初始化拉取备注
+  useEffect(() => {
+    if (!operatorId) return;
+    setLoading(true);
+    setMessage(null);
+    getOperatorRemarkInfo({ operator_id: operatorId })
+      .then((res) => {
+        if (res.Status === 200 && res.Data?.remark_content) {
+          onNoteChange(res.Data.remark_content);
+        } else if (res.Message) {
+          setMessage(res.Message);
+        }
+      })
+      .catch((err) => {
+        console.error('获取备注失败', err);
+        setMessage('获取备注失败，请稍后重试');
+      })
+      .finally(() => setLoading(false));
+  }, [operatorId, onNoteChange]);
+
+  const handleSave = async () => {
+    if (!operatorId || !operatorName) {
+      setMessage('缺少操作员信息，无法保存');
+      return;
+    }
+    if (!noteText.trim()) {
+      setMessage('备注内容不能为空');
+      return;
+    }
+    setSaving(true);
+    setMessage(null);
+    try {
+      const res = await saveOperatorRemarkInfo({
+        operator_id: operatorId,
+        operator_name: operatorName,
+        remark_content: noteText.trim(),
+      });
+      if (res.Status === 200) {
+        setMessage('保存成功');
+      } else {
+        setMessage(res.Message || '保存失败');
+      }
+    } catch (err) {
+      console.error('保存备注失败', err);
+      setMessage('保存失败，请稍后重试');
+    } finally {
+      setSaving(false);
+    }
+  };
+
   return (
     <div className='fixed inset-0 z-40 flex items-center justify-center bg-black/30'>
       <div className='w-[560px] max-w-[95vw] bg-white rounded-3xl shadow-xl overflow-hidden text-sm'>
         <div className='px-4 py-3 border-b flex items-center justify-between'>
           <div className='font-semibold'>备注窗</div>
-          <button className='text-xs text-gray-500' onClick={onClose}>
+          <button className='text-xs text-gray-500' onClick={onClose} disabled={saving || loading}>
             关闭
           </button>
         </div>
@@ -22,7 +83,18 @@ export const NoteModal = ({ noteText, onNoteChange, onClose }: NoteModalProps) =
               placeholder='例如：客户有既往疾病史、沟通偏好、特殊关怀需求等，可在此记录。'
               value={noteText}
               onChange={(e) => onNoteChange(e.target.value)}
+              disabled={loading || saving}
             />
+            {message && <div className='text-[11px] text-amber-600'>{message}</div>}
+            <div className='flex items-center justify-end gap-2'>
+              <button
+                className='px-4 py-1.5 rounded-2xl border text-xs disabled:opacity-50'
+                onClick={handleSave}
+                disabled={saving || loading}
+              >
+                {saving ? '保存中...' : '保存'}
+              </button>
+            </div>
             <div className='text-right text-[11px] text-gray-500'>
               备注内容会同步至客户详情页，供前台和导检护士查看。
             </div>