469 lines
17 KiB
TypeScript
469 lines
17 KiB
TypeScript
|
'use client';
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 작업지시 등록 페이지
|
|||
|
|
*/
|
|||
|
|
|
|||
|
|
import { useState } from 'react';
|
|||
|
|
import { useRouter } from 'next/navigation';
|
|||
|
|
import { ArrowLeft, FileText, X, Edit2 } from 'lucide-react';
|
|||
|
|
import { Button } from '@/components/ui/button';
|
|||
|
|
import { Input } from '@/components/ui/input';
|
|||
|
|
import { Label } from '@/components/ui/label';
|
|||
|
|
import { Textarea } from '@/components/ui/textarea';
|
|||
|
|
import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
|
|||
|
|
import {
|
|||
|
|
Select,
|
|||
|
|
SelectContent,
|
|||
|
|
SelectItem,
|
|||
|
|
SelectTrigger,
|
|||
|
|
SelectValue,
|
|||
|
|
} from '@/components/ui/select';
|
|||
|
|
import { Alert, AlertDescription } from '@/components/ui/alert';
|
|||
|
|
import { PageLayout } from '@/components/organisms/PageLayout';
|
|||
|
|
import { SalesOrderSelectModal } from './SalesOrderSelectModal';
|
|||
|
|
import { AssigneeSelectModal } from './AssigneeSelectModal';
|
|||
|
|
import { PROCESS_TYPE_LABELS, type ProcessType, type SalesOrder } from './types';
|
|||
|
|
|
|||
|
|
// Validation 에러 타입
|
|||
|
|
interface ValidationErrors {
|
|||
|
|
[key: string]: string;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 필드명 매핑
|
|||
|
|
const FIELD_NAME_MAP: Record<string, string> = {
|
|||
|
|
selectedOrder: '수주',
|
|||
|
|
client: '발주처',
|
|||
|
|
projectName: '현장명',
|
|||
|
|
shipmentDate: '출고예정일',
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
type RegistrationMode = 'linked' | 'manual';
|
|||
|
|
|
|||
|
|
interface FormData {
|
|||
|
|
// 수주 정보
|
|||
|
|
selectedOrder: SalesOrder | null;
|
|||
|
|
splitOption: 'all' | 'partial';
|
|||
|
|
|
|||
|
|
// 기본 정보
|
|||
|
|
client: string;
|
|||
|
|
projectName: string;
|
|||
|
|
orderNo: string;
|
|||
|
|
itemCount: number;
|
|||
|
|
|
|||
|
|
// 작업지시 정보
|
|||
|
|
processType: ProcessType;
|
|||
|
|
shipmentDate: string;
|
|||
|
|
priority: number;
|
|||
|
|
assignees: string[];
|
|||
|
|
|
|||
|
|
// 비고
|
|||
|
|
note: string;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const initialFormData: FormData = {
|
|||
|
|
selectedOrder: null,
|
|||
|
|
splitOption: 'all',
|
|||
|
|
client: '',
|
|||
|
|
projectName: '',
|
|||
|
|
orderNo: '',
|
|||
|
|
itemCount: 0,
|
|||
|
|
processType: 'screen',
|
|||
|
|
shipmentDate: '',
|
|||
|
|
priority: 5,
|
|||
|
|
assignees: [],
|
|||
|
|
note: '',
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
export function WorkOrderCreate() {
|
|||
|
|
const router = useRouter();
|
|||
|
|
const [mode, setMode] = useState<RegistrationMode>('linked');
|
|||
|
|
const [formData, setFormData] = useState<FormData>(initialFormData);
|
|||
|
|
const [isModalOpen, setIsModalOpen] = useState(false);
|
|||
|
|
const [isAssigneeModalOpen, setIsAssigneeModalOpen] = useState(false);
|
|||
|
|
const [assigneeNames, setAssigneeNames] = useState<string[]>([]);
|
|||
|
|
const [validationErrors, setValidationErrors] = useState<ValidationErrors>({});
|
|||
|
|
|
|||
|
|
// 수주 선택 핸들러
|
|||
|
|
const handleSelectOrder = (order: SalesOrder) => {
|
|||
|
|
setFormData({
|
|||
|
|
...formData,
|
|||
|
|
selectedOrder: order,
|
|||
|
|
client: order.client,
|
|||
|
|
projectName: order.projectName,
|
|||
|
|
orderNo: order.orderNo,
|
|||
|
|
itemCount: order.itemCount,
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 수주 해제
|
|||
|
|
const handleClearOrder = () => {
|
|||
|
|
setFormData({
|
|||
|
|
...initialFormData,
|
|||
|
|
processType: formData.processType,
|
|||
|
|
shipmentDate: formData.shipmentDate,
|
|||
|
|
priority: formData.priority,
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 폼 제출
|
|||
|
|
const handleSubmit = () => {
|
|||
|
|
// Validation 체크
|
|||
|
|
const errors: ValidationErrors = {};
|
|||
|
|
|
|||
|
|
if (mode === 'linked') {
|
|||
|
|
if (!formData.selectedOrder) {
|
|||
|
|
errors.selectedOrder = '수주를 선택해주세요';
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
if (!formData.client) {
|
|||
|
|
errors.client = '발주처를 입력해주세요';
|
|||
|
|
}
|
|||
|
|
if (!formData.projectName) {
|
|||
|
|
errors.projectName = '현장명을 입력해주세요';
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (!formData.shipmentDate) {
|
|||
|
|
errors.shipmentDate = '출고예정일을 선택해주세요';
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 에러가 있으면 상태 업데이트 후 리턴
|
|||
|
|
if (Object.keys(errors).length > 0) {
|
|||
|
|
setValidationErrors(errors);
|
|||
|
|
// 페이지 상단으로 스크롤
|
|||
|
|
window.scrollTo({ top: 0, behavior: 'smooth' });
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 에러 초기화
|
|||
|
|
setValidationErrors({});
|
|||
|
|
|
|||
|
|
// TODO: API 호출
|
|||
|
|
console.log('Submit:', formData);
|
|||
|
|
router.push('/production/work-orders');
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 취소
|
|||
|
|
const handleCancel = () => {
|
|||
|
|
router.back();
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 공정 코드 표시
|
|||
|
|
const getProcessCode = (type: ProcessType) => {
|
|||
|
|
const codes: Record<ProcessType, string> = {
|
|||
|
|
screen: 'P-001 | 작업일지: WL-SCR',
|
|||
|
|
slat: 'P-002 | 작업일지: WL-SLT',
|
|||
|
|
bending: 'P-003 | 작업일지: WL-FLD',
|
|||
|
|
};
|
|||
|
|
return codes[type];
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<PageLayout>
|
|||
|
|
{/* 헤더 */}
|
|||
|
|
<div className="flex items-center justify-between mb-6">
|
|||
|
|
<div className="flex items-center gap-3">
|
|||
|
|
<Button variant="ghost" size="icon" onClick={handleCancel}>
|
|||
|
|
<ArrowLeft className="w-5 h-5" />
|
|||
|
|
</Button>
|
|||
|
|
<h1 className="text-2xl font-bold flex items-center gap-2">
|
|||
|
|
<FileText className="w-5 h-5" />
|
|||
|
|
작업지시 등록
|
|||
|
|
</h1>
|
|||
|
|
</div>
|
|||
|
|
<div className="flex items-center gap-2">
|
|||
|
|
<Button variant="outline" onClick={handleCancel}>
|
|||
|
|
취소
|
|||
|
|
</Button>
|
|||
|
|
<Button onClick={handleSubmit}>
|
|||
|
|
등록
|
|||
|
|
</Button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="space-y-6">
|
|||
|
|
{/* Validation 에러 표시 */}
|
|||
|
|
{Object.keys(validationErrors).length > 0 && (
|
|||
|
|
<Alert className="bg-red-50 border-red-200">
|
|||
|
|
<AlertDescription className="text-red-900">
|
|||
|
|
<div className="flex items-start gap-2">
|
|||
|
|
<span className="text-lg">⚠️</span>
|
|||
|
|
<div className="flex-1">
|
|||
|
|
<strong className="block mb-2">
|
|||
|
|
입력 내용을 확인해주세요 ({Object.keys(validationErrors).length}개 오류)
|
|||
|
|
</strong>
|
|||
|
|
<ul className="space-y-1 text-sm">
|
|||
|
|
{Object.entries(validationErrors).map(([field, message]) => {
|
|||
|
|
const fieldName = FIELD_NAME_MAP[field] || field;
|
|||
|
|
return (
|
|||
|
|
<li key={field} className="flex items-start gap-1">
|
|||
|
|
<span>•</span>
|
|||
|
|
<span>
|
|||
|
|
<strong>{fieldName}</strong>: {message}
|
|||
|
|
</span>
|
|||
|
|
</li>
|
|||
|
|
);
|
|||
|
|
})}
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</AlertDescription>
|
|||
|
|
</Alert>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{/* 등록 방식 */}
|
|||
|
|
<section className="bg-white border rounded-lg p-6">
|
|||
|
|
<h3 className="font-semibold mb-4">등록 방식</h3>
|
|||
|
|
<RadioGroup
|
|||
|
|
value={mode}
|
|||
|
|
onValueChange={(value) => setMode(value as RegistrationMode)}
|
|||
|
|
className="flex gap-6"
|
|||
|
|
>
|
|||
|
|
<div className="flex items-center space-x-2">
|
|||
|
|
<RadioGroupItem value="linked" id="linked" />
|
|||
|
|
<Label htmlFor="linked" className="cursor-pointer">
|
|||
|
|
수주 연동 등록{' '}
|
|||
|
|
<span className="text-muted-foreground text-sm">
|
|||
|
|
(회계확인 완료된 수주에서 불러오기)
|
|||
|
|
</span>
|
|||
|
|
</Label>
|
|||
|
|
</div>
|
|||
|
|
<div className="flex items-center space-x-2">
|
|||
|
|
<RadioGroupItem value="manual" id="manual" />
|
|||
|
|
<Label htmlFor="manual" className="cursor-pointer">
|
|||
|
|
수동 등록{' '}
|
|||
|
|
<span className="text-muted-foreground text-sm">
|
|||
|
|
(수주 없이 직접 입력)
|
|||
|
|
</span>
|
|||
|
|
</Label>
|
|||
|
|
</div>
|
|||
|
|
</RadioGroup>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
{/* 수주 정보 (연동 모드) */}
|
|||
|
|
{mode === 'linked' && (
|
|||
|
|
<section className="bg-muted/30 border rounded-lg p-6">
|
|||
|
|
<h3 className="font-semibold mb-4">수주 정보</h3>
|
|||
|
|
{!formData.selectedOrder ? (
|
|||
|
|
<div className="flex items-center justify-between p-4 bg-white border rounded-lg">
|
|||
|
|
<div className="flex items-center gap-3">
|
|||
|
|
<FileText className="w-5 h-5 text-muted-foreground" />
|
|||
|
|
<div>
|
|||
|
|
<p className="font-medium">수주에서 불러오기</p>
|
|||
|
|
<p className="text-sm text-muted-foreground">
|
|||
|
|
회계확인 완료된 수주를 선택하면 정보가 자동으로 채워집니다
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<Button variant="outline" onClick={() => setIsModalOpen(true)}>
|
|||
|
|
<FileText className="w-4 h-4 mr-1.5" />
|
|||
|
|
수주 선택
|
|||
|
|
</Button>
|
|||
|
|
</div>
|
|||
|
|
) : (
|
|||
|
|
<div className="p-4 bg-white border rounded-lg">
|
|||
|
|
<div className="flex items-start justify-between mb-4">
|
|||
|
|
<div>
|
|||
|
|
<div className="flex items-center gap-2 mb-1">
|
|||
|
|
<span className="font-semibold">{formData.selectedOrder.orderNo}</span>
|
|||
|
|
<span className="text-sm text-muted-foreground">
|
|||
|
|
{formData.selectedOrder.status}에서 불러옴
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
<p className="text-sm text-muted-foreground">
|
|||
|
|
{formData.selectedOrder.client} / {formData.selectedOrder.projectName} / {formData.selectedOrder.itemCount}개 품목
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
<div className="flex items-center gap-2">
|
|||
|
|
<Button variant="ghost" size="sm" onClick={handleClearOrder}>
|
|||
|
|
<X className="w-4 h-4 mr-1" />
|
|||
|
|
해제
|
|||
|
|
</Button>
|
|||
|
|
<Button variant="outline" size="sm" onClick={() => setIsModalOpen(true)}>
|
|||
|
|
<Edit2 className="w-4 h-4 mr-1" />
|
|||
|
|
변경
|
|||
|
|
</Button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* 분할 선택 */}
|
|||
|
|
<div className="pt-4 border-t">
|
|||
|
|
<h4 className="text-sm font-medium mb-2">분할 선택</h4>
|
|||
|
|
<RadioGroup
|
|||
|
|
value={formData.splitOption}
|
|||
|
|
onValueChange={(value) =>
|
|||
|
|
setFormData({ ...formData, splitOption: value as 'all' | 'partial' })
|
|||
|
|
}
|
|||
|
|
className="flex gap-4"
|
|||
|
|
>
|
|||
|
|
<div className="flex items-center space-x-2">
|
|||
|
|
<RadioGroupItem value="all" id="split-all" />
|
|||
|
|
<Label htmlFor="split-all" className="cursor-pointer">
|
|||
|
|
전체 품목
|
|||
|
|
</Label>
|
|||
|
|
</div>
|
|||
|
|
<div className="flex items-center space-x-2">
|
|||
|
|
<RadioGroupItem value="partial" id="split-partial" />
|
|||
|
|
<Label htmlFor="split-partial" className="cursor-pointer">
|
|||
|
|
{formData.selectedOrder.orderNo}-01
|
|||
|
|
</Label>
|
|||
|
|
</div>
|
|||
|
|
</RadioGroup>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</section>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{/* 기본 정보 */}
|
|||
|
|
<section className="bg-muted/30 border rounded-lg p-6">
|
|||
|
|
<h3 className="font-semibold mb-4">기본 정보</h3>
|
|||
|
|
<div className="grid grid-cols-2 gap-4">
|
|||
|
|
<div className="space-y-2">
|
|||
|
|
<Label>발주처 *</Label>
|
|||
|
|
<Input
|
|||
|
|
value={formData.client}
|
|||
|
|
onChange={(e) => setFormData({ ...formData, client: e.target.value })}
|
|||
|
|
placeholder={mode === 'linked' ? '수주를 선택하면 자동 입력됩니다' : '발주처 입력'}
|
|||
|
|
disabled={mode === 'linked'}
|
|||
|
|
className="bg-white"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div className="space-y-2">
|
|||
|
|
<Label>현장명 *</Label>
|
|||
|
|
<Input
|
|||
|
|
value={formData.projectName}
|
|||
|
|
onChange={(e) => setFormData({ ...formData, projectName: e.target.value })}
|
|||
|
|
placeholder={mode === 'linked' ? '수주를 선택하면 자동 입력됩니다' : '현장명 입력'}
|
|||
|
|
disabled={mode === 'linked'}
|
|||
|
|
className="bg-white"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div className="space-y-2">
|
|||
|
|
<Label>수주번호</Label>
|
|||
|
|
<Input
|
|||
|
|
value={formData.orderNo}
|
|||
|
|
onChange={(e) => setFormData({ ...formData, orderNo: e.target.value })}
|
|||
|
|
placeholder={mode === 'linked' ? '수주를 선택하면 자동 입력됩니다' : '수주번호 입력'}
|
|||
|
|
disabled={mode === 'linked'}
|
|||
|
|
className="bg-white"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div className="space-y-2">
|
|||
|
|
<Label>품목수</Label>
|
|||
|
|
<Input
|
|||
|
|
value={formData.itemCount || ''}
|
|||
|
|
onChange={(e) => setFormData({ ...formData, itemCount: parseInt(e.target.value) || 0 })}
|
|||
|
|
placeholder={mode === 'linked' ? '수주를 선택하면 자동 입력됩니다' : '품목수 입력'}
|
|||
|
|
disabled={mode === 'linked'}
|
|||
|
|
className="bg-white"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
{/* 작업지시 정보 */}
|
|||
|
|
<section className="bg-muted/30 border rounded-lg p-6">
|
|||
|
|
<h3 className="font-semibold mb-4">작업지시 정보</h3>
|
|||
|
|
<div className="space-y-4">
|
|||
|
|
<div className="space-y-2">
|
|||
|
|
<Label>공정구분 *</Label>
|
|||
|
|
<Select
|
|||
|
|
value={formData.processType}
|
|||
|
|
onValueChange={(value) => setFormData({ ...formData, processType: value as ProcessType })}
|
|||
|
|
>
|
|||
|
|
<SelectTrigger className="bg-white">
|
|||
|
|
<SelectValue />
|
|||
|
|
</SelectTrigger>
|
|||
|
|
<SelectContent>
|
|||
|
|
{Object.entries(PROCESS_TYPE_LABELS).map(([key, label]) => (
|
|||
|
|
<SelectItem key={key} value={key}>
|
|||
|
|
{label}
|
|||
|
|
</SelectItem>
|
|||
|
|
))}
|
|||
|
|
</SelectContent>
|
|||
|
|
</Select>
|
|||
|
|
<p className="text-xs text-muted-foreground">
|
|||
|
|
공정코드: {getProcessCode(formData.processType)}
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="space-y-2">
|
|||
|
|
<Label>출고예정일 *</Label>
|
|||
|
|
<Input
|
|||
|
|
type="date"
|
|||
|
|
value={formData.shipmentDate}
|
|||
|
|
onChange={(e) => setFormData({ ...formData, shipmentDate: e.target.value })}
|
|||
|
|
className="bg-white"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="space-y-2">
|
|||
|
|
<Label>우선순위 (1=긴급, 9=낮음)</Label>
|
|||
|
|
<Select
|
|||
|
|
value={formData.priority.toString()}
|
|||
|
|
onValueChange={(value) => setFormData({ ...formData, priority: parseInt(value) })}
|
|||
|
|
>
|
|||
|
|
<SelectTrigger className="bg-white">
|
|||
|
|
<SelectValue />
|
|||
|
|
</SelectTrigger>
|
|||
|
|
<SelectContent>
|
|||
|
|
{[1, 2, 3, 4, 5, 6, 7, 8, 9].map((n) => (
|
|||
|
|
<SelectItem key={n} value={n.toString()}>
|
|||
|
|
{n} {n === 5 ? '(일반)' : n === 1 ? '(긴급)' : ''}
|
|||
|
|
</SelectItem>
|
|||
|
|
))}
|
|||
|
|
</SelectContent>
|
|||
|
|
</Select>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="space-y-2">
|
|||
|
|
<Label>담당자 (다중선택 가능)</Label>
|
|||
|
|
<div
|
|||
|
|
onClick={() => setIsAssigneeModalOpen(true)}
|
|||
|
|
className="flex min-h-10 w-full cursor-pointer items-center rounded-md border border-input bg-white px-3 py-2 text-sm ring-offset-background hover:bg-accent/50"
|
|||
|
|
>
|
|||
|
|
{assigneeNames.length > 0 ? (
|
|||
|
|
<span>{assigneeNames.join(', ')}</span>
|
|||
|
|
) : (
|
|||
|
|
<span className="text-muted-foreground">담당자를 선택하세요 (팀/개인)</span>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
{/* 비고 */}
|
|||
|
|
<section className="bg-muted/30 border rounded-lg p-6">
|
|||
|
|
<h3 className="font-semibold mb-4">비고</h3>
|
|||
|
|
<Textarea
|
|||
|
|
value={formData.note}
|
|||
|
|
onChange={(e) => setFormData({ ...formData, note: e.target.value })}
|
|||
|
|
placeholder="특이사항이나 메모를 입력하세요"
|
|||
|
|
rows={4}
|
|||
|
|
className="bg-white"
|
|||
|
|
/>
|
|||
|
|
</section>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* 수주 선택 모달 */}
|
|||
|
|
<SalesOrderSelectModal
|
|||
|
|
open={isModalOpen}
|
|||
|
|
onOpenChange={setIsModalOpen}
|
|||
|
|
onSelect={handleSelectOrder}
|
|||
|
|
/>
|
|||
|
|
|
|||
|
|
{/* 담당자 선택 모달 */}
|
|||
|
|
<AssigneeSelectModal
|
|||
|
|
open={isAssigneeModalOpen}
|
|||
|
|
onOpenChange={setIsAssigneeModalOpen}
|
|||
|
|
selectedIds={formData.assignees}
|
|||
|
|
onSelect={(ids, names) => {
|
|||
|
|
setFormData({ ...formData, assignees: ids });
|
|||
|
|
setAssigneeNames(names);
|
|||
|
|
}}
|
|||
|
|
/>
|
|||
|
|
</PageLayout>
|
|||
|
|
);
|
|||
|
|
}
|