Manuelle Buchungen in Statementallocations integrieren
This commit is contained in:
282
frontend/pages/accounting/manual-bookings.vue
Normal file
282
frontend/pages/accounting/manual-bookings.vue
Normal file
@@ -0,0 +1,282 @@
|
||||
<script setup>
|
||||
import dayjs from "dayjs"
|
||||
|
||||
const toast = useToast()
|
||||
|
||||
const loading = ref(true)
|
||||
const saving = ref(false)
|
||||
const accounts = ref([])
|
||||
const customers = ref([])
|
||||
const vendors = ref([])
|
||||
const ownaccounts = ref([])
|
||||
const bookings = ref([])
|
||||
|
||||
const form = reactive({
|
||||
manualBookingDate: dayjs().format("YYYY-MM-DD"),
|
||||
amount: null,
|
||||
debit: "",
|
||||
credit: "",
|
||||
description: ""
|
||||
})
|
||||
|
||||
const entryOptions = computed(() => [
|
||||
...accounts.value.map((item) => ({
|
||||
key: `account:${item.id}`,
|
||||
label: `${item.number} - ${item.label}`,
|
||||
number: item.number,
|
||||
name: item.label,
|
||||
type: "Sachkonto"
|
||||
})),
|
||||
...vendors.value.map((item) => ({
|
||||
key: `vendor:${item.id}`,
|
||||
label: `${item.vendorNumber || "ohne Nr."} - ${item.name}`,
|
||||
number: item.vendorNumber,
|
||||
name: item.name,
|
||||
type: "Kreditor"
|
||||
})),
|
||||
...customers.value.map((item) => ({
|
||||
key: `customer:${item.id}`,
|
||||
label: `${item.customerNumber || "ohne Nr."} - ${item.name}`,
|
||||
number: item.customerNumber,
|
||||
name: item.name,
|
||||
type: "Debitor"
|
||||
})),
|
||||
...ownaccounts.value.map((item) => ({
|
||||
key: `ownaccount:${item.id}`,
|
||||
label: `${item.number} - ${item.name}`,
|
||||
number: item.number,
|
||||
name: item.name,
|
||||
type: "Zusätzliches Konto"
|
||||
}))
|
||||
])
|
||||
|
||||
const selectedDebit = computed(() => entryOptions.value.find((item) => item.key === form.debit))
|
||||
const selectedCredit = computed(() => entryOptions.value.find((item) => item.key === form.credit))
|
||||
|
||||
const displayCurrency = (value) => `${Number(value || 0).toFixed(2).replace(".", ",")} €`
|
||||
|
||||
const getBookingSide = (booking, side) => {
|
||||
const map = side === "credit"
|
||||
? [
|
||||
["contraAccount", "Sachkonto"],
|
||||
["contraVendor", "Kreditor"],
|
||||
["contraCustomer", "Debitor"],
|
||||
["contraOwnaccount", "Zusätzliches Konto"]
|
||||
]
|
||||
: [
|
||||
["account", "Sachkonto"],
|
||||
["vendor", "Kreditor"],
|
||||
["customer", "Debitor"],
|
||||
["ownaccount", "Zusätzliches Konto"]
|
||||
]
|
||||
|
||||
for (const [key, type] of map) {
|
||||
const item = booking[key]
|
||||
if (!item) continue
|
||||
return {
|
||||
type,
|
||||
number: item.number || item.vendorNumber || item.customerNumber || "",
|
||||
name: item.label || item.name || ""
|
||||
}
|
||||
}
|
||||
|
||||
return { type: "", number: "", name: "" }
|
||||
}
|
||||
|
||||
const buildSidePayload = (sideKey, target) => {
|
||||
const [type, id] = String(sideKey || "").split(":")
|
||||
if (!type || !id) return
|
||||
|
||||
const numericId = type === "ownaccount" ? id : Number(id)
|
||||
if (target === "debit") {
|
||||
if (type === "account") return { account: numericId }
|
||||
if (type === "customer") return { customer: numericId }
|
||||
if (type === "vendor") return { vendor: numericId }
|
||||
if (type === "ownaccount") return { ownaccount: numericId }
|
||||
}
|
||||
|
||||
if (type === "account") return { contraAccount: numericId }
|
||||
if (type === "customer") return { contraCustomer: numericId }
|
||||
if (type === "vendor") return { contraVendor: numericId }
|
||||
if (type === "ownaccount") return { contraOwnaccount: numericId }
|
||||
}
|
||||
|
||||
const loadData = async () => {
|
||||
loading.value = true
|
||||
const [accountRows, customerRows, vendorRows, ownaccountRows, bookingRows] = await Promise.all([
|
||||
useEntities("accounts").selectSpecial("*", "number", true),
|
||||
useEntities("customers").select(),
|
||||
useEntities("vendors").select(),
|
||||
useEntities("ownaccounts").select(),
|
||||
useNuxtApp().$api("/api/banking/manual-bookings")
|
||||
])
|
||||
|
||||
accounts.value = accountRows || []
|
||||
customers.value = customerRows || []
|
||||
vendors.value = vendorRows || []
|
||||
ownaccounts.value = ownaccountRows || []
|
||||
bookings.value = (bookingRows || []).sort((a, b) => String(b.manualBookingDate || "").localeCompare(String(a.manualBookingDate || "")))
|
||||
loading.value = false
|
||||
}
|
||||
|
||||
const resetForm = () => {
|
||||
form.amount = null
|
||||
form.debit = ""
|
||||
form.credit = ""
|
||||
form.description = ""
|
||||
}
|
||||
|
||||
const saveBooking = async () => {
|
||||
if (!form.manualBookingDate || !form.amount || !form.debit || !form.credit) {
|
||||
toast.add({ title: "Bitte Datum, Betrag, Soll und Haben ausfüllen.", color: "warning" })
|
||||
return
|
||||
}
|
||||
|
||||
saving.value = true
|
||||
const payload = {
|
||||
manualBookingDate: form.manualBookingDate,
|
||||
amount: Number(form.amount),
|
||||
description: form.description || "Manuelle Buchung",
|
||||
...buildSidePayload(form.debit, "debit"),
|
||||
...buildSidePayload(form.credit, "credit")
|
||||
}
|
||||
|
||||
await useNuxtApp().$api("/api/banking/statements", {
|
||||
method: "POST",
|
||||
body: { data: payload }
|
||||
})
|
||||
|
||||
toast.add({ title: "Manuelle Buchung erstellt." })
|
||||
resetForm()
|
||||
await loadData()
|
||||
saving.value = false
|
||||
}
|
||||
|
||||
const deleteBooking = async (booking) => {
|
||||
await useNuxtApp().$api(`/api/banking/statements/${booking.id}`, { method: "DELETE" })
|
||||
toast.add({ title: "Manuelle Buchung gelöscht." })
|
||||
await loadData()
|
||||
}
|
||||
|
||||
onMounted(loadData)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UDashboardPanelContent>
|
||||
<UDashboardNavbar title="Manuelle Buchungen" :badge="bookings.length" />
|
||||
|
||||
<div class="grid gap-6 lg:grid-cols-[420px_1fr]">
|
||||
<UCard>
|
||||
<template #header>
|
||||
<div>
|
||||
<h2 class="font-semibold text-gray-900 dark:text-white">Neue Soll/Haben-Buchung</h2>
|
||||
<p class="text-sm text-gray-500">Zum Beispiel: Kreditor 70000 an Konto 2742.</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div class="space-y-4">
|
||||
<UFormField label="Buchungsdatum">
|
||||
<UInput v-model="form.manualBookingDate" type="date" />
|
||||
</UFormField>
|
||||
|
||||
<UFormField label="Betrag">
|
||||
<UInput v-model="form.amount" type="number" min="0" step="0.01" placeholder="0,00" />
|
||||
</UFormField>
|
||||
|
||||
<UFormField label="Soll">
|
||||
<USelectMenu
|
||||
v-model="form.debit"
|
||||
:items="entryOptions"
|
||||
value-key="key"
|
||||
label-key="label"
|
||||
:search-input="{ placeholder: 'Sachkonto, Debitor oder Kreditor suchen...' }"
|
||||
placeholder="Soll-Konto auswählen"
|
||||
>
|
||||
<template #item-label="{ item }">
|
||||
<span class="font-mono text-xs text-gray-500 mr-2">{{ item.number }}</span>
|
||||
{{ item.name }}
|
||||
<UBadge size="xs" variant="subtle" class="ml-2">{{ item.type }}</UBadge>
|
||||
</template>
|
||||
</USelectMenu>
|
||||
</UFormField>
|
||||
|
||||
<UFormField label="Haben">
|
||||
<USelectMenu
|
||||
v-model="form.credit"
|
||||
:items="entryOptions"
|
||||
value-key="key"
|
||||
label-key="label"
|
||||
:search-input="{ placeholder: 'Sachkonto, Debitor oder Kreditor suchen...' }"
|
||||
placeholder="Haben-Konto auswählen"
|
||||
>
|
||||
<template #item-label="{ item }">
|
||||
<span class="font-mono text-xs text-gray-500 mr-2">{{ item.number }}</span>
|
||||
{{ item.name }}
|
||||
<UBadge size="xs" variant="subtle" class="ml-2">{{ item.type }}</UBadge>
|
||||
</template>
|
||||
</USelectMenu>
|
||||
</UFormField>
|
||||
|
||||
<UAlert
|
||||
v-if="selectedDebit && selectedCredit"
|
||||
color="primary"
|
||||
variant="soft"
|
||||
icon="i-heroicons-arrows-right-left"
|
||||
:title="`${selectedDebit.number} an ${selectedCredit.number}`"
|
||||
:description="`${selectedDebit.name} wird im Soll, ${selectedCredit.name} im Haben gebucht.`"
|
||||
/>
|
||||
|
||||
<UFormField label="Beschreibung">
|
||||
<UTextarea v-model="form.description" placeholder="z. B. Versicherungsentschädigung" autoresize />
|
||||
</UFormField>
|
||||
|
||||
<UButton block color="primary" :loading="saving" @click="saveBooking">
|
||||
Manuelle Buchung erstellen
|
||||
</UButton>
|
||||
</div>
|
||||
</UCard>
|
||||
|
||||
<UCard>
|
||||
<template #header>
|
||||
<div>
|
||||
<h2 class="font-semibold text-gray-900 dark:text-white">Erfasste manuelle Buchungen</h2>
|
||||
<p class="text-sm text-gray-500">Diese Buchungen laufen im DATEV-Export mit.</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div v-if="loading" class="py-10 text-center text-gray-500">Lade Buchungen...</div>
|
||||
<div v-else-if="bookings.length === 0" class="py-10 text-center text-gray-500">
|
||||
Noch keine manuellen Buchungen erfasst.
|
||||
</div>
|
||||
<div v-else class="divide-y divide-gray-100 dark:divide-gray-800">
|
||||
<div v-for="booking in bookings" :key="booking.id" class="py-4 flex items-start justify-between gap-4">
|
||||
<div class="min-w-0">
|
||||
<div class="flex flex-wrap items-center gap-2 text-sm">
|
||||
<span class="font-medium">{{ dayjs(booking.manualBookingDate).format("DD.MM.YYYY") }}</span>
|
||||
<span class="font-mono font-semibold">{{ displayCurrency(booking.amount) }}</span>
|
||||
</div>
|
||||
<div class="mt-1 text-sm text-gray-700 dark:text-gray-200">
|
||||
<span class="font-semibold">Soll:</span>
|
||||
{{ getBookingSide(booking, "debit").number }} - {{ getBookingSide(booking, "debit").name }}
|
||||
</div>
|
||||
<div class="text-sm text-gray-700 dark:text-gray-200">
|
||||
<span class="font-semibold">Haben:</span>
|
||||
{{ getBookingSide(booking, "credit").number }} - {{ getBookingSide(booking, "credit").name }}
|
||||
</div>
|
||||
<div v-if="booking.description" class="mt-1 text-xs text-gray-500 truncate">
|
||||
{{ booking.description }}
|
||||
</div>
|
||||
</div>
|
||||
<UButton
|
||||
icon="i-heroicons-trash"
|
||||
color="error"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
@click="deleteBooking(booking)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</UCard>
|
||||
</div>
|
||||
</UDashboardPanelContent>
|
||||
</template>
|
||||
Reference in New Issue
Block a user