180 lines
6.7 KiB
Markdown
180 lines
6.7 KiB
Markdown
# 입출고관리 화면 구현 가이드
|
|
|
|
> **화면명**: 입출고관리
|
|
> **파일**: 입출고관리.html
|
|
> **분류**: 물류관리
|
|
> **구현 가능**: ⚠️ 부분 (그룹화 테이블 필요)
|
|
|
|
---
|
|
|
|
## 1. 화면 개요
|
|
|
|
자재/제품의 입고 및 출고 내역을 통합 관리하는 화면입니다.
|
|
|
|
### 핵심 기능
|
|
- 입출고 내역 조회/검색
|
|
- 그룹화 기능 (입출고구분, 창고, 카테고리별)
|
|
- 엑셀 업로드/다운로드
|
|
|
|
---
|
|
|
|
## 2. 화면 레이아웃
|
|
|
|
```
|
|
┌─────────────────────────────────────────────────────────────────┐
|
|
│ [입출고구분▼][카테고리▼][창고▼][품목코드][품목명][기간][초기화][검색]│
|
|
│ [사용자옵션][업로드][다운로드]│
|
|
├─────────────────────────────────────────────────────────────────┤
|
|
│ 📋 입출고 내역 전체 150건 │
|
|
│ ───────────────────────────────────────────────────────────── │
|
|
│ Group by: [입출고구분▼] │
|
|
│ ───────────────────────────────────────────────────────────── │
|
|
│ │▼ 입고 (80) │
|
|
│ │ │IN-001|구매입고|2026-01-30|본사창고|P-001|원자재A|100|KG │
|
|
│ │ │IN-002|생산입고|2026-01-30|제1창고|P-002|제품A |50 |EA │
|
|
│ │▼ 출고 (70) │
|
|
│ │ │OUT-001|판매출고|2026-01-30|본사창고|P-003|제품B|30|EA │
|
|
└─────────────────────────────────────────────────────────────────┘
|
|
```
|
|
|
|
---
|
|
|
|
## 3. V2 컴포넌트 매핑
|
|
|
|
| HTML 영역 | V2 컴포넌트 | 상태 |
|
|
|-----------|-------------|------|
|
|
| 검색 섹션 | `v2-table-search-widget` | ✅ 가능 |
|
|
| 입출고 목록 (그룹화) | `v2-table-list` | ⚠️ 그룹화 미지원 |
|
|
|
|
---
|
|
|
|
## 4. 테이블 정의
|
|
|
|
```typescript
|
|
columns: [
|
|
{ id: 'checkbox', type: 'checkbox', width: 50 },
|
|
{ id: 'inout_type', label: '입출고구분', width: 100 },
|
|
{ id: 'category', label: '카테고리', width: 120 },
|
|
{ id: 'doc_no', label: '전표번호', width: 120 },
|
|
{ id: 'process_date', label: '처리일자', width: 100 },
|
|
{ id: 'warehouse', label: '창고', width: 120 },
|
|
{ id: 'location', label: '위치', width: 100 },
|
|
{ id: 'item_code', label: '품목코드', width: 120 },
|
|
{ id: 'item_name', label: '품목명', width: 200 },
|
|
{ id: 'quantity', label: '수량', width: 100, align: 'right' },
|
|
{ id: 'unit', label: '단위', width: 60 },
|
|
{ id: 'lot_no', label: '로트번호', width: 120 },
|
|
{ id: 'customer', label: '거래처', width: 120 },
|
|
{ id: 'manager', label: '담당자', width: 100 },
|
|
{ id: 'remark', label: '비고', width: 200 }
|
|
]
|
|
```
|
|
|
|
---
|
|
|
|
## 5. 검색 조건
|
|
|
|
| 필드명 | 컴포넌트 | 옵션 |
|
|
|--------|----------|------|
|
|
| 입출고구분 | `v2-select` | 입고, 출고 |
|
|
| 카테고리 | `v2-select` | 구매입고, 생산입고, 반품입고, 판매출고, 생산출고 등 |
|
|
| 창고 | `v2-select` | 본사창고, 제1창고, 제2창고 |
|
|
| 품목코드 | `v2-input` | - |
|
|
| 품목명 | `v2-input` | - |
|
|
| 기간 | `v2-date` | dateRange: true |
|
|
|
|
---
|
|
|
|
## 6. 그룹화 기능 (v2-grouped-table 필요)
|
|
|
|
```typescript
|
|
groupByOptions: [
|
|
{ id: 'inout_type', label: '입출고구분' },
|
|
{ id: 'category', label: '카테고리' },
|
|
{ id: 'warehouse', label: '창고' },
|
|
{ id: 'item_code', label: '품목코드' },
|
|
{ id: 'process_date', label: '처리일자' },
|
|
{ id: 'customer', label: '거래처' }
|
|
]
|
|
```
|
|
|
|
---
|
|
|
|
## 7. 현재 구현 가능 범위
|
|
|
|
### ✅ 가능
|
|
- 검색 영역
|
|
- 일반 테이블 목록
|
|
|
|
### ⚠️ 부분 가능
|
|
- 그룹화 없이 필터로 대체
|
|
|
|
### ❌ 불가능
|
|
- 동적 그룹화
|
|
|
|
---
|
|
|
|
## 8. 간소화 구현 JSON
|
|
|
|
```json
|
|
{
|
|
"screen_code": "INOUT_MAIN",
|
|
"screen_name": "입출고관리",
|
|
"components": [
|
|
{
|
|
"type": "v2-table-search-widget",
|
|
"position": { "x": 0, "y": 0, "w": 12, "h": 2 },
|
|
"config": {
|
|
"searchFields": [
|
|
{ "type": "select", "id": "inout_type", "placeholder": "입출고구분",
|
|
"options": [
|
|
{ "value": "IN", "label": "입고" },
|
|
{ "value": "OUT", "label": "출고" }
|
|
]
|
|
},
|
|
{ "type": "select", "id": "category", "placeholder": "카테고리",
|
|
"options": [
|
|
{ "value": "purchase", "label": "구매입고" },
|
|
{ "value": "production_in", "label": "생산입고" },
|
|
{ "value": "return_in", "label": "반품입고" },
|
|
{ "value": "sales", "label": "판매출고" },
|
|
{ "value": "production_out", "label": "생산출고" }
|
|
]
|
|
},
|
|
{ "type": "select", "id": "warehouse", "placeholder": "창고" },
|
|
{ "type": "input", "id": "item_code", "placeholder": "품목코드" },
|
|
{ "type": "input", "id": "item_name", "placeholder": "품목명" },
|
|
{ "type": "date", "id": "date_range", "placeholder": "처리일자", "dateRange": true }
|
|
],
|
|
"buttons": [
|
|
{ "label": "초기화", "action": "reset" },
|
|
{ "label": "검색", "action": "search", "variant": "primary" }
|
|
]
|
|
}
|
|
},
|
|
{
|
|
"type": "v2-table-list",
|
|
"position": { "x": 0, "y": 2, "w": 12, "h": 10 },
|
|
"config": {
|
|
"title": "입출고 내역",
|
|
"entityId": "inventory_transaction",
|
|
"showTotalCount": true,
|
|
"columns": [
|
|
{ "id": "inout_type", "label": "입출고구분", "width": 100 },
|
|
{ "id": "category", "label": "카테고리", "width": 120 },
|
|
{ "id": "doc_no", "label": "전표번호", "width": 120 },
|
|
{ "id": "process_date", "label": "처리일자", "width": 100 },
|
|
{ "id": "warehouse", "label": "창고", "width": 120 },
|
|
{ "id": "item_code", "label": "품목코드", "width": 120 },
|
|
{ "id": "item_name", "label": "품목명", "width": 200 },
|
|
{ "id": "quantity", "label": "수량", "width": 100, "align": "right" },
|
|
{ "id": "unit", "label": "단위", "width": 60 }
|
|
]
|
|
}
|
|
}
|
|
]
|
|
}
|
|
```
|
|
|
|
**v2-grouped-table 개발 시 그룹화 기능 추가 가능**
|