257 lines
8.3 KiB
Markdown
257 lines
8.3 KiB
Markdown
# 거래처관리 화면 구현 가이드
|
|
|
|
> **화면명**: 거래처관리
|
|
> **파일**: 거래처관리.html
|
|
> **분류**: 영업관리
|
|
> **구현 가능**: ⚠️ 부분 (그룹화 테이블 필요)
|
|
|
|
---
|
|
|
|
## 1. 화면 개요
|
|
|
|
고객사 및 공급업체 정보를 통합 관리하는 화면입니다.
|
|
|
|
### 핵심 기능
|
|
- 거래처 목록 조회/검색
|
|
- 그룹화 기능 (거래처유형, 지역별)
|
|
- 거래처 등록/수정/삭제
|
|
- 거래처별 품목코드/단가 관리
|
|
- 담당자 정보 관리
|
|
|
|
---
|
|
|
|
## 2. 화면 레이아웃
|
|
|
|
```
|
|
┌─────────────────────────────────────────────────────────────────┐
|
|
│ [거래처코드] [거래처명] [거래처유형▼] [사용여부▼] [초기화][조회] │
|
|
│ [사용자옵션][업로드][다운로드]│
|
|
├───────────────────────┬─────────────────────────────────────────┤
|
|
│ 📋 거래처 목록 │ [기본정보][품목코드][단가정보][담당자] │
|
|
│ ───────────────── │ ───────────────────────────────────── │
|
|
│ Group by: [거래처유형▼] │ 거래처코드: C-001 │
|
|
│ ┌──────────────────┐ │ 거래처명: (주)테스트 │
|
|
│ │▼ 고객사 (15) │ │ 사업자번호: 123-45-67890 │
|
|
│ │ C-001 | A사 │ │ 대표자: 홍길동 │
|
|
│ │ C-002 | B사 │ ├─────────────────────────────────────────┤
|
|
│ │▼ 공급업체 (8) │ │ [품목코드 탭 내용] │
|
|
│ │ S-001 | 원자재사 │ │ ┌────────────────────────────────┐ │
|
|
│ └──────────────────┘ │ │거래처품목코드|품목명|자사품목코드│ │
|
|
│ │ │CP-001 |원료A |M-001 │ │
|
|
│ 리사이저 ↔ │ └────────────────────────────────┘ │
|
|
└───────────────────────┴─────────────────────────────────────────┘
|
|
```
|
|
|
|
---
|
|
|
|
## 3. V2 컴포넌트 매핑
|
|
|
|
| HTML 영역 | V2 컴포넌트 | 상태 |
|
|
|-----------|-------------|------|
|
|
| 검색 섹션 | `v2-table-search-widget` | ✅ 가능 |
|
|
| 거래처 목록 (그룹화) | `v2-table-list` | ⚠️ 그룹화 미지원 |
|
|
| 분할 패널 | `v2-split-panel-layout` | ✅ 가능 |
|
|
| 상세 탭 | `v2-tabs-widget` | ✅ 가능 |
|
|
|
|
---
|
|
|
|
## 4. 테이블 정의
|
|
|
|
### 4.1 거래처 목록
|
|
|
|
```typescript
|
|
columns: [
|
|
{ id: 'checkbox', type: 'checkbox', width: 50 },
|
|
{ id: 'customer_code', label: '거래처코드', width: 100 },
|
|
{ id: 'customer_name', label: '거래처명', width: 200 },
|
|
{ id: 'customer_type', label: '거래처유형', width: 100 },
|
|
{ id: 'business_no', label: '사업자번호', width: 120 },
|
|
{ id: 'ceo_name', label: '대표자', width: 100 },
|
|
{ id: 'tel', label: '전화번호', width: 120 },
|
|
{ id: 'status', label: '사용여부', width: 80 }
|
|
]
|
|
```
|
|
|
|
### 4.2 품목코드 탭
|
|
|
|
```typescript
|
|
itemCodeColumns: [
|
|
{ id: 'customer_item_code', label: '거래처품목코드', width: 150 },
|
|
{ id: 'item_name', label: '품목명', width: 200 },
|
|
{ id: 'our_item_code', label: '자사품목코드', width: 150 },
|
|
{ id: 'spec', label: '규격', width: 150 }
|
|
]
|
|
```
|
|
|
|
### 4.3 단가정보 탭
|
|
|
|
```typescript
|
|
priceColumns: [
|
|
{ id: 'item_code', label: '품목코드', width: 120 },
|
|
{ id: 'item_name', label: '품목명', width: 200 },
|
|
{ id: 'unit_price', label: '단가', width: 100, format: 'currency' },
|
|
{ id: 'currency', label: '통화', width: 60 },
|
|
{ id: 'apply_date', label: '적용일', width: 100 },
|
|
{ id: 'remark', label: '비고', width: 150 }
|
|
]
|
|
```
|
|
|
|
---
|
|
|
|
## 5. 그룹화 기능 (신규 컴포넌트 필요)
|
|
|
|
### 5.1 그룹화 옵션
|
|
|
|
```typescript
|
|
groupByOptions: [
|
|
{ id: 'customer_type', label: '거래처유형' },
|
|
{ id: 'region', label: '지역' },
|
|
{ id: 'status', label: '사용여부' }
|
|
]
|
|
```
|
|
|
|
### 5.2 그룹 헤더 표시
|
|
|
|
```
|
|
▼ 고객사 (15) ← 그룹명 + 건수
|
|
│ C-001 │ (주)A사 │ ...
|
|
│ C-002 │ (주)B사 │ ...
|
|
▼ 공급업체 (8)
|
|
│ S-001 │ 원자재사 │ ...
|
|
```
|
|
|
|
### 5.3 필요 인터랙션
|
|
|
|
- 그룹 접기/펼치기
|
|
- 그룹 전체 선택 체크박스
|
|
- 다중 그룹핑 (선택)
|
|
|
|
---
|
|
|
|
## 6. 탭 구성
|
|
|
|
```typescript
|
|
tabs: [
|
|
{
|
|
id: 'basic',
|
|
label: '기본정보',
|
|
fields: [
|
|
{ id: 'customer_code', label: '거래처코드' },
|
|
{ id: 'customer_name', label: '거래처명' },
|
|
{ id: 'customer_type', label: '거래처유형' },
|
|
{ id: 'business_no', label: '사업자번호' },
|
|
{ id: 'ceo_name', label: '대표자' },
|
|
{ id: 'address', label: '주소' },
|
|
{ id: 'tel', label: '전화번호' },
|
|
{ id: 'fax', label: '팩스' },
|
|
{ id: 'email', label: '이메일' }
|
|
]
|
|
},
|
|
{
|
|
id: 'item_codes',
|
|
label: '품목코드',
|
|
type: 'table',
|
|
entityId: 'customer_item_mapping'
|
|
},
|
|
{
|
|
id: 'prices',
|
|
label: '단가정보',
|
|
type: 'table',
|
|
entityId: 'customer_prices'
|
|
},
|
|
{
|
|
id: 'contacts',
|
|
label: '담당자',
|
|
type: 'table',
|
|
entityId: 'customer_contacts'
|
|
}
|
|
]
|
|
```
|
|
|
|
---
|
|
|
|
## 7. 현재 구현 가능 범위
|
|
|
|
### ✅ 가능
|
|
- 검색 영역
|
|
- 분할 패널 레이아웃
|
|
- 상세 탭
|
|
- 품목코드/단가/담당자 테이블
|
|
|
|
### ⚠️ 부분 가능
|
|
- 거래처 목록: 그룹화 없이 일반 테이블로 구현
|
|
|
|
### ❌ 불가능
|
|
- 동적 그룹화 (그룹 접기/펼치기)
|
|
|
|
---
|
|
|
|
## 8. 간소화 구현 JSON (그룹화 제외)
|
|
|
|
```json
|
|
{
|
|
"screen_code": "CUSTOMER_MAIN",
|
|
"screen_name": "거래처관리",
|
|
"components": [
|
|
{
|
|
"type": "v2-table-search-widget",
|
|
"config": {
|
|
"searchFields": [
|
|
{ "type": "input", "id": "customer_code", "placeholder": "거래처코드" },
|
|
{ "type": "input", "id": "customer_name", "placeholder": "거래처명" },
|
|
{ "type": "select", "id": "customer_type", "placeholder": "거래처유형",
|
|
"options": [
|
|
{ "value": "customer", "label": "고객사" },
|
|
{ "value": "supplier", "label": "공급업체" },
|
|
{ "value": "both", "label": "고객사/공급업체" }
|
|
]
|
|
},
|
|
{ "type": "select", "id": "status", "placeholder": "사용여부" }
|
|
]
|
|
}
|
|
},
|
|
{
|
|
"type": "v2-split-panel-layout",
|
|
"config": {
|
|
"masterPanel": {
|
|
"title": "거래처 목록",
|
|
"entityId": "customer_master",
|
|
"columns": [
|
|
{ "id": "customer_code", "label": "거래처코드", "width": 100 },
|
|
{ "id": "customer_name", "label": "거래처명", "width": 200 },
|
|
{ "id": "customer_type", "label": "거래처유형", "width": 100 },
|
|
{ "id": "ceo_name", "label": "대표자", "width": 100 }
|
|
]
|
|
},
|
|
"detailPanel": {
|
|
"tabs": [
|
|
{ "id": "basic", "label": "기본정보", "type": "form" },
|
|
{ "id": "items", "label": "품목코드", "type": "table", "entityId": "customer_items" },
|
|
{ "id": "prices", "label": "단가정보", "type": "table", "entityId": "customer_prices" },
|
|
{ "id": "contacts", "label": "담당자", "type": "table", "entityId": "customer_contacts" }
|
|
]
|
|
}
|
|
}
|
|
}
|
|
]
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
## 9. v2-grouped-table 개발 시 추가 구현
|
|
|
|
```typescript
|
|
// 그룹화 테이블 설정
|
|
groupedTableConfig: {
|
|
groupBy: 'customer_type',
|
|
groupByOptions: ['customer_type', 'region', 'status'],
|
|
showGroupCount: true,
|
|
expandAll: false,
|
|
groupCheckbox: true
|
|
}
|
|
```
|
|
|
|
**예상 재활용**: `v2-grouped-table`은 5개 이상 화면에서 사용 가능
|
|
- 거래처관리, 품목정보, 작업지시, 입출고관리, 견적관리
|