198 lines
8.2 KiB
TypeScript
198 lines
8.2 KiB
TypeScript
import React, { useState, useEffect } from 'react';
|
|
import { useNavigate } from 'react-router-dom';
|
|
import { useAuth } from '../../contexts/AuthContext';
|
|
import { supabase } from '../../supabase/client';
|
|
import { motion } from 'framer-motion';
|
|
import { ArrowLeft, CheckCircle, Droplets, ChevronRight } from 'lucide-react';
|
|
import { useResponsive } from '../../hooks/useResponsive';
|
|
import type { WashingPlan, WashingPlanCompletion } from '../../types';
|
|
|
|
interface CompletedFabricItem {
|
|
id: string;
|
|
plan_code: string;
|
|
purchaser_name: string;
|
|
product_name: string;
|
|
product_color: string;
|
|
fabric_code: string;
|
|
planned_meters: number;
|
|
actual_washed_meters: number;
|
|
shrinkage_rate: number;
|
|
washing_date: string;
|
|
rolls: number;
|
|
completed_at: string;
|
|
}
|
|
|
|
export function CompletedFabric() {
|
|
const navigate = useNavigate();
|
|
const { auth } = useAuth();
|
|
const { isMobile } = useResponsive();
|
|
const [items, setItems] = useState<CompletedFabricItem[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
|
|
useEffect(() => {
|
|
if (!auth.company) return;
|
|
fetchCompletedFabric();
|
|
}, [auth.company]);
|
|
|
|
const fetchCompletedFabric = async () => {
|
|
setLoading(true);
|
|
|
|
// 获取已完成的水洗计划
|
|
const { data: washingPlans, error } = await supabase
|
|
.from('washing_plans')
|
|
.select(`
|
|
*,
|
|
product:product_id(product_name, color, fabric_code),
|
|
company:company_id(name)
|
|
`)
|
|
.eq('washing_factory_id', auth.company!.id)
|
|
.eq('status', 'completed')
|
|
.order('updated_at', { ascending: false });
|
|
|
|
if (error) {
|
|
console.error('获取已完成坯布失败:', error);
|
|
} else {
|
|
// 获取完成记录详情
|
|
const planIds = (washingPlans || []).map(p => p.id);
|
|
const { data: completions } = await supabase
|
|
.from('washing_plan_completions')
|
|
.select('*')
|
|
.in('washing_plan_id', planIds);
|
|
|
|
const completionMap: Record<string, WashingPlanCompletion> = {};
|
|
(completions || []).forEach(c => {
|
|
completionMap[c.washing_plan_id] = c;
|
|
});
|
|
|
|
const formattedItems = (washingPlans || []).map(plan => {
|
|
const completion = completionMap[plan.id];
|
|
return {
|
|
id: plan.id,
|
|
plan_code: plan.plan_code,
|
|
purchaser_name: (plan.company as any)?.name || '未知采购商',
|
|
product_name: (plan.product as any)?.product_name || '-',
|
|
product_color: (plan.product as any)?.color || '-',
|
|
fabric_code: (plan.product as any)?.fabric_code || '-',
|
|
planned_meters: plan.planned_meters,
|
|
actual_washed_meters: completion?.actual_washed_meters || plan.actual_washed_meters || 0,
|
|
shrinkage_rate: completion?.actual_shrinkage_rate || plan.actual_shrinkage_rate || 0,
|
|
washing_date: completion?.washing_date || plan.washing_date || '',
|
|
rolls: completion?.rolls || 0,
|
|
completed_at: completion?.completed_at || plan.updated_at
|
|
};
|
|
});
|
|
setItems(formattedItems);
|
|
}
|
|
setLoading(false);
|
|
};
|
|
|
|
const totalBefore = items.reduce((sum, item) => sum + item.planned_meters, 0);
|
|
const totalAfter = items.reduce((sum, item) => sum + item.actual_washed_meters, 0);
|
|
const avgShrinkage = items.length > 0
|
|
? items.reduce((sum, item) => sum + item.shrinkage_rate, 0) / items.length
|
|
: 0;
|
|
|
|
return (
|
|
<div className="min-h-screen bg-gradient-to-br from-slate-50 via-purple-50/30 to-violet-50/30">
|
|
{/* Header - 与 Dashboard 一致 */}
|
|
<header className="bg-white/80 backdrop-blur-xl border-b border-gray-200/50 sticky top-0 z-10">
|
|
<div className="max-w-7xl mx-auto px-4 md:px-8 py-4 flex items-center gap-3">
|
|
<button
|
|
onClick={() => navigate('/washing')}
|
|
className="p-2 hover:bg-gray-100 rounded-lg transition-colors"
|
|
>
|
|
<ArrowLeft className="w-5 h-5 text-gray-600" />
|
|
</button>
|
|
<div>
|
|
<h1 className="text-lg font-bold text-gray-900">已完成坯布</h1>
|
|
<p className="text-xs text-gray-500">查看已完成水洗的坯布记录</p>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<div className="p-4 md:p-8 max-w-7xl mx-auto">
|
|
{/* 统计卡片 */}
|
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-3 md:gap-4 mb-6">
|
|
<div className="bg-white rounded-xl p-4 shadow-sm">
|
|
<p className="text-xs text-gray-500 mb-1">已完成计划</p>
|
|
<p className="text-2xl font-bold text-gray-800">{items.length}</p>
|
|
</div>
|
|
<div className="bg-purple-50 rounded-xl p-4 shadow-sm">
|
|
<p className="text-xs text-purple-600 mb-1">水洗前米数</p>
|
|
<p className="text-2xl font-bold text-purple-700">{totalBefore.toFixed(2)}</p>
|
|
</div>
|
|
<div className="bg-green-50 rounded-xl p-4 shadow-sm">
|
|
<p className="text-xs text-green-600 mb-1">水洗后米数</p>
|
|
<p className="text-2xl font-bold text-green-700">{totalAfter.toFixed(2)}</p>
|
|
</div>
|
|
<div className="bg-purple-50 rounded-xl p-4 shadow-sm">
|
|
<p className="text-xs text-purple-600 mb-1">平均缩水率</p>
|
|
<p className="text-2xl font-bold text-purple-700">{avgShrinkage.toFixed(2)}%</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 列表 */}
|
|
{loading ? (
|
|
<div className="text-center py-12 text-gray-400">加载中...</div>
|
|
) : items.length === 0 ? (
|
|
<div className="text-center py-12 text-gray-400">
|
|
<CheckCircle className="w-12 h-12 mx-auto mb-3 text-gray-300" />
|
|
<p>暂无已完成坯布</p>
|
|
</div>
|
|
) : (
|
|
<div className="bg-white rounded-2xl shadow-sm overflow-hidden">
|
|
<div className="p-4 border-b border-gray-100">
|
|
<h2 className="text-base font-semibold text-gray-800">已完成列表</h2>
|
|
</div>
|
|
<div className="divide-y divide-gray-100">
|
|
{items.map((item, index) => (
|
|
<motion.div
|
|
key={item.id}
|
|
initial={{ opacity: 0, y: 10 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ delay: Math.min(index * 0.02, 0.1) }}
|
|
onClick={() => navigate(`/washing/plans?id=${item.id}`)}
|
|
className="p-4 hover:bg-gray-50 transition-colors cursor-pointer"
|
|
>
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex-1">
|
|
<div className="flex items-center gap-2 mb-2">
|
|
<span className="px-2 py-1 rounded-lg text-xs font-medium bg-green-50 text-green-600">
|
|
已完成
|
|
</span>
|
|
<span className="text-xs text-gray-400">{item.plan_code}</span>
|
|
</div>
|
|
<p className="font-medium text-gray-800 mb-1">
|
|
{item.purchaser_name}
|
|
</p>
|
|
<p className="text-sm text-gray-600">
|
|
{item.product_name} - {item.product_color}
|
|
</p>
|
|
<p className="text-xs text-gray-400 mt-1">
|
|
坯布码: {item.fabric_code} | 匹/件数: {item.rolls}匹/件
|
|
</p>
|
|
</div>
|
|
<div className="text-right">
|
|
<div className="text-sm text-gray-600 mb-1">
|
|
<span className="text-blue-600">{item.planned_meters}米</span>
|
|
<span className="mx-1">→</span>
|
|
<span className="text-green-600 font-bold">{item.actual_washed_meters}米</span>
|
|
</div>
|
|
<p className="text-xs text-purple-600">
|
|
缩水率: {item.shrinkage_rate}%
|
|
</p>
|
|
<p className="text-xs text-gray-400 mt-1">
|
|
{item.washing_date ? new Date(item.washing_date).toLocaleDateString('zh-CN') : '-'}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|