권혁성
b57fc31297
- QuoteFooterBar: 수주전환 버튼 및 상태 표시 개선 - QuoteRegistrationV2: 할인금액 입력 UI 추가 - QuoteManagementClient: 타입 수정 - OrderRegistration: 수주 등록 폼 개선 - StepDetail: 공정 단계 상세 UI 확장 - RuleModal: 규칙 모달 레이아웃 조정 - BadgeSm: 뱃지 컴포넌트 스타일 개선
603 lines
22 KiB
TypeScript
603 lines
22 KiB
TypeScript
'use client';
|
|
|
|
/**
|
|
* 공정 등록/수정 폼 컴포넌트 (리디자인)
|
|
*
|
|
* 기획서 스크린샷 1 기준:
|
|
* - 기본 정보: 공정명(자동생성), 공정형, 담당부서, 담당자, 생산일자, 상태
|
|
* - 품목 설정 정보: 품목 선택 팝업 연동
|
|
* - 단계 관리: 단계 등록/수정/삭제 (인라인)
|
|
*
|
|
* 제거된 섹션: 자동분류규칙, 작업정보, 설명
|
|
*/
|
|
|
|
import { useState, useCallback, useEffect, useRef } from 'react';
|
|
import { useRouter } from 'next/navigation';
|
|
import { Plus, GripVertical, Trash2, Package } from 'lucide-react';
|
|
import { IntegratedDetailTemplate } from '@/components/templates/IntegratedDetailTemplate';
|
|
import { processCreateConfig, processEditConfig } from './processConfig';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Input } from '@/components/ui/input';
|
|
import { Label } from '@/components/ui/label';
|
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
|
import { Badge } from '@/components/ui/badge';
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from '@/components/ui/select';
|
|
import { Switch } from '@/components/ui/switch';
|
|
import { RuleModal } from './RuleModal';
|
|
import { toast } from 'sonner';
|
|
import type { Process, ClassificationRule, ProcessType, ProcessStep } from '@/types/process';
|
|
import { PROCESS_TYPE_OPTIONS } from '@/types/process';
|
|
import {
|
|
createProcess,
|
|
updateProcess,
|
|
getDepartmentOptions,
|
|
getProcessSteps,
|
|
type DepartmentOption,
|
|
} from './actions';
|
|
|
|
interface ProcessFormProps {
|
|
mode: 'create' | 'edit';
|
|
initialData?: Process;
|
|
}
|
|
|
|
export function ProcessForm({ mode, initialData }: ProcessFormProps) {
|
|
const router = useRouter();
|
|
const isEdit = mode === 'edit';
|
|
|
|
// 기본 정보 상태
|
|
const [processName, setProcessName] = useState(initialData?.processName || '');
|
|
const [processType, setProcessType] = useState<ProcessType>(
|
|
initialData?.processType || '생산'
|
|
);
|
|
const [department, setDepartment] = useState(initialData?.department || '');
|
|
const [manager, setManager] = useState(initialData?.manager || '');
|
|
const [useProductionDate, setUseProductionDate] = useState(
|
|
initialData?.useProductionDate ?? false
|
|
);
|
|
const [isActive, setIsActive] = useState(
|
|
initialData ? initialData.status === '사용중' : true
|
|
);
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
|
|
// 품목 분류 규칙 (기존 로직 유지)
|
|
const [classificationRules, setClassificationRules] = useState<ClassificationRule[]>(
|
|
initialData?.classificationRules || []
|
|
);
|
|
|
|
// 단계 목록 상태
|
|
const [steps, setSteps] = useState<ProcessStep[]>([]);
|
|
const [isStepsLoading, setIsStepsLoading] = useState(isEdit);
|
|
|
|
// 부서 목록 상태
|
|
const [departmentOptions, setDepartmentOptions] = useState<DepartmentOption[]>([]);
|
|
const [isDepartmentsLoading, setIsDepartmentsLoading] = useState(true);
|
|
|
|
// 품목 선택 모달 상태
|
|
const [ruleModalOpen, setRuleModalOpen] = useState(false);
|
|
const [editingRule, setEditingRule] = useState<ClassificationRule | undefined>(undefined);
|
|
|
|
// 드래그 상태
|
|
const [dragIndex, setDragIndex] = useState<number | null>(null);
|
|
const [dragOverIndex, setDragOverIndex] = useState<number | null>(null);
|
|
|
|
// 품목 개수 계산
|
|
const itemCount = classificationRules
|
|
.filter((r) => r.registrationType === 'individual')
|
|
.reduce((sum, r) => sum + (r.items?.length || 0), 0);
|
|
|
|
// 부서 목록 + 단계 목록 로드
|
|
useEffect(() => {
|
|
const loadDepartments = async () => {
|
|
setIsDepartmentsLoading(true);
|
|
const departments = await getDepartmentOptions();
|
|
setDepartmentOptions(departments);
|
|
setIsDepartmentsLoading(false);
|
|
};
|
|
loadDepartments();
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
if (isEdit && initialData?.id) {
|
|
const loadSteps = async () => {
|
|
setIsStepsLoading(true);
|
|
const result = await getProcessSteps(initialData.id);
|
|
if (result.success && result.data) {
|
|
setSteps(result.data);
|
|
}
|
|
setIsStepsLoading(false);
|
|
};
|
|
loadSteps();
|
|
}
|
|
}, [isEdit, initialData?.id]);
|
|
|
|
// 품목 규칙 추가/수정
|
|
const handleSaveRule = useCallback(
|
|
(ruleData: Omit<ClassificationRule, 'id' | 'createdAt'>) => {
|
|
if (editingRule) {
|
|
setClassificationRules((prev) =>
|
|
prev.map((r) => (r.id === editingRule.id ? { ...r, ...ruleData } : r))
|
|
);
|
|
} else {
|
|
const newRule: ClassificationRule = {
|
|
...ruleData,
|
|
id: `rule-${Date.now()}`,
|
|
createdAt: new Date().toISOString(),
|
|
};
|
|
setClassificationRules((prev) => [...prev, newRule]);
|
|
}
|
|
setEditingRule(undefined);
|
|
},
|
|
[editingRule]
|
|
);
|
|
|
|
const handleModalClose = useCallback((open: boolean) => {
|
|
setRuleModalOpen(open);
|
|
if (!open) {
|
|
setEditingRule(undefined);
|
|
}
|
|
}, []);
|
|
|
|
// 단계 삭제
|
|
const handleDeleteStep = useCallback((stepId: string) => {
|
|
setSteps((prev) => prev.filter((s) => s.id !== stepId));
|
|
}, []);
|
|
|
|
// 단계 상세 이동
|
|
const handleStepClick = (stepId: string) => {
|
|
if (isEdit && initialData?.id) {
|
|
router.push(`/ko/master-data/process-management/${initialData.id}/steps/${stepId}`);
|
|
}
|
|
};
|
|
|
|
// 단계 등록 이동
|
|
const handleAddStep = () => {
|
|
if (isEdit && initialData?.id) {
|
|
router.push(`/ko/master-data/process-management/${initialData.id}/steps/new`);
|
|
} else {
|
|
toast.info('공정을 먼저 등록한 후 단계를 추가할 수 있습니다.');
|
|
}
|
|
};
|
|
|
|
// 드래그&드롭
|
|
const dragNodeRef = useRef<HTMLElement | null>(null);
|
|
|
|
const handleDragStart = useCallback((e: React.DragEvent<HTMLTableRowElement>, index: number) => {
|
|
setDragIndex(index);
|
|
dragNodeRef.current = e.currentTarget;
|
|
e.dataTransfer.effectAllowed = 'move';
|
|
requestAnimationFrame(() => {
|
|
if (dragNodeRef.current) {
|
|
dragNodeRef.current.style.opacity = '0.4';
|
|
}
|
|
});
|
|
}, []);
|
|
|
|
const handleDragOver = useCallback((e: React.DragEvent<HTMLTableRowElement>, index: number) => {
|
|
e.preventDefault();
|
|
e.dataTransfer.dropEffect = 'move';
|
|
setDragOverIndex(index);
|
|
}, []);
|
|
|
|
const handleDragEnd = useCallback(() => {
|
|
if (dragNodeRef.current) {
|
|
dragNodeRef.current.style.opacity = '1';
|
|
}
|
|
dragNodeRef.current = null;
|
|
setDragIndex(null);
|
|
setDragOverIndex(null);
|
|
}, []);
|
|
|
|
const handleDrop = useCallback(
|
|
(e: React.DragEvent<HTMLTableRowElement>, dropIndex: number) => {
|
|
e.preventDefault();
|
|
if (dragIndex === null || dragIndex === dropIndex) {
|
|
handleDragEnd();
|
|
return;
|
|
}
|
|
|
|
setSteps((prev) => {
|
|
const updated = [...prev];
|
|
const [moved] = updated.splice(dragIndex, 1);
|
|
updated.splice(dropIndex, 0, moved);
|
|
return updated.map((step, i) => ({ ...step, order: i + 1 }));
|
|
});
|
|
|
|
handleDragEnd();
|
|
},
|
|
[dragIndex, handleDragEnd]
|
|
);
|
|
|
|
// 제출
|
|
const handleSubmit = async (): Promise<{ success: boolean; error?: string }> => {
|
|
if (!processName.trim()) {
|
|
toast.error('공정명을 입력해주세요.');
|
|
return { success: false, error: '공정명을 입력해주세요.' };
|
|
}
|
|
if (!department) {
|
|
toast.error('담당부서를 선택해주세요.');
|
|
return { success: false, error: '담당부서를 선택해주세요.' };
|
|
}
|
|
|
|
const formData = {
|
|
processName: processName.trim(),
|
|
processType,
|
|
department,
|
|
classificationRules: classificationRules.map((rule) => ({
|
|
registrationType: rule.registrationType,
|
|
ruleType: rule.ruleType,
|
|
matchingType: rule.matchingType,
|
|
conditionValue: rule.conditionValue,
|
|
priority: rule.priority,
|
|
description: rule.description,
|
|
isActive: rule.isActive,
|
|
})),
|
|
requiredWorkers: 1,
|
|
workSteps: '',
|
|
isActive,
|
|
};
|
|
|
|
setIsLoading(true);
|
|
try {
|
|
if (isEdit && initialData?.id) {
|
|
const result = await updateProcess(initialData.id, formData);
|
|
if (result.success) {
|
|
toast.success('공정이 수정되었습니다.');
|
|
router.push('/ko/master-data/process-management');
|
|
return { success: true };
|
|
} else {
|
|
toast.error(result.error || '수정에 실패했습니다.');
|
|
return { success: false, error: result.error };
|
|
}
|
|
} else {
|
|
const result = await createProcess(formData);
|
|
if (result.success) {
|
|
toast.success('공정이 등록되었습니다.');
|
|
router.push('/ko/master-data/process-management');
|
|
return { success: true };
|
|
} else {
|
|
toast.error(result.error || '등록에 실패했습니다.');
|
|
return { success: false, error: result.error };
|
|
}
|
|
}
|
|
} catch {
|
|
toast.error('처리 중 오류가 발생했습니다.');
|
|
return { success: false, error: '처리 중 오류가 발생했습니다.' };
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
};
|
|
|
|
const handleCancel = () => {
|
|
router.back();
|
|
};
|
|
|
|
// ===== 폼 콘텐츠 렌더링 =====
|
|
const renderFormContent = useCallback(
|
|
() => (
|
|
<>
|
|
<div className="space-y-6">
|
|
{/* 기본 정보 */}
|
|
<Card>
|
|
<CardHeader className="bg-muted/50">
|
|
<CardTitle className="text-base">기본 정보</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="pt-6">
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-6">
|
|
<div className="space-y-2">
|
|
<Label htmlFor="processName">공정명 *</Label>
|
|
<Input
|
|
id="processName"
|
|
value={processName}
|
|
onChange={(e) => setProcessName(e.target.value)}
|
|
placeholder="예: 스크린"
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label>공정형</Label>
|
|
<Select
|
|
value={processType}
|
|
onValueChange={(v) => setProcessType(v as ProcessType)}
|
|
>
|
|
<SelectTrigger>
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{PROCESS_TYPE_OPTIONS.map((opt) => (
|
|
<SelectItem key={opt.value} value={opt.value}>
|
|
{opt.label}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label>담당부서 *</Label>
|
|
<Select
|
|
value={department}
|
|
onValueChange={setDepartment}
|
|
disabled={isDepartmentsLoading}
|
|
>
|
|
<SelectTrigger>
|
|
<SelectValue
|
|
placeholder={isDepartmentsLoading ? '로딩 중...' : '선택하세요'}
|
|
/>
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{departmentOptions.map((opt) => (
|
|
<SelectItem key={opt.id} value={opt.value}>
|
|
{opt.label}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label>담당자</Label>
|
|
<Input
|
|
value={manager}
|
|
onChange={(e) => setManager(e.target.value)}
|
|
placeholder="담당자명"
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label>생산일자</Label>
|
|
<div className="flex items-center gap-2 h-10">
|
|
<Switch
|
|
checked={useProductionDate}
|
|
onCheckedChange={setUseProductionDate}
|
|
/>
|
|
<span className="text-sm text-muted-foreground">
|
|
{useProductionDate ? '사용' : '미사용'}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label>상태</Label>
|
|
<Select
|
|
value={isActive ? '사용중' : '미사용'}
|
|
onValueChange={(v) => setIsActive(v === '사용중')}
|
|
>
|
|
<SelectTrigger>
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="사용중">사용중</SelectItem>
|
|
<SelectItem value="미사용">미사용</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* 품목 설정 정보 */}
|
|
<Card>
|
|
<CardHeader className="bg-muted/50">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<CardTitle className="text-base flex items-center gap-2">
|
|
<Package className="h-4 w-4" />
|
|
품목 설정 정보
|
|
</CardTitle>
|
|
<p className="text-sm text-muted-foreground mt-1">
|
|
품목을 선택하면 이 공정으로 분류됩니다
|
|
</p>
|
|
</div>
|
|
<div className="flex items-center gap-3">
|
|
<Badge variant="outline" className="text-sm">
|
|
{itemCount}개
|
|
</Badge>
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={() => setRuleModalOpen(true)}
|
|
>
|
|
품목 선택
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</CardHeader>
|
|
</Card>
|
|
|
|
{/* 단계 테이블 */}
|
|
<Card>
|
|
<CardHeader className="bg-muted/50">
|
|
<div className="flex items-center justify-between">
|
|
<CardTitle className="text-base">
|
|
단계
|
|
{!isStepsLoading && (
|
|
<span className="text-sm font-normal text-muted-foreground ml-2">
|
|
총 {steps.length}건
|
|
</span>
|
|
)}
|
|
</CardTitle>
|
|
<Button type="button" size="sm" onClick={handleAddStep}>
|
|
<Plus className="h-4 w-4 mr-1" />
|
|
단계 등록
|
|
</Button>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent className="p-0">
|
|
{isStepsLoading ? (
|
|
<div className="p-8 text-center text-muted-foreground">로딩 중...</div>
|
|
) : steps.length === 0 ? (
|
|
<div className="p-8 text-center text-muted-foreground">
|
|
{isEdit
|
|
? '등록된 단계가 없습니다. [단계 등록] 버튼으로 추가해주세요.'
|
|
: '공정을 먼저 등록한 후 단계를 추가할 수 있습니다.'}
|
|
</div>
|
|
) : (
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full">
|
|
<thead>
|
|
<tr className="border-b bg-muted/30">
|
|
<th className="w-10 px-3 py-3" />
|
|
<th className="w-14 px-3 py-3 text-center text-xs font-medium text-muted-foreground">
|
|
No.
|
|
</th>
|
|
<th className="px-3 py-3 text-left text-xs font-medium text-muted-foreground">
|
|
단계코드
|
|
</th>
|
|
<th className="px-3 py-3 text-left text-xs font-medium text-muted-foreground">
|
|
단계명
|
|
</th>
|
|
<th className="w-20 px-3 py-3 text-center text-xs font-medium text-muted-foreground">
|
|
필수여부
|
|
</th>
|
|
<th className="w-20 px-3 py-3 text-center text-xs font-medium text-muted-foreground">
|
|
승인여부
|
|
</th>
|
|
<th className="w-20 px-3 py-3 text-center text-xs font-medium text-muted-foreground">
|
|
검사여부
|
|
</th>
|
|
<th className="w-16 px-3 py-3 text-center text-xs font-medium text-muted-foreground">
|
|
사용
|
|
</th>
|
|
<th className="w-12 px-3 py-3" />
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{steps.map((step, index) => (
|
|
<tr
|
|
key={step.id}
|
|
draggable
|
|
onDragStart={(e) => handleDragStart(e, index)}
|
|
onDragOver={(e) => handleDragOver(e, index)}
|
|
onDragEnd={handleDragEnd}
|
|
onDrop={(e) => handleDrop(e, index)}
|
|
onClick={() => handleStepClick(step.id)}
|
|
className={`border-b cursor-pointer transition-colors hover:bg-muted/50 ${
|
|
dragOverIndex === index && dragIndex !== index
|
|
? 'border-t-2 border-t-primary'
|
|
: ''
|
|
}`}
|
|
>
|
|
<td
|
|
className="w-10 px-3 py-3 text-center cursor-grab active:cursor-grabbing"
|
|
onClick={(e) => e.stopPropagation()}
|
|
>
|
|
<GripVertical className="h-4 w-4 text-muted-foreground mx-auto" />
|
|
</td>
|
|
<td className="w-14 px-3 py-3 text-center text-sm text-muted-foreground">
|
|
{index + 1}
|
|
</td>
|
|
<td className="px-3 py-3 text-sm font-mono">{step.stepCode}</td>
|
|
<td className="px-3 py-3 text-sm font-medium">{step.stepName}</td>
|
|
<td className="w-20 px-3 py-3 text-center">
|
|
<Badge
|
|
variant={step.isRequired ? 'default' : 'outline'}
|
|
className="text-xs"
|
|
>
|
|
{step.isRequired ? 'Y' : 'N'}
|
|
</Badge>
|
|
</td>
|
|
<td className="w-20 px-3 py-3 text-center">
|
|
<Badge
|
|
variant={step.needsApproval ? 'default' : 'outline'}
|
|
className="text-xs"
|
|
>
|
|
{step.needsApproval ? 'Y' : 'N'}
|
|
</Badge>
|
|
</td>
|
|
<td className="w-20 px-3 py-3 text-center">
|
|
<Badge
|
|
variant={step.needsInspection ? 'default' : 'outline'}
|
|
className="text-xs"
|
|
>
|
|
{step.needsInspection ? 'Y' : 'N'}
|
|
</Badge>
|
|
</td>
|
|
<td className="w-16 px-3 py-3 text-center">
|
|
<Badge
|
|
variant={step.isActive ? 'default' : 'secondary'}
|
|
className="text-xs"
|
|
>
|
|
{step.isActive ? 'Y' : 'N'}
|
|
</Badge>
|
|
</td>
|
|
<td className="w-12 px-3 py-3 text-center">
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
size="icon"
|
|
className="h-7 w-7 text-muted-foreground hover:text-destructive"
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
handleDeleteStep(step.id);
|
|
}}
|
|
>
|
|
<Trash2 className="h-3.5 w-3.5" />
|
|
</Button>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
|
|
{/* 품목 선택 모달 */}
|
|
<RuleModal
|
|
open={ruleModalOpen}
|
|
onOpenChange={handleModalClose}
|
|
onAdd={handleSaveRule}
|
|
editRule={editingRule}
|
|
processId={initialData?.id}
|
|
/>
|
|
</>
|
|
),
|
|
[
|
|
processName,
|
|
processType,
|
|
department,
|
|
manager,
|
|
useProductionDate,
|
|
isActive,
|
|
classificationRules,
|
|
steps,
|
|
isStepsLoading,
|
|
ruleModalOpen,
|
|
editingRule,
|
|
departmentOptions,
|
|
isDepartmentsLoading,
|
|
itemCount,
|
|
dragIndex,
|
|
dragOverIndex,
|
|
handleSaveRule,
|
|
handleModalClose,
|
|
handleDeleteStep,
|
|
handleAddStep,
|
|
handleStepClick,
|
|
handleDragStart,
|
|
handleDragOver,
|
|
handleDragEnd,
|
|
handleDrop,
|
|
isEdit,
|
|
initialData?.id,
|
|
]
|
|
);
|
|
|
|
const config = isEdit ? processEditConfig : processCreateConfig;
|
|
|
|
return (
|
|
<IntegratedDetailTemplate
|
|
config={config}
|
|
mode={isEdit ? 'edit' : 'create'}
|
|
isLoading={isDepartmentsLoading}
|
|
onCancel={handleCancel}
|
|
onSubmit={handleSubmit}
|
|
renderForm={renderFormContent}
|
|
/>
|
|
);
|
|
}
|