- 분류 관리: 대분류 선택·소분류 들여쓰기(드래그 정렬 유지) - 입력/예산/고정지출 분류 드롭다운 대분류 optgroup 그룹핑(값은 소분류명) - 대시보드: 파이는 소분류 기준 + 대분류 합계 롤업 표시 - 릴리스 노트 33 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
@@ -44,6 +44,20 @@ const categoryOptions = computed(() => {
|
||||
if (form.category && !names.includes(form.category)) names.unshift(form.category)
|
||||
return names
|
||||
})
|
||||
// 대분류로 그룹핑 (소분류=optgroup 옵션 / 자식없는 대분류=단독 옵션)
|
||||
const categoryGroups = computed(() => {
|
||||
const list = categories.value.filter((c) => c.type === 'EXPENSE')
|
||||
const groups = []
|
||||
if (form.category && !list.some((c) => c.name === form.category)) {
|
||||
groups.push({ key: '_cur', label: null, options: [form.category] })
|
||||
}
|
||||
for (const m of list.filter((c) => c.parentId == null)) {
|
||||
const children = list.filter((c) => c.parentId === m.id)
|
||||
if (children.length) groups.push({ key: 'g' + m.id, label: m.name, options: children.map((c) => c.name) })
|
||||
else groups.push({ key: 'i' + m.id, label: null, options: [m.name] })
|
||||
}
|
||||
return groups
|
||||
})
|
||||
|
||||
const periodLabel = computed(() => `${year.value}년 ${String(month.value).padStart(2, '0')}월`)
|
||||
|
||||
@@ -305,7 +319,14 @@ onMounted(() => {
|
||||
<label>카테고리
|
||||
<select v-model="form.category" :disabled="submitting">
|
||||
<option value="">(선택)</option>
|
||||
<option v-for="c in categoryOptions" :key="c" :value="c">{{ c }}</option>
|
||||
<template v-for="g in categoryGroups" :key="g.key">
|
||||
<optgroup v-if="g.label" :label="g.label">
|
||||
<option v-for="n in g.options" :key="n" :value="n">{{ n }}</option>
|
||||
</optgroup>
|
||||
<template v-else>
|
||||
<option v-for="n in g.options" :key="n" :value="n">{{ n }}</option>
|
||||
</template>
|
||||
</template>
|
||||
</select>
|
||||
</label>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user