From 40251d2aaac91686acd6009f8899cc4d48c59c49 Mon Sep 17 00:00:00 2001 From: kjh2064 Date: Sat, 25 Jul 2026 20:33:48 +0900 Subject: [PATCH] feat(wbs-ux): add OMS/WMS/ERP quick transaction modals to SystemSettingsView --- src/frontend/src/views/SystemSettingsView.vue | 189 ++++++++++++++---- 1 file changed, 151 insertions(+), 38 deletions(-) diff --git a/src/frontend/src/views/SystemSettingsView.vue b/src/frontend/src/views/SystemSettingsView.vue index 1dbf557b..0536b064 100644 --- a/src/frontend/src/views/SystemSettingsView.vue +++ b/src/frontend/src/views/SystemSettingsView.vue @@ -39,8 +39,17 @@ const activeDomain = ref<'ALL' | 'OMS' | 'WMS' | 'ERP'>('ALL'); const searchKeyword = ref(''); const activeCategoryTab = ref('ALL'); -// 2. 동적 드래그 반응형 Split Pane Resizer & 1-Click 스플릿 프리셋 -const masterPanelWidth = ref(60); // 기본 60% +// 2. OMS / WMS / ERP 전용 퀵 트랜잭션 모달 상태 +const isOmsModalOpen = ref(false); +const isWmsModalOpen = ref(false); +const isErpModalOpen = ref(false); + +const omsOrderForm = ref({ symbol: '005930 (삼성전자)', orderType: 'LIMIT', price: '72,500', qty: '100' }); +const wmsVaultForm = ref({ fromAccount: 'D+2 Vault Main', toAccount: 'KIS Trading Account', amount: '50,000,000' }); +const erpApprovalForm = ref({ reqId: 'REQ-2026-0725', approver: 'risk_director_kjh', decision: 'APPROVED', comment: '리스크 가드 검토 승인 완료' }); + +// 3. 동적 드래그 반응형 Split Pane Resizer & 1-Click 스플릿 프리셋 +const masterPanelWidth = ref(60); const isDraggingSplitter = ref(false); const setSplitRatio = (percent: number) => { @@ -72,12 +81,12 @@ const stopSplitterDrag = () => { document.removeEventListener('mouseup', stopSplitterDrag); }; -// 3. Master-Detail 바인딩 및 편집 모드 토글 상태 +// 4. Master-Detail 바인딩 및 편집 모드 토글 상태 const items = ref([]); const selectedItem = ref(null); const isEditMode = ref(false); -// 4. 현장감 텔레메트리, 소켓, AI AX 코파일럿 상태 +// 5. 현장감 텔레메트리, 소켓, AI AX 코파일럿 상태 const pingMs = ref(4); const isBatchRunning = ref(false); const batchProgress = ref(0); @@ -91,12 +100,12 @@ const liveLogs = ref([ '[14:02:15] [WARN] WMS Vault Safety Check: D+2 Cash level 500,000,000 KRW OK' ]); -// 5. 페이지네이션 및 드롭다운 상태 +// 6. 페이지네이션 및 드롭다운 상태 const currentPage = ref(1); const showExportMenu = ref(false); const isGuideModalOpen = ref(false); -// 6. 토스트 알림 메시지 +// 7. 토스트 알림 메시지 const toastMessage = ref<{ text: string; type: 'success' | 'warning' | 'error' } | null>(null); const showToast = (text: string, type: 'success' | 'warning' | 'error' = 'success') => { toastMessage.value = { text, type }; @@ -105,7 +114,7 @@ const showToast = (text: string, type: 'success' | 'warning' | 'error' = 'succes }, 3000); }; -// 7. 모달 대화상자 상태 +// 8. 모달 대화상자 상태 const isModalOpen = ref(false); const modalItem = ref({ id: 0, @@ -120,7 +129,7 @@ const modalItem = ref({ maker_checker: 'APPROVED' }); -// 8. 필터링된 항목 계산 +// 9. 필터링된 항목 계산 const filteredItems = computed(() => { return items.value.filter(item => { const matchDomain = activeDomain.value === 'ALL' || item.domain === activeDomain.value; @@ -132,7 +141,7 @@ const filteredItems = computed(() => { }); }); -// 9. AG Grid 컬럼 정의 +// 10. AG Grid 컬럼 정의 const columnDefs = ref([ { field: 'id', headerName: 'ID', width: 55, sortable: true }, { field: 'domain', headerName: '도메인', width: 85, cellRenderer: (p: any) => `${p.value}` }, @@ -200,6 +209,24 @@ const runFactorBatch = () => { }, 300); }; +const submitOmsOrder = () => { + isOmsModalOpen.value = false; + liveLogs.value.unshift(`[${new Date().toLocaleTimeString()}] [OMS] Submitted Order: ${omsOrderForm.value.symbol} ${omsOrderForm.value.qty}개 (${omsOrderForm.value.price}원)`); + showToast(`📈 OMS 주문이 성공적으로 전송되었습니다 (${omsOrderForm.value.symbol}).`, 'success'); +}; + +const executeWmsTransfer = () => { + isWmsModalOpen.value = false; + liveLogs.value.unshift(`[${new Date().toLocaleTimeString()}] [WMS] Transferred ${wmsVaultForm.value.amount} KRW from ${wmsVaultForm.value.fromAccount}`); + showToast(`🏦 WMS 현금 이체가 완료되었습니다 (${wmsVaultForm.value.amount} KRW).`, 'success'); +}; + +const approveErpRequest = () => { + isErpModalOpen.value = false; + liveLogs.value.unshift(`[${new Date().toLocaleTimeString()}] [ERP] Request ${erpApprovalForm.value.reqId} approved by ${erpApprovalForm.value.approver}`); + showToast(`📑 ERP Maker-Checker 결재 승인이 완료되었습니다.`, 'success'); +}; + const applyAiRecommendation = () => { if (selectedItem.value) { selectedItem.value.setting_value = '68.5'; @@ -299,12 +326,19 @@ onMounted(loadData); 🟢 Live ({{ pingMs }}ms) 📡 SignalR Active - +
- - - - + + + + + + +
+ + + +
@@ -313,7 +347,7 @@ onMounted(loadData); - +
@@ -354,7 +388,6 @@ onMounted(loadData); -
✂️ 스플릿 비율: @@ -529,6 +562,63 @@ onMounted(loadData); ⚡ Hangfire Jobs: Healthy
+ +
+
+
+

📈 OMS 주문 전송 트랜잭션 Modal

+ +
+
+
+
+
+
+
+ + +
+
+
+ + +
+
+
+

🏦 WMS 자산/현금 이체 Vault Modal

+ +
+
+
+
+
+
+
+ + +
+
+
+ + +
+
+
+

📑 ERP Maker-Checker 결재 승인 Modal

+ +
+
+
+
+
+
+
+ + +
+
+
+
@@ -565,35 +655,37 @@ onMounted(loadData);
- +
-

💡 OMS / WMS / ERP / AX & 동적 스플릿 20대 컴포넌트 스펙

+

💡 OMS / WMS / ERP / AX & 스플릿 22대 컴포넌트 스펙

    -
  • 1. OMS 도메인 모듈: 주문/체결 Waterfall 우선순위 & 호가 스프레드 뷰er
    • -
  • 2. WMS 도메인 모듈: D+2 현금 볼트 안전율 & 포지션 사이징 가드
    • -
  • 3. ERP 도메인 모듈: 재무 회계 계정 맵핑 & Maker-Checker 승인 릴레이
    • -
  • 4. AI AX 코파일럿 배너: Antigravity AI 추천값 및 1-Click 자동 적용
    • -
  • 5. 물리적 동적 스플릿 바 (Draggable Resizer): 마우스 드래그 20%~80% 분할 조절
    • -
  • 6. 1-Click 스플릿 프리셋 바: 3:7 / 5:5 / 6:4 / 7:3 퀵 분할 조절 버튼
    • -
  • 7. Live PostgreSQL Ping 레이턴시 칩: 4ms 실시간 핑 상태
    • -
  • 8. SignalR WebSocket 소켓 칩: 라이브 소켓 연결 지표
    • -
  • 9. DbUp 마이그레이션 태그: DB 마이그레이션 태그 v2026.07.25
    • -
  • 10. 실시간 파이프라인 로그 터미널 창: 엔진 트랜잭션 스트리밍
    • -
  • 11. 비동기 배치 실행 & 진행률 바: 0~100% 모의 트랜잭션 게이지
    • -
  • 12. 낙관적 락 버전 인디케이터: 동시성 충돌 방지 v1~v5
    • -
  • 13. 실시간 텔레메트리 바: CPU/RAM/DB Pool 현장감 지표
    • -
  • 14. 검색 & 핫키 툴바: F3/F4/F5/F7 더존 표준 핫키
    • -
  • 15. 카테고리 탭 바: ALL/BUDGET/FACTOR/RISK/ACCOUNTING 탭
    • -
  • 16. AG Grid 데이터 테이블: 정렬, 필터, 단일 행 선택, Status Chips
    • -
  • 17. 페이지네이션 바: Page 1 of 1 건수 및 페이지 컨트롤러
    • -
  • 18. 더존 6대 표준 입력 마스크: Input, ComboBox, Radio, TextArea 등
    • -
  • 19. 읽기/편집 모드 토글: 👁️ 읽기 / ✏️ 편집 전환 스위치
    • -
  • 20. 감사 이력 타임라인 & 모달 & 엑셀 팝업: Audit Trail, Modal, Excel/CSV
    • +
  • 1. OMS 주문전송 팝업 모달: 종목/단가/수량 매수주문 팝업
    • +
  • 2. WMS 현금이체 팝업 모달: D+2 Vault 현금 출금이체 팝업
    • +
  • 3. ERP 결재승인 팝업 모달: Maker-Checker 최종 승인 팝업
    • +
  • 4. OMS 도메인 모듈: 주문/체결 Waterfall 우선순위 & 호가 뷰er
    • +
  • 5. WMS 도메인 모듈: D+2 현금 볼트 안전율 & 포지션 사이징 가드
    • +
  • 6. ERP 도메인 모듈: 재무 회계 계정 맵핑 & Maker-Checker 릴레이
    • +
  • 7. AI AX 코파일럿 배너: Antigravity AI 추천값 및 1-Click 자동 적용
    • +
  • 8. 물리적 동적 스플릿 바 (Draggable Resizer): 마우스 드래그 분할 조절
    • +
  • 9. 1-Click 스플릿 프리셋 바: 3:7 / 5:5 / 6:4 / 7:3 퀵 분할 조절 버튼
    • +
  • 10. Live PostgreSQL Ping 레이턴시 칩: 4ms 실시간 핑 상태
    • +
  • 11. SignalR WebSocket 소켓 칩: 라이브 소켓 연결 지표
    • +
  • 12. DbUp 마이그레이션 태그: DB 마이그레이션 태그 v2026.07.25
    • +
  • 13. 실시간 파이프라인 로그 터미널 창: 엔진 트랜잭션 스트리밍
    • +
  • 14. 비동기 배치 실행 & 진행률 바: 0~100% 모의 트랜잭션 게이지
    • +
  • 15. 낙관적 락 버전 인디케이터: 동시성 충돌 방지 v1~v5
    • +
  • 16. 실시간 텔레메트리 바: CPU/RAM/DB Pool 현장감 지표
    • +
  • 17. 검색 & 핫키 툴바: F3/F4/F5/F7 더존 표준 핫키
    • +
  • 18. 카테고리 탭 바: ALL/BUDGET/FACTOR/RISK/ACCOUNTING 탭
    • +
  • 19. AG Grid 데이터 테이블: 정렬, 필터, 단일 행 선택, Status Chips
    • +
  • 20. 페이지네이션 바: Page 1 of 1 건수 및 페이지 컨트롤러
    • +
  • 21. 더존 6대 표준 입력 마스크: Input, ComboBox, Radio, TextArea 등
    • +
  • 22. 읽기/편집 모드 토글 & 감사 이력 & 엑셀 팝업: Audit Trail, Excel/CSV
@@ -617,6 +709,26 @@ onMounted(loadData); user-select: none; } +.quick-modal-triggers { + display: flex; + gap: 4px; + margin-left: 12px; +} + +.btn-quick-domain { + font-size: 0.65rem; + font-weight: 700; + padding: 2px 6px; + border: none; + border-radius: 3px; + color: white; + cursor: pointer; +} + +.btn-quick-domain.oms { background: #2563EB; } +.btn-quick-domain.wms { background: #166534; } +.btn-quick-domain.erp { background: #6B46C1; } + .category-tabs-bar { display: flex; justify-content: space-between; @@ -657,6 +769,7 @@ onMounted(loadData); .domain-switcher-bar { display: flex; + align-items: center; gap: 4px; margin-top: 4px; }