117 lines
3.2 KiB
Vue
117 lines
3.2 KiB
Vue
<script setup>
|
|
import PdfViewer from "../../../../../Views/Components/PdfViewer.vue";
|
|
import DistanceAllowance from "./DistanceAllowance.vue";
|
|
import {onMounted, reactive} from 'vue';
|
|
|
|
const props = defineProps({
|
|
newInvoice: {
|
|
type: Object,
|
|
required: true
|
|
},
|
|
costUnits: {
|
|
type: Object,
|
|
required: true
|
|
}
|
|
})
|
|
|
|
const emit = defineEmits(['submit', 'cancel'])
|
|
|
|
const formData = reactive({
|
|
type_internal: props.newInvoice.internalType || '',
|
|
cost_unit: props.newInvoice.costUnitId || '',
|
|
amount: props.newInvoice.amountPlain || '',
|
|
reason_of_correction: '',
|
|
})
|
|
|
|
const submitForm = () => {
|
|
emit('submit', formData)
|
|
}
|
|
|
|
|
|
const invoiceTypeCollection = reactive({
|
|
invoiceTypes: {}
|
|
});
|
|
|
|
|
|
onMounted(async () => {
|
|
const response = await fetch('/api/v1/core/retrieve-invoice-types-all');
|
|
const data = await response.json();
|
|
Object.assign(invoiceTypeCollection, data);
|
|
});
|
|
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<form @submit.prevent="submitForm">
|
|
<table style="width: 100%; font-family: sans-serif;">
|
|
<tr>
|
|
<td style="width: 150px;">Rechnungstyp:</td>
|
|
<td style="width: 450px;">
|
|
<select v-model="formData.type_internal" class="width-half-full">
|
|
<option v-for="invoiceType in invoiceTypeCollection.invoiceTypes" :value="invoiceType.slug">{{invoiceType.name}}</option>
|
|
</select>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>Kostenstelle:</td>
|
|
<td>
|
|
<select v-model="formData.cost_unit" class="width-half-full">
|
|
<option v-for="costUnit in props.costUnits" :value="costUnit.id">{{costUnit.name}}</option>
|
|
</select>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>Gesamtbetrag:</td>
|
|
<td>
|
|
<input type="text" v-model="formData.amount" class="width-small" /> Euro
|
|
</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>Grund der Korrektur:</td>
|
|
<td>
|
|
<input type="text" v-model="formData.reason_of_correction" class="width-half-full" />
|
|
</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td colspan="2">
|
|
<input type="checkbox" v-model="formData.duplicate" id="mareike_correct_invoice_duplicate" />
|
|
<label for="mareike_correct_invoice_duplicate">Kopie zur Weiterbearbeitung erstellen</label>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td colspan="2">
|
|
<input type="submit" value="Speichern und freigeben" class="button mareike-accept-button" />
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</form>
|
|
<br /><br />
|
|
|
|
<PdfViewer :url="'/api/v1/invoice/showReceipt/' + props.newInvoice.id" v-if="props.newInvoice.documentFilename !== null" />
|
|
<DistanceAllowance v-else :invoice="props.newInvoice" />
|
|
</template>
|
|
|
|
<style>
|
|
.width-full {
|
|
width: 100%;
|
|
}
|
|
|
|
.width-almost-full {
|
|
width: calc(100% - 75px);
|
|
}
|
|
|
|
.width-half-full {
|
|
width: 50%;
|
|
}
|
|
|
|
.width-small {
|
|
width: 100px;
|
|
}
|
|
</style>
|