b24014/ITAM-test
Template
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 직무별 기준 사양 등록 시 부품 마스터 자동완성 검색 및 성능 점수 실시간 자동 계산 기능 추가

Browse Source
This commit is contained in:
주완기
2026-06-15 13:29:10 +09:00
parent 8c406fd0b8
commit 05e23883b8
1 changed files with 118 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

128
src/components/Modal/JobSpecModal.ts
View File

@@ -2,6 +2,7 @@ import { state, saveJobSpec, deleteJobSpec } from '../../core/state';
import { BaseModal } from './BaseModal'; import { BaseModal } from './BaseModal';
import { setFieldValue } from './ModalUtils'; import { setFieldValue } from './ModalUtils';
import { UI_TEXT } from '../../core/schema'; import { UI_TEXT } from '../../core/schema';
import { calculatePcScoreDeductive } from '../../core/utils';
class JobSpecModal extends BaseModal { class JobSpecModal extends BaseModal {
constructor() { constructor() {
@@ -14,6 +15,39 @@ class JobSpecModal extends BaseModal {
return ` return `
<div id="job-spec-asset-modal" class="modal-overlay hidden"> <div id="job-spec-asset-modal" class="modal-overlay hidden">
<style>
.autocomplete-list {
position: absolute;
top: 100%;
left: 0;
right: 0;
max-height: 150px;
overflow-y: auto;
background-color: white;
border: 1px solid var(--border-color, #E2E8F0);
border-top: none;
border-radius: 0 0 4px 4px;
z-index: 1000;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
.autocomplete-item {
padding: 8px 12px;
font-size: 13px;
color: #334155;
cursor: pointer;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.autocomplete-item:hover {
background-color: #F1F5F9;
color: #1E5149;
font-weight: 600;
}
.hidden {
display: none !important;
}
</style>
<div class="modal-content" style="max-width: 500px; width: 100%;"> <div class="modal-content" style="max-width: 500px; width: 100%;">
<div class="modal-header"> <div class="modal-header">
<h2 id="job-spec-modal-title" style="margin: 0; font-size: 18px; font-weight: 800; color: white;">\${this.title}</h2> <h2 id="job-spec-modal-title" style="margin: 0; font-size: 18px; font-weight: 800; color: white;">\${this.title}</h2>
@@ -28,24 +62,27 @@ class JobSpecModal extends BaseModal {
<input type="text" id="job-spec-job-name" name="job_name" placeholder="예: BIM 모델러, 개발자, 엔지니어" required style="\${inputStyle} width: 100%;" /> <input type="text" id="job-spec-job-name" name="job_name" placeholder="예: BIM 모델러, 개발자, 엔지니어" required style="\${inputStyle} width: 100%;" />
</div> </div>
<div class="form-group" style="display: flex; flex-direction: column; gap: 6px;"> <div class="form-group" style="display: flex; flex-direction: column; gap: 6px; position: relative;">
<label style="font-size: 11px; font-weight: 700; color: var(--text-muted);">권장 CPU 사양</label> <label style="font-size: 11px; font-weight: 700; color: var(--text-muted);">권장 CPU 사양</label>
<input type="text" id="job-spec-cpu-standard" name="cpu_standard" placeholder="예: Intel Core i7-13700 이상" required style="\${inputStyle} width: 100%;" /> <input type="text" id="job-spec-cpu-standard" name="cpu_standard" placeholder="CPU 검색..." required style="\${inputStyle} width: 100%;" autocomplete="off" />
<div id="job-spec-cpu-autocomplete" class="autocomplete-list hidden"></div>
</div> </div>
<div class="form-group" style="display: flex; flex-direction: column; gap: 6px;"> <div class="form-group" style="display: flex; flex-direction: column; gap: 6px; position: relative;">
<label style="font-size: 11px; font-weight: 700; color: var(--text-muted);">권장 RAM 사양</label> <label style="font-size: 11px; font-weight: 700; color: var(--text-muted);">권장 RAM 사양</label>
<input type="text" id="job-spec-ram-standard" name="ram_standard" placeholder="예: 32GB" required style="\${inputStyle} width: 100%;" /> <input type="text" id="job-spec-ram-standard" name="ram_standard" placeholder="RAM 검색..." required style="\${inputStyle} width: 100%;" autocomplete="off" />
<div id="job-spec-ram-autocomplete" class="autocomplete-list hidden"></div>
</div> </div>
<div class="form-group" style="display: flex; flex-direction: column; gap: 6px;"> <div class="form-group" style="display: flex; flex-direction: column; gap: 6px; position: relative;">
<label style="font-size: 11px; font-weight: 700; color: var(--text-muted);">권장 GPU 사양</label> <label style="font-size: 11px; font-weight: 700; color: var(--text-muted);">권장 GPU 사양</label>
<input type="text" id="job-spec-gpu-standard" name="gpu_standard" placeholder="예: RTX 4070 이상" required style="\${inputStyle} width: 100%;" /> <input type="text" id="job-spec-gpu-standard" name="gpu_standard" placeholder="GPU 검색..." required style="\${inputStyle} width: 100%;" autocomplete="off" />
<div id="job-spec-gpu-autocomplete" class="autocomplete-list hidden"></div>
</div> </div>
<div class="form-group" style="display: flex; flex-direction: column; gap: 6px;"> <div class="form-group" style="display: flex; flex-direction: column; gap: 6px;">
<label style="font-size: 11px; font-weight: 700; color: var(--text-muted);">성능 기준 점수 (이상)</label> <label style="font-size: 11px; font-weight: 700; color: var(--text-muted);">성능 기준 점수 (이상, 자동 계산됨)</label>
<input type="number" id="job-spec-min-score" name="min_score" placeholder="예: 80" required style="\${inputStyle} width: 100%;" /> <input type="number" id="job-spec-min-score" name="min_score" placeholder="자동 계산 대기..." required style="\${inputStyle} width: 100%;" readonly />
</div> </div>
<div class="form-group" style="display: flex; flex-direction: column; gap: 6px;"> <div class="form-group" style="display: flex; flex-direction: column; gap: 6px;">
@@ -122,6 +159,76 @@ class JobSpecModal extends BaseModal {
onSave(); this.close(); closeModals(); onSave(); this.close(); closeModals();
} }
}); });
// 자동완성 바인딩
this.bindAutocomplete('job-spec-cpu-standard', 'job-spec-cpu-autocomplete', 'CPU');
this.bindAutocomplete('job-spec-ram-standard', 'job-spec-ram-autocomplete', 'RAM');
this.bindAutocomplete('job-spec-gpu-standard', 'job-spec-gpu-autocomplete', 'GPU');
// 실시간 점수 계산 이벤트 바인딩
const inputs = ['job-spec-cpu-standard', 'job-spec-ram-standard', 'job-spec-gpu-standard'];
inputs.forEach(id => {
const el = document.getElementById(id);
el?.addEventListener('input', () => this.updateMinScore());
el?.addEventListener('change', () => this.updateMinScore());
});
}
private bindAutocomplete(inputId: string, autocompleteId: string, category: string) {
const input = document.getElementById(inputId) as HTMLInputElement;
const list = document.getElementById(autocompleteId) as HTMLDivElement;
if (!input || !list) return;
const showList = (filterText: string = '') => {
if (!this.isEditMode) return;
const items = (state.masterData.partsMaster || []).filter((c: any) => c.category === category);
const filtered = filterText
? items.filter((c: any) => c.component_name.toLowerCase().includes(filterText.toLowerCase()))
: items;
if (filtered.length === 0) {
list.innerHTML = '<div class="autocomplete-item" style="color: #94a3b8; cursor: default;">검색 결과 없음</div>';
} else {
list.innerHTML = filtered.map((c: any) => `<div class="autocomplete-item" data-val="${c.component_name}">${c.component_name}</div>`).join('');
}
list.classList.remove('hidden');
};
input.addEventListener('focus', () => {
showList(input.value);
});
input.addEventListener('input', () => {
showList(input.value);
});
list.addEventListener('mousedown', (e) => {
const item = (e.target as HTMLElement).closest('.autocomplete-item');
if (item && item.getAttribute('data-val')) {
input.value = item.getAttribute('data-val') || '';
list.classList.add('hidden');
this.updateMinScore();
}
});
document.addEventListener('mousedown', (e) => {
if (e.target !== input && !list.contains(e.target as Node)) {
list.classList.add('hidden');
}
});
}
private updateMinScore(): void {
const cpu = (document.getElementById('job-spec-cpu-standard') as HTMLInputElement)?.value || '';
const ram = (document.getElementById('job-spec-ram-standard') as HTMLInputElement)?.value || '';
const gpu = (document.getElementById('job-spec-gpu-standard') as HTMLInputElement)?.value || '';
const score = calculatePcScoreDeductive(cpu, ram, gpu, '');
const minScoreEl = document.getElementById('job-spec-min-score') as HTMLInputElement;
if (minScoreEl) {
minScoreEl.value = score.toString();
}
} }
protected fillFormData(asset: any): void { protected fillFormData(asset: any): void {
@@ -130,7 +237,7 @@ class JobSpecModal extends BaseModal {
setFieldValue('job-spec-cpu-standard', asset.cpu_standard || ''); setFieldValue('job-spec-cpu-standard', asset.cpu_standard || '');
setFieldValue('job-spec-ram-standard', asset.ram_standard || ''); setFieldValue('job-spec-ram-standard', asset.ram_standard || '');
setFieldValue('job-spec-gpu-standard', asset.gpu_standard || ''); setFieldValue('job-spec-gpu-standard', asset.gpu_standard || '');
setFieldValue('job-spec-min-score', asset.min_score !== undefined ? asset.min_score.toString() : '0'); setFieldValue('job-spec-min-score', asset.min_score !== undefined ? asset.min_score.toString() : '100');
setFieldValue('job-spec-remarks', asset.remarks || ''); setFieldValue('job-spec-remarks', asset.remarks || '');
} }
@@ -148,7 +255,6 @@ class JobSpecModal extends BaseModal {
const deleteBtn = document.getElementById('btn-delete-job-spec-asset')!; const deleteBtn = document.getElementById('btn-delete-job-spec-asset')!;
const saveBtn = document.getElementById('btn-save-job-spec-asset')!; const saveBtn = document.getElementById('btn-save-job-spec-asset')!;
// 추가 모드일 때는 삭제 버튼 숨김
deleteBtn.style.display = (mode === 'add') ? 'none' : 'block'; deleteBtn.style.display = (mode === 'add') ? 'none' : 'block';
if (mode === 'add') { if (mode === 'add') {
@@ -162,6 +268,8 @@ class JobSpecModal extends BaseModal {
saveBtn.textContent = '수정'; saveBtn.textContent = '수정';
saveBtn.style.display = 'block'; saveBtn.style.display = 'block';
} }
this.updateMinScore();
} }
} }