ERP-node/docs/screen-implementation-guide/03_production/work-order.md

작업지시 화면 구현 가이드

화면명: 작업지시 파일: 작업지시.html 분류: 생산관리 구현 가능: ⚠️ 부분 (그룹화 테이블 필요)

---

1. 화면 개요

생산계획을 기반으로 작업지시를 생성하고 관리하는 화면입니다.

핵심 기능

• 작업지시 목록 조회 (탭별 구분)
• 그룹화 기능 (작업일자, 공정별)
• 작업지시 생성/수정/삭제
• 작업지시서 인쇄
• 실적 연계

---

2. 화면 레이아웃

┌─────────────────────────────────────────────────────────────────┐
│ [기간] [품목] [공정] [작업상태▼] [초기화][조회] [사용자옵션][엑셀] │
├─────────────────────────────────────────────────────────────────┤
│ [전체] [대기] [진행중] [완료] [지연]                             │
├───────────────────────┬─────────────────────────────────────────┤
│ 📋 작업지시 목록        │ 📄 작업지시 상세                        │
│ ───────────────       │ [인쇄] [시작] [완료] [수정] [삭제]       │
│ Group by: [작업일자▼]  │ ─────────────────────────               │
│ ┌──────────────────┐  │ 지시번호: WO-2026-0001                  │
│ │▼ 2026-01-30 (5)  │  │ 품목명: 제품A                           │
│ │  WO-001|제품A|대기│  │ 지시수량: 100 EA                        │
│ │  WO-002|제품B|진행│  ├─────────────────────────────────────────┤
│ │▼ 2026-01-31 (3)  │  │ [자재투입] [공정현황] [실적현황]         │
│ │  WO-003|제품C|대기│  │ ───────────────────────────              │
│ └──────────────────┘  │ [투입자재 테이블]                        │
└───────────────────────┴─────────────────────────────────────────┘

---

3. V2 컴포넌트 매핑

HTML 영역	V2 컴포넌트	상태
검색 섹션	v2-table-search-widget	✅ 가능
상태 탭	v2-tabs-widget	✅ 가능
작업지시 목록 (그룹화)	v2-table-list	⚠️ 그룹화 미지원
분할 패널	v2-split-panel-layout	✅ 가능
상세 탭	v2-tabs-widget	✅ 가능

---

4. 테이블 정의

4.1 작업지시 목록

columns: [
  { id: 'checkbox', type: 'checkbox', width: 50 },
  { id: 'work_order_no', label: '지시번호', width: 120 },
  { id: 'work_date', label: '작업일', width: 100 },
  { id: 'item_code', label: '품목코드', width: 100 },
  { id: 'item_name', label: '품목명', width: 200 },
  { id: 'order_qty', label: '지시수량', width: 100, align: 'right' },
  { id: 'prod_qty', label: '생산수량', width: 100, align: 'right' },
  { id: 'process_name', label: '공정', width: 100 },
  { id: 'status', label: '상태', width: 80 },
  { id: 'worker', label: '작업자', width: 100 }
]

4.2 자재투입 탭

materialColumns: [
  { id: 'item_code', label: '품목코드', width: 100 },
  { id: 'item_name', label: '품목명', width: 200 },
  { id: 'required_qty', label: '소요량', width: 100, align: 'right' },
  { id: 'issued_qty', label: '투입량', width: 100, align: 'right' },
  { id: 'unit', label: '단위', width: 60 },
  { id: 'warehouse', label: '출고창고', width: 100 }
]

---

5. 상태 탭

statusTabs: [
  { id: 'all', label: '전체', count: 25 },
  { id: 'waiting', label: '대기', count: 10 },
  { id: 'progress', label: '진행중', count: 8 },
  { id: 'completed', label: '완료', count: 5 },
  { id: 'delayed', label: '지연', count: 2 }
]

---

6. 그룹화 기능 (v2-grouped-table 필요)

groupByOptions: [
  { id: 'work_date', label: '작업일자' },
  { id: 'process_name', label: '공정' },
  { id: 'item_type', label: '품목구분' }
]

---

7. 현재 구현 가능 범위

✅ 가능

• 검색 영역
• 상태 탭 전환
• 분할 패널
• 상세 탭
• 자재투입/공정현황/실적현황 테이블

⚠️ 부분 가능

• 작업지시 목록: 그룹화 없이 일반 테이블

❌ 불가능

• 동적 그룹화

---

8. 구현 JSON

{
  "screen_code": "WORK_ORDER_MAIN",
  "screen_name": "작업지시",
  "components": [
    {
      "type": "v2-table-search-widget",
      "position": { "x": 0, "y": 0, "w": 12, "h": 1 },
      "config": {
        "searchFields": [
          { "type": "date", "id": "date_range", "placeholder": "기간", "dateRange": true },
          { "type": "input", "id": "item_name", "placeholder": "품목명" },
          { "type": "select", "id": "process", "placeholder": "공정" },
          { "type": "select", "id": "status", "placeholder": "상태" }
        ]
      }
    },
    {
      "type": "v2-tabs-widget",
      "position": { "x": 0, "y": 1, "w": 12, "h": 11 },
      "config": {
        "tabs": [
          { "id": "all", "label": "전체" },
          { "id": "waiting", "label": "대기" },
          { "id": "progress", "label": "진행중" },
          { "id": "completed", "label": "완료" },
          { "id": "delayed", "label": "지연" }
        ],
        "tabContent": {
          "type": "v2-split-panel-layout",
          "config": {
            "masterPanel": {
              "title": "작업지시 목록",
              "entityId": "work_order",
              "columns": [
                { "id": "work_order_no", "label": "지시번호" },
                { "id": "work_date", "label": "작업일" },
                { "id": "item_name", "label": "품목명" },
                { "id": "order_qty", "label": "지시수량" },
                { "id": "status", "label": "상태" }
              ]
            },
            "detailPanel": {
              "tabs": [
                { "id": "material", "label": "자재투입", "entityId": "work_order_material" },
                { "id": "process", "label": "공정현황", "entityId": "work_order_process" },
                { "id": "result", "label": "실적현황", "entityId": "work_order_result" }
              ]
            }
          }
        }
      }
    }
  ]
}

v2-grouped-table 개발 시 재활용 가능