Add File
This commit is contained in:
779
src/family/pages/CarePlan.tsx
Normal file
779
src/family/pages/CarePlan.tsx
Normal file
@@ -0,0 +1,779 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import {
|
||||
Plus,
|
||||
Edit2,
|
||||
Trash2,
|
||||
X,
|
||||
Clock,
|
||||
AlertCircle,
|
||||
Pill,
|
||||
Heart,
|
||||
Activity,
|
||||
Utensils,
|
||||
Droplets,
|
||||
Moon,
|
||||
} from 'lucide-react';
|
||||
import * as scheduleService from '../services/scheduleService';
|
||||
import { Toast, ToastType } from '../components/Toast';
|
||||
import { ConfirmDialog } from '../components/ConfirmDialog';
|
||||
|
||||
type CareType = 'medication' | 'exercise' | 'meal' | 'hydration' | 'sleep' | 'checkup' | 'other';
|
||||
|
||||
interface CareTask {
|
||||
id: string;
|
||||
type: CareType;
|
||||
name: string;
|
||||
description?: string;
|
||||
times: string[];
|
||||
active: boolean;
|
||||
autoRemind: boolean; // 数字人自动提醒
|
||||
status?: 'pending' | 'completed' | 'skipped' | 'missed';
|
||||
repeatType?: 'once' | 'daily' | 'weekly' | 'monthly';
|
||||
// 用药专用字段
|
||||
dosage?: string;
|
||||
route?: string;
|
||||
withFood?: boolean;
|
||||
gracePeriod?: number;
|
||||
}
|
||||
|
||||
/**
|
||||
* 家属端护理计划界面
|
||||
* 管理老人的用药、饮食、运动等护理任务
|
||||
*/
|
||||
export const CarePlan: React.FC = () => {
|
||||
const [activeTab, setActiveTab] = useState<'all' | CareType>('all');
|
||||
const [showForm, setShowForm] = useState(false);
|
||||
const [editingTask, setEditingTask] = useState<CareTask | null>(null);
|
||||
const [formType, setFormType] = useState<CareType>('medication');
|
||||
const [schedules, setSchedules] = useState<scheduleService.Schedule[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [apiConnected, setApiConnected] = useState(false);
|
||||
const [formTitle, setFormTitle] = useState('');
|
||||
const [formDescription, setFormDescription] = useState('');
|
||||
const [formTime, setFormTime] = useState('08:00');
|
||||
const [formRepeatDaily, setFormRepeatDaily] = useState(true);
|
||||
const [formAutoRemind, setFormAutoRemind] = useState(true);
|
||||
const [toast, setToast] = useState<{ message: string; type: ToastType } | null>(null);
|
||||
const [confirmDialog, setConfirmDialog] = useState<{
|
||||
message: string;
|
||||
onConfirm: () => void;
|
||||
} | null>(null);
|
||||
const familyId = 'family_001'; // 实际使用时从用户上下文获取
|
||||
|
||||
// 加载日程数据
|
||||
useEffect(() => {
|
||||
loadSchedules();
|
||||
}, []);
|
||||
|
||||
const loadSchedules = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
console.log('开始加载日程，family_id:', familyId);
|
||||
const data = await scheduleService.getFamilySchedules(familyId);
|
||||
console.log('加载到的日程数据:', data);
|
||||
setSchedules(data);
|
||||
setApiConnected(true); // 标记 API 已连接
|
||||
console.log('API 已连接，日程数量:', data.length);
|
||||
} catch (error) {
|
||||
console.error('加载日程失败:', error);
|
||||
setApiConnected(false);
|
||||
// 只在第一次加载失败时提示
|
||||
if (!apiConnected) {
|
||||
setToast({
|
||||
message: '加载日程失败，请检查服务器是否已启动',
|
||||
type: 'warning',
|
||||
});
|
||||
}
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// 将 Schedule 转换为 CareTask 格式（用于兼容现有 UI）
|
||||
const convertScheduleToTask = (schedule: scheduleService.Schedule): CareTask => {
|
||||
// 安全地提取时间部分
|
||||
let time = '00:00';
|
||||
try {
|
||||
const dateTime = scheduleService.formatDateTime(new Date(schedule.schedule_time));
|
||||
const parts = dateTime.split(' ');
|
||||
if (parts.length >= 2) {
|
||||
time = parts[1].slice(0, 5);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('时间格式转换失败:', schedule.schedule_time, error);
|
||||
}
|
||||
|
||||
const autoRemind = schedule.auto_remind === 1;
|
||||
console.log(`转换日程 "${schedule.title}": auto_remind=${schedule.auto_remind} → autoRemind=${autoRemind}`);
|
||||
|
||||
return {
|
||||
id: schedule.id?.toString() || '',
|
||||
type: (schedule.schedule_type || 'other') as CareType,
|
||||
name: schedule.title,
|
||||
description: schedule.description,
|
||||
times: [time],
|
||||
active: schedule.is_active === 1,
|
||||
autoRemind: autoRemind,
|
||||
status: schedule.status || 'pending',
|
||||
repeatType: schedule.repeat_type || 'once',
|
||||
};
|
||||
};
|
||||
|
||||
// 模拟数据已移除 - 始终使用真实API数据
|
||||
|
||||
const careTypeConfig = {
|
||||
medication: { label: '用药', icon: Pill, color: 'blue' },
|
||||
exercise: { label: '运动', icon: Activity, color: 'green' },
|
||||
meal: { label: '饮食', icon: Utensils, color: 'orange' },
|
||||
hydration: { label: '饮水', icon: Droplets, color: 'cyan' },
|
||||
sleep: { label: '睡眠', icon: Moon, color: 'purple' },
|
||||
checkup: { label: '检查', icon: Heart, color: 'red' },
|
||||
other: { label: '其他', icon: Clock, color: 'gray' },
|
||||
};
|
||||
|
||||
// 根据护理类型获取提示词
|
||||
const getPlaceholders = (type: CareType) => {
|
||||
const placeholders: Record<CareType, { title: string; description: string }> = {
|
||||
medication: {
|
||||
title: '例如：氯沙坦、阿司匹林',
|
||||
description: '例如：饭后服用，每日一次，50mg'
|
||||
},
|
||||
exercise: {
|
||||
title: '例如：晨间散步、太极拳',
|
||||
description: '例如：小区公园散步30分钟，注意安全'
|
||||
},
|
||||
meal: {
|
||||
title: '例如：早餐、午餐、晚餐',
|
||||
description: '例如：低盐低糖，营养均衡，多吃蔬菜'
|
||||
},
|
||||
hydration: {
|
||||
title: '例如：饮水提醒',
|
||||
description: '例如：每次200ml左右，温开水为宜'
|
||||
},
|
||||
sleep: {
|
||||
title: '例如：午休、就寝',
|
||||
description: '例如：30-60分钟，保证充足睡眠'
|
||||
},
|
||||
checkup: {
|
||||
title: '例如：血压测量、血糖检测',
|
||||
description: '例如：记录数据并上传，如有异常及时联系医生'
|
||||
},
|
||||
other: {
|
||||
title: '例如：阅读时光、听音乐',
|
||||
description: '例如：详细描述此活动的具体内容和注意事项'
|
||||
}
|
||||
};
|
||||
return placeholders[type];
|
||||
};
|
||||
|
||||
const getColorClasses = (color: string) => {
|
||||
const colors = {
|
||||
blue: 'bg-blue-50 text-blue-700 border-blue-200',
|
||||
green: 'bg-green-50 text-green-700 border-green-200',
|
||||
orange: 'bg-orange-50 text-orange-700 border-orange-200',
|
||||
cyan: 'bg-cyan-50 text-cyan-700 border-cyan-200',
|
||||
purple: 'bg-purple-50 text-purple-700 border-purple-200',
|
||||
red: 'bg-red-50 text-red-700 border-red-200',
|
||||
gray: 'bg-gray-50 text-gray-700 border-gray-200',
|
||||
};
|
||||
return colors[color as keyof typeof colors] || colors.gray;
|
||||
};
|
||||
|
||||
// 始终使用 API 数据
|
||||
let careTasks: CareTask[] = [];
|
||||
try {
|
||||
careTasks = schedules.map(convertScheduleToTask);
|
||||
} catch (error) {
|
||||
console.error('转换日程数据失败:', error);
|
||||
careTasks = [];
|
||||
}
|
||||
|
||||
const filteredTasks =
|
||||
activeTab === 'all'
|
||||
? careTasks
|
||||
: careTasks.filter((task) => task.type === activeTab);
|
||||
|
||||
const handleEdit = (task: CareTask) => {
|
||||
setEditingTask(task);
|
||||
setFormType(task.type);
|
||||
setFormTitle(task.name);
|
||||
setFormDescription(task.description || '');
|
||||
// 设置时间：从 times 数组中取第一个时间
|
||||
setFormTime(task.times && task.times.length > 0 ? task.times[0] : '08:00');
|
||||
// 设置重复：daily 表示每日重复，once 表示不重复
|
||||
setFormRepeatDaily(task.repeatType === 'daily');
|
||||
// 设置自动提醒：明确使用布尔值，undefined 时默认为 true
|
||||
const autoRemindValue = task.autoRemind === undefined ? true : task.autoRemind;
|
||||
setFormAutoRemind(autoRemindValue);
|
||||
console.log('编辑任务，task.autoRemind:', task.autoRemind, '最终设置为:', autoRemindValue);
|
||||
setShowForm(true);
|
||||
};
|
||||
|
||||
const handleDelete = async (taskId: string) => {
|
||||
setConfirmDialog({
|
||||
message: '确定要删除这个护理计划吗？删除后无法恢复。',
|
||||
onConfirm: async () => {
|
||||
try {
|
||||
console.log('正在删除日程 ID:', taskId);
|
||||
const success = await scheduleService.deleteSchedule(Number(taskId));
|
||||
console.log('删除结果:', success);
|
||||
|
||||
// 重新加载列表
|
||||
await loadSchedules();
|
||||
console.log('重新加载后的日程数量:', schedules.length);
|
||||
|
||||
setToast({ message: '删除成功', type: 'success' });
|
||||
} catch (error) {
|
||||
console.error('删除失败:', error);
|
||||
setToast({ message: '删除失败，请重试', type: 'error' });
|
||||
}
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
const handleAddNew = (type: CareType) => {
|
||||
setEditingTask(null);
|
||||
setFormType(type);
|
||||
setFormTitle('');
|
||||
setFormDescription('');
|
||||
setFormTime('08:00');
|
||||
setFormRepeatDaily(true);
|
||||
setFormAutoRemind(true);
|
||||
setShowForm(true);
|
||||
};
|
||||
|
||||
// 显示加载状态
|
||||
if (loading && schedules.length === 0 && !apiConnected) {
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50 flex items-center justify-center">
|
||||
<div className="text-center">
|
||||
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary-600 mx-auto mb-4"></div>
|
||||
<p className="text-gray-600">正在加载护理计划...</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50">
|
||||
{/* 顶部导航 */}
|
||||
<div className="bg-white border-b">
|
||||
<div className="px-4 py-3">
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<h1 className="text-xl font-bold text-gray-900">护理计划</h1>
|
||||
<button
|
||||
onClick={() => handleAddNew('medication')}
|
||||
className="px-3 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors flex items-center gap-2 text-sm"
|
||||
>
|
||||
<Plus size={18} />
|
||||
添加
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* 标签栏 */}
|
||||
<div className="flex gap-2 overflow-x-auto pb-2 -mb-2 scrollbar-hide">
|
||||
<button
|
||||
onClick={() => setActiveTab('all')}
|
||||
className={`px-4 py-2 rounded-full text-sm font-medium whitespace-nowrap transition-colors ${
|
||||
activeTab === 'all'
|
||||
? 'bg-primary-100 text-primary-700'
|
||||
: 'bg-gray-100 text-gray-600 hover:bg-gray-200'
|
||||
}`}
|
||||
>
|
||||
全部 ({careTasks.length})
|
||||
</button>
|
||||
{(Object.entries(careTypeConfig) as [CareType, any][]).map(
|
||||
([type, config]) => {
|
||||
const count = careTasks.filter((t) => t.type === type).length;
|
||||
const Icon = config.icon;
|
||||
return (
|
||||
<button
|
||||
key={type}
|
||||
onClick={() => setActiveTab(type)}
|
||||
className={`px-4 py-2 rounded-full text-sm font-medium whitespace-nowrap transition-colors flex items-center gap-1 ${
|
||||
activeTab === type
|
||||
? getColorClasses(config.color)
|
||||
: 'bg-gray-100 text-gray-600 hover:bg-gray-200'
|
||||
}`}
|
||||
>
|
||||
<Icon size={16} />
|
||||
{config.label} ({count})
|
||||
</button>
|
||||
);
|
||||
}
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 主要内容区 - 手机优化列表 */}
|
||||
<div className="px-4 py-4">
|
||||
<div className="space-y-3">
|
||||
{filteredTasks.map((task) => {
|
||||
const config = careTypeConfig[task.type];
|
||||
const Icon = config.icon;
|
||||
|
||||
return (
|
||||
<div
|
||||
key={task.id}
|
||||
className="card p-4 hover:shadow-md transition-shadow"
|
||||
>
|
||||
{/* 头部 */}
|
||||
<div className="flex items-start justify-between mb-3">
|
||||
<div className="flex items-start gap-3 flex-1 min-w-0">
|
||||
<div
|
||||
className={`p-2 rounded-lg ${getColorClasses(
|
||||
config.color
|
||||
)}`}
|
||||
>
|
||||
<Icon size={20} />
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2 mb-1 flex-wrap">
|
||||
<h3 className="font-bold text-gray-900">
|
||||
{task.name}
|
||||
</h3>
|
||||
{/* 日程状态标签 */}
|
||||
{task.status === 'pending' && (
|
||||
<span className="px-2 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-700">
|
||||
⏳ 待执行
|
||||
</span>
|
||||
)}
|
||||
{task.status === 'completed' && (
|
||||
<span className="px-2 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-700">
|
||||
✓ 已完成
|
||||
</span>
|
||||
)}
|
||||
{task.status === 'skipped' && (
|
||||
<span className="px-2 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-700">
|
||||
○ 已忽略
|
||||
</span>
|
||||
)}
|
||||
{task.status === 'missed' && (
|
||||
<span className="px-2 py-0.5 rounded-full text-xs font-medium bg-orange-100 text-orange-700">
|
||||
⚠ 已错过
|
||||
</span>
|
||||
)}
|
||||
{/* 如果没有状态，默认显示待执行 */}
|
||||
{!task.status && (
|
||||
<span className="px-2 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-700">
|
||||
⏳ 待执行
|
||||
</span>
|
||||
)}
|
||||
{task.autoRemind && (
|
||||
<span className="px-2 py-0.5 rounded-full text-xs font-medium bg-purple-100 text-purple-700">
|
||||
🤖 自动提醒
|
||||
</span>
|
||||
)}
|
||||
{task.repeatType === 'daily' && (
|
||||
<span className="px-2 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-700">
|
||||
🔄 每日重复
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 用药专用信息 */}
|
||||
{task.type === 'medication' && (
|
||||
<div className="text-sm text-gray-600 mb-2">
|
||||
{task.dosage} · {task.route}
|
||||
{task.withFood && ' · 随餐'}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 其他描述 */}
|
||||
{task.description && (
|
||||
<p className="text-sm text-gray-600 mb-2">
|
||||
{task.description}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{/* 时间标签 */}
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{task.times.map((time, index) => (
|
||||
<span
|
||||
key={index}
|
||||
className="px-2 py-1 bg-gray-100 text-gray-700 text-xs rounded flex items-center gap-1"
|
||||
>
|
||||
<Clock size={12} />
|
||||
{time}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* 用药宽限期 */}
|
||||
{task.type === 'medication' && task.gracePeriod && (
|
||||
<div className="text-xs text-gray-500 mt-2">
|
||||
宽限期：{task.gracePeriod} 分钟
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 操作按钮 */}
|
||||
<div className="flex items-center gap-1 flex-shrink-0">
|
||||
<button
|
||||
onClick={() => handleEdit(task)}
|
||||
className="p-2 text-gray-600 hover:text-primary-600 hover:bg-gray-100 rounded-lg transition-colors"
|
||||
aria-label="编辑"
|
||||
>
|
||||
<Edit2 size={18} />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleDelete(task.id)}
|
||||
className="p-2 text-gray-600 hover:text-red-600 hover:bg-gray-100 rounded-lg transition-colors"
|
||||
aria-label="删除"
|
||||
>
|
||||
<Trash2 size={18} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* 空状态 */}
|
||||
{filteredTasks.length === 0 && (
|
||||
<div className="text-center py-12">
|
||||
<p className="text-gray-500">暂无护理计划</p>
|
||||
<button
|
||||
onClick={() => handleAddNew(activeTab === 'all' ? 'medication' : activeTab)}
|
||||
className="mt-4 text-primary-600 hover:text-primary-700 font-medium"
|
||||
>
|
||||
添加第一个计划
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 提示信息 */}
|
||||
<div className="mt-6 bg-blue-50 border-l-4 border-blue-400 p-4 rounded-lg">
|
||||
<div className="flex items-start">
|
||||
<AlertCircle
|
||||
className="text-blue-600 mt-0.5 mr-3 flex-shrink-0"
|
||||
size={20}
|
||||
/>
|
||||
<div className="text-sm text-blue-800">
|
||||
<p className="font-medium mb-1">护理计划提示</p>
|
||||
<ul className="list-disc list-inside space-y-1 text-blue-700">
|
||||
<li>护理计划会在设定时间提醒老人执行</li>
|
||||
<li>用药计划超时未确认将自动发送通知给家属</li>
|
||||
<li>如需调整护理方案请咨询专业医护人员</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 编辑/添加表单弹窗 */}
|
||||
{showForm && (
|
||||
<div className="fixed inset-0 bg-black/60 backdrop-blur-sm z-50 flex items-center justify-center p-4">
|
||||
<div className="bg-white rounded-3xl shadow-2xl max-w-md w-full max-h-[85vh] overflow-hidden flex flex-col">
|
||||
{/* 头部 */}
|
||||
<div className="p-6 border-b flex items-center justify-between flex-shrink-0">
|
||||
<h2 className="text-xl font-bold text-gray-900">
|
||||
{editingTask ? '编辑' : '添加'}
|
||||
{careTypeConfig[formType]?.label || ''}计划
|
||||
</h2>
|
||||
<button
|
||||
onClick={() => setShowForm(false)}
|
||||
className="p-2 hover:bg-gray-100 rounded-lg transition-colors"
|
||||
>
|
||||
<X size={24} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* 表单内容 - 可滚动 */}
|
||||
<div className="flex-1 overflow-y-auto p-6 space-y-4">
|
||||
{/* 类型选择 */}
|
||||
{!editingTask && (
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
计划类型
|
||||
</label>
|
||||
<div className="grid grid-cols-3 gap-2">
|
||||
{(Object.entries(careTypeConfig) as [CareType, any][]).map(
|
||||
([type, config]) => {
|
||||
const Icon = config.icon;
|
||||
return (
|
||||
<button
|
||||
key={type}
|
||||
onClick={() => setFormType(type)}
|
||||
className={`p-3 rounded-lg border-2 transition-colors ${
|
||||
formType === type
|
||||
? `${getColorClasses(config.color)} border-current`
|
||||
: 'border-gray-200 hover:border-gray-300'
|
||||
}`}
|
||||
>
|
||||
<Icon size={24} className="mx-auto mb-1" />
|
||||
<div className="text-xs font-medium">
|
||||
{config.label}
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 名称 */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
{formType === 'medication' ? '药品名称' : '计划名称'}{' '}
|
||||
<span className="text-red-500">*</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
placeholder={getPlaceholders(formType).title}
|
||||
value={formTitle || editingTask?.name || ''}
|
||||
onChange={(e) => setFormTitle(e.target.value)}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 用药专用字段 */}
|
||||
{formType === 'medication' && (
|
||||
<>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
剂量 <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="例如：50mg"
|
||||
defaultValue={editingTask?.dosage}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-lg"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
给药途径
|
||||
</label>
|
||||
<select
|
||||
defaultValue={editingTask?.route}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-lg"
|
||||
>
|
||||
<option>口服</option>
|
||||
<option>外用</option>
|
||||
<option>注射</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="flex items-center gap-2 cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
defaultChecked={editingTask?.withFood}
|
||||
className="rounded"
|
||||
/>
|
||||
<span className="text-sm text-gray-700">
|
||||
需要随餐服用
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
宽限期（分钟）
|
||||
</label>
|
||||
<select
|
||||
defaultValue={editingTask?.gracePeriod}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-lg"
|
||||
>
|
||||
<option value="15">15 分钟</option>
|
||||
<option value="30">30 分钟</option>
|
||||
<option value="60">60 分钟</option>
|
||||
<option value="120">120 分钟</option>
|
||||
</select>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* 非用药的描述字段 */}
|
||||
{formType !== 'medication' && (
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
描述说明
|
||||
</label>
|
||||
<textarea
|
||||
placeholder={getPlaceholders(formType).description}
|
||||
value={formDescription || editingTask?.description || ''}
|
||||
onChange={(e) => setFormDescription(e.target.value)}
|
||||
rows={3}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-lg resize-none"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 执行时间 */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
执行时间 <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<input
|
||||
type="time"
|
||||
value={formTime}
|
||||
onChange={(e) => setFormTime(e.target.value)}
|
||||
className="flex-1 px-3 py-2 border border-gray-300 rounded-lg"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 是否每日重复 */}
|
||||
<div>
|
||||
<label className="flex items-start gap-3 cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={formRepeatDaily}
|
||||
onChange={(e) => setFormRepeatDaily(e.target.checked)}
|
||||
className="mt-1 rounded"
|
||||
/>
|
||||
<div className="flex-1">
|
||||
<span className="text-sm font-medium text-gray-700">
|
||||
每日重复执行
|
||||
</span>
|
||||
<p className="text-xs text-gray-500 mt-1">
|
||||
启用后，此日程将每天在设定的时间自动执行
|
||||
</p>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
{/* 数字人自动提醒 */}
|
||||
<div className="pt-4 border-t">
|
||||
<label className="flex items-start gap-3 cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={formAutoRemind}
|
||||
onChange={(e) => {
|
||||
console.log('自动提醒复选框改变:', e.target.checked);
|
||||
setFormAutoRemind(e.target.checked);
|
||||
}}
|
||||
className="mt-1 rounded"
|
||||
/>
|
||||
<div className="flex-1">
|
||||
<span className="text-sm font-medium text-gray-700">
|
||||
数字人自动提醒老人 {formAutoRemind ? '(当前: 是)' : '(当前: 否)'}
|
||||
</span>
|
||||
<p className="text-xs text-gray-500 mt-1">
|
||||
启用后，数字人会在设定时间主动提醒老人执行此护理任务
|
||||
</p>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 底部按钮 */}
|
||||
<div className="p-4 border-t flex gap-3 flex-shrink-0">
|
||||
<button
|
||||
onClick={() => setShowForm(false)}
|
||||
className="flex-1 py-3 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors"
|
||||
>
|
||||
取消
|
||||
</button>
|
||||
<button
|
||||
onClick={async () => {
|
||||
// 验证必填字段
|
||||
const title = formTitle.trim() || editingTask?.name || '';
|
||||
if (!title) {
|
||||
setToast({ message: '请输入日程名称', type: 'warning' });
|
||||
return;
|
||||
}
|
||||
|
||||
// 构建日程时间：使用今天的日期 + 用户选择的时间
|
||||
const today = new Date();
|
||||
const [hours, minutes] = formTime.split(':').map(Number);
|
||||
const scheduleDateTime = new Date(
|
||||
today.getFullYear(),
|
||||
today.getMonth(),
|
||||
today.getDate(),
|
||||
hours,
|
||||
minutes,
|
||||
0
|
||||
);
|
||||
|
||||
// 获取表单数据
|
||||
const formData: scheduleService.Schedule = {
|
||||
family_id: familyId,
|
||||
title: title,
|
||||
description: formDescription.trim() || editingTask?.description || '',
|
||||
schedule_type: formType === 'hydration' || formType === 'sleep' ? 'other' : formType,
|
||||
schedule_time: scheduleService.formatDateTime(scheduleDateTime),
|
||||
repeat_type: formRepeatDaily ? 'daily' : 'once',
|
||||
auto_remind: formAutoRemind ? 1 : 0,
|
||||
};
|
||||
|
||||
// 如果是编辑操作，且新时间在当前时间之后，自动重置状态为pending
|
||||
if (editingTask) {
|
||||
const now = new Date();
|
||||
if (scheduleDateTime > now) {
|
||||
formData.status = 'pending';
|
||||
console.log('日程时间在未来，自动重置状态为pending');
|
||||
}
|
||||
}
|
||||
|
||||
try {
|
||||
if (editingTask) {
|
||||
// 更新
|
||||
await scheduleService.updateSchedule(Number(editingTask.id), formData);
|
||||
console.log('更新成功');
|
||||
} else {
|
||||
// 创建
|
||||
const newId = await scheduleService.createSchedule(formData);
|
||||
console.log('创建成功，新 ID:', newId);
|
||||
}
|
||||
setShowForm(false);
|
||||
setFormTitle('');
|
||||
setFormDescription('');
|
||||
setFormTime('08:00');
|
||||
setFormRepeatDaily(true);
|
||||
setFormAutoRemind(true);
|
||||
// 等待重新加载完成
|
||||
await loadSchedules();
|
||||
setToast({
|
||||
message: editingTask ? '更新成功' : '创建成功',
|
||||
type: 'success',
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('保存失败:', error);
|
||||
setToast({
|
||||
message: `保存失败: ${error instanceof Error ? error.message : '未知错误'}`,
|
||||
type: 'error',
|
||||
});
|
||||
}
|
||||
}}
|
||||
className="flex-1 py-3 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors font-medium"
|
||||
>
|
||||
保存
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Toast 提示 */}
|
||||
{toast && (
|
||||
<Toast
|
||||
message={toast.message}
|
||||
type={toast.type}
|
||||
onClose={() => setToast(null)}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* 确认对话框 */}
|
||||
{confirmDialog && (
|
||||
<ConfirmDialog
|
||||
message={confirmDialog.message}
|
||||
type="danger"
|
||||
confirmText="删除"
|
||||
onConfirm={confirmDialog.onConfirm}
|
||||
onCancel={() => setConfirmDialog(null)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user