342 lines
8.2 KiB
Vue
342 lines
8.2 KiB
Vue
<template>
|
|
<div id="main">
|
|
|
|
<div
|
|
class="previewDoc"
|
|
>
|
|
<embed
|
|
v-if="currentDocument"
|
|
:src="currentDocument.url + '#toolbar=0&navpanes=0&scrollbar=0&statusbar=0&messages=0&scrollbar=0'"
|
|
|
|
>
|
|
|
|
</div>
|
|
<div
|
|
class="inputData"
|
|
>
|
|
<UFormGroup label="Lieferant:" required>
|
|
<USelectMenu
|
|
v-model="itemInfo.vendor"
|
|
:options="dataStore.vendors"
|
|
option-attribute="name"
|
|
value-attribute="id"
|
|
searchable
|
|
:search-attributes="['name','vendorNumber']"
|
|
>
|
|
<template #label>
|
|
{{dataStore.vendors.find(vendor => vendor.id === itemInfo.vendor) ? dataStore.vendors.find(vendor => vendor.id === itemInfo.vendor).name : 'Lieferant auswählen'}}
|
|
</template>
|
|
</USelectMenu>
|
|
</UFormGroup>
|
|
|
|
<UFormGroup
|
|
class="mt-3"
|
|
label="Rechnungsreferenz:"
|
|
required
|
|
>
|
|
<UInput
|
|
v-model="itemInfo.reference"
|
|
/>
|
|
</UFormGroup>
|
|
|
|
<InputGroup class="mt-3" gap="2">
|
|
<UFormGroup label="Rechnungsdatum:" required>
|
|
<UPopover :popper="{ placement: 'bottom-start' }">
|
|
<UButton icon="i-heroicons-calendar-days-20-solid" :label="itemInfo.date ? dayjs(itemInfo.date).format('DD.MM.YYYY') : 'Datum auswählen'" />
|
|
|
|
<template #panel="{ close }">
|
|
<LazyDatePicker v-model="itemInfo.date" @close="close" />
|
|
</template>
|
|
</UPopover>
|
|
</UFormGroup>
|
|
|
|
<UFormGroup label="Fälligkeitsdatum:" required>
|
|
<UPopover :popper="{ placement: 'bottom-start' }">
|
|
<UButton icon="i-heroicons-calendar-days-20-solid" :label="itemInfo.dueDate ? dayjs(itemInfo.dueDate).format('DD.MM.YYYY') : 'Datum auswählen'" />
|
|
|
|
<template #panel="{ close }">
|
|
<LazyDatePicker v-model="itemInfo.dueDate" @close="close" />
|
|
</template>
|
|
</UPopover>
|
|
</UFormGroup>
|
|
</InputGroup>
|
|
|
|
|
|
|
|
<UFormGroup label="Beschreibung:" required>
|
|
<UTextarea
|
|
v-model="itemInfo.description"
|
|
/>
|
|
</UFormGroup>
|
|
|
|
<div
|
|
class="my-3"
|
|
v-for="(item,index) in itemInfo.accounts"
|
|
>
|
|
|
|
<UFormGroup
|
|
label="Kategorie"
|
|
class=" mb-3"
|
|
>
|
|
<USelectMenu
|
|
:options="dataStore.accounts"
|
|
option-attribute="label"
|
|
value-attribute="id"
|
|
searchable
|
|
:search-attributes="['label']"
|
|
searchable-placeholder="Suche..."
|
|
v-model="item.account"
|
|
>
|
|
<template #label>
|
|
{{dataStore.accounts.find(account => account.id === item.account) ? dataStore.accounts.find(account => account.id === item.account).label : "Keine Kategorie ausgewählt" }}
|
|
</template>
|
|
|
|
</USelectMenu>
|
|
</UFormGroup>
|
|
|
|
<InputGroup>
|
|
<UFormGroup
|
|
label="Steuer"
|
|
class="w-32"
|
|
:help="`Betrag: ${String(item.amountTax).replace('.',',')} €`"
|
|
>
|
|
<USelectMenu
|
|
:options="[19,7,0]"
|
|
v-model="item.taxType"
|
|
>
|
|
<template #label>
|
|
{{item.taxType}} %
|
|
</template>
|
|
</USelectMenu>
|
|
</UFormGroup>
|
|
<UFormGroup
|
|
label="Gesamtbetrag exkl. Steuer in EUR"
|
|
class="flex-auto"
|
|
:help="`Betrag inkl. Steuern: ${String(Number(calculateWithTax(item)) + Number(item.amountNet)).replace('.',',')} €` "
|
|
|
|
>
|
|
<UInput
|
|
type="number"
|
|
step="0.01"
|
|
v-model="item.amountNet"
|
|
>
|
|
<template #trailing>
|
|
<span class="text-gray-500 dark:text-gray-400 text-xs">EUR</span>
|
|
</template>
|
|
</UInput>
|
|
</UFormGroup>
|
|
|
|
|
|
</InputGroup>
|
|
|
|
<UButton
|
|
class="mt-3"
|
|
@click="itemInfo.accounts = [...itemInfo.accounts.slice(0,index+1),{account:null, amountNet: null, amountTax:null, taxType: null} , ...itemInfo.accounts.slice(index+1)]"
|
|
>
|
|
Position hinzufügen
|
|
</UButton>
|
|
<UButton
|
|
v-if="index !== 0"
|
|
class="mt-3"
|
|
variant="ghost"
|
|
color="rose"
|
|
@click="itemInfo.accounts = itemInfo.accounts.filter((account,itemIndex) => itemIndex !== index)"
|
|
>
|
|
Position entfernen
|
|
</UButton>
|
|
</div>
|
|
|
|
|
|
<!--
|
|
<UFormGroup label="Kategorie:" required>
|
|
<USelectMenu
|
|
:options="dataStore.accounts"
|
|
option-attribute="label"
|
|
value-attribute="number"
|
|
searchable
|
|
:search-attributes="['label']"
|
|
v-model="itemInfo.account"
|
|
>
|
|
|
|
</USelectMenu>
|
|
</UFormGroup>
|
|
<UFormGroup label="Betrag:" required>
|
|
<UInput
|
|
type="number"
|
|
step="0.01"
|
|
v-model="itemInfo.amount"
|
|
>
|
|
<template #trailing>
|
|
<span class="text-gray-500 dark:text-gray-400 text-xs">EUR</span>
|
|
</template>
|
|
</UInput>
|
|
</UFormGroup>-->
|
|
|
|
<InputGroup class="mt-3">
|
|
<UButton
|
|
@click="updateItem"
|
|
>
|
|
Speichern
|
|
</UButton>
|
|
</InputGroup>
|
|
|
|
<DevOnly>
|
|
{{itemInfo}}<br>
|
|
{{currentVendorInvoice}}<br>
|
|
{{currentDocument}}
|
|
</DevOnly>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import InputGroup from "~/components/InputGroup.vue";
|
|
import dayjs from "dayjs";
|
|
|
|
const dataStore = useDataStore()
|
|
const supabase = useSupabaseClient()
|
|
const route = useRoute()
|
|
const toast = useToast()
|
|
|
|
const {vendors} = storeToRefs(useDataStore())
|
|
const {fetchVendorInvoices} = useDataStore()
|
|
|
|
let currentVendorInvoice = null
|
|
let currentDocument = ref(null)
|
|
//Working
|
|
const mode = ref(route.params.mode || "show")
|
|
|
|
const types = [
|
|
{
|
|
number: "3200",
|
|
label: "Wareneinkauf",
|
|
description: "Der Einkauf von Produkten umfasst auch die Kosten für die Bearbeitung/Verarbeitung und den Handel"
|
|
},{
|
|
number: "3000",
|
|
label: "Materialeinkauf",
|
|
description: "Hierzu gehören sämtliche Kosten, die im Rahmen der Produktion für Roh, Hilfs- und Betriebsstoffe anfallen."
|
|
},{
|
|
number: "3800",
|
|
label: "Bezugsnebenkosten",
|
|
description: "Dazu zählen alle Beschaffungskosten für Material und Waren bzw. Produkte"
|
|
},{
|
|
number: "4930",
|
|
label: "Bürobedarf",
|
|
description: ""
|
|
},{
|
|
number: "4964",
|
|
label: "Lizenzen und Konzessionen",
|
|
description: ""
|
|
},{
|
|
number: "4925",
|
|
label: "Internet",
|
|
description: ""
|
|
},{
|
|
number: "4920",
|
|
label: "Telekommunikation",
|
|
description: ""
|
|
},{
|
|
number: "4530",
|
|
label: "Kraftstoff/Ladestrom",
|
|
description: ""
|
|
},{
|
|
number: "4969",
|
|
label: "Müllgebühren",
|
|
description: ""
|
|
}
|
|
]
|
|
|
|
|
|
|
|
|
|
//Functions
|
|
const setupPage = async () => {
|
|
if(mode.value === "show" || mode.value === "edit"){
|
|
currentVendorInvoice = await dataStore.getVendorInvoiceById(Number(useRoute().params.id))
|
|
currentDocument.value = await dataStore.getDocumentById(currentVendorInvoice.document)
|
|
}
|
|
|
|
if(mode.value === "edit") itemInfo.value = currentVendorInvoice
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
const itemInfo = ref({
|
|
vendor: 0,
|
|
reference: "",
|
|
date: null,
|
|
dueDate: null,
|
|
paymentType: "",
|
|
description: "",
|
|
state: "Entwurf",
|
|
accounts: [
|
|
{
|
|
account: null,
|
|
amountNet: null,
|
|
amountTax: null,
|
|
taxType: null
|
|
}
|
|
]
|
|
})
|
|
|
|
const calculateWithTax = (item) => {
|
|
item.amountTax = Number((item.amountNet / 100 * Number(item.taxType)).toFixed(2))
|
|
|
|
return item.amountTax
|
|
}
|
|
|
|
|
|
const updateItem = async () => {
|
|
const {error} = await supabase
|
|
.from("vendorInvoices")
|
|
.update(itemInfo.value)
|
|
.eq('id',itemInfo.value.id)
|
|
if(error) {
|
|
console.log(error)
|
|
} else {
|
|
mode.value = "show"
|
|
/*itemInfo.value = {
|
|
id: 0,
|
|
}*/
|
|
toast.add({title: "Eingangsrechnung erfolgreich gespeichert"})
|
|
dataStore.fetchVendorInvoices()
|
|
}
|
|
}
|
|
|
|
|
|
|
|
setupPage()
|
|
</script>
|
|
|
|
<style scoped>
|
|
#main {
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
|
|
.previewDoc {
|
|
min-width: 50vw;
|
|
min-height: 80vh;
|
|
}
|
|
|
|
.previewDoc embed {
|
|
width: 90%;
|
|
height: 100%;
|
|
}
|
|
|
|
.inputData {
|
|
max-width: 40vw;
|
|
}
|
|
|
|
|
|
|
|
|
|
.lineItemRow {
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
</style> |