181 lines
4.4 KiB
Vue
181 lines
4.4 KiB
Vue
<template>
|
|
<div id="main">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div
|
|
class="previewDoc"
|
|
>
|
|
<!-- <embed
|
|
:src="fileurl + '#toolbar=0&navpanes=0&scrollbar=0&statusbar=0&messages=0&scrollbar=0'"
|
|
width="40vw"
|
|
height="50vh"
|
|
>-->
|
|
</div>
|
|
<div
|
|
class="inputData"
|
|
>
|
|
<UFormGroup label="Lieferant:" required>
|
|
<USelectMenu
|
|
v-model="invoice.vendor"
|
|
:options="vendors"
|
|
option-attribute="name"
|
|
value-attribute="id"
|
|
searchable
|
|
:search-attributes="['name','vendorNumber']"
|
|
>
|
|
|
|
</USelectMenu>
|
|
</UFormGroup>
|
|
|
|
<UFormGroup label="Rechnungsreferenz:" required>
|
|
<UInput
|
|
v-model="invoice.reference"
|
|
/>
|
|
</UFormGroup>
|
|
|
|
<UFormGroup label="Rechnungsdatum:" required>
|
|
<UPopover :popper="{ placement: 'bottom-start' }">
|
|
<UButton icon="i-heroicons-calendar-days-20-solid" :label="labelDate" />
|
|
|
|
<template #panel="{ close }">
|
|
<LazyDatePicker v-model="invoice.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="labelDueDate" />
|
|
|
|
<template #panel="{ close }">
|
|
<LazyDatePicker v-model="invoice.dueDate" @close="close" />
|
|
</template>
|
|
</UPopover>
|
|
</UFormGroup>
|
|
|
|
<UFormGroup label="Beschreibung:" required>
|
|
<UTextarea
|
|
v-model="invoice.description"
|
|
/>
|
|
</UFormGroup>
|
|
|
|
<!-- <UButton @click="vendorInvoiceData.lineItems.push({})">+ Reihe</UButton>-->
|
|
|
|
|
|
<!-- <div v-for="lineItem in vendorInvoiceData.lineItems" class="lineItemRow">
|
|
<UFormGroup label="Text:" required>
|
|
<UInput v-model="lineItem.text"/>
|
|
</UFormGroup>
|
|
<UFormGroup label="Produkt:" required>
|
|
<UInput v-model="lineItem.productId"/>
|
|
</UFormGroup>
|
|
<UFormGroup label="Projekt:" required>
|
|
<UInput v-model="lineItem.projectId"/>
|
|
</UFormGroup>
|
|
<UFormGroup label="Anzahl:" required>
|
|
<UInput v-model="lineItem.quantity"/>
|
|
</UFormGroup>
|
|
<UFormGroup label="Einheit:" required>
|
|
<UInput v-model="lineItem.unit"/>
|
|
</UFormGroup>
|
|
<UFormGroup label="Einzelpreis:" required>
|
|
<UInput v-model="lineItem.unitPriceNet"/>
|
|
</UFormGroup>
|
|
<UFormGroup label="USt:" required>
|
|
<UInput v-model="lineItem.vat"/>
|
|
</UFormGroup>
|
|
<UFormGroup label="Rabatt:" required>
|
|
<UInput v-model="lineItem.discount"/>
|
|
</UFormGroup>
|
|
<UFormGroup label="Buchungskonto:" required>
|
|
<UInput v-model="lineItem.skrAccountId"/>
|
|
</UFormGroup>
|
|
<UFormGroup label="Positionspreis:" required>
|
|
<UInput disabled/>
|
|
</UFormGroup>
|
|
</div>-->
|
|
{{vendorInvoiceData}}<br>
|
|
{{currentVendorInvoice}}<br>
|
|
{{getDocumentById(78)}}
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
const supabase = useSupabaseClient()
|
|
const route = useRoute()
|
|
|
|
const {vendors} = storeToRefs(useDataStore())
|
|
const {getVendorInvoiceById, getDocumentById} = useDataStore()
|
|
|
|
|
|
const invoice = ref({
|
|
vendor: 0,
|
|
reference: "",
|
|
date: new Date(),
|
|
dueDate: new Date(),
|
|
paymentType: "",
|
|
description: "",
|
|
state: "Entwurf"
|
|
})
|
|
|
|
const labelDate = computed(() => invoice.value.date.toLocaleDateString('de-de', { weekday: 'long', year: 'numeric', month: 'short', day: 'numeric' }))
|
|
const labelDueDate = computed(() => invoice.value.dueDate.toLocaleDateString('de-de', { weekday: 'long', year: 'numeric', month: 'short', day: 'numeric' }))
|
|
|
|
|
|
|
|
const currentVendorInvoice = ref(getVendorInvoiceById(Number(route.params.id)))
|
|
console.log(currentVendorInvoice)
|
|
const currentDocument = getDocumentById(Number(currentVendorInvoice.document))
|
|
console.log(currentDocument)
|
|
//console.log(document)
|
|
|
|
//let fileurl = (await supabase.storage.from('documents').createSignedUrl(document.path,60*60)).data.signedUrl
|
|
|
|
|
|
let vendorInvoiceData = ref({
|
|
reference: "",
|
|
date: "",
|
|
vendorId: 0,
|
|
lineItems: []
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
<style scoped>
|
|
#main {
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
|
|
.previewDoc {
|
|
width: 50vw;
|
|
min-height: 80vh;
|
|
}
|
|
|
|
.previewDoc embed {
|
|
width: 90%;
|
|
height: 100%;
|
|
}
|
|
|
|
.inputData {
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.lineItemRow {
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
</style> |